@silver-formily/element-plus 2.2.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/esm/__builtins__/configs/index.mjs.map +1 -1
- package/esm/__builtins__/index.mjs +18 -21
- package/esm/__builtins__/index.mjs.map +1 -1
- package/esm/__builtins__/shared/index.d.ts +0 -1
- package/esm/__builtins__/shared/index.mjs +18 -21
- package/esm/__builtins__/shared/index.mjs.map +1 -1
- package/esm/__builtins__/shared/loading.mjs +5 -5
- package/esm/__builtins__/shared/loading.mjs.map +1 -1
- package/esm/__builtins__/shared/simple-version-compare.mjs.map +1 -1
- package/esm/__builtins__/shared/transform-component.mjs.map +1 -1
- package/esm/__builtins__/shared/use-enter-submit.d.ts +9 -0
- package/esm/__builtins__/shared/use-enter-submit.mjs +25 -0
- package/esm/__builtins__/shared/use-enter-submit.mjs.map +1 -0
- package/esm/__builtins__/shared/utils.d.ts +1 -0
- package/esm/__builtins__/shared/utils.mjs +23 -17
- package/esm/__builtins__/shared/utils.mjs.map +1 -1
- package/esm/array-base/index.mjs +56 -52
- package/esm/array-base/index.mjs.map +1 -1
- package/esm/array-base/symbols.mjs.map +1 -1
- package/esm/array-base/utils.d.ts +0 -1
- package/esm/array-base/utils.mjs +45 -46
- package/esm/array-base/utils.mjs.map +1 -1
- package/esm/array-cards/index.mjs +36 -33
- package/esm/array-cards/index.mjs.map +1 -1
- package/esm/array-collapse/index.mjs +39 -37
- package/esm/array-collapse/index.mjs.map +1 -1
- package/esm/array-collapse/utils.mjs +9 -2
- package/esm/array-collapse/utils.mjs.map +1 -1
- package/esm/array-items/index.mjs +38 -34
- package/esm/array-items/index.mjs.map +1 -1
- package/esm/array-list-tabs/index.mjs +38 -36
- package/esm/array-list-tabs/index.mjs.map +1 -1
- package/esm/array-list-tabs/utils.mjs +12 -5
- package/esm/array-list-tabs/utils.mjs.map +1 -1
- package/esm/array-table/index.mjs +63 -60
- package/esm/array-table/index.mjs.map +1 -1
- package/esm/array-table/utils.mjs +18 -11
- package/esm/array-table/utils.mjs.map +1 -1
- package/esm/array-tabs/index.mjs +28 -25
- package/esm/array-tabs/index.mjs.map +1 -1
- package/esm/autocomplete/autocomplete.d.ts +1222 -0
- package/esm/autocomplete/index.d.ts +639 -0
- package/esm/autocomplete/index.mjs +116 -0
- package/esm/autocomplete/index.mjs.map +1 -0
- package/esm/cascader/index.mjs +22 -18
- package/esm/cascader/index.mjs.map +1 -1
- package/esm/checkbox/index.d.ts +42 -42
- package/esm/checkbox/index.mjs +20 -16
- package/esm/checkbox/index.mjs.map +1 -1
- package/esm/color-picker/index.d.ts +210 -0
- package/esm/color-picker/index.mjs +17 -0
- package/esm/color-picker/index.mjs.map +1 -0
- package/esm/color-picker-panel/index.d.ts +129 -0
- package/esm/color-picker-panel/index.mjs +25 -0
- package/esm/color-picker-panel/index.mjs.map +1 -0
- package/esm/date-picker/index.mjs +18 -37
- package/esm/date-picker/index.mjs.map +1 -1
- package/esm/date-picker/utils.d.ts +4 -0
- package/esm/date-picker/utils.mjs +27 -0
- package/esm/date-picker/utils.mjs.map +1 -0
- package/esm/date-picker-panel/index.d.ts +143 -0
- package/esm/date-picker-panel/index.mjs +30 -0
- package/esm/date-picker-panel/index.mjs.map +1 -0
- package/esm/editable/editable.d.ts +2 -0
- package/esm/editable/index.d.ts +1 -0
- package/esm/editable/index.mjs +71 -66
- package/esm/editable/index.mjs.map +1 -1
- package/esm/env.d.mjs +2 -0
- package/esm/env.d.mjs.map +1 -0
- package/esm/form/form.mjs +6 -6
- package/esm/form/form.mjs.map +1 -1
- package/esm/form-button-group/form-button-group.d.ts +10 -1
- package/esm/form-button-group/index.d.ts +18 -3
- package/esm/form-button-group/index.mjs +47 -28
- package/esm/form-button-group/index.mjs.map +1 -1
- package/esm/form-button-group/utils.mjs +9 -2
- package/esm/form-button-group/utils.mjs.map +1 -1
- package/esm/form-collapse/index.mjs +21 -18
- package/esm/form-collapse/index.mjs.map +1 -1
- package/esm/form-collapse/utils.mjs.map +1 -1
- package/esm/form-dialog/dialog-content.d.ts +789 -3
- package/esm/form-dialog/index.mjs +97 -86
- package/esm/form-dialog/index.mjs.map +1 -1
- package/esm/form-dialog/types.d.ts +1 -0
- package/esm/form-drawer/drawer-content.d.ts +919 -3
- package/esm/form-drawer/index.mjs +92 -82
- package/esm/form-drawer/index.mjs.map +1 -1
- package/esm/form-drawer/types.d.ts +1 -0
- package/esm/form-grid/hooks.mjs.map +1 -1
- package/esm/form-grid/index.mjs +26 -22
- package/esm/form-grid/index.mjs.map +1 -1
- package/esm/form-item/index.d.ts +1 -0
- package/esm/form-item/index.mjs +102 -99
- package/esm/form-item/index.mjs.map +1 -1
- package/esm/form-item/types.d.ts +4 -0
- package/esm/form-item/utils.mjs.map +1 -1
- package/esm/form-layout/form-layout.mjs +18 -14
- package/esm/form-layout/form-layout.mjs.map +1 -1
- package/esm/form-layout/utils.mjs +23 -23
- package/esm/form-layout/utils.mjs.map +1 -1
- package/esm/form-step/index.mjs +30 -27
- package/esm/form-step/index.mjs.map +1 -1
- package/esm/form-step/utils.mjs.map +1 -1
- package/esm/form-tab/hooks.mjs.map +1 -1
- package/esm/form-tab/index.mjs +24 -22
- package/esm/form-tab/index.mjs.map +1 -1
- package/esm/form-tab/utils.mjs.map +1 -1
- package/esm/index.d.ts +8 -0
- package/esm/index.mjs +90 -74
- package/esm/index.mjs.map +1 -1
- package/esm/input/index.mjs +30 -26
- package/esm/input/index.mjs.map +1 -1
- package/esm/input-number/index.d.ts +21 -21
- package/esm/input-number/index.mjs +11 -8
- package/esm/input-number/index.mjs.map +1 -1
- package/esm/input-tag/index.d.ts +32 -0
- package/esm/input-tag/index.mjs +50 -0
- package/esm/input-tag/index.mjs.map +1 -0
- package/esm/input-tag/input-tag.d.ts +32 -0
- package/esm/mention/index.d.ts +50 -0
- package/esm/mention/index.mjs +97 -0
- package/esm/mention/index.mjs.map +1 -0
- package/esm/mention/mention.d.ts +51 -0
- package/esm/pagination/components/jumper.mjs.map +1 -1
- package/esm/pagination/components/next.mjs.map +1 -1
- package/esm/pagination/components/pager.mjs.map +1 -1
- package/esm/pagination/components/prev.mjs.map +1 -1
- package/esm/pagination/components/total.mjs.map +1 -1
- package/esm/pagination/pagination.mjs.map +1 -1
- package/esm/password/index.mjs.map +1 -1
- package/esm/preview-text/color-picker.d.ts +5 -0
- package/esm/preview-text/index.d.ts +5 -0
- package/esm/preview-text/index.mjs +184 -145
- package/esm/preview-text/index.mjs.map +1 -1
- package/esm/preview-text/utils.mjs.map +1 -1
- package/esm/query-form/default-components.d.ts +5 -0
- package/esm/query-form/default-components.mjs +47 -0
- package/esm/query-form/default-components.mjs.map +1 -0
- package/esm/query-form/hooks.d.ts +25 -0
- package/esm/query-form/hooks.mjs +29 -0
- package/esm/query-form/hooks.mjs.map +1 -0
- package/esm/query-form/index.d.ts +117 -0
- package/esm/query-form/index.mjs +337 -0
- package/esm/query-form/index.mjs.map +1 -0
- package/esm/query-form/query-form-light.d.ts +27 -0
- package/esm/query-form/query-form.d.ts +52 -0
- package/esm/query-form/types.d.ts +44 -0
- package/esm/query-form/types.mjs +2 -0
- package/esm/query-form/types.mjs.map +1 -0
- package/esm/query-form-item/index.d.ts +151 -0
- package/esm/query-form-item/index.mjs +188 -0
- package/esm/query-form-item/index.mjs.map +1 -0
- package/esm/query-form-item/query-form-item.d.ts +96 -0
- package/esm/query-form-item/types.d.ts +46 -0
- package/esm/query-form-item/types.mjs +2 -0
- package/esm/query-form-item/types.mjs.map +1 -0
- package/esm/radio/index.d.ts +36 -36
- package/esm/radio/index.mjs +29 -25
- package/esm/radio/index.mjs.map +1 -1
- package/esm/rate/index.mjs +13 -10
- package/esm/rate/index.mjs.map +1 -1
- package/esm/reset/index.mjs.map +1 -1
- package/esm/segmented/index.mjs +16 -12
- package/esm/segmented/index.mjs.map +1 -1
- package/esm/select/index.mjs +26 -22
- package/esm/select/index.mjs.map +1 -1
- package/esm/select-table/index.mjs +36 -33
- package/esm/select-table/index.mjs.map +1 -1
- package/esm/shared/overlay-elements.d.ts +6 -0
- package/esm/shared/overlay-elements.mjs +19 -0
- package/esm/shared/overlay-elements.mjs.map +1 -0
- package/esm/slider/index.mjs +13 -10
- package/esm/slider/index.mjs.map +1 -1
- package/esm/styles/form-button-group/index.css +1 -1
- package/esm/styles/form-item/index.css +1 -1
- package/esm/styles/preview-text/index.css +1 -1
- package/esm/styles/query-form/index.css +1 -0
- package/esm/styles/query-form-item/index.css +1 -0
- package/esm/submit/index.mjs.map +1 -1
- package/esm/switch/index.d.ts +12 -12
- package/esm/switch/index.mjs.map +1 -1
- package/esm/time-picker/index.mjs +9 -6
- package/esm/time-picker/index.mjs.map +1 -1
- package/esm/time-select/index.mjs +9 -6
- package/esm/time-select/index.mjs.map +1 -1
- package/esm/transfer/index.mjs.map +1 -1
- package/esm/tree/index.mjs +33 -29
- package/esm/tree/index.mjs.map +1 -1
- package/esm/tree/utils.mjs.map +1 -1
- package/esm/tree-select/index.mjs +18 -14
- package/esm/tree-select/index.mjs.map +1 -1
- package/esm/upload/index.d.ts +1 -1
- package/esm/upload/index.mjs +10 -7
- package/esm/upload/index.mjs.map +1 -1
- package/esm/upload/upload.d.ts +2 -2
- package/esm/vendor/lodash.mjs +751 -663
- package/esm/vendor/lodash.mjs.map +1 -1
- package/esm/vendor/sizes.mjs.map +1 -1
- package/package.json +115 -113
- package/esm/__builtins__/shared/hooks.d.ts +0 -7
- package/esm/__builtins__/shared/hooks.mjs +0 -59
- package/esm/__builtins__/shared/hooks.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-layout.mjs","sources":["../../src/form-layout/form-layout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\
|
|
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;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { isArr as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { isArr as L, isValid as u } from "@formily/shared";
|
|
2
|
+
import { useResizeObserver as d } from "@vueuse/core";
|
|
3
|
+
import { inject as l, ref as i, computed as h } from "vue";
|
|
4
4
|
function A(t, o) {
|
|
5
5
|
for (const [r, e] of t.entries())
|
|
6
6
|
if (o <= e)
|
|
@@ -19,53 +19,53 @@ function a(t, o) {
|
|
|
19
19
|
function x(t, o) {
|
|
20
20
|
const { clientWidth: r } = t, {
|
|
21
21
|
breakpoints: e,
|
|
22
|
-
layout:
|
|
23
|
-
labelAlign:
|
|
24
|
-
wrapperAlign:
|
|
25
|
-
labelCol:
|
|
26
|
-
wrapperCol:
|
|
27
|
-
...
|
|
22
|
+
layout: c,
|
|
23
|
+
labelAlign: p,
|
|
24
|
+
wrapperAlign: f,
|
|
25
|
+
labelCol: m,
|
|
26
|
+
wrapperCol: y,
|
|
27
|
+
...b
|
|
28
28
|
} = o, n = A(
|
|
29
29
|
e,
|
|
30
30
|
r
|
|
31
31
|
);
|
|
32
32
|
return {
|
|
33
|
-
layout: a(
|
|
34
|
-
labelAlign: a(
|
|
35
|
-
wrapperAlign: a(
|
|
36
|
-
labelCol: a(
|
|
37
|
-
wrapperCol: a(
|
|
38
|
-
...
|
|
33
|
+
layout: a(c, n),
|
|
34
|
+
labelAlign: a(p, n),
|
|
35
|
+
wrapperAlign: a(f, n),
|
|
36
|
+
labelCol: a(m, n),
|
|
37
|
+
wrapperCol: a(y, n),
|
|
38
|
+
...b
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
41
|
function P(t, o) {
|
|
42
42
|
const { breakpoints: r } = t;
|
|
43
|
-
if (!
|
|
43
|
+
if (!L(r))
|
|
44
44
|
return {
|
|
45
45
|
props: i(t)
|
|
46
46
|
};
|
|
47
47
|
const e = i({});
|
|
48
|
-
return
|
|
48
|
+
return d(o, () => {
|
|
49
49
|
e.value = x(o.value, t);
|
|
50
50
|
}), {
|
|
51
51
|
props: e
|
|
52
52
|
};
|
|
53
53
|
}
|
|
54
|
-
const
|
|
54
|
+
const s = Symbol(
|
|
55
55
|
"formLayoutDeepContext"
|
|
56
56
|
), w = Symbol("formLayoutShallowContext"), k = Symbol("formLayoutIdContext");
|
|
57
57
|
function S() {
|
|
58
|
-
return l(
|
|
58
|
+
return l(s, i({}));
|
|
59
59
|
}
|
|
60
60
|
function O() {
|
|
61
|
-
const t = l(w, i({})), o = l(
|
|
62
|
-
return
|
|
61
|
+
const t = l(w, i({})), o = l(s, i({}));
|
|
62
|
+
return h(() => ({
|
|
63
63
|
...o.value,
|
|
64
64
|
...t.value
|
|
65
65
|
}));
|
|
66
66
|
}
|
|
67
67
|
function R() {
|
|
68
|
-
return l(k
|
|
68
|
+
return l(k);
|
|
69
69
|
}
|
|
70
70
|
const W = [
|
|
71
71
|
"colon",
|
|
@@ -98,7 +98,7 @@ export {
|
|
|
98
98
|
x as calculateProps,
|
|
99
99
|
a as factor,
|
|
100
100
|
_ as filterValidFormLayoutProps,
|
|
101
|
-
|
|
101
|
+
s as formLayoutDeepContext,
|
|
102
102
|
k as formLayoutIdContext,
|
|
103
103
|
w as formLayoutShallowContext,
|
|
104
104
|
S as useFormDeepLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","sources":["../../src/form-layout/utils.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue'\
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../src/form-layout/utils.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue'\nimport type { IFormLayoutProps } from './types'\nimport { isArr, isValid } from '@formily/shared'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, inject, ref } from 'vue'\n\nexport function calcBreakpointIndex(breakpoints: number[], width: number): number {\n for (const [i, breakpoint] of breakpoints.entries()) {\n if (width <= breakpoint) {\n return i\n }\n }\n return -1\n}\n\nexport function calcFactor<T>(value: T | readonly T[], breakpointIndex: number): T {\n if (!Array.isArray(value) || value.length === 0) {\n return value as T\n }\n const safeIndex = Math.max(-1, Math.min(breakpointIndex, value.length - 1))\n return value.at(safeIndex)\n}\n\nexport function factor<T>(value: T | T[], breakpointIndex: number): T {\n return isValid(value) ? calcFactor<T>(value, breakpointIndex) : value as T\n}\n\nexport function calculateProps(target: Element, props: IFormLayoutProps): IFormLayoutProps {\n const { clientWidth } = target\n const {\n breakpoints,\n layout,\n labelAlign,\n wrapperAlign,\n labelCol,\n wrapperCol,\n ...otherProps\n } = props\n const breakpointIndex = calcBreakpointIndex(\n breakpoints as number[],\n clientWidth,\n )\n\n return {\n layout: factor(layout, breakpointIndex),\n labelAlign: factor(labelAlign, breakpointIndex),\n wrapperAlign: factor(wrapperAlign, breakpointIndex),\n labelCol: factor(labelCol, breakpointIndex),\n wrapperCol: factor(wrapperCol, breakpointIndex),\n ...otherProps,\n }\n}\n\nexport function useResponsiveFormLayout(props: IFormLayoutProps, root: Ref<HTMLElement | null>) {\n const { breakpoints } = props\n if (!isArr(breakpoints)) {\n return {\n props: ref(props),\n }\n }\n\n const layoutProps = ref<IFormLayoutProps>({})\n\n useResizeObserver(root, () => {\n layoutProps.value = calculateProps(root.value, props)\n })\n\n return {\n props: layoutProps,\n }\n}\n\nexport const formLayoutDeepContext: InjectionKey<Ref<IFormLayoutProps>> = Symbol(\n 'formLayoutDeepContext',\n)\n\nexport const formLayoutShallowContext: InjectionKey<Ref<IFormLayoutProps>>\n = Symbol('formLayoutShallowContext')\n\nexport const formLayoutIdContext: InjectionKey<ComputedRef<string>>\n = Symbol('formLayoutIdContext')\n\nexport function useFormDeepLayout(): Ref<IFormLayoutProps> {\n return inject(formLayoutDeepContext, ref({}))\n}\n\nexport function useFormLayout(): Ref<IFormLayoutProps> {\n const shallowLayout = inject(formLayoutShallowContext, ref({}))\n const deepLayout = inject(formLayoutDeepContext, ref({}))\n\n const formLayout = computed(() => {\n return {\n ...deepLayout.value,\n ...shallowLayout.value,\n }\n })\n\n return formLayout\n}\n\nexport function useFormLayoutId(): ComputedRef<string> {\n return inject(formLayoutIdContext)\n}\n\nexport const FORM_LAYOUT_PROPS_KEYS: ReadonlyArray<keyof IFormLayoutProps> = [\n 'colon',\n 'labelAlign',\n 'wrapperAlign',\n 'labelWrap',\n 'labelWidth',\n 'wrapperWidth',\n 'labelCol',\n 'wrapperCol',\n 'fullness',\n 'size',\n 'layout',\n 'feedbackLayout',\n 'tooltipLayout',\n 'breakpoints',\n 'hideRequiredAsterisk',\n 'statusIcon',\n 'requireAsteriskPosition',\n] as const\n\nexport function filterValidFormLayoutProps(props: IFormLayoutProps): IFormLayoutProps {\n return Object.fromEntries(\n Object.entries(props)\n .filter(([_, value]) => isValid(value)),\n )\n}\n"],"names":["calcBreakpointIndex","breakpoints","width","i","breakpoint","calcFactor","value","breakpointIndex","safeIndex","factor","isValid","calculateProps","target","props","clientWidth","layout","labelAlign","wrapperAlign","labelCol","wrapperCol","otherProps","useResponsiveFormLayout","root","isArr","ref","layoutProps","useResizeObserver","formLayoutDeepContext","formLayoutShallowContext","formLayoutIdContext","useFormDeepLayout","inject","useFormLayout","shallowLayout","deepLayout","computed","useFormLayoutId","FORM_LAYOUT_PROPS_KEYS","filterValidFormLayoutProps","_"],"mappings":";;;AAMO,SAASA,EAAoBC,GAAuBC,GAAuB;AAChF,aAAW,CAACC,GAAGC,CAAU,KAAKH,EAAY;AACxC,QAAIC,KAASE;AACX,aAAOD;AAGX,SAAO;AACT;AAEO,SAASE,EAAcC,GAAyBC,GAA4B;AACjF,MAAI,CAAC,MAAM,QAAQD,CAAK,KAAKA,EAAM,WAAW;AAC5C,WAAOA;AAET,QAAME,IAAY,KAAK,IAAI,IAAI,KAAK,IAAID,GAAiBD,EAAM,SAAS,CAAC,CAAC;AAC1E,SAAOA,EAAM,GAAGE,CAAS;AAC3B;AAEO,SAASC,EAAUH,GAAgBC,GAA4B;AACpE,SAAOG,EAAQJ,CAAK,IAAID,EAAcC,GAAOC,CAAe,IAAID;AAClE;AAEO,SAASK,EAAeC,GAAiBC,GAA2C;AACzF,QAAM,EAAE,aAAAC,MAAgBF,GAClB;AAAA,IACJ,aAAAX;AAAA,IACA,QAAAc;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GACEN,IAAkBP;AAAA,IACtBC;AAAA,IACAa;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,QAAQL,EAAOM,GAAQR,CAAe;AAAA,IACtC,YAAYE,EAAOO,GAAYT,CAAe;AAAA,IAC9C,cAAcE,EAAOQ,GAAcV,CAAe;AAAA,IAClD,UAAUE,EAAOS,GAAUX,CAAe;AAAA,IAC1C,YAAYE,EAAOU,GAAYZ,CAAe;AAAA,IAC9C,GAAGa;AAAA,EAAA;AAEP;AAEO,SAASC,EAAwBR,GAAyBS,GAA+B;AAC9F,QAAM,EAAE,aAAArB,MAAgBY;AACxB,MAAI,CAACU,EAAMtB,CAAW;AACpB,WAAO;AAAA,MACL,OAAOuB,EAAIX,CAAK;AAAA,IAAA;AAIpB,QAAMY,IAAcD,EAAsB,EAAE;AAE5C,SAAAE,EAAkBJ,GAAM,MAAM;AAC5B,IAAAG,EAAY,QAAQd,EAAeW,EAAK,OAAOT,CAAK;AAAA,EACtD,CAAC,GAEM;AAAA,IACL,OAAOY;AAAA,EAAA;AAEX;AAEO,MAAME,IAA6D;AAAA,EACxE;AACF,GAEaC,IACT,OAAO,0BAA0B,GAExBC,IACT,OAAO,qBAAqB;AAEzB,SAASC,IAA2C;AACzD,SAAOC,EAAOJ,GAAuBH,EAAI,CAAA,CAAE,CAAC;AAC9C;AAEO,SAASQ,IAAuC;AACrD,QAAMC,IAAgBF,EAAOH,GAA0BJ,EAAI,CAAA,CAAE,CAAC,GACxDU,IAAaH,EAAOJ,GAAuBH,EAAI,CAAA,CAAE,CAAC;AASxD,SAPmBW,EAAS,OACnB;AAAA,IACL,GAAGD,EAAW;AAAA,IACd,GAAGD,EAAc;AAAA,EAAA,EAEpB;AAGH;AAEO,SAASG,IAAuC;AACrD,SAAOL,EAAOF,CAAmB;AACnC;AAEO,MAAMQ,IAAgE;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,SAASC,EAA2BzB,GAA2C;AACpF,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQA,CAAK,EACjB,OAAO,CAAC,CAAC0B,GAAGjC,CAAK,MAAMI,EAAQJ,CAAK,CAAC;AAAA,EAAA;AAE5C;"}
|
package/esm/form-step/index.mjs
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ElSteps as g, ElStep as P } from "element-plus";
|
|
2
|
+
import "@formily/reactive";
|
|
3
|
+
import "@vueuse/core";
|
|
4
|
+
import { defineComponent as $, renderSlot as B, computed as E, createElementBlock as o, openBlock as r, normalizeClass as N, createVNode as O, unref as t, mergeProps as h, withCtx as u, Fragment as c, renderList as x, createBlock as a, createSlots as V, resolveDynamicComponent as _, createTextVNode as v, toDisplayString as y, createCommentVNode as b } from "vue";
|
|
5
|
+
import "@formily/core";
|
|
6
|
+
import { useObserver as A } from "@silver-formily/reactive-vue";
|
|
7
|
+
import { useField as D, useFieldSchema as R, RecursionField as j } from "@silver-formily/vue";
|
|
8
|
+
import { composeExport as w } from "../__builtins__/shared/utils.mjs";
|
|
2
9
|
import { isObj as k } from "@formily/shared";
|
|
3
|
-
import { useObserver as V } from "@silver-formily/reactive-vue";
|
|
4
|
-
import { useField as b, useFieldSchema as A, RecursionField as D } from "@silver-formily/vue";
|
|
5
|
-
import { ElSteps as R, ElStep as j } from "element-plus";
|
|
6
|
-
import { createFormStep as C, parseSteps as w } from "./utils.mjs";
|
|
7
10
|
import { stylePrefix as z } from "../__builtins__/configs/index.mjs";
|
|
8
|
-
import {
|
|
11
|
+
import { createFormStep as C, parseSteps as L } from "./utils.mjs";
|
|
9
12
|
const T = $({
|
|
10
13
|
name: "FFormStepPane",
|
|
11
14
|
inheritAttrs: !1
|
|
12
15
|
}), q = (n, i) => {
|
|
13
|
-
const
|
|
14
|
-
for (const [
|
|
15
|
-
|
|
16
|
-
return
|
|
16
|
+
const m = n.__vccOpts || n;
|
|
17
|
+
for (const [p, s] of i)
|
|
18
|
+
m[p] = s;
|
|
19
|
+
return m;
|
|
17
20
|
};
|
|
18
|
-
function G(n, i,
|
|
19
|
-
return
|
|
21
|
+
function G(n, i, m, p, s, f) {
|
|
22
|
+
return B(n.$slots, "default");
|
|
20
23
|
}
|
|
21
24
|
const H = /* @__PURE__ */ q(T, [["render", G]]), I = /* @__PURE__ */ $({
|
|
22
25
|
name: "FFormStep",
|
|
@@ -28,23 +31,23 @@ const H = /* @__PURE__ */ q(T, [["render", G]]), I = /* @__PURE__ */ $({
|
|
|
28
31
|
},
|
|
29
32
|
setup(n) {
|
|
30
33
|
const i = n;
|
|
31
|
-
|
|
32
|
-
const
|
|
33
|
-
i.formStep.connect?.(f,
|
|
34
|
-
const F =
|
|
34
|
+
A();
|
|
35
|
+
const m = D().value, p = `${z}-form-step`, s = R(), f = L(s.value);
|
|
36
|
+
i.formStep.connect?.(f, m);
|
|
37
|
+
const F = E(() => i.active ?? i.formStep?.current ?? 0);
|
|
35
38
|
return (S, J) => (r(), o("div", {
|
|
36
|
-
class:
|
|
39
|
+
class: N(p)
|
|
37
40
|
}, [
|
|
38
|
-
|
|
41
|
+
O(t(g), h(S.$attrs, {
|
|
39
42
|
active: F.value,
|
|
40
43
|
style: [{ marginBottom: "10px" }]
|
|
41
44
|
}), {
|
|
42
45
|
default: u(() => [
|
|
43
|
-
(r(!0), o(c, null, x(t(f), ({ props: l, slots: e }, d) => (r(),
|
|
46
|
+
(r(!0), o(c, null, x(t(f), ({ props: l, slots: e }, d) => (r(), a(t(P), h({ key: d }, { ref_for: !0 }, l), V({ _: 2 }, [
|
|
44
47
|
e?.title ? {
|
|
45
48
|
name: "title",
|
|
46
49
|
fn: u(() => [
|
|
47
|
-
t(k)(e.title) ? (r(),
|
|
50
|
+
t(k)(e.title) ? (r(), a(_(e.title), { key: 0 })) : (r(), o(c, { key: 1 }, [
|
|
48
51
|
v(y(e.title), 1)
|
|
49
52
|
], 64))
|
|
50
53
|
]),
|
|
@@ -53,7 +56,7 @@ const H = /* @__PURE__ */ q(T, [["render", G]]), I = /* @__PURE__ */ $({
|
|
|
53
56
|
e?.icon ? {
|
|
54
57
|
name: "icon",
|
|
55
58
|
fn: u(() => [
|
|
56
|
-
t(k)(e.icon) ? (r(),
|
|
59
|
+
t(k)(e.icon) ? (r(), a(_(e.icon), { key: 0 })) : (r(), o(c, { key: 1 }, [
|
|
57
60
|
v(y(e.icon), 1)
|
|
58
61
|
], 64))
|
|
59
62
|
]),
|
|
@@ -62,7 +65,7 @@ const H = /* @__PURE__ */ q(T, [["render", G]]), I = /* @__PURE__ */ $({
|
|
|
62
65
|
e?.description ? {
|
|
63
66
|
name: "description",
|
|
64
67
|
fn: u(() => [
|
|
65
|
-
t(k)(e.description) ? (r(),
|
|
68
|
+
t(k)(e.description) ? (r(), a(_(e.description), { key: 0 })) : (r(), o(c, { key: 1 }, [
|
|
66
69
|
v(y(e.description), 1)
|
|
67
70
|
], 64))
|
|
68
71
|
]),
|
|
@@ -73,20 +76,20 @@ const H = /* @__PURE__ */ q(T, [["render", G]]), I = /* @__PURE__ */ $({
|
|
|
73
76
|
_: 1
|
|
74
77
|
}, 16, ["active"]),
|
|
75
78
|
(r(!0), o(c, null, x(t(f), ({ name: l, schema: e }, d) => (r(), o(c, { key: l }, [
|
|
76
|
-
d === F.value ? (r(),
|
|
79
|
+
d === F.value ? (r(), a(t(j), {
|
|
77
80
|
key: 0,
|
|
78
81
|
name: l,
|
|
79
82
|
schema: e
|
|
80
|
-
}, null, 8, ["name", "schema"])) :
|
|
83
|
+
}, null, 8, ["name", "schema"])) : b("", !0)
|
|
81
84
|
], 64))), 128))
|
|
82
85
|
]));
|
|
83
86
|
}
|
|
84
|
-
}),
|
|
87
|
+
}), oe = w(I, {
|
|
85
88
|
StepPane: H,
|
|
86
89
|
createFormStep: C
|
|
87
90
|
});
|
|
88
91
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
oe as FormStep,
|
|
93
|
+
oe as default
|
|
91
94
|
};
|
|
92
95
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/form-step/form-step-pane.vue","../../src/form-step/form-step
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/form-step/form-step-pane.vue","../../src/form-step/form-step.vue","../../src/form-step/index.ts"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n name: 'FFormStepPane',\n inheritAttrs: false,\n})\n</script>\n\n<template>\n <slot />\n</template>\n","<script setup lang=\"ts\">\nimport type { VoidField } from '@formily/core'\nimport type { IFormStepProps } from './types'\nimport { isObj } from '@formily/shared'\nimport { useObserver } from '@silver-formily/reactive-vue'\nimport { RecursionField, useField, useFieldSchema } from '@silver-formily/vue'\nimport { ElStep, ElSteps } from 'element-plus'\nimport { computed } from 'vue'\nimport { stylePrefix } from '../__builtins__'\nimport { createFormStep, parseSteps } from './utils'\n\ndefineOptions({\n name: 'FFormStep',\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<IFormStepProps>(), {\n formStep: () => createFormStep(),\n})\n\nuseObserver()\n\nconst field = useField<VoidField>().value\nconst prefixCls = `${stylePrefix}-form-step`\nconst fieldSchemaRef = useFieldSchema()\n\nconst steps = parseSteps(fieldSchemaRef.value)\n\nprops.formStep.connect?.(steps, field)\n\nconst current = computed(() => props.active ?? props.formStep?.current ?? 0)\n</script>\n\n<template>\n <div :class=\"prefixCls\">\n <ElSteps\n v-bind=\"$attrs\"\n :active=\"current\"\n :style=\"[{ marginBottom: '10px' }]\"\n >\n <ElStep\n v-for=\"({ props: stepProps, slots: stepSlots }, key) of steps\"\n :key=\"key\"\n v-bind=\"stepProps\"\n >\n <template v-if=\"stepSlots?.title\" #title>\n <template v-if=\"isObj(stepSlots.title)\">\n <component :is=\"stepSlots.title\" />\n </template>\n <template v-else>\n {{ stepSlots.title }}\n </template>\n </template>\n <template v-if=\"stepSlots?.icon\" #icon>\n <template v-if=\"isObj(stepSlots.icon)\">\n <component :is=\"stepSlots.icon\" />\n </template>\n <template v-else>\n {{ stepSlots.icon }}\n </template>\n </template>\n <template v-if=\"stepSlots?.description\" #description>\n <template v-if=\"isObj(stepSlots.description)\">\n <component :is=\"stepSlots.description\" />\n </template>\n <template v-else>\n {{ stepSlots.description }}\n </template>\n </template>\n </ElStep>\n </ElSteps>\n\n <template v-for=\"({ name, schema }, key) of steps\" :key=\"name\">\n <RecursionField\n v-if=\"key === current\"\n :name=\"name\"\n :schema=\"schema\"\n />\n </template>\n </div>\n</template>\n","import { composeExport } from '../__builtins__'\nimport FFormStepPane from './form-step-pane.vue'\nimport FFormStep from './form-step.vue'\nimport { createFormStep } from './utils'\n\nexport const FormStep = composeExport(FFormStep, {\n StepPane: FFormStepPane,\n createFormStep,\n})\n\nexport default FormStep\n"],"names":["_sfc_main$1","defineComponent","_renderSlot","_ctx","props","__props","useObserver","field","useField","prefixCls","stylePrefix","fieldSchemaRef","useFieldSchema","steps","parseSteps","current","computed","_createElementBlock","_createVNode","_unref","ElSteps","_mergeProps","_openBlock","_Fragment","stepProps","stepSlots","key","_createBlock","_createSlots","isObj","_resolveDynamicComponent","_createTextVNode","_toDisplayString","name","schema","RecursionField","FormStep","composeExport","FFormStep","FFormStepPane","createFormStep"],"mappings":";;;;;;;;;;;AAGA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;;;;;SAICC,EAAQC,EAAA,QAAA,SAAA;;;;;;;;;;;ACMV,UAAMC,IAAQC;AAId,IAAAC,EAAA;AAEA,UAAMC,IAAQC,IAAsB,OAC9BC,IAAY,GAAGC,CAAW,cAC1BC,IAAiBC,EAAA,GAEjBC,IAAQC,EAAWH,EAAe,KAAK;AAE7C,IAAAP,EAAM,SAAS,UAAUS,GAAON,CAAK;AAErC,UAAMQ,IAAUC,EAAS,MAAMZ,EAAM,UAAUA,EAAM,UAAU,WAAW,CAAC;2BAIzEa,EA6CM,OAAA;AAAA,MA7CA,SAAOR,CAAS;AAAA,IAAA;MACpBS,EAmCUC,EAAAC,CAAA,GAnCVC,EAmCUlB,EAAA,QAlCM;AAAA,QACb,QAAQY,EAAA;AAAA,QACR,OAAO,CAAA,EAAA,cAAA,QAAA;AAAA,MAAA;mBAGN,MAA8D;AAAA,WADhEO,EAAA,EAAA,GAAAL,EA6BSM,WA5BiDJ,EAAAN,CAAA,GAAK,CAAA,EAAA,OAA5CW,GAAS,OAASC,EAAA,GAAaC,OADlDJ,EAAA,GAAAK,EA6BSR,MA7BTE,EA6BS,EA3BN,KAAAK,EAAA,oBACOF,CAAS,GAAAI,EAAA,EAAA,GAAA,KAAA;AAAA,YAEDH,GAAW;oBAAQ;AAAA,oBACjC,MAEW;AAAA,gBAFKN,EAAAU,CAAA,EAAMJ,EAAU,KAAK,UACnCE,EAAmCG,EAAnBL,EAAU,KAAK,GAAA,EAAA,KAAA,EAAA,CAAA,WAEjCR,EAEWM,GAAA,EAAA,KAAA,KAAA;AAAA,kBADNQ,EAAAC,EAAAP,EAAU,KAAK,GAAA,CAAA;AAAA,gBAAA;;;;YAGNA,GAAW;oBAAO;AAAA,oBAChC,MAEW;AAAA,gBAFKN,EAAAU,CAAA,EAAMJ,EAAU,IAAI,UAClCE,EAAkCG,EAAlBL,EAAU,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,WAEhCR,EAEWM,GAAA,EAAA,KAAA,KAAA;AAAA,kBADNQ,EAAAC,EAAAP,EAAU,IAAI,GAAA,CAAA;AAAA,gBAAA;;;;YAGLA,GAAW;oBAAc;AAAA,oBACvC,MAEW;AAAA,gBAFKN,EAAAU,CAAA,EAAMJ,EAAU,WAAW,UACzCE,EAAyCG,EAAzBL,EAAU,WAAW,GAAA,EAAA,KAAA,EAAA,CAAA,WAEvCR,EAEWM,GAAA,EAAA,KAAA,KAAA;AAAA,kBADNQ,EAAAC,EAAAP,EAAU,WAAW,GAAA,CAAA;AAAA,gBAAA;;;;;;;;OAMhCH,EAAA,EAAA,GAAAL,EAMWM,WANiCJ,EAAAN,CAAA,GAAK,CAAA,EAA7B,MAAAoB,GAAM,QAAAC,EAAA,GAAUR,wBAAqBO,KAAI;AAAA,QAEnDP,MAAQX,EAAA,cADhBY,EAIER,EAAAgB,CAAA,GAAA;AAAA;UAFC,MAAAF;AAAA,UACA,QAAAC;AAAA,QAAA;;;;ICvEIE,KAAWC,EAAcC,GAAW;AAAA,EAC/C,UAAUC;AAAA,EACV,gBAAAC;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","sources":["../../src/form-step/utils.ts"],"sourcesContent":["import type { Schema, SchemaKey } from '@formily/json-schema'\
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../src/form-step/utils.ts"],"sourcesContent":["import type { Schema, SchemaKey } from '@formily/json-schema'\nimport type { Slots } from 'vue'\nimport type { FormStepEnv, IFormStep } from './types'\nimport { action, model, observable } from '@formily/reactive'\n\nexport interface SchemaStep {\n name: SchemaKey\n props: any\n schema: Schema\n slots: Slots\n}\n\nexport function createFormStep(defaultCurrent = 0): IFormStep {\n const env: FormStepEnv = observable({\n form: null,\n field: null,\n steps: [],\n })\n\n const setDisplay = action.bound((target: number) => {\n const currentStep = env.steps[target]\n for (const { name } of env.steps) {\n env.form.query(`${env.field.address}.${name}`).take((field) => {\n if (name === currentStep.name) {\n field.setDisplay('visible')\n }\n else {\n field.setDisplay('hidden')\n }\n })\n }\n })\n\n const formStep: IFormStep = model({\n connect(steps, field) {\n env.steps = steps\n env.form = field?.form\n env.field = field\n },\n current: defaultCurrent,\n setCurrent(key: number) {\n formStep.current = key\n },\n get allowNext() {\n return formStep.current < env.steps.length - 1\n },\n get allowBack() {\n return formStep.current > 0\n },\n async next() {\n try {\n await env.form.validate()\n // eslint-disable-next-line ts/no-use-before-define\n next()\n }\n catch {}\n },\n async back() {\n // eslint-disable-next-line ts/no-use-before-define\n back()\n },\n async submit(onSubmit) {\n return env.form?.submit?.(onSubmit)\n },\n })\n\n const next = action.bound(() => {\n /* istanbul ignore else -- @preserve */\n if (formStep.allowNext) {\n setDisplay(formStep.current + 1)\n formStep.setCurrent(formStep.current + 1)\n }\n })\n\n const back = action.bound(() => {\n /* istanbul ignore else -- @preserve */\n if (formStep.allowBack) {\n setDisplay(formStep.current - 1)\n formStep.setCurrent(formStep.current - 1)\n }\n })\n return formStep\n}\n\nexport function parseSteps(schema: Schema) {\n const steps: SchemaStep[] = []\n schema.mapProperties((schema, name) => {\n /* istanbul ignore else -- @preserve */\n if (schema['x-component']?.indexOf('StepPane') > -1) {\n steps.push({\n name,\n props: schema['x-component-props'],\n schema,\n slots: schema['x-content'],\n })\n }\n })\n return steps\n}\n"],"names":["createFormStep","defaultCurrent","env","observable","setDisplay","action","target","currentStep","name","field","formStep","model","steps","key","next","back","onSubmit","parseSteps","schema"],"mappings":";AAYO,SAASA,EAAeC,IAAiB,GAAc;AAC5D,QAAMC,IAAmBC,EAAW;AAAA,IAClC,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,CAAA;AAAA,EAAC,CACT,GAEKC,IAAaC,EAAO,MAAM,CAACC,MAAmB;AAClD,UAAMC,IAAcL,EAAI,MAAMI,CAAM;AACpC,eAAW,EAAE,MAAAE,OAAUN,EAAI;AACzB,MAAAA,EAAI,KAAK,MAAM,GAAGA,EAAI,MAAM,OAAO,IAAIM,CAAI,EAAE,EAAE,KAAK,CAACC,MAAU;AAC7D,QAAID,MAASD,EAAY,OACvBE,EAAM,WAAW,SAAS,IAG1BA,EAAM,WAAW,QAAQ;AAAA,MAE7B,CAAC;AAAA,EAEL,CAAC,GAEKC,IAAsBC,EAAM;AAAA,IAChC,QAAQC,GAAOH,GAAO;AACpB,MAAAP,EAAI,QAAQU,GACZV,EAAI,OAAOO,GAAO,MAClBP,EAAI,QAAQO;AAAA,IACd;AAAA,IACA,SAASR;AAAA,IACT,WAAWY,GAAa;AACtB,MAAAH,EAAS,UAAUG;AAAA,IACrB;AAAA,IACA,IAAI,YAAY;AACd,aAAOH,EAAS,UAAUR,EAAI,MAAM,SAAS;AAAA,IAC/C;AAAA,IACA,IAAI,YAAY;AACd,aAAOQ,EAAS,UAAU;AAAA,IAC5B;AAAA,IACA,MAAM,OAAO;AACX,UAAI;AACF,cAAMR,EAAI,KAAK,SAAA,GAEfY,EAAA;AAAA,MACF,QACM;AAAA,MAAC;AAAA,IACT;AAAA,IACA,MAAM,OAAO;AAEX,MAAAC,EAAA;AAAA,IACF;AAAA,IACA,MAAM,OAAOC,GAAU;AACrB,aAAOd,EAAI,MAAM,SAASc,CAAQ;AAAA,IACpC;AAAA,EAAA,CACD,GAEKF,IAAOT,EAAO,MAAM,MAAM;AAAA,IAAA;AAE9B,IAAIK,EAAS,cACXN,EAAWM,EAAS,UAAU,CAAC,GAC/BA,EAAS,WAAWA,EAAS,UAAU,CAAC;AAAA,EAE5C,CAAC,GAEKK,IAAOV,EAAO,MAAM,MAAM;AAAA,IAAA;AAE9B,IAAIK,EAAS,cACXN,EAAWM,EAAS,UAAU,CAAC,GAC/BA,EAAS,WAAWA,EAAS,UAAU,CAAC;AAAA,EAE5C,CAAC;AACD,SAAOA;AACT;AAEO,SAASO,EAAWC,GAAgB;AACzC,QAAMN,IAAsB,CAAA;AAC5B,SAAAM,EAAO,cAAc,CAACA,GAAQV,MAAS;AAAA,IAAA;AAErC,IAAIU,EAAO,aAAa,GAAG,QAAQ,UAAU,IAAI,MAC/CN,EAAM,KAAK;AAAA,MACT,MAAAJ;AAAA,MACA,OAAOU,EAAO,mBAAmB;AAAA,MACjC,QAAAA;AAAAA,MACA,OAAOA,EAAO,WAAW;AAAA,IAAA,CAC1B;AAAA,EAEL,CAAC,GACMN;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.mjs","sources":["../../src/form-tab/hooks.ts"],"sourcesContent":["import type { Schema, SchemaKey } from '@formily/json-schema'\
|
|
1
|
+
{"version":3,"file":"hooks.mjs","sources":["../../src/form-tab/hooks.ts"],"sourcesContent":["import type { Schema, SchemaKey } from '@formily/json-schema'\nimport { observable, reaction } from '@formily/reactive'\nimport { useField, useFieldSchema } from '@silver-formily/vue'\n\nexport type Tabs = { name: SchemaKey, props: any, schema: Schema }[]\n\nexport function useTabs() {\n const tabsField = useField()\n const schema = useFieldSchema()\n const tabs: Tabs = observable([])\n reaction(() => {\n const tabDisplayStatus = schema.value?.mapProperties((schema, name) => {\n const field = tabsField.value\n .query(tabsField.value.address.concat(name))\n .take()\n return field?.display\n })\n return tabDisplayStatus\n }, () => {\n tabs.length = 0\n schema.value?.mapProperties((schema, name) => {\n const field = tabsField.value\n .query(tabsField.value.address.concat(name))\n .take()\n if (field?.display === 'none' || field?.display === 'hidden')\n return\n\n if (schema['x-component']?.indexOf('TabPane') > -1) {\n tabs.push({\n name,\n props: {\n name: schema?.['x-component-props']?.name || name,\n ...schema?.['x-component-props'],\n },\n schema,\n })\n }\n })\n }, {\n fireImmediately: true,\n })\n\n return tabs\n}\n"],"names":["useTabs","tabsField","useField","schema","useFieldSchema","tabs","observable","reaction","name","field"],"mappings":";;AAMO,SAASA,IAAU;AACxB,QAAMC,IAAYC,EAAA,GACZC,IAASC,EAAA,GACTC,IAAaC,EAAW,EAAE;AAChC,SAAAC,EAAS,MACkBJ,EAAO,OAAO,cAAc,CAACA,GAAQK,MAC9CP,EAAU,MACrB,MAAMA,EAAU,MAAM,QAAQ,OAAOO,CAAI,CAAC,EAC1C,KAAA,GACW,OACf,GAEA,MAAM;AACP,IAAAH,EAAK,SAAS,GACdF,EAAO,OAAO,cAAc,CAACA,GAAQK,MAAS;AAC5C,YAAMC,IAAQR,EAAU,MACrB,MAAMA,EAAU,MAAM,QAAQ,OAAOO,CAAI,CAAC,EAC1C,KAAA;AACH,MAAIC,GAAO,YAAY,UAAUA,GAAO,YAAY,YAGhDN,EAAO,aAAa,GAAG,QAAQ,SAAS,IAAI,MAC9CE,EAAK,KAAK;AAAA,QACR,MAAAG;AAAA,QACA,OAAO;AAAA,UACL,MAAML,IAAS,mBAAmB,GAAG,QAAQK;AAAA,UAC7C,GAAGL,IAAS,mBAAmB;AAAA,QAAA;AAAA,QAEjC,QAAAA;AAAAA,MAAA,CACD;AAAA,IAEL,CAAC;AAAA,EACH,GAAG;AAAA,IACD,iBAAiB;AAAA,EAAA,CAClB,GAEME;AACT;"}
|
package/esm/form-tab/index.mjs
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { formilyComputed as V, observer as E } from "@silver-formily/reactive-vue";
|
|
2
|
-
import {
|
|
3
|
-
import { reaction as
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
2
|
+
import { ElTabs as k, ElTabPane as B, ElBadge as K } from "element-plus";
|
|
3
|
+
import { reaction as w } from "@formily/reactive";
|
|
4
|
+
import "@vueuse/core";
|
|
5
|
+
import { defineComponent as $, computed as L, ref as N, watch as R, createBlock as s, openBlock as o, unref as r, withCtx as m, createElementBlock as d, Fragment as b, renderList as q, mergeProps as z, normalizeClass as A, createTextVNode as v, toDisplayString as T, createVNode as D } from "vue";
|
|
6
|
+
import "@formily/core";
|
|
7
|
+
import { useField as I, RecursionField as P } from "@silver-formily/vue";
|
|
8
|
+
import { composeExport as S } from "../__builtins__/shared/utils.mjs";
|
|
8
9
|
import { stylePrefix as j } from "../__builtins__/configs/index.mjs";
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
10
|
+
import { useTabs as G } from "./hooks.mjs";
|
|
11
|
+
import { createFormTab as y } from "./utils.mjs";
|
|
12
|
+
import '../styles/form-tab/index.css';const H = /* @__PURE__ */ $({
|
|
11
13
|
name: "FFormTab",
|
|
12
14
|
__name: "form-tab",
|
|
13
15
|
props: {
|
|
@@ -16,12 +18,12 @@ import '../styles/form-tab/index.css';const H = /* @__PURE__ */ k({
|
|
|
16
18
|
},
|
|
17
19
|
emits: ["update:modelValue"],
|
|
18
20
|
setup(_, { emit: h }) {
|
|
19
|
-
const u = _, F = h, i =
|
|
20
|
-
|
|
21
|
+
const u = _, F = h, i = I(), g = `${j}-form-tab`, l = L(() => u.formTab ?? y()), t = G(), a = N(u?.modelValue ?? l.value.activeKey ?? t?.[0]?.name);
|
|
22
|
+
w(() => t.length, () => {
|
|
21
23
|
!t.some((e) => e.name === a.value) && (a.value = t?.[0]?.name);
|
|
22
24
|
}, {
|
|
23
25
|
fireImmediately: !0
|
|
24
|
-
}),
|
|
26
|
+
}), R(() => l.value.activeKey, (e) => {
|
|
25
27
|
a.value = e;
|
|
26
28
|
});
|
|
27
29
|
const c = V(() => t.map((e) => i.value.form.queryFeedbacks({
|
|
@@ -32,30 +34,30 @@ import '../styles/form-tab/index.css';const H = /* @__PURE__ */ k({
|
|
|
32
34
|
/* istanbul ignore if -- @preserve */
|
|
33
35
|
typeof e == "string" && (F("update:modelValue", e), l.value.setActiveKey?.(e));
|
|
34
36
|
}
|
|
35
|
-
return (e, M) => (o(), s(r(
|
|
37
|
+
return (e, M) => (o(), s(r(k), {
|
|
36
38
|
"model-value": a.value,
|
|
37
39
|
style: { width: "100%" },
|
|
38
40
|
onTabChange: x
|
|
39
41
|
}, {
|
|
40
42
|
default: m(() => [
|
|
41
|
-
(o(!0),
|
|
43
|
+
(o(!0), d(b, null, q(r(t), ({ props: n, schema: C, name: f }, p) => (o(), s(r(B), z({ key: f }, { ref_for: !0 }, n), {
|
|
42
44
|
default: m(() => [
|
|
43
|
-
|
|
45
|
+
D(r(P), {
|
|
44
46
|
schema: C,
|
|
45
47
|
name: f
|
|
46
48
|
}, null, 8, ["schema", "name"])
|
|
47
49
|
]),
|
|
48
50
|
label: m(() => [
|
|
49
|
-
r(c)[
|
|
51
|
+
r(c)[p] !== 0 ? (o(), s(r(K), {
|
|
50
52
|
key: 0,
|
|
51
|
-
class:
|
|
52
|
-
value: r(c)[
|
|
53
|
+
class: A(g),
|
|
54
|
+
value: r(c)[p]
|
|
53
55
|
}, {
|
|
54
56
|
default: m(() => [
|
|
55
57
|
v(T(n.label), 1)
|
|
56
58
|
]),
|
|
57
59
|
_: 2
|
|
58
|
-
}, 1032, ["value"])) : (o(),
|
|
60
|
+
}, 1032, ["value"])) : (o(), d(b, { key: 1 }, [
|
|
59
61
|
v(T(n.label), 1)
|
|
60
62
|
], 64))
|
|
61
63
|
]),
|
|
@@ -65,12 +67,12 @@ import '../styles/form-tab/index.css';const H = /* @__PURE__ */ k({
|
|
|
65
67
|
_: 1
|
|
66
68
|
}, 8, ["model-value"]));
|
|
67
69
|
}
|
|
68
|
-
}), J = E(H),
|
|
70
|
+
}), J = E(H), ae = S(J, {
|
|
69
71
|
createFormTab: y
|
|
70
72
|
});
|
|
71
73
|
export {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
ae as FormTab,
|
|
75
|
+
ae as composeFormTab,
|
|
76
|
+
ae as default
|
|
75
77
|
};
|
|
76
78
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/form-tab/form-tab.vue","../../src/form-tab/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/form-tab/form-tab.vue","../../src/form-tab/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { IFormTabProps } from './types.ts'\nimport { reaction } from '@formily/reactive'\nimport { formilyComputed } from '@silver-formily/reactive-vue'\nimport { RecursionField, useField } from '@silver-formily/vue'\nimport { ElBadge, ElTabPane, ElTabs } from 'element-plus'\nimport { computed, ref, watch } from 'vue'\nimport { stylePrefix } from '../__builtins__'\nimport { useTabs } from './hooks'\nimport { createFormTab } from './utils'\n\ndefineOptions({\n name: 'FFormTab',\n})\n\nconst props = defineProps<IFormTabProps>()\nconst emit = defineEmits(['update:modelValue'])\n\nconst field = useField()\nconst prefixCls = `${stylePrefix}-form-tab`\nconst formTabRef = computed(() => props.formTab ?? createFormTab())\nconst tabs = useTabs()\nconst _activeKey = ref(props?.modelValue ?? formTabRef.value.activeKey ?? tabs?.[0]?.name)\n\nreaction(() => {\n return tabs.length\n}, () => {\n !tabs.some(tab => tab.name === _activeKey.value) && (_activeKey.value = tabs?.[0]?.name)\n}, {\n fireImmediately: true,\n})\nwatch(() => formTabRef.value.activeKey, (val) => {\n _activeKey.value = val\n})\n\nconst errorList = formilyComputed(() => {\n return tabs.map((tab) => {\n return field.value.form.queryFeedbacks({\n type: 'error',\n address: `${field.value.address}.${tab.name}.*`,\n }).length\n })\n})\n\nfunction handleTabChange(key: string) {\n /* istanbul ignore if -- @preserve */\n if (typeof key !== 'string')\n return\n emit('update:modelValue', key)\n formTabRef.value.setActiveKey?.(key)\n}\n</script>\n\n<template>\n <ElTabs\n :model-value=\"_activeKey\"\n style=\"width: 100%;\"\n @tab-change=\"handleTabChange\"\n >\n <ElTabPane\n v-for=\"({ props: tabProps, schema, name }, key) in tabs\"\n :key=\"name\"\n v-bind=\"tabProps\"\n >\n <template #default>\n <RecursionField :schema=\"schema\" :name=\"name\" />\n </template>\n <template #label>\n <ElBadge\n v-if=\"errorList[key] !== 0\"\n :class=\"prefixCls\"\n :value=\"errorList[key]\"\n >\n {{ tabProps.label }}\n </ElBadge>\n <template v-else>\n {{ tabProps.label }}\n </template>\n </template>\n </ElTabPane>\n </ElTabs>\n</template>\n","import { observer } from '@silver-formily/reactive-vue'\nimport { composeExport } from '../__builtins__'\nimport FFormTab from './form-tab.vue'\nimport { createFormTab } from './utils'\nimport './style.scss'\n\nconst FormTab = observer(FFormTab)\n\nexport const composeFormTab = composeExport(FormTab, {\n createFormTab,\n})\n\nexport { composeFormTab as FormTab }\nexport default composeFormTab\n"],"names":["props","__props","emit","__emit","field","useField","prefixCls","stylePrefix","formTabRef","computed","createFormTab","tabs","useTabs","_activeKey","ref","reaction","tab","watch","val","errorList","formilyComputed","handleTabChange","key","_createBlock","_unref","ElTabs","_createElementBlock","_Fragment","_renderList","tabProps","schema","name","_openBlock","_mergeProps","_createVNode","RecursionField","ElBadge","_createTextVNode","_toDisplayString","FormTab","observer","FFormTab","composeFormTab","composeExport"],"mappings":";;;;;;;;;;;;;;;;;;;;AAeA,UAAMA,IAAQC,GACRC,IAAOC,GAEPC,IAAQC,EAAA,GACRC,IAAY,GAAGC,CAAW,aAC1BC,IAAaC,EAAS,MAAMT,EAAM,WAAWU,GAAe,GAC5DC,IAAOC,EAAA,GACPC,IAAaC,EAAId,GAAO,cAAcQ,EAAW,MAAM,aAAaG,IAAO,CAAC,GAAG,IAAI;AAEzF,IAAAI,EAAS,MACAJ,EAAK,QACX,MAAM;AACP,OAACA,EAAK,KAAK,CAAAK,MAAOA,EAAI,SAASH,EAAW,KAAK,MAAMA,EAAW,QAAQF,IAAO,CAAC,GAAG;AAAA,IACrF,GAAG;AAAA,MACD,iBAAiB;AAAA,IAAA,CAClB,GACDM,EAAM,MAAMT,EAAW,MAAM,WAAW,CAACU,MAAQ;AAC/C,MAAAL,EAAW,QAAQK;AAAA,IACrB,CAAC;AAED,UAAMC,IAAYC,EAAgB,MACzBT,EAAK,IAAI,CAACK,MACRZ,EAAM,MAAM,KAAK,eAAe;AAAA,MACrC,MAAM;AAAA,MACN,SAAS,GAAGA,EAAM,MAAM,OAAO,IAAIY,EAAI,IAAI;AAAA,IAAA,CAC5C,EAAE,MACJ,CACF;AAED,aAASK,EAAgBC,GAAa;AAAA,MAAA;AAEpC,MAAI,OAAOA,KAAQ,aAEnBpB,EAAK,qBAAqBoB,CAAG,GAC7Bd,EAAW,MAAM,eAAec,CAAG;AAAA,IACrC;2BAIEC,EA0BSC,EAAAC,CAAA,GAAA;AAAA,MAzBN,eAAaZ,EAAA;AAAA,MACd,OAAA,EAAA,OAAA,OAAA;AAAA,MACC,aAAYQ;AAAA,IAAA;iBAGX,MAAwD;AAAA,gBAD1DK,EAoBYC,GAAA,MAAAC,EAnByCJ,MAAI,CAAA,EAAA,OAAtCK,GAAU,QAAAC,GAAQ,MAAAC,EAAA,GAAQT,OAD7CU,KAAAT,EAoBYC,MApBZS,EAoBY,EAlBT,KAAKF,EAAA,oBACEF,CAAQ,GAAA;AAAA,UAEL,WACT,MAAgD;AAAA,YAAhDK,EAAgDV,EAAAW,CAAA,GAAA;AAAA,cAA/B,QAAAL;AAAA,cAAiB,MAAAC;AAAA,YAAA;;UAEzB,SACT,MAMU;AAAA,YALFP,EAAAL,CAAA,EAAUG,CAAG,MAAA,UADrBC,EAMUC,EAAAY,CAAA,GAAA;AAAA;cAJP,SAAO9B,CAAS;AAAA,cAChB,OAAOkB,EAAAL,CAAA,EAAUG,CAAG;AAAA,YAAA;yBAErB,MAAoB;AAAA,gBAAjBe,EAAAC,EAAAT,EAAS,KAAK,GAAA,CAAA;AAAA,cAAA;;yCAEnBH,EAEWC,GAAA,EAAA,KAAA,KAAA;AAAA,cADNU,EAAAC,EAAAT,EAAS,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;ICtErBU,IAAUC,EAASC,CAAQ,GAEpBC,KAAiBC,EAAcJ,GAAS;AAAA,EACnD,eAAA7B;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","sources":["../../src/form-tab/utils.ts"],"sourcesContent":["import { model } from '@formily/reactive'\
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../src/form-tab/utils.ts"],"sourcesContent":["import { model } from '@formily/reactive'\n\nexport function createFormTab(defaultActiveKey?: string) {\n const formTab = model({\n activeKey: defaultActiveKey,\n setActiveKey(key: string) {\n formTab.activeKey = key\n },\n })\n return formTab\n}\n"],"names":["createFormTab","defaultActiveKey","formTab","model","key"],"mappings":";AAEO,SAASA,EAAcC,GAA2B;AACvD,QAAMC,IAAUC,EAAM;AAAA,IACpB,WAAWF;AAAA,IACX,aAAaG,GAAa;AACxB,MAAAF,EAAQ,YAAYE;AAAA,IACtB;AAAA,EAAA,CACD;AACD,SAAOF;AACT;"}
|
package/esm/index.d.ts
CHANGED
|
@@ -4,9 +4,13 @@ export * from './array-items';
|
|
|
4
4
|
export * from './array-list-tabs';
|
|
5
5
|
export * from './array-table';
|
|
6
6
|
export * from './array-tabs';
|
|
7
|
+
export * from './autocomplete';
|
|
7
8
|
export * from './cascader';
|
|
8
9
|
export * from './checkbox';
|
|
10
|
+
export * from './color-picker';
|
|
11
|
+
export * from './color-picker-panel';
|
|
9
12
|
export * from './date-picker';
|
|
13
|
+
export * from './date-picker-panel';
|
|
10
14
|
export * from './editable';
|
|
11
15
|
export * from './form';
|
|
12
16
|
export * from './form-button-group';
|
|
@@ -20,8 +24,12 @@ export * from './form-step';
|
|
|
20
24
|
export * from './form-tab';
|
|
21
25
|
export * from './input';
|
|
22
26
|
export * from './input-number';
|
|
27
|
+
export * from './input-tag';
|
|
28
|
+
export * from './mention';
|
|
23
29
|
export * from './password';
|
|
24
30
|
export * from './preview-text';
|
|
31
|
+
export * from './query-form';
|
|
32
|
+
export * from './query-form-item';
|
|
25
33
|
export * from './radio';
|
|
26
34
|
export * from './rate';
|
|
27
35
|
export * from './reset';
|