ideaz-element

Version:

naivesteven.github.io/ideaz-element/

1 lines • 11.1 kB

Source Map (JSON)

View Raw

{"version":3,"file":"useTableColumnSlots.cjs","sources":["../../../../../../packages/element/table/src/hooks/useTableColumnSlots.tsx"],"sourcesContent":["import { Operation, QuestionFilled } from '@element-plus/icons-vue'\nimport { getEventsFromCamel, isArray, isEmptyObject, isFunction, isObject, isSlot, isString } from '@ideaz/utils'\nimport { ElFormItem, ElIcon, ElTooltip } from 'element-plus'\nimport type { VNode } from 'vue'\nimport type { TableColumnProps } from '../props'\nimport TableButton from '../TableButton'\nimport { SELECT_TYPES } from '../../../form/src/hooks'\nimport TableCustomColumnContainer from '../TableCustomColumnContainer'\nimport type { TableColumnScopeData } from '../../../types'\n\nfunction getDynamicComponentName(type: string | (() => string)) {\n const zNames = ['select', 'checkbox', 'radio', 'input']\n const propComponentName = typeof type === 'function' ? type() : type\n\n if (zNames.includes(propComponentName)) {\n return `z-${propComponentName}`\n }\n\n else {\n return propComponentName || 'unknown'\n }\n}\n\nexport function useTableColumnSlots(props: TableColumnProps, slots: any, emit: any) {\n const scopedSlots = shallowRef<any>({})\n const ns = useNamespace('table-column')\n const { t } = useLocale()\n\n const getLabel = (row: any) => {\n const { column = {} } = props\n const options = props.tableProps.options\n const prop = column.prop!\n const type = isFunction(column.component) ? column.component() : isObject(column.component) ? column.component.name : column.component\n if (type === 'radio' || (type === 'select' && !column.fieldProps?.multiple))\n return options[prop] ? options[prop].find((item: { label: string, value: any }) => item.value === row?.[prop])?.label : ''\n\n if ((type === 'select' && column.fieldProps?.multiple) || type === 'checkbox') {\n const label: string[] = []\n if (row[prop]) {\n row[prop].forEach((item: any) => {\n label.push(options[prop].find((option: { label: string, value: any }) => option.value === item)?.label)\n })\n }\n return label.join(',')\n }\n if (type === 'el-switch')\n return row[prop] ? (column.fieldProps?.activeText || 'true') : (column.fieldProps?.inactiveText || 'false')\n\n return row[prop]\n }\n\n const getRules = () => {\n const column = props.column\n const label = props.column.label\n const type = isFunction(column.component) ? column.component() : isObject(column.component) ? column.component.name : column.component\n let message = ''\n let rules = {}\n if (SELECT_TYPES.includes((type || '').toLowerCase()))\n message = label ? `${t('form.selectPlaceholder')}${label}` : `${t('form.selectPlaceholder')}`\n\n else\n message = label ? `${t('form.inputPlaceholder')}${label}` : `${t('form.inputPlaceholder')}`\n\n if (column.required === true || column.rules?.required) {\n rules = {\n required: true,\n message,\n ...column.rules,\n }\n }\n return isEmptyObject(rules) ? undefined : rules\n }\n\n watch(\n () => props.column,\n () => {\n const { column = {}, size, tableProps } = props\n const prop = column.prop || ''\n\n if (\n !['index', 'selection', 'radio', undefined].includes(column.type)\n || column.slot\n || column.render\n || column.component\n ) {\n scopedSlots.value.default = (scope: TableColumnScopeData) => {\n const renderCustomComponent = () => {\n const events = getEventsFromCamel(column)\n return (\n <TableCustomColumnContainer\n modelValue={scope.row[prop]}\n onUpdate:modelValue={(val: any) => {\n const rowData = { ...scope.row, [prop]: val }\n const list = [...props.tableProps.data]\n list.splice(scope.$index, 1, rowData)\n emit('update:data', list)\n }}\n componentName={getDynamicComponentName(column.component!)}\n evts={events}\n size={size}\n options={tableProps.options?.[prop] || []}\n scope={scope}\n column={column}\n fieldProps={column.fieldProps}\n />\n )\n }\n\n if (column.type === 'expand' && isFunction(slots.expand))\n return slots.expand(scope)\n\n if (column.slot && slots[column.slot])\n return slots[column.slot](scope)\n\n if (column.type === 'sort' && isFunction(slots.sort))\n return <div class={ns.b('draggable')}>{slots.sort(scope)}</div>\n\n if (column.type === 'sort' && isFunction(column.render))\n return <div class={ns.b('draggable')}>{column.render(scope)}</div>\n\n if (isFunction(column.render))\n return column.render(scope)\n\n if (column.type === 'button' && isArray(column.buttons)) {\n return (\n <div class={ns.e('operation')}>\n {column.buttons?.map((button) => {\n return <TableButton button={button} scope={scope} size={size} />\n })}\n </div>\n )\n }\n\n if (column.type === 'sort')\n return <div class={ns.b('draggable')}><ElIcon class={ns.be('draggable', 'handle')} size={24}><Operation /></ElIcon></div>\n\n if (tableProps.editable) {\n return scope.row.__isEdit === true\n ? (\n <ElFormItem prop={`tableData.${scope.$index}.${column.prop}`} rules={getRules()} class={[ns.b('form-item'), ns.bm('form-item', size)]}>\n {renderCustomComponent()}\n </ElFormItem>\n )\n : <span>{getLabel(scope.row)}</span>\n }\n\n // warning\n if ((column.slot && !slots[column.slot]) || (column.type === 'expand' && !isFunction(slots.expand)))\n return null\n\n return renderCustomComponent()\n }\n }\n\n if (isSlot(column.label) && slots[column.label as string]) {\n scopedSlots.value.header = (scope: TableColumnScopeData) =>\n slots[column.label as string](scope)\n }\n if (isFunction(column.label))\n scopedSlots.value.header = (scope: TableColumnScopeData) => (column.label as (scope: TableColumnScopeData) => VNode)(scope)\n\n if (!isSlot(column.label) && !isFunction(column.label) && column.tooltip) {\n const tooltip = column.tooltip\n const tooltipProps = isObject(tooltip)\n ? tooltip\n : { content: isString(tooltip) ? tooltip : '' }\n const tooltipSlot: any = {}\n\n scopedSlots.value.header = (scope: TableColumnScopeData) => {\n if (isFunction(tooltip))\n tooltipSlot.content = () => tooltip(scope)\n return (\n <span>\n {column.label}\n <ElTooltip\n effect=\"dark\"\n placement=\"top\"\n {...tooltipProps}\n v-slots={tooltipSlot}\n >\n {tooltip && (\n <ElIcon class={ns.be('label', 'icon')}>\n <QuestionFilled />\n </ElIcon>\n )}\n </ElTooltip>\n </span>\n )\n }\n }\n },\n { immediate: true, deep: true },\n )\n\n return { scopedSlots }\n}\n"],"names":["_isSlot","s","vue","getDynamicComponentName","type","zNames","propComponentName","useTableColumnSlots","props","slots","emit","scopedSlots","ns","useNamespace","t","column","options","prop","is","_a","_b","item","row","_c","label","rules","required","watch","tableProps","events","getEventsFromCamel","scope","val","rowData","size","button","default","_slot","tooltip","content","tooltipSlot","tooltipProps","immediate","deep"],"mappings":"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"}