@treeui/vue 0.8.0 → 0.10.0

package/dist/components/TDivider.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDivider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    orientation?: 'horizontal' | 'vertical';\n    decorative?: boolean;\n    label?: string;\n  }>(),\n  {\n    orientation: 'horizontal',\n    decorative: true,\n    label: undefined,\n  },\n);\n\nconst classes = computed(() => [\n  't-divider',\n  `t-divider--${props.orientation}`,\n]);\n</script>\n\n<template>\n  <hr\n    :class=\"classes\"\n    :role=\"decorative ? 'none' : 'separator'\"\n    :aria-orientation=\"!decorative ? orientation : undefined\"\n    :aria-label=\"!decorative ? label : undefined\"\n  >\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAGA,IAAM,IAAQ,GAaR,IAAU,QAAe,CAC7B,aACA,cAAc,EAAM,aACtB,CAAC;yBAIC,EAKC,MAAA;GAJE,OAAK,EAAE,EAAA,KAAO;GACd,MAAM,EAAA,aAAU,SAAA;GAChB,oBAAmB,EAAA,aAA2B,KAAA,IAAd,EAAA;GAChC,cAAa,EAAA,aAAqB,KAAA,IAAR,EAAA"}

package/dist/components/TDrawer.cjs

@@ -0,0 +1,2 @@
+var e=require("./TDrawer.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TDrawer.cjs.map

package/dist/components/TDrawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDrawer.cjs","names":[],"sources":["../../src/components/TDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TDrawerSide, TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    side?: TDrawerSide;\n    title?: string;\n    description?: string;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    id?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    side: 'right',\n    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close drawer',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst drawerId = props.id ?? createId('t-drawer');\nconst titleId = `${drawerId}-title`;\nconst descriptionId = `${drawerId}-description`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title || slots.header));\n\nconst slots = defineSlots<{\n  default?: () => unknown;\n  trigger?: () => unknown;\n  header?: () => unknown;\n  content?: () => unknown;\n  footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-drawer', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst surfaceClasses = computed(() => [\n  't-drawer__surface',\n  `t-drawer__surface--${props.size}`,\n  `t-drawer__surface--${props.side}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (openOverlayCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || openOverlayCount === 0) {\n    return;\n  }\n\n  openOverlayCount -= 1;\n\n  if (openOverlayCount === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n  }\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openDrawer = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeDrawer = () => {\n  setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n  if (props.disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  if (event.defaultPrevented) {\n    return;\n  }\n\n  openDrawer();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeDrawer();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n  event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeDrawer();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\nwatch(isOpen, (value, previousValue) => {\n  if (value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (previousValue) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  if (isOpen.value) {\n    unlockBodyScroll();\n  }\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      v-if=\"$slots.trigger\"\n      class=\"t-drawer__trigger\"\n      v-bind=\"triggerAttrs\"\n      :aria-disabled=\"disabled || undefined\"\n      @click=\"onTriggerClick\"\n    >\n      <slot name=\"trigger\" />\n    </span>\n\n    <Teleport to=\"body\">\n      <transition name=\"t-drawer-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-drawer__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-drawer__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div\n            :id=\"drawerId\"\n            ref=\"surfaceRef\"\n            :class=\"surfaceClasses\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-labelledby=\"labelledBy\"\n            :aria-describedby=\"describedBy\"\n            tabindex=\"-1\"\n            @click=\"onSurfaceClick\"\n            @keydown=\"onKeydown\"\n          >\n            <div\n              v-if=\"hasHeaderContent || showCloseButton\"\n              class=\"t-drawer__topbar\"\n            >\n              <div\n                v-if=\"hasHeaderContent\"\n                :id=\"titleId\"\n                class=\"t-drawer__header\"\n              >\n                <slot name=\"header\">\n                  <h2 class=\"t-drawer__title\">\n                    {{ title }}\n                  </h2>\n                </slot>\n              </div>\n              <button\n                v-if=\"showCloseButton\"\n                type=\"button\"\n                class=\"t-drawer__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"closeDrawer\"\n              >\n                <CloseIcon v-bind=\"treeIconDefaults\" />\n              </button>\n            </div>\n\n            <p\n              v-if=\"description\"\n              :id=\"descriptionId\"\n              class=\"t-drawer__description\"\n            >\n              {{ description }}\n            </p>\n\n            <div class=\"t-drawer__body\">\n              <slot name=\"content\">\n                <slot />\n              </slot>\n            </div>\n\n            <div\n              v-if=\"$slots.footer\"\n              class=\"t-drawer__footer\"\n            >\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDrawer.js

@@ -0,0 +1,7 @@
+import e from "./TDrawer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TDrawer.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TDrawer.js.map

package/dist/components/TDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDrawer.js","names":[],"sources":["../../src/components/TDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TDrawerSide, TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    side?: TDrawerSide;\n    title?: string;\n    description?: string;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    id?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    side: 'right',\n    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close drawer',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst drawerId = props.id ?? createId('t-drawer');\nconst titleId = `${drawerId}-title`;\nconst descriptionId = `${drawerId}-description`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title || slots.header));\n\nconst slots = defineSlots<{\n  default?: () => unknown;\n  trigger?: () => unknown;\n  header?: () => unknown;\n  content?: () => unknown;\n  footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-drawer', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst surfaceClasses = computed(() => [\n  't-drawer__surface',\n  `t-drawer__surface--${props.size}`,\n  `t-drawer__surface--${props.side}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (openOverlayCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || openOverlayCount === 0) {\n    return;\n  }\n\n  openOverlayCount -= 1;\n\n  if (openOverlayCount === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n  }\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openDrawer = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeDrawer = () => {\n  setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n  if (props.disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  if (event.defaultPrevented) {\n    return;\n  }\n\n  openDrawer();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeDrawer();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n  event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeDrawer();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\nwatch(isOpen, (value, previousValue) => {\n  if (value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (previousValue) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  if (isOpen.value) {\n    unlockBodyScroll();\n  }\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      v-if=\"$slots.trigger\"\n      class=\"t-drawer__trigger\"\n      v-bind=\"triggerAttrs\"\n      :aria-disabled=\"disabled || undefined\"\n      @click=\"onTriggerClick\"\n    >\n      <slot name=\"trigger\" />\n    </span>\n\n    <Teleport to=\"body\">\n      <transition name=\"t-drawer-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-drawer__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-drawer__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div\n            :id=\"drawerId\"\n            ref=\"surfaceRef\"\n            :class=\"surfaceClasses\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-labelledby=\"labelledBy\"\n            :aria-describedby=\"describedBy\"\n            tabindex=\"-1\"\n            @click=\"onSurfaceClick\"\n            @keydown=\"onKeydown\"\n          >\n            <div\n              v-if=\"hasHeaderContent || showCloseButton\"\n              class=\"t-drawer__topbar\"\n            >\n              <div\n                v-if=\"hasHeaderContent\"\n                :id=\"titleId\"\n                class=\"t-drawer__header\"\n              >\n                <slot name=\"header\">\n                  <h2 class=\"t-drawer__title\">\n                    {{ title }}\n                  </h2>\n                </slot>\n              </div>\n              <button\n                v-if=\"showCloseButton\"\n                type=\"button\"\n                class=\"t-drawer__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"closeDrawer\"\n              >\n                <CloseIcon v-bind=\"treeIconDefaults\" />\n              </button>\n            </div>\n\n            <p\n              v-if=\"description\"\n              :id=\"descriptionId\"\n              class=\"t-drawer__description\"\n            >\n              {{ description }}\n            </p>\n\n            <div class=\"t-drawer__body\">\n              <slot name=\"content\">\n                <slot />\n              </slot>\n            </div>\n\n            <div\n              v-if=\"$slots.footer\"\n              class=\"t-drawer__footer\"\n            >\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`aria-disabled`],o=[`data-state`],s=[`id`,`aria-labelledby`,`aria-describedby`],c={key:0,class:`t-drawer__topbar`},l={class:`t-drawer__title`},u=[`aria-label`],d={class:`t-drawer__body`},f={key:2,class:`t-drawer__footer`},p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDrawer`,props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`},side:{default:`right`},title:{default:``},description:{default:``},closeOnEscape:{type:Boolean,default:!0},closeOnOverlay:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closeLabel:{default:`Close drawer`},id:{default:void 0}},emits:[`update:open`,`open-change`],setup(p,{emit:m}){let h=(0,r.getTreeIcon)(`x`),g=p,_=m,v=(0,t.useAttrs)(),y=g.id??(0,n.createId)(`t-drawer`),b=`${y}-title`,x=`${y}-description`,S=(0,t.ref)(null),C=(0,t.ref)(null),w=(0,t.ref)(null),T=(0,t.computed)(()=>!!(g.title||E.header)),E=(0,t.useSlots)(),D=(0,t.computed)(()=>[`t-drawer`,v.class]),O=(0,t.computed)(()=>v.style),k=(0,t.computed)(()=>{let{class:e,style:t,...n}=v;return n}),A=(0,t.computed)(()=>[`t-drawer__surface`,`t-drawer__surface--${g.size}`,`t-drawer__surface--${g.side}`]),{value:j,setValue:M}=e.useControllableOpen((0,t.toRef)(g,`open`),g.defaultOpen,e=>{_(`update:open`,e),_(`open-change`,e)}),N=(0,t.computed)(()=>T.value?b:void 0),P=(0,t.computed)(()=>g.description?x:void 0),F=0,I=``,L=()=>{typeof document>`u`||(F===0&&(I=document.body.style.overflow,document.body.style.overflow=`hidden`),F+=1)},R=()=>{typeof document>`u`||F===0||(--F,F===0&&(document.body.style.overflow=I))},z=()=>{(0,t.nextTick)(()=>{C.value&&((0,n.focusFirst)(C.value)||C.value.focus())})},B=()=>{g.disabled||(w.value=document.activeElement,M(!0))},V=()=>{M(!1)},H=e=>{if(g.disabled){e.preventDefault(),e.stopPropagation();return}e.defaultPrevented||B()},U=()=>{g.closeOnOverlay&&V()},W=e=>{e.stopPropagation()},G=e=>{if((0,n.isEscapeKey)(e)&&g.closeOnEscape){e.preventDefault(),V();return}if(e.key!==`Tab`||!C.value)return;let t=(0,n.getFocusableElements)(C.value);if(!t.length){e.preventDefault(),C.value.focus();return}let r=t[0],i=t[t.length-1],a=document.activeElement;e.shiftKey&&a===r&&(e.preventDefault(),(0,n.focusLast)(C.value)),!e.shiftKey&&a===i&&(e.preventDefault(),(0,n.focusFirst)(C.value))};return(0,t.watch)(j,(e,n)=>{if(e){L(),z();return}n&&(R(),(0,t.nextTick)(()=>{w.value?.focus()}))}),(0,t.onBeforeUnmount)(()=>{j.value&&R()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:S,class:(0,t.normalizeClass)(D.value),style:(0,t.normalizeStyle)(O.value),"data-state":(0,t.unref)(j)?`open`:`closed`},[e.$slots.trigger?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0,class:`t-drawer__trigger`},k.value,{"aria-disabled":p.disabled||void 0,onClick:H}),[(0,t.renderSlot)(e.$slots,`trigger`)],16,a)):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.createVNode)(t.Transition,{name:`t-drawer-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(j)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`t-drawer__portal`,"data-state":(0,t.unref)(j)?`open`:`closed`},[(0,t.createElementVNode)(`div`,{class:`t-drawer__backdrop`,"aria-hidden":`true`,onClick:U}),(0,t.createElementVNode)(`div`,{id:(0,t.unref)(y),ref_key:`surfaceRef`,ref:C,class:(0,t.normalizeClass)(A.value),role:`dialog`,"aria-modal":`true`,"aria-labelledby":N.value,"aria-describedby":P.value,tabindex:`-1`,onClick:W,onKeydown:G},[T.value||p.showCloseButton?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,c,[T.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:b,class:`t-drawer__header`},[(0,t.renderSlot)(e.$slots,`header`,{},()=>[(0,t.createElementVNode)(`h2`,l,(0,t.toDisplayString)(p.title),1)])])):(0,t.createCommentVNode)(``,!0),p.showCloseButton?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,type:`button`,class:`t-drawer__close`,"aria-label":p.closeLabel,onClick:V},[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0),p.description?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,{key:1,id:x,class:`t-drawer__description`},(0,t.toDisplayString)(p.description),1)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,d,[(0,t.renderSlot)(e.$slots,`content`,{},()=>[(0,t.renderSlot)(e.$slots,`default`)])]),e.$slots.footer?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,f,[(0,t.renderSlot)(e.$slots,`footer`)])):(0,t.createCommentVNode)(``,!0)],42,s)],8,o)):(0,t.createCommentVNode)(``,!0)]),_:3})]))],14,i))}});exports.default=p;
+//# sourceMappingURL=TDrawer.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDrawer.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TDrawerSide, TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    side?: TDrawerSide;\n    title?: string;\n    description?: string;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    id?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    side: 'right',\n    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close drawer',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst drawerId = props.id ?? createId('t-drawer');\nconst titleId = `${drawerId}-title`;\nconst descriptionId = `${drawerId}-description`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title || slots.header));\n\nconst slots = defineSlots<{\n  default?: () => unknown;\n  trigger?: () => unknown;\n  header?: () => unknown;\n  content?: () => unknown;\n  footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-drawer', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst surfaceClasses = computed(() => [\n  't-drawer__surface',\n  `t-drawer__surface--${props.size}`,\n  `t-drawer__surface--${props.side}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (openOverlayCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || openOverlayCount === 0) {\n    return;\n  }\n\n  openOverlayCount -= 1;\n\n  if (openOverlayCount === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n  }\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openDrawer = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeDrawer = () => {\n  setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n  if (props.disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  if (event.defaultPrevented) {\n    return;\n  }\n\n  openDrawer();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeDrawer();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n  event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeDrawer();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\nwatch(isOpen, (value, previousValue) => {\n  if (value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (previousValue) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  if (isOpen.value) {\n    unlockBodyScroll();\n  }\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      v-if=\"$slots.trigger\"\n      class=\"t-drawer__trigger\"\n      v-bind=\"triggerAttrs\"\n      :aria-disabled=\"disabled || undefined\"\n      @click=\"onTriggerClick\"\n    >\n      <slot name=\"trigger\" />\n    </span>\n\n    <Teleport to=\"body\">\n      <transition name=\"t-drawer-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-drawer__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-drawer__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div\n            :id=\"drawerId\"\n            ref=\"surfaceRef\"\n            :class=\"surfaceClasses\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-labelledby=\"labelledBy\"\n            :aria-describedby=\"describedBy\"\n            tabindex=\"-1\"\n            @click=\"onSurfaceClick\"\n            @keydown=\"onKeydown\"\n          >\n            <div\n              v-if=\"hasHeaderContent || showCloseButton\"\n              class=\"t-drawer__topbar\"\n            >\n              <div\n                v-if=\"hasHeaderContent\"\n                :id=\"titleId\"\n                class=\"t-drawer__header\"\n              >\n                <slot name=\"header\">\n                  <h2 class=\"t-drawer__title\">\n                    {{ title }}\n                  </h2>\n                </slot>\n              </div>\n              <button\n                v-if=\"showCloseButton\"\n                type=\"button\"\n                class=\"t-drawer__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"closeDrawer\"\n              >\n                <CloseIcon v-bind=\"treeIconDefaults\" />\n              </button>\n            </div>\n\n            <p\n              v-if=\"description\"\n              :id=\"descriptionId\"\n              class=\"t-drawer__description\"\n            >\n              {{ description }}\n            </p>\n\n            <div class=\"t-drawer__body\">\n              <slot name=\"content\">\n                <slot />\n              </slot>\n            </div>\n\n            <div\n              v-if=\"$slots.footer\"\n              class=\"t-drawer__footer\"\n            >\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,168 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as ee, mergeProps as te, nextTick as u, normalizeClass as d, normalizeProps as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, toRef as ne, unref as y, useAttrs as b, useSlots as x, watch as S, withCtx as C } from "vue";
+import { createId as w, focusFirst as T, focusLast as E, getFocusableElements as D, isEscapeKey as O } from "@treeui/utils";
+import { getTreeIcon as re, treeIconDefaults as ie } from "@treeui/icons";
+//#region src/components/TDrawer.vue?vue&type=script&setup=true&lang.ts
+var ae = ["data-state"], oe = ["aria-disabled"], k = ["data-state"], A = [
+	"id",
+	"aria-labelledby",
+	"aria-describedby"
+], j = {
+	key: 0,
+	class: "t-drawer__topbar"
+}, M = { class: "t-drawer__title" }, N = ["aria-label"], P = { class: "t-drawer__body" }, F = {
+	key: 2,
+	class: "t-drawer__footer"
+}, I = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "TDrawer",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		side: { default: "right" },
+		title: { default: "" },
+		description: { default: "" },
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOverlay: {
+			type: Boolean,
+			default: !0
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: { default: "Close drawer" },
+		id: { default: void 0 }
+	},
+	emits: ["update:open", "open-change"],
+	setup(l, { emit: I }) {
+		let L = re("x"), R = l, z = I, B = b(), V = R.id ?? w("t-drawer"), H = `${V}-title`, U = `${V}-description`, W = g(null), G = g(null), K = g(null), q = r(() => !!(R.title || se.header)), se = x(), ce = r(() => ["t-drawer", B.class]), le = r(() => B.style), ue = r(() => {
+			let { class: e, style: t, ...n } = B;
+			return n;
+		}), de = r(() => [
+			"t-drawer__surface",
+			`t-drawer__surface--${R.size}`,
+			`t-drawer__surface--${R.side}`
+		]), { value: J, setValue: Y } = e(ne(R, "open"), R.defaultOpen, (e) => {
+			z("update:open", e), z("open-change", e);
+		}), fe = r(() => q.value ? H : void 0), pe = r(() => R.description ? U : void 0), X = 0, Z = "", me = () => {
+			typeof document > "u" || (X === 0 && (Z = document.body.style.overflow, document.body.style.overflow = "hidden"), X += 1);
+		}, Q = () => {
+			typeof document > "u" || X === 0 || (--X, X === 0 && (document.body.style.overflow = Z));
+		}, he = () => {
+			u(() => {
+				G.value && (T(G.value) || G.value.focus());
+			});
+		}, ge = () => {
+			R.disabled || (K.value = document.activeElement, Y(!0));
+		}, $ = () => {
+			Y(!1);
+		}, _e = (e) => {
+			if (R.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			e.defaultPrevented || ge();
+		}, ve = () => {
+			R.closeOnOverlay && $();
+		}, ye = (e) => {
+			e.stopPropagation();
+		}, be = (e) => {
+			if (O(e) && R.closeOnEscape) {
+				e.preventDefault(), $();
+				return;
+			}
+			if (e.key !== "Tab" || !G.value) return;
+			let t = D(G.value);
+			if (!t.length) {
+				e.preventDefault(), G.value.focus();
+				return;
+			}
+			let n = t[0], r = t[t.length - 1], i = document.activeElement;
+			e.shiftKey && i === n && (e.preventDefault(), E(G.value)), !e.shiftKey && i === r && (e.preventDefault(), T(G.value));
+		};
+		return S(J, (e, t) => {
+			if (e) {
+				me(), he();
+				return;
+			}
+			t && (Q(), u(() => {
+				K.value?.focus();
+			}));
+		}), m(() => {
+			J.value && Q();
+		}), (e, r) => (h(), o("div", {
+			ref_key: "rootRef",
+			ref: W,
+			class: d(ce.value),
+			style: p(le.value),
+			"data-state": y(J) ? "open" : "closed"
+		}, [e.$slots.trigger ? (h(), o("span", te({
+			key: 0,
+			class: "t-drawer__trigger"
+		}, ue.value, {
+			"aria-disabled": l.disabled || void 0,
+			onClick: _e
+		}), [_(e.$slots, "trigger")], 16, oe)) : a("", !0), (h(), i(t, { to: "body" }, [c(n, { name: "t-drawer-fade" }, {
+			default: C(() => [y(J) ? (h(), o("div", {
+				key: 0,
+				class: "t-drawer__portal",
+				"data-state": y(J) ? "open" : "closed"
+			}, [s("div", {
+				class: "t-drawer__backdrop",
+				"aria-hidden": "true",
+				onClick: ve
+			}), s("div", {
+				id: y(V),
+				ref_key: "surfaceRef",
+				ref: G,
+				class: d(de.value),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": fe.value,
+				"aria-describedby": pe.value,
+				tabindex: "-1",
+				onClick: ye,
+				onKeydown: be
+			}, [
+				q.value || l.showCloseButton ? (h(), o("div", j, [q.value ? (h(), o("div", {
+					key: 0,
+					id: H,
+					class: "t-drawer__header"
+				}, [_(e.$slots, "header", {}, () => [s("h2", M, v(l.title), 1)])])) : a("", !0), l.showCloseButton ? (h(), o("button", {
+					key: 1,
+					type: "button",
+					class: "t-drawer__close",
+					"aria-label": l.closeLabel,
+					onClick: $
+				}, [c(y(L), f(ee(y(ie))), null, 16)], 8, N)) : a("", !0)])) : a("", !0),
+				l.description ? (h(), o("p", {
+					key: 1,
+					id: U,
+					class: "t-drawer__description"
+				}, v(l.description), 1)) : a("", !0),
+				s("div", P, [_(e.$slots, "content", {}, () => [_(e.$slots, "default")])]),
+				e.$slots.footer ? (h(), o("div", F, [_(e.$slots, "footer")])) : a("", !0)
+			], 42, A)], 8, k)) : a("", !0)]),
+			_: 3
+		})]))], 14, ae));
+	}
+});
+//#endregion
+export { I as default };
+
+//# sourceMappingURL=TDrawer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDrawer.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TDrawerSide, TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    side?: TDrawerSide;\n    title?: string;\n    description?: string;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    id?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    side: 'right',\n    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close drawer',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst drawerId = props.id ?? createId('t-drawer');\nconst titleId = `${drawerId}-title`;\nconst descriptionId = `${drawerId}-description`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title || slots.header));\n\nconst slots = defineSlots<{\n  default?: () => unknown;\n  trigger?: () => unknown;\n  header?: () => unknown;\n  content?: () => unknown;\n  footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-drawer', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst surfaceClasses = computed(() => [\n  't-drawer__surface',\n  `t-drawer__surface--${props.size}`,\n  `t-drawer__surface--${props.side}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (openOverlayCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || openOverlayCount === 0) {\n    return;\n  }\n\n  openOverlayCount -= 1;\n\n  if (openOverlayCount === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n  }\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openDrawer = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeDrawer = () => {\n  setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n  if (props.disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  if (event.defaultPrevented) {\n    return;\n  }\n\n  openDrawer();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeDrawer();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n  event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeDrawer();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\nwatch(isOpen, (value, previousValue) => {\n  if (value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (previousValue) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  if (isOpen.value) {\n    unlockBodyScroll();\n  }\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      v-if=\"$slots.trigger\"\n      class=\"t-drawer__trigger\"\n      v-bind=\"triggerAttrs\"\n      :aria-disabled=\"disabled || undefined\"\n      @click=\"onTriggerClick\"\n    >\n      <slot name=\"trigger\" />\n    </span>\n\n    <Teleport to=\"body\">\n      <transition name=\"t-drawer-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-drawer__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-drawer__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div\n            :id=\"drawerId\"\n            ref=\"surfaceRef\"\n            :class=\"surfaceClasses\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-labelledby=\"labelledBy\"\n            :aria-describedby=\"describedBy\"\n            tabindex=\"-1\"\n            @click=\"onSurfaceClick\"\n            @keydown=\"onKeydown\"\n          >\n            <div\n              v-if=\"hasHeaderContent || showCloseButton\"\n              class=\"t-drawer__topbar\"\n            >\n              <div\n                v-if=\"hasHeaderContent\"\n                :id=\"titleId\"\n                class=\"t-drawer__header\"\n              >\n                <slot name=\"header\">\n                  <h2 class=\"t-drawer__title\">\n                    {{ title }}\n                  </h2>\n                </slot>\n              </div>\n              <button\n                v-if=\"showCloseButton\"\n                type=\"button\"\n                class=\"t-drawer__close\"\n                :aria-label=\"closeLabel\"\n                @click=\"closeDrawer\"\n              >\n                <CloseIcon v-bind=\"treeIconDefaults\" />\n              </button>\n            </div>\n\n            <p\n              v-if=\"description\"\n              :id=\"descriptionId\"\n              class=\"t-drawer__description\"\n            >\n              {{ description }}\n            </p>\n\n            <div class=\"t-drawer__body\">\n              <slot name=\"content\">\n                <slot />\n              </slot>\n            </div>\n\n            <div\n              v-if=\"$slots.footer\"\n              class=\"t-drawer__footer\"\n            >\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDropdown.cjs

@@ -0,0 +1,2 @@
+var e=require("./TDropdown.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TDropdown.cjs.map

package/dist/components/TDropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDropdown.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleMenu = () => {\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span class=\"t-dropdown__trigger-wrapper\">\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          ref=\"triggerRef\"\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n          @click=\"toggleMenu\"\n          @keydown=\"onTriggerKeydown\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDropdown.js

@@ -0,0 +1,7 @@
+import e from "./TDropdown.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TDropdown.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TDropdown.js.map

package/dist/components/TDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDropdown.js","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleMenu = () => {\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span class=\"t-dropdown__trigger-wrapper\">\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          ref=\"triggerRef\"\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n          @click=\"toggleMenu\"\n          @keydown=\"onTriggerKeydown\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDropdown.vue.d.ts

@@ -4,6 +4,7 @@ export interface TDropdownItem {
     value: string;
     disabled?: boolean;
 }
+export type TDropdownAlign = 'start' | 'end';
 type __VLS_Props = {
     items?: TDropdownItem[];
     open?: boolean;
@@ -11,6 +12,7 @@ type __VLS_Props = {
     disabled?: boolean;
     size?: TSize;
     label?: string;
+    align?: TDropdownAlign;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -53,6 +55,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     open: boolean;
     defaultOpen: boolean;
     items: TDropdownItem[];
+    align: TDropdownAlign;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     triggerRef: HTMLButtonElement;

package/dist/components/TDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AAwSA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4MJ,iBAAS,cAAc;WA8GT,OAAO,IAA6B;;uBArSjC;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EAyS7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cA1VN,OAAO;UACX,KAAK;WACJ,MAAM;UAJP,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;;;;OAsWzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/TDropdown.vue"],"names":[],"mappings":"AA6SA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AA+MJ,iBAAS,cAAc;WA8GT,OAAO,IAA6B;;uBAvSjC;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;uBAD7C;YAAE,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;oBAChC;YAAE,IAAI,EAAE,aAAa,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO;;;;;;;EA2S7D;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;cA9VN,OAAO;UACX,KAAK;WACJ,MAAM;UAJP,OAAO;iBACA,OAAO;WAFb,aAAa,EAAE;WAMf,cAAc;;;;OAoWxB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i={class:`t-dropdown__trigger-wrapper`},a=[`disabled`,`aria-controls`,`aria-expanded`],o={class:`t-dropdown__label`},s=[`id`,`aria-label`],c=[`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],l=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDropdown`,props:{items:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`},label:{default:``},align:{default:`start`}},emits:[`select`,`update:open`,`open-change`],setup(l,{emit:u}){let d=l,f=u,p=(0,t.useAttrs)(),m=(0,n.createId)(`t-dropdown`),h=(0,t.ref)(null),g=(0,t.ref)(null),_=(0,t.ref)(new Map),v=(0,t.ref)(-1),y=(0,t.computed)(()=>{let{class:e,style:t,...n}=p;return n}),{value:b,setValue:x}=e.useControllableOpen((0,t.toRef)(d,`open`),d.defaultOpen,e=>{f(`update:open`,e),f(`open-change`,e)}),S=(0,t.computed)(()=>[`t-dropdown`,`t-dropdown--${d.size}`,{"t-dropdown--align-end":d.align===`end`,"is-disabled":d.disabled,"is-open":b.value},p.class]),C=(0,t.computed)(()=>p.style),w=(0,t.computed)(()=>d.items.filter(e=>!e.disabled)),T=()=>{d.disabled||(v.value=w.value.length>0?d.items.indexOf(w.value[0]):0,x(!0),(0,t.nextTick)(()=>k(v.value)))},E=(e=!1)=>{x(!1),v.value=-1,e&&(0,t.nextTick)(()=>g.value?.focus())},D=()=>{b.value?E():T()},O=e=>{e.disabled||(f(`select`,e.value),E(!0))},k=e=>{let t=d.items[e];t&&_.value.get(t.value)?.focus()},A=(e,t)=>{e instanceof HTMLElement?_.value.set(t,e):_.value.delete(t)},j=e=>{let t=v.value+e;for(;t>=0&&t<d.items.length;){if(!d.items[t].disabled){v.value=t,k(t);return}t+=e}},M=e=>{if(!d.disabled){if((0,n.isEscapeKey)(e)&&b.value){e.preventDefault(),E();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),T())}},N=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),E(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),O(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),j(1);break;case`ArrowUp`:e.preventDefault(),j(-1);break;case`Home`:e.preventDefault(),v.value=w.value.length>0?d.items.indexOf(w.value[0]):0,k(v.value);break;case`End`:e.preventDefault(),v.value=w.value.length>0?d.items.indexOf(w.value[w.value.length-1]):d.items.length-1,k(v.value);break;default:break}},P=e=>{if(!b.value)return;let t=e.target;t instanceof Node&&(h.value?.contains(t)||E())};return(0,t.watch)(b,e=>{e?document.addEventListener(`pointerdown`,P):document.removeEventListener(`pointerdown`,P)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,P)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:h,class:(0,t.normalizeClass)(S.value),style:(0,t.normalizeStyle)(C.value),"data-state":(0,t.unref)(b)?`open`:`closed`},[(0,t.createElementVNode)(`span`,i,[(0,t.renderSlot)(e.$slots,`trigger`,{isOpen:(0,t.unref)(b)},()=>[(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:g},y.value,{type:`button`,class:`t-dropdown__trigger`,disabled:l.disabled,"aria-controls":(0,t.unref)(b)?(0,t.unref)(m):void 0,"aria-haspopup":`menu`,"aria-expanded":(0,t.unref)(b),onClick:D,onKeydown:M}),[(0,t.createElementVNode)(`span`,o,(0,t.toDisplayString)(l.label),1),n[0]||=(0,t.createElementVNode)(`svg`,{class:`t-dropdown__chevron`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},[(0,t.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`})],-1)],16,a)])]),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(b)&&!l.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:(0,t.unref)(m),role:`menu`,class:`t-dropdown__menu`,"aria-label":l.label||void 0},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(l.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,ref_for:!0,ref:e=>A(e,n.value),role:`menuitem`,class:(0,t.normalizeClass)([`t-dropdown__item`,{"is-disabled":n.disabled,"is-focused":r===v.value}]),"aria-disabled":n.disabled||void 0,tabindex:n.disabled?-1:0,onClick:e=>O(n),onKeydown:e=>N(e,n)},[(0,t.renderSlot)(e.$slots,`item`,{item:n,index:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.label),1)])],42,c))),128))],8,s)):(0,t.createCommentVNode)(``,!0)]),_:3})],14,r))}});exports.default=l;
+//# sourceMappingURL=TDropdown.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDropdown.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TDropdownItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nexport type TDropdownAlign = 'start' | 'end';\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TDropdownItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    label?: string;\n    align?: TDropdownAlign;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    label: '',\n    align: 'start',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  trigger(props: { isOpen: boolean }): unknown;\n  item(props: { item: TDropdownItem; index: number }): unknown;\n}>();\n\nconst attrs = useAttrs();\nconst menuId = createId('t-dropdown');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-dropdown',\n  `t-dropdown--${props.size}`,\n  {\n    't-dropdown--align-end': props.align === 'end',\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = () => {\n  if (props.disabled) return;\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleMenu = () => {\n  if (isOpen.value) {\n    closeMenu();\n  } else {\n    openMenu();\n  }\n};\n\nconst selectItem = (item: TDropdownItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeMenu();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openMenu();\n  }\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TDropdownItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span class=\"t-dropdown__trigger-wrapper\">\n      <slot\n        name=\"trigger\"\n        :is-open=\"isOpen\"\n      >\n        <button\n          ref=\"triggerRef\"\n          v-bind=\"triggerAttrs\"\n          type=\"button\"\n          class=\"t-dropdown__trigger\"\n          :disabled=\"disabled\"\n          :aria-controls=\"isOpen ? menuId : undefined\"\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n          @click=\"toggleMenu\"\n          @keydown=\"onTriggerKeydown\"\n        >\n          <span class=\"t-dropdown__label\">{{ label }}</span>\n          <svg\n            class=\"t-dropdown__chevron\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"4 6 8 10 12 6\" />\n          </svg>\n        </button>\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"menuId\"\n        role=\"menu\"\n        class=\"t-dropdown__menu\"\n        :aria-label=\"label || undefined\"\n      >\n        <li\n          v-for=\"(item, index) in items\"\n          :key=\"item.value\"\n          :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n          role=\"menuitem\"\n          class=\"t-dropdown__item\"\n          :class=\"{\n            'is-disabled': item.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :tabindex=\"item.disabled ? -1 : 0\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, item)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n          >\n            {{ item.label }}\n          </slot>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDropdown.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,176 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { Fragment as t, Transition as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeProps as ee, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRef as te, unref as y, useAttrs as b, watch as x, withCtx as S } from "vue";
+import { createId as C, isActivationKey as w, isEscapeKey as T } from "@treeui/utils";
+//#region src/components/TDropdown.vue?vue&type=script&setup=true&lang.ts
+var E = ["data-state"], D = { class: "t-dropdown__trigger-wrapper" }, O = [
+	"disabled",
+	"aria-controls",
+	"aria-expanded"
+], k = { class: "t-dropdown__label" }, A = ["id", "aria-label"], j = [
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], M = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "TDropdown",
+	props: {
+		items: { default: () => [] },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		label: { default: "" },
+		align: { default: "start" }
+	},
+	emits: [
+		"select",
+		"update:open",
+		"open-change"
+	],
+	setup(l, { emit: M }) {
+		let N = l, P = M, F = b(), I = C("t-dropdown"), L = h(null), R = h(null), z = h(/* @__PURE__ */ new Map()), B = h(-1), V = r(() => {
+			let { class: e, style: t, ...n } = F;
+			return n;
+		}), { value: H, setValue: U } = e(te(N, "open"), N.defaultOpen, (e) => {
+			P("update:open", e), P("open-change", e);
+		}), W = r(() => [
+			"t-dropdown",
+			`t-dropdown--${N.size}`,
+			{
+				"t-dropdown--align-end": N.align === "end",
+				"is-disabled": N.disabled,
+				"is-open": H.value
+			},
+			F.class
+		]), G = r(() => F.style), K = r(() => N.items.filter((e) => !e.disabled)), q = () => {
+			N.disabled || (B.value = K.value.length > 0 ? N.items.indexOf(K.value[0]) : 0, U(!0), u(() => Z(B.value)));
+		}, J = (e = !1) => {
+			U(!1), B.value = -1, e && u(() => R.value?.focus());
+		}, Y = () => {
+			H.value ? J() : q();
+		}, X = (e) => {
+			e.disabled || (P("select", e.value), J(!0));
+		}, Z = (e) => {
+			let t = N.items[e];
+			t && z.value.get(t.value)?.focus();
+		}, ne = (e, t) => {
+			e instanceof HTMLElement ? z.value.set(t, e) : z.value.delete(t);
+		}, Q = (e) => {
+			let t = B.value + e;
+			for (; t >= 0 && t < N.items.length;) {
+				if (!N.items[t].disabled) {
+					B.value = t, Z(t);
+					return;
+				}
+				t += e;
+			}
+		}, re = (e) => {
+			if (!N.disabled) {
+				if (T(e) && H.value) {
+					e.preventDefault(), J();
+					return;
+				}
+				(w(e) || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), q());
+			}
+		}, ie = (e, t) => {
+			if (T(e)) {
+				e.preventDefault(), J(!0);
+				return;
+			}
+			if (w(e)) {
+				e.preventDefault(), X(t);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), Q(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), Q(-1);
+					break;
+				case "Home":
+					e.preventDefault(), B.value = K.value.length > 0 ? N.items.indexOf(K.value[0]) : 0, Z(B.value);
+					break;
+				case "End":
+					e.preventDefault(), B.value = K.value.length > 0 ? N.items.indexOf(K.value[K.value.length - 1]) : N.items.length - 1, Z(B.value);
+					break;
+				default: break;
+			}
+		}, $ = (e) => {
+			if (!H.value) return;
+			let t = e.target;
+			t instanceof Node && (L.value?.contains(t) || J());
+		};
+		return x(H, (e) => {
+			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
+		}), p(() => {
+			document.removeEventListener("pointerdown", $);
+		}), (e, r) => (m(), a("div", {
+			ref_key: "rootRef",
+			ref: L,
+			class: d(W.value),
+			style: f(G.value),
+			"data-state": y(H) ? "open" : "closed"
+		}, [o("span", D, [_(e.$slots, "trigger", { isOpen: y(H) }, () => [o("button", ee({
+			ref_key: "triggerRef",
+			ref: R
+		}, V.value, {
+			type: "button",
+			class: "t-dropdown__trigger",
+			disabled: l.disabled,
+			"aria-controls": y(H) ? y(I) : void 0,
+			"aria-haspopup": "menu",
+			"aria-expanded": y(H),
+			onClick: Y,
+			onKeydown: re
+		}), [o("span", k, v(l.label), 1), r[0] ||= o("svg", {
+			class: "t-dropdown__chevron",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			"aria-hidden": "true"
+		}, [o("polyline", { points: "4 6 8 10 12 6" })], -1)], 16, O)])]), c(n, { name: "t-fade" }, {
+			default: S(() => [y(H) && !l.disabled ? (m(), a("ul", {
+				key: 0,
+				id: y(I),
+				role: "menu",
+				class: "t-dropdown__menu",
+				"aria-label": l.label || void 0
+			}, [(m(!0), a(t, null, g(l.items, (t, n) => (m(), a("li", {
+				key: t.value,
+				ref_for: !0,
+				ref: (e) => ne(e, t.value),
+				role: "menuitem",
+				class: d(["t-dropdown__item", {
+					"is-disabled": t.disabled,
+					"is-focused": n === B.value
+				}]),
+				"aria-disabled": t.disabled || void 0,
+				tabindex: t.disabled ? -1 : 0,
+				onClick: (e) => X(t),
+				onKeydown: (e) => ie(e, t)
+			}, [_(e.$slots, "item", {
+				item: t,
+				index: n
+			}, () => [s(v(t.label), 1)])], 42, j))), 128))], 8, A)) : i("", !0)]),
+			_: 3
+		})], 14, E));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=TDropdown.vue_vue_type_script_setup_true_lang.js.map