ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 8.83 kB
Source Map (JSON)
{"version":3,"file":"form-label-wrap.mjs","sources":["../../../../../src/components/ivue-form/form-label-wrap.tsx"],"sourcesContent":["import {\r\n defineComponent,\r\n inject,\r\n Fragment,\r\n ref,\r\n onMounted,\r\n nextTick,\r\n onBeforeUnmount,\r\n onUpdated,\r\n watch,\r\n computed,\r\n} from 'vue';\r\nimport { useResizeObserver } from '@vueuse/core';\r\n\r\n// type\r\nimport type { CSSProperties } from 'vue';\r\n\r\n// type\r\nimport { FormContextKey } from './types/form';\r\nimport { FormItemContextKey } from './types/form-item';\r\n\r\n// type\r\ntype Props = {\r\n isAutoWidth: boolean;\r\n updateAll: boolean;\r\n};\r\n\r\n// prefixCls\r\nconst prefixCls = 'ivue-form-label-wrap';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 标签宽度auto\r\n *\r\n * @type {Boolean}\r\n */\r\n isAutoWidth: {\r\n type: Boolean,\r\n },\r\n /**\r\n * form 设置宽度为 auto 更新所有 item\r\n *\r\n * @type {Boolean}\r\n */\r\n updateAll: {\r\n type: Boolean,\r\n },\r\n },\r\n setup(props: Props, { slots }) {\r\n const formContext = inject(FormContextKey, undefined);\r\n const formItemContext = inject(FormItemContextKey, undefined);\r\n\r\n // dom\r\n const el = ref<HTMLElement>();\r\n\r\n // 标签宽度\r\n const computedWidth = ref<number>(0);\r\n\r\n // methods\r\n\r\n // 获取标签宽度\r\n const getLabelWidth = () => {\r\n // 第一个元素\r\n if (el.value?.firstElementChild) {\r\n const width = window.getComputedStyle(el.value.firstElementChild).width;\r\n\r\n // width\r\n return Math.ceil(Number.parseFloat(width));\r\n }\r\n // 没有元素\r\n else {\r\n return 0;\r\n }\r\n };\r\n\r\n // 更新标签宽度\r\n const updateLabelWidth = (action: 'update' | 'remove' = 'update') => {\r\n nextTick(() => {\r\n // 有 slots && 标签宽度 auto\r\n if (slots.default && props.isAutoWidth) {\r\n // 更新\r\n if (action === 'update') {\r\n // 标签宽度\r\n computedWidth.value = getLabelWidth();\r\n }\r\n // 删除\r\n else if (action === 'remove') {\r\n // 销毁标签宽度\r\n formContext?.deregisterLabelWidth(computedWidth.value);\r\n }\r\n }\r\n });\r\n };\r\n\r\n // 更新标签宽度\r\n const updateLabelWidthCallback = () => updateLabelWidth('update');\r\n\r\n // onMounted\r\n onMounted(() => {\r\n updateLabelWidthCallback();\r\n });\r\n\r\n // onUpdated\r\n onUpdated(() => {\r\n updateLabelWidthCallback();\r\n });\r\n\r\n // onBeforeUnmount\r\n onBeforeUnmount(() => {\r\n updateLabelWidth('remove');\r\n });\r\n\r\n // 绑定resize\r\n useResizeObserver(\r\n computed(\r\n () => (el.value?.firstElementChild ?? null) as HTMLElement | null\r\n ),\r\n // 更新标签宽度\r\n updateLabelWidthCallback\r\n );\r\n\r\n // watch\r\n\r\n // 监听标签宽度\r\n watch(computedWidth, (value, oldValue) => {\r\n // form 设置宽度为 auto 更新所有 item\r\n if (props.updateAll) {\r\n formContext?.registerLabelWidth(value, oldValue);\r\n }\r\n });\r\n\r\n return () => {\r\n // 没有内容\r\n if (!slots) {\r\n return null;\r\n }\r\n\r\n const { isAutoWidth } = props;\r\n\r\n // 标签宽度auto\r\n if (isAutoWidth) {\r\n // 标签宽度 auto\r\n const autoLabelWidth = formContext?.autoLabelWidth;\r\n\r\n // 有label\r\n const hasLabel = formItemContext?.hasLabel;\r\n\r\n const style: CSSProperties = {};\r\n\r\n // 有label 没有 宽度 auto\r\n if (hasLabel && autoLabelWidth && autoLabelWidth !== 'auto') {\r\n const marginWidth = Math.max(\r\n 0,\r\n Number.parseInt(autoLabelWidth, 10) - computedWidth.value\r\n );\r\n\r\n // 标签位置\r\n const marginPosition =\r\n formContext.labelPosition === 'left' ? 'marginRight' : 'marginLeft';\r\n\r\n // 有宽度\r\n if (marginWidth) {\r\n style[marginPosition] = `${marginWidth}px`;\r\n }\r\n }\r\n\r\n return (\r\n <div ref={el} class={prefixCls} style={style}>\r\n {slots.default?.()}\r\n </div>\r\n );\r\n }\r\n // 普通渲染\r\n else {\r\n return <Fragment ref={el}>{slots.default?.()}</Fragment>;\r\n }\r\n };\r\n },\r\n});\r\n"],"names":["prefixCls","defineComponent","name","props","isAutoWidth","type","Boolean","updateAll","setup","slots","formContext","inject","FormContextKey","undefined","formItemContext","FormItemContextKey","el","ref","computedWidth","getLabelWidth","value","firstElementChild","width","window","getComputedStyle","Math","ceil","Number","parseFloat","updateLabelWidth","action","nextTick","default","deregisterLabelWidth","updateLabelWidthCallback","onMounted","onUpdated","onBeforeUnmount","useResizeObserver","computed","watch","oldValue","registerLabelWidth","autoLabelWidth","hasLabel","style","marginWidth","max","parseInt","marginPosition","labelPosition","_createVNode","_Fragment"],"mappings":"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"}