@duxweb/dvha-pro 0.0.5 → 0.0.7

package/dist/esm/components/modal/modal.js

@@ -1,8 +1,7 @@
-import { defineComponent as p, defineAsyncComponent as x, ref as l, watch as C, createVNode as t, Suspense as k, mergeProps as D } from "vue";
-import { useWindowSize as M, useElementSize as F, useDraggable as S, useThrottleFn as N } from "@vueuse/core";
-import { useFocusTrap as P } from "../../node_modules/@vueuse/integrations/useFocusTrap.js";
-import { useMessage as j, NCard as z, NSpin as O } from "naive-ui";
-const A = /* @__PURE__ */ p({
+import { defineComponent as c, defineAsyncComponent as s, createVNode as t, mergeProps as a, Suspense as m } from "vue";
+import { useExtendOverlay as f } from "@overlastic/vue";
+import { NModal as g, NSpin as b } from "naive-ui";
+const w = /* @__PURE__ */ c({
   name: "DuxModal",
   props: {
     title: {
@@ -10,107 +9,68 @@ const A = /* @__PURE__ */ p({
       default: ""
     },
     component: {
-      type: Function
-    },
-    componentProps: {
-      type: Object,
-      default: () => ({})
+      type: [Function, Object]
     },
+    componentProps: Object,
     width: {
-      type: Number,
+      type: [Number, String],
       default: 500
     },
-    onClose: {
-      type: Function,
-      default: () => {
-      }
-    },
-    onConfirm: {
-      type: Function,
-      default: () => {
-      }
+    modalProps: {
+      type: Object
     },
     draggable: {
       type: Boolean,
-      default: !1
+      default: !0
     }
   },
   setup(e) {
-    const u = x(e.component), c = j(), s = l(), r = l(), o = l(), {
-      width: f,
-      height: g
-    } = M(), {
-      width: m,
-      height: h
-    } = F(o), {
-      style: w,
-      x: y,
-      y: v
-    } = S(s, {
-      initialValue: {
-        x: -1e3,
-        y: -1e3
+    const {
+      visible: n,
+      resolve: l,
+      reject: d,
+      vanish: r
+    } = f({
+      duration: 1e3
+    }), o = (e == null ? void 0 : e.componentProps) || {};
+    o.onConfirm = l, o.onClose = d;
+    const u = typeof e.component == "function" ? s(e.component) : e.component;
+    return () => t(g, a({
+      displayDirective: "show",
+      show: n.value,
+      onAfterLeave: () => {
+        r();
       },
-      preventDefault: !0,
-      handle: r,
-      disabled: !e.draggable
-    }), i = l(!1);
-    C([m, h, i], ([n, a]) => {
-      !n || !a || i.value || (i.value = !0, y.value = Math.max(0, (f.value - n) / 2), v.value = Math.max(0, (g.value - a) / 2));
-    });
-    const d = l(), b = N(() => {
-      c.warning("请先关闭当前窗口再操作其他窗口");
-    }, 3e3);
-    return P(d, {
-      immediate: !0,
-      escapeDeactivates: !0,
-      clickOutsideDeactivates: !1,
-      allowOutsideClick: (n) => {
-        const a = n.target.closest('[role="dialog"]');
-        return a && a !== o.value ? (b(), !1) : !0;
-      },
-      onDeactivate: () => {
-        e.onClose();
-      }
-    }), () => t("div", {
-      class: `fixed inset-0 overflow-auto flex items-center justify-center p-4 ${e.draggable ? "pointer-events-none" : ""}`,
-      style: "align-items: safe center;"
-    }, [t("div", {
-      ref: s,
-      style: w.value,
-      class: e.draggable ? "fixed pointer-events-auto" : "w-full max-w-none flex justify-center"
-    }, [t(z, {
-      ref: o,
-      contentClass: "p-0!",
-      bordered: !!e.draggable,
-      size: "small",
+      draggable: e.draggable,
+      class: "bg-white rounded dark:shadow-gray-950/80  dark:bg-gray-900/90 backdrop-blur",
       role: "dialog",
-      "aria-modal": "true",
-      class: [" max-w-full shadow-lg shadow-gray-950/10 bg-white/80 dark:shadow-gray-950/80  dark:bg-gray-900/90 backdrop-blur"],
-      style: {
-        width: `${e.width}px`
-      }
-    }, {
-      default: () => [t(k, null, {
-        default: () => t(u, D(e.componentProps, {
-          ref: d,
-          handle: r,
-          draggable: e.draggable,
-          onClose: e.onClose,
-          onConfirm: e.onConfirm
+      "aria-modal": "true"
+    }, e.modalProps, {
+      autoFocus: !1
+    }), {
+      default: ({
+        draggableClass: i
+      }) => t("div", {
+        class: ["max-w-full shadow-lg"],
+        style: {
+          width: `${e.width}px`
+        }
+      }, [t(m, null, {
+        default: () => t(u, a(e.componentProps, {
+          handle: i
         }), null),
-        fallback: () => t(O, {
+        fallback: () => t(b, {
           show: !0
         }, {
           default: () => [t("div", {
             class: "h-100"
           }, null)]
         })
-      })]
-    })])]);
+      })])
+    });
   }
 });
 export {
-  A as DuxModal,
-  A as default
+  w as DuxModal,
+  w as default
 };

package/dist/esm/components/modal/modalPage.js

@@ -1,6 +1,6 @@
-import { defineComponent as f, ref as n, createVNode as a } from "vue";
-import { NButton as i } from "naive-ui";
-const u = /* @__PURE__ */ f({
+import { defineComponent as f, ref as l, watch as o, nextTick as c, createVNode as a } from "vue";
+import { NButton as u } from "naive-ui";
+const p = /* @__PURE__ */ f({
   name: "ModalPage",
   props: {
     title: {
@@ -12,8 +12,7 @@ const u = /* @__PURE__ */ f({
       default: !1
     },
     handle: {
-      type: Object,
-      default: () => n()
+      type: String
     },
     onClose: {
       type: Function,
@@ -21,36 +20,42 @@ const u = /* @__PURE__ */ f({
       }
     }
   },
-  setup(r, {
+  setup(n, {
     slots: e
   }) {
-    return () => {
-      var d, t, l;
+    const i = l();
+    return o(i, (t) => {
+      t && c(() => {
+        var d, r;
+        (r = (d = t.$el) == null ? void 0 : d.focus) == null || r.call(d);
+      });
+    }), () => {
+      var t, d, r;
       return a("div", {
         class: "flex flex-col gap-2"
       }, [a("div", {
-        class: ["px-4 py-3 border-b border-muted flex justify-between items-center  bg-gray-200/20 dark:bg-gray-800/50", r.draggable && "cursor-move"],
-        ref: r.handle
+        class: ["px-4 py-3 border-b border-muted rounded-t flex justify-between items-center  bg-white dark:bg-gray-800/50", n.draggable && "cursor-move", n.handle]
       }, [a("div", {
         class: "text-base font-bold"
-      }, [r.title]), a("div", {
+      }, [n.title]), a("div", {
         class: "flex justify-end gap-2"
-      }, [a(i, {
+      }, [a(u, {
         text: !0,
-        onClick: r.onClose,
-        "aria-label": "close"
+        onClick: n.onClose,
+        "aria-label": "close",
+        ref: i
       }, {
         icon: () => a("div", {
           class: "i-tabler:x"
         }, null)
       })])]), a("div", {
         class: "px-4 py-2"
-      }, [(d = e.default) == null ? void 0 : d.call(e)]), ((t = e.footer) == null ? void 0 : t.call(e)) && a("div", {
-        class: "flex justify-end gap-2 p-3 border-t border-muted bg-gray-200/20 dark:bg-gray-800/50"
-      }, [(l = e.footer) == null ? void 0 : l.call(e)])]);
+      }, [(t = e.default) == null ? void 0 : t.call(e)]), ((d = e.footer) == null ? void 0 : d.call(e)) && a("div", {
+        class: "flex justify-end gap-2 p-3 rounded-b border-t border-muted bg-muted dark:bg-gray-800/50"
+      }, [(r = e.footer) == null ? void 0 : r.call(e)])]);
     };
   }
 });
 export {
-  u as default
+  p as default
 };

package/dist/esm/components/modal/modalTab.js

@@ -21,16 +21,16 @@ const o = /* @__PURE__ */ n({
       }
     }
   },
-  setup(l, {
+  setup(d, {
     slots: e
   }) {
     return () => {
-      var d, r;
+      var l, t;
       return a("div", {
         class: "flex flex-col"
       }, [a(f, {
         type: "line",
-        defaultValue: l.defaultTab,
+        defaultValue: d.defaultTab,
         class: "app-modal-tabs",
         size: "large",
         style: {
@@ -39,12 +39,12 @@ const o = /* @__PURE__ */ n({
         }
       }, {
         default: () => {
-          var t;
-          return (t = e.default) == null ? void 0 : t.call(e);
+          var r;
+          return (r = e.default) == null ? void 0 : r.call(e);
         },
-        prefix: () => l.draggable ? a("div", {
+        prefix: () => d.draggable ? a("div", {
           class: "pl-4 cursor-move flex items-center",
-          ref: l.handle
+          ref: d.handle
         }, [a("div", {
           class: "i-tabler:grid-dots size-4"
         }, null)]) : null,
@@ -52,16 +52,16 @@ const o = /* @__PURE__ */ n({
           class: "pr-4 flex items-center"
         }, [a(u, {
           text: !0,
-          onClick: l.onClose,
+          onClick: d.onClose,
           "aria-label": "close"
         }, {
           icon: () => a("div", {
             class: "i-tabler:x size-4"
           }, null)
         })])
-      }), ((d = e.footer) == null ? void 0 : d.call(e)) && a("div", {
-        class: "flex justify-end gap-2 p-3 border-t border-muted bg-gray-200/20 dark:bg-gray-800/50"
-      }, [(r = e.footer) == null ? void 0 : r.call(e)])]);
+      }), ((l = e.footer) == null ? void 0 : l.call(e)) && a("div", {
+        class: "flex justify-end gap-2 p-3 rounded-b border-t border-muted bg-muted dark:bg-gray-800/50"
+      }, [(t = e.footer) == null ? void 0 : t.call(e)])]);
     };
   }
 });

package/dist/esm/components/select/cardSelect.js

@@ -0,0 +1,103 @@
+import { defineComponent as f, createVNode as a } from "vue";
+import { useVModel as m } from "@vueuse/core";
+const y = /* @__PURE__ */ f({
+  name: "DuxSelectCard",
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    minWidth: {
+      type: String,
+      default: "150px"
+    },
+    maxWidth: {
+      type: String,
+      default: "200px"
+    },
+    onUpdateValue: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:value", "change"],
+  setup(l, {
+    emit: u
+  }) {
+    const t = m(l, "value", u, {
+      passive: !0,
+      defaultValue: l.defaultValue
+    }), s = (e) => {
+      var i;
+      if (!l.disabled) {
+        if (l.multiple) {
+          const d = Array.isArray(t.value) ? t.value : [];
+          t.value = d.includes(e) ? d.filter((n) => n !== e) : [...d, e];
+        } else
+          t.value = e;
+        (i = l.onUpdateValue) == null || i.call(l, t.value), u("update:value", t.value);
+      }
+    }, r = (e) => l.multiple ? Array.isArray(t.value) && t.value.includes(e) : t.value === e, c = ["grid gap-4", "grid-cols-2", `lg:grid-cols-[repeat(auto-fit,minmax(${l.minWidth},${l.maxWidth}))]`];
+    return () => a("div", {
+      class: c
+    }, [l.options.map((e) => a("div", {
+      key: e.value,
+      class: ["relative cursor-pointer border rounded p-2.5 transition-all duration-200 hover:border-primary", {
+        "border-primary bg-primary/10": r(e.value),
+        "border-muted": !r(e.value),
+        "opacity-50 cursor-not-allowed": e.disabled || l.disabled
+      }],
+      onClick: () => !e.disabled && s(e.value)
+    }, [r(e.value) && a("div", {
+      class: "absolute top-2 right-2 size-4 bg-primary rounded-full flex items-center justify-center"
+    }, [a("svg", {
+      class: "size-3 text-white",
+      fill: "currentColor",
+      viewBox: "0 0 20 20"
+    }, [a("path", {
+      "fill-rule": "evenodd",
+      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+      "clip-rule": "evenodd"
+    }, null)])]), a("div", {
+      class: ["flex gap-3 px-2 items-center", {
+        "flex-col items-center text-center": !e.icon,
+        "flex-row items-start text-left": e.icon
+      }]
+    }, [e.icon && a("div", {
+      class: ["flex items-center justify-center p-3 rounded-lg", `bg-${e.iconColor}/10`, `text-${e.iconColor}`]
+    }, [a("div", {
+      class: `${e.icon} size-4`
+    }, null)]), a("div", {
+      class: "flex flex-col flex-1"
+    }, [a("div", {
+      class: ["text-sm font-medium", {
+        "text-primary": r(e.value),
+        "text-default": !r(e.value)
+      }]
+    }, [e.label]), e.description && a("div", {
+      class: ["text-sm", {
+        "text-primary": r(e.value),
+        "text-muted": !r(e.value)
+      }]
+    }, [e.description])])])]))]);
+  }
+});
+export {
+  y as DuxSelectCard
+};

package/dist/esm/components/table/tablePage.js

@@ -1,41 +1,44 @@
-import { defineComponent as m, computed as n, createVNode as o, mergeProps as p } from "vue";
-import { NDataTable as i } from "naive-ui";
-import { DuxTableLayout as u } from "../layout/table.js";
-const l = /* @__PURE__ */ m({
+import { defineComponent as d, computed as m, createVNode as i, mergeProps as n } from "vue";
+import { NDataTable as p } from "naive-ui";
+import { DuxTableLayout as b } from "../layout/table.js";
+const g = /* @__PURE__ */ d({
   name: "DuxTablePage",
   props: {
     tableProps: {
       type: Object
     }
   },
-  extends: u,
-  setup(r, {
+  extends: b,
+  slots: Object,
+  setup(t, {
     slots: e
   }) {
-    const b = n(() => {
+    const u = m(() => {
       const {
-        tableProps: t,
-        ...a
-      } = r;
-      return a;
+        tableProps: a,
+        ...r
+      } = t;
+      return r;
     });
-    return () => o(u, b.value, {
-      default: (t) => o(i, p({
+    return () => i(b, u.value, {
+      default: (a) => i(p, n({
         remote: !0,
         class: "h-full",
         minHeight: 200,
         tableLayout: "fixed",
         flexHeight: !0,
-        rowKey: (a) => a.id,
+        rowKey: (r) => r.id,
         bordered: !1,
-        scrollX: t.width
-      }, t.table.value, r.tableProps), null),
+        scrollX: a.width
+      }, a.table.value, t.tableProps), null),
       bottom: e == null ? void 0 : e.bottom,
       tools: e == null ? void 0 : e.tools,
-      actions: e == null ? void 0 : e.actions
+      actions: e == null ? void 0 : e.actions,
+      sideLeft: e == null ? void 0 : e.sideLeft,
+      sideRight: e == null ? void 0 : e.sideRight
     });
   }
 });
 export {
-  l as DuxTablePage
+  g as DuxTablePage
 };