vft 0.0.46 → 0.0.48

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

@@ -0,0 +1,338 @@
+import Form from './form.vue';
+import FormItem from './form-item.vue';
+export declare const VftForm: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    model: {
+        type: import("vue").PropType<object | undefined>;
+        required: false;
+    };
+    rules: {
+        type: import("vue").PropType<Partial<Record<string, import("vft/es/utils").Arrayable<import("./types").FormItemRule>>> | undefined>;
+        required: false;
+    };
+    labelPosition: {
+        type: import("vue").PropType<"left" | "right" | "top" | undefined>;
+        required: false;
+    };
+    requireAsteriskPosition: {
+        type: import("vue").PropType<"left" | "right" | undefined>;
+        required: false;
+    };
+    labelWidth: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    labelSuffix: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    inline: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    inlineMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    statusIcon: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    showMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    validateOnRuleChange: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    hideRequiredAsterisk: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    scrollToError: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}, {
+    validate: (callback?: import("./types").FormValidateCallback | undefined) => import("./types").FormValidationResult;
+    validateField: (props?: import("vft/es/utils").Arrayable<import("./types").FormItemProp> | undefined, callback?: import("./types").FormValidateCallback | undefined) => import("./types").FormValidationResult;
+    resetFields: (props?: import("vft/es/utils").Arrayable<import("./types").FormItemProp> | undefined) => void;
+    clearValidate: (props?: import("vft/es/utils").Arrayable<import("./types").FormItemProp> | undefined) => void;
+    scrollToField: (prop: import("./types").FormItemProp) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "validate"[], "validate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    model: {
+        type: import("vue").PropType<object | undefined>;
+        required: false;
+    };
+    rules: {
+        type: import("vue").PropType<Partial<Record<string, import("vft/es/utils").Arrayable<import("./types").FormItemRule>>> | undefined>;
+        required: false;
+    };
+    labelPosition: {
+        type: import("vue").PropType<"left" | "right" | "top" | undefined>;
+        required: false;
+    };
+    requireAsteriskPosition: {
+        type: import("vue").PropType<"left" | "right" | undefined>;
+        required: false;
+    };
+    labelWidth: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    labelSuffix: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    inline: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    inlineMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    statusIcon: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    showMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    validateOnRuleChange: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    hideRequiredAsterisk: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    scrollToError: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}>> & {
+    onValidate?: ((...args: any[]) => any) | undefined;
+}, {}>> & {
+    FormItem: import("vue").DefineComponent<{
+        label: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        labelWidth: {
+            type: import("vue").PropType<Numberish | undefined>;
+            required: false;
+        };
+        prop: {
+            type: import("vue").PropType<import("./types").FormItemProp | undefined>;
+            required: false;
+        };
+        required: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        rules: {
+            type: import("vue").PropType<import("./types").FormItemRule | undefined>;
+            required: false;
+        };
+        error: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        for: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        validateStatus: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        inlineMessage: {
+            type: import("vue").PropType<string | boolean | undefined>;
+            required: false;
+        };
+        showMessage: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        size: {
+            type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+            required: false;
+        };
+    }, {
+        size: import("vue").ComputedRef<"" | "large" | "small" | "default">;
+        validateMessage: import("vue").Ref<string>;
+        validateState: import("vue").Ref<"" | "error" | "validating" | "success">;
+        validate: (trigger: string, callback?: import("./types").FormValidateCallback | undefined) => import("./types").FormValidationResult;
+        clearValidate: () => void;
+        resetField: () => void;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        label: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        labelWidth: {
+            type: import("vue").PropType<Numberish | undefined>;
+            required: false;
+        };
+        prop: {
+            type: import("vue").PropType<import("./types").FormItemProp | undefined>;
+            required: false;
+        };
+        required: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        rules: {
+            type: import("vue").PropType<import("./types").FormItemRule | undefined>;
+            required: false;
+        };
+        error: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        for: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        validateStatus: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        inlineMessage: {
+            type: import("vue").PropType<string | boolean | undefined>;
+            required: false;
+        };
+        showMessage: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        size: {
+            type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+            required: false;
+        };
+    }>>, {}>;
+};
+export default VftForm;
+export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    labelWidth: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    prop: {
+        type: import("vue").PropType<import("./types").FormItemProp | undefined>;
+        required: false;
+    };
+    required: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    rules: {
+        type: import("vue").PropType<import("./types").FormItemRule | undefined>;
+        required: false;
+    };
+    error: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    for: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    validateStatus: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    inlineMessage: {
+        type: import("vue").PropType<string | boolean | undefined>;
+        required: false;
+    };
+    showMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+        required: false;
+    };
+}, {
+    size: import("vue").ComputedRef<"" | "large" | "small" | "default">;
+    validateMessage: import("vue").Ref<string>;
+    validateState: import("vue").Ref<"" | "error" | "validating" | "success">;
+    validate: (trigger: string, callback?: import("./types").FormValidateCallback | undefined) => import("./types").FormValidationResult;
+    clearValidate: () => void;
+    resetField: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    labelWidth: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    prop: {
+        type: import("vue").PropType<import("./types").FormItemProp | undefined>;
+        required: false;
+    };
+    required: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    rules: {
+        type: import("vue").PropType<import("./types").FormItemRule | undefined>;
+        required: false;
+    };
+    error: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    for: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    validateStatus: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    inlineMessage: {
+        type: import("vue").PropType<string | boolean | undefined>;
+        required: false;
+    };
+    showMessage: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    size: {
+        type: import("vue").PropType<import("../types").ComponentSize | undefined>;
+        required: false;
+    };
+}>>, {}>>;
+export * from './form.vue';
+export * from './form-item.vue';
+export * from './types';
+export * from './constants';
+export * from './hooks';
+export type FormInstance = InstanceType<typeof Form>;
+export type FormItemInstance = InstanceType<typeof FormItem>;

package/es/components/form/index.js

@@ -0,0 +1,28 @@
+import { withInstall as t, withNoopInstall as m } from "../../utils/vue/install.js";
+import "vue";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import "lodash";
+import r from "./form.vue2.js";
+import o from "./form-item.vue2.js";
+import { formItemValidateStates as F } from "./types.js";
+import { formContextKey as c, formItemContextKey as _ } from "./constants.js";
+import { useDisabled as V, useFormDisabled as b, useFormSize as h, useSize as w } from "./hooks/use-form-common-props.js";
+import { useFormItem as z, useFormItemInputId as C } from "./hooks/use-form-item.js";
+const n = t(r, {
+  FormItem: o
+}), l = m(o);
+export {
+  n as VftForm,
+  l as VftFormItem,
+  n as default,
+  c as formContextKey,
+  _ as formItemContextKey,
+  F as formItemValidateStates,
+  V as useDisabled,
+  b as useFormDisabled,
+  z as useFormItem,
+  C as useFormItemInputId,
+  h as useFormSize,
+  w as useSize
+};

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

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

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

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

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

@@ -0,0 +1,43 @@
+import type { SetupContext, UnwrapRef } from 'vue';
+import type { RuleItem, ValidateError, ValidateFieldsError } from 'async-validator';
+import type { ComponentSize } from 'vft/es/constants';
+import type { Arrayable } from 'vft/es/utils';
+import { type FormItemProps } from './form-item.vue';
+import { type FormProps } from './form.vue';
+import type { useFormLabelWidth } from './utils';
+export type FormItemProp = Arrayable<string>;
+export declare const formItemValidateStates: readonly ["", "error", "validating", "success"];
+export type FormItemValidateState = typeof formItemValidateStates[number];
+export type FormLabelWidthContext = ReturnType<typeof useFormLabelWidth>;
+export interface FormItemRule extends RuleItem {
+    trigger?: Arrayable<string>;
+}
+export type FormRules = Partial<Record<string, Arrayable<FormItemRule>>>;
+export type FormValidationResult = Promise<boolean>;
+export type FormValidateCallback = (isValid: boolean, invalidFields?: ValidateFieldsError) => void;
+export interface FormValidateFailure {
+    errors: ValidateError[] | null;
+    fields: ValidateFieldsError;
+}
+export type FormContext = FormProps & UnwrapRef<FormLabelWidthContext> & {
+    emit: SetupContext['emit'];
+    addField: (field: FormItemContext) => void;
+    removeField: (field: FormItemContext) => void;
+    resetFields: (props?: Arrayable<FormItemProp>) => void;
+    clearValidate: (props?: Arrayable<FormItemProp>) => void;
+    validateField: (props?: Arrayable<FormItemProp>, callback?: FormValidateCallback) => FormValidationResult;
+};
+export interface FormItemContext extends FormItemProps {
+    $el: HTMLDivElement | undefined;
+    size: ComponentSize;
+    validateState: FormItemValidateState;
+    isGroup: boolean;
+    labelId: string;
+    inputIds: string[];
+    hasLabel: boolean;
+    addInputId: (id: string) => void;
+    removeInputId: (id: string) => void;
+    validate: (trigger: string, callback?: FormValidateCallback) => FormValidationResult;
+    resetField(): void;
+    clearValidate(): void;
+}

package/es/components/form/types.js

@@ -0,0 +1,9 @@
+const t = [
+  "",
+  "error",
+  "validating",
+  "success"
+];
+export {
+  t as formItemValidateStates
+};

package/es/components/form/utils.d.ts

@@ -0,0 +1,9 @@
+import type { Arrayable } from 'vft/es/utils';
+import type { FormItemContext } from './types';
+import type { FormItemProp } from './form-item.vue';
+export declare function useFormLabelWidth(): {
+    autoLabelWidth: import("vue").ComputedRef<string>;
+    registerLabelWidth: (val: number, oldVal: number) => void;
+    deregisterLabelWidth: (val: number) => void;
+};
+export declare const filterFields: (fields: FormItemContext[], props: Arrayable<FormItemProp>) => FormItemContext[];

package/es/components/form/utils.js

@@ -0,0 +1,42 @@
+import { ref as a, computed as s } from "vue";
+import "@vft/utils";
+import { debugWarn as l } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import { castArray as p } from "lodash";
+const f = "vft-form";
+function W() {
+  const t = a([]), i = s(() => {
+    if (!t.value.length)
+      return "0";
+    const e = Math.max(...t.value);
+    return e ? `${e}px` : "";
+  });
+  function n(e) {
+    const r = t.value.indexOf(e);
+    return r === -1 && i.value === "0" && l(f, `unexpected width ${e}`), r;
+  }
+  function o(e, r) {
+    if (e && r) {
+      const c = n(r);
+      t.value.splice(c, 1, e);
+    } else
+      e && t.value.push(e);
+  }
+  function u(e) {
+    const r = n(e);
+    r > -1 && t.value.splice(r, 1);
+  }
+  return {
+    autoLabelWidth: i,
+    registerLabelWidth: o,
+    deregisterLabelWidth: u
+  };
+}
+const g = (t, i) => {
+  const n = p(i);
+  return n.length > 0 ? t.filter((o) => o.prop && n.includes(o.prop)) : t;
+};
+export {
+  g as filterFields,
+  W as useFormLabelWidth
+};

package/es/components/form-item/style/css.js

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

package/es/components/form-item/style/index.js

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

package/es/components/full-screen/index.js

@@ -2,9 +2,10 @@ import { withInstall as t } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
+import "lodash";
 import o from "./full-screen.vue2.js";
-const l = t(o);
+const a = t(o);
 export {
-  l as VftFullScreen,
-  l as default
+  a as VftFullScreen,
+  a as default
 };

package/es/components/header-layout/index.js

@@ -2,9 +2,10 @@ import { withInstall as t } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
+import "lodash";
 import o from "./header-layout.vue2.js";
-const f = t(o);
+const e = t(o);
 export {
-  f as VftHeaderLayout,
-  f as default
+  e as VftHeaderLayout,
+  e as default
 };

package/es/components/icon/icon.vue2.js

@@ -1,45 +1,45 @@
-import { defineComponent as l, computed as u, unref as t, openBlock as i, createElementBlock as n, normalizeClass as c, normalizeStyle as f } from "vue";
-import { addUnit as d } from "@vft/utils";
-import { useNamespace as y } from "../../hooks/use-namespace/index.js";
+import { defineComponent as s, computed as n, unref as t, openBlock as i, createElementBlock as c, normalizeClass as l, normalizeStyle as d } from "vue";
+import { addUnit as y } from "@vft/utils";
+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 "../../utils/ns-cover.js";
 import "../config-provider/index.js";
-import { useGlobalConfig as g } from "../config-provider/hooks/use-global-config.js";
-const z = ["src"], s = (
+import { useGlobalConfig as z } from "../config-provider/hooks/use-global-config.js";
+const p = ["src"], r = (
   /* hoist-static*/
-  y("icon")
-), k = l({
-  name: s.b()
-}), N = /* @__PURE__ */ l({
+  g("icon")
+), k = s({
+  name: r.b()
+}), N = /* @__PURE__ */ s({
   ...k,
   props: {
     icon: null,
     size: { default: 14 },
-    color: { default: "black" },
+    color: null,
     rotate: { type: Boolean },
     cursor: { type: Boolean },
     scale: null
   },
-  setup(e) {
-    const a = g(), r = u(() => ({
-      color: e.color,
-      fontSize: e.size ? d(e.size) : "14px",
-      animation: e.rotate ? `${a.value.namespace}-rotate 1s linear 0s infinite` : void 0,
-      cursor: e.cursor ? "pointer" : void 0,
-      transform: e.scale ? `scale(${e.scale})` : void 0
-    })), m = ((o) => o == null ? void 0 : o.includes("/"))(e.icon);
-    return (o, v) => t(m) ? (i(), n("img", {
+  setup(o) {
+    const a = z(), m = n(() => ({
+      color: o.color,
+      fontSize: o.size ? y(o.size) : "14px",
+      animation: o.rotate ? `${a.value.namespace}-rotate 1s linear 0s infinite` : void 0,
+      cursor: o.cursor ? "pointer" : void 0,
+      transform: o.scale ? `scale(${o.scale})` : void 0
+    })), u = (e) => e == null ? void 0 : e.includes("/"), f = n(() => u(o.icon));
+    return (e, v) => t(f) ? (i(), c("img", {
       key: 0,
-      class: c(t(s).e("image")),
-      src: e.icon,
+      class: l(t(r).e("image")),
+      src: o.icon,
       alt: ""
-    }, null, 10, z)) : (i(), n("i", {
+    }, null, 10, p)) : (i(), c("i", {
       key: 1,
-      class: c([e.icon]),
-      style: f(t(r))
+      class: l([o.icon]),
+      style: d(t(m))
     }, null, 6));
   }
 });

package/es/components/icon/index.js

@@ -2,10 +2,11 @@ import { withInstall as o } from "../../utils/vue/install.js";
 import "vue";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
+import "lodash";
 import t from "./icon.vue2.js";
-const f = o(t);
+const n = o(t);
 export {
-  f as Icon,
-  f as VftIcon,
-  f as default
+  n as Icon,
+  n as VftIcon,
+  n as default
 };