ideaz-element

Version:

naivesteven.github.io/ideaz-element/

1 lines • 19 kB

Source Map (JSON)

View Raw

{"version":3,"file":"BaseForm.cjs","sources":["../../../../../packages/element/form/src/BaseForm.tsx"],"sourcesContent":["// import { withModifiers } from 'vue';\nimport { useExpose } from '@ideaz/hooks'\nimport { cloneDeep, omit } from 'lodash-unified'\nimport { Plus } from '@element-plus/icons-vue'\nimport { getContentByRenderAndSlot } from '@ideaz/shared'\nimport { useVModel } from '@vueuse/core'\nimport { isFunction, isString } from '@ideaz/utils'\nimport type { CollapseModelValue, FormRules } from 'element-plus'\nimport { ElButton, ElCollapse, ElCollapseItem, ElDivider, ElForm, ElFormItem, ElMessage, ElStep, ElSteps } from 'element-plus'\nimport type { ComponentInternalInstance } from 'vue'\nimport { draggable } from '../../../directives'\nimport type { FormColumn } from '../../types'\nimport {\n useDraggable,\n useFormConfig,\n useFormItems,\n useFormMethods,\n useRow,\n} from './hooks'\nimport { FORM_FILTER_KEYS, FORM_ITEM_FILTER_KEYS, formProps, formProvideKey } from './props'\nimport FormColumns from './FormColumns'\nimport OperationCard from './OperationCard'\nimport ZFormItem from './FormItem'\n\nexport default defineComponent({\n name: 'ZForm',\n components: { FormColumns, OperationCard, ZFormItem },\n props: formProps,\n directives: { draggable },\n emits: ['input', 'update:modelValue', 'change', 'update:activeCollapse', 'collapse-change', 'next-step', 'previous-step', 'update:activeStep', 'submit', 'update:columns'],\n setup(props, { emit, slots }) {\n const { formatFormItems } = useFormItems(props)\n const { rowStyle, rowKls } = useRow(props)\n const { formConfig } = useFormConfig(props)\n const {\n resetFields,\n validate,\n validateField,\n clearValidate,\n scrollToField,\n } = useFormMethods(props)\n const { draggableOptions } = useDraggable(emit, formatFormItems)\n const ns = useNamespace('form')\n const { t } = useLocale()\n\n const { proxy: ctx } = getCurrentInstance() as ComponentInternalInstance\n const activeStep = useVModel(props, 'activeStep', emit)\n\n useExpose({\n resetFields,\n validate,\n validateField,\n clearValidate,\n scrollToField,\n })\n\n provide(formProvideKey, computed(() => {\n return {\n ...toRefs(props),\n size: formConfig.value.size,\n }\n }))\n\n const renderCommonColumn = (contentColumns: FormColumn[]) => {\n const { modelValue, options } = props\n\n return (\n <FormColumns\n modelValue={modelValue}\n options={options}\n columns={contentColumns}\n formProps={props}\n v-slots={slots}\n onUpdate:modelValue={(...args) => { emit('update:modelValue', ...args) }}\n onChange={(...args) => { emit('change', ...args) }}\n />\n )\n }\n\n const renderStepFooter = () => {\n const { footer } = props\n if (isFunction(footer))\n return footer()\n if (slots.footer)\n return slots.footer()\n return (\n <ElFormItem>\n <ElButton\n disabled={activeStep.value === 0}\n onClick={() => {\n emit('previous-step')\n if (activeStep.value-- <= 0)\n activeStep.value = 0\n }}\n >\n {t('form.previousStep')}\n </ElButton>\n {activeStep.value !== formatFormItems.value.length - 1 && (\n <ElButton\n type=\"primary\"\n onClick={() => {\n (ctx?.$refs.formRef as typeof ElForm).validate((val: boolean) => {\n if (val) {\n emit('next-step')\n if (activeStep.value++ >= formatFormItems.value.length - 1)\n activeStep.value = 0\n }\n })\n }}\n >\n {t('form.nextStep')}\n </ElButton>\n )}\n {activeStep.value === formatFormItems.value.length - 1 && (\n <ElButton\n type=\"primary\"\n onClick={() => {\n (ctx?.$refs.formRef as typeof ElForm).validate((val: boolean) => {\n if (val)\n emit('submit')\n })\n }}\n >\n {t('common.submit')}\n </ElButton>\n )}\n </ElFormItem>\n )\n }\n\n const renderContent = () => {\n const { type, contentPosition, borderStyle, activeCollapse, accordion, modelValue, options, finishStatus, processStatus, simple, max, min, action } = props\n const isChildren = formatFormItems.value.some(column => column.children)\n\n if (isFunction(slots.default))\n return slots.default()\n\n if (type === 'group') {\n return formatFormItems.value.map((column) => {\n if (column.label && column.children && column.children.length) {\n return (\n <>\n <ElDivider contentPosition={column.contentPosition || contentPosition} borderStyle={column.borderStyle || borderStyle}>\n {getContentByRenderAndSlot(column.label, slots)}\n </ElDivider>\n {renderCommonColumn(column.children || [])}\n </>\n )\n }\n return renderCommonColumn([column])\n })\n }\n else if (type === 'collapse') {\n return (\n <ElCollapse\n modelValue={activeCollapse}\n accordion={accordion}\n class={ns.b('collapse')}\n onUpdate:modelValue={(val: CollapseModelValue) => { emit('update:activeCollapse', val) }}\n onChange={(val: CollapseModelValue) => { emit('collapse-change', val) }}\n >\n {formatFormItems.value.map((column) => {\n if (column.children) {\n const name = isString(column.label) ? column.label : column.key\n return (\n <ElCollapseItem\n name={name}\n disabled={column.disabled}\n v-slots={{\n title: () => getContentByRenderAndSlot(column.label, slots),\n }}\n >\n {column.render?.() || slots[column.slot || '']?.() || renderCommonColumn(column.children || [])}\n </ElCollapseItem>\n )\n }\n else if (column.slot || column.render) {\n return renderCommonColumn([column])\n }\n else {\n return null\n }\n })}\n </ElCollapse>\n )\n }\n else if (type === 'array' && !isChildren) {\n const model = [...modelValue as any[]]\n return (\n <>\n {modelValue.map((data: any, index: number) => {\n const formProps = omit(props, FORM_FILTER_KEYS)\n return (\n <OperationCard\n onAdd={() => { emit('update:modelValue', [...model, {}]) }}\n onDelete={() => {\n if (modelValue.length === min) {\n ElMessage.warning(`${t('form.minNum')}${min}${t('form.minNumUnit')}`)\n return\n }\n model.splice(index, 1)\n emit('update:modelValue', model)\n }}\n showAdd={modelValue.length !== max && !!action}\n showDelete={!!action}\n action={action}\n contentIndex={index}\n v-slots={slots}\n >\n <ElForm {...{ labelWidth: formConfig.value.labelWidth, ...formProps }} model={data} ref={`arrayForm${index}`}>\n <FormColumns\n modelValue={data}\n options={options}\n columns={formatFormItems.value}\n v-slots={slots}\n onUpdate:modelValue={(val: any) => {\n model.splice(index, 1, val)\n emit('update:modelValue', model)\n }}\n onChange={(...args) => { emit('change', ...args) }}\n />\n </ElForm>\n </OperationCard>\n )\n })}\n {modelValue.length !== max && action && (\n <ElButton class={ns.be('array', 'add')} onClick={() => { emit('update:modelValue', [...model, {}]) }} icon={Plus}>\n {t('form.add')}\n </ElButton>\n )}\n </>\n )\n }\n else if (type === 'array' && isChildren) {\n return formatFormItems.value.map((column) => {\n if (column.label && column.children && column.children.length) {\n const field = column.field!\n const maxLength = column.max || max\n return (\n <ZFormItem col={column} class={ns.b('array-form-item')} formConfig={{ ...omit(column, FORM_ITEM_FILTER_KEYS) }} v-slots={slots}>\n <>\n {modelValue[field].map((data: any, index: number) => {\n const formProps = omit(column, FORM_FILTER_KEYS)\n return (\n <OperationCard\n onAdd={() => {\n const model = { ...modelValue }\n model[field].push({})\n emit('update:modelValue', model)\n }}\n onDelete={() => {\n const model = cloneDeep(modelValue)\n model[field].splice(index, 1)\n emit('update:modelValue', model)\n }}\n showAdd={modelValue[field].length !== maxLength && !!action}\n showDelete={!!action}\n action={action}\n contentIndex={index}\n v-slots={slots}\n >\n <ElForm {...{ labelWidth: formConfig.value.labelWidth, ...formProps, rules: formProps.rules as FormRules }} model={data} ref={`arrayForm${index}${field}`}>\n <FormColumns\n modelValue={data}\n options={column.options || options}\n columns={column.children}\n v-slots={slots}\n onUpdate:modelValue={(val: any) => {\n const item = cloneDeep(modelValue[field])\n item.splice(index, 1, val)\n emit('update:modelValue', { ...modelValue, [field]: item })\n }}\n onChange={(...args) => { emit('change', ...args) }}\n />\n </ElForm>\n </OperationCard>\n )\n })}\n {modelValue[field].length !== maxLength && action && (\n <ElButton\n class={ns.be('array', 'add')}\n onClick={() => {\n const model = { ...modelValue }\n model[field].push({})\n emit('update:modelValue', model)\n }}\n icon={Plus}\n >\n {t('form.add')}\n </ElButton>\n )}\n </>\n </ZFormItem>\n )\n }\n return renderCommonColumn([column])\n })\n }\n else if (type === 'step') {\n return (\n <>\n <ElSteps active={activeStep.value} finishStatus={finishStatus} processStatus={processStatus} simple={simple} class={ns.b('steps')}>\n {formatFormItems.value.map((column) => {\n return (\n <ElStep\n status={column.status}\n v-slots={{\n icon: () => getContentByRenderAndSlot(column.icon, slots),\n description: () => getContentByRenderAndSlot(column.description, slots),\n title: () => getContentByRenderAndSlot(column.label, slots),\n }}\n />\n )\n })}\n </ElSteps>\n {formatFormItems.value.map((column, index) => {\n if (index === activeStep.value) {\n if (column.label && column.children && column.children.length)\n return renderCommonColumn(column.children || [])\n return renderCommonColumn([column])\n }\n return null\n })}\n {renderStepFooter()}\n </>\n )\n }\n else {\n return renderCommonColumn(formatFormItems.value)\n }\n }\n\n return () => {\n const { modelValue } = props\n\n return (\n <ElForm\n {...{ ...formConfig.value, model: modelValue }}\n ref=\"formRef\"\n v-draggable={draggableOptions}\n class={[rowKls.value, ns.b('')]}\n style={rowStyle.value}\n // onSubmit={withModifiers(function () { }, ['prevent'])}\n >\n {renderContent()}\n </ElForm>\n )\n }\n },\n})\n"],"names":["_isSlot","s","vue","ZForm","name","components","ZFormItem","props","directives","draggable","slots","formatFormItems","useFormItems","props$1","rowKls","useRow","formConfig","useFormConfig","scrollToField","useFormMethods","draggableOptions","useDraggable","emit","ns","useNamespace","t","proxy","useExpose","provide","size","options","modelValue","contentColumns","_slot","_slot2","_slot3","footer","default","activeStep","elementPlus","val","action","isChildren","column","is","_slot4","contentPosition","getContentByRenderAndSlot","renderCommonColumn","type","_slot5","activeCollapse","accordion","_slot6","model","data","index","formProps","omit","min","ElMessage","labelWidth","max","_slot7","field","maxLength","cloneDeep","item","_slot8","finishStatus","processStatus","simple","renderStepFooter","_slot9","rowStyle"],"mappings":"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"}