vft 0.0.48 → 0.0.51

package/es/components/avatar/avatar.vue2.js

@@ -1,13 +1,16 @@
-import { defineComponent as h, ref as z, computed as c, watch as v, openBlock as l, createElementBlock as i, normalizeClass as y, unref as s, normalizeStyle as n, createBlock as S, renderSlot as k } from "vue";
-import { isString as B, isNumber as E, addUnit as b } from "@vft/utils";
-import { VftIcon as C } from "../icon/index.js";
-import { useNamespace as g } from "../../hooks/use-namespace/index.js";
+import { defineComponent as z, ref as h, computed as o, watch as v, openBlock as l, createElementBlock as k, normalizeClass as g, unref as r, normalizeStyle as y, createBlock as c, normalizeProps as b, mergeProps as B, renderSlot as E } from "vue";
+import { isString as S, isNumber as C, addUnit as V, singleAttrToObj as j } from "@vft/utils";
+import { VftIcon as I } from "../icon/index.js";
+import { VftImage as L } from "../image/index.js";
+import { useNamespace as N } 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 L = ["src", "alt", "srcset"], A = /* @__PURE__ */ h({
+import "@vue/reactivity";
+import "@vue/shared";
+const J = /* @__PURE__ */ z({
   __name: "avatar",
   props: {
     size: { default: "" },
@@ -15,41 +18,45 @@ const L = ["src", "alt", "srcset"], A = /* @__PURE__ */ h({
     icon: null,
     src: null,
     alt: null,
-    srcSet: null,
     fit: { default: "cover" }
   },
   emits: ["error"],
-  setup(e, { emit: o }) {
-    const r = g("avatar"), a = z(!1), m = c(() => {
-      const t = [r.b()];
-      return B(e.size) && t.push(r.m(e.size)), e.icon && t.push(r.m("icon")), e.shape && t.push(r.m(e.shape)), t;
-    }), u = c(() => E(e.size) ? r.cssVarBlock({
-      size: b(e.size) || ""
-    }) : void 0), f = c(() => ({
+  setup(e, { emit: m }) {
+    console.log(e.src);
+    const i = N("avatar"), a = h(!1), f = o(() => {
+      const t = [i.b()];
+      return S(e.size) && t.push(i.m(e.size)), !e.src && e.icon && t.push(i.m("icon")), e.shape && t.push(i.m(e.shape)), t;
+    }), u = o(() => C(e.size) ? i.cssVarBlock({
+      size: V(e.size) || ""
+    }) : void 0);
+    o(() => ({
       objectFit: e.fit
     }));
+    const n = o(() => j(e.icon, "icon", { size: e.size }));
     v(
       () => e.src,
       () => a.value = !1
     );
     function d(t) {
-      a.value = !0, o("error", t);
+      console.log(11), a.value = !0, m("error", t);
     }
-    return (t, N) => (l(), i("span", {
-      class: y(s(m)),
-      style: n(s(u))
-    }, [
-      (e.src || e.srcSet) && !a.value ? (l(), i("img", {
-        key: 0,
-        src: e.src,
-        alt: e.alt,
-        srcset: e.srcSet,
-        style: n(s(f)),
-        onError: d
-      }, null, 44, L)) : e.icon ? (l(), S(s(C), { key: 1 })) : k(t.$slots, "default", { key: 2 })
-    ], 6));
+    return (t, P) => {
+      var s;
+      return l(), k("span", {
+        class: g(r(f)),
+        style: y(r(u))
+      }, [
+        e.src && !a.value ? (l(), c(r(L), {
+          key: 0,
+          src: e.src,
+          alt: e.alt,
+          fit: e.fit,
+          onError: d
+        }, null, 8, ["src", "alt", "fit"])) : (s = r(n)) != null && s.icon ? (l(), c(r(I), b(B({ key: 1 }, r(n))), null, 16)) : E(t.$slots, "default", { key: 2 })
+      ], 6);
+    };
   }
 });
 export {
-  A as default
+  J as default
 };

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

@@ -1,6 +1,6 @@
 export declare const VftAvatar: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
     size: {
-        type: import("vue").PropType<number | "large" | "small" | "default" | undefined>;
+        type: import("vue").PropType<number | "default" | "small" | "large" | undefined>;
         required: false;
     };
     shape: {
@@ -8,7 +8,7 @@ export declare const VftAvatar: import("vft/es/utils").SFCWithInstall<import("vu
         required: false;
     };
     icon: {
-        type: import("vue").PropType<import("..").IconProps | undefined>;
+        type: import("vue").PropType<string | import("..").IconProps | undefined>;
         required: false;
     };
     src: {
@@ -19,17 +19,13 @@ export declare const VftAvatar: import("vft/es/utils").SFCWithInstall<import("vu
         type: import("vue").PropType<string | undefined>;
         required: false;
     };
-    srcSet: {
-        type: import("vue").PropType<string | undefined>;
-        required: false;
-    };
     fit: {
-        type: import("vue").PropType<"contain" | "fill" | "none" | "cover" | "scale-down" | undefined>;
+        type: import("vue").PropType<"fill" | "none" | "contain" | "cover" | "scale-down" | undefined>;
         required: false;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "error"[], "error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: import("vue").PropType<number | "large" | "small" | "default" | undefined>;
+        type: import("vue").PropType<number | "default" | "small" | "large" | undefined>;
         required: false;
     };
     shape: {
@@ -37,7 +33,7 @@ export declare const VftAvatar: import("vft/es/utils").SFCWithInstall<import("vu
         required: false;
     };
     icon: {
-        type: import("vue").PropType<import("..").IconProps | undefined>;
+        type: import("vue").PropType<string | import("..").IconProps | undefined>;
         required: false;
     };
     src: {
@@ -48,12 +44,8 @@ export declare const VftAvatar: import("vft/es/utils").SFCWithInstall<import("vu
         type: import("vue").PropType<string | undefined>;
         required: false;
     };
-    srcSet: {
-        type: import("vue").PropType<string | undefined>;
-        required: false;
-    };
     fit: {
-        type: import("vue").PropType<"contain" | "fill" | "none" | "cover" | "scale-down" | undefined>;
+        type: import("vue").PropType<"fill" | "none" | "contain" | "cover" | "scale-down" | undefined>;
         required: false;
     };
 }>> & {

package/es/components/avatar/index.js

@@ -1,11 +1,12 @@
 import { withInstall as t } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
-import "../../utils/ns-cover.js";
 import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
 import o from "./avatar.vue2.js";
-const s = t(o);
+const l = t(o);
 export {
-  s as VftAvatar,
-  s as default
+  l as VftAvatar,
+  l as default
 };

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

@@ -1,2 +1,4 @@
 import "vft/theme-style/base.css";
+import "vft/theme-style/vft-image-viewer.css";
+import "vft/theme-style/vft-image.css";
 import "vft/theme-style/vft-avatar.css";

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

@@ -1,2 +1,4 @@
 import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/image-viewer.scss";
+import "vft/theme-style/src/image.scss";
 import "vft/theme-style/src/avatar.scss";

package/es/components/back-top/back-top.vue2.js

@@ -40,6 +40,22 @@ import "../page-wrapper/index.js";
 import "../exception/index.js";
 import "../search/index.js";
 import "../form/index.js";
+import "../button/index.js";
+import "../checkbox/index.js";
+import "../radio/index.js";
+import "../switch/index.js";
+import "../color-picker/index.js";
+import "../scrollbar/index.js";
+import "../dropdown/index.js";
+import "../virtual-list/components/fixed-size-list.js";
+import "../virtual-list/components/dynamic-size-list.js";
+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 "../verify-code/index.js";
+import "../table/index.js";
+import "../image-viewer/index.js";
 import "../md-container/index.js";
 import "../md-comment/index.js";
 import "../md-tabs/index.js";
@@ -53,13 +69,15 @@ import "lodash";
 import "../../hooks/use-z-index/index.js";
 import "@vueuse/core";
 import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
 import { useBackTop as I } from "./use-back-top.js";
 const r = (
   /* hoist-static*/
   _("back-top")
 ), N = c({
   name: r.b()
-}), jt = /* @__PURE__ */ c({
+}), Yt = /* @__PURE__ */ c({
   ...N,
   props: {
     visibilityHeight: { default: 200 },
@@ -102,5 +120,5 @@ const r = (
   }
 });
 export {
-  jt as default
+  Yt as default
 };

package/es/components/back-top/index.js

@@ -1,11 +1,12 @@
 import { withInstall as t } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
-import "../../utils/ns-cover.js";
 import "lodash";
+import "@vueuse/core";
+import "../../utils/ns-cover.js";
 import o from "./back-top.vue2.js";
-const s = t(o);
+const c = t(o);
 export {
-  s as VftBackTop,
-  s as default
+  c as VftBackTop,
+  c as default
 };

package/es/components/back-top/use-back-top.js

@@ -1,9 +1,9 @@
 import "@vft/utils";
 import { shallowRef as n, ref as h, onMounted as d, watch as T } from "vue";
 import { throwError as g } from "../../utils/error.js";
-import "../../utils/ns-cover.js";
 import "lodash";
 import { useThrottleFn as b, useEventListener as y, useTimeoutFn as S } from "@vueuse/core";
+import "../../utils/ns-cover.js";
 const q = (t, u, c) => {
   const e = n(), o = n(), i = h(!1), a = () => {
     e.value && e.value.scrollTo({ left: 0, top: 0, behavior: "smooth" });

package/es/components/button/button-custom.d.ts

@@ -0,0 +1,4 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { ButtonProps } from './button.vue';
+export declare function darken(color: TinyColor, amount?: number): string;
+export declare function useButtonCustomStyle(props: ButtonProps): import("vue").ComputedRef<Record<string, string>>;

package/es/components/button/button-custom.js

@@ -0,0 +1,59 @@
+import { computed as m } from "vue";
+import { TinyColor as b } from "@ctrl/tinycolor";
+import { useNamespace as g } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import "../form/index.js";
+import { useFormDisabled as k } from "../form/hooks/use-form-common-props.js";
+function c(r, l = 20) {
+  return r.mix("#141414", l).toString();
+}
+function D(r) {
+  const l = k(), t = g("button");
+  return m(() => {
+    let e = {};
+    const a = r.color;
+    if (a) {
+      const o = new b(a), i = r.dark ? o.tint(20).toString() : c(o, 20);
+      if (r.plain)
+        e = t.cssVarBlock({
+          "bg-color": r.dark ? c(o, 90) : o.tint(90).toString(),
+          "text-color": a,
+          "border-color": r.dark ? c(o, 50) : o.tint(50).toString(),
+          "hover-text-color": `var(${t.cssVarName("color-white")})`,
+          "hover-bg-color": a,
+          "hover-border-color": a,
+          "active-bg-color": i,
+          "active-text-color": `var(${t.cssVarName("color-white")})`,
+          "active-border-color": i
+        }), l.value && (e[t.cssVarBlockName("disabled-bg-color")] = r.dark ? c(o, 90) : o.tint(90).toString(), e[t.cssVarBlockName("disabled-text-color")] = r.dark ? c(o, 50) : o.tint(50).toString(), e[t.cssVarBlockName("disabled-border-color")] = r.dark ? c(o, 80) : o.tint(80).toString());
+      else {
+        const s = r.dark ? c(o, 30) : o.tint(30).toString(), n = o.isDark() ? `var(${t.cssVarName("color-white")})` : `var(${t.cssVarName("color-black")})`;
+        if (e = t.cssVarBlock({
+          "bg-color": a,
+          "text-color": n,
+          "border-color": a,
+          "hover-bg-color": s,
+          "hover-text-color": n,
+          "hover-border-color": s,
+          "active-bg-color": i,
+          "active-border-color": i
+        }), l.value) {
+          const d = r.dark ? c(o, 50) : o.tint(50).toString();
+          e[t.cssVarBlockName("disabled-bg-color")] = d, e[t.cssVarBlockName("disabled-text-color")] = r.dark ? "rgba(255, 255, 255, 0.5)" : `var(${t.cssVarName("color-white")})`, e[t.cssVarBlockName("disabled-border-color")] = d;
+        }
+      }
+    }
+    return e;
+  });
+}
+export {
+  c as darken,
+  D as useButtonCustomStyle
+};

package/es/components/button/button-group.vue.d.ts

@@ -0,0 +1,23 @@
+import type { PropType as __PropType } from 'vue';
+import { ComponentSize } from '../types';
+import { type ButtonType } from './types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: {
+        type: __PropType<ComponentSize>;
+        required: true;
+    };
+    type: {
+        type: __PropType<ButtonType>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: __PropType<ComponentSize>;
+        required: true;
+    };
+    type: {
+        type: __PropType<ButtonType>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/es/components/button/button-group.vue.js

@@ -0,0 +1,4 @@
+import f from "./button-group.vue2.js";
+export {
+  f as default
+};

package/es/components/button/button-group.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent as e, provide as s, reactive as i, toRef as o, openBlock as m, createElementBlock as u, normalizeClass as l, unref as a, renderSlot as c } from "vue";
+import { useNamespace as f } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../hooks/use-z-index/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import "@vue/shared";
+import { buttonGroupContextKey as d } from "./constants.js";
+const _ = e({
+  name: "VtfButtonGroup"
+}), E = /* @__PURE__ */ e({
+  ..._,
+  props: {
+    size: null,
+    type: null
+  },
+  setup(r) {
+    const t = r;
+    s(
+      d,
+      i({
+        size: o(t, "size"),
+        type: o(t, "type")
+      })
+    );
+    const p = f("button");
+    return (n, y) => (m(), u("div", {
+      class: l(`${a(p).b("group")}`)
+    }, [
+      c(n.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  E as default
+};

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

@@ -0,0 +1,189 @@
+import type { PropType as __PropType } from 'vue';
+import type { IconProps } from '../icon';
+import type { ComponentSize } from '../types';
+import type { ButtonType } from './types';
+export interface ButtonProps {
+    size?: ComponentSize;
+    disabled?: boolean;
+    type?: ButtonType;
+    icon?: IconProps | string;
+    nativeType?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    loadingIcon?: IconProps;
+    plain?: boolean;
+    text?: boolean;
+    link?: boolean;
+    bg?: boolean;
+    autofocus?: boolean;
+    round?: boolean;
+    circle?: boolean;
+    color?: string;
+    dark?: boolean;
+    autoInsertSpace?: boolean;
+    block?: boolean;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: {
+        type: __PropType<ComponentSize | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<ButtonType | undefined>;
+        required: false;
+    };
+    icon: {
+        type: __PropType<string | IconProps | undefined>;
+        required: false;
+    };
+    nativeType: {
+        type: __PropType<"button" | "submit" | "reset" | undefined>;
+        required: false;
+        default: string;
+    };
+    loading: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    loadingIcon: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    plain: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    text: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    link: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    bg: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    autofocus: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    round: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    circle: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    color: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dark: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    autoInsertSpace: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    block: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}, {
+    /** @description button html element */
+    ref: import("vue").Ref<HTMLButtonElement | undefined>;
+    /** @description button size */
+    size: import("vue").ComputedRef<"" | "default" | "small" | "large">;
+    /** @description button type */
+    type: import("vue").ComputedRef<"" | "default" | "success" | "primary" | "warning" | "info" | "danger" | "text">;
+    /** @description button disabled */
+    disabled: import("vue").ComputedRef<boolean>;
+    /** @description whether adding space */
+    shouldAddSpace: import("vue").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: __PropType<ComponentSize | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<ButtonType | undefined>;
+        required: false;
+    };
+    icon: {
+        type: __PropType<string | IconProps | undefined>;
+        required: false;
+    };
+    nativeType: {
+        type: __PropType<"button" | "submit" | "reset" | undefined>;
+        required: false;
+        default: string;
+    };
+    loading: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    loadingIcon: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    plain: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    text: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    link: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    bg: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    autofocus: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    round: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    circle: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    color: {
+        type: __PropType<string | undefined>;
+        required: false;
+    };
+    dark: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    autoInsertSpace: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    block: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    nativeType: "button" | "submit" | "reset" | undefined;
+}>;
+export default _sfc_main;

package/es/components/button/button.vue.js

@@ -0,0 +1,4 @@
+import f from "./button.vue2.js";
+export {
+  f as default
+};