@jetlinks-web/components 2.0.37 → 2.1.0

package/es/CardSelect/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/CheckButton/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/DragModal/DragModal.js

@@ -0,0 +1,307 @@
+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; }
+/* Analyzed bindings: {
+  "title": "props",
+  "width": "props",
+  "height": "props",
+  "dragRang": "props",
+  "bodyStyle": "props",
+  "footer": "props",
+  "ref": "setup-const",
+  "useSlots": "setup-const",
+  "defineOptions": "setup-const",
+  "computed": "setup-const",
+  "onMounted": "setup-const",
+  "watch": "setup-const",
+  "Button": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "emits": "setup-const",
+  "slots": "setup-maybe-ref",
+  "ele": "setup-maybe-ref",
+  "dialog": "setup-ref",
+  "header": "setup-ref",
+  "baseWidth": "setup-ref",
+  "baseHeight": "setup-ref",
+  "baseLeft": "setup-ref",
+  "baseTop": "setup-ref",
+  "styles": "setup-ref",
+  "getFixed": "setup-const",
+  "onDrag": "setup-const",
+  "handleClear": "setup-const",
+  "rangeMove": "setup-const",
+  "onCancel": "setup-const",
+  "onOk": "setup-const"
+} */
+import { defineComponent as _defineComponent } from 'vue';
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createTextVNode as _createTextVNode, unref as _unref, Transition as _Transition } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    class: "header"
+};
+const _hoisted_2 = {
+    key: 1,
+    class: "jetlinks-drag-modal-footer"
+};
+import { ref, useSlots, computed, onMounted, watch } from 'vue';
+import { Button } from 'ant-design-vue';
+const __sfc_main__ = _defineComponent({
+    ...{
+        name: 'JDragModal'
+    },
+    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: __emit }) {
+        const props = __props;
+        const emits = __emit;
+        const slots = useSlots();
+        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 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;
+                    emits('heightChange', baseHeight.value);
+                }
+            };
+            handleClear();
+        };
+        const onCancel = () => {
+            emits("cancel");
+            emits('visibleChange', false);
+        };
+        const onOk = () => {
+            emits("ok");
+            emits('visibleChange', true);
+        };
+        onMounted(() => {
+            if (dialog.value && header.value) {
+                onDrag();
+            }
+            if (ele) {
+                const data = _optionalChain([ele, 'optionalAccess', _2 => _2.getBoundingClientRect, 'call', _3 => _3()]);
+                baseLeft.value = (_optionalChain([data, 'optionalAccess', _4 => _4.right]) - baseWidth.value) / 2 || 0;
+                baseTop.value = _optionalChain([data, 'optionalAccess', _5 => _5.top]) + 200 || 0;
+            }
+        });
+        watch(() => props.height, () => {
+            if (props.height > baseHeight.value) {
+                baseHeight.value = props.height;
+            }
+        });
+        return (_ctx, _cache) => {
+            const _component_AIcon = _resolveComponent("AIcon");
+            const _component_a_button = _resolveComponent("a-button");
+            return (_openBlock(), _createElementBlock("div", {
+                ref_key: "dialog",
+                ref: dialog,
+                style: _normalizeStyle(styles.value),
+                class: "jetlinks-drag-modal"
+            }, [
+                _createVNode(_Transition, { name: "dialog" }, {
+                    default: _withCtx(() => [
+                        _createElementVNode("div", {
+                            class: "jetlinks-drag-modal-sprite",
+                            ref_key: "header",
+                            ref: header
+                        }, [
+                            (__props.title !== false)
+                                ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                                    _createElementVNode("span", null, _toDisplayString(__props.title), 1 /* TEXT */),
+                                    _createVNode(_component_a_button, {
+                                        size: "small",
+                                        type: "text",
+                                        onClick: _withModifiers(onCancel, ["stop"])
+                                    }, {
+                                        default: _withCtx(() => [
+                                            _createVNode(_component_AIcon, { type: "CloseOutlined" })
+                                        ]),
+                                        _: 1 /* STABLE */
+                                    })
+                                ]))
+                                : _createCommentVNode("v-if", true),
+                            _createElementVNode("div", {
+                                class: "jetlinks-drag-modal-body",
+                                style: _normalizeStyle(__props.bodyStyle)
+                            }, [
+                                _renderSlot(_ctx.$slots, "default")
+                            ], 4 /* STYLE */),
+                            (__props.footer !== false)
+                                ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
+                                    _renderSlot(_ctx.$slots, "footer", {}, () => [
+                                        _createVNode(_unref(Button), {
+                                            onClick: _withModifiers(onCancel, ["stop"])
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode("取消")
+                                            ]),
+                                            _: 1 /* STABLE */
+                                        }),
+                                        _createVNode(_unref(Button), {
+                                            type: "primary",
+                                            onClick: _withModifiers(onOk, ["stop"])
+                                        }, {
+                                            default: _withCtx(() => [
+                                                _createTextVNode("确认")
+                                            ]),
+                                            _: 1 /* STABLE */
+                                        })
+                                    ])
+                                ]))
+                                : _createCommentVNode("v-if", true)
+                        ], 512 /* NEED_PATCH */)
+                    ]),
+                    _: 3 /* FORWARDED */
+                }),
+                _createElementVNode("div", {
+                    class: "jetlinks-drag-modal-range drag-bottom-right",
+                    onMousedown: _cache[0] || (_cache[0] = _withModifiers(($event) => (rangeMove($event, "drag-bottom-right")), ["stop"]))
+                }, null, 32 /* NEED_HYDRATION */)
+            ], 4 /* STYLE */));
+        };
+    }
+});
+export default __sfc_main__;

package/es/DragModal/index.js

@@ -0,0 +1,5 @@
+import DragModal from "./DragModal.js";
+DragModal.install = function (app) {
+  app.component(DragModal.name, DragModal);
+};
+export default DragModal;

package/es/DragModal/style/index.css

@@ -0,0 +1,81 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity 0.5s;
+}
+.dialog-enter,
+.dialog-leave-to {
+  opacity: 0;
+}
+.jetlinks-drag-modal {
+  position: fixed;
+  z-index: 1000;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-sprite {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 23456765435;
+  background-color: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #91CAFF;
+  box-shadow: 0 3px 8px 0 rgba(22, 119, 255, 0.24);
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-sprite .header {
+  padding: 5px 15px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: move;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-sprite .jetlinks-drag-modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px 20px;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-sprite .jetlinks-drag-modal-footer {
+  border-top: 1px solid #f0f0f0;
+  padding: 5px 15px;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  z-index: 23456765436;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-bottom-right:hover,
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-top-left:hover {
+  cursor: nwse-resize;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-bottom-left:hover,
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-top-right:hover {
+  cursor: nesw-resize;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-top-right {
+  top: -6px;
+  right: -6px;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-top-left {
+  top: -6px;
+  left: -6px;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-bottom-right {
+  bottom: -6px;
+  right: -6px;
+}
+.jetlinks-drag-modal .jetlinks-drag-modal-range .drag-bottom-left {
+  bottom: -6px;
+  left: -6px;
+}

package/es/DragModal/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/DragModal/style/index.less

@@ -0,0 +1,96 @@
+@import "ant-design-vue/es/style/themes/index.less";
+@boxColor: rgb(@primary-color);
+
+// 弹窗动画
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity .5s;
+}
+
+.dialog-enter,
+.dialog-leave-to {
+  opacity: 0;
+}
+
+.jetlinks-drag-modal {
+  position: fixed;
+  z-index: 1000;
+
+  .jetlinks-drag-modal-sprite {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 23456765435;
+    background-color: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #91CAFF;
+    box-shadow: 0 3px 8px 0 rgba(#1677FF, 0.24);
+
+    .header {
+      padding: 5px 15px;
+      font-size: 18px;
+      font-weight: 700;
+      color: #333;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #f0f0f0;
+      cursor: move;
+    }
+
+    .jetlinks-drag-modal-body {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 24px 20px;
+    }
+
+    .jetlinks-drag-modal-footer {
+      border-top: 1px solid #f0f0f0;
+      padding: 5px 15px;
+    }
+  }
+
+  .jetlinks-drag-modal-range {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    z-index: 23456765436;
+
+    .drag-bottom-right, .drag-top-left {
+      &:hover {
+        cursor: nwse-resize
+      }
+    }
+
+    .drag-bottom-left, .drag-top-right {
+      &:hover {
+        cursor: nesw-resize
+      }
+    }
+
+    .drag-top-right {
+      top: -6px;
+      right: -6px;
+    }
+
+    .drag-top-left {
+      top: -6px;
+      left: -6px;
+    }
+
+    .drag-bottom-right {
+      bottom: -6px;
+      right: -6px;
+    }
+
+    .drag-bottom-left {
+      bottom: -6px;
+      left: -6px;
+    }
+  }
+}