'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var lodashUnified = require('lodash-unified');
var core = require('@vueuse/core');
require('../../../utils/index.js');
require('../../../tokens/index.js');
require('../../../hooks/index.js');
var formItem = require('./form-item.js');
var formLabelWrap = require('./form-label-wrap.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var form = require('../../../tokens/form.js');
var index = require('../../../hooks/use-common-props/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var style = require('../../../utils/dom/style.js');
var shared = require('@vue/shared');
var objects = require('../../../utils/objects.js');

const _hoisted_1 = ["widget"];
const _hoisted_2 = ["for", "widget"];
const _hoisted_3 = ["widget"];
const __default__ = {
  name: "PsFormItem"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: formItem.formItemProps,
  setup(__props, { expose }) {
    const props = __props;
    const slots = vue.useSlots();
    const formContext = vue.inject(form.formContextKey, void 0);
    const parentFormItemContext = vue.inject(form.formItemContextKey, void 0);
    const _size = index.useSize(void 0, { formItem: false });
    const ns = index$1.useNamespace("form-item");
    const validateState = vue.ref("");
    const validateStateDebounced = core.refDebounced(validateState, 100);
    const validateMessage = vue.ref("");
    const formItemRef = vue.ref();
    let initialValue = void 0;
    const labelStyle = vue.computed(() => {
      if ((formContext == null ? void 0 : formContext.labelPosition) === "top") {
        return {};
      }
      const labelWidth = style.addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
      if (labelWidth)
        return { width: labelWidth };
      return {};
    });
    const contentStyle = vue.computed(() => {
      if ((formContext == null ? void 0 : formContext.labelPosition) === "top" || (formContext == null ? void 0 : formContext.inline)) {
        return {};
      }
      if (!props.label && !props.labelWidth && isNested) {
        return {};
      }
      const labelWidth = style.addUnit(props.labelWidth || (formContext == null ? void 0 : 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", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
      { [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon }
    ]);
    const _inlineMessage = vue.computed(() => core.isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : 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 shared.isString(props.prop) ? props.prop : props.prop.join(".");
    });
    const labelFor = vue.computed(() => props.for || propString.value);
    const isNested = !!parentFormItemContext;
    const fieldValue = vue.computed(() => {
      const model = formContext == null ? void 0 : formContext.model;
      if (!model || !props.prop) {
        return;
      }
      return objects.getProp(model, props.prop).value;
    });
    const _rules = vue.computed(() => {
      const rules = props.rules ? lodashUnified.castArray(props.rules) : [];
      const formRules = formContext == null ? void 0 : formContext.rules;
      if (formRules && props.prop) {
        const _rules2 = objects.getProp(formRules, props.prop).value;
        if (_rules2) {
          rules.push(...lodashUnified.castArray(_rules2));
        }
      }
      if (props.required !== void 0) {
        rules.push({ required: !!props.required });
      }
      return rules;
    });
    const isRequired = vue.computed(() => _rules.value.some((rule) => rule.required === true));
    const shouldShowError = vue.computed(() => {
      var _a;
      return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
    });
    const currentLabel = vue.computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
    const context = vue.reactive({
      ...vue.toRefs(props),
      $el: formItemRef,
      size: _size,
      validateState
    });
    vue.provide(form.formItemContextKey, context);
    vue.onMounted(() => {
      if (props.prop) {
        formContext == null ? void 0 : formContext.addField(context);
        initialValue = lodashUnified.clone(fieldValue.value);
      }
    });
    expose({
      size: _size,
      validateMessage,
      validateState
    });
    return (_ctx, _cache) => {
      var _a;
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "formItemRef",
        ref: formItemRef,
        class: vue.normalizeClass(vue.unref(formItemClasses)),
        widget: _ctx.widget
      }, [
        vue.createVNode(vue.unref(formLabelWrap["default"]), {
          "is-auto-width": vue.unref(labelStyle).width === "auto",
          "update-all": ((_a = vue.unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
        }, {
          default: vue.withCtx(() => [
            _ctx.label || _ctx.$slots.label ? (vue.openBlock(), vue.createElementBlock("label", {
              key: 0,
              for: vue.unref(labelFor),
              class: vue.normalizeClass(vue.unref(ns).e("label")),
              style: vue.normalizeStyle(vue.unref(labelStyle)),
              widget: _ctx.widget ? "form-item:label:" + _ctx.widget.split(":")[1] : void 0
            }, [
              vue.renderSlot(_ctx.$slots, "label", { label: vue.unref(currentLabel) }, () => [
                vue.createTextVNode(vue.toDisplayString(vue.unref(currentLabel)), 1)
              ])
            ], 14, _hoisted_2)) : vue.createCommentVNode("v-if", true)
          ]),
          _: 3
        }, 8, ["is-auto-width", "update-all"]),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(vue.unref(ns).e("content")),
          style: vue.normalizeStyle(vue.unref(contentStyle)),
          widget: _ctx.widget ? "form-item:default:" + _ctx.widget.split(":")[1] : void 0
        }, [
          vue.renderSlot(_ctx.$slots, "default"),
          vue.createVNode(vue.Transition, {
            name: `${vue.unref(ns).namespace.value}-zoom-in-top`
          }, {
            default: vue.withCtx(() => [
              vue.unref(shouldShowError) ? vue.renderSlot(_ctx.$slots, "error", {
                key: 0,
                error: validateMessage.value
              }, () => [
                vue.createElementVNode("div", {
                  class: vue.normalizeClass(vue.unref(validateClasses))
                }, vue.toDisplayString(validateMessage.value), 3)
              ]) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
          }, 8, ["name"])
        ], 14, _hoisted_3)
      ], 10, _hoisted_1);
    };
  }
});
var FormItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/form/src/form-item.vue"]]);

exports["default"] = FormItem;
//# sourceMappingURL=form-item2.js.map
