{"version":3,"file":"Dropdown.cjs","sources":["../../common/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computePosition, flip, offset, shift, size } from \"@floating-ui/vue\";\nimport { ref, watch } from \"vue\";\n\nimport { cn } from \"../../utils\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { DropdownClassesKey, DropdownOption, DropdownProps } from \"./types\";\n\nconst {\n  rounded = false,\n  label = \"\",\n  id = \"\",\n  items = [],\n  classes = {} as Partial<Record<DropdownClassesKey, string>>,\n  labelIcon = \"chevron-down-solid-icon\",\n  open = false,\n  buttonProps = { size: \"md\" },\n  modelValue = \"\",\n  helperText = \"\",\n  error = false,\n  success = false,\n  disabled = false,\n  iconPlacement = \"left\",\n  badgeType = \"pill\",\n  placement = \"bottom-start\",\n  placementShift = 5,\n} = defineProps<DropdownProps>();\n\nconst referenceRef = ref(null);\nconst floatingRef = ref(null);\nconst isOpen = ref(open);\nconst selectedMenu = ref(modelValue);\n\nconst emits = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  (e: \"onBtnClick\"): void;\n  (e: \"onItemClick\", item: DropdownOption, index?: number): void;\n}>();\n\nconst calculatePosition = async (newPlacementShift: number) => {\n  const {\n    x,\n    y,\n    placement: computedPlacement,\n  } = await computePosition(referenceRef.value, floatingRef.value, {\n    placement,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({\n        padding: newPlacementShift,\n      }),\n      size({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, { minWidth: `${rects.reference.width}px` });\n        },\n      }),\n    ],\n  });\n\n  const opposedSide: string = {\n    left: \"right\",\n    right: \"left\",\n    top: \"bottom\",\n    bottom: \"top\",\n  }[computedPlacement.split(\"-\")[0]];\n\n  Object.assign(floatingRef.value.style, {\n    left: `${x}px`,\n    top: `${y}px`,\n    \"transform-origin\": opposedSide,\n  });\n};\n\nconst handleDropdownClick = () => {\n  if (!disabled) {\n    isOpen.value = !isOpen.value;\n    emits(\"onBtnClick\");\n  }\n};\n\nconst hideDropDown = () => {\n  isOpen.value = false;\n};\n\nconst handleItemClick = (item: DropdownOption, index: number) => {\n  emits(\"onItemClick\", item, index);\n  emits(\"update:modelValue\", item.value);\n  selectedMenu.value = item.value;\n  isOpen.value = false;\n};\n\nconst handleClickOutside: EventListenerOrEventListenerObject = (event: Event) => {\n  if (isOpen.value && floatingRef.value && !floatingRef.value.contains(event.target as HTMLInputElement)) {\n    isOpen.value = false;\n  }\n};\n\nwatch(\n  () => isOpen.value,\n  (watchOpen) => {\n    if (watchOpen) {\n      setTimeout(() => {\n        calculatePosition(placementShift);\n        document.addEventListener(\"click\", handleClickOutside);\n      }, 0);\n    } else {\n      document.removeEventListener(\"click\", handleClickOutside);\n    }\n  }\n);\n</script>\n\n<template>\n  <div :id=\"id\" :class=\"cn('', classes?.container)\" aria-hidden @click.exact.self=\"hideDropDown\">\n    <div ref=\"referenceRef\">\n      <Button\n        ref=\"referenceRef\"\n        :classes=\"{ container: `px-4 py-2.5 ${classes?.dropdownBtn}` }\"\n        data-dropdown-toggle=\"dropdown\"\n        :rounded=\"rounded\"\n        v-bind=\"buttonProps\"\n        :disabled=\"disabled\"\n        :data-selected-option=\"selectedMenu\"\n        @click=\"handleDropdownClick\"\n        @keydown.esc.exact.stop=\"hideDropDown\"\n      >\n        <slot name=\"dropDownLabel\">\n          <div v-if=\"label\" class=\"flex items-center gap-2\">\n            {{ label }}\n            <Icon :name=\"labelIcon\" :class=\"cn('ml-1', classes?.labelIcon || '')\" />\n          </div>\n        </slot>\n      </Button>\n    </div>\n    <!-- Dropdown menu -->\n    <Teleport to=\"body\">\n      <transition name=\"dropdown-fade\">\n        <div\n          v-if=\"isOpen\"\n          ref=\"floatingRef\"\n          :class=\"\n            cn(\n              'absolute z-50 top-0 left-0 cursor-default',\n              'bg-app-white divide-y divide-app-gray-100 rounded drop-shadow-xl border border-app-gray-200 dark:bg-app-gray-700 dark:border-app-gray-600',\n              'transition duration-300 ease-in-out',\n              classes?.menuContainer,\n              { hidden: !isOpen }\n            )\n          \"\n          data-test-id=\"dropdown-menu\"\n        >\n          <slot name=\"options\">\n            <ul v-if=\"items && items?.length > 0\" :class=\"cn('text-sm', classes?.itemContainer)\" aria-labelledby=\"dropdownDefaultButton\">\n              <li v-for=\"(item, index) in items\" :key=\"item.name\">\n                <component\n                  :is=\"item?.href ? 'a' : 'div'\"\n                  :href=\"item?.href\"\n                  data-test-id=\"dropdown-option\"\n                  :disabled=\"item?.disabled\"\n                  :data-is-selected=\"selectedMenu === item.value\"\n                  :class=\"\n                    cn(\n                      'px-4 py-2 text-app-gray-600 flex items-center justify-between dark:text-app-gray-200 dark:hover:text-app-white dark:border-app-gray-600 dark:hover:bg-app-gray-600',\n                      index !== items.length - 1 && 'border-b border-app-gray-200 dark:border-app-gray-600',\n                      !item?.disabled && 'cursor-pointer hover:bg-app-gray-50 dark:hover:bg-app-gray-100 dark:hover:text-app-gray-500',\n                      item?.disabled && 'cursor-not-allowed',\n                      selectedMenu === item.value && 'font-medium',\n                      selectedMenu === item.value &&\n                        (classes?.activeItem || 'bg-app-gray-50 text-app-gray-900 dark:text-app-white dark:border-app-gray-600 dark:bg-app-gray-600'),\n                      item?.disabled && (classes?.disabledItem || 'text-app-gray-300'),\n                      classes?.item\n                    )\n                  \"\n                  @click.stop=\"!item?.disabled && handleItemClick(item, index)\"\n                >\n                  <div class=\"flex items-center\">\n                    <Icon\n                      v-if=\"item?.icon && iconPlacement === 'left'\"\n                      :name=\"item.icon\"\n                      size=\"18\"\n                      :class=\"cn('mr-2 shrink-0 w-[18px]', classes?.itemIcon || '')\"\n                    />\n                    <div class=\"flex flex-col\">\n                      {{ item.name }}\n                      <div v-if=\"item.description\" class=\"text-app-gray-500 mt-0.5 text-xs font-normal\" data-test-id=\"option-description\">\n                        {{ item.description }}\n                      </div>\n                    </div>\n                  </div>\n                  <span class=\"flex items-center\">\n                    <Icon\n                      v-if=\"item?.icon && iconPlacement === 'right'\"\n                      :name=\"item.icon\"\n                      size=\"18\"\n                      :class=\"cn('mr-2 w-[18px]', classes?.itemIcon || '')\"\n                    />\n                    <Badge\n                      v-if=\"item?.badge\"\n                      :variant=\"item?.badgeType || 'default'\"\n                      :class=\"cn(badgeType !== 'default' && '!w-auto !h-auto', classes.itemBadge)\"\n                      :pill=\"badgeType !== 'default'\"\n                    >\n                      {{ item?.badge }}\n                    </Badge>\n                  </span>\n                </component>\n              </li>\n            </ul>\n          </slot>\n        </div>\n      </transition>\n    </Teleport>\n    <p\n      v-if=\"helperText\"\n      :class=\"\n        cn(\n          'text-xs font-normal mt-1',\n          success && !disabled\n            ? 'text-app-green-600 dark:text-app-green-400'\n            : error && !disabled\n              ? 'text-app-red-600 dark:text-app-red-400'\n              : 'text-app-gray-500 dark:text-app-gray-400',\n          classes?.helperText\n        )\n      \"\n    >\n      {{ helperText }}\n    </p>\n  </div>\n</template>\n\n<style scoped>\n.dropdown-fade-enter-from,\n.dropdown-fade-leave-to {\n  transform: scaleY(0.6);\n  opacity: 0;\n}\n</style>\n"],"names":["referenceRef","ref","floatingRef","isOpen","__props","selectedMenu","emits","__emit","calculatePosition","newPlacementShift","x","y","computedPlacement","computePosition","offset","flip","shift","size","rects","elements","opposedSide","handleDropdownClick","hideDropDown","handleItemClick","item","index","handleClickOutside","event","watch","watchOpen","_createElementBlock","_normalizeClass","_unref","cn","_createElementVNode","_createVNode","_mergeProps","_renderSlot","_ctx","_openBlock","_hoisted_2","_createTextVNode","_toDisplayString","Icon","_createBlock","_Teleport","_Transition","_Fragment","_renderList","_resolveDynamicComponent","_withModifiers","$event","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","Badge"],"mappings":"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"}