ivue-material-plus
Version:
A high quality UI components Library with Vue.js
101 lines (98 loc) • 3.25 kB
JavaScript
import { defineComponent, inject, ref, nextTick, onMounted, onUpdated, onBeforeUnmount, computed, watch, createVNode, Fragment } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { FormContextKey } from './types/form.mjs';
import { FormItemContextKey } from './types/form-item.mjs';
const prefixCls = "ivue-form-label-wrap";
var FormLabelWrap = defineComponent({
name: prefixCls,
props: {
isAutoWidth: {
type: Boolean
},
updateAll: {
type: Boolean
}
},
setup(props, {
slots
}) {
const formContext = inject(FormContextKey, void 0);
const formItemContext = inject(FormItemContextKey, void 0);
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 updateLabelWidthCallback = () => updateLabelWidth("update");
onMounted(() => {
updateLabelWidthCallback();
});
onUpdated(() => {
updateLabelWidthCallback();
});
onBeforeUnmount(() => {
updateLabelWidth("remove");
});
useResizeObserver(
computed(() => {
var _a, _b;
return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
}),
updateLabelWidthCallback
);
watch(computedWidth, (value, oldValue) => {
if (props.updateAll) {
formContext == null ? void 0 : formContext.registerLabelWidth(value, oldValue);
}
});
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 marginPosition = formContext.labelPosition === "left" ? "marginRight" : "marginLeft";
if (marginWidth) {
style[marginPosition] = `${marginWidth}px`;
}
}
return createVNode("div", {
"ref": el,
"class": prefixCls,
"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