@silver-formily/element-plus 3.0.2 → 3.0.3

package/esm/form-item/style.css

@@ -0,0 +1,263 @@
+.formily-element-plus-form-item--isolated {
+  display: flex;
+  --font-size: 14px;
+  --el-form-label-font-size: var(--font-size);
+}
+.formily-element-plus-form-item--isolated.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label::before, .formily-element-plus-form-item--isolated.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label::before {
+  color: var(--el-color-danger);
+  content: "*";
+  margin-right: 4px;
+}
+.formily-element-plus-form-item--isolated.is-required:not(.is-no-asterisk).asterisk-right > .el-form-item__label-wrap > .el-form-item__label::after, .formily-element-plus-form-item--isolated.is-required:not(.is-no-asterisk).asterisk-right > .el-form-item__label::after {
+  color: var(--el-color-danger);
+  content: "*";
+  margin-left: 4px;
+}
+
+.formily-element-plus-form-item .el-form-item__content {
+  display: block;
+}
+.formily-element-plus-form-item.el-form-item--label-top .el-form-item__label {
+  display: inline-flex;
+  align-items: center;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-0 {
+  display: none;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-1 {
+  flex: 0 0 4.1666666667%;
+  max-width: 4.1666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-2 {
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-3 {
+  flex: 0 0 12.5%;
+  max-width: 12.5%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-4 {
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-5 {
+  flex: 0 0 20.8333333333%;
+  max-width: 20.8333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-6 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-7 {
+  flex: 0 0 29.1666666667%;
+  max-width: 29.1666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-8 {
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-9 {
+  flex: 0 0 37.5%;
+  max-width: 37.5%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-10 {
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-11 {
+  flex: 0 0 45.8333333333%;
+  max-width: 45.8333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-12 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-13 {
+  flex: 0 0 54.1666666667%;
+  max-width: 54.1666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-14 {
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-15 {
+  flex: 0 0 62.5%;
+  max-width: 62.5%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-16 {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-17 {
+  flex: 0 0 70.8333333333%;
+  max-width: 70.8333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-18 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-19 {
+  flex: 0 0 79.1666666667%;
+  max-width: 79.1666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-20 {
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-21 {
+  flex: 0 0 87.5%;
+  max-width: 87.5%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-22 {
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-23 {
+  flex: 0 0 95.8333333333%;
+  max-width: 95.8333333333%;
+}
+.formily-element-plus-form-item .formily-element-plus-form-item-col-24 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.formily-element-plus-form-item-label__wrapper {
+  display: flex;
+  overflow: hidden;
+}
+
+.is-warp .formily-element-plus-form-item-label-content > span {
+  overflow: visible;
+  white-space: wrap;
+}
+.is-warp .el-form-item__content {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.is-warp .el-form-item__label {
+  height: auto;
+}
+
+.formily-element-plus-form-item-label-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+.formily-element-plus-form-item-label-content > span {
+  display: inline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.formily-element-plus-form-item-label-content.is-tooltip {
+  border-bottom: 1px dashed;
+  border-color: var(--el-border-color);
+}
+
+.formily-element-plus-form-item-label-tooltip {
+  margin-left: 4px;
+  color: var(--el-text-color-secondary);
+  display: flex;
+  align-items: center;
+  height: 32px;
+  cursor: pointer;
+}
+
+.formily-element-plus-form-item-colon {
+  display: flex;
+  margin-left: 2px;
+  line-height: 2.3;
+}
+
+.formily-element-plus-form-item-content__wrapper {
+  display: flex;
+  flex: 1;
+}
+.formily-element-plus-form-item-content__wrapper .is-fullness > div {
+  width: 100%;
+}
+
+.formily-element-plus-form-item-addon-before {
+  margin-right: 8px;
+  font-size: var(--el-font-size-base);
+}
+
+.formily-element-plus-form-item-addon-after {
+  margin-left: 8px;
+}
+
+.formily-element-plus-form-item-addon-before,
+.formily-element-plus-form-item-addon-after {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  flex-shrink: 0;
+  font-size: var(--el-font-size-base);
+  color: var(--el-text-color-regular);
+}
+
+.el-form-item__content.is-addon-after {
+  flex: unset;
+}
+
+.formily-element-plus-form-item-feedback {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 2px;
+}
+.formily-element-plus-form-item-feedback.is-error {
+  color: var(--el-color-danger);
+}
+.formily-element-plus-form-item-feedback.is-success {
+  color: var(--el-color-success);
+}
+.formily-element-plus-form-item-feedback.is-warning {
+  color: var(--el-color-warning);
+}
+.formily-element-plus-form-item-feedback.is-loose {
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+.formily-element-plus-form-item-feedback.is-tooltip {
+  font-size: var(--el-font-size-base);
+  display: inline-flex;
+}
+.formily-element-plus-form-item-feedback.is-tooltip i {
+  margin-right: 4px;
+}
+
+.formily-element-plus-form-item-extra {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 2px;
+}
+
+.formily-element-plus-form-item {
+  margin-bottom: 6px;
+}
+.formily-element-plus-form-item.is-loose {
+  margin-bottom: 18px;
+}
+
+.el-form-item.is-warning .el-input__wrapper,
+.el-form-item.is-warning .el-input__wrapper:hover,
+.el-form-item.is-warning .el-input__wrapper:focus,
+.el-form-item.is-warning .el-input__wrapper.is-focus,
+.el-form-item.is-warning .el-textarea__inner,
+.el-form-item.is-warning .el-textarea__inner:hover,
+.el-form-item.is-warning .el-textarea__inner:focus,
+.el-form-item.is-warning .el-textarea__inner.is-focus,
+.el-form-item.is-warning .el-select__wrapper,
+.el-form-item.is-warning .el-select__wrapper:hover,
+.el-form-item.is-warning .el-select__wrapper:focus,
+.el-form-item.is-warning .el-select__wrapper.is-focus,
+.el-form-item.is-warning .el-input-tag__wrapper,
+.el-form-item.is-warning .el-input-tag__wrapper:hover,
+.el-form-item.is-warning .el-input-tag__wrapper:focus,
+.el-form-item.is-warning .el-input-tag__wrapper.is-focus {
+  box-shadow: 0 0 0 1px var(--el-color-warning) inset;
+}

package/esm/form-item/types.d.ts

@@ -1,30 +1,35 @@
-import { VNode } from 'vue';
-export type FormItemContent = string | VNode;
-export interface IFormItemProps {
-    /**
-     * Internal: override Element Plus root class for isolated scenes (e.g. QueryFormItem).
-     */
-    internalFormItemClass?: string;
-    label?: FormItemContent;
-    for?: string;
-    tooltip?: FormItemContent;
-    addonBefore?: FormItemContent;
-    addonAfter?: FormItemContent;
-    extra?: FormItemContent;
-    feedbackText?: FormItemContent;
-    feedbackStatus?: 'error' | 'warning' | 'success' | 'pending';
-    asterisk?: boolean;
-    colon?: boolean;
-    labelAlign?: 'right' | 'left';
-    wrapperAlign?: 'right' | 'left';
-    labelWrap?: boolean;
-    labelWidth?: number;
-    wrapperWidth?: number;
-    labelCol?: number;
-    wrapperCol?: number;
-    fullness?: boolean;
-    size?: 'small' | 'default' | 'large';
-    layout?: 'vertical' | 'horizontal' | 'inline' | ('vertical' | 'horizontal' | 'inline')[];
-    feedbackLayout?: 'loose' | 'terse' | 'popover';
-    tooltipLayout?: 'icon' | 'text';
+import { VNode } from "vue";
+
+//#region src/form-item/types.d.ts
+type FormItemContent = string | VNode;
+interface IFormItemProps {
+  /**
+   * Internal: override Element Plus root class for isolated scenes (e.g. QueryFormItem).
+   */
+  internalFormItemClass?: string;
+  label?: FormItemContent;
+  for?: string;
+  tooltip?: FormItemContent;
+  addonBefore?: FormItemContent;
+  addonAfter?: FormItemContent;
+  extra?: FormItemContent;
+  feedbackText?: FormItemContent;
+  feedbackStatus?: 'error' | 'warning' | 'success' | 'pending';
+  asterisk?: boolean;
+  colon?: boolean;
+  labelAlign?: 'right' | 'left';
+  wrapperAlign?: 'right' | 'left';
+  labelWrap?: boolean;
+  labelWidth?: number;
+  wrapperWidth?: number;
+  labelCol?: number;
+  wrapperCol?: number;
+  fullness?: boolean;
+  size?: 'small' | 'default' | 'large';
+  layout?: 'vertical' | 'horizontal' | 'inline' | ('vertical' | 'horizontal' | 'inline')[];
+  feedbackLayout?: 'loose' | 'terse' | 'popover';
+  tooltipLayout?: 'icon' | 'text';
 }
+//#endregion
+export { IFormItemProps };
+//# sourceMappingURL=types.d.ts.map

package/esm/form-item/utils.mjs

@@ -1,17 +1,17 @@
-import { isArr as r } from "@formily/shared";
-function a(s) {
-  const e = {
-    errors: s.selfErrors.join(", "),
-    warnings: s.selfWarnings.join(", "),
-    successes: s.selfSuccesses.join(", ")
-  };
-  return e.errors || e.warnings || e.successes;
+import { isArr } from "@formily/shared";
+//#region src/form-item/utils.ts
+function getFeedbackMessage(field) {
+	const messages = {
+		errors: field.selfErrors.join(", "),
+		warnings: field.selfWarnings.join(", "),
+		successes: field.selfSuccesses.join(", ")
+	};
+	return messages.errors || messages.warnings || messages.successes;
 }
-function n(s) {
-  return r(s.decorator) ? s.decorator[1]?.feedbackStatus ?? s.validateStatus : s.validateStatus;
+function determineFeedbackStatus(field) {
+	return isArr(field.decorator) ? field.decorator[1]?.feedbackStatus ?? field.validateStatus : field.validateStatus;
 }
-export {
-  n as determineFeedbackStatus,
-  a as getFeedbackMessage
-};
-//# sourceMappingURL=utils.mjs.map
+//#endregion
+export { determineFeedbackStatus, getFeedbackMessage };
+
+//# sourceMappingURL=utils.mjs.map

package/esm/form-item/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../src/form-item/utils.ts"],"sourcesContent":["import type { Field } from '@formily/core'\nimport { isArr } from '@formily/shared'\n\nexport function getFeedbackMessage(field: Field) {\n  const messages = {\n    errors: field.selfErrors.join(', '),\n    warnings: field.selfWarnings.join(', '),\n    successes: field.selfSuccesses.join(', '),\n  }\n\n  return messages.errors || messages.warnings || messages.successes\n}\n\nexport function determineFeedbackStatus(field: Field) {\n  return isArr(field.decorator)\n    ? (field.decorator[1]?.feedbackStatus ?? field.validateStatus)\n    : field.validateStatus\n}\n"],"names":["getFeedbackMessage","field","messages","determineFeedbackStatus","isArr"],"mappings":";AAGO,SAASA,EAAmBC,GAAc;AAC/C,QAAMC,IAAW;AAAA,IACf,QAAQD,EAAM,WAAW,KAAK,IAAI;AAAA,IAClC,UAAUA,EAAM,aAAa,KAAK,IAAI;AAAA,IACtC,WAAWA,EAAM,cAAc,KAAK,IAAI;AAAA,EAAA;AAG1C,SAAOC,EAAS,UAAUA,EAAS,YAAYA,EAAS;AAC1D;AAEO,SAASC,EAAwBF,GAAc;AACpD,SAAOG,EAAMH,EAAM,SAAS,IACvBA,EAAM,UAAU,CAAC,GAAG,kBAAkBA,EAAM,iBAC7CA,EAAM;AACZ;"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/form-item/utils.ts"],"sourcesContent":["import type { Field } from '@formily/core'\nimport { isArr } from '@formily/shared'\n\nexport function getFeedbackMessage(field: Field) {\n  const messages = {\n    errors: field.selfErrors.join(', '),\n    warnings: field.selfWarnings.join(', '),\n    successes: field.selfSuccesses.join(', '),\n  }\n\n  return messages.errors || messages.warnings || messages.successes\n}\n\nexport function determineFeedbackStatus(field: Field) {\n  return isArr(field.decorator)\n    ? (field.decorator[1]?.feedbackStatus ?? field.validateStatus)\n    : field.validateStatus\n}\n"],"mappings":";;AAGA,SAAgB,mBAAmB,OAAc;CAC/C,MAAM,WAAW;EACf,QAAQ,MAAM,WAAW,KAAK,KAAK;EACnC,UAAU,MAAM,aAAa,KAAK,KAAK;EACvC,WAAW,MAAM,cAAc,KAAK,KAAK;EAC1C;AAED,QAAO,SAAS,UAAU,SAAS,YAAY,SAAS;;AAG1D,SAAgB,wBAAwB,OAAc;AACpD,QAAO,MAAM,MAAM,UAAU,GACxB,MAAM,UAAU,IAAI,kBAAkB,MAAM,iBAC7C,MAAM"}

package/esm/form-layout/form-layout.mjs

@@ -1,84 +1,104 @@
-import { defineComponent as A, ref as l, computed as d, provide as e, watch as x, reactive as B, toRef as t, openBlock as P, createBlock as g, resolveDynamicComponent as I, mergeProps as b, unref as F, withModifiers as R, withCtx as _, renderSlot as q } from "vue";
-import { isValid as z, isEmpty as D } from "@formily/shared";
-import { useThrottleFn as T } from "@vueuse/core";
-import { useId as M, formContextKey as S } from "element-plus";
-import { stylePrefix as W } from "../__builtins__/configs/index.mjs";
-import "@silver-formily/reactive-vue";
-import "@formily/core";
-import "@silver-formily/vue";
-import { useCleanAttrs as $ } from "../__builtins__/shared/utils.mjs";
-import { formLayoutIdContext as H, useFormDeepLayout as V, useResponsiveFormLayout as E, filterValidFormLayoutProps as r, formLayoutDeepContext as K, formLayoutShallowContext as j } from "./utils.mjs";
-const eo = /* @__PURE__ */ A({
-  name: "FFormLayout",
-  inheritAttrs: !1,
-  __name: "form-layout",
-  props: {
-    tag: { default: "form" },
-    colon: { type: Boolean, default: void 0 },
-    labelAlign: {},
-    wrapperAlign: {},
-    labelWrap: { type: Boolean, default: void 0 },
-    labelWidth: {},
-    wrapperWidth: {},
-    labelCol: {},
-    wrapperCol: {},
-    fullness: { type: Boolean, default: void 0 },
-    size: { default: "default" },
-    layout: { default: "horizontal" },
-    feedbackLayout: {},
-    tooltipLayout: {},
-    breakpoints: {},
-    shallow: { type: Boolean, default: !0 },
-    hideRequiredAsterisk: { type: Boolean },
-    statusIcon: { type: Boolean, default: !0 },
-    requireAsteriskPosition: {}
-  },
-  setup(c) {
-    const o = c, y = `${W}-form`, { props: s } = $(), n = l(), u = o.tag === "form", v = M(), p = d(() => s.value.id ?? `formily-${v.value}`), L = d(() => u ? p.value : s.value.id);
-    u && e(H, p);
-    const h = V(), { props: a } = E(o, n), C = l({
-      ...h.value,
-      ...o.shallow ? {
-        size: o.size,
-        ...z(o.colon) && { colon: o.colon }
-      } : r(o)
-    });
-    e(K, C);
-    const f = l(o.shallow ? r(o) : {});
-    e(j, f);
-    const k = T(() => {
-      if (!D(a.value)) {
-        const i = r(a.value);
-        f.value = r({ ...o, ...i });
-      }
-    }, 200, !0);
-    x(() => [o, a], k, {
-      deep: !0,
-      immediate: !0
-    });
-    const w = B({
-      size: t(o, "size"),
-      statusIcon: t(o, "statusIcon"),
-      hideRequiredAsterisk: t(o, "hideRequiredAsterisk"),
-      requireAsteriskPosition: t(o, "requireAsteriskPosition")
-    });
-    return e(S, w), (i, m) => (P(), g(I(o.tag), b({
-      id: L.value,
-      ref_key: "rootHTMLRef",
-      ref: n,
-      class: y
-    }, F(s), {
-      onSubmit: m[0] || (m[0] = R(() => {
-      }, ["prevent", "stop"]))
-    }), {
-      default: _(() => [
-        q(i.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["id"]));
-  }
+import { useCleanAttrs } from "../__builtins__/shared/utils.mjs";
+import { stylePrefix } from "../__builtins__/configs/index.mjs";
+import { filterValidFormLayoutProps, formLayoutDeepContext, formLayoutIdContext, formLayoutShallowContext, useFormDeepLayout, useResponsiveFormLayout } from "./utils.mjs";
+import { formContextKey, useId } from "element-plus";
+import { useThrottleFn } from "@vueuse/core";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toRef, unref, watch, withCtx, withModifiers } from "vue";
+import { isEmpty, isValid } from "@formily/shared";
+//#region src/form-layout/form-layout.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "FFormLayout",
+	inheritAttrs: false,
+	__name: "form-layout",
+	props: {
+		tag: { default: "form" },
+		colon: {
+			type: Boolean,
+			default: void 0
+		},
+		labelAlign: {},
+		wrapperAlign: {},
+		labelWrap: {
+			type: Boolean,
+			default: void 0
+		},
+		labelWidth: {},
+		wrapperWidth: {},
+		labelCol: {},
+		wrapperCol: {},
+		fullness: {
+			type: Boolean,
+			default: void 0
+		},
+		size: { default: "default" },
+		layout: { default: "horizontal" },
+		feedbackLayout: {},
+		tooltipLayout: {},
+		breakpoints: {},
+		shallow: {
+			type: Boolean,
+			default: true
+		},
+		hideRequiredAsterisk: { type: Boolean },
+		statusIcon: {
+			type: Boolean,
+			default: true
+		},
+		requireAsteriskPosition: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const formPrefixCls = `${stylePrefix}-form`;
+		const { props: attrs } = useCleanAttrs();
+		const rootHTMLRef = ref();
+		const isFormTag = props.tag === "form";
+		const formLayoutBaseId = useId();
+		const formLayoutId = computed(() => attrs.value.id ?? `formily-${formLayoutBaseId.value}`);
+		const formLayoutDomId = computed(() => isFormTag ? formLayoutId.value : attrs.value.id);
+		if (isFormTag) provide(formLayoutIdContext, formLayoutId);
+		const formLayoutDeepConfig = useFormDeepLayout();
+		const { props: responsiveProps } = useResponsiveFormLayout(props, rootHTMLRef);
+		provide(formLayoutDeepContext, ref({
+			...formLayoutDeepConfig.value,
+			...props.shallow ? {
+				size: props.size,
+				...isValid(props.colon) && { colon: props.colon }
+			} : filterValidFormLayoutProps(props)
+		}));
+		const shallowLayout = ref(props.shallow ? filterValidFormLayoutProps(props) : {});
+		provide(formLayoutShallowContext, shallowLayout);
+		watch(() => [props, responsiveProps], useThrottleFn(() => {
+			if (!isEmpty(responsiveProps.value)) {
+				const _responsiveProps = filterValidFormLayoutProps(responsiveProps.value);
+				shallowLayout.value = filterValidFormLayoutProps({
+					...props,
+					..._responsiveProps
+				});
+			}
+		}, 200, true), {
+			deep: true,
+			immediate: true
+		});
+		provide(formContextKey, reactive({
+			size: toRef(props, "size"),
+			statusIcon: toRef(props, "statusIcon"),
+			hideRequiredAsterisk: toRef(props, "hideRequiredAsterisk"),
+			requireAsteriskPosition: toRef(props, "requireAsteriskPosition")
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(props.tag), mergeProps({
+				id: formLayoutDomId.value,
+				ref_key: "rootHTMLRef",
+				ref: rootHTMLRef,
+				class: formPrefixCls
+			}, unref(attrs), { onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent", "stop"])) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["id"]);
+		};
+	}
 });
-export {
-  eo as _
-};
-//# sourceMappingURL=form-layout.mjs.map
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=form-layout.mjs.map

package/esm/form-layout/form-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.mjs","sources":["../../src/form-layout/form-layout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { FormContext } from 'element-plus'\nimport type { IFormLayoutProps } from './types'\nimport { isEmpty, isValid } from '@formily/shared'\nimport { useThrottleFn } from '@vueuse/core'\nimport { formContextKey, useId } from 'element-plus'\nimport { computed, provide, reactive, ref, toRef, watch } from 'vue'\nimport { stylePrefix, useCleanAttrs } from '../__builtins__'\nimport { filterValidFormLayoutProps, formLayoutDeepContext, formLayoutIdContext, formLayoutShallowContext, useFormDeepLayout, useResponsiveFormLayout } from './utils'\n\ndefineOptions({\n  name: 'FFormLayout',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<IFormLayoutProps>(), {\n  tag: 'form',\n  colon: undefined,\n  labelWrap: undefined,\n  fullness: undefined,\n  size: 'default',\n  layout: 'horizontal',\n  shallow: true,\n  statusIcon: true,\n  asterisk: undefined,\n})\nconst formPrefixCls = `${stylePrefix}-form`\nconst { props: attrs } = useCleanAttrs()\nconst rootHTMLRef = ref<HTMLElement>()\nconst isFormTag = props.tag === 'form'\nconst formLayoutBaseId = useId()\nconst formLayoutId = computed(() => attrs.value.id ?? `formily-${formLayoutBaseId.value}`)\nconst formLayoutDomId = computed(() => (isFormTag ? formLayoutId.value : attrs.value.id))\nif (isFormTag) {\n  provide(formLayoutIdContext, formLayoutId)\n}\n\nconst formLayoutDeepConfig = useFormDeepLayout()\nconst { props: responsiveProps } = useResponsiveFormLayout(props, rootHTMLRef)\n\nconst deepLayout = ref({\n  ...formLayoutDeepConfig.value,\n  ...(props.shallow\n    ? {\n        size: props.size,\n        ...(isValid(props.colon) && { colon: props.colon }),\n      }\n    : filterValidFormLayoutProps(props)),\n})\nprovide(formLayoutDeepContext, deepLayout)\n\nconst shallowLayout = ref(props.shallow ? filterValidFormLayoutProps(props) : {})\nprovide(formLayoutShallowContext, shallowLayout)\n\nconst updateLayout = useThrottleFn(() => {\n  if (!isEmpty(responsiveProps.value)) {\n    const _responsiveProps = filterValidFormLayoutProps(responsiveProps.value)\n    shallowLayout.value = filterValidFormLayoutProps({ ...props, ..._responsiveProps })\n  }\n}, 200, true)\n\nwatch(() => [props, responsiveProps], updateLayout, {\n  deep: true,\n  immediate: true,\n})\n\nconst formContext = reactive({\n  size: toRef(props, 'size'),\n  statusIcon: toRef(props, 'statusIcon'),\n  hideRequiredAsterisk: toRef(props, 'hideRequiredAsterisk'),\n  requireAsteriskPosition: toRef(props, 'requireAsteriskPosition'),\n})\nprovide(formContextKey, formContext as FormContext)\n</script>\n\n<template>\n  <component\n    :is=\"props.tag\"\n    :id=\"formLayoutDomId\"\n    ref=\"rootHTMLRef\"\n    :class=\"formPrefixCls\"\n    v-bind=\"attrs\"\n    @submit.prevent.stop\n  >\n    <slot />\n  </component>\n</template>\n"],"names":["props","__props","formPrefixCls","stylePrefix","attrs","useCleanAttrs","rootHTMLRef","ref","isFormTag","formLayoutBaseId","useId","formLayoutId","computed","formLayoutDomId","provide","formLayoutIdContext","formLayoutDeepConfig","useFormDeepLayout","responsiveProps","useResponsiveFormLayout","deepLayout","isValid","filterValidFormLayoutProps","formLayoutDeepContext","shallowLayout","formLayoutShallowContext","updateLayout","useThrottleFn","isEmpty","_responsiveProps","watch","formContext","reactive","toRef","formContextKey","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAMA,IAAQC,GAWRC,IAAgB,GAAGC,CAAW,SAC9B,EAAE,OAAOC,EAAA,IAAUC,EAAA,GACnBC,IAAcC,EAAA,GACdC,IAAYR,EAAM,QAAQ,QAC1BS,IAAmBC,EAAA,GACnBC,IAAeC,EAAS,MAAMR,EAAM,MAAM,MAAM,WAAWK,EAAiB,KAAK,EAAE,GACnFI,IAAkBD,EAAS,MAAOJ,IAAYG,EAAa,QAAQP,EAAM,MAAM,EAAG;AACxF,IAAII,KACFM,EAAQC,GAAqBJ,CAAY;AAG3C,UAAMK,IAAuBC,EAAA,GACvB,EAAE,OAAOC,EAAA,IAAoBC,EAAwBnB,GAAOM,CAAW,GAEvEc,IAAab,EAAI;AAAA,MACrB,GAAGS,EAAqB;AAAA,MACxB,GAAIhB,EAAM,UACN;AAAA,QACE,MAAMA,EAAM;AAAA,QACZ,GAAIqB,EAAQrB,EAAM,KAAK,KAAK,EAAE,OAAOA,EAAM,MAAA;AAAA,MAAM,IAEnDsB,EAA2BtB,CAAK;AAAA,IAAA,CACrC;AACD,IAAAc,EAAQS,GAAuBH,CAAU;AAEzC,UAAMI,IAAgBjB,EAAIP,EAAM,UAAUsB,EAA2BtB,CAAK,IAAI,EAAE;AAChF,IAAAc,EAAQW,GAA0BD,CAAa;AAE/C,UAAME,IAAeC,EAAc,MAAM;AACvC,UAAI,CAACC,EAAQV,EAAgB,KAAK,GAAG;AACnC,cAAMW,IAAmBP,EAA2BJ,EAAgB,KAAK;AACzE,QAAAM,EAAc,QAAQF,EAA2B,EAAE,GAAGtB,GAAO,GAAG6B,GAAkB;AAAA,MACpF;AAAA,IACF,GAAG,KAAK,EAAI;AAEZ,IAAAC,EAAM,MAAM,CAAC9B,GAAOkB,CAAe,GAAGQ,GAAc;AAAA,MAClD,MAAM;AAAA,MACN,WAAW;AAAA,IAAA,CACZ;AAED,UAAMK,IAAcC,EAAS;AAAA,MAC3B,MAAMC,EAAMjC,GAAO,MAAM;AAAA,MACzB,YAAYiC,EAAMjC,GAAO,YAAY;AAAA,MACrC,sBAAsBiC,EAAMjC,GAAO,sBAAsB;AAAA,MACzD,yBAAyBiC,EAAMjC,GAAO,yBAAyB;AAAA,IAAA,CAChE;AACD,WAAAc,EAAQoB,GAAgBH,CAA0B,cAIhDI,KAAAC,EASYC,EARLrC,EAAM,GAAG,GADhBsC,EASY;AAAA,MAPT,IAAIzB,EAAA;AAAA,eACD;AAAA,MAAJ,KAAIP;AAAA,MACH,OAAOJ;AAAA,IAAA,GACAqC,EAAAnC,CAAA,GAAK;AAAA,MACZ,4BAAD,MAAA;AAAA,MAAA,GAAoB,CAAA,WAAA,MAAA,CAAA;AAAA,IAAA;iBAEpB,MAAQ;AAAA,QAARoC,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}
+{"version":3,"file":"form-layout.mjs","names":[],"sources":["../../src/form-layout/form-layout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { FormContext } from 'element-plus'\nimport type { IFormLayoutProps } from './types'\nimport { isEmpty, isValid } from '@formily/shared'\nimport { useThrottleFn } from '@vueuse/core'\nimport { formContextKey, useId } from 'element-plus'\nimport { computed, provide, reactive, ref, toRef, watch } from 'vue'\nimport { stylePrefix, useCleanAttrs } from '../__builtins__'\nimport { filterValidFormLayoutProps, formLayoutDeepContext, formLayoutIdContext, formLayoutShallowContext, useFormDeepLayout, useResponsiveFormLayout } from './utils'\n\ndefineOptions({\n  name: 'FFormLayout',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<IFormLayoutProps>(), {\n  tag: 'form',\n  colon: undefined,\n  labelWrap: undefined,\n  fullness: undefined,\n  size: 'default',\n  layout: 'horizontal',\n  shallow: true,\n  statusIcon: true,\n  asterisk: undefined,\n})\nconst formPrefixCls = `${stylePrefix}-form`\nconst { props: attrs } = useCleanAttrs()\nconst rootHTMLRef = ref<HTMLElement>()\nconst isFormTag = props.tag === 'form'\nconst formLayoutBaseId = useId()\nconst formLayoutId = computed(() => attrs.value.id ?? `formily-${formLayoutBaseId.value}`)\nconst formLayoutDomId = computed(() => (isFormTag ? formLayoutId.value : attrs.value.id))\nif (isFormTag) {\n  provide(formLayoutIdContext, formLayoutId)\n}\n\nconst formLayoutDeepConfig = useFormDeepLayout()\nconst { props: responsiveProps } = useResponsiveFormLayout(props, rootHTMLRef)\n\nconst deepLayout = ref({\n  ...formLayoutDeepConfig.value,\n  ...(props.shallow\n    ? {\n        size: props.size,\n        ...(isValid(props.colon) && { colon: props.colon }),\n      }\n    : filterValidFormLayoutProps(props)),\n})\nprovide(formLayoutDeepContext, deepLayout)\n\nconst shallowLayout = ref(props.shallow ? filterValidFormLayoutProps(props) : {})\nprovide(formLayoutShallowContext, shallowLayout)\n\nconst updateLayout = useThrottleFn(() => {\n  if (!isEmpty(responsiveProps.value)) {\n    const _responsiveProps = filterValidFormLayoutProps(responsiveProps.value)\n    shallowLayout.value = filterValidFormLayoutProps({ ...props, ..._responsiveProps })\n  }\n}, 200, true)\n\nwatch(() => [props, responsiveProps], updateLayout, {\n  deep: true,\n  immediate: true,\n})\n\nconst formContext = reactive({\n  size: toRef(props, 'size'),\n  statusIcon: toRef(props, 'statusIcon'),\n  hideRequiredAsterisk: toRef(props, 'hideRequiredAsterisk'),\n  requireAsteriskPosition: toRef(props, 'requireAsteriskPosition'),\n})\nprovide(formContextKey, formContext as FormContext)\n</script>\n\n<template>\n  <component\n    :is=\"props.tag\"\n    :id=\"formLayoutDomId\"\n    ref=\"rootHTMLRef\"\n    :class=\"formPrefixCls\"\n    v-bind=\"attrs\"\n    @submit.prevent.stop\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAWd,MAAM,gBAAgB,GAAG,YAAY;EACrC,MAAM,EAAE,OAAO,UAAU,eAAc;EACvC,MAAM,cAAc,KAAiB;EACrC,MAAM,YAAY,MAAM,QAAQ;EAChC,MAAM,mBAAmB,OAAM;EAC/B,MAAM,eAAe,eAAe,MAAM,MAAM,MAAM,WAAW,iBAAiB,QAAO;EACzF,MAAM,kBAAkB,eAAgB,YAAY,aAAa,QAAQ,MAAM,MAAM,GAAG;AACxF,MAAI,UACF,SAAQ,qBAAqB,aAAY;EAG3C,MAAM,uBAAuB,mBAAkB;EAC/C,MAAM,EAAE,OAAO,oBAAoB,wBAAwB,OAAO,YAAW;AAW7E,UAAQ,uBATW,IAAI;GACrB,GAAG,qBAAqB;GACxB,GAAI,MAAM,UACN;IACE,MAAM,MAAM;IACZ,GAAI,QAAQ,MAAM,MAAM,IAAI,EAAE,OAAO,MAAM,OAAO;IACpD,GACA,2BAA2B,MAAM;GACtC,CAAA,CACwC;EAEzC,MAAM,gBAAgB,IAAI,MAAM,UAAU,2BAA2B,MAAM,GAAG,EAAE,CAAA;AAChF,UAAQ,0BAA0B,cAAa;AAS/C,cAAY,CAAC,OAAO,gBAAgB,EAPf,oBAAoB;AACvC,OAAI,CAAC,QAAQ,gBAAgB,MAAM,EAAE;IACnC,MAAM,mBAAmB,2BAA2B,gBAAgB,MAAK;AACzE,kBAAc,QAAQ,2BAA2B;KAAE,GAAG;KAAO,GAAG;KAAkB,CAAA;;KAEnF,KAAK,KAAI,EAEwC;GAClD,MAAM;GACN,WAAW;GACZ,CAAA;AAQD,UAAQ,gBANY,SAAS;GAC3B,MAAM,MAAM,OAAO,OAAO;GAC1B,YAAY,MAAM,OAAO,aAAa;GACtC,sBAAsB,MAAM,OAAO,uBAAuB;GAC1D,yBAAyB,MAAM,OAAO,0BAA0B;GACjE,CAAA,CACiD;;uBAIhD,YASY,wBARL,MAAM,IAAG,EADhB,WASY;IAPT,IAAI,gBAAA;aACD;IAAJ,KAAI;IACH,OAAO;MACA,MAAA,MAAK,EAAA,EACZ,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,IAAoB,CAAA,WAAA,OAAA,CAAA,GAAA,CAAA,EAAA;2BAEZ,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/esm/form-layout/form-layout.vue.d.ts

@@ -0,0 +1,28 @@
+import { IFormLayoutProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/form-layout/form-layout.vue.d.ts
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<IFormLayoutProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<IFormLayoutProps> & Readonly<{}>, {
+  layout: "vertical" | "horizontal" | "inline" | ("vertical" | "horizontal" | "inline")[];
+  size: "small" | "default" | "large";
+  colon: boolean;
+  labelWrap: boolean;
+  fullness: boolean;
+  tag: string;
+  shallow: boolean;
+  statusIcon: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=form-layout.vue.d.ts.map

package/esm/form-layout/index.d.ts

@@ -1 +1 @@
-export { default, default as FormLayout } from './form-layout';
+import { _default } from "./form-layout.vue.js";