element-plus/es/components/input-tag/src/composables/use-input-tag-dom.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-input-tag-dom.mjs","names":[],"sources":["../../../../../../../packages/components/input-tag/src/composables/use-input-tag-dom.ts"],"sourcesContent":["import { computed, reactive, ref, useAttrs, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { MINIMUM_INPUT_WIDTH } from '@element-plus/constants'\nimport { useResizeObserver } from '@vueuse/core'\n\nimport type { ComputedRef, Ref, StyleValue } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { IconComponent } from '@element-plus/utils'\nimport type { InputTagProps } from '../input-tag'\n\ninterface UseInputTagDomOptions {\n  props: InputTagProps\n  isFocused: Ref<boolean>\n  hovering: Ref<boolean>\n  disabled: ComputedRef<boolean>\n  inputValue: Ref<string | undefined>\n  size: ComputedRef<ComponentSize>\n  validateState: ComputedRef<string>\n  validateIcon: ComputedRef<'' | IconComponent>\n  needStatusIcon: ComputedRef<boolean>\n}\n\nexport function useInputTagDom({\n  props,\n  isFocused,\n  hovering,\n  disabled,\n  inputValue,\n  size,\n  validateState,\n  validateIcon,\n  needStatusIcon,\n}: UseInputTagDomOptions) {\n  const attrs = useAttrs()\n  const slots = useSlots()\n  const ns = useNamespace('input-tag')\n  const nsInput = useNamespace('input')\n\n  const collapseItemRef = ref<HTMLElement>()\n  const innerRef = ref<HTMLElement>()\n\n  const containerKls = computed(() => [\n    ns.b(),\n    ns.is('focused', isFocused.value),\n    ns.is('hovering', hovering.value),\n    ns.is('disabled', disabled.value),\n    ns.m(size.value),\n    ns.e('wrapper'),\n    attrs.class,\n  ])\n  const containerStyle = computed<StyleValue>(() => [attrs.style as StyleValue])\n  const innerKls = computed(() => [\n    ns.e('inner'),\n    ns.is('draggable', props.draggable),\n    ns.is('left-space', !props.modelValue?.length && !slots.prefix),\n    ns.is('right-space', !props.modelValue?.length && !showSuffix.value),\n  ])\n  const showClear = computed(() => {\n    return (\n      props.clearable &&\n      !disabled.value &&\n      !props.readonly &&\n      (props.modelValue?.length || inputValue.value) &&\n      (isFocused.value || hovering.value)\n    )\n  })\n  const showSuffix = computed(() => {\n    return (\n      slots.suffix ||\n      showClear.value ||\n      (validateState.value && validateIcon.value && needStatusIcon.value)\n    )\n  })\n\n  const states = reactive({\n    innerWidth: 0,\n    collapseItemWidth: 0,\n  })\n\n  const getGapWidth = () => {\n    if (!innerRef.value) return 0\n    const style = window.getComputedStyle(innerRef.value)\n    return Number.parseFloat(style.gap || '6px')\n  }\n\n  const resetInnerWidth = () => {\n    states.innerWidth = Number.parseFloat(\n      window.getComputedStyle(innerRef.value!).width\n    )\n  }\n\n  const resetCollapseItemWidth = () => {\n    states.collapseItemWidth =\n      collapseItemRef.value!.getBoundingClientRect().width\n  }\n\n  const tagStyle = computed(() => {\n    if (!props.collapseTags) return {}\n    const gapWidth = getGapWidth()\n\n    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH\n\n    const maxWidth =\n      collapseItemRef.value && props.maxCollapseTags === 1\n        ? states.innerWidth -\n          states.collapseItemWidth -\n          gapWidth -\n          inputSlotWidth\n        : states.innerWidth - inputSlotWidth\n\n    return { maxWidth: `${Math.max(maxWidth, 0)}px` }\n  })\n\n  useResizeObserver(innerRef, resetInnerWidth)\n  useResizeObserver(collapseItemRef, resetCollapseItemWidth)\n\n  return {\n    ns,\n    nsInput,\n    containerKls,\n    containerStyle,\n    innerKls,\n    showClear,\n    showSuffix,\n    tagStyle,\n    collapseItemRef,\n    innerRef,\n  }\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,eAAe,EAC7B,OACA,WACA,UACA,UACA,YACA,MACA,eACA,cACA,kBACwB;CACxB,MAAM,QAAQ,UAAU;CACxB,MAAM,QAAQ,UAAU;CACxB,MAAM,KAAK,aAAa,YAAY;CACpC,MAAM,UAAU,aAAa,QAAQ;CAErC,MAAM,kBAAkB,KAAkB;CAC1C,MAAM,WAAW,KAAkB;CAEnC,MAAM,eAAe,eAAe;EAClC,GAAG,GAAG;EACN,GAAG,GAAG,WAAW,UAAU,MAAM;EACjC,GAAG,GAAG,YAAY,SAAS,MAAM;EACjC,GAAG,GAAG,YAAY,SAAS,MAAM;EACjC,GAAG,EAAE,KAAK,MAAM;EAChB,GAAG,EAAE,UAAU;EACf,MAAM;EACP,CAAC;CACF,MAAM,iBAAiB,eAA2B,CAAC,MAAM,MAAoB,CAAC;CAC9E,MAAM,WAAW,eAAe;EAC9B,GAAG,EAAE,QAAQ;EACb,GAAG,GAAG,aAAa,MAAM,UAAU;EACnC,GAAG,GAAG,cAAc,CAAC,MAAM,YAAY,UAAU,CAAC,MAAM,OAAO;EAC/D,GAAG,GAAG,eAAe,CAAC,MAAM,YAAY,UAAU,CAAC,WAAW,MAAM;EACrE,CAAC;CACF,MAAM,YAAY,eAAe;AAC/B,SACE,MAAM,aACN,CAAC,SAAS,SACV,CAAC,MAAM,aACN,MAAM,YAAY,UAAU,WAAW,WACvC,UAAU,SAAS,SAAS;GAE/B;CACF,MAAM,aAAa,eAAe;AAChC,SACE,MAAM,UACN,UAAU,SACT,cAAc,SAAS,aAAa,SAAS,eAAe;GAE/D;CAEF,MAAM,SAAS,SAAS;EACtB,YAAY;EACZ,mBAAmB;EACpB,CAAC;CAEF,MAAM,oBAAoB;AACxB,MAAI,CAAC,SAAS,MAAO,QAAO;EAC5B,MAAM,QAAQ,OAAO,iBAAiB,SAAS,MAAM;AACrD,SAAO,OAAO,WAAW,MAAM,OAAO,MAAM;;CAG9C,MAAM,wBAAwB;AAC5B,SAAO,aAAa,OAAO,WACzB,OAAO,iBAAiB,SAAS,MAAO,CAAC,MAC1C;;CAGH,MAAM,+BAA+B;AACnC,SAAO,oBACL,gBAAgB,MAAO,uBAAuB,CAAC;;CAGnD,MAAM,WAAW,eAAe;AAC9B,MAAI,CAAC,MAAM,aAAc,QAAO,EAAE;EAClC,MAAM,WAAW,aAAa;EAE9B,MAAM,iBAAiB,WAAW;EAElC,MAAM,WACJ,gBAAgB,SAAS,MAAM,oBAAoB,IAC/C,OAAO,aACP,OAAO,oBACP,WACA,iBACA,OAAO,aAAa;AAE1B,SAAO,EAAE,UAAU,GAAG,KAAK,IAAI,UAAU,EAAE,CAAC,KAAK;GACjD;AAEF,mBAAkB,UAAU,gBAAgB;AAC5C,mBAAkB,iBAAiB,uBAAuB;AAE1D,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}