vft 0.0.73 → 0.0.76

package/es/components/space/space.js

@@ -0,0 +1,182 @@
+import { defineComponent as P, renderSlot as T, createVNode as c, isVNode as b, createTextVNode as A } from "vue";
+import { isArray as p, isNumber as m, isString as L } from "@vft/utils";
+import { PatchFlags as r, isFragment as h, isValidElementNode as C } from "../../utils/vue/vnode.js";
+import { buildProps as O, definePropType as d } from "../../utils/vue/props/runtime.js";
+import "@vueuse/core";
+import { componentSizes as V } from "../../constants/size.js";
+import "../../utils/ns-cover.js";
+import "lodash";
+import g from "./item.js";
+import { useSpace as x } from "./use-space.js";
+const z = O({
+  /**
+   * @description Placement direction
+   */
+  direction: {
+    type: String,
+    values: ["horizontal", "vertical"],
+    default: "horizontal"
+  },
+  /**
+   * @description Classname
+   */
+  class: {
+    type: d([
+      String,
+      Object,
+      Array
+    ]),
+    default: ""
+  },
+  /**
+   * @description Extra style rules
+   */
+  style: {
+    type: d([String, Array, Object]),
+    default: ""
+  },
+  /**
+   * @description Controls the alignment of items
+   */
+  alignment: {
+    type: String,
+    default: "center"
+  },
+  /**
+   * @description Prefix for space-items
+   */
+  prefixCls: {
+    type: String
+  },
+  /**
+   * @description Spacer
+   */
+  spacer: {
+    type: d([Object, String, Number, Array]),
+    default: null,
+    validator: (e) => b(e) || m(e) || L(e)
+  },
+  /**
+   * @description Auto wrapping
+   */
+  wrap: Boolean,
+  /**
+   * @description Whether to fill the container
+   */
+  fill: Boolean,
+  /**
+   * @description Ratio of fill
+   */
+  fillRatio: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * @description Spacing size
+   */
+  size: {
+    type: [String, Array, Number],
+    values: V,
+    validator: (e) => m(e) || p(e) && e.length === 2 && e.every(m)
+  }
+}), q = P({
+  name: "VftSpace",
+  props: z,
+  setup(e, { slots: v }) {
+    const { classes: E, containerStyle: N, itemStyle: u } = x(e);
+    function y(n, a = "", t = []) {
+      const { prefixCls: i } = e;
+      return n.forEach((l, f) => {
+        h(l) ? p(l.children) && l.children.forEach((o, s) => {
+          h(o) && p(o.children) ? y(
+            o.children,
+            `${a + s}-`,
+            t
+          ) : t.push(
+            c(
+              g,
+              {
+                style: u.value,
+                prefixCls: i,
+                key: `nested-${a + s}`
+              },
+              {
+                default: () => [o]
+              },
+              r.PROPS | r.STYLE,
+              ["style", "prefixCls"]
+            )
+          );
+        }) : C(l) && t.push(
+          c(
+            g,
+            {
+              style: u.value,
+              prefixCls: i,
+              key: `LoopKey${a + f}`
+            },
+            {
+              default: () => [l]
+            },
+            r.PROPS | r.STYLE,
+            ["style", "prefixCls"]
+          )
+        );
+      }), t;
+    }
+    return () => {
+      const { spacer: n, direction: a } = e, t = T(v, "default", { key: 0 }, () => []);
+      if ((t.children ?? []).length === 0)
+        return null;
+      if (p(t.children)) {
+        let i = y(t.children);
+        if (n) {
+          const l = i.length - 1;
+          i = i.reduce(
+            (f, o, s) => {
+              const S = [...f, o];
+              return s !== l && S.push(
+                c(
+                  "span",
+                  // adding width 100% for vertical alignment,
+                  // when the spacer inherit the width from the
+                  // parent, this span's width was not set, so space
+                  // might disappear
+                  {
+                    style: [
+                      u.value,
+                      a === "vertical" ? "width: 100%" : null
+                    ],
+                    key: s
+                  },
+                  [
+                    // if spacer is already a valid vnode, then append it to the current
+                    // span element.
+                    // otherwise, treat it as string.
+                    b(n) ? n : A(n, r.TEXT)
+                  ],
+                  r.STYLE
+                )
+              ), S;
+            },
+            []
+          );
+        }
+        return c(
+          "div",
+          {
+            class: E.value,
+            style: N.value
+          },
+          i,
+          r.STYLE | r.CLASS
+        );
+      }
+      return t.children;
+    };
+  }
+});
+export {
+  q as default,
+  z as spaceProps
+};

package/es/components/space/style/css.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-space.css";

package/es/components/space/style/index.js

@@ -0,0 +1,2 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/space.scss";

package/es/components/space/use-space.js

@@ -0,0 +1,44 @@
+import { computed as o, ref as m, watchEffect as S } from "vue";
+import { isArray as h, isNumber as p } from "@vft/utils";
+import { useNamespace as w } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
+const c = {
+  small: 8,
+  default: 12,
+  large: 16
+};
+function I(e) {
+  const r = w("space"), u = o(() => [r.b(), r.m(e.direction), e.class]), a = m(0), i = m(0), f = o(() => {
+    const t = e.wrap || e.fill ? { flexWrap: "wrap", marginBottom: `-${i.value}px` } : {}, n = {
+      alignItems: e.alignment
+    };
+    return [t, n, e.style];
+  }), v = o(() => {
+    const t = {
+      paddingBottom: `${i.value}px`,
+      marginRight: `${a.value}px`
+    }, n = e.fill ? { flexGrow: 1, minWidth: `${e.fillRatio}%` } : {};
+    return [t, n];
+  });
+  return S(() => {
+    const { size: t = "small", wrap: n, direction: s, fill: d } = e;
+    if (h(t)) {
+      const [l = 0, g = 0] = t;
+      a.value = l, i.value = g;
+    } else {
+      let l;
+      p(t) ? l = t : l = c[t || "small"] || c.small, (n || d) && s === "horizontal" ? a.value = i.value = l : s === "horizontal" ? (a.value = l, i.value = 0) : (i.value = l, a.value = 0);
+    }
+  }), {
+    classes: u,
+    containerStyle: f,
+    itemStyle: v
+  };
+}
+export {
+  I as useSpace
+};

package/es/components/switch/switch.vue2.js

@@ -3,10 +3,10 @@ import { singleAttrToObj as G, addUnit as ie, isPromise as H, isBoolean as ne }
 import { debugWarn as L, throwError as le } from "../../utils/error.js";
 import "lodash";
 import "@vueuse/core";
+import { UPDATE_MODEL_EVENT as P, CHANGE_EVENT as S, INPUT_EVENT as z } from "../../constants/event.js";
 import "../../utils/ns-cover.js";
 import { VftIcon as g } from "../icon/index.js";
 import "../form/index.js";
-import { UPDATE_MODEL_EVENT as P, CHANGE_EVENT as S, INPUT_EVENT as z } from "../../constants/event.js";
 import { useNamespace as oe } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";

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

@@ -2,7 +2,7 @@ import { defineComponent as E, getCurrentInstance as Z, inject as _, ref as g, c
 import { capitalize as $ } from "@vft/utils";
 import { throwError as it } from "../../utils/error.js";
 import "lodash";
-import { useDocumentVisibility as nt, useWindowFocus as lt, useResizeObserver as at } from "@vueuse/core";
+import { useDocumentVisibility as nt, useWindowFocus as rt, useResizeObserver as lt } from "@vueuse/core";
 import "../../utils/ns-cover.js";
 import "../divider/index.js";
 import { VftIcon as B } from "../icon/index.js";
@@ -55,6 +55,8 @@ import "../virtual-list/components/fixed-size-grid.js";
 import "../virtual-list/components/dynamic-size-grid.js";
 import "../virtual-list/props.js";
 import "../select-v2/index.js";
+import "../select/index.js";
+import "../tree-select/index.js";
 import "../verify-code/index.js";
 import "../table/index.js";
 import "../image-viewer/index.js";
@@ -66,6 +68,12 @@ import "../row/index.js";
 import "../horizontal-menu/index.js";
 import "../time-picker/index.js";
 import "../date-picker/index.js";
+import "../check-tag/index.js";
+import "../tree/index.js";
+import "../skeleton/index.js";
+import "../space/index.js";
+import "../card/index.js";
+import "../popconfirm/index.js";
 import "../md-container/index.js";
 import "../md-comment/index.js";
 import "../md-tabs/index.js";
@@ -77,14 +85,14 @@ import { useNamespace as K } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
 import { EVENT_CODE as T } from "@vft/constants";
-import { TabsRootContextKey as rt } from "./types.js";
+import { TabsRootContextKey as at } from "./types.js";
 import st from "./tab-bar.vue2.js";
 const V = (
   /* hoist-static*/
   K("tab-nav")
 ), ct = E({
   name: V.b()
-}), Ko = /* @__PURE__ */ E({
+}), Uo = /* @__PURE__ */ E({
   ...ct,
   props: {
     panes: null,
@@ -112,9 +120,9 @@ const V = (
     emit: h
   }) {
     var A;
-    const M = Z(), d = _(rt);
+    const M = Z(), d = _(at);
     d || it(V.b(), "<vft-tabs><tab-nav /></vft-tabs>");
-    const e = K("tabs"), q = nt(), H = lt(), y = g(), v = g(), C = g(), m = g(!1), f = g(0), k = g(!1), x = g(!0), w = I(() => ["top", "bottom"].includes(d.props.tabPosition) ? "width" : "height"), W = I(() => ({
+    const e = K("tabs"), q = nt(), H = rt(), y = g(), v = g(), C = g(), m = g(!1), f = g(0), k = g(!1), x = g(!0), w = I(() => ["top", "bottom"].includes(d.props.tabPosition) ? "width" : "height"), W = I(() => ({
       transform: `translate${w.value === "width" ? "X" : "Y"}(-${f.value}px)`
     })), j = () => {
       if (!v.value)
@@ -134,9 +142,9 @@ const V = (
       const t = y.value.querySelector(".is-active");
       if (!t)
         return;
-      const i = v.value, b = ["top", "bottom"].includes(d.props.tabPosition), r = t.getBoundingClientRect(), l = i.getBoundingClientRect(), u = b ? o.offsetWidth - l.width : o.offsetHeight - l.height, c = f.value;
-      let a = c;
-      b ? (r.left < l.left && (a = c - (l.left - r.left)), r.right > l.right && (a = c + r.right - l.right)) : (r.top < l.top && (a = c - (l.top - r.top)), r.bottom > l.bottom && (a = c + (r.bottom - l.bottom))), a = Math.max(a, 0), f.value = Math.min(a, u);
+      const i = v.value, b = ["top", "bottom"].includes(d.props.tabPosition), a = t.getBoundingClientRect(), r = i.getBoundingClientRect(), u = b ? o.offsetWidth - r.width : o.offsetHeight - r.height, c = f.value;
+      let l = c;
+      b ? (a.left < r.left && (l = c - (r.left - a.left)), a.right > r.right && (l = c + a.right - r.right)) : (a.top < r.top && (l = c - (r.top - a.top)), a.bottom > r.bottom && (l = c + (a.bottom - r.bottom))), l = Math.max(l, 0), f.value = Math.min(l, u);
     }, z = () => {
       if (!C.value || !v.value)
         return;
@@ -146,14 +154,14 @@ const V = (
       const t = o.code, {
         up: i,
         down: b,
-        left: r,
-        right: l
+        left: a,
+        right: r
       } = T;
-      if (![i, b, r, l].includes(t))
+      if (![i, b, a, r].includes(t))
         return;
       const u = Array.from(o.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")), c = u.indexOf(o.target);
-      let a;
-      t === r || t === i ? c === 0 ? a = u.length - 1 : a = c - 1 : c < u.length - 1 ? a = c + 1 : a = 0, u[a].focus(), u[a].click(), P();
+      let l;
+      t === a || t === i ? c === 0 ? l = u.length - 1 : l = c - 1 : c < u.length - 1 ? l = c + 1 : l = 0, u[l].focus(), u[l].click(), P();
     }, P = () => {
       x.value && (k.value = !0);
     }, S = () => k.value = !1;
@@ -161,7 +169,7 @@ const V = (
       o === "hidden" ? x.value = !1 : o === "visible" && setTimeout(() => x.value = !0, 50);
     }), O(H, (o) => {
       o ? setTimeout(() => x.value = !0, 50) : x.value = !1;
-    }), at(y, z), tt(() => setTimeout(() => R(), 0)), ot(() => z()), D({
+    }), lt(y, z), tt(() => setTimeout(() => R(), 0)), ot(() => z()), D({
       scrollToActiveTab: R,
       removeFocus: S
     }), O(() => n.panes, () => M.update(), {
@@ -180,25 +188,25 @@ const V = (
       var o;
       return (o = n.panes) == null ? void 0 : o.map((t, i) => {
         var N, F, L;
-        const b = t.uid, r = t.props.disabled, l = t.props.name ?? t.index ?? `${i}`, u = !r && (t.isClosable || n.editable);
+        const b = t.uid, a = t.props.disabled, r = t.props.name ?? t.index ?? `${i}`, u = !a && (t.isClosable || n.editable);
         t.index = `${i}`;
         const c = u ? s("span", {
           class: "is-icon-close",
           onClick: (p) => h("tabRemove", t, p)
-        }, [(N = n.closeIconCfg) != null && N.icon ? s(B, n.closeIconCfg, null) : null]) : null, a = ((L = (F = t.slots).label) == null ? void 0 : L.call(F)) || t.props.label, Q = !r && t.active ? 0 : -1;
+        }, [(N = n.closeIconCfg) != null && N.icon ? s(B, n.closeIconCfg, null) : null]) : null, l = ((L = (F = t.slots).label) == null ? void 0 : L.call(F)) || t.props.label, Q = !a && t.active ? 0 : -1;
         return s("div", {
           ref: `tab-${b}`,
-          class: [e.e("item"), e.is(d.props.tabPosition), e.is("active", t.active), e.is("disabled", r), e.is("closable", u), e.is("focus", k.value)],
-          id: `tab-${l}`,
+          class: [e.e("item"), e.is(d.props.tabPosition), e.is("active", t.active), e.is("disabled", a), e.is("closable", u), e.is("focus", k.value)],
+          id: `tab-${r}`,
           key: `tab-${b}`,
-          "aria-controls": `pane-${l}`,
+          "aria-controls": `pane-${r}`,
           role: "tab",
           "aria-selected": t.active,
           tabindex: Q,
           onFocus: () => P(),
           onBlur: () => S(),
           onClick: (p) => {
-            S(), h("tabClick", t, l, p);
+            S(), h("tabClick", t, r, p);
           },
           onContextmenu: (p) => {
             p.preventDefault(), h("tabContextmenu", {
@@ -210,7 +218,7 @@ const V = (
           onKeydown: (p) => {
             u && (p.code === T.delete || p.code === T.backspace) && h("tabRemove", t, p);
           }
-        }, [a, c]);
+        }, [l, c]);
       });
     }), J = n.editable || n.addable ? s("span", {
       class: e.e("new-tab"),
@@ -238,5 +246,5 @@ const V = (
   }
 });
 export {
-  Ko as default
+  Uo as default
 };

package/es/components/tabs/tabs.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, getCurrentInstance as g, useSlots as M, ref as h, watch as p, nextTick as D, computed as i, createVNode as s, provide as F } from "vue";
+import { defineComponent as w, getCurrentInstance as g, useSlots as M, ref as h, watch as p, nextTick as D, computed as l, createVNode as s, provide as F } from "vue";
 import { useNamespace as O } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "lodash";
@@ -40,7 +40,7 @@ const d = (
     },
     showBar: {
       type: Boolean,
-      default: !1
+      default: !0
     },
     closeIconCfg: null,
     addIconCfg: null,
@@ -48,49 +48,49 @@ const d = (
     arrowRightIconCfg: null
   },
   emits: {
-    [$]: (a) => f(a),
+    [$]: (t) => f(t),
     /** 点击 */
-    tabClick: (a, c) => c instanceof Event,
+    tabClick: (t, c) => c instanceof Event,
     /** 右键点击 */
-    tabContextMenu: (a, c, t) => t instanceof Event,
-    tabChange: (a) => f(a),
-    edit: (a, c) => ["remove", "add"].includes(c),
+    tabContextMenu: (t, c, a) => a instanceof Event,
+    tabChange: (t) => f(t),
+    edit: (t, c) => ["remove", "add"].includes(c),
     /** 移除 */
-    tabRemove: (a) => f(a),
+    tabRemove: (t) => f(t),
     /** 增加 */
     tabAdd: () => !0
   },
-  setup(a, {
+  setup(t, {
     expose: c,
-    emit: t
+    emit: a
   }) {
-    const T = g(), l = M(), u = h(), r = h(a.modelValue ?? "0"), y = (e) => {
-      r.value = e, t("update:modelValue", e), t("tabChange", e);
+    const T = g(), i = M(), u = h(), r = h(t.modelValue ?? "0"), y = (e) => {
+      r.value = e, a("update:modelValue", e), a("tabChange", e);
     }, m = async (e) => {
       var n, o, v;
       if (!(r.value === e || I(e)))
         try {
-          await ((n = a.beforeLeave) == null ? void 0 : n.call(a, e, r.value)) !== !1 && (y(e), (v = (o = u.value) == null ? void 0 : o.removeFocus) == null || v.call(o));
+          await ((n = t.beforeLeave) == null ? void 0 : n.call(t, e, r.value)) !== !1 && (y(e), (v = (o = u.value) == null ? void 0 : o.removeFocus) == null || v.call(o));
         } catch {
         }
     }, R = (e, n, o) => {
-      e.props.disabled || (m(n), t("tabClick", e, o));
+      e.props.disabled || (m(n), a("tabClick", e, o));
     }, L = (e, n) => {
-      e.props.disabled || I(e.props.name) || (n.stopPropagation(), t("edit", e.props.name, "remove"), t("tabRemove", e.props.name));
+      e.props.disabled || I(e.props.name) || (n.stopPropagation(), a("edit", e.props.name, "remove"), a("tabRemove", e.props.name));
     };
-    p(() => a.modelValue, (e) => m(e)), p(r, async () => {
+    p(() => t.modelValue, (e) => m(e)), p(r, async () => {
       var e;
       await D(), (e = u.value) == null || e.scrollToActiveTab();
     });
     const N = () => {
-      t("edit", void 0, "add"), t("tabAdd");
+      a("edit", void 0, "add"), a("tabAdd");
     }, x = (e, n, o) => {
-      t("tabContextMenu", e, n, o);
-    }, b = i(() => {
+      a("tabContextMenu", e, n, o);
+    }, b = l(() => {
       var e;
       return s("div", {
         class: d.e("content")
-      }, [(e = l.default) == null ? void 0 : e.call(l)]);
+      }, [(e = i.default) == null ? void 0 : e.call(i)]);
     }), {
       children: B,
       addChild: P,
@@ -104,47 +104,47 @@ const d = (
     }), c({
       currentName: r
     });
-    const E = i(() => ({
+    const E = l(() => ({
       icon: "ico-ep:plus",
       size: 12,
-      ...a.addIconCfg
-    })), V = i(() => ({
+      ...t.addIconCfg
+    })), V = l(() => ({
       icon: "ico-ep:close",
       size: 14,
-      ...a.closeIconCfg
-    })), k = i(() => ({
+      ...t.closeIconCfg
+    })), k = l(() => ({
       icon: "ico-ep:arrow-left",
       size: 18,
-      ...a.arrowLeftIconCfg
-    })), z = i(() => ({
+      ...t.arrowLeftIconCfg
+    })), z = l(() => ({
       icon: "ico-ep:arrow-right",
       size: 18,
-      ...a.arrowRightIconCfg
-    })), C = i(() => {
+      ...t.arrowRightIconCfg
+    })), C = l(() => {
       var e;
       return s("div", {
-        class: [d.e("header"), d.is(a.tabPosition)]
+        class: [d.e("header"), d.is(t.tabPosition)]
       }, [s(K, {
         ref: u,
         currentName: r.value,
         panes: B.value,
-        stretch: a.stretch,
-        showBar: a.showBar,
+        stretch: t.stretch,
+        showBar: t.showBar,
         closeIconCfg: V.value,
         addIconCfg: E.value,
         arrowRightIconCfg: z.value,
         arrowLeftIconCfg: k.value,
-        editable: a.editable,
-        addable: a.addable,
+        editable: t.editable,
+        addable: t.addable,
         onTabClick: R,
         onTabRemove: L,
         onTabAdd: N,
         onTabContextmenu: x
-      }, null), (e = l.headerRight) == null ? void 0 : e.call(l)]);
+      }, null), (e = i.headerRight) == null ? void 0 : e.call(i)]);
     });
     return () => s("div", {
-      class: [d.b(), d.m(a.tabPosition)]
-    }, [...a.tabPosition !== "bottom" ? [C.value, b.value] : [b.value, C.value]]);
+      class: [d.b(), d.m(t.tabPosition)]
+    }, [...t.tabPosition !== "bottom" ? [C.value, b.value] : [b.value, C.value]]);
   }
 });
 export {