You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.8 KiB
1 line
9.8 KiB
{"ast":null,"code":"import { defineComponent, inject, ref, nextTick, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment } from 'vue';\nimport { useResizeObserver } from '@vueuse/core';\nimport '../../../utils/index.mjs';\nimport '../../../hooks/index.mjs';\nimport { formContextKey, formItemContextKey } from './constants.mjs';\nimport { throwError } from '../../../utils/error.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nconst COMPONENT_NAME = \"ElLabelWrap\";\nvar FormLabelWrap = defineComponent({\n name: COMPONENT_NAME,\n props: {\n isAutoWidth: Boolean,\n updateAll: Boolean\n },\n setup(props, {\n slots\n }) {\n const formContext = inject(formContextKey, void 0);\n const formItemContext = inject(formItemContextKey);\n if (!formItemContext) throwError(COMPONENT_NAME, \"usage: <el-form-item><label-wrap /></el-form-item>\");\n const ns = useNamespace(\"form\");\n const el = ref();\n const computedWidth = ref(0);\n const getLabelWidth = () => {\n var _a;\n if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {\n const width = window.getComputedStyle(el.value.firstElementChild).width;\n return Math.ceil(Number.parseFloat(width));\n } else {\n return 0;\n }\n };\n const updateLabelWidth = (action = \"update\") => {\n nextTick(() => {\n if (slots.default && props.isAutoWidth) {\n if (action === \"update\") {\n computedWidth.value = getLabelWidth();\n } else if (action === \"remove\") {\n formContext == null ? void 0 : formContext.deregisterLabelWidth(computedWidth.value);\n }\n }\n });\n };\n const updateLabelWidthFn = () => updateLabelWidth(\"update\");\n onMounted(() => {\n updateLabelWidthFn();\n });\n onBeforeUnmount(() => {\n updateLabelWidth(\"remove\");\n });\n onUpdated(() => updateLabelWidthFn());\n watch(computedWidth, (val, oldVal) => {\n if (props.updateAll) {\n formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);\n }\n });\n useResizeObserver(computed(() => {\n var _a, _b;\n return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;\n }), updateLabelWidthFn);\n return () => {\n var _a, _b;\n if (!slots) return null;\n const {\n isAutoWidth\n } = props;\n if (isAutoWidth) {\n const autoLabelWidth = formContext == null ? void 0 : formContext.autoLabelWidth;\n const hasLabel = formItemContext == null ? void 0 : formItemContext.hasLabel;\n const style = {};\n if (hasLabel && autoLabelWidth && autoLabelWidth !== \"auto\") {\n const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);\n const labelPosition = formItemContext.labelPosition || formContext.labelPosition;\n const marginPosition = labelPosition === \"left\" ? \"marginRight\" : \"marginLeft\";\n if (marginWidth) {\n style[marginPosition] = `${marginWidth}px`;\n }\n }\n return createVNode(\"div\", {\n \"ref\": el,\n \"class\": [ns.be(\"item\", \"label-wrap\")],\n \"style\": style\n }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);\n } else {\n return createVNode(Fragment, {\n \"ref\": el\n }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);\n }\n };\n }\n});\nexport { FormLabelWrap as default };","map":{"version":3,"names":["COMPONENT_NAME","FormLabelWrap","defineComponent","name","props","isAutoWidth","Boolean","updateAll","slots","formContext","inject","formContextKey","formItemContext","formItemContextKey","throwError","ns","useNamespace","el","ref","computedWidth","_a","value","firstElementChild","width","window","getComputedStyle","Math","ceil","Number","parseFloat","nextTick","default","action","getLabelWidth","deregisterLabelWidth","updateLabelWidthFn","updateLabelWidth","onBeforeUnmount","onUpdated","val","oldVal","registerLabelWidth","useResizeObserver","computed","_b","autoLabelWidth","hasLabel","marginWidth","max","parseInt","labelPosition","marginPosition","style","createVNode","be","call","Fragment"],"sources":["../../../../../../packages/components/form/src/form-label-wrap.tsx"],"sourcesContent":["import {\n Fragment,\n computed,\n defineComponent,\n inject,\n nextTick,\n onBeforeUnmount,\n onMounted,\n onUpdated,\n ref,\n watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { formContextKey, formItemContextKey } from './constants'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElLabelWrap'\nexport default defineComponent({\n name: COMPONENT_NAME,\n props: {\n isAutoWidth: Boolean,\n updateAll: Boolean,\n },\n\n setup(props, { slots }) {\n const formContext = inject(formContextKey, undefined)\n const formItemContext = inject(formItemContextKey)\n if (!formItemContext)\n throwError(\n COMPONENT_NAME,\n 'usage: <el-form-item><label-wrap /></el-form-item>'\n )\n\n const ns = useNamespace('form')\n\n const el = ref<HTMLElement>()\n const computedWidth = ref(0)\n\n const getLabelWidth = () => {\n if (el.value?.firstElementChild) {\n const width = window.getComputedStyle(el.value.firstElementChild).width\n return Math.ceil(Number.parseFloat(width))\n } else {\n return 0\n }\n }\n\n const updateLabelWidth = (action: 'update' | 'remove' = 'update') => {\n nextTick(() => {\n if (slots.default && props.isAutoWidth) {\n if (action === 'update') {\n computedWidth.value = getLabelWidth()\n } else if (action === 'remove') {\n formContext?.deregisterLabelWidth(computedWidth.value)\n }\n }\n })\n }\n const updateLabelWidthFn = () => updateLabelWidth('update')\n\n onMounted(() => {\n updateLabelWidthFn()\n })\n onBeforeUnmount(() => {\n updateLabelWidth('remove')\n })\n onUpdated(() => updateLabelWidthFn())\n\n watch(computedWidth, (val, oldVal) => {\n if (props.updateAll) {\n formContext?.registerLabelWidth(val, oldVal)\n }\n })\n\n useResizeObserver(\n computed(\n () => (el.value?.firstElementChild ?? null) as HTMLElement | null\n ),\n updateLabelWidthFn\n )\n\n return () => {\n if (!slots) return null\n\n const { isAutoWidth } = props\n if (isAutoWidth) {\n const autoLabelWidth = formContext?.autoLabelWidth\n const hasLabel = formItemContext?.hasLabel\n const style: CSSProperties = {}\n if (hasLabel && autoLabelWidth && autoLabelWidth !== 'auto') {\n const marginWidth = Math.max(\n 0,\n Number.parseInt(autoLabelWidth, 10) - computedWidth.value\n )\n const labelPosition =\n formItemContext.labelPosition || formContext.labelPosition\n\n const marginPosition =\n labelPosition === 'left' ? 'marginRight' : 'marginLeft'\n\n if (marginWidth) {\n style[marginPosition] = `${marginWidth}px`\n }\n }\n return (\n <div ref={el} class={[ns.be('item', 'label-wrap')]} style={style}>\n {slots.default?.()}\n </div>\n )\n } else {\n return <Fragment ref={el}>{slots.default?.()}</Fragment>\n }\n }\n },\n})\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |