UNPKG

ideaz-element

Version:

<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>

1 lines 19.8 kB
{"version":3,"file":"BaseForm.mjs","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","isVNode","ZForm","defineComponent","name","components","ZFormItem","props","directives","draggable","slots","formatFormItems","useFormItems","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","createVNode","ElButton","val","action","isChildren","column","isFunction","_slot4","Fragment","ElDivider","contentPosition","getContentByRenderAndSlot","renderCommonColumn","type","_slot5","activeCollapse","accordion","isString","_slot6","model","data","index","formProps","omit","FORM_FILTER_KEYS","min","ElMessage","labelWidth","max","_slot7","field","maxLength","FORM_ITEM_FILTER_KEYS","cloneDeep","item","_slot8","ElSteps","finishStatus","processStatus","simple","renderStepFooter","_slot9","withDirectives","ElForm","mergeProps","rowStyle"],"mappings":"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"}