@vuesax-alpha/nightly/es/components/select/src/select2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"select2.mjs","sources":["../../../../../../packages/components/select/src/select.vue"],"sourcesContent":["<template>\n  <vs-popper\n    ref=\"popperRef\"\n    v-model:visible=\"dropMenuVisible\"\n    trigger=\"click\"\n    placement=\"bottom\"\n    persistent\n    :animation=\"optionsAnimation\"\n    :flip=\"flip\"\n    :fit=\"fit\"\n    :hide-after=\"hideAfter\"\n    :show-after=\"showAfter\"\n    :loading=\"loading\"\n    :disabled=\"disabled\"\n    :on-blur=\"onBlur\"\n    :on-focus=\"onFocus\"\n    :on-click=\"onClick\"\n    :on-contextmenu=\"onContextmenu\"\n    :on-mouseenter=\"onMouseenter\"\n    :on-mouseleave=\"onMouseleave\"\n    :on-keydown=\"onKeydown\"\n    :teleported=\"teleported\"\n    :strategy=\"strategy\"\n    :popper-class=\"[ns.e('content'), useVuesaxBaseComponent(color)]\"\n    :popper-style=\"colorCssVar\"\n    :show-arrow=\"false\"\n    :offset=\"0\"\n    :process-before-open=\"processBeforeOpen\"\n    :process-before-close=\"processBeforeClose\"\n    @show=\"handleMenuEnter\"\n  >\n    <div\n      ref=\"selectWrapper\"\n      v-click-outside:[popperPaneRef]=\"handleClose\"\n      :class=\"selectKls\"\n      :style=\"selectStyle\"\n      @mouseenter=\"handleMouseEnter\"\n      @mouseleave=\"handleMouseLeave\"\n      @click=\"toggleMenu\"\n    >\n      <div v-if=\"multiple\" ref=\"chips\" :class=\"[ns.e('chips')]\">\n        <vs-chip\n          v-for=\"(item, cIndex) in showTagList\"\n          :key=\"cIndex + 'chip'\"\n          :shape=\"shape\"\n          :disabled=\"selectDisabled || item.isDisabled\"\n          :hit=\"item.hit\"\n          @close=\"deleteTag(item.value)\"\n        >\n          {{ item.currentLabel }}\n        </vs-chip>\n\n        <vs-chip\n          v-if=\"collapseChips && selectedArray.length > maxCollapseChips\"\n          :show-close=\"false\"\n          :shape=\"shape\"\n          :hit=\"collapseTagList.some((item) => item.hit)\"\n        >\n          + {{ selectedArray.length - maxCollapseChips }}\n        </vs-chip>\n\n        <input\n          v-if=\"filter && !selectDisabled\"\n          ref=\"input\"\n          v-model=\"query\"\n          type=\"text\"\n          :class=\"[\n            ns.e('input-filter'),\n            ns.is('disabled', selectDisabled),\n            ns.be('chips', 'input'),\n          ]\"\n          :placeholder=\"states.selectedLabel ? '' : states.query ?? ''\"\n          :disabled=\"selectDisabled\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @mouseenter=\"handleTarget('input-filter')\"\n          @mouseleave=\"handleTarget(null)\"\n          @keyup=\"managePlaceholder\"\n          @keydown.down.prevent=\"navigateOptions('next')\"\n          @keydown.up.prevent=\"navigateOptions('prev')\"\n          @keydown.esc=\"handleKeydownEscape\"\n          @keydown.enter.stop.prevent=\"selectOption\"\n          @keydown.delete=\"deletePrevTag\"\n          @keydown.tab=\"visible = false\"\n          @compositionstart=\"handleComposition\"\n          @compositionupdate=\"handleComposition\"\n          @compositionend=\"handleComposition\"\n          @input=\"debouncedQueryChange\"\n        />\n      </div>\n      <input\n        :id=\"inputId\"\n        ref=\"reference\"\n        v-model=\"states.selectedLabel\"\n        :class=\"[ns.e('input'), ns.is('multiple', multiple)]\"\n        :readonly=\"readonly\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @mouseenter=\"handleTarget('input-filter', !readonly)\"\n        @mouseleave=\"handleTarget(null)\"\n        @input=\"debouncedOnInputChange\"\n        @paste=\"debouncedOnInputChange\"\n        @compositionstart=\"handleComposition\"\n        @compositionupdate=\"handleComposition\"\n        @compositionend=\"handleComposition\"\n        @keydown.down.prevent=\"navigateOptions('next')\"\n        @keydown.up.prevent=\"navigateOptions('prev')\"\n        @keydown.enter.prevent=\"selectOption\"\n        @keydown.esc=\"handleKeydownEscape\"\n        @keydown.tab=\"states.visible = false\"\n      />\n\n      <label\n        v-if=\"label\"\n        :for=\"inputId\"\n        :class=\"[\n          ns.e('label'),\n          ns.is(\n            'placeholder',\n            labelFloat &&\n              !dropMenuVisible &&\n              (isEqual(modelValue, notValue) ||\n                (!modelValue && modelValue != 0))\n          ),\n        ]\"\n      >\n        {{ label }}\n      </label>\n\n      <span\n        v-if=\"!multiple && !labelFloat && states.currentPlaceholder\"\n        :class=\"[ns.e('placeholder'), ns.is('hidden', !!modelValue)]\"\n      >\n        {{ states.currentPlaceholder }}\n      </span>\n\n      <icon-loading v-if=\"loading\" class=\"vs-select__loading\" />\n\n      <vs-icon :class=\"ns.e('arrow')\" size=\"14\"><chevron-down /></vs-icon>\n\n      <transition name=\"v-clearable\">\n        <span\n          v-if=\"showClose\"\n          :class=\"ns.e('clearable')\"\n          @click=\"handleClearClick\"\n        >\n          <icon-close hover=\"less\" scale=\"0.675\" />\n        </span>\n      </transition>\n\n      <vs-collapse-transition\n        v-for=\"(messageType, index) in messageTypes\"\n        :key=\"index\"\n      >\n        <div\n          v-if=\"$slots[`message-${messageType}`]\"\n          :class=\"[ns.e('message'), ns.em('message', messageType)]\"\n        >\n          <slot :name=\"`message-${messageType}`\" />\n        </div>\n      </vs-collapse-transition>\n    </div>\n\n    <template #content>\n      <vs-scrollbar\n        v-show=\"states.options.size > 0 && !loading\"\n        max-height=\"200\"\n        thickness=\"3\"\n        :wrap-class=\"[\n          ns.e('options'),\n          ns.is(\n            'empty',\n            !allowCreate && Boolean(query) && states.filteredOptionsCount === 0\n          ),\n        ]\"\n        :native=\"nativeScrollbar\"\n        @mouseleave=\"hoverIndex = -1\"\n      >\n        <vs-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n        <slot />\n      </vs-scrollbar>\n\n      <template\n        v-if=\"\n          emptyText &&\n          (!allowCreate ||\n            loading ||\n            (allowCreate && states.options.size === 0))\n        \"\n      >\n        <slot v-if=\"$slots.empty\" name=\"empty\" />\n        <p v-else :class=\"ns.em('options', 'empty')\">\n          {{ emptyText }}\n        </p>\n      </template>\n    </template>\n  </vs-popper>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, provide, reactive, toRef } from 'vue'\nimport { toRefs, unrefElement, useResizeObserver } from '@vueuse/core'\nimport { isEqual } from 'lodash-unified'\nimport { ClickOutside as vClickOutside } from '@vuesax-alpha/directives'\nimport { UPDATE_MODEL_EVENT } from '@vuesax-alpha/constants'\nimport VsIcon, { IconClose, IconLoading } from '@vuesax-alpha/components/icon'\nimport VsCollapseTransition from '@vuesax-alpha/components/collapse-transition'\nimport VsScrollbar from '@vuesax-alpha/components/scrollbar'\nimport VsPopper from '@vuesax-alpha/components/popper'\nimport { ChevronDown } from '@vuesax-alpha/icons-vue'\nimport {\n  useColor,\n  useNamespace,\n  useVuesaxBaseComponent,\n} from '@vuesax-alpha/hooks'\nimport { getVsColor } from '@vuesax-alpha/utils'\nimport VsOption from './option.vue'\nimport VsChip from './chip.vue'\nimport { selectContextKey, selectRegisterKey } from './tokens'\nimport { selectEmits, selectProps } from './select'\nimport { useSelect, useSelectStates } from './useSelect'\nimport type { SelectOptionContext } from './tokens'\n\ndefineOptions({\n  name: 'VsSelect',\n  inheritAttrs: false,\n})\n\nconst messageTypes = ['success', 'warn', 'danger', 'primary', 'dark']\n\nconst props = defineProps(selectProps)\nconst emit = defineEmits(selectEmits)\nconst ns = useNamespace('select')\n\nconst states = useSelectStates(props)\n\nconst color = useColor('primary')\n\nconst colorCssVar = computed(() =>\n  ns.cssVar({\n    color: getVsColor(color.value),\n  })\n)\n\nconst optionsAnimation = computed(() => ns.b())\n\nconst {\n  showNewOption,\n  debouncedQueryChange,\n  managePlaceholder,\n  deletePrevTag,\n  deleteTag,\n  handleClearClick,\n  showClose,\n  inputId,\n  emptyText,\n  readonly,\n  input,\n  reference,\n\n  showTagList,\n  collapseTagList,\n  chips,\n  popperRef,\n  selectDisabled,\n  selectWrapper,\n  handleMouseEnter,\n  handleMouseLeave,\n  handleTarget,\n  selectOption,\n  handleComposition,\n  navigateOptions,\n  handleKeydownEscape,\n  dropMenuVisible,\n  debouncedOnInputChange,\n  handleFocus,\n  handleBlur,\n  toggleMenu,\n  handleMenuEnter,\n  handleResize,\n  setSelected,\n  handleClose,\n  onOptionCreate,\n  onOptionDestroy,\n  handleOptionSelect,\n  focus,\n  blur,\n\n  processBeforeOpen,\n  processBeforeClose,\n\n  queryChange,\n\n  optionsArray,\n  cachedOptionsArray,\n  selectedArray,\n} = useSelect(props, states, emit)\n\nconst { visible, hoverIndex, query } = toRefs(states)\n\n// @ts-ignore - directive: v-click-outside element\nconst popperPaneRef = computed(() => {\n  return unrefElement(popperRef.value?.contentRef)\n})\n\nif (props.multiple && !Array.isArray(props.modelValue)) {\n  emit(UPDATE_MODEL_EVENT, [])\n}\n\nif (!props.multiple && Array.isArray(props.modelValue)) {\n  emit(UPDATE_MODEL_EVENT, '')\n}\n\nconst selectKls = computed(() => [\n  ns.is('block', props.block),\n\n  ns.b(),\n  ns.em('state', props.state),\n  ns.is('open', dropMenuVisible.value),\n  ns.is('hovering', states.mouseEnter),\n  ns.is('focus', states.softFocus),\n  ns.is('disabled', selectDisabled.value),\n  ns.is('multiple', props.multiple),\n  ns.is('loading', props.loading),\n  ns.is(popperRef.value?.popperPlacement ?? 'bottom'),\n  { [ns.m('has-label')]: props.label || props.labelFloat },\n])\n\nconst selectStyle = computed(() => [colorCssVar.value])\n\nonMounted(() => {\n  states.cachedPlaceHolder = states.currentPlaceholder = props.placeholder\n  if (\n    props.multiple &&\n    Array.isArray(props.modelValue) &&\n    props.modelValue.length > 0\n  ) {\n    states.currentPlaceholder = ''\n  }\n  useResizeObserver(selectWrapper, handleResize)\n\n  setSelected()\n})\n\nprovide(\n  selectContextKey,\n  reactive({\n    multiple: toRef(props, 'multiple'),\n    multipleLimit: toRef(props, 'multipleLimit'),\n    states,\n    queryChange,\n    hoverIndex,\n    selectWrapper,\n    selectedArray,\n    optionsArray,\n    cachedOptionsArray,\n    handleTarget,\n    setSelected,\n    handleOptionSelect,\n  })\n)\n\nprovide(selectRegisterKey, (option: SelectOptionContext) => {\n  option.index = states.optionsCount\n\n  onOptionCreate(option.value, option)\n\n  return {\n    updateOption: (newOption: SelectOptionContext) => {\n      onOptionDestroy(option.value, option)\n      onOptionCreate(newOption.value, newOption)\n    },\n    unregister: () => {\n      const doesSelected = selectedArray.value.some(\n        (e) => e.value == option.value\n      )\n      // if option is not selected, remove it from cache\n      nextTick(() => {\n        if (\n          states.cachedOptions.get(option.value) === option &&\n          !doesSelected\n        ) {\n          states.cachedOptions.delete(option.value)\n        }\n      })\n      onOptionDestroy(option.value, option)\n    },\n  }\n})\n\ndefineExpose({\n  /** focus to select */\n  focus,\n\n  /** blur select */\n  blur,\n})\n</script>\n"],"names":[],"mappings":"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"}