element-plus/es/components/form/src/form-label-wrap.mjs.map

A Component Library for Vue 3

{"version":3,"file":"form-label-wrap.mjs","names":["Fragment","computed","defineComponent","inject","nextTick","onBeforeUnmount","onMounted","onUpdated","ref","watch","createVNode","_createVNode","_Fragment","useResizeObserver","throwError","useNamespace","formContextKey","formItemContextKey","COMPONENT_NAME","name","props","isAutoWidth","Boolean","updateAll","setup","slots","formContext","undefined","formItemContext","ns","el","computedWidth","getLabelWidth","value","firstElementChild","width","window","getComputedStyle","Math","ceil","Number","parseFloat","updateLabelWidth","action","default","deregisterLabelWidth","updateLabelWidthFn","val","oldVal","registerLabelWidth","autoLabelWidth","hasLabel","style","marginWidth","max","parseInt","labelPosition","marginPosition","be"],"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":";;;;;;;AAmBA,MAAMkB,iBAAiB;AACvB,8BAAehB,gCAAgB;CAC7BiB,MAAMD;CACNE,OAAO;EACLC,aAAaC;EACbC,WAAWD;EACZ;CAEDE,MAAMJ,OAAO,EAAEK,SAAS;EACtB,MAAMC,cAAcvB,OAAOa,gBAAgBW,OAAU;EACrD,MAAMC,kBAAkBzB,OAAOc,mBAAmB;AAClD,MAAI,CAACW,gBACHd,YACEI,gBACA,qDACD;EAEH,MAAMW,KAAKd,aAAa,OAAO;EAE/B,MAAMe,KAAKtB,KAAkB;EAC7B,MAAMuB,gBAAgBvB,IAAI,EAAE;EAE5B,MAAMwB,sBAAsB;AAC1B,OAAIF,GAAGG,OAAOC,mBAAmB;IAC/B,MAAMC,QAAQC,OAAOC,iBAAiBP,GAAGG,MAAMC,kBAAkB,CAACC;AAClE,WAAOG,KAAKC,KAAKC,OAAOC,WAAWN,MAAM,CAAC;SAE1C,QAAO;;EAIX,MAAMO,oBAAoBC,SAA8B,aAAa;AACnEvC,kBAAe;AACb,QAAIqB,MAAMmB,WAAWxB,MAAMC,aACzB;SAAIsB,WAAW,SACbZ,eAAcE,QAAQD,eAAe;cAC5BW,WAAW,SACpBjB,cAAamB,qBAAqBd,cAAcE,MAAM;;KAG1D;;EAEJ,MAAMa,2BAA2BJ,iBAAiB,SAAS;AAE3DpC,kBAAgB;AACdwC,uBAAoB;IACpB;AACFzC,wBAAsB;AACpBqC,oBAAiB,SAAS;IAC1B;AACFnC,kBAAgBuC,oBAAoB,CAAC;AAErCrC,QAAMsB,gBAAgBgB,KAAKC,WAAW;AACpC,OAAI5B,MAAMG,UACRG,cAAauB,mBAAmBF,KAAKC,OAAO;IAE9C;AAEFnC,oBACEZ,eACS6B,GAAGG,OAAOC,qBAAqB,KACvC,EACDY,mBACD;AAED,eAAa;AACX,OAAI,CAACrB,MAAO,QAAO;GAEnB,MAAM,EAAEJ,gBAAgBD;AACxB,OAAIC,aAAa;IACf,MAAM6B,iBAAiBxB,aAAawB;IACpC,MAAMC,WAAWvB,iBAAiBuB;IAClC,MAAMC,QAAuB,EAAE;AAC/B,QAAID,YAAYD,kBAAkBA,mBAAmB,QAAQ;KAC3D,MAAMG,cAAcf,KAAKgB,IACvB,GACAd,OAAOe,SAASL,gBAAgB,GAAG,GAAGnB,cAAcE,MACrD;KAID,MAAMwB,kBAFJ7B,gBAAgB4B,iBAAiB9B,YAAY8B,mBAG3B,SAAS,gBAAgB;AAE7C,SAAIH,YACFD,OAAMK,kBAAkB,GAAGJ,YAAW;;AAG1C,WAAA1C,YAAA,OAAA;KAAA,OACYmB;KAAE,SAAS,CAACD,GAAG6B,GAAG,QAAQ,aAAa,CAAC;KAAA,SAASN;KAAK,EAAA,CAC7D3B,MAAMmB,WAAW,CAAA,CAAA;SAItB,QAAAjC,YAAAC,UAAA,EAAA,OAAsBkB,IAAE,EAAA,CAAGL,MAAMmB,WAAW,CAAA,CAAA;;;CAInD,CAAC"}