@aplus-frontend/ui/es/src/ap-form/item/index.vue.mjs

import { defineComponent as L, useSlots as _, ref as j, shallowRef as E, onMounted as M, computed as O, unref as r, cloneVNode as $, createBlock as y, openBlock as b, mergeProps as q, createSlots as K, withCtx as i, resolveDynamicComponent as Q, renderList as U, createElementVNode as Y, normalizeClass as G, createVNode as f, normalizeStyle as H, renderSlot as J, normalizeProps as W, guardReactiveProps as X } from "vue";
import { QuestionCircleOutlined as Z } from "@ant-design/icons-vue";
import { Form as ee, Tooltip as oe, TypographyText as te } from "@aplus-frontend/antdv";
import { useToken as re } from "@aplus-frontend/antdv/es/theme/internal";
import { isFunction as v, cloneDeep as le, isArray as ae, omit as F } from "lodash-unified";
import { isPromise as ne } from "../../utils/is.mjs";
import "../../config-provider/index.mjs";
import { getValidVNodeList as ie } from "../../utils/slot.mjs";
import { apFormItemColPropKeys as se } from "../constant.mjs";
import { useInjectForm as ue } from "../context.mjs";
import de from "../style/item.mjs";
import { useNamespace as fe } from "../../config-provider/hooks/use-namespace.mjs";
const ke = /* @__PURE__ */ L({
  name: "ApFormItem",
  __name: "index",
  props: {
    htmlFor: {},
    prefixCls: {},
    label: {},
    help: {},
    extra: {},
    labelCol: {},
    wrapperCol: {},
    hasFeedback: { type: Boolean, default: !1 },
    colon: { type: Boolean, default: void 0 },
    labelAlign: {},
    prop: {},
    name: {},
    rules: {},
    autoLink: { type: Boolean, default: !0 },
    required: { type: Boolean, default: void 0 },
    validateFirst: { type: Boolean, default: void 0 },
    validateStatus: {},
    validateTrigger: {},
    messageVariables: {},
    hidden: { type: Boolean },
    noStyle: { type: Boolean },
    tooltip: {},
    span: {},
    order: {},
    offset: {},
    push: {},
    pull: {},
    xs: {},
    sm: {},
    md: {},
    lg: {},
    xl: {},
    xxl: {},
    flex: {},
    bordered: { type: Boolean, default: !1 },
    valuePropName: { default: "value" },
    initialValue: {},
    _signal: {},
    transform: {},
    description: {},
    customFilled: {},
    disabled: { type: Boolean }
  },
  setup(V, { expose: h }) {
    const o = V, m = _(), { model: p, updateModel: g, internalInstance: B } = ue(), { m: u, b: C } = fe("ap-form-item"), k = de("ap-form-item"), d = j(!1), n = E(), [, P] = re();
    M(async () => {
      let e = v(o.initialValue) ? o.initialValue() : o.initialValue;
      ne(e) && (e = await e), B?.registerField({
        name: o.name,
        initialValue: le(e),
        transform: o.transform
      });
    });
    const c = O(() => o.name ? ae(o.name) ? o.name.reduce((e, t) => e?.[t], r(p)) : p?.value[o.name] : null);
    function x(e, t) {
      const l = Object.keys(t), a = { ...t };
      return l.forEach((s) => {
        s in e || delete a[s];
      }), a;
    }
    function N() {
      const e = m.default?.() || [];
      if (!o.name)
        return e[0];
      const t = ie(e)[0];
      if (!t)
        return null;
      const l = t?.type?.props ?? {}, a = {
        variant: o.bordered ? "borderless" : t?.props?.variant,
        bordered: o.bordered ? !1 : t?.props?.bordered,
        onFocus: S,
        onBlur: T
      };
      return $(t, {
        ...x(l, a),
        [o.valuePropName]: r(c),
        [`onUpdate:${o.valuePropName}`]: I
      });
    }
    function I(e) {
      g?.(o.name, e);
    }
    function S() {
      d.value = !0;
    }
    function T() {
      d.value = !1;
    }
    function w() {
      n.value?.onFieldBlur();
    }
    function R() {
      n.value?.onFieldChange();
    }
    function z() {
      n.value?.clearValidate();
    }
    function A() {
      n.value?.resetField();
    }
    function D(e = !1) {
      const t = r(c);
      if (!e || !o.transform)
        return t;
      const l = v(o.transform) ? o.transform : o.transform.transformer;
      return o.transform ? l(t) : t;
    }
    return h({
      onFieldBlur: w,
      onFieldChange: R,
      clearValidate: z,
      resetField: A,
      getFieldValue: D
    }), (e, t) => (b(), y(r(ee).Item, q(
      {
        ref_key: "formItemRef",
        ref: n
      },
      r(F)(o, [...r(se), "tooltip", "label", "description"]),
      {
        class: {
          [r(u)("bordered")]: e.bordered,
          [r(u)("focused")]: e.bordered && d.value,
          [r(u)("disabled")]: e.bordered && e.disabled,
          [r(C)()]: !0,
          [r(k)]: !0
        },
        colon: e.bordered ? !1 : o.colon
      }
    ), K({
      default: i(() => [
        (b(), y(Q(N())))
      ]),
      _: 2
    }, [
      o.tooltip ? {
        name: "tooltip",
        fn: i(({ class: l }) => [
          Y("span", {
            class: G(l)
          }, [
            f(r(oe), {
              title: o.tooltip
            }, {
              default: i(() => [
                f(r(Z), {
                  style: H({
                    color: r(P).colorTextTertiary,
                    fontSize: "14px",
                    transform: "translateY(1px)"
                  })
                }, null, 8, ["style"])
              ]),
              _: 1
            }, 8, ["title"])
          ], 2)
        ]),
        key: "0"
      } : void 0,
      e.label ? {
        name: "label",
        fn: i(() => [
          f(r(te), {
            content: e.label,
            ellipsis: { tooltip: e.label },
            style: { "min-width": "0px", flex: "1" }
          }, null, 8, ["content", "ellipsis"])
        ]),
        key: "1"
      } : void 0,
      U(r(F)(m, "default"), (l, a) => ({
        name: a,
        fn: i((s) => [
          J(e.$slots, a, W(X(s || {})))
        ])
      }))
    ]), 1040, ["class", "colon"]));
  }
});
export {
  ke as default
};