@done-coding/admin-core 0.14.1-alpha.0 → 0.15.1-alpha.0

package/es/components/display/TabsMain.vue.mjs

@@ -1,11 +1,15 @@
-import { defineComponent as c, inject as N, toRefs as R, useModel as T, useSlots as A, ref as P, computed as f, h as $, provide as x, watch as E, openBlock as o, createBlock as l, resolveDynamicComponent as q, mergeProps as I, withCtx as s, KeepAlive as U, unref as i, createCommentVNode as j, createVNode as z, createSlots as D, renderList as F, renderSlot as G, normalizeProps as J, guardReactiveProps as O, createElementVNode as Q, mergeModels as W } from "vue";
-import X from "./TabsRefineFlow.vue.mjs";
-import Y from "./TabsNaturalFlow.vue.mjs";
-import Z from "./TabsHeader.vue.mjs";
-import { TABS_MAIN_VISUAL_LEVEL as h } from "../../inject/key.mjs";
-const oe = /* @__PURE__ */ c({
+import { defineComponent as K, inject as O, toRefs as j, useModel as x, useSlots as z, ref as D, computed as T, h as G, provide as J, watch as W, unref as a, openBlock as u, createBlock as v, createSlots as C, renderList as m, withCtx as s, renderSlot as d, normalizeProps as f, guardReactiveProps as c, resolveDynamicComponent as X, mergeProps as Y, KeepAlive as Z, createCommentVNode as ee, createVNode as te, createElementVNode as ae, mergeModels as ne } from "vue";
+import { useRoute as oe, useRouter as re } from "vue-router";
+import ie from "./TabsRefineFlow.vue.mjs";
+import le from "./TabsNaturalFlow.vue.mjs";
+import se from "./TabsHeader.vue.mjs";
+import ue from "./TabsTile.vue.mjs";
+import { watchTabToQuery as ve, getTabQuery as pe } from "./use-tabs-query-sync.mjs";
+import { TABS_MAIN_VISUAL_LEVEL as q } from "../../inject/key.mjs";
+import { useActivated as me } from "../../hooks/activated.mjs";
+const He = /* @__PURE__ */ K({
   __name: "TabsMain",
-  props: /* @__PURE__ */ W({
+  props: /* @__PURE__ */ ne({
     tabs: {},
     viewportHeight: {},
     minHeight: { default: 100 },
@@ -14,84 +18,135 @@ const oe = /* @__PURE__ */ c({
     padding: {},
     refine: { type: Boolean, default: !1 },
     refineReduceHeight: { default: 0 },
-    variant: {}
+    variant: {},
+    queryKey: {},
+    tile: { type: Boolean },
+    navPosition: {},
+    navMode: {},
+    navOffset: {}
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(u) {
-    const r = u, p = N(h, 0) + 1, {
+  setup(y) {
+    const r = y, h = O(q, 0) + 1, {
       viewportHeight: g,
-      minHeight: y,
-      channel: H,
-      parentChannel: b,
-      padding: w,
-      refine: v,
-      refineReduceHeight: V,
-      variant: k,
-      tabs: d
-    } = R(r), n = T(u, "modelValue"), C = A(), m = P(void 0), _ = f(
-      () => v.value ? X : Y
-    ), L = f(
-      () => v.value ? {
+      minHeight: b,
+      channel: M,
+      parentChannel: k,
+      padding: R,
+      refine: p,
+      refineReduceHeight: $,
+      variant: L,
+      tabs: i,
+      tile: A,
+      navPosition: B,
+      navMode: P,
+      navOffset: S
+    } = j(r), o = x(y, "modelValue"), w = oe(), N = re();
+    let V = !1;
+    me((n) => {
+      if (!n.isActivated) return;
+      const t = r.queryKey ? pe(w, r.queryKey) : void 0;
+      t && (o.value = t), V = !0;
+    }), ve({
+      model: o,
+      route: w,
+      router: N,
+      queryKey: () => r.queryKey,
+      ready: () => V
+    });
+    const _ = z(), H = D(void 0), E = T(
+      () => p.value ? ie : le
+    ), Q = T(
+      () => p.value ? {
         viewportHeight: g.value,
-        minHeight: y.value,
-        channel: H.value,
-        parentChannel: b.value,
-        padding: w.value,
-        refineReduceHeight: V.value
+        minHeight: b.value,
+        channel: M.value,
+        parentChannel: k.value,
+        padding: R.value,
+        refineReduceHeight: $.value
       } : {}
-    ), K = (t) => r.tabs.find((e) => e.key === t), M = (t) => {
-      m.value = t;
-    }, S = c({
+    ), U = (n) => r.tabs.find((t) => t.key === n), F = (n) => {
+      H.value = n;
+    }, I = K({
       name: "TabsMainPane",
       props: {
         paneKey: { type: String, required: !0 },
         viewportHeight: { type: Number, required: !1 }
       },
-      setup(t) {
+      setup(n) {
         return () => {
-          const e = C[t.paneKey], a = K(t.paneKey);
-          return e ? e({
-            tab: a,
+          const t = _[n.paneKey], e = U(n.paneKey);
+          return t ? t({
+            tab: e,
             active: !0,
-            viewportHeight: t.viewportHeight
-          }) : a != null && a.component ? $(a.component) : null;
+            viewportHeight: n.viewportHeight
+          }) : e != null && e.component ? G(e.component) : null;
         };
       }
     });
-    return x(h, p), E(
-      [n, () => r.tabs],
+    return J(q, h), W(
+      [o, () => r.tabs],
       () => {
-        !(!!n.value && r.tabs.some((e) => e.key === n.value)) && r.tabs.length && (n.value = r.tabs[0].key);
+        !(!!o.value && r.tabs.some((t) => t.key === o.value)) && r.tabs.length && (o.value = r.tabs[0].key);
       },
       { immediate: !0 }
-    ), (t, e) => (o(), l(q(_.value), I({ class: "dc-tabs-main" }, L.value, { onViewportHeightChange: M }), {
+    ), (n, t) => a(A) ? (u(), v(ue, {
+      key: 0,
+      modelValue: o.value,
+      "onUpdate:modelValue": t[0] || (t[0] = (e) => o.value = e),
+      class: "dc-tabs-main",
+      tabs: a(i),
+      refine: a(p),
+      "viewport-height": a(g),
+      "min-height": a(b),
+      "parent-channel": a(k),
+      "nav-position": a(B),
+      "nav-mode": a(P),
+      "nav-offset": a(S)
+    }, C({ _: 2 }, [
+      m(a(i), (e) => ({
+        name: e.key,
+        fn: s((l) => [
+          d(n.$slots, e.key, f(c(l)))
+        ])
+      })),
+      m(a(i), (e) => ({
+        name: `header-${e.key}`,
+        fn: s((l) => [
+          d(n.$slots, `header-${e.key}`, f(c(l)))
+        ])
+      }))
+    ]), 1032, ["modelValue", "tabs", "refine", "viewport-height", "min-height", "parent-channel", "nav-position", "nav-mode", "nav-offset"])) : (u(), v(X(E.value), Y({
+      key: 1,
+      class: "dc-tabs-main"
+    }, Q.value, { onViewportHeightChange: F }), {
       header: s(() => [
-        z(Z, {
-          "active-key": n.value,
-          "onUpdate:activeKey": e[0] || (e[0] = (a) => n.value = a),
-          tabs: i(d),
-          level: p,
-          variant: i(k)
-        }, D({ _: 2 }, [
-          F(i(d), (a) => ({
-            name: a.key,
-            fn: s((B) => [
-              G(t.$slots, `header-${a.key}`, J(O(B)))
+        te(se, {
+          "active-key": o.value,
+          "onUpdate:activeKey": t[1] || (t[1] = (e) => o.value = e),
+          tabs: a(i),
+          level: h,
+          variant: a(L)
+        }, C({ _: 2 }, [
+          m(a(i), (e) => ({
+            name: e.key,
+            fn: s((l) => [
+              d(n.$slots, `header-${e.key}`, f(c(l)))
             ])
           }))
         ]), 1032, ["active-key", "tabs", "variant"]),
-        e[1] || (e[1] = Q("div", { style: { height: "8px" } }, null, -1))
+        t[2] || (t[2] = ae("div", { style: { height: "8px" } }, null, -1))
       ]),
       default: s(() => [
-        (o(), l(U, null, [
-          n.value ? (o(), l(i(S), {
-            key: n.value,
-            "pane-key": n.value,
-            "viewport-height": m.value
-          }, null, 8, ["pane-key", "viewport-height"])) : j("", !0)
+        (u(), v(Z, null, [
+          o.value ? (u(), v(a(I), {
+            key: o.value,
+            "pane-key": o.value,
+            "viewport-height": H.value
+          }, null, 8, ["pane-key", "viewport-height"])) : ee("", !0)
         ], 1024))
       ]),
       _: 3
@@ -99,5 +154,5 @@ const oe = /* @__PURE__ */ c({
   }
 });
 export {
-  oe as default
+  He as default
 };

package/es/components/display/TabsTile.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./TabsTile.vue2.mjs";
+/* empty css               */
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-39fad9e5"]]);
+export {
+  f as default
+};

package/es/components/display/TabsTile.vue2.mjs

@@ -0,0 +1,182 @@
+import { defineComponent as Q, toRefs as U, useModel as X, ref as _, computed as r, inject as Y, watch as C, onMounted as Z, nextTick as M, openBlock as a, createElementBlock as d, normalizeClass as ee, createElementVNode as N, normalizeStyle as V, Fragment as H, renderList as P, unref as c, createVNode as B, withCtx as $, renderSlot as F, createBlock as I, resolveDynamicComponent as te, createCommentVNode as oe, createTextVNode as ne, toDisplayString as le, withModifiers as re, mergeModels as se } from "vue";
+import { ElCard as ae, ElAnchor as ie, ElAnchorLink as ce } from "element-plus";
+import ue from "../slot-layout/SlotLayoutTemplate.vue.mjs";
+import { getId as fe } from "../../utils/id.mjs";
+import { APP_PAGE_CONTENT_INSET as de } from "../../inject/key.mjs";
+import { useChannelViewportHeight as me } from "../../hooks/use-channel-viewport-height.mjs";
+import { useActivated as ve } from "../../hooks/activated.mjs";
+import { domClosestScrollableAncestor as he } from "../../utils/dom.mjs";
+const pe = ["id", "data-tab-key"], Ae = /* @__PURE__ */ Q({
+  __name: "TabsTile",
+  props: /* @__PURE__ */ se({
+    tabs: {},
+    refine: { type: Boolean, default: !1 },
+    viewportHeight: {},
+    minHeight: { default: 100 },
+    parentChannel: {},
+    navPosition: { default: "bottom-right" },
+    navMode: { default: "auto" },
+    navOffset: { default: 12 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(A) {
+    const n = A, { tabs: S } = U(n), s = X(A, "modelValue"), m = _(), v = _();
+    let h = !1, p = !1;
+    const O = fe(`dc-tt-${Math.random().toString(36).slice(2, 7)}`), u = (e) => `${O}-p${e}`, D = r(() => {
+      const e = /* @__PURE__ */ new Map();
+      return n.tabs.forEach((o, t) => e.set(`#${u(t)}`, o.key)), e;
+    }), b = r(() => {
+      const e = /* @__PURE__ */ new Map();
+      return n.tabs.forEach((o, t) => e.set(o.key, `#${u(t)}`)), e;
+    }), f = Y(de, void 0), { viewportHeightFinal: L } = me(n), z = r(
+      () => Math.max(L.value, n.minHeight)
+    ), W = r(() => {
+      const e = {};
+      return n.refine ? { height: `${z.value}px`, overflow: "auto" } : e;
+    }), y = _(), j = () => {
+      y.value = he(
+        m.value
+      );
+    }, G = r(
+      () => n.refine ? m.value : y.value
+    ), w = r(
+      () => n.refine || y.value ? 0 : (f == null ? void 0 : f.value.top) ?? 0
+    ), E = r(
+      () => n.navMode === "auto" ? n.refine ? "absolute" : "sticky" : n.navMode
+    ), K = r(() => `dc-tabs-tile--nav-${E.value}`), q = r(() => {
+      const e = `${n.navOffset}px`, o = n.navPosition.startsWith("top"), t = n.navPosition.endsWith("left"), l = E.value;
+      return l === "sticky" ? {
+        position: "sticky",
+        [o ? "top" : "bottom"]: e,
+        alignSelf: t ? "flex-start" : "flex-end",
+        order: o ? -1 : 1
+      } : {
+        position: l,
+        [o ? "top" : "bottom"]: e,
+        [t ? "left" : "right"]: e
+      };
+    }), J = (e) => {
+      const o = D.value.get(e);
+      !o || o === s.value || (h = !0, s.value = o);
+    };
+    C(
+      s,
+      (e) => {
+        var l;
+        const o = h;
+        if (h = !1, !p || !e || o) return;
+        const t = b.value.get(e);
+        t && ((l = v.value) == null || l.scrollTo(t));
+      },
+      { flush: "post" }
+    );
+    let k = !1;
+    const g = () => {
+      var e, o;
+      if (!k && n.tabs.length && (k = !0, s.value && s.value !== ((e = n.tabs[0]) == null ? void 0 : e.key))) {
+        const t = b.value.get(s.value);
+        t && ((o = v.value) == null || o.scrollTo(t));
+      }
+    };
+    C(
+      () => n.tabs.length,
+      (e, o) => {
+        !e || o || !p || k || M(g);
+      },
+      { flush: "post" }
+    );
+    let T, R, i;
+    const x = () => {
+      clearTimeout(T), clearTimeout(R), i == null || i(), i = void 0;
+    };
+    return ve((e) => {
+      if (!e.isActivated) {
+        x();
+        return;
+      }
+      j();
+    }), Z(() => {
+      if (M(() => {
+        p = !0;
+      }), !f) {
+        M(g);
+        return;
+      }
+      const e = () => {
+        x(), g();
+      }, o = () => {
+        clearTimeout(T), T = setTimeout(e, 80);
+      };
+      i = C(w, o, { flush: "post" }), o(), R = setTimeout(e, 1e3);
+    }), (e, o) => (a(), d("div", {
+      class: ee(["dc-tabs-tile", K.value])
+    }, [
+      N("div", {
+        ref_key: "scrollRootRef",
+        ref: m,
+        class: "dc-tabs-tile__scroll",
+        style: V(W.value)
+      }, [
+        (a(!0), d(H, null, P(c(S), (t, l) => (a(), d("div", {
+          id: u(l),
+          key: t.key,
+          class: "dc-tabs-tile__item",
+          "data-tab-key": t.key
+        }, [
+          B(ue, {
+            tag: c(ae),
+            class: "dc-tabs-tile__card"
+          }, {
+            header: $(() => [
+              F(e.$slots, `header-${t.key}`, {
+                tab: t,
+                active: t.key === s.value
+              }, () => [
+                ne(le(t.title), 1)
+              ], !0)
+            ]),
+            default: $(() => [
+              F(e.$slots, t.key, {
+                tab: t,
+                active: t.key === s.value
+              }, () => [
+                t.component ? (a(), I(te(t.component), { key: 0 })) : oe("", !0)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["tag"])
+        ], 8, pe))), 128))
+      ], 4),
+      N("div", {
+        class: "dc-tabs-tile__nav",
+        style: V(q.value),
+        onClick: o[0] || (o[0] = re(() => {
+        }, ["prevent"]))
+      }, [
+        B(c(ie), {
+          ref_key: "anchorRef",
+          ref: v,
+          container: G.value,
+          offset: w.value,
+          bound: 20,
+          onChange: J
+        }, {
+          default: $(() => [
+            (a(!0), d(H, null, P(c(S), (t, l) => (a(), I(c(ce), {
+              key: t.key,
+              href: `#${u(l)}`,
+              title: t.title
+            }, null, 8, ["href", "title"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["container", "offset"])
+      ], 4)
+    ], 2));
+  }
+});
+export {
+  Ae as default
+};

package/es/components/display/use-tabs-query-sync.mjs

@@ -0,0 +1,26 @@
+import { watch as y } from "vue";
+function a(t, e) {
+  if (!t || !e) return;
+  const r = t.query[e];
+  return Array.isArray(r) ? r[0] ?? void 0 : r ?? void 0;
+}
+function c(t) {
+  const { activeKey: e, route: r, router: u, queryKey: o } = t;
+  !r || !u || !o || !e || a(r, o) !== e && u.replace({ query: { ...r.query, [o]: e } }).catch(() => {
+  });
+}
+function s(t) {
+  const { model: e, route: r, router: u, queryKey: o, ready: i } = t;
+  !r || !u || y(
+    e,
+    (n) => {
+      i() && c({ activeKey: n, route: r, router: u, queryKey: o() });
+    },
+    { flush: "post" }
+  );
+}
+export {
+  a as getTabQuery,
+  s as watchTabToQuery,
+  c as writeTabQuery
+};

package/es/components/form/FormSearch.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./FormSearch.vue2.mjs";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.mjs";
-const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-290fe11f"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-eb50264d"]]);
 export {
-  a as default
+  e as default
 };