vuestic-ui/dist/esm-node/src/components/va-select/hooks/useMaxVisibleOptions.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useMaxVisibleOptions.mjs","sources":["../../../../../../src/components/va-select/hooks/useMaxVisibleOptions.ts"],"sourcesContent":["import { computed, ref, toRef, watch, type ExtractPropTypes } from 'vue'\n\nimport { isNilValue } from '../../../utils/isNilValue'\n\nimport type { SelectOption } from '../types'\n\nexport const useMaxVisibleOptionsProps = {\n  maxVisibleOptions: { type: Number || String, default: 0 },\n}\n\ntype UseMaxVisibleOptionsProps = ExtractPropTypes<typeof useMaxVisibleOptionsProps> & { multiple: boolean, modelValue?: SelectOption | SelectOption[] }\n\nexport const useMaxVisibleOptions = (\n  props: UseMaxVisibleOptionsProps,\n  getOptionByValue: (v: SelectOption) => SelectOption,\n) => {\n  const modelValue = toRef(props, 'modelValue')\n  const isAllOptionsShown = ref(false)\n  const belowLimitSelectedOptions = ref<SelectOption[]>([])\n  const hiddenSelectedOptions = ref<SelectOption[]>([])\n\n  const hiddenSelectedOptionsAmount = computed(() => hiddenSelectedOptions.value.length)\n  const allSelectedOptions = computed(() => [...belowLimitSelectedOptions.value, ...hiddenSelectedOptions.value])\n  const visibleSelectedOptions = computed(() => {\n    if (!props.maxVisibleOptions || isAllOptionsShown.value) { return allSelectedOptions.value }\n\n    return belowLimitSelectedOptions.value\n  })\n\n  watch(modelValue, () => {\n    if (!Array.isArray(modelValue.value)) {\n      belowLimitSelectedOptions.value = [getOptionByValue(modelValue.value)]\n      hiddenSelectedOptions.value = []\n      return\n    }\n\n    const value = modelValue.value.filter((v) => !isNilValue(v)).map(getOptionByValue)\n\n    if (props.maxVisibleOptions) {\n      belowLimitSelectedOptions.value = value.slice(0, props.maxVisibleOptions)\n      hiddenSelectedOptions.value = value.slice(props.maxVisibleOptions)\n    } else {\n      belowLimitSelectedOptions.value = [...value]\n      hiddenSelectedOptions.value = []\n    }\n  }, { immediate: true })\n\n  const toggleHiddenOptionsState = () => (isAllOptionsShown.value = !isAllOptionsShown.value)\n\n  return {\n    toggleHiddenOptionsState,\n    isAllOptionsShown,\n    visibleSelectedOptions,\n    hiddenSelectedOptionsAmount,\n    allSelectedOptions,\n  }\n}\n"],"names":[],"mappings":";;AAMO,MAAM,4BAA4B;AAAA,EACvC,mBAAmB,EAAE,MAAM,UAAU,QAAQ,SAAS,EAAE;AAC1D;AAIa,MAAA,uBAAuB,CAClC,OACA,qBACG;AACG,QAAA,aAAa,MAAM,OAAO,YAAY;AACtC,QAAA,oBAAoB,IAAI,KAAK;AAC7B,QAAA,4BAA4B,IAAoB,CAAA,CAAE;AAClD,QAAA,wBAAwB,IAAoB,CAAA,CAAE;AAEpD,QAAM,8BAA8B,SAAS,MAAM,sBAAsB,MAAM,MAAM;AAC/E,QAAA,qBAAqB,SAAS,MAAM,CAAC,GAAG,0BAA0B,OAAO,GAAG,sBAAsB,KAAK,CAAC;AACxG,QAAA,yBAAyB,SAAS,MAAM;AAC5C,QAAI,CAAC,MAAM,qBAAqB,kBAAkB,OAAO;AAAE,aAAO,mBAAmB;AAAA,IAAM;AAE3F,WAAO,0BAA0B;AAAA,EAAA,CAClC;AAED,QAAM,YAAY,MAAM;AACtB,QAAI,CAAC,MAAM,QAAQ,WAAW,KAAK,GAAG;AACpC,gCAA0B,QAAQ,CAAC,iBAAiB,WAAW,KAAK,CAAC;AACrE,4BAAsB,QAAQ;AAC9B;AAAA,IACF;AAEA,UAAM,QAAQ,WAAW,MAAM,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,IAAI,gBAAgB;AAEjF,QAAI,MAAM,mBAAmB;AAC3B,gCAA0B,QAAQ,MAAM,MAAM,GAAG,MAAM,iBAAiB;AACxE,4BAAsB,QAAQ,MAAM,MAAM,MAAM,iBAAiB;AAAA,IAAA,OAC5D;AACqB,gCAAA,QAAQ,CAAC,GAAG,KAAK;AAC3C,4BAAsB,QAAQ;IAChC;AAAA,EAAA,GACC,EAAE,WAAW,KAAA,CAAM;AAEtB,QAAM,2BAA2B,MAAO,kBAAkB,QAAQ,CAAC,kBAAkB;AAE9E,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}