@dfsj/components 3.0.0

package/dist/components/Modal/src/components/ModalHeader.vue.d.ts

@@ -0,0 +1,142 @@
+declare const _default: import("vue").DefineComponent<{
+    header: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximizer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximum: import("vue-types").VueTypeValidableDef<any, import("vue-types/dist/types").ValidatorFunction<any>> & {
+        default: any;
+    };
+    headerIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    titleAlign: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    titleBefore: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    titleAfter: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    switcherIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            true: {
+                image: string;
+                color: string;
+            };
+            false: {
+                image: string;
+                color: string;
+            };
+        };
+    };
+    closerIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            image: string;
+            color: string;
+        };
+    };
+    onSwitch: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    header: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximizer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximum: import("vue-types").VueTypeValidableDef<any, import("vue-types/dist/types").ValidatorFunction<any>> & {
+        default: any;
+    };
+    headerIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    titleAlign: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    titleBefore: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    titleAfter: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    switcherIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            true: {
+                image: string;
+                color: string;
+            };
+            false: {
+                image: string;
+                color: string;
+            };
+        };
+    };
+    closerIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            image: string;
+            color: string;
+        };
+    };
+    onSwitch: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+}>>, {
+    header: boolean;
+    maximizer: boolean;
+    closer: boolean;
+    maximum: any;
+    headerIcon: string;
+    title: any;
+    titleAlign: string;
+    titleBefore: (...args: any[]) => any;
+    titleAfter: (...args: any[]) => any;
+    switcherIcon: Record<string, any>;
+    closerIcon: Record<string, any>;
+    onSwitch: (...args: any[]) => any;
+    onClose: (...args: any[]) => any;
+}, {}>;
+export default _default;

package/dist/components/Modal/src/components/ModalHeader.vue.js

@@ -0,0 +1,5 @@
+import script from './ModalHeader.vue2.js';
+
+script.__file = "src/components/Modal/src/components/ModalHeader.vue";
+
+export { script as default };

package/dist/components/Modal/src/components/ModalHeader.vue2.js

@@ -0,0 +1,63 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, createVNode, withModifiers } from 'vue';
+import { headerProps } from '../props.js';
+import '../../../Icon/src/Icon.vue.js';
+import { moverClass } from '../config.js';
+import script$1 from '../../../Icon/src/Icon.vue2.js';
+
+var _hoisted_1 = {
+  key: 0,
+  "class": "header-before"
+};
+var _hoisted_2 = {
+  key: 1,
+  "class": "header--icon"
+};
+var _hoisted_3 = {
+  key: 2,
+  "class": "header--title"
+};
+var _hoisted_4 = {
+  key: 3,
+  "class": "header-before"
+};
+var _hoisted_5 = {
+  "class": "modal-header-right-control-wrap"
+};
+var _hoisted_6 = {
+  key: 0,
+  "class": "header--control"
+};
+var script = defineComponent({
+  __name: 'ModalHeader',
+  props: headerProps,
+  setup: function setup(__props) {
+    var props = __props;
+    return function (_ctx, _cache) {
+      var _ctx$switcherIcon;
+      return !!_ctx.header ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": normalizeClass(['component-modal-header', unref(moverClass)]),
+        onDblclick: _cache[0] || (_cache[0] = function () {
+          return _ctx.onSwitch();
+        })
+      }, [createCommentVNode(" 头部信息"), createElementVNode("div", {
+        "class": "modal-header-main-container-wrap",
+        style: normalizeStyle({
+          'justify-content': props.titleAlign
+        })
+      }, [createCommentVNode(" 左侧的信息"), _ctx.$slots.headerBefore ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "headerBefore")])) : createCommentVNode("v-if", true), createCommentVNode("图标"), _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true), createCommentVNode("文字"), _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("v-if", true), createCommentVNode("追加"), _ctx.$slots.headerAfter ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "headerAfter")])) : createCommentVNode("v-if", true)], 4), createCommentVNode("   右侧的按钮"), createElementVNode("div", _hoisted_5, [!!_ctx.switcherIcon || !!_ctx.closerIcon ? (openBlock(), createElementBlock("div", _hoisted_6, [createCommentVNode("        @ts-ignore"), createVNode(script$1, {
+        "class": "cursor-pointer",
+        size: 24,
+        onClick: withModifiers(_ctx.onSwitch, ["stop"]),
+        icon: (_ctx$switcherIcon = _ctx.switcherIcon) === null || _ctx$switcherIcon === void 0 ? void 0 : _ctx$switcherIcon[props.maximum].image
+      }, null, 8, ["onClick", "icon"]), createVNode(script$1, {
+        size: 24,
+        "class": "cursor-pointer",
+        onClick: withModifiers(_ctx.onClose, ["stop"]),
+        icon: _ctx.closerIcon.image
+      }, null, 8, ["onClick", "icon"])])) : createCommentVNode("v-if", true)])], 34)) : createCommentVNode("v-if", true);
+    };
+  }
+});
+
+export { script as default };

package/dist/components/Modal/src/config.d.ts

@@ -0,0 +1,24 @@
+declare const moverClass = "modal-dom-el";
+declare const switcher: {
+    true: {
+        image: string;
+        color: string;
+    };
+    false: {
+        image: string;
+        color: string;
+    };
+};
+declare const closer: {
+    image: string;
+    color: string;
+};
+declare const cancel: {
+    label: string;
+    color: string;
+};
+declare const submit: {
+    label: string;
+    color: string;
+};
+export { switcher, closer, cancel, submit, moverClass };

package/dist/components/Modal/src/config.js

@@ -0,0 +1,25 @@
+var moverClass = "modal-dom-el";
+var switcher = {
+  "true": {
+    image: 'mdi:window-restore',
+    color: 'transparent'
+  },
+  "false": {
+    image: 'mdi:window-maximize',
+    color: 'transparent'
+  }
+};
+var closer = {
+  image: 'mdi:close',
+  color: 'transparent'
+};
+var cancel = {
+  label: '取消',
+  color: 'warning'
+};
+var submit = {
+  label: '提交',
+  color: 'warning'
+};
+
+export { cancel, closer, moverClass, submit, switcher };

package/dist/components/Modal/src/hooks/useModalDrag.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'vue';
+export interface UseModalDragMoveContext {
+    maximum: Ref<boolean>;
+    props: any;
+    draggable: Ref<boolean>;
+    destroyOnClose: Ref<boolean | undefined> | undefined;
+    visible: Ref<boolean>;
+    moverEl?: string;
+}
+export declare function useModalDragMove(context: UseModalDragMoveContext): {
+    locator: {
+        top: any;
+        bottom: any;
+        left: any;
+        right: any;
+    };
+    sign: {
+        x: any;
+        y: any;
+        l: any;
+        t: any;
+    };
+    moving: Ref<boolean>;
+};

package/dist/components/Modal/src/hooks/useModalDrag.js

@@ -0,0 +1,108 @@
+import { ref, reactive, getCurrentInstance, watchEffect, unref } from 'vue';
+import { useTimeoutFn } from './useTimeout.js';
+import { clamp } from '../utils/index.js';
+
+function useModalDragMove(context) {
+  console.log('拖拽..............................................................');
+  var moving = ref(false);
+  var locator = reactive({
+    top: null,
+    bottom: null,
+    left: null,
+    right: null
+  });
+  var sign = reactive({
+    x: undefined,
+    y: undefined,
+    l: undefined,
+    t: undefined
+  });
+  var that = getCurrentInstance();
+  var getStyle = function getStyle(dom, attr) {
+    return getComputedStyle(dom)[attr];
+  };
+  var drag = function drag(wrap) {
+    if (!wrap) return;
+    wrap.setAttribute('data-drag', unref(context.draggable));
+    var dialogHeaderEl = wrap.querySelector(".".concat(context.moverEl));
+    var proxy = that.proxy;
+    var dragDom = proxy.$el;
+    if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
+    dialogHeaderEl.style.cursor = 'move';
+    dialogHeaderEl.onmousedown = function (e) {
+      if (!e) return;
+      var element = context.props.modally ? that.refs.body : proxy.$el;
+      var bounder = element.getBoundingClientRect();
+      sign.l = bounder.left;
+      sign.t = bounder.top;
+      sign.x = e.x;
+      sign.y = e.y;
+      moving.value = true;
+      document.onmousemove = function (event) {
+        var moved = sign.x !== event.x || sign.y !== event.y;
+        if (moved && moving.value && !context.maximum.value) {
+          event.preventDefault();
+          delete locator.right;
+          delete locator.bottom;
+          if (context.props.extent) {
+            var ex = context.props.extent;
+            var dx = event.x - sign.x;
+            var dy = event.y - sign.y;
+            console.log('that.refs', that.refs, that);
+            var br = that.refs.body.getBoundingClientRect();
+            var el = ex.left != null ? ex.left : -Number.MAX_VALUE;
+            var et = ex.top != null ? ex.top : -Number.MAX_VALUE;
+            var mr = ex.right != null ? window.innerWidth - ex.right - br.width : Number.MAX_VALUE;
+            var mb = ex.bottom != null ? window.innerHeight - ex.bottom - br.height : Number.MAX_VALUE;
+            locator.left = clamp(sign.l + dx, el, mr);
+            locator.top = clamp(sign.t + dy, et, mb);
+          } else {
+            var Δx = event.x - sign.x;
+            var Δy = event.y - sign.y;
+            locator.left = sign.l + Δx;
+            locator.top = sign.t + Δy;
+          }
+          that.emit('update:offset', locator);
+        }
+      };
+      document.onmouseup = function () {
+        moving.value = false;
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  };
+  var handleDrag = function handleDrag() {
+    var _dragWrap$getAttribut;
+    var proxy = that.proxy;
+    var dragWrap = proxy.$el;
+    console.log('dragWrap', dragWrap);
+    if (!dragWrap) return;
+    var display = getStyle(dragWrap, 'display');
+    var draggable = (_dragWrap$getAttribut = dragWrap.getAttribute('data-drag')) !== null && _dragWrap$getAttribut !== void 0 ? _dragWrap$getAttribut : true;
+    console.log({
+      display: display,
+      draggable: draggable
+    });
+    if (display !== 'none') {
+      if (draggable === null || unref(context.destroyOnClose)) {
+        drag(dragWrap);
+      }
+    }
+  };
+  watchEffect(function () {
+    if (!unref(context.visible) || !unref(context.draggable)) {
+      return;
+    }
+    useTimeoutFn(function () {
+      handleDrag();
+    }, 30);
+  });
+  return {
+    locator: locator,
+    sign: sign,
+    moving: moving
+  };
+}
+
+export { useModalDragMove };

package/dist/components/Modal/src/hooks/useTimeout.d.ts

@@ -0,0 +1,15 @@
+export declare function isFunction(val: unknown): val is Function;
+declare interface Fn<T = any, R = T> {
+    (...arg: T[]): R;
+}
+export declare function useTimeoutFn(handle: Fn<any>, wait: number, native?: boolean): {
+    readyRef: import("vue").Ref<boolean>;
+    stop: () => void;
+    start: () => void;
+};
+export declare function useTimeoutRef(wait: number): {
+    readyRef: import("vue").Ref<boolean>;
+    stop: () => void;
+    start: () => void;
+};
+export {};

package/dist/components/Modal/src/hooks/useTimeout.js

@@ -0,0 +1,53 @@
+import { watch, ref } from 'vue';
+import { tryOnUnmounted } from '../../../../node_modules/.pnpm/@vueuse_shared@10.7.2_vue@3.4.21/node_modules/@vueuse/shared/index.js';
+
+function isFunction(val) {
+  return typeof val === 'function';
+}
+function useTimeoutFn(handle, wait) {
+  var _native = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+  var _useTimeoutRef = useTimeoutRef(wait),
+    readyRef = _useTimeoutRef.readyRef,
+    stop = _useTimeoutRef.stop,
+    start = _useTimeoutRef.start;
+  if (_native) {
+    handle();
+  } else {
+    watch(readyRef, function (maturity) {
+      maturity && handle();
+    }, {
+      immediate: false
+    });
+  }
+  return {
+    readyRef: readyRef,
+    stop: stop,
+    start: start
+  };
+}
+function useTimeoutRef(wait) {
+  var readyRef = ref(false);
+  var timer;
+  function stop() {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+  function start() {
+    stop();
+    timer = setTimeout(function () {
+      readyRef.value = true;
+    }, wait);
+  }
+  start();
+  tryOnUnmounted(stop);
+  return {
+    readyRef: readyRef,
+    stop: stop,
+    start: start
+  };
+}
+
+export { isFunction, useTimeoutFn, useTimeoutRef };

package/dist/components/Modal/src/props.d.ts

@@ -0,0 +1,131 @@
+export declare const baseProps: {
+    visible: BooleanConstructor;
+    zIndex: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    sizes: ArrayConstructor;
+    offset: ObjectConstructor;
+    overflow: StringConstructor;
+    maximum: BooleanConstructor;
+    modally: BooleanConstructor;
+    movable: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    resizeable: BooleanConstructor;
+    extent: {
+        type: ObjectConstructor;
+        default: () => {
+            top: number;
+        };
+    };
+    modalClass: StringConstructor;
+    contentClass: StringConstructor;
+    animation: ObjectConstructor;
+};
+export declare const headerProps: {
+    header: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximizer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maximum: import("vue-types").VueTypeValidableDef<any, import("vue-types/dist/types").ValidatorFunction<any>> & {
+        default: any;
+    };
+    headerIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    titleAlign: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    titleBefore: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    titleAfter: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    };
+    switcherIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            true: {
+                image: string;
+                color: string;
+            };
+            false: {
+                image: string;
+                color: string;
+            };
+        };
+    };
+    closerIcon: {
+        type: ObjectConstructor;
+        default: () => {
+            image: string;
+            color: string;
+        };
+    };
+    onSwitch: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+};
+export declare const footerProps: {
+    footer: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    submit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    submitOpt: {
+        type: ObjectConstructor;
+        default: () => {
+            label: string;
+            color: string;
+        };
+    };
+    cancelOpt: {
+        type: ObjectConstructor;
+        default: () => {
+            label: string;
+            color: string;
+        };
+    };
+    onCancel: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    onSubmit: import("vue-types").VueTypeValidableDef<(...args: any[]) => any, import("vue-types/dist/types").ValidatorFunction<(...args: any[]) => any>> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+};