f3f2fad7653062af590b4c708f11b5c17dc2dd93b87fbede612a6e73e68cb98b36550ba6d6f322270985c0ead047bfc9f7611bf98af8fbe3c02173bf2228cb 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { defineComponent, inject, ref, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment, nextTick } from 'vue';
  2. import { useResizeObserver } from '@vueuse/core';
  3. import { formContextKey, formItemContextKey } from './constants.mjs';
  4. import { throwError } from '../../../utils/error.mjs';
  5. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  6. const COMPONENT_NAME = "ElLabelWrap";
  7. var FormLabelWrap = defineComponent({
  8. name: COMPONENT_NAME,
  9. props: {
  10. isAutoWidth: Boolean,
  11. updateAll: Boolean
  12. },
  13. setup(props, {
  14. slots
  15. }) {
  16. const formContext = inject(formContextKey, void 0);
  17. const formItemContext = inject(formItemContextKey);
  18. if (!formItemContext)
  19. throwError(COMPONENT_NAME, "usage: <el-form-item><label-wrap /></el-form-item>");
  20. const ns = useNamespace("form");
  21. const el = ref();
  22. const computedWidth = ref(0);
  23. const getLabelWidth = () => {
  24. var _a;
  25. if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {
  26. const width = window.getComputedStyle(el.value.firstElementChild).width;
  27. return Math.ceil(Number.parseFloat(width));
  28. } else {
  29. return 0;
  30. }
  31. };
  32. const updateLabelWidth = (action = "update") => {
  33. nextTick(() => {
  34. if (slots.default && props.isAutoWidth) {
  35. if (action === "update") {
  36. computedWidth.value = getLabelWidth();
  37. } else if (action === "remove") {
  38. formContext == null ? void 0 : formContext.deregisterLabelWidth(computedWidth.value);
  39. }
  40. }
  41. });
  42. };
  43. const updateLabelWidthFn = () => updateLabelWidth("update");
  44. onMounted(() => {
  45. updateLabelWidthFn();
  46. });
  47. onBeforeUnmount(() => {
  48. updateLabelWidth("remove");
  49. });
  50. onUpdated(() => updateLabelWidthFn());
  51. watch(computedWidth, (val, oldVal) => {
  52. if (props.updateAll) {
  53. formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);
  54. }
  55. });
  56. useResizeObserver(computed(() => {
  57. var _a, _b;
  58. return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
  59. }), updateLabelWidthFn);
  60. return () => {
  61. var _a, _b;
  62. if (!slots)
  63. return null;
  64. const {
  65. isAutoWidth
  66. } = props;
  67. if (isAutoWidth) {
  68. const autoLabelWidth = formContext == null ? void 0 : formContext.autoLabelWidth;
  69. const hasLabel = formItemContext == null ? void 0 : formItemContext.hasLabel;
  70. const style = {};
  71. if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
  72. const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
  73. const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
  74. const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
  75. if (marginWidth) {
  76. style[marginPosition] = `${marginWidth}px`;
  77. }
  78. }
  79. return createVNode("div", {
  80. "ref": el,
  81. "class": [ns.be("item", "label-wrap")],
  82. "style": style
  83. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
  84. } else {
  85. return createVNode(Fragment, {
  86. "ref": el
  87. }, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
  88. }
  89. };
  90. }
  91. });
  92. export { FormLabelWrap as default };
  93. //# sourceMappingURL=form-label-wrap.mjs.map