vft 0.0.363 → 0.0.365

package/lib/components/form/form-item.vue2.cjs

@@ -1,360 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const utils = require("@vft/utils");
-const core = require("@vueuse/core");
-const AsyncValidator = require("async-validator");
-const lodashEs = require("lodash-es");
-const constants = require("./constants.cjs");
-const formLabelWrap = require("./form-label-wrap.cjs");
-const useFormCommonProps = require("./hooks/use-form-common-props.cjs");
-const index = require("../../hooks/use-namespace/index.cjs");
-const index$1 = require("../../hooks/use-id/index.cjs");
-const helper = require("../../utils/helper.cjs");
-const _hoisted_1 = ["role", "aria-labelledby"];
-const __default__ = vue.defineComponent({
-  name: "vft-form-item"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: {
-    label: {},
-    labelWidth: { default: "" },
-    labelPosition: {},
-    prop: {},
-    required: { type: Boolean, default: void 0 },
-    rules: {},
-    error: {},
-    for: {},
-    validateStatus: {},
-    inlineMessage: { type: [String, Boolean], default: "" },
-    showMessage: { type: Boolean, default: true },
-    size: {},
-    hideRequiredAsterisk: { type: Boolean },
-    hideLabel: { type: Boolean, default: false }
-  },
-  emits: ["update:error"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const slots = vue.useSlots();
-    const formContext = vue.inject(constants.formContextKey, void 0);
-    const parentFormItemContext = vue.inject(constants.formItemContextKey, void 0);
-    const _size = useFormCommonProps.useFormSize(void 0, { formItem: false });
-    const ns = index.useNamespace("form-item");
-    const labelId = index$1.useId().value;
-    const inputIds = vue.ref([]);
-    const validateState = vue.ref("");
-    const validateStateDebounced = core.refDebounced(validateState, 100);
-    const validateMessage = vue.ref("");
-    const formItemRef = vue.ref();
-    let initialValue = void 0;
-    let isResettingField = false;
-    const labelPosition = vue.computed(
-      () => props.labelPosition || formContext?.labelPosition
-    );
-    const labelStyle = vue.computed(() => {
-      if (labelPosition.value === "top") {
-        return {};
-      }
-      const labelWidth = helper.addUnit(props.labelWidth || formContext?.labelWidth || "");
-      if (labelWidth) return { width: labelWidth };
-      return {};
-    });
-    const contentStyle = vue.computed(() => {
-      if (labelPosition.value === "top" || formContext?.inline) {
-        return {};
-      }
-      if (!props.label && !props.labelWidth && isNested) {
-        return {};
-      }
-      const labelWidth = helper.addUnit(props.labelWidth || formContext?.labelWidth || "");
-      if (!props.label && !slots.label) {
-        return { marginLeft: labelWidth };
-      }
-      return {};
-    });
-    const formItemClasses = vue.computed(() => [
-      ns.b(),
-      ns.m(_size.value),
-      ns.is("error", validateState.value === "error"),
-      ns.is("validating", validateState.value === "validating"),
-      ns.is("success", validateState.value === "success"),
-      ns.is("required", isRequired.value || props.required),
-      ns.is(
-        "no-asterisk",
-        props?.hideRequiredAsterisk || formContext?.hideRequiredAsterisk
-      ),
-      formContext?.requireAsteriskPosition === "right" ? "asterisk-right" : "asterisk-left",
-      {
-        [ns.m("feedback")]: formContext?.statusIcon,
-        [ns.m(`label-${labelPosition.value}`)]: labelPosition.value
-      }
-    ]);
-    const _inlineMessage = vue.computed(
-      () => utils.isBoolean(props.inlineMessage) ? props.inlineMessage : formContext?.inlineMessage || false
-    );
-    const validateClasses = vue.computed(() => [
-      ns.e("error"),
-      { [ns.em("error", "inline")]: _inlineMessage.value }
-    ]);
-    const propString = vue.computed(() => {
-      if (!props.prop) return "";
-      return lodashEs.isArray(props.prop) ? props.prop.join(".") : props.prop;
-    });
-    const hasLabel = vue.computed(() => {
-      return !!(props.label || slots.label);
-    });
-    const labelFor = vue.computed(() => {
-      return props.for ?? (inputIds.value.length === 1 ? inputIds.value[0] : void 0);
-    });
-    const isGroup = vue.computed(() => {
-      return !labelFor.value && hasLabel.value;
-    });
-    const isNested = !!parentFormItemContext;
-    const fieldValue = vue.computed(() => {
-      const model = formContext?.model;
-      if (!model || !props.prop) {
-        return;
-      }
-      return utils.getProp(model, props.prop).value;
-    });
-    const normalizedRules = vue.computed(() => {
-      const { required } = props;
-      const rules = [];
-      if (props.rules) {
-        rules.push(
-          ...helper.castArray(props.rules).map((item) => {
-            item.trigger = item.trigger || "blur";
-            return item;
-          })
-        );
-      }
-      const formRules = formContext?.rules;
-      if (formRules && props.prop) {
-        const _rules = utils.getProp(
-          formRules,
-          props.prop
-        ).value;
-        if (_rules) {
-          rules.push(...helper.castArray(_rules));
-        }
-      }
-      if (required !== void 0) {
-        const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required"));
-        if (requiredRules.length > 0) {
-          for (const [rule, i] of requiredRules) {
-            if (rule.required === required) continue;
-            rules[i] = { ...rule, required };
-          }
-        } else {
-          rules.push({ required });
-        }
-      }
-      return rules;
-    });
-    const validateEnabled = vue.computed(() => normalizedRules.value.length > 0);
-    const getFilteredRule = (trigger) => {
-      const rules = normalizedRules.value;
-      return rules.filter((rule) => {
-        if (!rule.trigger || !trigger) return true;
-        if (lodashEs.isArray(rule.trigger)) {
-          return rule.trigger.includes(trigger);
-        } else {
-          return rule.trigger === trigger;
-        }
-      }).map(({ trigger: trigger2, ...rule }) => rule);
-    };
-    const isRequired = vue.computed(
-      () => normalizedRules.value.some((rule) => rule.required)
-    );
-    const shouldShowError = vue.computed(
-      () => validateStateDebounced.value === "error" && props.showMessage && (formContext?.showMessage ?? true)
-    );
-    const currentLabel = vue.computed(
-      () => `${props.label || ""}${formContext?.labelSuffix || ""}`
-    );
-    const setValidationState = (state) => {
-      validateState.value = state;
-    };
-    const onValidationFailed = (error) => {
-      const { errors, fields } = error;
-      if (!errors || !fields) {
-        console.error(error);
-      }
-      setValidationState("error");
-      validateMessage.value = errors ? errors?.[0]?.message ?? `${props.prop} is required` : "";
-      formContext?.emit("validate", props.prop, false, validateMessage.value);
-    };
-    const onValidationSucceeded = () => {
-      setValidationState("success");
-      formContext?.emit("validate", props.prop, true, "");
-    };
-    const doValidate = async (rules) => {
-      const modelName = propString.value;
-      const validator = new AsyncValidator({
-        [modelName]: rules
-      });
-      return validator.validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => {
-        onValidationSucceeded();
-        return true;
-      }).catch((err) => {
-        onValidationFailed(err);
-        return Promise.reject(err);
-      });
-    };
-    const validate = async (trigger, callback) => {
-      if (isResettingField || !props.prop) {
-        return false;
-      }
-      const hasCallback = utils.isFunction(callback);
-      if (!validateEnabled.value) {
-        callback?.(false);
-        return false;
-      }
-      const rules = getFilteredRule(trigger);
-      if (rules.length === 0) {
-        callback?.(true);
-        return true;
-      }
-      setValidationState("validating");
-      return doValidate(rules).then(() => {
-        callback?.(true);
-        return true;
-      }).catch((err) => {
-        const { fields } = err;
-        callback?.(false, fields);
-        return hasCallback ? false : Promise.reject(fields);
-      });
-    };
-    const clearValidate = () => {
-      if (props.error) {
-        emit("update:error", "");
-      }
-      setValidationState("");
-      validateMessage.value = "";
-      isResettingField = false;
-    };
-    const resetField = async () => {
-      const model = formContext?.model;
-      if (!model || !props.prop) return;
-      const computedValue = utils.getProp(model, props.prop);
-      isResettingField = true;
-      computedValue.value = lodashEs.clone(initialValue);
-      await vue.nextTick();
-      clearValidate();
-      isResettingField = false;
-    };
-    const addInputId = (id) => {
-      if (!inputIds.value.includes(id)) {
-        inputIds.value.push(id);
-      }
-    };
-    const removeInputId = (id) => {
-      inputIds.value = inputIds.value.filter((listId) => listId !== id);
-    };
-    vue.watch(
-      () => props.error,
-      (val) => {
-        validateMessage.value = val || "";
-        setValidationState(val ? "error" : "");
-      },
-      { immediate: true }
-    );
-    vue.watch(
-      () => props.validateStatus,
-      (val) => setValidationState(val || "")
-    );
-    const context = vue.reactive({
-      ...vue.toRefs(props),
-      $el: formItemRef,
-      size: _size,
-      validateMessage,
-      validateState,
-      labelId,
-      inputIds,
-      isGroup,
-      hasLabel,
-      fieldValue,
-      addInputId,
-      removeInputId,
-      resetField,
-      clearValidate,
-      validate,
-      propString
-    });
-    vue.provide(constants.formItemContextKey, context);
-    vue.onMounted(() => {
-      if (props.prop) {
-        formContext?.addField(context);
-        initialValue = lodashEs.clone(fieldValue.value);
-      }
-    });
-    vue.onBeforeUnmount(() => {
-      formContext?.removeField(context);
-    });
-    __expose({
-      size: _size,
-      validateMessage,
-      validateState,
-      validate,
-      clearValidate,
-      resetField
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "formItemRef",
-        ref: formItemRef,
-        class: vue.normalizeClass(formItemClasses.value),
-        role: isGroup.value ? "group" : void 0,
-        "aria-labelledby": isGroup.value ? vue.unref(labelId) : void 0
-      }, [
-        !_ctx.hideLabel ? (vue.openBlock(), vue.createBlock(vue.unref(formLabelWrap.default), {
-          key: 0,
-          "is-auto-width": labelStyle.value.width === "auto",
-          "update-all": vue.unref(formContext)?.labelWidth === "auto"
-        }, {
-          default: vue.withCtx(() => [
-            hasLabel.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(labelFor.value ? "label" : "div"), {
-              key: 0,
-              id: vue.unref(labelId),
-              for: labelFor.value,
-              class: vue.normalizeClass(vue.unref(ns).e("label")),
-              style: vue.normalizeStyle(labelStyle.value)
-            }, {
-              default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "label", { label: currentLabel.value }, () => [
-                  vue.createTextVNode(vue.toDisplayString(currentLabel.value), 1)
-                ])
-              ]),
-              _: 3
-            }, 8, ["id", "for", "class", "style"])) : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["is-auto-width", "update-all"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(vue.unref(ns).e("content")),
-          style: vue.normalizeStyle(contentStyle.value)
-        }, [
-          vue.renderSlot(_ctx.$slots, "default"),
-          vue.createVNode(vue.TransitionGroup, {
-            name: `${vue.unref(ns).namespace.value}-zoom-in-top`
-          }, {
-            default: vue.withCtx(() => [
-              shouldShowError.value ? vue.renderSlot(_ctx.$slots, "error", {
-                key: 0,
-                error: validateMessage.value
-              }, () => [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass(validateClasses.value)
-                }, vue.toDisplayString(validateMessage.value), 3)
-              ]) : vue.createCommentVNode("", true)
-            ]),
-            _: 3
-          }, 8, ["name"])
-        ], 6)
-      ], 10, _hoisted_1);
-    };
-  }
-});
-exports.default = _sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),oe=require("@vueuse/core"),m=require("@vft/utils"),b=require("../../utils/helper.cjs"),g=require("lodash-es"),le=require("../../hooks/use-id/index.cjs"),ae=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const se=require("async-validator"),z=require("./constants.cjs"),ie=require("./form-label-wrap.cjs"),ne=require("./hooks/use-form-common-props.cjs"),ue=["role","aria-labelledby"],de=e.defineComponent({name:"vft-form-item"}),ce=e.defineComponent({...de,props:{label:{},labelWidth:{default:""},labelPosition:{},prop:{},required:{type:Boolean,default:void 0},rules:{},error:{},for:{},validateStatus:{},inlineMessage:{type:[String,Boolean],default:""},showMessage:{type:Boolean,default:!0},size:{},hideRequiredAsterisk:{type:Boolean},hideLabel:{type:Boolean,default:!1}},emits:["update:error"],setup($,{expose:A,emit:j}){const r=$,E=j,B=e.useSlots(),l=e.inject(z.formContextKey,void 0),L=e.inject(z.formItemContextKey,void 0),y=ne.useFormSize(void 0,{formItem:!1}),s=ae.useNamespace("form-item"),q=le.useId().value,d=e.ref([]),c=e.ref(""),D=oe.refDebounced(c,100),n=e.ref(""),x=e.ref();let F,v=!1;const h=e.computed(()=>r.labelPosition||l?.labelPosition),M=e.computed(()=>{if(h.value==="top")return{};const t=b.addUnit(r.labelWidth||l?.labelWidth||"");return t?{width:t}:{}}),T=e.computed(()=>{if(h.value==="top"||l?.inline)return{};if(!r.label&&!r.labelWidth&&O)return{};const t=b.addUnit(r.labelWidth||l?.labelWidth||"");return!r.label&&!B.label?{marginLeft:t}:{}}),K=e.computed(()=>[s.b(),s.m(y.value),s.is("error",c.value==="error"),s.is("validating",c.value==="validating"),s.is("success",c.value==="success"),s.is("required",Q.value||r.required),s.is("no-asterisk",r?.hideRequiredAsterisk||l?.hideRequiredAsterisk),l?.requireAsteriskPosition==="right"?"asterisk-right":"asterisk-left",{[s.m("feedback")]:l?.statusIcon,[s.m(`label-${h.value}`)]:h.value}]),U=e.computed(()=>m.isBoolean(r.inlineMessage)?r.inlineMessage:l?.inlineMessage||!1),G=e.computed(()=>[s.e("error"),{[s.em("error","inline")]:U.value}]),P=e.computed(()=>r.prop?g.isArray(r.prop)?r.prop.join("."):r.prop:""),S=e.computed(()=>!!(r.label||B.label)),C=e.computed(()=>r.for??(d.value.length===1?d.value[0]:void 0)),k=e.computed(()=>!C.value&&S.value),O=!!L,V=e.computed(()=>{const t=l?.model;if(!(!t||!r.prop))return m.getProp(t,r.prop).value}),w=e.computed(()=>{const{required:t}=r,o=[];r.rules&&o.push(...b.castArray(r.rules).map(a=>(a.trigger=a.trigger||"blur",a)));const i=l?.rules;if(i&&r.prop){const a=m.getProp(i,r.prop).value;a&&o.push(...b.castArray(a))}if(t!==void 0){const a=o.map((u,f)=>[u,f]).filter(([u])=>Object.keys(u).includes("required"));if(a.length>0)for(const[u,f]of a)u.required!==t&&(o[f]={...u,required:t});else o.push({required:t})}return o}),H=e.computed(()=>w.value.length>0),J=t=>w.value.filter(i=>!i.trigger||!t?!0:g.isArray(i.trigger)?i.trigger.includes(t):i.trigger===t).map(({trigger:i,...a})=>a),Q=e.computed(()=>w.value.some(t=>t.required)),X=e.computed(()=>D.value==="error"&&r.showMessage&&(l?.showMessage??!0)),R=e.computed(()=>`${r.label||""}${l?.labelSuffix||""}`),p=t=>{c.value=t},Y=t=>{const{errors:o,fields:i}=t;(!o||!i)&&console.error(t),p("error"),n.value=o?o?.[0]?.message??`${r.prop} is required`:"",l?.emit("validate",r.prop,!1,n.value)},Z=()=>{p("success"),l?.emit("validate",r.prop,!0,"")},ee=async t=>{const o=P.value;return new se({[o]:t}).validate({[o]:V.value},{firstFields:!0}).then(()=>(Z(),!0)).catch(a=>(Y(a),Promise.reject(a)))},N=async(t,o)=>{if(v||!r.prop)return!1;const i=m.isFunction(o);if(!H.value)return o?.(!1),!1;const a=J(t);return a.length===0?(o?.(!0),!0):(p("validating"),ee(a).then(()=>(o?.(!0),!0)).catch(u=>{const{fields:f}=u;return o?.(!1,f),i?!1:Promise.reject(f)}))},I=()=>{r.error&&E("update:error",""),p(""),n.value="",v=!1},W=async()=>{const t=l?.model;if(!t||!r.prop)return;const o=m.getProp(t,r.prop);v=!0,o.value=g.clone(F),await e.nextTick(),I(),v=!1},te=t=>{d.value.includes(t)||d.value.push(t)},re=t=>{d.value=d.value.filter(o=>o!==t)};e.watch(()=>r.error,t=>{n.value=t||"",p(t?"error":"")},{immediate:!0}),e.watch(()=>r.validateStatus,t=>p(t||""));const _=e.reactive({...e.toRefs(r),$el:x,size:y,validateMessage:n,validateState:c,labelId:q,inputIds:d,isGroup:k,hasLabel:S,fieldValue:V,addInputId:te,removeInputId:re,resetField:W,clearValidate:I,validate:N,propString:P});return e.provide(z.formItemContextKey,_),e.onMounted(()=>{r.prop&&(l?.addField(_),F=g.clone(V.value))}),e.onBeforeUnmount(()=>{l?.removeField(_)}),A({size:y,validateMessage:n,validateState:c,validate:N,clearValidate:I,resetField:W}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"formItemRef",ref:x,class:e.normalizeClass(K.value),role:k.value?"group":void 0,"aria-labelledby":k.value?e.unref(q):void 0},[t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(ie.default),{key:0,"is-auto-width":M.value.width==="auto","update-all":e.unref(l)?.labelWidth==="auto"},{default:e.withCtx(()=>[S.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C.value?"label":"div"),{key:0,id:e.unref(q),for:C.value,class:e.normalizeClass(e.unref(s).e("label")),style:e.normalizeStyle(M.value)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"label",{label:R.value},()=>[e.createTextVNode(e.toDisplayString(R.value),1)])]),_:3},8,["id","for","class","style"])):e.createCommentVNode("",!0)]),_:3},8,["is-auto-width","update-all"])),e.createElementVNode("div",{class:e.normalizeClass(e.unref(s).e("content")),style:e.normalizeStyle(T.value)},[e.renderSlot(t.$slots,"default"),e.createVNode(e.TransitionGroup,{name:`${e.unref(s).namespace.value}-zoom-in-top`},{default:e.withCtx(()=>[X.value?e.renderSlot(t.$slots,"error",{key:0,error:n.value},()=>[e.createElementVNode("div",{class:e.normalizeClass(G.value)},e.toDisplayString(n.value),3)]):e.createCommentVNode("",!0)]),_:3},8,["name"])],6)],10,ue))}});exports.default=ce;

package/lib/components/form/form-label-wrap.cjs

@@ -1,87 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const core = require("@vueuse/core");
-const constants = require("./constants.cjs");
-const error = require("../../utils/error.cjs");
-const index = require("../../hooks/use-namespace/index.cjs");
-const COMPONENT_NAME = "VftLabelWrap";
-const FormLabelWrap = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME,
-  props: {
-    isAutoWidth: Boolean,
-    updateAll: Boolean
-  },
-  setup(props, {
-    slots
-  }) {
-    const formContext = vue.inject(constants.formContextKey, void 0);
-    const formItemContext = vue.inject(constants.formItemContextKey);
-    if (!formItemContext) error.throwError(COMPONENT_NAME, "usage: <vft-form-item><label-wrap /></vft-form-item>");
-    const ns = index.useNamespace("form");
-    const el = vue.ref();
-    const computedWidth = vue.ref(0);
-    const getLabelWidth = () => {
-      if (el.value?.firstElementChild) {
-        const width = window.getComputedStyle(el.value.firstElementChild).width;
-        return Math.ceil(Number.parseFloat(width));
-      } else {
-        return 0;
-      }
-    };
-    const updateLabelWidth = (action = "update") => {
-      vue.nextTick(() => {
-        if (slots.default && props.isAutoWidth) {
-          if (action === "update") {
-            computedWidth.value = getLabelWidth();
-          } else if (action === "remove") {
-            formContext?.deregisterLabelWidth(computedWidth.value);
-          }
-        }
-      });
-    };
-    const updateLabelWidthFn = () => updateLabelWidth("update");
-    vue.onMounted(() => {
-      updateLabelWidthFn();
-    });
-    vue.onBeforeUnmount(() => {
-      updateLabelWidth("remove");
-    });
-    vue.onUpdated(() => updateLabelWidthFn());
-    vue.watch(computedWidth, (val, oldVal) => {
-      if (props.updateAll) {
-        formContext?.registerLabelWidth(val, oldVal);
-      }
-    });
-    core.useResizeObserver(vue.computed(() => el.value?.firstElementChild ?? null), updateLabelWidthFn);
-    return () => {
-      if (!slots) return null;
-      const {
-        isAutoWidth
-      } = props;
-      if (isAutoWidth) {
-        const autoLabelWidth = formContext?.autoLabelWidth;
-        const hasLabel = formItemContext?.hasLabel;
-        const style = {};
-        if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
-          const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
-          const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
-          const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
-          if (marginWidth) {
-            style[marginPosition] = `${marginWidth}px`;
-          }
-        }
-        return vue.createVNode("div", {
-          "ref": el,
-          "class": [ns.be("item", "label-wrap")],
-          "style": style
-        }, [slots.default?.()]);
-      } else {
-        return vue.createVNode(vue.Fragment, {
-          "ref": el
-        }, [slots.default?.()]);
-      }
-    };
-  }
-});
-exports.default = FormLabelWrap;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("@vueuse/core");require("@vft/utils");const L=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const q=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const m=require("./constants.cjs"),h="VftLabelWrap",C=e.defineComponent({name:h,props:{isAutoWidth:Boolean,updateAll:Boolean},setup(l,{slots:o}){const n=e.inject(m.formContextKey,void 0),u=e.inject(m.formItemContextKey);u||L.throwError(h,"usage: <vft-form-item><label-wrap /></vft-form-item>");const b=q.useNamespace("form"),r=e.ref(),a=e.ref(0),p=()=>{if(r.value?.firstElementChild){const t=window.getComputedStyle(r.value.firstElementChild).width;return Math.ceil(Number.parseFloat(t))}else return 0},d=(t="update")=>{e.nextTick(()=>{o.default&&l.isAutoWidth&&(t==="update"?a.value=p():t==="remove"&&n?.deregisterLabelWidth(a.value))})},s=()=>d("update");return e.onMounted(()=>{s()}),e.onBeforeUnmount(()=>{d("remove")}),e.onUpdated(()=>s()),e.watch(a,(t,i)=>{l.updateAll&&n?.registerLabelWidth(t,i)}),g.useResizeObserver(e.computed(()=>r.value?.firstElementChild??null),s),()=>{if(!o)return null;const{isAutoWidth:t}=l;if(t){const i=n?.autoLabelWidth,v=u?.hasLabel,c={};if(v&&i&&i!=="auto"){const f=Math.max(0,Number.parseInt(i,10)-a.value),W=(u.labelPosition||n.labelPosition)==="left"?"marginRight":"marginLeft";f&&(c[W]=`${f}px`)}return e.createVNode("div",{ref:r,class:[b.be("item","label-wrap")],style:c},[o.default?.()])}else return e.createVNode(e.Fragment,{ref:r},[o.default?.()])}}});exports.default=C;

package/lib/components/form/form.vue.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const form_vue_vue_type_script_setup_true_lang = require("./form.vue2.cjs");
-exports.default = form_vue_vue_type_script_setup_true_lang.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./form.vue2.cjs");exports.default=e.default;

package/lib/components/form/form.vue2.cjs

@@ -1,195 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const utils$1 = require("@vft/utils");
-const constants = require("./constants.cjs");
-const utils = require("./utils.cjs");
-const useFormCommonProps = require("./hooks/use-form-common-props.cjs");
-const index = require("../../hooks/use-namespace/index.cjs");
-const error = require("../../utils/error.cjs");
-const __default__ = vue.defineComponent({
-  name: "vft-form"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: {
-    size: {},
-    disabled: { type: Boolean },
-    model: {},
-    rules: {},
-    labelPosition: { default: "right" },
-    requireAsteriskPosition: { default: "left" },
-    labelWidth: { default: "" },
-    labelSuffix: { default: "" },
-    inline: { type: Boolean },
-    inlineMessage: { type: Boolean },
-    statusIcon: { type: Boolean },
-    showMessage: { type: Boolean, default: true },
-    validateOnRuleChange: { type: Boolean, default: true },
-    hideRequiredAsterisk: { type: Boolean, default: false },
-    scrollToError: { type: Boolean },
-    scrollIntoViewOptions: { type: Boolean, default: true }
-  },
-  emits: ["validate"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const emit = __emit;
-    const instance = vue.getCurrentInstance();
-    const formRef = vue.ref();
-    const fields = vue.reactive([]);
-    const formSize = useFormCommonProps.useFormSize();
-    const ns = index.useNamespace("form");
-    const formClasses = vue.computed(() => {
-      return [
-        ns.b(),
-        ns.m(formSize.value || "default"),
-        {
-          [ns.m(`label-${__props.labelPosition}`)]: __props.labelPosition,
-          [ns.m("inline")]: __props.inline
-        }
-      ];
-    });
-    const getField = (prop) => {
-      return utils.filterFields(fields, [prop])[0];
-    };
-    const addField = (field) => {
-      fields.push(field);
-    };
-    const removeField = (field) => {
-      if (field.prop) {
-        fields.splice(fields.indexOf(field), 1);
-      }
-    };
-    const resetFields = (properties = []) => {
-      if (!__props.model) {
-        error.debugWarn(ns.b(), "model is required for resetFields to work.");
-        return;
-      }
-      utils.filterFields(fields, properties).forEach((field) => field.resetField());
-    };
-    const clearValidate = (props = []) => {
-      utils.filterFields(fields, props).forEach((field) => field.clearValidate());
-    };
-    const isValidatable = vue.computed(() => {
-      const hasModel = !!__props.model;
-      if (!hasModel) {
-        error.debugWarn(ns.b(), "model is required for validate to work.");
-      }
-      return hasModel;
-    });
-    const obtainValidateFields = (props) => {
-      if (fields.length === 0) return [];
-      const filteredFields = utils.filterFields(fields, props);
-      if (!filteredFields.length) {
-        error.debugWarn(ns.b(), "please pass correct props!");
-        return [];
-      }
-      return filteredFields;
-    };
-    const validate = async (props, callback) => validateField(props || void 0, callback);
-    const doValidateField = async (props = []) => {
-      if (!isValidatable.value) return false;
-      const fields2 = obtainValidateFields(props);
-      if (fields2.length === 0) return true;
-      let validationErrors = {};
-      for (const field of fields2) {
-        try {
-          await field.validate("");
-          if (field.validateState === "error") field.resetField();
-        } catch (fields3) {
-          validationErrors = {
-            ...validationErrors,
-            ...fields3
-          };
-        }
-      }
-      if (Object.keys(validationErrors).length === 0) return true;
-      return Promise.reject(validationErrors);
-    };
-    const validateField = async (modelProps = [], callback) => {
-      let result = false;
-      const shouldThrow = !utils$1.isFunction(callback);
-      try {
-        result = await doValidateField(modelProps);
-        if (result === true) {
-          await callback?.(result);
-        }
-        return __props.model;
-      } catch (e) {
-        if (e instanceof Error) throw e;
-        const invalidFields = e;
-        if (__props.scrollToError) {
-          if (formRef.value) {
-            const formItem = formRef.value.querySelector(
-              `.${ns.b()}-item.is-error`
-            );
-            formItem?.scrollIntoView(__props.scrollIntoViewOptions);
-          }
-        }
-        console.error(e);
-        !result && await callback?.(false, invalidFields);
-        return shouldThrow && Promise.reject(invalidFields);
-      }
-    };
-    const scrollToField = (prop) => {
-      const field = getField(prop);
-      if (field) {
-        field.$el?.scrollIntoView(__props.scrollIntoViewOptions);
-      }
-    };
-    vue.watch(
-      () => __props.rules,
-      () => {
-        if (__props.validateOnRuleChange) {
-          validate().catch((err) => error.debugWarn(err));
-        }
-      },
-      { deep: true, flush: "post" }
-    );
-    vue.provide(
-      constants.formContextKey,
-      vue.reactive({
-        ...vue.toRefs(instance.props),
-        emit,
-        resetFields,
-        clearValidate,
-        validateField,
-        getField,
-        addField,
-        removeField,
-        ...utils.useFormLabelWidth()
-      })
-    );
-    __expose({
-      /**
-       * @description Validate the whole form. Receives a callback or returns `Promise`.
-       */
-      validate,
-      /**
-       * @description Validate specified fields.
-       */
-      validateField,
-      /**
-       * @description Reset specified fields and remove validation result.
-       */
-      resetFields,
-      /**
-       * @description Clear validation message for specified fields.
-       */
-      clearValidate,
-      /**
-       * @description Scroll to the specified fields.
-       */
-      scrollToField
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("form", {
-        ref_key: "formRef",
-        ref: formRef,
-        class: vue.normalizeClass(formClasses.value)
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-exports.default = _sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue");require("@vueuse/core");const E=require("@vft/utils"),d=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const k=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const R=require("./constants.cjs"),W=require("./hooks/use-form-common-props.cjs"),u=require("./utils.cjs"),x=r.defineComponent({name:"vft-form"}),M=r.defineComponent({...x,props:{size:{},disabled:{type:Boolean},model:{},rules:{},labelPosition:{default:"right"},requireAsteriskPosition:{default:"left"},labelWidth:{default:""},labelSuffix:{default:""},inline:{type:Boolean},inlineMessage:{type:Boolean},statusIcon:{type:Boolean},showMessage:{type:Boolean,default:!0},validateOnRuleChange:{type:Boolean,default:!0},hideRequiredAsterisk:{type:Boolean,default:!1},scrollToError:{type:Boolean},scrollIntoViewOptions:{type:Boolean,default:!0}},emits:["validate"],setup(o,{expose:y,emit:q}){const g=q,p=r.getCurrentInstance(),c=r.ref(),l=r.reactive([]),w=W.useFormSize(),s=k.useNamespace("form"),B=r.computed(()=>[s.b(),s.m(w.value||"default"),{[s.m(`label-${o.labelPosition}`)]:o.labelPosition,[s.m("inline")]:o.inline}]),m=e=>u.filterFields(l,[e])[0],V=e=>{l.push(e)},C=e=>{e.prop&&l.splice(l.indexOf(e),1)},h=(e=[])=>{if(!o.model){d.debugWarn(s.b(),"model is required for resetFields to work.");return}u.filterFields(l,e).forEach(t=>t.resetField())},v=(e=[])=>{u.filterFields(l,e).forEach(t=>t.clearValidate())},I=r.computed(()=>{const e=!!o.model;return e||d.debugWarn(s.b(),"model is required for validate to work."),e}),O=e=>{if(l.length===0)return[];const t=u.filterFields(l,e);return t.length?t:(d.debugWarn(s.b(),"please pass correct props!"),[])},F=async(e,t)=>f(e||void 0,t),P=async(e=[])=>{if(!I.value)return!1;const t=O(e);if(t.length===0)return!0;let i={};for(const a of t)try{await a.validate(""),a.validateState==="error"&&a.resetField()}catch(n){i={...i,...n}}return Object.keys(i).length===0?!0:Promise.reject(i)},f=async(e=[],t)=>{let i=!1;const a=!E.isFunction(t);try{return i=await P(e),i===!0&&await t?.(i),o.model}catch(n){if(n instanceof Error)throw n;const b=n;return o.scrollToError&&c.value&&c.value.querySelector(`.${s.b()}-item.is-error`)?.scrollIntoView(o.scrollIntoViewOptions),console.error(n),!i&&await t?.(!1,b),a&&Promise.reject(b)}},S=e=>{const t=m(e);t&&t.$el?.scrollIntoView(o.scrollIntoViewOptions)};return r.watch(()=>o.rules,()=>{o.validateOnRuleChange&&F().catch(e=>d.debugWarn(e))},{deep:!0,flush:"post"}),r.provide(R.formContextKey,r.reactive({...r.toRefs(p.props),emit:g,resetFields:h,clearValidate:v,validateField:f,getField:m,addField:V,removeField:C,...u.useFormLabelWidth()})),y({validate:F,validateField:f,resetFields:h,clearValidate:v,scrollToField:S}),(e,t)=>(r.openBlock(),r.createElementBlock("form",{ref_key:"formRef",ref:c,class:r.normalizeClass(B.value)},[r.renderSlot(e.$slots,"default")],2))}});exports.default=M;

package/lib/components/form/hooks/index.cjs

@@ -1,10 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const useFormCommonProps = require("./use-form-common-props.cjs");
-const useFormItem = require("./use-form-item.cjs");
-exports.useDisabled = useFormCommonProps.useDisabled;
-exports.useFormDisabled = useFormCommonProps.useFormDisabled;
-exports.useFormSize = useFormCommonProps.useFormSize;
-exports.useSize = useFormCommonProps.useSize;
-exports.useFormItem = useFormItem.useFormItem;
-exports.useFormItemInputId = useFormItem.useFormItemInputId;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-form-common-props.cjs"),s=require("./use-form-item.cjs");exports.useDisabled=e.useDisabled;exports.useFormDisabled=e.useFormDisabled;exports.useFormSize=e.useFormSize;exports.useSize=e.useSize;exports.useFormItem=s.useFormItem;exports.useFormItemInputId=s.useFormItemInputId;