@treeui/vue 0.17.0 → 0.18.0

package/dist/components/TDrawer.cjs.map

@@ -1 +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":""}
+{"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 = computed(() => 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.map

@@ -1 +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":""}
+{"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 = computed(() => 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

@@ -1,2 +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;
+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,t.computed)(()=>(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

@@ -1 +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":"y2BAyBA,IAAM,GAAA,EAAA,EAAA,YAAA,CAAwB,GAAG,EAE3B,EAAQ,EA+BR,EAAO,EAKP,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,EAAW,EAAM,KAAA,EAAA,EAAA,SAAA,CAAe,UAAU,EAC1C,EAAU,GAAG,EAAS,QACtB,EAAgB,GAAG,EAAS,cAC5B,GAAA,EAAA,EAAA,IAAA,CAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,IAAA,CAAqC,IAAI,EACzC,GAAA,EAAA,EAAA,IAAA,CAAiD,IAAI,EACrD,GAAA,EAAA,EAAA,SAAA,KAAkC,GAAQ,EAAM,OAAS,EAAM,OAAO,EAEtE,GAAA,EAAA,EAAA,SAAA,CAAQ,EAQR,GAAA,EAAA,EAAA,SAAA,KAA6B,CAAC,WAAY,EAAM,KAAK,CAAC,EACtD,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EACtC,GAAA,EAAA,EAAA,SAAA,KAA8B,CAClC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,EACK,GAAA,EAAA,EAAA,SAAA,KAAgC,CACpC,oBACA,sBAAsB,EAAM,OAC5B,sBAAsB,EAAM,MAC9B,CAAC,EAEK,CAAE,MAAO,EAAQ,YAAa,EAAA,qBAAA,EAAA,EAAA,MAAA,CAC5B,EAAO,MAAM,EACnB,EAAM,YACL,GAAU,CACT,EAAK,cAAe,CAAK,EACzB,EAAK,cAAe,CAAK,CAC3B,CACF,EAEM,GAAA,EAAA,EAAA,SAAA,KAA6B,EAAiB,MAAQ,EAAU,IAAA,EAAU,EAC1E,GAAA,EAAA,EAAA,SAAA,KAA8B,EAAM,YAAc,EAAgB,IAAA,EAAU,EAE9E,EAAmB,EACnB,EAAuB,GAErB,MAAuB,CACvB,OAAO,SAAa,MAIpB,IAAqB,IACvB,EAAuB,SAAS,KAAK,MAAM,SAC3C,SAAS,KAAK,MAAM,SAAW,UAGjC,GAAoB,EACtB,EAEM,MAAyB,CACzB,OAAO,SAAa,KAAe,IAAqB,IAI5D,IAEI,IAAqB,IACvB,SAAS,KAAK,MAAM,SAAW,GAEnC,EAEM,MAAqB,EACzB,EAAA,EAAA,SAAA,KAAe,CACR,EAAW,SAKZ,EAAA,EAAA,WAAA,CADuB,EAAW,KACjC,GACH,EAAW,MAAM,MAAM,EAE3B,CAAC,CACH,EAEM,MAAmB,CACnB,EAAM,WAIV,EAAuB,MAAQ,SAAS,cACxC,EAAS,EAAI,EACf,EAEM,MAAoB,CACxB,EAAS,EAAK,CAChB,EAEM,EAAkB,GAAsB,CAC5C,GAAI,EAAM,SAAU,CAClB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,MACF,CAEI,EAAM,kBAIV,EAAW,CACb,EAEM,MAAuB,CACtB,EAAM,gBAIX,EAAY,CACd,EAEM,EAAkB,GAAsB,CAC5C,EAAM,gBAAgB,CACxB,EAEM,EAAa,GAAyB,CAC1C,IAAA,EAAA,EAAA,YAAA,CAAgB,CAAK,GAAK,EAAM,cAAe,CAC7C,EAAM,eAAe,EACrB,EAAY,EACZ,MACF,CAEA,GAAI,EAAM,MAAQ,OAAS,CAAC,EAAW,MACrC,OAGF,IAAM,GAAA,EAAA,EAAA,qBAAA,CAAiC,EAAW,KAAK,EAEvD,GAAI,CAAC,EAAU,OAAQ,CACrB,EAAM,eAAe,EACrB,EAAW,MAAM,MAAM,EACvB,MACF,CAEA,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GACpC,EAAgB,SAAS,cAE3B,EAAM,UAAY,IAAkB,IACtC,EAAM,eAAe,GACrB,EAAA,EAAA,UAAA,CAAU,EAAW,KAAK,GAGxB,CAAC,EAAM,UAAY,IAAkB,IACvC,EAAM,eAAe,GACrB,EAAA,EAAA,WAAA,CAAW,EAAW,KAAK,EAE/B,SAEA,EAAA,EAAA,MAAA,CAAM,GAAS,EAAO,IAAkB,CACtC,GAAI,EAAO,CACT,EAAe,EACf,EAAa,EACb,MACF,CAEI,IACF,EAAiB,GACjB,EAAA,EAAA,SAAA,KAAe,CACb,EAAuB,OAAO,MAAM,CACtC,CAAC,EAEL,CAAC,GAED,EAAA,EAAA,gBAAA,KAAsB,CAChB,EAAO,OACT,EAAiB,CAErB,CAAC,qDA8FO,MAAA,SAzFA,UAAJ,IAAI,EACH,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,EAChB,cAAA,EAAA,EAAA,MAAA,CAAY,CAAA,EAAM,OAAA,WAGXA,EAAAA,OAAO,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOR,QAAA,EAAA,EAAA,WAAA,CAAA,OANL,MAAM,qBACE,EAAA,MAAY,CACnB,gBAAe,EAAA,UAAY,IAAA,GAC3B,QAAO,sBAEe,EAAA,OAAA,SAAA,CAAA,EAAA,GAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CA4Ed,EAAA,SAAA,CAzED,GAAG,MAAM,EAAA,EAAA,EAAA,EAAA,YAAA,CAwEJ,EAAA,WAAA,CAvED,KAAK,eAAe,EAAA,2BAsExB,EAAA,EAAA,EAAA,MAAA,CApEE,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAoEF,MAAA,OAnEJ,MAAM,mBACL,cAAA,EAAA,EAAA,MAAA,CAAY,CAAA,EAAM,OAAA,oCAMjB,MAAA,CAHA,MAAM,qBACN,cAAY,OACX,QAAO,6BA4DJ,MAAA,CAzDH,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,UACD,aAAJ,IAAI,EACH,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAc,EACtB,KAAK,SACL,aAAW,OACV,kBAAiB,EAAA,MACjB,mBAAkB,EAAA,MACnB,SAAS,KACR,QAAO,EACE,cAGF,EAAA,OAAoB,EAAA,kBAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAuBtB,MAxBN,EAwBM,CAnBI,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASF,MAAA,OARH,GAAI,EACL,MAAM,sCAMC,EAAA,OAAA,SAAA,CAAA,MAAA,EAAA,EAAA,EAAA,mBAAA,CADA,KAFL,GAAA,EAAA,EAAA,gBAAA,CACK,EAAA,KAAK,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAKN,EAAA,kBAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOC,SAAA,OANP,KAAK,SACL,MAAM,kBACL,aAAY,EAAA,WACZ,QAAO,kCAE+B,CAAA,GAAA,EAAA,EAAA,eAAA,EAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,MAAA,CAApB,EAAA,gBAAA,CAAgB,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAK/B,EAAA,cAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAKJ,IAAA,OAJD,GAAI,EACL,MAAM,+CAEH,EAAA,WAAW,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAOV,MAJN,EAIM,EAAA,EAAA,EAAA,WAAA,CADG,EAAA,OAAA,UAAA,CAAA,MAAA,EAAA,EAAA,EAAA,WAAA,CADG,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAKJA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIT,MALN,EAKM,EAAA,EAAA,EAAA,WAAA,CADkB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA"}
+{"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 = computed(() => 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

@@ -50,7 +50,7 @@ var ae = ["data-state"], oe = ["aria-disabled"], k = ["data-state"], A = [
 	},
 	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 L = r(() => 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(() => [

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

@@ -1 +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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"}
+{"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 = computed(() => 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/TIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TIcon.cjs","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue';\nimport { getTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\nconst iconComponent = computed(() => getTreeIcon(props.name) as Component);\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"TIcon.cjs","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { resolveTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\n// Resolved per render rather than once at setup, so an icon registered after\n// this component mounted still appears.\nconst iconComponent = computed(() => resolveTreeIcon(props.name));\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    v-if=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/TIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"TIcon.js","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue';\nimport { getTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\nconst iconComponent = computed(() => getTreeIcon(props.name) as Component);\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"TIcon.js","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { resolveTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\n// Resolved per render rather than once at setup, so an icon registered after\n// this component mounted still appears.\nconst iconComponent = computed(() => resolveTreeIcon(props.name));\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    v-if=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"TIcon.vue.d.ts","sourceRoot":"","sources":["../../src/components/TIcon.vue"],"names":[],"mappings":"AAsCA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9E,KAAK,WAAW,GAAG;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;;UAJO,MAAM,GAAG,MAAM;WAGd,MAAM;iBAFA,MAAM,GAAG,MAAM;yBACP,OAAO;;AA+EjC,wBAQG"}
+{"version":3,"file":"TIcon.vue.d.ts","sourceRoot":"","sources":["../../src/components/TIcon.vue"],"names":[],"mappings":"AAyCA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAElF,KAAK,WAAW,GAAG;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;;UAJO,MAAM,GAAG,MAAM;WAGd,MAAM;iBAFA,MAAM,GAAG,MAAM;yBACP,OAAO;;AAiFjC,wBAOG"}

package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-let e=require("vue"),t=require("@treeui/icons");var n=(0,e.defineComponent)({__name:`TIcon`,props:{name:{},size:{default:t.treeIconDefaults.size},strokeWidth:{default:t.treeIconDefaults.strokeWidth},absoluteStrokeWidth:{type:Boolean,default:t.treeIconDefaults.absoluteStrokeWidth},label:{default:void 0}},setup(n){let r=n,i=(0,e.computed)(()=>(0,t.getTreeIcon)(r.name));return(t,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(i.value),{class:`t-icon`,size:n.size,"stroke-width":n.strokeWidth,"absolute-stroke-width":n.absoluteStrokeWidth,role:n.label?`img`:void 0,"aria-label":n.label||void 0,"aria-hidden":n.label?void 0:`true`},null,8,[`size`,`stroke-width`,`absolute-stroke-width`,`role`,`aria-label`,`aria-hidden`]))}});exports.default=n;
+let e=require("vue"),t=require("@treeui/icons");var n=(0,e.defineComponent)({__name:`TIcon`,props:{name:{},size:{default:t.treeIconDefaults.size},strokeWidth:{default:t.treeIconDefaults.strokeWidth},absoluteStrokeWidth:{type:Boolean,default:t.treeIconDefaults.absoluteStrokeWidth},label:{default:void 0}},setup(n){let r=n,i=(0,e.computed)(()=>(0,t.resolveTreeIcon)(r.name));return(t,r)=>i.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(i.value),{key:0,class:`t-icon`,size:n.size,"stroke-width":n.strokeWidth,"absolute-stroke-width":n.absoluteStrokeWidth,role:n.label?`img`:void 0,"aria-label":n.label||void 0,"aria-hidden":n.label?void 0:`true`},null,8,[`size`,`stroke-width`,`absolute-stroke-width`,`role`,`aria-label`,`aria-hidden`])):(0,e.createCommentVNode)(``,!0)}});exports.default=n;
 //# sourceMappingURL=TIcon.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TIcon.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue';\nimport { getTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\nconst iconComponent = computed(() => getTreeIcon(props.name) as Component);\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":"0TAIA,IAAM,EAAQ,EAgBR,GAAA,EAAA,EAAA,SAAA,MAAA,EAAA,EAAA,YAAA,CAA2C,EAAM,IAAI,CAAc,kFAKhE,EAAA,KAAa,EAAA,CAClB,MAAM,SACL,KAAM,EAAA,KACN,eAAc,EAAA,YACd,wBAAuB,EAAA,oBACvB,KAAM,EAAA,MAAK,MAAW,IAAA,GACtB,aAAY,EAAA,OAAS,IAAA,GACrB,cAAa,EAAA,MAAQ,IAAA,GAAS"}
+{"version":3,"file":"TIcon.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { resolveTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\n// Resolved per render rather than once at setup, so an icon registered after\n// this component mounted still appears.\nconst iconComponent = computed(() => resolveTreeIcon(props.name));\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    v-if=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":"0TAIA,IAAM,EAAQ,EAkBR,GAAA,EAAA,EAAA,SAAA,MAAA,EAAA,EAAA,gBAAA,CAA+C,EAAM,IAAI,CAAC,eAMtD,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,wBAAA,CADD,EAAA,KAAa,EAAA,OAElB,MAAM,SACL,KAAM,EAAA,KACN,eAAc,EAAA,YACd,wBAAuB,EAAA,oBACvB,KAAM,EAAA,MAAK,MAAW,IAAA,GACtB,aAAY,EAAA,OAAS,IAAA,GACrB,cAAa,EAAA,MAAQ,IAAA,GAAS"}

package/dist/components/TIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
-import { computed as e, createBlock as t, defineComponent as n, openBlock as r, resolveDynamicComponent as i } from "vue";
-import { getTreeIcon as a, treeIconDefaults as o } from "@treeui/icons";
+import { computed as e, createBlock as t, createCommentVNode as n, defineComponent as r, openBlock as i, resolveDynamicComponent as a } from "vue";
+import { resolveTreeIcon as o, treeIconDefaults as s } from "@treeui/icons";
 //#region src/components/TIcon.vue?vue&type=script&setup=true&lang.ts
-var s = /*@__PURE__*/ n({
+var c = /*@__PURE__*/ r({
 	__name: "TIcon",
 	props: {
 		name: {},
-		size: { default: o.size },
-		strokeWidth: { default: o.strokeWidth },
+		size: { default: s.size },
+		strokeWidth: { default: s.strokeWidth },
 		absoluteStrokeWidth: {
 			type: Boolean,
-			default: o.absoluteStrokeWidth
+			default: s.absoluteStrokeWidth
 		},
 		label: { default: void 0 }
 	},
-	setup(n) {
-		let o = n, s = e(() => a(o.name));
-		return (e, a) => (r(), t(i(s.value), {
+	setup(r) {
+		let s = r, c = e(() => o(s.name));
+		return (e, o) => c.value ? (i(), t(a(c.value), {
+			key: 0,
 			class: "t-icon",
-			size: n.size,
-			"stroke-width": n.strokeWidth,
-			"absolute-stroke-width": n.absoluteStrokeWidth,
-			role: n.label ? "img" : void 0,
-			"aria-label": n.label || void 0,
-			"aria-hidden": n.label ? void 0 : "true"
+			size: r.size,
+			"stroke-width": r.strokeWidth,
+			"absolute-stroke-width": r.absoluteStrokeWidth,
+			role: r.label ? "img" : void 0,
+			"aria-label": r.label || void 0,
+			"aria-hidden": r.label ? void 0 : "true"
 		}, null, 8, [
 			"size",
 			"stroke-width",
@@ -30,10 +31,10 @@ var s = /*@__PURE__*/ n({
 			"role",
 			"aria-label",
 			"aria-hidden"
-		]));
+		])) : n("", !0);
 	}
 });
 //#endregion
-export { s as default };
+export { c as default };
 
 //# sourceMappingURL=TIcon.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue';\nimport { getTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\nconst iconComponent = computed(() => getTreeIcon(props.name) as Component);\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAgBR,IAAgB,QAAe,EAAY,EAAM,IAAI,CAAc;yBAIvE,EASE,EARK,EAAA,KAAa,GAAA;GAClB,OAAM;GACL,MAAM,EAAA;GACN,gBAAc,EAAA;GACd,yBAAuB,EAAA;GACvB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA,SAAS,KAAA;GACrB,eAAa,EAAA,QAAQ,KAAA,IAAS"}
+{"version":3,"file":"TIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { resolveTreeIcon, treeIconDefaults, type TIconName } from '@treeui/icons';\n\nconst props = withDefaults(\n  defineProps<{\n    name: TIconName;\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    label?: string;\n  }>(),\n  {\n    size: treeIconDefaults.size,\n    strokeWidth: treeIconDefaults.strokeWidth,\n    absoluteStrokeWidth: treeIconDefaults.absoluteStrokeWidth,\n    label: undefined,\n  },\n);\n\n// Resolved per render rather than once at setup, so an icon registered after\n// this component mounted still appears.\nconst iconComponent = computed(() => resolveTreeIcon(props.name));\n</script>\n\n<template>\n  <component\n    :is=\"iconComponent\"\n    v-if=\"iconComponent\"\n    class=\"t-icon\"\n    :size=\"size\"\n    :stroke-width=\"strokeWidth\"\n    :absolute-stroke-width=\"absoluteStrokeWidth\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label || undefined\"\n    :aria-hidden=\"label ? undefined : 'true'\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAIA,IAAM,IAAQ,GAkBR,IAAgB,QAAe,EAAgB,EAAM,IAAI,CAAC;mBAMtD,EAAA,SAAA,EAAA,GAFR,EAUE,EATK,EAAA,KAAa,GAAA;;GAElB,OAAM;GACL,MAAM,EAAA;GACN,gBAAc,EAAA;GACd,yBAAuB,EAAA;GACvB,MAAM,EAAA,QAAK,QAAW,KAAA;GACtB,cAAY,EAAA,SAAS,KAAA;GACrB,eAAa,EAAA,QAAQ,KAAA,IAAS"}

package/dist/components/TModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TModal.cjs","names":[],"sources":["../../src/components/TModal.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 { 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    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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TModal.cjs","names":[],"sources":["../../src/components/TModal.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 { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TModal.js","names":[],"sources":["../../src/components/TModal.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 { 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    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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TModal.js","names":[],"sources":["../../src/components/TModal.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 { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TModal.vue_vue_type_script_setup_true_lang.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"TModal.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TModal.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 { 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    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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TModal.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TModal.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 { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\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    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\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 modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-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-modal', 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-modal__surface',\n  `t-modal__surface--${props.size}`,\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 openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\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  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\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    closeModal();\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-modal__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-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\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-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TModal.vue_vue_type_script_setup_true_lang.js

@@ -49,7 +49,7 @@ var se = ["data-state"], ce = ["aria-disabled"], D = ["data-state"], O = { class
 	},
 	emits: ["update:open", "open-change"],
 	setup(l, { emit: F }) {
-		let I = ae("x"), L = l, R = F, z = S(), B = L.id ?? te("t-modal"), V = `${B}-title`, H = `${B}-description`, U = _(null), W = _(null), G = _(null), K = r(() => !!(L.title || le.header)), le = C(), ue = r(() => ["t-modal", z.class]), de = r(() => z.style), fe = r(() => {
+		let I = r(() => ae("x")), L = l, R = F, z = S(), B = L.id ?? te("t-modal"), V = `${B}-title`, H = `${B}-description`, U = _(null), W = _(null), G = _(null), K = r(() => !!(L.title || le.header)), le = C(), ue = r(() => ["t-modal", z.class]), de = r(() => z.style), fe = r(() => {
 			let { class: e, style: t, ...n } = z;
 			return n;
 		}), pe = r(() => ["t-modal__surface", `t-modal__surface--${L.size}`]), { value: q, setValue: J } = e(b(L, "open"), L.defaultOpen, (e) => {