@meethive/components 0.0.3 → 0.0.5

package/lib/DragModal/DragModal.js

@@ -1,212 +1,191 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, ref, useSlots, computed, onMounted, watch } from 'vue'
-import { Button } from 'ant-design-vue'
-import { useLocaleReceiver } from '../LocaleReciver/index'
-import genDragModalStyle from './style'
-
-export default defineComponent({
-  name: 'JDragModal',
-  components: { Button },
-  props: {
-    title: {
-      type: [String, Boolean],
-      default: ''
-    },
-    width: {
-      type: Number,
-      default: 400
-    },
-    height: {
-      type: Number,
-      default: 100
-    },
-    dragRang: {
-      type: [Array, Number],
-      default: [400, 200]
-    },
-    bodyStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    footer: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['cancel', 'heightChange', 'ok', 'visibleChange'],
-  setup(props, { emit }) {
-    const slots = useSlots()
-    const [contextLocale] = useLocaleReceiver('DragModal')
-    const ele = document.body
-
-    const dialog = ref()
-    const header = ref()
-    const baseWidth = ref(props.width || 400)
-    const baseHeight = ref(props.height || 100)
-    const baseLeft = ref(100)
-    const baseTop = ref(100)
-
-    const prefixCls = computed(() => 'jetlinks-drag-modal')
-    const [wrapSSR, hashId] = genDragModalStyle(prefixCls)
-
-    const styles = computed(() => {
-      return {
-        top: getFixed(baseTop.value) + 'px',
-        left: getFixed(baseLeft.value) + 'px',
-        width: getFixed(baseWidth.value) + 'px',
-        height: getFixed(baseHeight.value) + 'px'
-      }
-    })
-
-    const getFixed = (val) => {
-      return Number(val.toFixed(2))
-    }
-
-    const onDrag = () => {
-      let active = false
-      let initialX
-      let initialY
-      let initialWindowX
-      let initialWindowY
-
-      header.value.addEventListener('mousedown', (e) => {
-        active = true
-        initialX = e.clientX
-        initialY = e.clientY
-        initialWindowX = dialog.value.offsetLeft
-        initialWindowY = dialog.value.offsetTop
-      })
-
-      document.addEventListener('mouseup', () => {
-        active = false
-      })
-
-      document.addEventListener('mousemove', (e) => {
-        if (active) {
-          const dx = e.clientX - initialX
-          const dy = e.clientY - initialY
-          baseLeft.value = initialWindowX + dx
-          baseTop.value = initialWindowY + dy
-        }
-      })
-    }
-
-    const handleClear = () => {
-      document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
-
-    const rangeMove = (e, position) => {
-      //移动的方向
-      let x = false
-      let y = false
-      //移动的位置
-      let xp = false
-      let yp = false
-      //移动的正负
-      let xc = false
-      let yc = false
-
-      let disX = e.clientX
-      let disY = e.clientY
-
-      document.onmousemove = (e) => {
-        if (position === 'drag-bottom-right') {
-          x = true
-          y = true
-        } else if (position === 'drag-bottom-left') {
-          x = true
-          y = true
-          xp = true
-          xc = true
-        } else if (position === 'drag-top-right') {
-          x = true
-          y = true
-          yp = true
-          yc = true
-        } else if (position === 'drag-top-left') {
-          x = true
-          y = true
-          xp = true
-          xc = true
-          yp = true
-          yc = true
-        }
-
-        let left = e.clientX - disX
-        let top = e.clientY - disY
-        disX = e.clientX
-        disY = e.clientY
-
-        if (x) {
-          let calc = left
-          if (xc) {
-            calc = -calc
-          }
-          if (xp) {
-            baseLeft.value = baseLeft.value - calc
-          }
-          const width = baseWidth.value + calc
-          baseWidth.value = width <= (props.dragRang )[0] ? (props.dragRang )[0] : width
-        }
-
-        if (y) {
-          let calc = top
-          if (yc) {
-            calc = -calc
-          }
-          if (yp) {
-            baseTop.value = baseTop.value - calc
-          }
-          const height = baseHeight.value + calc
-          baseHeight.value = height <= (props.dragRang )[1] ? (props.dragRang )[1] : height
-          emit('heightChange', baseHeight.value)
-        }
-      }
-      handleClear()
-    }
-
-    const onCancel = () => {
-      emit('cancel')
-      emit('visibleChange', false)
-    }
-
-    const onOk = () => {
-      emit('ok')
-      emit('visibleChange', true)
-    }
-
-    onMounted(() => {
-      if (dialog.value && header.value) {
-        onDrag()
-      }
-      if (ele) {
-        const data = _optionalChain([ele, 'optionalAccess', _ => _.getBoundingClientRect, 'call', _2 => _2()])
-        baseLeft.value = (_optionalChain([data, 'optionalAccess', _3 => _3.right]) - baseWidth.value) / 2 || 0
-        baseTop.value = _optionalChain([data, 'optionalAccess', _4 => _4.top]) + 200 || 0
-      }
-    })
-
-    watch(
-      () => props.height,
-      () => {
-        if (props.height > baseHeight.value) {
-          baseHeight.value = props.height
-        }
-      }
-    )
-
-    return {
-      dialog,
-      header,
-      styles,
-      hashId,
-      contextLocale,
-      rangeMove,
-      onCancel,
-      onOk
-    }
-  }
-})
+import { defineComponent, ref, useSlots, computed, onMounted, watch } from 'vue';
+import { Button } from 'ant-design-vue';
+import { useLocaleReceiver } from '../LocaleReciver/index';
+import genDragModalStyle from './style';
+export default defineComponent({
+  name: 'JDragModal',
+  components: {
+    Button
+  },
+  props: {
+    title: {
+      type: [String, Boolean],
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 400
+    },
+    height: {
+      type: Number,
+      default: 100
+    },
+    dragRang: {
+      type: [Array, Number],
+      default: [400, 200]
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    footer: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['cancel', 'heightChange', 'ok', 'visibleChange'],
+  setup(props, {
+    emit
+  }) {
+    const slots = useSlots();
+    const [contextLocale] = useLocaleReceiver('DragModal');
+    const ele = document.body;
+    const dialog = ref();
+    const header = ref();
+    const baseWidth = ref(props.width || 400);
+    const baseHeight = ref(props.height || 100);
+    const baseLeft = ref(100);
+    const baseTop = ref(100);
+    const prefixCls = computed(() => 'jetlinks-drag-modal');
+    const [wrapSSR, hashId] = genDragModalStyle(prefixCls);
+    const styles = computed(() => {
+      return {
+        top: getFixed(baseTop.value) + 'px',
+        left: getFixed(baseLeft.value) + 'px',
+        width: getFixed(baseWidth.value) + 'px',
+        height: getFixed(baseHeight.value) + 'px'
+      };
+    });
+    const getFixed = val => {
+      return Number(val.toFixed(2));
+    };
+    const onDrag = () => {
+      let active = false;
+      let initialX;
+      let initialY;
+      let initialWindowX;
+      let initialWindowY;
+      header.value.addEventListener('mousedown', e => {
+        active = true;
+        initialX = e.clientX;
+        initialY = e.clientY;
+        initialWindowX = dialog.value.offsetLeft;
+        initialWindowY = dialog.value.offsetTop;
+      });
+      document.addEventListener('mouseup', () => {
+        active = false;
+      });
+      document.addEventListener('mousemove', e => {
+        if (active) {
+          const dx = e.clientX - initialX;
+          const dy = e.clientY - initialY;
+          baseLeft.value = initialWindowX + dx;
+          baseTop.value = initialWindowY + dy;
+        }
+      });
+    };
+    const handleClear = () => {
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+    const rangeMove = (e, position) => {
+      //移动的方向
+      let x = false;
+      let y = false;
+      //移动的位置
+      let xp = false;
+      let yp = false;
+      //移动的正负
+      let xc = false;
+      let yc = false;
+      let disX = e.clientX;
+      let disY = e.clientY;
+      document.onmousemove = e => {
+        if (position === 'drag-bottom-right') {
+          x = true;
+          y = true;
+        } else if (position === 'drag-bottom-left') {
+          x = true;
+          y = true;
+          xp = true;
+          xc = true;
+        } else if (position === 'drag-top-right') {
+          x = true;
+          y = true;
+          yp = true;
+          yc = true;
+        } else if (position === 'drag-top-left') {
+          x = true;
+          y = true;
+          xp = true;
+          xc = true;
+          yp = true;
+          yc = true;
+        }
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
+        disX = e.clientX;
+        disY = e.clientY;
+        if (x) {
+          let calc = left;
+          if (xc) {
+            calc = -calc;
+          }
+          if (xp) {
+            baseLeft.value = baseLeft.value - calc;
+          }
+          const width = baseWidth.value + calc;
+          baseWidth.value = width <= props.dragRang[0] ? props.dragRang[0] : width;
+        }
+        if (y) {
+          let calc = top;
+          if (yc) {
+            calc = -calc;
+          }
+          if (yp) {
+            baseTop.value = baseTop.value - calc;
+          }
+          const height = baseHeight.value + calc;
+          baseHeight.value = height <= props.dragRang[1] ? props.dragRang[1] : height;
+          emit('heightChange', baseHeight.value);
+        }
+      };
+      handleClear();
+    };
+    const onCancel = () => {
+      emit('cancel');
+      emit('visibleChange', false);
+    };
+    const onOk = () => {
+      emit('ok');
+      emit('visibleChange', true);
+    };
+    onMounted(() => {
+      if (dialog.value && header.value) {
+        onDrag();
+      }
+      if (ele) {
+        const data = ele?.getBoundingClientRect();
+        baseLeft.value = (data?.right - baseWidth.value) / 2 || 0;
+        baseTop.value = data?.top + 200 || 0;
+      }
+    });
+    watch(() => props.height, () => {
+      if (props.height > baseHeight.value) {
+        baseHeight.value = props.height;
+      }
+    });
+    return {
+      dialog,
+      header,
+      styles,
+      hashId,
+      contextLocale,
+      rangeMove,
+      onCancel,
+      onOk
+    };
+  }
+});