@element-plus/nightly 0.0.20250912 → 0.0.20250913

package/es/components/drawer/src/drawer2.mjs

@@ -1,197 +1,32 @@
-import { defineComponent, useSlots, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, Transition, withDirectives, createElementVNode, mergeProps, withModifiers, normalizeClass, createElementBlock, renderSlot, toDisplayString, createCommentVNode, normalizeStyle, vShow } from 'vue';
-import { Close } from '@element-plus/icons-vue';
-import { ElOverlay } from '../../overlay/index.mjs';
-import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
-import { ElTeleport } from '../../teleport/index.mjs';
-import { ElIcon } from '../../icon/index.mjs';
-import { drawerProps, drawerEmits } from './drawer.mjs';
-import { useResizable } from './composables/useResizable.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useDialog } from '../../dialog/src/use-dialog.mjs';
-import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { dialogProps, dialogEmits } from '../../dialog/src/dialog.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const __default__ = defineComponent({
-  name: "ElDrawer",
-  inheritAttrs: false
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: drawerProps,
-  emits: drawerEmits,
-  setup(__props, { expose }) {
-    const props = __props;
-    const slots = useSlots();
-    useDeprecated({
-      scope: "el-drawer",
-      from: "the title slot",
-      replacement: "the header slot",
-      version: "3.0.0",
-      ref: "https://element-plus.org/en-US/component/drawer.html#slots"
-    }, computed(() => !!slots.title));
-    const drawerRef = ref();
-    const focusStartRef = ref();
-    const draggerRef = ref();
-    const ns = useNamespace("drawer");
-    const { t } = useLocale();
-    const {
-      afterEnter,
-      afterLeave,
-      beforeLeave,
-      visible,
-      rendered,
-      titleId,
-      bodyId,
-      zIndex,
-      onModalClick,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      onFocusoutPrevented,
-      onCloseRequested,
-      handleClose
-    } = useDialog(props, drawerRef);
-    const { isHorizontal, size, isResizing } = useResizable(props, draggerRef);
-    expose({
-      handleClose,
-      afterEnter,
-      afterLeave
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElTeleport), {
-        to: _ctx.appendTo,
-        disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
-      }, {
-        default: withCtx(() => [
-          createVNode(Transition, {
-            name: unref(ns).b("fade"),
-            onAfterEnter: unref(afterEnter),
-            onAfterLeave: unref(afterLeave),
-            onBeforeLeave: unref(beforeLeave),
-            persisted: ""
-          }, {
-            default: withCtx(() => {
-              var _a;
-              return [
-                withDirectives(createVNode(unref(ElOverlay), {
-                  mask: _ctx.modal,
-                  "overlay-class": [unref(ns).is("drawer"), (_a = _ctx.modalClass) != null ? _a : ""],
-                  "z-index": unref(zIndex),
-                  onClick: unref(onModalClick)
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(ElFocusTrap), {
-                      loop: "",
-                      trapped: unref(visible),
-                      "focus-trap-el": drawerRef.value,
-                      "focus-start-el": focusStartRef.value,
-                      onFocusAfterTrapped: unref(onOpenAutoFocus),
-                      onFocusAfterReleased: unref(onCloseAutoFocus),
-                      onFocusoutPrevented: unref(onFocusoutPrevented),
-                      onReleaseRequested: unref(onCloseRequested)
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("div", mergeProps({
-                          ref_key: "drawerRef",
-                          ref: drawerRef,
-                          "aria-modal": "true",
-                          "aria-label": _ctx.title || void 0,
-                          "aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
-                          "aria-describedby": unref(bodyId)
-                        }, _ctx.$attrs, {
-                          class: [
-                            unref(ns).b(),
-                            _ctx.direction,
-                            unref(visible) && "open",
-                            unref(ns).is("dragging", unref(isResizing))
-                          ],
-                          style: { [unref(isHorizontal) ? "width" : "height"]: unref(size) },
-                          role: "dialog",
-                          onClick: withModifiers(() => {
-                          }, ["stop"])
-                        }), [
-                          createElementVNode("span", {
-                            ref_key: "focusStartRef",
-                            ref: focusStartRef,
-                            class: normalizeClass(unref(ns).e("sr-focus")),
-                            tabindex: "-1"
-                          }, null, 2),
-                          _ctx.withHeader ? (openBlock(), createElementBlock("header", {
-                            key: 0,
-                            class: normalizeClass([unref(ns).e("header"), _ctx.headerClass])
-                          }, [
-                            !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
-                              key: 0,
-                              close: unref(handleClose),
-                              titleId: unref(titleId),
-                              titleClass: unref(ns).e("title")
-                            }, () => [
-                              createElementVNode("span", {
-                                id: unref(titleId),
-                                role: "heading",
-                                "aria-level": _ctx.headerAriaLevel,
-                                class: normalizeClass(unref(ns).e("title"))
-                              }, toDisplayString(_ctx.title), 11, ["id", "aria-level"])
-                            ]) : renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
-                              createCommentVNode(" DEPRECATED SLOT ")
-                            ]),
-                            _ctx.showClose ? (openBlock(), createElementBlock("button", {
-                              key: 2,
-                              "aria-label": unref(t)("el.drawer.close"),
-                              class: normalizeClass(unref(ns).e("close-btn")),
-                              type: "button",
-                              onClick: unref(handleClose)
-                            }, [
-                              createVNode(unref(ElIcon), {
-                                class: normalizeClass(unref(ns).e("close"))
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(unref(Close))
-                                ]),
-                                _: 1
-                              }, 8, ["class"])
-                            ], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
-                          ], 2)) : createCommentVNode("v-if", true),
-                          unref(rendered) ? (openBlock(), createElementBlock("div", {
-                            key: 1,
-                            id: unref(bodyId),
-                            class: normalizeClass([unref(ns).e("body"), _ctx.bodyClass])
-                          }, [
-                            renderSlot(_ctx.$slots, "default")
-                          ], 10, ["id"])) : createCommentVNode("v-if", true),
-                          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-                            key: 2,
-                            class: normalizeClass([unref(ns).e("footer"), _ctx.footerClass])
-                          }, [
-                            renderSlot(_ctx.$slots, "footer")
-                          ], 2)) : createCommentVNode("v-if", true),
-                          _ctx.resizable ? (openBlock(), createElementBlock("div", {
-                            key: 3,
-                            ref_key: "draggerRef",
-                            ref: draggerRef,
-                            style: normalizeStyle({ zIndex: unref(zIndex) }),
-                            class: normalizeClass(unref(ns).e("dragger"))
-                          }, null, 6)) : createCommentVNode("v-if", true)
-                        ], 16, ["aria-label", "aria-labelledby", "aria-describedby", "onClick"])
-                      ]),
-                      _: 3
-                    }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
-                  ]),
-                  _: 3
-                }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
-                  [vShow, unref(visible)]
-                ])
-              ];
-            }),
-            _: 3
-          }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
-        ]),
-        _: 3
-      }, 8, ["to", "disabled"]);
-    };
+const drawerProps = buildProps({
+  ...dialogProps,
+  direction: {
+    type: String,
+    default: "rtl",
+    values: ["ltr", "rtl", "ttb", "btt"]
+  },
+  resizable: Boolean,
+  size: {
+    type: [String, Number],
+    default: "30%"
+  },
+  withHeader: {
+    type: Boolean,
+    default: true
+  },
+  modalFade: {
+    type: Boolean,
+    default: true
+  },
+  headerAriaLevel: {
+    type: String,
+    default: "2"
   }
 });
-var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "drawer.vue"]]);
+const drawerEmits = dialogEmits;
 
-export { Drawer as default };
+export { drawerEmits, drawerProps };
 //# sourceMappingURL=drawer2.mjs.map

package/es/components/drawer/src/drawer2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition\n      :name=\"ns.b('fade')\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        :mask=\"modal\"\n        :overlay-class=\"[ns.is('drawer'), modalClass ?? '']\"\n        :z-index=\"zIndex\"\n        @click=\"onModalClick\"\n      >\n        <el-focus-trap\n          loop\n          :trapped=\"visible\"\n          :focus-trap-el=\"drawerRef\"\n          :focus-start-el=\"focusStartRef\"\n          @focus-after-trapped=\"onOpenAutoFocus\"\n          @focus-after-released=\"onCloseAutoFocus\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div\n            ref=\"drawerRef\"\n            aria-modal=\"true\"\n            :aria-label=\"title || undefined\"\n            :aria-labelledby=\"!title ? titleId : undefined\"\n            :aria-describedby=\"bodyId\"\n            v-bind=\"$attrs\"\n            :class=\"[\n              ns.b(),\n              direction,\n              visible && 'open',\n              ns.is('dragging', isResizing),\n            ]\"\n            :style=\"{ [isHorizontal ? 'width' : 'height']: size }\"\n            role=\"dialog\"\n            @click.stop\n          >\n            <span ref=\"focusStartRef\" :class=\"ns.e('sr-focus')\" tabindex=\"-1\" />\n            <header v-if=\"withHeader\" :class=\"[ns.e('header'), headerClass]\">\n              <template v-if=\"!$slots.title\">\n                <slot\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                >\n                  <span\n                    :id=\"titleId\"\n                    role=\"heading\"\n                    :aria-level=\"headerAriaLevel\"\n                    :class=\"ns.e('title')\"\n                  >\n                    {{ title }}\n                  </span>\n                </slot>\n              </template>\n              <template v-else>\n                <slot name=\"title\">\n                  <!-- DEPRECATED SLOT -->\n                </slot>\n              </template>\n              <button\n                v-if=\"showClose\"\n                :aria-label=\"t('el.drawer.close')\"\n                :class=\"ns.e('close-btn')\"\n                type=\"button\"\n                @click=\"handleClose\"\n              >\n                <el-icon :class=\"ns.e('close')\">\n                  <close />\n                </el-icon>\n              </button>\n            </header>\n            <template v-if=\"rendered\">\n              <div :id=\"bodyId\" :class=\"[ns.e('body'), bodyClass]\">\n                <slot />\n              </div>\n            </template>\n            <div v-if=\"$slots.footer\" :class=\"[ns.e('footer'), footerClass]\">\n              <slot name=\"footer\" />\n            </div>\n            <div\n              v-if=\"resizable\"\n              ref=\"draggerRef\"\n              :style=\"{ zIndex }\"\n              :class=\"ns.e('dragger')\"\n            />\n          </div>\n        </el-focus-trap>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport { useDialog } from '@element-plus/components/dialog'\nimport ElIcon from '@element-plus/components/icon'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { drawerEmits, drawerProps } from './drawer'\nimport { useResizable } from './composables/useResizable'\n\ndefineOptions({\n  name: 'ElDrawer',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(drawerProps)\ndefineEmits(drawerEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-drawer',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/drawer.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst drawerRef = ref<HTMLElement>()\nconst focusStartRef = ref<HTMLElement>()\nconst draggerRef = ref<HTMLElement>()\nconst ns = useNamespace('drawer')\nconst { t } = useLocale()\n\nconst {\n  afterEnter,\n  afterLeave,\n  beforeLeave,\n  visible,\n  rendered,\n  titleId,\n  bodyId,\n  zIndex,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onFocusoutPrevented,\n  onCloseRequested,\n  handleClose,\n} = useDialog(props, drawerRef)\n\nconst { isHorizontal, size, isResizing } = useResizable(props, draggerRef)\n\ndefineExpose({\n  handleClose,\n  afterEnter,\n  afterLeave,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;;;;;;;;mCAkHc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,aAAA,CAAA;AAAA,MACE,KAAA,EAAA,WAAA;AAAA,MAAA,IACS,EAAA,gBAAA;AAAA,MAAA,WACD,EAAA,iBAAA;AAAA,MAAA,OACO,EAAA,OAAA;AAAA,MAAA,GACJ,EAAA,4DAAA;AAAA,KAAA,EAAA,QACJ,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,IACP,MAAA,SAAA,GAAA,GAAA,EAAA,CAAA;AAAA,IAAA,MACS,aAAQ,MAAM,EAAK,CAAA;AAAA,IAC9B,MAAA,UAAA,GAAA,GAAA,EAAA,CAAA;AAEA,IAAA,MAAM,iBAA6B,CAAA,QAAA,CAAA,CAAA;AACnC,IAAA,MAAM,iBAAiC,EAAA,CAAA;AACvC,IAAA,MAAM;AACN,MAAM;AACN,MAAM,UAAI;AAEV,MAAM,WAAA;AAAA,MACJ,OAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,KACA,GAAA,SAAA,CAAA,KAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACA,MAAA,EAAA,YAAA,EAAA,IAAA,EAAA,UAAA,EAAA,GAAA,YAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IACA,MAAA,CAAA;AAAA,MACF,WAAc;AAEd,MAAA,UAAsB;AAEtB,MAAa,UAAA;AAAA,KACX,CAAA,CAAA;AAAA,IACA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,UAAA,CAAA,EAAA;AAAA,QACD,EAAA,EAAA,IAAA,CAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"drawer2.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { dialogEmits, dialogProps } from '@element-plus/components/dialog'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\n\nexport const drawerProps = buildProps({\n  ...dialogProps,\n  direction: {\n    type: String,\n    default: 'rtl',\n    values: ['ltr', 'rtl', 'ttb', 'btt'],\n  },\n  resizable: Boolean,\n  size: {\n    type: [String, Number],\n    default: '30%',\n  },\n  withHeader: {\n    type: Boolean,\n    default: true,\n  },\n  modalFade: {\n    type: Boolean,\n    default: true,\n  },\n  headerAriaLevel: {\n    type: String,\n    default: '2',\n  },\n} as const)\n\nexport type DrawerProps = ExtractPropTypes<typeof drawerProps>\nexport type DrawerPropsPublic = __ExtractPublicPropTypes<typeof drawerProps>\n\nexport const drawerEmits = dialogEmits\n"],"names":[],"mappings":";;;AAEY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,GAAG,WAAW;AAChB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACxC,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;;;;"}

package/es/components/dropdown/src/dropdown.mjs

@@ -1,5 +1,5 @@
-import { useTooltipTriggerProps } from '../../tooltip/src/trigger2.mjs';
-import { roleTypes } from '../../popper/src/popper2.mjs';
+import { useTooltipTriggerProps } from '../../tooltip/src/trigger.mjs';
+import { roleTypes } from '../../popper/src/popper.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 import { EVENT_CODE } from '../../../constants/aria.mjs';
 import { useTooltipContentProps } from '../../tooltip/src/content.mjs';

package/es/components/form/index.mjs

@@ -1,7 +1,7 @@
 import Form from './src/form2.mjs';
-import FormItem from './src/form-item2.mjs';
+import FormItem from './src/form-item.mjs';
 export { formEmits, formMetaProps, formProps } from './src/form.mjs';
-export { formItemProps, formItemValidateStates } from './src/form-item.mjs';
+export { formItemProps, formItemValidateStates } from './src/form-item2.mjs';
 export { formContextKey, formItemContextKey } from './src/constants.mjs';
 import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';
 export { useDisabled, useFormDisabled, useFormSize, useSize } from './src/hooks/use-form-common-props.mjs';

package/es/components/form/src/form-item.mjs

@@ -1,52 +1,327 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { componentSizes } from '../../../constants/size.mjs';
+import { defineComponent, useSlots, inject, ref, computed, watch, reactive, toRefs, provide, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createBlock, resolveDynamicComponent, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, TransitionGroup, nextTick } from 'vue';
+import AsyncValidator from 'async-validator';
+import { castArray, clone } from 'lodash-unified';
+import { refDebounced } from '@vueuse/core';
+import { formItemProps } from './form-item2.mjs';
+import FormLabelWrap from './form-label-wrap.mjs';
+import { formContextKey, formItemContextKey } from './constants.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useId } from '../../../hooks/use-id/index.mjs';
+import { getProp } from '../../../utils/objects.mjs';
+import { useFormSize } from './hooks/use-form-common-props.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { addUnit } from '../../../utils/dom/style.mjs';
+import { isBoolean } from '../../../utils/types.mjs';
+import { isArray, isFunction } from '@vue/shared';
 
-const formItemValidateStates = [
-  "",
-  "error",
-  "validating",
-  "success"
-];
-const formItemProps = buildProps({
-  label: String,
-  labelWidth: {
-    type: [String, Number],
-    default: ""
-  },
-  labelPosition: {
-    type: String,
-    values: ["left", "right", "top", ""],
-    default: ""
-  },
-  prop: {
-    type: definePropType([String, Array])
-  },
-  required: {
-    type: Boolean,
-    default: void 0
-  },
-  rules: {
-    type: definePropType([Object, Array])
-  },
-  error: String,
-  validateStatus: {
-    type: String,
-    values: formItemValidateStates
-  },
-  for: String,
-  inlineMessage: {
-    type: Boolean,
-    default: void 0
-  },
-  showMessage: {
-    type: Boolean,
-    default: true
-  },
-  size: {
-    type: String,
-    values: componentSizes
+const __default__ = defineComponent({
+  name: "ElFormItem"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: formItemProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const slots = useSlots();
+    const formContext = inject(formContextKey, void 0);
+    const parentFormItemContext = inject(formItemContextKey, void 0);
+    const _size = useFormSize(void 0, { formItem: false });
+    const ns = useNamespace("form-item");
+    const labelId = useId().value;
+    const inputIds = ref([]);
+    const validateState = ref("");
+    const validateStateDebounced = refDebounced(validateState, 100);
+    const validateMessage = ref("");
+    const formItemRef = ref();
+    let initialValue = void 0;
+    let isResettingField = false;
+    const labelPosition = computed(() => props.labelPosition || (formContext == null ? void 0 : formContext.labelPosition));
+    const labelStyle = computed(() => {
+      if (labelPosition.value === "top") {
+        return {};
+      }
+      const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
+      if (labelWidth)
+        return { width: labelWidth };
+      return {};
+    });
+    const contentStyle = computed(() => {
+      if (labelPosition.value === "top" || (formContext == null ? void 0 : formContext.inline)) {
+        return {};
+      }
+      if (!props.label && !props.labelWidth && isNested) {
+        return {};
+      }
+      const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
+      if (!props.label && !slots.label) {
+        return { marginLeft: labelWidth };
+      }
+      return {};
+    });
+    const formItemClasses = 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", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
+      (formContext == null ? void 0 : formContext.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left",
+      {
+        [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon,
+        [ns.m(`label-${labelPosition.value}`)]: labelPosition.value
+      }
+    ]);
+    const _inlineMessage = computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
+    const validateClasses = computed(() => [
+      ns.e("error"),
+      { [ns.em("error", "inline")]: _inlineMessage.value }
+    ]);
+    const propString = computed(() => {
+      if (!props.prop)
+        return "";
+      return isArray(props.prop) ? props.prop.join(".") : props.prop;
+    });
+    const hasLabel = computed(() => {
+      return !!(props.label || slots.label);
+    });
+    const labelFor = computed(() => {
+      var _a;
+      return (_a = props.for) != null ? _a : inputIds.value.length === 1 ? inputIds.value[0] : void 0;
+    });
+    const isGroup = computed(() => {
+      return !labelFor.value && hasLabel.value;
+    });
+    const isNested = !!parentFormItemContext;
+    const fieldValue = computed(() => {
+      const model = formContext == null ? void 0 : formContext.model;
+      if (!model || !props.prop) {
+        return;
+      }
+      return getProp(model, props.prop).value;
+    });
+    const normalizedRules = computed(() => {
+      const { required } = props;
+      const rules = [];
+      if (props.rules) {
+        rules.push(...castArray(props.rules));
+      }
+      const formRules = formContext == null ? void 0 : formContext.rules;
+      if (formRules && props.prop) {
+        const _rules = getProp(formRules, props.prop).value;
+        if (_rules) {
+          rules.push(...castArray(_rules));
+        }
+      }
+      if (required !== void 0) {
+        const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => "required" in rule);
+        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 = computed(() => normalizedRules.value.length > 0);
+    const getFilteredRule = (trigger) => {
+      const rules = normalizedRules.value;
+      return rules.filter((rule) => {
+        if (!rule.trigger || !trigger)
+          return true;
+        if (isArray(rule.trigger)) {
+          return rule.trigger.includes(trigger);
+        } else {
+          return rule.trigger === trigger;
+        }
+      }).map(({ trigger: trigger2, ...rule }) => rule);
+    };
+    const isRequired = computed(() => normalizedRules.value.some((rule) => rule.required));
+    const shouldShowError = computed(() => {
+      var _a;
+      return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
+    });
+    const currentLabel = computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
+    const setValidationState = (state) => {
+      validateState.value = state;
+    };
+    const onValidationFailed = (error) => {
+      var _a, _b;
+      const { errors, fields } = error;
+      if (!errors || !fields) {
+        console.error(error);
+      }
+      setValidationState("error");
+      validateMessage.value = errors ? (_b = (_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) != null ? _b : `${props.prop} is required` : "";
+      formContext == null ? void 0 : formContext.emit("validate", props.prop, false, validateMessage.value);
+    };
+    const onValidationSucceeded = () => {
+      setValidationState("success");
+      formContext == null ? void 0 : 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 = isFunction(callback);
+      if (!validateEnabled.value) {
+        callback == null ? void 0 : callback(false);
+        return false;
+      }
+      const rules = getFilteredRule(trigger);
+      if (rules.length === 0) {
+        callback == null ? void 0 : callback(true);
+        return true;
+      }
+      setValidationState("validating");
+      return doValidate(rules).then(() => {
+        callback == null ? void 0 : callback(true);
+        return true;
+      }).catch((err) => {
+        const { fields } = err;
+        callback == null ? void 0 : callback(false, fields);
+        return hasCallback ? false : Promise.reject(fields);
+      });
+    };
+    const clearValidate = () => {
+      setValidationState("");
+      validateMessage.value = "";
+      isResettingField = false;
+    };
+    const resetField = async () => {
+      const model = formContext == null ? void 0 : formContext.model;
+      if (!model || !props.prop)
+        return;
+      const computedValue = getProp(model, props.prop);
+      isResettingField = true;
+      computedValue.value = clone(initialValue);
+      await 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);
+    };
+    watch(() => props.error, (val) => {
+      validateMessage.value = val || "";
+      setValidationState(val ? "error" : "");
+    }, { immediate: true });
+    watch(() => props.validateStatus, (val) => setValidationState(val || ""));
+    const context = reactive({
+      ...toRefs(props),
+      $el: formItemRef,
+      size: _size,
+      validateMessage,
+      validateState,
+      labelId,
+      inputIds,
+      isGroup,
+      hasLabel,
+      fieldValue,
+      addInputId,
+      removeInputId,
+      resetField,
+      clearValidate,
+      validate,
+      propString
+    });
+    provide(formItemContextKey, context);
+    onMounted(() => {
+      if (props.prop) {
+        formContext == null ? void 0 : formContext.addField(context);
+        initialValue = clone(fieldValue.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      formContext == null ? void 0 : formContext.removeField(context);
+    });
+    expose({
+      size: _size,
+      validateMessage,
+      validateState,
+      validate,
+      clearValidate,
+      resetField
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        ref_key: "formItemRef",
+        ref: formItemRef,
+        class: normalizeClass(unref(formItemClasses)),
+        role: unref(isGroup) ? "group" : void 0,
+        "aria-labelledby": unref(isGroup) ? unref(labelId) : void 0
+      }, [
+        createVNode(unref(FormLabelWrap), {
+          "is-auto-width": unref(labelStyle).width === "auto",
+          "update-all": ((_a = unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
+        }, {
+          default: withCtx(() => [
+            unref(hasLabel) ? (openBlock(), createBlock(resolveDynamicComponent(unref(labelFor) ? "label" : "div"), {
+              key: 0,
+              id: unref(labelId),
+              for: unref(labelFor),
+              class: normalizeClass(unref(ns).e("label")),
+              style: normalizeStyle(unref(labelStyle))
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "label", { label: unref(currentLabel) }, () => [
+                  createTextVNode(toDisplayString(unref(currentLabel)), 1)
+                ])
+              ]),
+              _: 3
+            }, 8, ["id", "for", "class", "style"])) : createCommentVNode("v-if", true)
+          ]),
+          _: 3
+        }, 8, ["is-auto-width", "update-all"]),
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e("content")),
+          style: normalizeStyle(unref(contentStyle))
+        }, [
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(TransitionGroup, {
+            name: `${unref(ns).namespace.value}-zoom-in-top`
+          }, {
+            default: withCtx(() => [
+              unref(shouldShowError) ? renderSlot(_ctx.$slots, "error", {
+                key: 0,
+                error: validateMessage.value
+              }, () => [
+                createElementVNode("div", {
+                  class: normalizeClass(unref(validateClasses))
+                }, toDisplayString(validateMessage.value), 3)
+              ]) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+          }, 8, ["name"])
+        ], 6)
+      ], 10, ["role", "aria-labelledby"]);
+    };
   }
 });
+var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form-item.vue"]]);
 
-export { formItemProps, formItemValidateStates };
+export { FormItem as default };
 //# sourceMappingURL=form-item.mjs.map