@duxweb/dvha-pro 0.0.5

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

@@ -0,0 +1,292 @@
+import { defineComponent as _, toRef as $, computed as s, reactive as ee, ref as te, watch as le, createVNode as e, h as A, mergeProps as ae } from "vue";
+import { useI18n as ie, useJsonSchema as D } from "@duxweb/dvha-core";
+import { useWindowSize as ne, useElementSize as re } from "@vueuse/core";
+import { NInput as E, NTabs as oe, NTab as ue, NPopover as ce, NButton as c, NPopselect as se, NTooltip as p, NProgress as pe, NPagination as fe } from "naive-ui";
+import { useAction as de } from "../../hooks/action.js";
+import { useTable as me } from "../../hooks/table.js";
+import "lodash-es";
+import "clsx";
+import "jinrishici";
+import "../../node_modules/@overlastic/vue/dist/index.js";
+import "vee-validate";
+import "@vee-validate/i18n";
+import "vue-router";
+import "vue-command-palette";
+import "@duxweb/dvha-naiveui";
+import { DuxPage as ve } from "../../pages/page.js";
+import "../../pages/page404.js";
+import { DuxTableFilter as ge } from "./filter.js";
+import { DuxTableTools as be } from "./tools.js";
+import "pinia";
+const Be = /* @__PURE__ */ _({
+  name: "DuxTableLayout",
+  props: {
+    path: {
+      type: String,
+      required: !0
+    },
+    filter: {
+      type: Object
+    },
+    filterSchema: {
+      type: Array
+    },
+    columns: {
+      type: Array
+    },
+    pagination: {
+      type: [Boolean, Object]
+    },
+    tabs: {
+      type: Array
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    tools: {
+      type: Object
+    }
+  },
+  setup(l, {
+    slots: t
+  }) {
+    var N, k;
+    const f = $(l.filter || {}), {
+      t: r
+    } = ie(), {
+      renderAction: I
+    } = de(), b = me({
+      path: l.path,
+      filters: f.value,
+      columns: l.columns || [],
+      pagination: l.pagination
+    }), {
+      meta: d,
+      columns: h,
+      tablePagination: O,
+      table: W,
+      onUpdateColumnSelected: V,
+      onUpdateChecked: m,
+      columnSelected: B,
+      autoRefetch: L,
+      autoCountdown: x,
+      onAutoRefetch: U,
+      isExporting: q,
+      isExportingRows: F,
+      isImporting: H,
+      onExport: J,
+      onExportRows: K,
+      onImport: G
+    } = b, M = s(() => h.value.filter((a) => "title" in a && "key" in a).map((a) => ({
+      label: a.title,
+      value: a.key
+    }))), {
+      width: y
+    } = ne(), Q = s(() => h.value.reduce((o, i) => o + (Number(i == null ? void 0 : i.width) || Number(i == null ? void 0 : i.minWidth) || 110), 0)), u = ee({
+      show: !1,
+      collapse: !1
+    }), w = te(), {
+      height: X
+    } = re(w);
+    le(X, (a) => {
+      a > 35 ? u.show = !0 : u.show = !1;
+    }, {
+      immediate: !0,
+      deep: !0
+    });
+    const v = s(() => (l.filterSchema || []).map((a) => {
+      const {
+        title: o,
+        ...i
+      } = a;
+      return {
+        tag: ge,
+        attrs: {
+          label: o
+        },
+        children: i
+      };
+    })), {
+      render: Y
+    } = D({
+      data: (N = v.value) == null ? void 0 : N.slice(1),
+      components: {
+        NInput: E
+      }
+    }), {
+      render: Z
+    } = D({
+      data: (k = v.value) == null ? void 0 : k.slice(0, 1),
+      components: {
+        NInput: E
+      }
+    }), g = s(() => ({
+      import: !0,
+      export: !0,
+      refresh: !0,
+      ...l.tools
+    }));
+    return () => e(ve, {
+      actions: l.actions,
+      scrollbar: !1
+    }, {
+      default: () => {
+        var a, o, i, j, C, S, z, R, T;
+        return e("div", {
+          class: "flex flex-col gap-3 h-full relative "
+        }, [e("div", {
+          class: "flex gap-3 justify-between flex-col lg:flex-row"
+        }, [l.tabs && e("div", {
+          class: "flex flex-none"
+        }, [e(oe, {
+          type: "segment",
+          size: "small",
+          style: {
+            "--n-tab-padding": "4px 10px"
+          },
+          "default-value": (o = (a = l.tabs) == null ? void 0 : a[0]) == null ? void 0 : o.value,
+          value: (i = f.value) == null ? void 0 : i.tab,
+          onUpdateValue: (n) => {
+            f.value.tab = n;
+          }
+        }, {
+          default: () => {
+            var n;
+            return [(n = l.tabs) == null ? void 0 : n.map((P) => e(ue, {
+              name: P.value,
+              tab: P.label
+            }, null))];
+          }
+        })]), e("div", {
+          class: ["overflow-hidden flex-1", u.collapse ? "h-auto" : "h-8.5"]
+        }, [e("div", {
+          ref: w,
+          class: ["lg:flex gap-2 flex-wrap", l.tabs ? "justify-end" : "justify-start"]
+        }, [A(Z)])]), e("div", {
+          class: "flex gap-2 justify-between lg:justify-end"
+        }, [v.value.length > 1 && e(ce, {
+          trigger: "click",
+          displayDirective: "show"
+        }, {
+          trigger: () => e(c, {
+            iconPlacement: "right",
+            onClick: () => {
+              u.collapse = !u.collapse;
+            }
+          }, {
+            default: () => r("components.button.filter"),
+            icon: () => e("div", {
+              class: ["i-tabler:chevrons-down size-4 transition-all"]
+            }, null)
+          }),
+          default: () => e("div", {
+            class: "flex flex-col gap-2 py-1"
+          }, [A(Y)])
+        }), e("div", {
+          class: "flex gap-2 items-center"
+        }, [(j = t == null ? void 0 : t.tools) == null ? void 0 : j.call(t), e(se, {
+          options: M.value,
+          value: B.value,
+          onUpdateValue: (n) => {
+            V(n);
+          },
+          multiple: !0,
+          placement: "bottom-start",
+          trigger: "click"
+        }, {
+          default: () => [e(p, null, {
+            trigger: () => e(c, {
+              "icon-placement": "right"
+            }, {
+              icon: () => e("div", {
+                class: "i-tabler:columns size-4"
+              }, null)
+            }),
+            default: () => r("components.list.columnSetting")
+          })]
+        }), g.value.export && e(p, null, {
+          trigger: () => e(c, {
+            loading: q.value,
+            onClick: J
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:database-export size-4"
+            }, null)
+          }),
+          default: () => r("components.button.export")
+        }), g.value.import && e(p, null, {
+          trigger: () => e(c, {
+            loading: H.value,
+            onClick: G
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:database-import size-4"
+            }, null)
+          }),
+          default: () => r("components.button.import")
+        }), g.value.refresh && e(p, null, {
+          trigger: () => e(c, {
+            onClick: U
+          }, {
+            icon: () => L.value ? e(pe, {
+              class: "size-4",
+              type: "circle",
+              percentage: x.value * 10,
+              strokeWidth: 20,
+              color: "rgba(var(--ui-color-primary))"
+            }, {
+              default: () => [e("span", {
+                class: "text-8px"
+              }, [x.value])]
+            }) : e("div", {
+              class: "i-tabler:refresh size-4"
+            }, null)
+          }),
+          default: () => r("components.button.autoRefresh")
+        })]), e("div", {
+          class: "flex gap-2 justify-end"
+        }, [(C = t.actions) == null ? void 0 : C.call(t), ((S = l.actions) == null ? void 0 : S.length) > 0 && I({
+          type: y.value < 1024 ? "dropdown" : "button",
+          items: l.actions
+        })])])]), e("div", {
+          class: "flex-1 min-h-0"
+        }, [(z = t == null ? void 0 : t.default) == null ? void 0 : z.call(t, {
+          ...b,
+          width: Q.value
+        })]), e("div", {
+          class: "flex justify-between"
+        }, [e("div", null, [(R = t == null ? void 0 : t.bottom) == null ? void 0 : R.call(t)]), e("div", null, [l.pagination && e(fe, ae(O.value, {
+          simple: y.value < 768
+        }), {
+          prefix: () => {
+            var n;
+            return e("div", null, [r("components.list.total", {
+              total: ((n = d == null ? void 0 : d.value) == null ? void 0 : n.total) || 0
+            })]);
+          }
+        })])]), e(be, {
+          number: ((T = W.value.checkedRowKeys) == null ? void 0 : T.length) || 0 || 0,
+          group: [[{
+            icon: "i-tabler:x",
+            onClick: () => {
+              m == null || m([]);
+            }
+          }], [{
+            label: r("components.button.export"),
+            icon: "i-tabler:file-export",
+            loading: F.value,
+            onClick: K
+          }, {
+            label: r("components.button.delete"),
+            type: "error",
+            icon: "i-tabler:trash"
+          }]]
+        }, null)]);
+      }
+    });
+  }
+});
+export {
+  Be as DuxTableLayout
+};

package/dist/esm/components/layout/tools.js

@@ -0,0 +1,78 @@
+import { defineComponent as c, computed as s, createVNode as e, Transition as p, Fragment as m } from "vue";
+import { useI18n as y } from "@duxweb/dvha-core";
+import { NButton as u, NDropdown as g } from "naive-ui";
+const x = /* @__PURE__ */ c({
+  name: "DuxTableTools",
+  props: {
+    number: {
+      type: Number
+    },
+    options: {
+      type: Array
+    },
+    group: {
+      type: Array
+    },
+    dropdown: {
+      type: Array
+    }
+  },
+  setup(t) {
+    const {
+      t: i
+    } = y(), l = s(() => t.group ? t.group : [t.options]), d = s(() => t.number && t.number > 0);
+    return () => e("div", {
+      class: "absolute  bottom-0 left-0 right-0 pointer-events-none"
+    }, [e(p, {
+      name: "slide-up",
+      appear: !0,
+      enterActiveClass: "transition-all duration-200 ease-out",
+      enterFromClass: "transform translate-y-full opacity-0",
+      enterToClass: "transform translate-y-0 opacity-100",
+      leaveActiveClass: "transition-all duration-200 ease-in",
+      leaveFromClass: "transform translate-y-0 opacity-100",
+      leaveToClass: "transform translate-y-full opacity-0"
+    }, {
+      default: () => {
+        var r;
+        return [d.value ? e("div", {
+          class: "flex h-12 px-1 justify-between lg:justify-center gap-2 pointer-events-auto backdrop-blur"
+        }, [(r = l.value) == null ? void 0 : r.map((n, o) => e("div", {
+          class: "h-10 mt-1 bg-gray-800 rounded px-4 py-1 shadow-lg flex items-center gap-4"
+        }, [o === l.value.length - 1 && e(m, null, [e("span", {
+          class: "text-gray-300"
+        }, [i("components.list.selectedItems", {
+          num: t.number || 0
+        })]), e("div", {
+          class: "w-px h-4 bg-gray-600"
+        }, null)]), n == null ? void 0 : n.map((a) => e(u, {
+          text: !0,
+          onClick: a.onClick,
+          class: "text-gray-300",
+          loading: a.loading,
+          disabled: a.disabled,
+          type: a.type
+        }, {
+          default: () => a.label,
+          icon: () => e("div", {
+            class: a.icon
+          }, null)
+        })), o === l.value.length - 1 && t.dropdown && t.dropdown.length > 0 && e(g, {
+          options: t.dropdown
+        }, {
+          default: () => [e(u, {
+            text: !0,
+            class: "text-gray-300"
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:dots-vertical size-4"
+            }, null)
+          })]
+        })]))]) : null];
+      }
+    })]);
+  }
+});
+export {
+  x as DuxTableTools
+};

package/dist/esm/components/list/card.js

@@ -0,0 +1,78 @@
+import { defineComponent as W, ref as R, computed as l, toRef as S, createVNode as s } from "vue";
+import { useElementSize as y, useWindowSize as z, watchDebounced as M } from "@vueuse/core";
+import { DuxListLayout as g } from "../layout/list.js";
+const L = /* @__PURE__ */ W({
+  name: "DuxCardPage",
+  props: {
+    colWidth: {
+      type: Number,
+      default: 320
+    },
+    rows: {
+      type: Number,
+      default: 4
+    },
+    maxRows: {
+      type: Number,
+      default: 10
+    }
+  },
+  extends: g,
+  slots: Object,
+  setup(e, {
+    slots: a
+  }) {
+    const h = R(), {
+      width: u
+    } = y(h), {
+      width: f
+    } = z(), w = l(() => e.colWidth || 320), r = (t = 0) => {
+      const i = t || f.value || 1024, o = e.colWidth || 320, c = e.rows || 4, b = e.maxRows || 10, d = 0.25 * 16 * 3, m = Math.max(1, Math.floor((i + d) / (o + d))), x = Math.floor((1920 + d) / (o + d)) * c, C = Math.ceil(x / m), v = Math.min(Math.max(C, c), b);
+      return m * v;
+    }, n = S(e.pagination && typeof e.pagination == "object" ? e.pagination : {
+      page: 1,
+      pageSize: r()
+    });
+    M([u], () => {
+      if (e.pagination && typeof e.pagination == "object")
+        return;
+      const t = r(u.value);
+      t !== n.value.pageSize && (n.value.pageSize = t, n.value.page = 1);
+    }, {
+      debounce: 300
+    });
+    const p = l(() => {
+      const {
+        maxRows: t,
+        rows: i,
+        colWidth: o,
+        ...c
+      } = e;
+      return {
+        ...c,
+        pagination: n.value
+      };
+    });
+    return () => s(g, p.value, {
+      default: (t) => s("div", {
+        class: "grid gap-3",
+        style: {
+          "grid-template-columns": `repeat(auto-fit, minmax(${w.value}px, 1fr))`
+        }
+      }, [t.list.value.map((i) => {
+        var o;
+        return (o = a == null ? void 0 : a.default) == null ? void 0 : o.call(a, {
+          item: i,
+          isChecked: t.isChecked,
+          toggleChecked: t.toggleChecked
+        });
+      })]),
+      actions: a.actions,
+      tools: a.tools,
+      bottom: a.bottom
+    });
+  }
+});
+export {
+  L as DuxCardPage
+};

package/dist/esm/components/list/list.js

@@ -0,0 +1,38 @@
+import { defineComponent as p, computed as r, createVNode as a } from "vue";
+import { DuxListLayout as c } from "../layout/list.js";
+const f = /* @__PURE__ */ p({
+  name: "DuxListPage",
+  props: {},
+  extends: c,
+  slots: Object,
+  setup(i, {
+    slots: e
+  }) {
+    const n = r(() => {
+      const {
+        ...t
+      } = i;
+      return {
+        ...t
+      };
+    });
+    return () => a(c, n.value, {
+      default: (t) => a("div", {
+        class: "flex flex-col gap-3"
+      }, [t.list.value.map((d) => {
+        var o;
+        return (o = e == null ? void 0 : e.default) == null ? void 0 : o.call(e, {
+          item: d,
+          isChecked: t.isChecked,
+          toggleChecked: t.toggleChecked
+        });
+      })]),
+      actions: e.actions,
+      tools: e.tools,
+      bottom: e.bottom
+    });
+  }
+});
+export {
+  f as DuxListPage
+};

package/dist/esm/components/media/media.js

@@ -0,0 +1,77 @@
+import { defineComponent as h, computed as y, createVNode as i, Fragment as k, isVNode as A } from "vue";
+import N from "clsx";
+import { NAvatar as b, NImageGroup as S, NImage as C } from "naive-ui";
+function j(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
+}
+const D = /* @__PURE__ */ h({
+  name: "DuxMedia",
+  props: {
+    title: String,
+    avatar: Boolean,
+    image: [String, Array],
+    desc: [String, Array],
+    extend: String,
+    onClick: Function,
+    imageWidth: {
+      type: Number,
+      default: 48
+    },
+    imageHeight: {
+      type: Number,
+      default: 48
+    }
+  },
+  setup(e, {
+    slots: a
+  }) {
+    const c = y(() => Array.isArray(e.image) ? e.image : e.image ? [e.image] : []), t = y(() => Array.isArray(e.desc) ? e.desc : e.desc ? [e.desc] : []);
+    return () => {
+      var u, r, g, x, f, l, v;
+      let m;
+      return i("div", {
+        class: "flex gap-2 items-center"
+      }, [(a == null ? void 0 : a.image) && i("div", {
+        class: "flex-none flex items-center gap-2"
+      }, [(u = a == null ? void 0 : a.image) == null ? void 0 : u.call(a)]), (c == null ? void 0 : c.value.length) > 0 && i("div", {
+        class: "flex-none flex items-center gap-2"
+      }, [e.avatar ? i(k, null, [c.value.map((n, d) => i(b, {
+        key: d,
+        src: n,
+        round: !0,
+        size: e.imageWidth
+      }, null))]) : i(S, null, j(m = c.value.map((n, d) => i(C, {
+        key: d,
+        src: n,
+        class: "rounded",
+        objectFit: "cover",
+        width: e.imageWidth,
+        height: e.imageHeight
+      }, null))) ? m : {
+        default: () => [m]
+      })]), i("div", {
+        class: "flex-1 flex-col gap-2 min-w-0 truncate items-center"
+      }, [i("div", {
+        class: "flex gap-2 items-center"
+      }, [(r = a.prefix) == null ? void 0 : r.call(a), (e.title || a.default) && i("div", {
+        onClick: () => {
+          var n;
+          return (n = e.onClick) == null ? void 0 : n.call(e);
+        },
+        class: N(["transition-all truncate text-default", (e == null ? void 0 : e.onClick) && "hover:text-primary cursor-pointer"])
+      }, [e.title || ((g = a.default) == null ? void 0 : g.call(a))])]), ((t == null ? void 0 : t.value.length) > 0 || a.desc) && i("div", {
+        class: "text-sm text-muted flex flex-col gap-0"
+      }, [(f = t == null ? void 0 : (x = t.value).map) == null ? void 0 : f.call(x, (n, d) => i("div", {
+        key: d,
+        class: "truncate"
+      }, [n])), (l = a.desc) == null ? void 0 : l.call(a)])]), (e == null ? void 0 : e.extend) && i("div", {
+        class: "flex-none flex items-center gap-2 text-gray-7"
+      }, [e == null ? void 0 : e.extend]), (a == null ? void 0 : a.extend) && i("div", {
+        class: "flex-none flex items-center gap-2 text-gray-7"
+      }, [(v = a == null ? void 0 : a.extend) == null ? void 0 : v.call(a)])]);
+    };
+  }
+});
+export {
+  D as DuxMedia
+};

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

@@ -0,0 +1,116 @@
+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({
+  name: "DuxModal",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    component: {
+      type: Function
+    },
+    componentProps: {
+      type: Object,
+      default: () => ({})
+    },
+    width: {
+      type: Number,
+      default: 500
+    },
+    onClose: {
+      type: Function,
+      default: () => {
+      }
+    },
+    onConfirm: {
+      type: Function,
+      default: () => {
+      }
+    },
+    draggable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  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
+      },
+      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",
+      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
+        }), null),
+        fallback: () => t(O, {
+          show: !0
+        }, {
+          default: () => [t("div", {
+            class: "h-100"
+          }, null)]
+        })
+      })]
+    })])]);
+  }
+});
+export {
+  A as DuxModal,
+  A as default
+};