vft 0.0.61 → 0.0.62

package/es/components/side-menu/side-menu.vue2.js

@@ -1,17 +1,17 @@
-import { defineComponent as k, useSlots as E, ref as P, computed as d, h as f, onMounted as U, nextTick as W, createVNode as c } from "vue";
-import { listenerRouteChange as $, useRouterHelper as j } from "@vft/router";
-import { useSortable as z } from "@vft/use";
-import { isUrl as Y, addUnit as M, isNullOrUndefined as S } from "@vft/utils";
-import { useNamespace as D } from "../../hooks/use-namespace/index.js";
+import { defineComponent as N, useSlots as F, ref as h, computed as m, h as v, onMounted as G, nextTick as J, getCurrentInstance as K, createVNode as f } from "vue";
+import { listenerRouteChange as Q, useRouterHelper as X } from "@vft/router";
+import { useSortable as Z } from "@vft/use";
+import { isUrl as I, addUnit as C, isNullOrUndefined as V, removeUnit as _ } from "@vft/utils";
+import { useNamespace as ee } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "lodash";
 import "../../hooks/use-z-index/index.js";
 import "@vueuse/core";
-import { generateCssVars as F } from "../../utils/ns-cover.js";
+import { generateCssVars as te, cssVarValue as oe } from "../../utils/ns-cover.js";
 import "@vue/reactivity";
 import "@vue/shared";
 import "../divider/index.js";
-import { VftIcon as G } from "../icon/index.js";
+import { VftIcon as le } from "../icon/index.js";
 import "../avatar/index.js";
 import "../empty/index.js";
 import "../result/index.js";
@@ -20,11 +20,11 @@ import "../popper/index.js";
 import "../collapse-transition/index.js";
 import "../tooltip/index.js";
 import "../popover/index.js";
-import { VftMenu as J, VftSubMenu as K, VftMenuItem as b } from "../menu/index.js";
+import { VftMenu as ne, VftSubMenu as ie, VftMenuItem as k } from "../menu/index.js";
 import "../context-menu/context-menu.vue2.js";
 import "../multiple-tabs/multiple-tabs.vue2.js";
 import "@vft/store";
-import { useRouter as L } from "vue-router";
+import { useRouter as ae } from "vue-router";
 import "../header-layout/index.js";
 import "../footer-layout/index.js";
 import "../iframe-layout/index.js";
@@ -65,6 +65,8 @@ import "../select-v2/index.js";
 import "../verify-code/index.js";
 import "../table/index.js";
 import "../image-viewer/index.js";
+import "../list-cell/index.js";
+import "../dialog/index.js";
 import "../md-container/index.js";
 import "../md-comment/index.js";
 import "../md-tabs/index.js";
@@ -72,13 +74,14 @@ import "../md-vue-playground/index.js";
 import "../md-code-demo/index.js";
 import "../md-code-tabs/index.js";
 import "../message/index.js";
-const l = (
+import { useDragLine as re } from "./use-drag-line.js";
+const a = (
   /* hoist-static*/
-  D("side-menu")
-), Q = k({
-  name: l.b()
-}), ge = /* @__PURE__ */ k({
-  ...Q,
+  ee("side-menu")
+), ue = N({
+  name: a.b()
+}), Tt = /* @__PURE__ */ N({
+  ...ue,
   props: {
     menus: null,
     uniqueOpened: {
@@ -106,148 +109,176 @@ const l = (
       default: !1
     },
     dragOption: null,
+    dragWidth: {
+      type: Boolean,
+      default: !0
+    },
     useMenuSelect: {
       type: Boolean,
       default: !0
-    }
+    },
+    openListenRoute: {
+      type: Boolean,
+      default: !1
+    },
+    openDisabled: {
+      type: Boolean
+    },
+    defaultOpeneds: null
   },
-  emits: ["update:collapse", "dragEnd", "select"],
-  setup(o, {
-    emit: h
+  emits: ["update:collapse", "dragEnd", "select", "dragWidthEnd"],
+  setup(t, {
+    expose: T,
+    emit: b
   }) {
-    const s = E(), v = P(), r = d(() => ({
+    const c = F(), O = h(), n = m(() => ({
       path: "path",
       children: "children",
       title: "title",
       index: "path",
       icon: "icon",
-      ...o.attrMapping
+      disabled: "disabled",
+      ...t.attrMapping
     }));
-    $((t) => {
-      !t || t.meta.hideSide || (v.value = t.path);
+    Q((e) => {
+      var o;
+      !e || (o = e.meta) != null && o.hideSide && !t.openListenRoute || (O.value = e.path);
     });
-    const x = (t, a) => {
-      const i = t[r.value.path], p = t[r.value.title], n = t == null ? void 0 : t[r.value.children], u = t == null ? void 0 : t[r.value.index], m = t == null ? void 0 : t[r.value.icon];
-      return n != null && n.length ? f(
+    const B = (e, o) => {
+      const l = e[n.value.path], u = e[n.value.title], r = e == null ? void 0 : e[n.value.children], d = e == null ? void 0 : e[n.value.index], p = e == null ? void 0 : e[n.value.icon], s = !(e != null && e[n.value.disabled]);
+      return r != null && r.length ? v(
         // @ts-ignore
-        K,
+        ie,
         {
           popperAppendToBody: !0,
-          key: u || i,
-          index: u || i,
-          title: p,
-          icon: m,
-          popperClass: l.e("popper")
+          key: d || l,
+          index: d || l,
+          title: u,
+          icon: p,
+          popperClass: a.e("popper")
         },
         {
-          default: () => n == null ? void 0 : n.map((e, H) => {
-            var O;
-            const g = e[r.value.path], C = e[r.value.index], q = e[r.value.icon], R = e[r.value.title];
-            return (O = e == null ? void 0 : e[r.value.children]) != null && O.length ? x(e, H) : (
+          default: () => r == null ? void 0 : r.map((i, $) => {
+            var R;
+            const y = i[n.value.path], w = i[n.value.index], j = i[n.value.icon], z = i[n.value.title], Y = i[n.value.disabled];
+            return (R = i == null ? void 0 : i[n.value.children]) != null && R.length ? B(i, $) : (
               // @ts-ignore
-              f(b, {
-                key: C || g,
-                index: C || g,
-                route: g,
-                icon: q,
-                title: R,
-                disabled: e.disabled
+              v(k, {
+                key: w || y,
+                index: w || y,
+                route: y,
+                icon: j,
+                title: z,
+                disabled: t.openDisabled && Y
               })
             );
           })
         }
-      ) : f(b, {
-        key: u || i,
-        index: u || i,
-        title: p,
-        route: i,
-        icon: m,
-        disabled: t.disabled
-      }, s.menuItem ? () => {
-        var e;
-        return (e = s.menuItem) == null ? void 0 : e.call(s, {
-          item: t,
-          index: a
+      ) : v(k, {
+        key: d || l,
+        index: d || l,
+        title: u,
+        route: l,
+        icon: p,
+        disabled: t.openDisabled && s
+      }, c.menuItem ? () => {
+        var i;
+        return (i = c.menuItem) == null ? void 0 : i.call(c, {
+          item: e,
+          index: o
         });
       } : "");
-    }, w = d(() => {
-      var t, a;
-      return f(J, {
-        onSelect: o.useMenuSelect ? N : () => {
+    }, A = m(() => {
+      var e, o;
+      return v(ne, {
+        onSelect: t.useMenuSelect ? H : () => {
         },
-        defaultActive: o.defaultActive || v.value,
-        class: [l.e("con"), (t = o.dragOption) != null && t.dragClassName ? l.e((a = o.dragOption) == null ? void 0 : a.dragClassName) : ""],
+        defaultActive: t.defaultActive || O.value,
+        defaultOpeneds: t.defaultOpeneds,
+        class: [a.e("con"), (e = t.dragOption) != null && e.dragClassName ? a.e((o = t.dragOption) == null ? void 0 : o.dragClassName) : ""],
         style: {
-          height: `calc(100% - ${o.menuTopBottomHeight}px)`
+          height: `calc(100% - ${t.menuTopBottomHeight}px)`
         },
-        uniqueOpened: o.uniqueOpened,
-        collapse: o.collapse,
+        uniqueOpened: t.uniqueOpened,
+        collapse: t.collapse,
         "collapse-transition": !1
-      }, () => o.menus.map((i, p) => x(i, p)));
+      }, () => t.menus.map((l, u) => B(l, u)));
     }), {
-      go: y
-    } = j(), B = L();
-    async function N(t) {
-      var n, u, m;
-      const a = t.route;
-      let i = t.route;
-      t.indexPath.some((e) => Y(e)) && (i = t.indexPath.slice(-2).join("/"));
-      const p = (m = (u = (n = B.getRoutes().filter((e) => e.path === i)) == null ? void 0 : n[0]) == null ? void 0 : u.meta) == null ? void 0 : m.linkTarget;
-      y(p ? {
-        url: a,
+      go: S
+    } = X(), D = ae();
+    async function H(e) {
+      var r, d, p;
+      const o = e.route;
+      let l = e.route;
+      e.indexPath.some((s) => I(s)) && (l = e.indexPath.slice(-2).join("/"));
+      const u = (p = (d = (r = D.getRoutes().filter((s) => s.path === l)) == null ? void 0 : r[0]) == null ? void 0 : d.meta) == null ? void 0 : p.linkTarget;
+      S(u ? {
+        url: o,
         winOpenOpt: {
-          target: p
+          target: u
         }
-      } : a), h("select", t);
+      } : o), b("select", e);
     }
-    const T = d(() => ({
-      ...F({
-        width: o.collapse ? M(o.collapseWidth) : M(o.width)
+    const x = h(), q = m(() => ({
+      ...te({
+        width: t.collapse ? C(t.collapseWidth) : x.value ? C(x.value) : C(t.width)
       }, "side-menu"),
-      height: `calc(100% - ${o.extraHeight}px)`
-    })), A = d(() => [l.b(), l.m("fixed")]);
-    function V() {
-      h("update:collapse", !o.collapse);
-    }
-    return U(() => {
-      W(() => {
-        var t, a, i;
-        if ((t = o.dragOption) != null && t.dragClassName) {
-          const p = (i = document.querySelectorAll("." + l.e((a = o.dragOption) == null ? void 0 : a.dragClassName))) == null ? void 0 : i[0], {
-            initSortable: n
-          } = z(p, {
+      height: `calc(100% - ${t.extraHeight}px)`
+    })), E = m(() => [a.b(), a.m("fixed")]);
+    G(() => {
+      J(() => {
+        var e, o, l;
+        if ((e = t.dragOption) != null && e.dragClassName) {
+          const u = (l = document.querySelectorAll("." + a.e((o = t.dragOption) == null ? void 0 : o.dragClassName))) == null ? void 0 : l[0], {
+            initSortable: r
+          } = Z(u, {
             draggable: ".vft-menu-item",
-            onEnd: (u) => {
+            onEnd: (d) => {
               const {
-                oldIndex: m,
-                newIndex: e
-              } = u;
-              S(m) || S(e) || m === e || h("dragEnd", m, e);
+                oldIndex: p,
+                newIndex: s
+              } = d;
+              V(p) || V(s) || p === s || b("dragEnd", p, s);
             },
-            ...o.dragOption
+            ...t.dragOption
           });
-          n();
+          r();
         }
       });
-    }), () => c("div", {
-      class: A.value,
-      style: T.value
-    }, [s.top ? c("div", {
-      class: l.e("top")
-    }, [s.top()]) : null, w.value, s.bottom ? c("div", {
-      class: l.e("bottom")
-    }, [s.bottom()]) : o.showCollapse ? c("div", {
-      onClick: V,
-      class: [l.e("bottom"), l.e("collapse")]
-    }, [c(G, {
+    });
+    const g = h(), M = h(), W = oe("side-menu-width", g), U = m(() => ({
+      left: W.value
+    }));
+    function L() {
+      t.collapse || (x.value = W.value), b("update:collapse", !t.collapse);
+    }
+    const P = K();
+    return t.dragWidth && re(g, M, m(() => _(t.collapseWidth)), P, t.collapse), T({
+      sideRef: g
+    }), () => f("div", {
+      ref: g,
+      class: E.value,
+      style: q.value
+    }, [c.top ? f("div", {
+      class: a.e("top")
+    }, [c.top()]) : null, A.value, c.bottom ? f("div", {
+      class: a.e("bottom")
+    }, [c.bottom()]) : t.showCollapse ? f("div", {
+      onClick: L,
+      class: [a.e("bottom"), a.e("collapse")]
+    }, [f(le, {
       style: {
-        transform: o.collapse ? "rotateY(180deg)" : ""
+        transform: t.collapse ? "rotateY(180deg)" : ""
       },
       size: 20,
       icon: "ico-iconoir:sidebar-collapse"
-    }, null)]) : null]);
+    }, null)]) : null, t.dragWidth ? f("div", {
+      ref: M,
+      style: U.value,
+      class: a.e("drag-bar")
+    }, null) : null]);
   }
 });
 export {
-  ge as default
+  Tt as default
 };

package/es/components/side-menu/use-drag-line.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+/**
+ * Handle menu drag and drop related operations
+ * @param siderRef
+ * @param dragBarRef
+ * @param minWidth
+ * @param instance
+ * @param collapse
+ */
+export declare function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, minWidth: any, instance: any, collapse: any): {};

package/es/components/side-menu/use-drag-line.js

@@ -0,0 +1,51 @@
+import { addUnit as x } from "@vft/utils";
+import { onMounted as v, nextTick as g, unref as s } from "vue";
+import "lodash";
+import "@vueuse/core";
+import { setCssVar as y } from "../../utils/ns-cover.js";
+import { useDebounceFn as M } from "@vft/use";
+function $(i, c, a, m, p) {
+  v(() => {
+    g(() => {
+      M(h, 100)();
+    });
+  });
+  function r(t) {
+    var o;
+    const e = s(t);
+    return e ? Reflect.has(e, "$el") ? (o = s(t)) == null ? void 0 : o.$el : s(t) : null;
+  }
+  function d(t, e, o) {
+    document.onmousemove = function(u) {
+      let n = t.left + (u.clientX - o);
+      u = u || window.event;
+      const f = 800, l = s(a);
+      return n < 0 && (n = 0), n > f && (n = f), n < l && (n = l, m.emit("update:collapse", !p)), t.style.left = n + "px", !1;
+    };
+  }
+  function w(t) {
+    const e = r(c), o = r(i);
+    document.onmouseup = function() {
+      var n;
+      document.onmousemove = null, document.onmouseup = null, o.style.transition = "width 0.2s";
+      const u = parseInt(e.style.left);
+      y("side-menu-width", x(u), "", i), m.emit("dragWidthEnd"), (n = t.releaseCapture) == null || n.call(t);
+    };
+  }
+  function h() {
+    const t = r(c);
+    if (!t)
+      return;
+    const e = r(i);
+    e && (t.onmousedown = (o) => {
+      var n;
+      e.style.transition = "unset";
+      const u = o == null ? void 0 : o.clientX;
+      return t.left = t.offsetLeft, d(t, e, u), w(t), (n = t.setCapture) == null || n.call(t), !1;
+    });
+  }
+  return {};
+}
+export {
+  $ as useDragLine
+};

package/es/components/switch/index.d.ts

@@ -193,9 +193,9 @@ export declare const VftSwitch: import("vft/es/utils").SFCWithInstall<import("vu
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
     loading: boolean | undefined;
+    modelValue: string | number | boolean | undefined;
     disabled: boolean | undefined;
     value: string | number | boolean | undefined;
-    modelValue: string | number | boolean | undefined;
     validateEvent: boolean | undefined;
     inlinePrompt: boolean | undefined;
     activeValue: string | number | boolean | undefined;

package/es/components/switch/switch.vue.d.ts

@@ -225,9 +225,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onInput?: ((...args: any[]) => any) | undefined;
 }, {
     loading: boolean | undefined;
+    modelValue: string | number | boolean | undefined;
     disabled: boolean | undefined;
     value: string | number | boolean | undefined;
-    modelValue: string | number | boolean | undefined;
     validateEvent: boolean | undefined;
     inlinePrompt: boolean | undefined;
     activeValue: string | number | boolean | undefined;

package/es/components/tabs/tab-nav.vue2.js

@@ -61,6 +61,8 @@ import "../select-v2/index.js";
 import "../verify-code/index.js";
 import "../table/index.js";
 import "../image-viewer/index.js";
+import "../list-cell/index.js";
+import "../dialog/index.js";
 import "../md-container/index.js";
 import "../md-comment/index.js";
 import "../md-tabs/index.js";
@@ -81,7 +83,7 @@ const V = (
   K("tab-nav")
 ), ct = E({
   name: V.b()
-}), Fo = /* @__PURE__ */ E({
+}), Eo = /* @__PURE__ */ E({
   ...ct,
   props: {
     panes: null,
@@ -235,5 +237,5 @@ const V = (
   }
 });
 export {
-  Fo as default
+  Eo as default
 };

package/es/components/tooltip/index.d.ts

@@ -196,7 +196,7 @@ export declare const VftTooltip: import("vft/es/utils").SFCWithInstall<import("v
     onOpen: (event?: Event | undefined) => void;
     onClose: (event?: Event | undefined) => void;
     hide: (event?: Event | undefined) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open" | "before-show" | "before-hide" | "show" | "hide")[], "close" | "open" | "before-show" | "before-hide" | "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "before-show" | "before-hide" | "show" | "hide")[], "open" | "close" | "before-show" | "before-hide" | "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     role: {
         type: import("vue").PropType<"grid" | "dialog" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined>;
         required: false;
@@ -386,8 +386,8 @@ export declare const VftTooltip: import("vft/es/utils").SFCWithInstall<import("v
         required: false;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     "onBefore-show"?: ((...args: any[]) => any) | undefined;
     "onBefore-hide"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;

package/es/components/tooltip/tooltip.vue.d.ts

@@ -270,7 +270,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * @description expose hide function
      */
     hide: (event?: Event | undefined) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open" | "before-show" | "before-hide" | "show" | "hide")[], "close" | "open" | "before-show" | "before-hide" | "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "before-show" | "before-hide" | "show" | "hide")[], "open" | "close" | "before-show" | "before-hide" | "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     role: {
         type: __PropType<"grid" | "dialog" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined>;
         required: false;
@@ -460,8 +460,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: false;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     "onBefore-show"?: ((...args: any[]) => any) | undefined;
     "onBefore-hide"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;