vft 0.0.328 → 0.0.331

package/es/components/steps/item.vue2.js

@@ -1,136 +1,172 @@
-import { defineComponent as z, ref as k, inject as q, getCurrentInstance as A, onMounted as F, watch as G, onBeforeUnmount as H, reactive as J, computed as r, createElementBlock as d, openBlock as i, normalizeClass as a, normalizeStyle as D, createElementVNode as m, unref as s, createCommentVNode as W, renderSlot as C, createBlock as f, withCtx as O, resolveDynamicComponent as Q, toDisplayString as $, createTextVNode as x } from "vue";
+import { defineComponent as D, ref as w, inject as Y, getCurrentInstance as q, onMounted as F, watch as G, computed as n, reactive as H, onBeforeUnmount as Q, createElementBlock as a, openBlock as i, normalizeClass as l, normalizeStyle as z, createCommentVNode as S, createElementVNode as d, unref as t, renderSlot as p, createTextVNode as k, toDisplayString as y, createBlock as N, mergeProps as R } from "vue";
+import { VftIcon as V } from "../icon/index.js";
 import "@vueuse/core";
-import { isNumber as R } from "@vft/utils";
+import { singleAttrToObj as X, isNumber as Z } from "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { VftIcon as g } from "../icon/index.js";
-const Y = z({
+import { STEPS_INJECTION_KEY as x } from "./tokens.js";
+const ee = D({
   name: "VftStep"
-}), oe = /* @__PURE__ */ z({
-  ...Y,
+}), ve = /* @__PURE__ */ D({
+  ...ee,
   props: {
     title: {},
     icon: {},
     description: {},
     status: {}
   },
-  setup(E) {
-    const P = E, t = X("step"), l = k(-1), w = k({}), p = k(""), n = q("VftSteps"), V = A();
+  setup(K) {
+    const I = K, e = _("step"), c = w(-1), B = w({}), m = w(""), o = Y(x), $ = q();
     F(() => {
       G(
         [
-          () => n.props.active,
-          () => n.props.processStatus,
-          () => n.props.finishStatus
+          () => o.props.active,
+          () => o.props.processStatus,
+          () => o.props.finishStatus
         ],
-        ([e]) => {
-          U(e);
+        ([s]) => {
+          U(s);
         },
         { immediate: !0 }
       );
-    }), H(() => {
-      n.removeStep(I.uid);
     });
-    const u = r(() => P.status || p.value), j = r(() => {
-      const e = n.steps.value[l.value - 1];
-      return e ? e.currentStatus : "wait";
-    }), S = r(() => n.props.alignCenter), B = r(() => n.props.direction === "vertical"), o = r(() => n.props.simple), y = r(() => n.steps.value.length), N = r(() => n.steps.value[y.value - 1]?.uid === V?.uid), v = r(() => o.value ? "" : n.props.space), K = r(() => [
-      t.b(),
-      t.is(o.value ? "simple" : n.props.direction),
-      t.is("flex", N.value && !v.value && !S.value),
-      t.is("center", S.value && !B.value && !o.value)
-    ]), L = r(() => {
-      const e = {
-        flexBasis: R(v.value) ? `${v.value}px` : v.value ? v.value : `${100 / (y.value - (S.value ? 0 : 1))}%`
+    const E = n(
+      () => X(I.icon, "icon")
+    ), r = n(() => I.status || m.value), O = n(() => {
+      const s = o.steps.value[c.value - 1];
+      return s ? s.currentStatus : "wait";
+    }), h = n(() => o.props.alignCenter), P = n(() => o.props.direction === "vertical"), u = n(() => o.props.simple), g = n(() => o.props.contentPosition === "top"), C = n(() => o.steps.value.length), T = n(() => o.steps.value[C.value - 1]?.uid === $.uid), f = n(() => u.value ? "" : o.props.space), A = n(() => [
+      e.b(),
+      e.is(u.value ? "simple" : o.props.direction),
+      e.is("flex", T.value && !f.value && !h.value),
+      e.is("center", h.value && !P.value && !u.value),
+      e.is("content-top", g.value),
+      e.is(r.value)
+    ]), J = n(() => {
+      const s = {
+        flexBasis: Z(f.value) ? `${f.value}px` : f.value ? f.value : `${100 / (C.value - (h.value ? 0 : 1))}%`
       };
-      return B.value || N.value && (e.maxWidth = `${100 / y.value}%`), e;
-    }), M = (e) => {
-      l.value = e;
-    }, T = (e) => {
-      const c = e === "wait", h = {
-        transitionDelay: `${c ? "-" : ""}${150 * l.value}ms`
-      }, b = e === n.props.processStatus || c ? 0 : 100;
-      h.borderWidth = b && !o.value ? "1px" : 0, h[n.props.direction === "vertical" ? "height" : "width"] = `${b}%`, w.value = h;
-    }, U = (e) => {
-      e > l.value ? p.value = n.props.finishStatus : e === l.value && j.value !== "error" ? p.value = n.props.processStatus : p.value = "wait";
-      const c = n.steps.value[l.value - 1];
-      c && c.calcProgress(p.value);
-    }, I = J({
-      uid: V.uid,
-      currentStatus: u,
-      setIndex: M,
-      calcProgress: T
+      return P.value || T.value && (s.maxWidth = `${100 / C.value}%`), s;
+    }), L = (s) => {
+      c.value = s;
+    }, M = (s) => {
+      const v = s === "wait", b = {
+        transitionDelay: `${v ? "-" : ""}${150 * c.value}ms`
+      }, j = s === o.props.processStatus || v ? 0 : 100;
+      b.borderWidth = j && !u.value ? "1px" : 0, b[o.props.direction === "vertical" ? "height" : "width"] = `${j}%`, B.value = b;
+    }, U = (s) => {
+      s > c.value ? m.value = o.props.finishStatus : s === c.value && O.value !== "error" ? m.value = o.props.processStatus : m.value = "wait";
+      const v = o.steps.value[c.value - 1];
+      v && v.calcProgress(m.value);
+    }, W = H({
+      uid: $.uid,
+      getVnode: () => $.vnode,
+      currentStatus: r,
+      setIndex: L,
+      calcProgress: M
     });
-    return n.addStep(I), (e, c) => (i(), d("div", {
-      style: D(L.value),
-      class: a(K.value)
+    return o.addStep(W), Q(() => {
+      o.removeStep(W);
+    }), (s, v) => (i(), a("div", {
+      style: z(J.value),
+      class: l(A.value)
     }, [
-      m("div", {
-        class: a([s(t).e("head"), s(t).is(u.value)])
+      s.$slots.top ? (i(), a("div", {
+        key: 0,
+        class: l(t(e).e("top-slot"))
       }, [
-        o.value ? W("", !0) : (i(), d("div", {
+        p(s.$slots, "top")
+      ], 2)) : g.value ? (i(), a("div", {
+        key: 1,
+        class: l(t(e).e("main"))
+      }, [
+        d("div", {
+          class: l([t(e).e("title"), t(e).is(r.value)])
+        }, [
+          p(s.$slots, "title", {}, () => [
+            k(y(s.title), 1)
+          ])
+        ], 2),
+        u.value ? (i(), a("div", {
+          key: 0,
+          class: l(t(e).e("arrow"))
+        }, null, 2)) : S("", !0),
+        d("div", {
+          class: l([t(e).e("description"), t(e).is(r.value)])
+        }, [
+          p(s.$slots, "description", {}, () => [
+            k(y(s.description), 1)
+          ])
+        ], 2)
+      ], 2)) : S("", !0),
+      d("div", {
+        class: l([t(e).e("head"), t(e).is(r.value)])
+      }, [
+        u.value ? S("", !0) : (i(), a("div", {
           key: 0,
-          class: a(s(t).e("line"))
+          class: l(t(e).e("line"))
         }, [
-          m("i", {
-            class: a(s(t).e("line-inner")),
-            style: D(w.value)
+          d("i", {
+            class: l(t(e).e("line-inner")),
+            style: z(B.value)
           }, null, 6)
         ], 2)),
-        m("div", {
-          class: a([s(t).e("icon"), s(t).is(e.icon || e.$slots.icon ? "icon" : "text")])
+        d("div", {
+          class: l([t(e).e("icon"), t(e).is(s.icon || s.$slots.icon ? "icon" : "text")])
         }, [
-          C(e.$slots, "icon", {}, () => [
-            e.icon ? (i(), f(s(g), {
-              key: 0,
-              class: a(s(t).e("icon-inner"))
-            }, {
-              default: O(() => [
-                (i(), f(Q(e.icon)))
-              ]),
-              _: 1
-            }, 8, ["class"])) : u.value === "success" ? (i(), f(s(g), {
+          p(s.$slots, "icon", {}, () => [
+            E.value?.icon ? (i(), N(t(V), R({ key: 0 }, E.value, {
+              class: t(e).e("icon-inner")
+            }), null, 16, ["class"])) : r.value === "success" ? (i(), N(t(V), {
               key: 1,
-              class: a([s(t).e("icon-inner"), s(t).is("status")])
-            }, null, 8, ["class"])) : u.value === "error" ? (i(), f(s(g), {
+              class: l([t(e).e("icon-inner"), t(e).is("status")]),
+              icon: "icon-check"
+            }, null, 8, ["class"])) : r.value === "error" ? (i(), N(t(V), {
               key: 2,
-              class: a([s(t).e("icon-inner"), s(t).is("status")])
-            }, null, 8, ["class"])) : o.value ? W("", !0) : (i(), d("div", {
+              class: l([t(e).e("icon-inner"), t(e).is("status")]),
+              icon: "icon-close"
+            }, null, 8, ["class"])) : u.value ? S("", !0) : (i(), a("div", {
               key: 3,
-              class: a(s(t).e("icon-inner"))
-            }, $(l.value + 1), 3))
+              class: l(t(e).e("icon-inner"))
+            }, y(c.value + 1), 3))
           ])
         ], 2)
       ], 2),
-      m("div", {
-        class: a(s(t).e("main"))
+      s.$slots.bottom ? (i(), a("div", {
+        key: 2,
+        class: l(t(e).e("bottom-slot"))
+      }, [
+        p(s.$slots, "bottom")
+      ], 2)) : g.value ? S("", !0) : (i(), a("div", {
+        key: 3,
+        class: l(t(e).e("main"))
       }, [
-        m("div", {
-          class: a([s(t).e("title"), s(t).is(u.value)])
+        d("div", {
+          class: l([t(e).e("title"), t(e).is(r.value)])
         }, [
-          C(e.$slots, "title", {}, () => [
-            x($(e.title), 1)
+          p(s.$slots, "title", {}, () => [
+            k(y(s.title), 1)
           ])
         ], 2),
-        o.value ? (i(), d("div", {
+        u.value ? (i(), a("div", {
           key: 0,
-          class: a(s(t).e("arrow"))
-        }, null, 2)) : (i(), d("div", {
+          class: l(t(e).e("arrow"))
+        }, null, 2)) : (i(), a("div", {
           key: 1,
-          class: a([s(t).e("description"), s(t).is(u.value)])
+          class: l([t(e).e("description"), t(e).is(r.value)])
         }, [
-          C(e.$slots, "description", {}, () => [
-            x($(e.description), 1)
+          p(s.$slots, "description", {}, () => [
+            k(y(s.description), 1)
           ])
         ], 2))
-      ], 2)
+      ], 2))
     ], 6));
   }
 });
 export {
-  oe as default
+  ve as default
 };

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

@@ -7,6 +7,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     direction: string;
     finishStatus: string;
     processStatus: string;
+    contentPosition: string;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (newVal?: number | undefined, oldVal?: number | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepsProps>, {
@@ -14,11 +15,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     direction: string;
     finishStatus: string;
     processStatus: string;
+    contentPosition: string;
 }>>> & Readonly<{
     onChange?: ((newVal?: number | undefined, oldVal?: number | undefined) => any) | undefined;
 }>, {
     direction: "horizontal" | "vertical";
     active: number;
+    contentPosition: "top" | "bottom";
     finishStatus: "wait" | "process" | "finish" | "error" | "success";
     processStatus: "wait" | "process" | "finish" | "error" | "success";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/components/steps/steps.vue2.js

@@ -1,17 +1,19 @@
-import { defineComponent as p, getCurrentInstance as f, watch as i, provide as u, createElementBlock as h, openBlock as v, normalizeClass as C, unref as n, renderSlot as S } from "vue";
+import { defineComponent as p, getCurrentInstance as u, watch as n, provide as h, createElementBlock as S, openBlock as C, normalizeClass as v, unref as r, renderSlot as E, createVNode as _ } from "vue";
+import { CHANGE_EVENT as N } from "../../constants/event.js";
 import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
+import { useNamespace as B } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
-import { useOrderedChildren as g } from "../../hooks/use-ordered-children/index.js";
+import { useOrderedChildren as I } from "../../hooks/use-ordered-children/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const B = p({
+import { STEPS_INJECTION_KEY as g } from "./tokens.js";
+const T = p({
   name: "vft-steps"
-}), $ = /* @__PURE__ */ p({
-  ...B,
+}), K = /* @__PURE__ */ p({
+  ...T,
   props: {
     space: {},
     active: { default: 0 },
@@ -19,31 +21,34 @@ const B = p({
     alignCenter: { type: Boolean },
     simple: { type: Boolean },
     finishStatus: { default: "finish" },
-    processStatus: { default: "process" }
+    processStatus: { default: "process" },
+    contentPosition: { default: "bottom" }
   },
   emits: ["change"],
-  setup(a, { emit: l }) {
-    const s = a, m = l, r = _("steps"), {
+  setup(a, { emit: m }) {
+    const s = a, l = m, i = B("steps"), {
       children: o,
-      addChild: c,
-      removeChild: d
-    } = g(f(), "ElStep");
-    return i(o, () => {
+      addChild: d,
+      removeChild: c,
+      ChildrenSorter: f
+    } = I(u(), "VftStep");
+    return n(o, () => {
       o.value.forEach((e, t) => {
         e.setIndex(t);
       });
-    }), u("VftSteps", { props: s, steps: o, addStep: c, removeStep: d }), i(
+    }), h(g, { props: s, steps: o, addStep: d, removeStep: c }), n(
       () => s.active,
       (e, t) => {
-        m("change", e, t);
+        l(N, e, t);
       }
-    ), (e, t) => (v(), h("div", {
-      class: C([n(r).b(), n(r).m(e.simple ? "simple" : e.direction)])
+    ), (e, t) => (C(), S("div", {
+      class: v([r(i).b(), r(i).m(e.simple ? "simple" : e.direction)])
     }, [
-      S(e.$slots, "default")
+      E(e.$slots, "default"),
+      _(r(f))
     ], 2));
   }
 });
 export {
-  $ as default
+  K as default
 };

package/es/components/steps/style/css.d.ts

@@ -1 +1,2 @@
+import 'vft/es/components/step/style/css';
 import 'vft/theme-style/vft-steps.css';

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

@@ -1,2 +1,3 @@
 import "vft/theme-style/base.css";
+import "vft/theme-style/vft-step.css";
 import "vft/theme-style/vft-steps.css";

package/es/components/steps/style/index.d.ts

@@ -1 +1,2 @@
+import 'vft/es/components/step/style';
 import 'vft/theme-style/src/steps.scss';

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

@@ -1,2 +1,3 @@
 import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/step.scss";
 import "vft/theme-style/src/steps.scss";

package/es/components/steps/tokens.d.ts

@@ -0,0 +1 @@
+export declare const STEPS_INJECTION_KEY = "VftSteps";

package/es/components/steps/tokens.js

@@ -0,0 +1,4 @@
+const t = "VftSteps";
+export {
+  t as STEPS_INJECTION_KEY
+};

package/es/components/steps/types.d.ts

@@ -7,10 +7,12 @@ export interface StepsProps {
     simple?: boolean;
     finishStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
     processStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
+    /** 内容区域位置：'top' | 'bottom'，默认为 'bottom' */
+    contentPosition?: 'top' | 'bottom';
 }
 export interface StepItemProps {
     title?: string;
-    icon?: IconProps;
+    icon?: IconProps | string;
     description?: string;
     status?: '' | 'wait' | 'process' | 'finish' | 'error' | 'success';
 }

package/es/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "vft",
-  "version": "0.0.328",
+  "version": "0.0.331",
   "license": "MIT",
   "main": "lib/index.cjs",
   "module": "es/index.js",

package/es/package.json.js

@@ -1,4 +1,4 @@
-const o = "0.0.328";
+const o = "0.0.331";
 export {
   o as version
 };

package/lib/components/button/index.d.ts

@@ -24,12 +24,12 @@ export declare const VftButton: import("vft/es/utils").SFCWithInstall<{
         size: {
             type: import("vue").PropType<import("../types").ComponentSize>;
         };
-        icon: {
-            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
-        };
         dark: {
             type: import("vue").PropType<boolean>;
         };
+        icon: {
+            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
+        };
         loading: {
             type: import("vue").PropType<boolean>;
         };
@@ -114,12 +114,12 @@ export declare const VftButton: import("vft/es/utils").SFCWithInstall<{
         size: {
             type: import("vue").PropType<import("../types").ComponentSize>;
         };
-        icon: {
-            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
-        };
         dark: {
             type: import("vue").PropType<boolean>;
         };
+        icon: {
+            type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
+        };
         loading: {
             type: import("vue").PropType<boolean>;
         };
@@ -199,12 +199,12 @@ export declare const VftButton: import("vft/es/utils").SFCWithInstall<{
     size: {
         type: import("vue").PropType<import("../types").ComponentSize>;
     };
-    icon: {
-        type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
-    };
     dark: {
         type: import("vue").PropType<boolean>;
     };
+    icon: {
+        type: import("vue").PropType<string | import("vft/es/vft").IconProps>;
+    };
     loading: {
         type: import("vue").PropType<boolean>;
     };

package/lib/components/form/form-item.vue.d.ts

@@ -30,10 +30,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>>> & Readonly<{
     "onUpdate:error"?: ((val: string) => any) | undefined;
 }>, {
-    required: boolean;
     labelWidth: string | number;
     inlineMessage: string | boolean;
     showMessage: boolean;
+    required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;