@duxweb/dvha-pro 0.0.5

package/dist/esm/components/form/settingForm.js

@@ -0,0 +1,104 @@
+import { defineComponent as d, ref as l, toRef as g, computed as x, createVNode as m } from "vue";
+import { useI18n as y, useExtendForm as S } from "@duxweb/dvha-core";
+import { useMessage as b, NTabs as p } from "naive-ui";
+import "../../node_modules/@overlastic/vue/dist/index.js";
+import "vue-router";
+import "clsx";
+import "jinrishici";
+import "lodash-es";
+import "@vueuse/core";
+import "vee-validate";
+import "@duxweb/dvha-naiveui";
+import "pinia";
+import "@vee-validate/i18n";
+import "vue-command-palette";
+import { DuxPage as v } from "../../pages/page.js";
+import "../../pages/page404.js";
+const R = /* @__PURE__ */ d({
+  name: "DuxSettingForm",
+  props: {
+    id: {
+      type: [String, Number]
+    },
+    action: {
+      type: String
+    },
+    path: {
+      type: String
+    },
+    data: {
+      type: Object
+    },
+    onSuccess: {
+      type: Function
+    },
+    onError: {
+      type: Function
+    },
+    tabs: {
+      type: Boolean,
+      default: !1
+    },
+    defaultTab: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "medium"
+    }
+  },
+  setup(e, {
+    slots: t
+  }) {
+    const u = l(e.defaultTab), o = g(e, "data", {}), {
+      t: r
+    } = y(), i = b(), c = S({
+      id: e.id,
+      path: e.path,
+      form: o,
+      action: e.action,
+      onError: (n) => {
+        var a;
+        i.error(n.message || r("components.form.error")), (a = e.onError) == null || a.call(e, n);
+      },
+      onSuccess: (n) => {
+        var a;
+        i.success(r("components.form.success")), (a = e.onSuccess) == null || a.call(e, n);
+      }
+    }), f = x(() => {
+      switch (e.size) {
+        case "small":
+          return "lg:max-w-lg";
+        case "large":
+          return "lg:max-w-4xl";
+        case "medium":
+        default:
+          return "lg:max-w-2xl";
+      }
+    });
+    return () => m(v, null, {
+      default: () => {
+        var n;
+        return [m("div", {
+          class: `flex flex-col gap-6 w-full ${f.value} mx-auto py-4`
+        }, [e.tabs ? m(p, {
+          defaultValue: e.defaultTab,
+          value: u.value,
+          onUpdateValue: (a) => {
+            u.value = a;
+          },
+          type: "segment"
+        }, {
+          default: () => {
+            var a;
+            return [(a = t == null ? void 0 : t.default) == null ? void 0 : a.call(t, c)];
+          }
+        }) : (n = t == null ? void 0 : t.default) == null ? void 0 : n.call(t, c)])];
+      }
+    });
+  }
+});
+export {
+  R as DuxSettingForm
+};

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

@@ -0,0 +1,27 @@
+import { defineComponent as n, createVNode as a } from "vue";
+const i = /* @__PURE__ */ n({
+  name: "DuxTableFilter",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(l, {
+    slots: e
+  }) {
+    return () => {
+      var t;
+      return a("div", {
+        class: "flex gap-2 gap-2 flex-nowrap items-center"
+      }, [l.label && a("div", {
+        class: "text-sm text-default whitespace-nowrap"
+      }, [l.label]), a("div", {
+        class: "flex-1 lg:flex-none min-w-20"
+      }, [(t = e.default) == null ? void 0 : t.call(e)])]);
+    };
+  }
+});
+export {
+  i as DuxTableFilter
+};

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

@@ -0,0 +1,333 @@
+import { defineComponent as _, toRef as R, ref as U, computed as s, reactive as $, watch as ee, onMounted as te, createVNode as e, h as D, mergeProps as ae } from "vue";
+import { useI18n as le, useExtendList as ie, useJsonSchema as E } from "@duxweb/dvha-core";
+import { useWindowSize as ne } from "@vueuse/core";
+import { NTooltip as f, NCheckbox as L, NTabs as re, NTab as oe, NButton as d, NPopover as ce, NSpin as ue, NProgress as se, NPagination as de } from "naive-ui";
+import { useAction as pe } from "../../hooks/action.js";
+import "@duxweb/dvha-naiveui";
+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 { DuxPage as fe } from "../../pages/page.js";
+import "../../pages/page404.js";
+import { DuxPageEmpty as me } from "../../pages/pageEmpty.js";
+import { DuxTableFilter as ge } from "./filter.js";
+import { DuxTableTools as ve } from "./tools.js";
+import "pinia";
+const qe = /* @__PURE__ */ _({
+  name: "DuxListLayout",
+  props: {
+    rowKey: {
+      type: String,
+      default: "id"
+    },
+    path: {
+      type: String,
+      required: !0
+    },
+    filter: {
+      type: Object
+    },
+    filterSchema: {
+      type: Array
+    },
+    pagination: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    tabs: {
+      type: Array
+    },
+    tools: {
+      type: Object
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    checkable: {
+      type: Boolean
+    }
+  },
+  setup(t, {
+    slots: l
+  }) {
+    var A;
+    const T = R(t.filter || {}), {
+      t: n
+    } = le(), {
+      renderAction: q
+    } = pe(), I = R(t.pagination && typeof t.pagination == "object" ? t.pagination : {
+      page: 1,
+      pageSize: 20
+    }), m = U({}), O = () => {
+      Object.assign(m.value, T.value);
+    }, a = ie({
+      path: t.path,
+      filters: m.value,
+      pagination: I.value
+    }), {
+      meta: v,
+      list: b,
+      isLoading: x,
+      autoRefetch: W,
+      autoCountdown: y,
+      onAutoRefetch: B,
+      isExporting: V,
+      isExportingRows: J,
+      isImporting: S,
+      onExport: M,
+      onExportRows: K,
+      onImport: Q
+    } = a, G = s(() => ({
+      page: a.page.value,
+      pageSize: a.pageSize.value,
+      pageCount: a.pageCount.value,
+      pageSizes: a.pageSizes,
+      pageSlot: 5,
+      onUpdatePage: a.onUpdatePage,
+      onUpdatePageSize: a.onUpdatePageSize,
+      showSizePicker: !0,
+      showQuickJumper: !0
+    })), k = $({
+      show: !1,
+      collapse: !1
+    }), g = U(((A = t.filterSchema) == null ? void 0 : A.length) || 0), {
+      width: p
+    } = ne(), w = () => {
+      var u;
+      if (!((u = t.filterSchema) != null && u.length)) return 0;
+      const o = t.filterSchema.length;
+      if (o <= 3)
+        return o;
+      const c = p.value || 1024;
+      let r = 3;
+      return c >= 1280 ? r = 4 : c >= 1024 ? r = 3 : c >= 768 ? r = 2 : r = 1, Math.min(o, r);
+    };
+    ee(p, () => {
+      g.value = w();
+    }), te(() => {
+      g.value = w();
+    });
+    const H = s(() => (t.filterSchema || []).slice(0, g.value)), C = s(() => (t.filterSchema || []).slice(g.value)), X = s(() => C.value.length > 0), z = (o) => o.map((c) => {
+      const {
+        title: r,
+        ...u
+      } = c;
+      return {
+        tag: ge,
+        attrs: {
+          label: r,
+          class: "flex-1 min-w-0"
+        },
+        children: u
+      };
+    }), {
+      render: Y
+    } = E({
+      data: s(() => z(H.value))
+    }), {
+      render: Z
+    } = E({
+      data: s(() => z(C.value))
+    }), h = s(() => ({
+      import: !0,
+      export: !0,
+      refresh: !0,
+      ...t.tools
+    }));
+    return () => e(fe, {
+      padding: !1,
+      scrollbar: !1
+    }, {
+      default: () => {
+        var o, c, r, u, P, F, N;
+        return e("div", {
+          class: "flex flex-col h-full relative"
+        }, [e("div", {
+          class: "lg:justify-between gap-2 p-3"
+        }, [e("div", {
+          class: "flex flex-col lg:flex-row items-center gap-2"
+        }, [t.checkable && e("div", {
+          class: "hidden lg:flex items-center pl-2"
+        }, [e(f, null, {
+          trigger: () => e("div", {
+            class: "flex items-center"
+          }, [e(L, {
+            checked: a.isAllChecked.value,
+            indeterminate: a.isIndeterminate.value,
+            onUpdateChecked: a.toggleSelectAll
+          }, null)]),
+          default: () => n("components.list.selectAll")
+        })]), t.tabs && e("div", null, [e(re, {
+          type: "segment",
+          size: "small",
+          style: {
+            "--n-tab-padding": "4px 10px"
+          },
+          "default-value": (c = (o = t.tabs) == null ? void 0 : o[0]) == null ? void 0 : c.value,
+          value: (r = m.value) == null ? void 0 : r.tab,
+          onUpdateValue: (i) => {
+            m.value.tab = i;
+          }
+        }, {
+          default: () => {
+            var i;
+            return [(i = t.tabs) == null ? void 0 : i.map((j) => e(oe, {
+              name: j.value,
+              tab: j.label
+            }, null))];
+          }
+        })]), e("div", {
+          class: "flex gap-2"
+        }, [e("div", {
+          class: "flex flex-wrap gap-2 items-center flex-1 lg:flex-none"
+        }, [D(Y)]), e(d, {
+          type: "primary",
+          secondary: !0,
+          onClick: O
+        }, {
+          icon: () => e("div", {
+            class: "i-tabler:search size-4"
+          }, null),
+          default: () => n("components.button.search")
+        }), X.value && e(ce, {
+          trigger: "click",
+          displayDirective: "show"
+        }, {
+          trigger: () => e(d, {
+            iconPlacement: "right",
+            onClick: () => {
+              k.collapse = !k.collapse;
+            }
+          }, {
+            default: () => n("components.button.advanced"),
+            icon: () => e("div", {
+              class: ["i-tabler:chevrons-down size-4 transition-all"]
+            }, null)
+          }),
+          default: () => e("div", {
+            class: "flex flex-col gap-2 py-1"
+          }, [D(Z)])
+        })])]), e("div", {
+          class: "flex gap-2"
+        }, [(u = l.actions) == null ? void 0 : u.call(l), ((P = t.actions) == null ? void 0 : P.length) > 0 && q({
+          type: p.value < 1024 ? "dropdown" : "button",
+          text: p.value < 1024,
+          items: t.actions
+        })])]), e(ue, {
+          show: x.value,
+          class: "flex-1 min-h-0",
+          contentClass: "h-full"
+        }, {
+          default: () => {
+            var i;
+            return [e("div", {
+              class: ["h-full overflow-auto rounded-lg px-3"]
+            }, [!x.value && b.value.length === 0 && e("div", {
+              class: "flex justify-center items-center h-full"
+            }, [e(me, null, null)]), b.value.length > 0 && ((i = l == null ? void 0 : l.default) == null ? void 0 : i.call(l, a))])];
+          }
+        }), e("div", {
+          class: "flex justify-between px-3 py-2 gap-2"
+        }, [e("div", null, [e("div", {
+          class: "flex gap-1 items-center"
+        }, [t.checkable && e(f, null, {
+          trigger: () => e(d, {
+            loading: S.value,
+            circle: !0,
+            quaternary: !0
+          }, {
+            default: () => [e(L, {
+              checked: a.isAllChecked.value,
+              indeterminate: a.isIndeterminate.value,
+              onUpdateChecked: a.toggleSelectAll
+            }, null)]
+          }),
+          default: () => n("components.list.selectAll")
+        }), (F = l == null ? void 0 : l.tools) == null ? void 0 : F.call(l), h.value.export && e(f, null, {
+          trigger: () => e(d, {
+            loading: V.value,
+            onClick: M,
+            circle: !0,
+            quaternary: !0
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:database-export size-4"
+            }, null)
+          }),
+          default: () => n("components.button.export")
+        }), h.value.import && e(f, null, {
+          trigger: () => e(d, {
+            loading: S.value,
+            onClick: Q,
+            circle: !0,
+            quaternary: !0
+          }, {
+            icon: () => e("div", {
+              class: "i-tabler:database-import size-4"
+            }, null)
+          }),
+          default: () => n("components.button.import")
+        }), h.value.refresh && e(f, null, {
+          trigger: () => e(d, {
+            onClick: B,
+            circle: !0,
+            quaternary: !0
+          }, {
+            icon: () => W.value ? e(se, {
+              class: "size-4",
+              type: "circle",
+              percentage: y.value * 10,
+              strokeWidth: 20,
+              color: "rgba(var(--ui-color-primary))"
+            }, {
+              default: () => [e("span", {
+                class: "text-8px"
+              }, [y.value])]
+            }) : e("div", {
+              class: "i-tabler:refresh size-4"
+            }, null)
+          }),
+          default: () => n("components.button.autoRefresh")
+        })])]), e("div", {
+          class: "flex items-center gap-2"
+        }, [(N = l == null ? void 0 : l.bottom) == null ? void 0 : N.call(l), t.pagination && e(de, ae(G.value, {
+          simple: p.value < 768
+        }), {
+          prefix: () => {
+            var i;
+            return e("div", null, [n("components.list.total", {
+              total: ((i = v == null ? void 0 : v.value) == null ? void 0 : i.total) || 0
+            })]);
+          }
+        })])]), e(ve, {
+          number: a.checkeds.value.length,
+          group: [[{
+            icon: "i-tabler:x",
+            onClick: () => {
+              var i;
+              a.checkeds.value = [], (i = a.onUpdateChecked) == null || i.call(a, []);
+            }
+          }], [{
+            label: n("components.button.export"),
+            icon: "i-tabler:file-export",
+            loading: J.value,
+            onClick: K
+          }, {
+            label: n("components.button.delete"),
+            type: "error",
+            icon: "i-tabler:trash"
+          }]]
+        }, null)]);
+      }
+    });
+  }
+});
+export {
+  qe as DuxListLayout
+};