| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import { defineComponent, inject, ref, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment, nextTick } from 'vue';
- import { useResizeObserver } from '@vueuse/core';
- import { formContextKey, formItemContextKey } from './constants.mjs';
- import { throwError } from '../../../utils/error.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- const COMPONENT_NAME = "ElLabelWrap";
- var FormLabelWrap = defineComponent({
- name: COMPONENT_NAME,
- props: {
- isAutoWidth: Boolean,
- updateAll: Boolean
- },
- setup(props, {
- slots
- }) {
- const formContext = inject(formContextKey, void 0);
- const formItemContext = inject(formItemContextKey);
- if (!formItemContext)
- throwError(COMPONENT_NAME, "usage: <el-form-item><label-wrap /></el-form-item>");
- const ns = useNamespace("form");
- const el = ref();
- const computedWidth = ref(0);
- const getLabelWidth = () => {
- var _a;
- if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {
- const width = window.getComputedStyle(el.value.firstElementChild).width;
- return Math.ceil(Number.parseFloat(width));
- } else {
- return 0;
- }
- };
- const updateLabelWidth = (action = "update") => {
- nextTick(() => {
- if (slots.default && props.isAutoWidth) {
- if (action === "update") {
- computedWidth.value = getLabelWidth();
- } else if (action === "remove") {
- formContext == null ? void 0 : formContext.deregisterLabelWidth(computedWidth.value);
- }
- }
- });
- };
- const updateLabelWidthFn = () => updateLabelWidth("update");
- onMounted(() => {
- updateLabelWidthFn();
- });
- onBeforeUnmount(() => {
- updateLabelWidth("remove");
- });
- onUpdated(() => updateLabelWidthFn());
- watch(computedWidth, (val, oldVal) => {
- if (props.updateAll) {
- formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);
- }
- });
- useResizeObserver(computed(() => {
- var _a, _b;
- return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
- }), updateLabelWidthFn);
- return () => {
- var _a, _b;
- if (!slots)
- return null;
- const {
- isAutoWidth
- } = props;
- if (isAutoWidth) {
- const autoLabelWidth = formContext == null ? void 0 : formContext.autoLabelWidth;
- const hasLabel = formItemContext == null ? void 0 : formItemContext.hasLabel;
- const style = {};
- if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
- const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
- const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
- const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
- if (marginWidth) {
- style[marginPosition] = `${marginWidth}px`;
- }
- }
- return createVNode("div", {
- "ref": el,
- "class": [ns.be("item", "label-wrap")],
- "style": style
- }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
- } else {
- return createVNode(Fragment, {
- "ref": el
- }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
- }
- };
- }
- });
- export { FormLabelWrap as default };
- //# sourceMappingURL=form-label-wrap.mjs.map
|