@treeui/vue 0.8.0 → 0.10.0

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

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

package/dist/components/TEmptyState.cjs

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

package/dist/components/TEmptyState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TEmptyState.cjs","names":[],"sources":["../../src/components/TEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId } from '@treeui/utils';\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  title?: () => unknown;\n  description?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TSize;\n    title?: string;\n    description?: string;\n  }>(),\n  {\n    as: 'section',\n    size: 'md',\n    title: '',\n    description: '',\n  },\n);\n\nconst attrs = useAttrs();\nconst emptyStateId = createId('t-empty-state');\nconst titleId = `${emptyStateId}-title`;\nconst descriptionId = `${emptyStateId}-description`;\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\n\nconst classes = computed(() => [\n  't-empty-state',\n  `t-empty-state--${props.size}`,\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"classes\"\n    :style=\"rootStyle\"\n    :aria-labelledby=\"hasTitle ? titleId : undefined\"\n    :aria-describedby=\"hasDescription ? descriptionId : undefined\"\n  >\n    <div\n      v-if=\"$slots.icon\"\n      class=\"t-empty-state__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <div class=\"t-empty-state__content\">\n      <h2\n        v-if=\"hasTitle\"\n        :id=\"titleId\"\n        class=\"t-empty-state__title\"\n      >\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </h2>\n\n      <p\n        v-if=\"hasDescription\"\n        :id=\"descriptionId\"\n        class=\"t-empty-state__description\"\n      >\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </p>\n\n      <div\n        v-if=\"$slots.default\"\n        class=\"t-empty-state__body\"\n      >\n        <slot />\n      </div>\n\n      <div\n        v-if=\"$slots.actions\"\n        class=\"t-empty-state__actions\"\n      >\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TEmptyState.js

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

package/dist/components/TEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TEmptyState.js","names":[],"sources":["../../src/components/TEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId } from '@treeui/utils';\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  title?: () => unknown;\n  description?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TSize;\n    title?: string;\n    description?: string;\n  }>(),\n  {\n    as: 'section',\n    size: 'md',\n    title: '',\n    description: '',\n  },\n);\n\nconst attrs = useAttrs();\nconst emptyStateId = createId('t-empty-state');\nconst titleId = `${emptyStateId}-title`;\nconst descriptionId = `${emptyStateId}-description`;\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\n\nconst classes = computed(() => [\n  't-empty-state',\n  `t-empty-state--${props.size}`,\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"classes\"\n    :style=\"rootStyle\"\n    :aria-labelledby=\"hasTitle ? titleId : undefined\"\n    :aria-describedby=\"hasDescription ? descriptionId : undefined\"\n  >\n    <div\n      v-if=\"$slots.icon\"\n      class=\"t-empty-state__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <div class=\"t-empty-state__content\">\n      <h2\n        v-if=\"hasTitle\"\n        :id=\"titleId\"\n        class=\"t-empty-state__title\"\n      >\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </h2>\n\n      <p\n        v-if=\"hasDescription\"\n        :id=\"descriptionId\"\n        class=\"t-empty-state__description\"\n      >\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </p>\n\n      <div\n        v-if=\"$slots.default\"\n        class=\"t-empty-state__body\"\n      >\n        <slot />\n      </div>\n\n      <div\n        v-if=\"$slots.actions\"\n        class=\"t-empty-state__actions\"\n      >\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TEmptyState.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue"),t=require("@treeui/utils");var n={key:0,class:`t-empty-state__icon`,"aria-hidden":`true`},r={class:`t-empty-state__content`},i={key:2,class:`t-empty-state__body`},a={key:3,class:`t-empty-state__actions`},o=(0,e.defineComponent)({inheritAttrs:!1,__name:`TEmptyState`,props:{as:{default:`section`},size:{default:`md`},title:{default:``},description:{default:``}},setup(o){let s=(0,e.useSlots)(),c=o,l=(0,e.useAttrs)(),u=(0,t.createId)(`t-empty-state`),d=`${u}-title`,f=`${u}-description`,p=(0,e.computed)(()=>!!(c.title||s.title)),m=(0,e.computed)(()=>!!(c.description||s.description)),h=(0,e.computed)(()=>[`t-empty-state`,`t-empty-state--${c.size}`,l.class]),g=(0,e.computed)(()=>l.style),_=(0,e.computed)(()=>{let{class:e,style:t,...n}=l;return n});return(t,s)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(o.as),(0,e.mergeProps)(_.value,{class:h.value,style:g.value,"aria-labelledby":p.value?d:void 0,"aria-describedby":m.value?f:void 0}),{default:(0,e.withCtx)(()=>[t.$slots.icon?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,n,[(0,e.renderSlot)(t.$slots,`icon`)])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,r,[p.value?((0,e.openBlock)(),(0,e.createElementBlock)(`h2`,{key:0,id:d,class:`t-empty-state__title`},[(0,e.renderSlot)(t.$slots,`title`,{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.title),1)])])):(0,e.createCommentVNode)(``,!0),m.value?((0,e.openBlock)(),(0,e.createElementBlock)(`p`,{key:1,id:f,class:`t-empty-state__description`},[(0,e.renderSlot)(t.$slots,`description`,{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.description),1)])])):(0,e.createCommentVNode)(``,!0),t.$slots.default?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,i,[(0,e.renderSlot)(t.$slots,`default`)])):(0,e.createCommentVNode)(``,!0),t.$slots.actions?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,a,[(0,e.renderSlot)(t.$slots,`actions`)])):(0,e.createCommentVNode)(``,!0)])]),_:3},16,[`class`,`style`,`aria-labelledby`,`aria-describedby`]))}});exports.default=o;
+//# sourceMappingURL=TEmptyState.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TEmptyState.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId } from '@treeui/utils';\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  title?: () => unknown;\n  description?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TSize;\n    title?: string;\n    description?: string;\n  }>(),\n  {\n    as: 'section',\n    size: 'md',\n    title: '',\n    description: '',\n  },\n);\n\nconst attrs = useAttrs();\nconst emptyStateId = createId('t-empty-state');\nconst titleId = `${emptyStateId}-title`;\nconst descriptionId = `${emptyStateId}-description`;\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\n\nconst classes = computed(() => [\n  't-empty-state',\n  `t-empty-state--${props.size}`,\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"classes\"\n    :style=\"rootStyle\"\n    :aria-labelledby=\"hasTitle ? titleId : undefined\"\n    :aria-describedby=\"hasDescription ? descriptionId : undefined\"\n  >\n    <div\n      v-if=\"$slots.icon\"\n      class=\"t-empty-state__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <div class=\"t-empty-state__content\">\n      <h2\n        v-if=\"hasTitle\"\n        :id=\"titleId\"\n        class=\"t-empty-state__title\"\n      >\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </h2>\n\n      <p\n        v-if=\"hasDescription\"\n        :id=\"descriptionId\"\n        class=\"t-empty-state__description\"\n      >\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </p>\n\n      <div\n        v-if=\"$slots.default\"\n        class=\"t-empty-state__body\"\n      >\n        <slot />\n      </div>\n\n      <div\n        v-if=\"$slots.actions\"\n        class=\"t-empty-state__actions\"\n      >\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":"uYASA,IAAM,GAAA,EAAA,EAAA,SAAA,CAAQ,EAQR,EAAQ,EAeR,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,GAAA,EAAA,EAAA,SAAA,CAAwB,eAAe,EACvC,EAAU,GAAG,EAAa,QAC1B,EAAgB,GAAG,EAAa,cAEhC,GAAA,EAAA,EAAA,SAAA,KAA0B,GAAQ,EAAM,OAAS,EAAM,MAAM,EAC7D,GAAA,EAAA,EAAA,SAAA,KAAgC,GAAQ,EAAM,aAAe,EAAM,YAAY,EAE/E,GAAA,EAAA,EAAA,SAAA,KAAyB,CAC7B,gBACA,kBAAkB,EAAM,OACxB,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,GAAA,EAAA,EAAA,SAAA,KAA2B,CAC/B,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,kFAKQ,EAAA,EAAE,GAAA,EAAA,EAAA,WAAA,CACC,EAiDE,MAjDO,CAChB,MAAO,EAAA,MACP,MAAO,EAAA,MACP,kBAAiB,EAAA,MAAW,EAAU,IAAA,GACtC,mBAAkB,EAAA,MAAiB,EAAgB,IAAA,gCAQ9C,CALEA,EAAAA,OAAO,OAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAKT,MANN,EAMM,EAAA,EAAA,EAAA,WAAA,CADgB,EAAA,OAAA,MAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,mBAAA,CAqChB,MAlCN,EAkCM,CAhCI,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOH,KAAA,OANF,GAAI,EACL,MAAM,0CAIC,EAAA,OAAA,QAAA,CAAA,MAAA,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,KAAK,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAKJ,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAOJ,IAAA,OAND,GAAI,EACL,MAAM,gDAIC,EAAA,OAAA,cAAA,CAAA,MAAA,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,WAAW,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAKVA,EAAAA,OAAO,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIT,MALN,EAKM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAIFA,EAAAA,OAAO,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIT,MALN,EAKM,EAAA,EAAA,EAAA,WAAA,CADmB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA"}

package/dist/components/TEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, useAttrs as f, useSlots as p, withCtx as m } from "vue";
+import { createId as h } from "@treeui/utils";
+//#region src/components/TEmptyState.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "t-empty-state__icon",
+	"aria-hidden": "true"
+}, _ = { class: "t-empty-state__content" }, v = {
+	key: 2,
+	class: "t-empty-state__body"
+}, y = {
+	key: 3,
+	class: "t-empty-state__actions"
+}, b = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "TEmptyState",
+	props: {
+		as: { default: "section" },
+		size: { default: "md" },
+		title: { default: "" },
+		description: { default: "" }
+	},
+	setup(o) {
+		let b = p(), x = o, S = f(), C = h("t-empty-state"), w = `${C}-title`, T = `${C}-description`, E = e(() => !!(x.title || b.title)), D = e(() => !!(x.description || b.description)), O = e(() => [
+			"t-empty-state",
+			`t-empty-state--${x.size}`,
+			S.class
+		]), k = e(() => S.style), A = e(() => {
+			let { class: e, style: t, ...n } = S;
+			return n;
+		});
+		return (e, f) => (c(), t(u(o.as), s(A.value, {
+			class: O.value,
+			style: k.value,
+			"aria-labelledby": E.value ? w : void 0,
+			"aria-describedby": D.value ? T : void 0
+		}), {
+			default: m(() => [e.$slots.icon ? (c(), r("div", g, [l(e.$slots, "icon")])) : n("", !0), i("div", _, [
+				E.value ? (c(), r("h2", {
+					key: 0,
+					id: w,
+					class: "t-empty-state__title"
+				}, [l(e.$slots, "title", {}, () => [a(d(o.title), 1)])])) : n("", !0),
+				D.value ? (c(), r("p", {
+					key: 1,
+					id: T,
+					class: "t-empty-state__description"
+				}, [l(e.$slots, "description", {}, () => [a(d(o.description), 1)])])) : n("", !0),
+				e.$slots.default ? (c(), r("div", v, [l(e.$slots, "default")])) : n("", !0),
+				e.$slots.actions ? (c(), r("div", y, [l(e.$slots, "actions")])) : n("", !0)
+			])]),
+			_: 3
+		}, 16, [
+			"class",
+			"style",
+			"aria-labelledby",
+			"aria-describedby"
+		]));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=TEmptyState.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TEmptyState.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TEmptyState.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId } from '@treeui/utils';\nimport { computed, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  title?: () => unknown;\n  description?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TSize;\n    title?: string;\n    description?: string;\n  }>(),\n  {\n    as: 'section',\n    size: 'md',\n    title: '',\n    description: '',\n  },\n);\n\nconst attrs = useAttrs();\nconst emptyStateId = createId('t-empty-state');\nconst titleId = `${emptyStateId}-title`;\nconst descriptionId = `${emptyStateId}-description`;\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\n\nconst classes = computed(() => [\n  't-empty-state',\n  `t-empty-state--${props.size}`,\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"classes\"\n    :style=\"rootStyle\"\n    :aria-labelledby=\"hasTitle ? titleId : undefined\"\n    :aria-describedby=\"hasDescription ? descriptionId : undefined\"\n  >\n    <div\n      v-if=\"$slots.icon\"\n      class=\"t-empty-state__icon\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <div class=\"t-empty-state__content\">\n      <h2\n        v-if=\"hasTitle\"\n        :id=\"titleId\"\n        class=\"t-empty-state__title\"\n      >\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </h2>\n\n      <p\n        v-if=\"hasDescription\"\n        :id=\"descriptionId\"\n        class=\"t-empty-state__description\"\n      >\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </p>\n\n      <div\n        v-if=\"$slots.default\"\n        class=\"t-empty-state__body\"\n      >\n        <slot />\n      </div>\n\n      <div\n        v-if=\"$slots.actions\"\n        class=\"t-empty-state__actions\"\n      >\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EASA,IAAM,IAAQ,EAAA,GAQR,IAAQ,GAeR,IAAQ,EAAS,GACjB,IAAe,EAAS,eAAe,GACvC,IAAU,GAAG,EAAa,SAC1B,IAAgB,GAAG,EAAa,eAEhC,IAAW,QAAe,GAAQ,EAAM,SAAS,EAAM,MAAM,GAC7D,IAAiB,QAAe,GAAQ,EAAM,eAAe,EAAM,YAAY,GAE/E,IAAU,QAAe;GAC7B;GACA,kBAAkB,EAAM;GACxB,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAY,QAAe;GAC/B,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC;yBAIC,EAmDY,EAlDL,EAAA,EAAE,GADT,EAEU,EAiDE,OAjDO;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;GACP,mBAAiB,EAAA,QAAW,IAAU,KAAA;GACtC,oBAAkB,EAAA,QAAiB,IAAgB,KAAA;;oBAQ9C,CALEA,EAAAA,OAAO,QAAA,EAAA,GADf,EAMM,OANN,GAMM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAGtB,EAkCM,OAlCN,GAkCM;IAhCI,EAAA,SAAA,EAAA,GADR,EAQK,MAAA;;KANF,IAAI;KACL,OAAM;QAEN,EAEO,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EADF,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAKJ,EAAA,SAAA,EAAA,GADR,EAQI,KAAA;;KAND,IAAI;KACL,OAAM;QAEN,EAEO,EAAA,QAAA,eAAA,CAAA,SAAA,CAAA,EAAA,EADF,EAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAKVA,EAAAA,OAAO,WAAA,EAAA,GADf,EAKM,OALN,GAKM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAIFA,EAAAA,OAAO,WAAA,EAAA,GADf,EAKM,OALN,GAKM,CADJ,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TFileUpload.cjs

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

package/dist/components/TFileUpload.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TFileUpload.cjs","names":[],"sources":["../../src/components/TFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport type TFileUploadRejectionReason =\n  | 'file-invalid-type'\n  | 'file-too-large'\n  | 'too-many-files';\n\nexport interface TFileUploadRejection {\n  file: File;\n  reason: TFileUploadRejectionReason;\n  message: string;\n}\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  default?: (props: {\n    files: File[];\n    isDragActive: boolean;\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n  file?: (props: {\n    file: File;\n    index: number;\n    removeFile: () => void;\n  }) => unknown;\n  actions?: (props: {\n    files: File[];\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: File[];\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    accept?: string;\n    multiple?: boolean;\n    maxFiles?: number | null;\n    maxFileSize?: number | null;\n    label?: string;\n    description?: string;\n    buttonLabel?: string;\n    filesLabel?: string;\n    paste?: boolean;\n    drop?: boolean;\n    showFileList?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    accept: '',\n    multiple: true,\n    label: 'Drop files here',\n    description: 'Click to browse, drag and drop, or paste with Ctrl+V.',\n    buttonLabel: 'Browse files',\n    filesLabel: 'Selected files',\n    maxFiles: null,\n    maxFileSize: null,\n    paste: true,\n    drop: true,\n    showFileList: true,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [files: File[]];\n  'files-accepted': [files: File[]];\n  'files-rejected': [rejections: TFileUploadRejection[]];\n}>();\n\nconst attrs = useAttrs();\nconst rootRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isDragActive = ref(false);\nconst isFocusedWithin = ref(false);\nconst dragDepth = ref(0);\nconst feedbackMessages = ref<string[]>([]);\n\nconst uploadId = createId('t-file-upload');\nconst descriptionId = `${uploadId}-description`;\nconst feedbackId = `${uploadId}-feedback`;\nconst filesId = `${uploadId}-files`;\n\nconst isUnavailable = computed(() => props.disabled || props.loading);\nconst hasFiles = computed(() => props.modelValue.length > 0);\nconst hasCustomBody = computed(() => Boolean(slots.default));\n\nconst effectiveMaxFiles = computed(() => {\n  if (!props.multiple) {\n    return 1;\n  }\n\n  if (typeof props.maxFiles !== 'number') {\n    return Number.POSITIVE_INFINITY;\n  }\n\n  return Math.max(props.maxFiles, 0);\n});\n\nconst rootClasses = computed(() => [\n  't-file-upload',\n  `t-file-upload--${props.size}`,\n  {\n    'is-disabled': isUnavailable.value,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-drag-active': isDragActive.value,\n    'has-files': hasFiles.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst describedBy = computed(() => {\n  const ids: string[] = [];\n\n  if (props.description && !hasCustomBody.value) {\n    ids.push(descriptionId);\n  }\n\n  if (feedbackMessages.value.length > 0) {\n    ids.push(feedbackId);\n  }\n\n  if (props.showFileList && hasFiles.value) {\n    ids.push(filesId);\n  }\n\n  return ids.length > 0 ? ids.join(' ') : undefined;\n});\n\nconst selectedFilesLabel = computed(() => `${props.filesLabel} (${props.modelValue.length})`);\n\nconst formatFileSize = (size: number) => {\n  if (size < 1024) {\n    return `${size} B`;\n  }\n\n  const units = ['KB', 'MB', 'GB'];\n  let value = size / 1024;\n  let unitIndex = 0;\n\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex += 1;\n  }\n\n  const roundedValue = value >= 10 || Number.isInteger(value)\n    ? Math.round(value)\n    : Number(value.toFixed(1));\n\n  return `${roundedValue} ${units[unitIndex]}`;\n};\n\nconst fileKey = (file: File, index: number) =>\n  `${file.name}-${file.size}-${file.lastModified}-${index}`;\n\nconst matchesAccept = (file: File) => {\n  if (!props.accept.trim()) {\n    return true;\n  }\n\n  const tokens = props.accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith('.')) {\n      return fileName.endsWith(token);\n    }\n\n    if (token.endsWith('/*')) {\n      return fileType.startsWith(token.slice(0, -1));\n    }\n\n    return fileType === token;\n  });\n};\n\nconst buildRejectionMessage = (\n  file: File,\n  reason: TFileUploadRejectionReason,\n) => {\n  switch (reason) {\n    case 'file-invalid-type':\n      return `${file.name} is not an accepted file type.`;\n    case 'file-too-large':\n      return `${file.name} exceeds the ${formatFileSize(props.maxFileSize ?? 0)} limit.`;\n    case 'too-many-files':\n      return `You can only add up to ${effectiveMaxFiles.value} file${effectiveMaxFiles.value === 1 ? '' : 's'}.`;\n    default:\n      return `${file.name} could not be added.`;\n  }\n};\n\nconst resetInputValue = () => {\n  if (inputRef.value) {\n    inputRef.value.value = '';\n  }\n};\n\nconst openFileDialog = () => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  inputRef.value?.click();\n};\n\nconst emitFiles = (\n  nextFiles: File[],\n  acceptedFiles: File[],\n  rejections: TFileUploadRejection[],\n) => {\n  feedbackMessages.value = rejections.map((rejection) => rejection.message);\n\n  if (rejections.length > 0) {\n    emit('files-rejected', rejections);\n  }\n\n  if (acceptedFiles.length > 0) {\n    emit('update:modelValue', nextFiles);\n    emit('files-accepted', acceptedFiles);\n  }\n};\n\nconst processFiles = (incomingFiles: File[]) => {\n  if (isUnavailable.value || incomingFiles.length === 0) {\n    return;\n  }\n\n  const nextFiles = props.multiple ? [...props.modelValue] : [];\n  const acceptedFiles: File[] = [];\n  const rejections: TFileUploadRejection[] = [];\n  let remainingSlots = Number.isFinite(effectiveMaxFiles.value)\n    ? Math.max(effectiveMaxFiles.value - nextFiles.length, 0)\n    : Number.POSITIVE_INFINITY;\n\n  for (const file of incomingFiles) {\n    if (remainingSlots <= 0) {\n      rejections.push({\n        file,\n        reason: 'too-many-files',\n        message: buildRejectionMessage(file, 'too-many-files'),\n      });\n      continue;\n    }\n\n    if (!matchesAccept(file)) {\n      rejections.push({\n        file,\n        reason: 'file-invalid-type',\n        message: buildRejectionMessage(file, 'file-invalid-type'),\n      });\n      continue;\n    }\n\n    if (\n      typeof props.maxFileSize === 'number' &&\n      props.maxFileSize > 0 &&\n      file.size > props.maxFileSize\n    ) {\n      rejections.push({\n        file,\n        reason: 'file-too-large',\n        message: buildRejectionMessage(file, 'file-too-large'),\n      });\n      continue;\n    }\n\n    acceptedFiles.push(file);\n    nextFiles.push(file);\n\n    if (Number.isFinite(remainingSlots)) {\n      remainingSlots -= 1;\n    }\n  }\n\n  emitFiles(nextFiles, acceptedFiles, rejections);\n};\n\nconst removeFile = (index: number) => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', props.modelValue.filter((_, fileIndex) => fileIndex !== index));\n};\n\nconst clearFiles = () => {\n  if (isUnavailable.value || !hasFiles.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', []);\n};\n\nconst hasTransferFiles = (dataTransfer?: DataTransfer | null) => {\n  if (!dataTransfer) {\n    return false;\n  }\n\n  return dataTransfer.files.length > 0 || Array.from(dataTransfer.types).includes('Files');\n};\n\nconst getClipboardFiles = (\n  clipboardData?: Pick<DataTransfer, 'items'> | null,\n) => {\n  if (!clipboardData?.items) {\n    return [];\n  }\n\n  return Array.from(clipboardData.items)\n    .map((item) => item.getAsFile?.() ?? null)\n    .filter((file): file is File => file instanceof File);\n};\n\nconst onInputChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  processFiles(Array.from(target.files ?? []));\n  resetInputValue();\n};\n\nconst onDropzoneKeydown = (event: KeyboardEvent) => {\n  if (!isActivationKey(event) || isUnavailable.value) {\n    return;\n  }\n\n  event.preventDefault();\n  openFileDialog();\n};\n\nconst onFocusIn = () => {\n  isFocusedWithin.value = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const nextTarget = event.relatedTarget as Node | null;\n\n  if (nextTarget && rootRef.value?.contains(nextTarget)) {\n    return;\n  }\n\n  isFocusedWithin.value = false;\n};\n\nconst onPaste = (event: ClipboardEvent) => {\n  if (!props.paste || isUnavailable.value) {\n    return;\n  }\n\n  const clipboardFiles = getClipboardFiles(event.clipboardData);\n\n  if (clipboardFiles.length === 0) {\n    return;\n  }\n\n  event.preventDefault();\n  processFiles(clipboardFiles);\n};\n\nconst onDocumentPaste = (event: Event) => {\n  if (!isFocusedWithin.value || event.defaultPrevented) {\n    return;\n  }\n\n  onPaste(event as ClipboardEvent);\n};\n\nconst onDragEnter = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value += 1;\n  isDragActive.value = true;\n};\n\nconst onDragOver = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  isDragActive.value = true;\n};\n\nconst onDragLeave = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = Math.max(dragDepth.value - 1, 0);\n\n  if (dragDepth.value === 0) {\n    isDragActive.value = false;\n  }\n};\n\nconst onDrop = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = 0;\n  isDragActive.value = false;\n  processFiles(Array.from(event.dataTransfer?.files ?? []));\n};\n\nonMounted(() => {\n  document.addEventListener('paste', onDocumentPaste);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('paste', onDocumentPaste);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n    @paste=\"onPaste\"\n  >\n    <input\n      :id=\"uploadId\"\n      ref=\"inputRef\"\n      class=\"t-visually-hidden\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"isUnavailable\"\n      @change=\"onInputChange\"\n    >\n\n    <div\n      class=\"t-file-upload__dropzone\"\n      :aria-busy=\"loading || undefined\"\n      :aria-controls=\"showFileList && hasFiles ? filesId : undefined\"\n      :aria-describedby=\"describedBy\"\n      :aria-disabled=\"isUnavailable || undefined\"\n      :aria-invalid=\"invalid || undefined\"\n      role=\"button\"\n      :tabindex=\"isUnavailable ? -1 : 0\"\n      @click=\"openFileDialog\"\n      @keydown=\"onDropzoneKeydown\"\n      @dragenter=\"onDragEnter\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n      @drop=\"onDrop\"\n    >\n      <div\n        v-if=\"$slots.icon || !$slots.default\"\n        class=\"t-file-upload__icon\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"icon\">\n          <span class=\"t-file-upload__icon-mark\">+</span>\n        </slot>\n      </div>\n\n      <div class=\"t-file-upload__content\">\n        <slot\n          :files=\"modelValue\"\n          :is-drag-active=\"isDragActive\"\n          :open-file-dialog=\"openFileDialog\"\n          :clear-files=\"clearFiles\"\n        >\n          <p class=\"t-file-upload__label\">\n            {{ label }}\n          </p>\n          <p\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            class=\"t-file-upload__description\"\n          >\n            {{ description }}\n          </p>\n          <span class=\"t-file-upload__browse\">\n            {{ buttonLabel }}\n          </span>\n        </slot>\n      </div>\n\n      <TSpinner\n        v-if=\"loading\"\n        class=\"t-file-upload__spinner\"\n        size=\"sm\"\n        label=\"Uploading files\"\n      />\n    </div>\n\n    <ul\n      v-if=\"feedbackMessages.length > 0\"\n      :id=\"feedbackId\"\n      class=\"t-file-upload__feedback\"\n      aria-live=\"polite\"\n    >\n      <li\n        v-for=\"message in feedbackMessages\"\n        :key=\"message\"\n      >\n        {{ message }}\n      </li>\n    </ul>\n\n    <div\n      v-if=\"showFileList && hasFiles\"\n      class=\"t-file-upload__files\"\n    >\n      <div class=\"t-file-upload__files-header\">\n        <p\n          :id=\"filesId\"\n          class=\"t-file-upload__files-label\"\n        >\n          {{ selectedFilesLabel }}\n        </p>\n\n        <button\n          class=\"t-file-upload__clear\"\n          type=\"button\"\n          :disabled=\"isUnavailable\"\n          @click=\"clearFiles\"\n        >\n          Clear all\n        </button>\n      </div>\n\n      <ul class=\"t-file-upload__list\">\n        <li\n          v-for=\"(file, index) in modelValue\"\n          :key=\"fileKey(file, index)\"\n          class=\"t-file-upload__file\"\n        >\n          <slot\n            name=\"file\"\n            :file=\"file\"\n            :index=\"index\"\n            :remove-file=\"() => removeFile(index)\"\n          >\n            <div class=\"t-file-upload__file-copy\">\n              <p class=\"t-file-upload__file-name\">\n                {{ file.name }}\n              </p>\n              <p class=\"t-file-upload__file-meta\">\n                {{ formatFileSize(file.size) }}\n              </p>\n            </div>\n\n            <button\n              class=\"t-file-upload__remove\"\n              type=\"button\"\n              :disabled=\"isUnavailable\"\n              :aria-label=\"`Remove ${file.name}`\"\n              @click=\"removeFile(index)\"\n            >\n              Remove\n            </button>\n          </slot>\n        </li>\n      </ul>\n    </div>\n\n    <div\n      v-if=\"$slots.actions\"\n      class=\"t-file-upload__actions\"\n    >\n      <slot\n        name=\"actions\"\n        :files=\"modelValue\"\n        :open-file-dialog=\"openFileDialog\"\n        :clear-files=\"clearFiles\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TFileUpload.js

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

package/dist/components/TFileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TFileUpload.js","names":[],"sources":["../../src/components/TFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport type TFileUploadRejectionReason =\n  | 'file-invalid-type'\n  | 'file-too-large'\n  | 'too-many-files';\n\nexport interface TFileUploadRejection {\n  file: File;\n  reason: TFileUploadRejectionReason;\n  message: string;\n}\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  default?: (props: {\n    files: File[];\n    isDragActive: boolean;\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n  file?: (props: {\n    file: File;\n    index: number;\n    removeFile: () => void;\n  }) => unknown;\n  actions?: (props: {\n    files: File[];\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: File[];\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    accept?: string;\n    multiple?: boolean;\n    maxFiles?: number | null;\n    maxFileSize?: number | null;\n    label?: string;\n    description?: string;\n    buttonLabel?: string;\n    filesLabel?: string;\n    paste?: boolean;\n    drop?: boolean;\n    showFileList?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    accept: '',\n    multiple: true,\n    label: 'Drop files here',\n    description: 'Click to browse, drag and drop, or paste with Ctrl+V.',\n    buttonLabel: 'Browse files',\n    filesLabel: 'Selected files',\n    maxFiles: null,\n    maxFileSize: null,\n    paste: true,\n    drop: true,\n    showFileList: true,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [files: File[]];\n  'files-accepted': [files: File[]];\n  'files-rejected': [rejections: TFileUploadRejection[]];\n}>();\n\nconst attrs = useAttrs();\nconst rootRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isDragActive = ref(false);\nconst isFocusedWithin = ref(false);\nconst dragDepth = ref(0);\nconst feedbackMessages = ref<string[]>([]);\n\nconst uploadId = createId('t-file-upload');\nconst descriptionId = `${uploadId}-description`;\nconst feedbackId = `${uploadId}-feedback`;\nconst filesId = `${uploadId}-files`;\n\nconst isUnavailable = computed(() => props.disabled || props.loading);\nconst hasFiles = computed(() => props.modelValue.length > 0);\nconst hasCustomBody = computed(() => Boolean(slots.default));\n\nconst effectiveMaxFiles = computed(() => {\n  if (!props.multiple) {\n    return 1;\n  }\n\n  if (typeof props.maxFiles !== 'number') {\n    return Number.POSITIVE_INFINITY;\n  }\n\n  return Math.max(props.maxFiles, 0);\n});\n\nconst rootClasses = computed(() => [\n  't-file-upload',\n  `t-file-upload--${props.size}`,\n  {\n    'is-disabled': isUnavailable.value,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-drag-active': isDragActive.value,\n    'has-files': hasFiles.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst describedBy = computed(() => {\n  const ids: string[] = [];\n\n  if (props.description && !hasCustomBody.value) {\n    ids.push(descriptionId);\n  }\n\n  if (feedbackMessages.value.length > 0) {\n    ids.push(feedbackId);\n  }\n\n  if (props.showFileList && hasFiles.value) {\n    ids.push(filesId);\n  }\n\n  return ids.length > 0 ? ids.join(' ') : undefined;\n});\n\nconst selectedFilesLabel = computed(() => `${props.filesLabel} (${props.modelValue.length})`);\n\nconst formatFileSize = (size: number) => {\n  if (size < 1024) {\n    return `${size} B`;\n  }\n\n  const units = ['KB', 'MB', 'GB'];\n  let value = size / 1024;\n  let unitIndex = 0;\n\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex += 1;\n  }\n\n  const roundedValue = value >= 10 || Number.isInteger(value)\n    ? Math.round(value)\n    : Number(value.toFixed(1));\n\n  return `${roundedValue} ${units[unitIndex]}`;\n};\n\nconst fileKey = (file: File, index: number) =>\n  `${file.name}-${file.size}-${file.lastModified}-${index}`;\n\nconst matchesAccept = (file: File) => {\n  if (!props.accept.trim()) {\n    return true;\n  }\n\n  const tokens = props.accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith('.')) {\n      return fileName.endsWith(token);\n    }\n\n    if (token.endsWith('/*')) {\n      return fileType.startsWith(token.slice(0, -1));\n    }\n\n    return fileType === token;\n  });\n};\n\nconst buildRejectionMessage = (\n  file: File,\n  reason: TFileUploadRejectionReason,\n) => {\n  switch (reason) {\n    case 'file-invalid-type':\n      return `${file.name} is not an accepted file type.`;\n    case 'file-too-large':\n      return `${file.name} exceeds the ${formatFileSize(props.maxFileSize ?? 0)} limit.`;\n    case 'too-many-files':\n      return `You can only add up to ${effectiveMaxFiles.value} file${effectiveMaxFiles.value === 1 ? '' : 's'}.`;\n    default:\n      return `${file.name} could not be added.`;\n  }\n};\n\nconst resetInputValue = () => {\n  if (inputRef.value) {\n    inputRef.value.value = '';\n  }\n};\n\nconst openFileDialog = () => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  inputRef.value?.click();\n};\n\nconst emitFiles = (\n  nextFiles: File[],\n  acceptedFiles: File[],\n  rejections: TFileUploadRejection[],\n) => {\n  feedbackMessages.value = rejections.map((rejection) => rejection.message);\n\n  if (rejections.length > 0) {\n    emit('files-rejected', rejections);\n  }\n\n  if (acceptedFiles.length > 0) {\n    emit('update:modelValue', nextFiles);\n    emit('files-accepted', acceptedFiles);\n  }\n};\n\nconst processFiles = (incomingFiles: File[]) => {\n  if (isUnavailable.value || incomingFiles.length === 0) {\n    return;\n  }\n\n  const nextFiles = props.multiple ? [...props.modelValue] : [];\n  const acceptedFiles: File[] = [];\n  const rejections: TFileUploadRejection[] = [];\n  let remainingSlots = Number.isFinite(effectiveMaxFiles.value)\n    ? Math.max(effectiveMaxFiles.value - nextFiles.length, 0)\n    : Number.POSITIVE_INFINITY;\n\n  for (const file of incomingFiles) {\n    if (remainingSlots <= 0) {\n      rejections.push({\n        file,\n        reason: 'too-many-files',\n        message: buildRejectionMessage(file, 'too-many-files'),\n      });\n      continue;\n    }\n\n    if (!matchesAccept(file)) {\n      rejections.push({\n        file,\n        reason: 'file-invalid-type',\n        message: buildRejectionMessage(file, 'file-invalid-type'),\n      });\n      continue;\n    }\n\n    if (\n      typeof props.maxFileSize === 'number' &&\n      props.maxFileSize > 0 &&\n      file.size > props.maxFileSize\n    ) {\n      rejections.push({\n        file,\n        reason: 'file-too-large',\n        message: buildRejectionMessage(file, 'file-too-large'),\n      });\n      continue;\n    }\n\n    acceptedFiles.push(file);\n    nextFiles.push(file);\n\n    if (Number.isFinite(remainingSlots)) {\n      remainingSlots -= 1;\n    }\n  }\n\n  emitFiles(nextFiles, acceptedFiles, rejections);\n};\n\nconst removeFile = (index: number) => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', props.modelValue.filter((_, fileIndex) => fileIndex !== index));\n};\n\nconst clearFiles = () => {\n  if (isUnavailable.value || !hasFiles.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', []);\n};\n\nconst hasTransferFiles = (dataTransfer?: DataTransfer | null) => {\n  if (!dataTransfer) {\n    return false;\n  }\n\n  return dataTransfer.files.length > 0 || Array.from(dataTransfer.types).includes('Files');\n};\n\nconst getClipboardFiles = (\n  clipboardData?: Pick<DataTransfer, 'items'> | null,\n) => {\n  if (!clipboardData?.items) {\n    return [];\n  }\n\n  return Array.from(clipboardData.items)\n    .map((item) => item.getAsFile?.() ?? null)\n    .filter((file): file is File => file instanceof File);\n};\n\nconst onInputChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  processFiles(Array.from(target.files ?? []));\n  resetInputValue();\n};\n\nconst onDropzoneKeydown = (event: KeyboardEvent) => {\n  if (!isActivationKey(event) || isUnavailable.value) {\n    return;\n  }\n\n  event.preventDefault();\n  openFileDialog();\n};\n\nconst onFocusIn = () => {\n  isFocusedWithin.value = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const nextTarget = event.relatedTarget as Node | null;\n\n  if (nextTarget && rootRef.value?.contains(nextTarget)) {\n    return;\n  }\n\n  isFocusedWithin.value = false;\n};\n\nconst onPaste = (event: ClipboardEvent) => {\n  if (!props.paste || isUnavailable.value) {\n    return;\n  }\n\n  const clipboardFiles = getClipboardFiles(event.clipboardData);\n\n  if (clipboardFiles.length === 0) {\n    return;\n  }\n\n  event.preventDefault();\n  processFiles(clipboardFiles);\n};\n\nconst onDocumentPaste = (event: Event) => {\n  if (!isFocusedWithin.value || event.defaultPrevented) {\n    return;\n  }\n\n  onPaste(event as ClipboardEvent);\n};\n\nconst onDragEnter = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value += 1;\n  isDragActive.value = true;\n};\n\nconst onDragOver = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  isDragActive.value = true;\n};\n\nconst onDragLeave = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = Math.max(dragDepth.value - 1, 0);\n\n  if (dragDepth.value === 0) {\n    isDragActive.value = false;\n  }\n};\n\nconst onDrop = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = 0;\n  isDragActive.value = false;\n  processFiles(Array.from(event.dataTransfer?.files ?? []));\n};\n\nonMounted(() => {\n  document.addEventListener('paste', onDocumentPaste);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('paste', onDocumentPaste);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n    @paste=\"onPaste\"\n  >\n    <input\n      :id=\"uploadId\"\n      ref=\"inputRef\"\n      class=\"t-visually-hidden\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"isUnavailable\"\n      @change=\"onInputChange\"\n    >\n\n    <div\n      class=\"t-file-upload__dropzone\"\n      :aria-busy=\"loading || undefined\"\n      :aria-controls=\"showFileList && hasFiles ? filesId : undefined\"\n      :aria-describedby=\"describedBy\"\n      :aria-disabled=\"isUnavailable || undefined\"\n      :aria-invalid=\"invalid || undefined\"\n      role=\"button\"\n      :tabindex=\"isUnavailable ? -1 : 0\"\n      @click=\"openFileDialog\"\n      @keydown=\"onDropzoneKeydown\"\n      @dragenter=\"onDragEnter\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n      @drop=\"onDrop\"\n    >\n      <div\n        v-if=\"$slots.icon || !$slots.default\"\n        class=\"t-file-upload__icon\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"icon\">\n          <span class=\"t-file-upload__icon-mark\">+</span>\n        </slot>\n      </div>\n\n      <div class=\"t-file-upload__content\">\n        <slot\n          :files=\"modelValue\"\n          :is-drag-active=\"isDragActive\"\n          :open-file-dialog=\"openFileDialog\"\n          :clear-files=\"clearFiles\"\n        >\n          <p class=\"t-file-upload__label\">\n            {{ label }}\n          </p>\n          <p\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            class=\"t-file-upload__description\"\n          >\n            {{ description }}\n          </p>\n          <span class=\"t-file-upload__browse\">\n            {{ buttonLabel }}\n          </span>\n        </slot>\n      </div>\n\n      <TSpinner\n        v-if=\"loading\"\n        class=\"t-file-upload__spinner\"\n        size=\"sm\"\n        label=\"Uploading files\"\n      />\n    </div>\n\n    <ul\n      v-if=\"feedbackMessages.length > 0\"\n      :id=\"feedbackId\"\n      class=\"t-file-upload__feedback\"\n      aria-live=\"polite\"\n    >\n      <li\n        v-for=\"message in feedbackMessages\"\n        :key=\"message\"\n      >\n        {{ message }}\n      </li>\n    </ul>\n\n    <div\n      v-if=\"showFileList && hasFiles\"\n      class=\"t-file-upload__files\"\n    >\n      <div class=\"t-file-upload__files-header\">\n        <p\n          :id=\"filesId\"\n          class=\"t-file-upload__files-label\"\n        >\n          {{ selectedFilesLabel }}\n        </p>\n\n        <button\n          class=\"t-file-upload__clear\"\n          type=\"button\"\n          :disabled=\"isUnavailable\"\n          @click=\"clearFiles\"\n        >\n          Clear all\n        </button>\n      </div>\n\n      <ul class=\"t-file-upload__list\">\n        <li\n          v-for=\"(file, index) in modelValue\"\n          :key=\"fileKey(file, index)\"\n          class=\"t-file-upload__file\"\n        >\n          <slot\n            name=\"file\"\n            :file=\"file\"\n            :index=\"index\"\n            :remove-file=\"() => removeFile(index)\"\n          >\n            <div class=\"t-file-upload__file-copy\">\n              <p class=\"t-file-upload__file-name\">\n                {{ file.name }}\n              </p>\n              <p class=\"t-file-upload__file-meta\">\n                {{ formatFileSize(file.size) }}\n              </p>\n            </div>\n\n            <button\n              class=\"t-file-upload__remove\"\n              type=\"button\"\n              :disabled=\"isUnavailable\"\n              :aria-label=\"`Remove ${file.name}`\"\n              @click=\"removeFile(index)\"\n            >\n              Remove\n            </button>\n          </slot>\n        </li>\n      </ul>\n    </div>\n\n    <div\n      v-if=\"$slots.actions\"\n      class=\"t-file-upload__actions\"\n    >\n      <slot\n        name=\"actions\"\n        :files=\"modelValue\"\n        :open-file-dialog=\"openFileDialog\"\n        :clear-files=\"clearFiles\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TFileUpload.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("./TSpinner.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`id`,`accept`,`multiple`,`disabled`],i=[`aria-busy`,`aria-controls`,`aria-describedby`,`aria-disabled`,`aria-invalid`,`tabindex`],a={key:0,class:`t-file-upload__icon`,"aria-hidden":`true`},ee={class:`t-file-upload__content`},te={class:`t-file-upload__label`},o={class:`t-file-upload__browse`},s={key:1,class:`t-file-upload__files`},c={class:`t-file-upload__files-header`},l=[`disabled`],u={class:`t-file-upload__list`},d={class:`t-file-upload__file-copy`},f={class:`t-file-upload__file-name`},p={class:`t-file-upload__file-meta`},m=[`disabled`,`aria-label`,`onClick`],h={key:2,class:`t-file-upload__actions`},g=(0,t.defineComponent)({inheritAttrs:!1,__name:`TFileUpload`,props:{modelValue:{default:()=>[]},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},accept:{default:``},multiple:{type:Boolean,default:!0},maxFiles:{default:null},maxFileSize:{default:null},label:{default:`Drop files here`},description:{default:`Click to browse, drag and drop, or paste with Ctrl+V.`},buttonLabel:{default:`Browse files`},filesLabel:{default:`Selected files`},paste:{type:Boolean,default:!0},drop:{type:Boolean,default:!0},showFileList:{type:Boolean,default:!0}},emits:[`update:modelValue`,`files-accepted`,`files-rejected`],setup(g,{emit:_}){let ne=(0,t.useSlots)(),v=g,y=_,b=(0,t.useAttrs)(),x=(0,t.ref)(null),S=(0,t.ref)(null),C=(0,t.ref)(!1),w=(0,t.ref)(!1),T=(0,t.ref)(0),E=(0,t.ref)([]),D=(0,n.createId)(`t-file-upload`),O=`${D}-description`,k=`${D}-feedback`,A=`${D}-files`,j=(0,t.computed)(()=>v.disabled||v.loading),M=(0,t.computed)(()=>v.modelValue.length>0),N=(0,t.computed)(()=>!!ne.default),P=(0,t.computed)(()=>v.multiple?typeof v.maxFiles==`number`?Math.max(v.maxFiles,0):1/0:1),F=(0,t.computed)(()=>[`t-file-upload`,`t-file-upload--${v.size}`,{"is-disabled":j.value,"is-invalid":v.invalid,"is-loading":v.loading,"is-drag-active":C.value,"has-files":M.value},b.class]),I=(0,t.computed)(()=>b.style),L=(0,t.computed)(()=>{let{class:e,style:t,...n}=b;return n}),R=(0,t.computed)(()=>{let e=[];return v.description&&!N.value&&e.push(O),E.value.length>0&&e.push(k),v.showFileList&&M.value&&e.push(A),e.length>0?e.join(` `):void 0}),z=(0,t.computed)(()=>`${v.filesLabel} (${v.modelValue.length})`),B=e=>{if(e<1024)return`${e} B`;let t=[`KB`,`MB`,`GB`],n=e/1024,r=0;for(;n>=1024&&r<t.length-1;)n/=1024,r+=1;return`${n>=10||Number.isInteger(n)?Math.round(n):Number(n.toFixed(1))} ${t[r]}`},V=(e,t)=>`${e.name}-${e.size}-${e.lastModified}-${t}`,H=e=>{if(!v.accept.trim())return!0;let t=v.accept.split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean),n=e.name.toLowerCase(),r=e.type.toLowerCase();return t.some(e=>e.startsWith(`.`)?n.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r===e)},U=(e,t)=>{switch(t){case`file-invalid-type`:return`${e.name} is not an accepted file type.`;case`file-too-large`:return`${e.name} exceeds the ${B(v.maxFileSize??0)} limit.`;case`too-many-files`:return`You can only add up to ${P.value} file${P.value===1?``:`s`}.`;default:return`${e.name} could not be added.`}},W=()=>{S.value&&(S.value.value=``)},G=()=>{j.value||S.value?.click()},K=(e,t,n)=>{E.value=n.map(e=>e.message),n.length>0&&y(`files-rejected`,n),t.length>0&&(y(`update:modelValue`,e),y(`files-accepted`,t))},q=e=>{if(j.value||e.length===0)return;let t=v.multiple?[...v.modelValue]:[],n=[],r=[],i=Number.isFinite(P.value)?Math.max(P.value-t.length,0):1/0;for(let a of e){if(i<=0){r.push({file:a,reason:`too-many-files`,message:U(a,`too-many-files`)});continue}if(!H(a)){r.push({file:a,reason:`file-invalid-type`,message:U(a,`file-invalid-type`)});continue}if(typeof v.maxFileSize==`number`&&v.maxFileSize>0&&a.size>v.maxFileSize){r.push({file:a,reason:`file-too-large`,message:U(a,`file-too-large`)});continue}n.push(a),t.push(a),Number.isFinite(i)&&--i}K(t,n,r)},J=e=>{j.value||(E.value=[],y(`update:modelValue`,v.modelValue.filter((t,n)=>n!==e)))},Y=()=>{j.value||!M.value||(E.value=[],y(`update:modelValue`,[]))},X=e=>e?e.files.length>0||Array.from(e.types).includes(`Files`):!1,re=e=>e?.items?Array.from(e.items).map(e=>e.getAsFile?.()??null).filter(e=>e instanceof File):[],ie=e=>{let t=e.target;q(Array.from(t.files??[])),W()},ae=e=>{!(0,n.isActivationKey)(e)||j.value||(e.preventDefault(),G())},oe=()=>{w.value=!0},se=e=>{let t=e.relatedTarget;t&&x.value?.contains(t)||(w.value=!1)},Z=e=>{if(!v.paste||j.value)return;let t=re(e.clipboardData);t.length!==0&&(e.preventDefault(),q(t))},Q=e=>{!w.value||e.defaultPrevented||Z(e)},ce=e=>{!v.drop||j.value||!X(e.dataTransfer)||(e.preventDefault(),T.value+=1,C.value=!0)},le=e=>{!v.drop||j.value||!X(e.dataTransfer)||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=`copy`),C.value=!0)},$=e=>{!v.drop||j.value||!X(e.dataTransfer)||(e.preventDefault(),T.value=Math.max(T.value-1,0),T.value===0&&(C.value=!1))},ue=e=>{!v.drop||j.value||!X(e.dataTransfer)||(e.preventDefault(),T.value=0,C.value=!1,q(Array.from(e.dataTransfer?.files??[])))};return(0,t.onMounted)(()=>{document.addEventListener(`paste`,Q)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`paste`,Q)}),(n,_)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,(0,t.mergeProps)({ref_key:`rootRef`,ref:x},L.value,{class:F.value,style:I.value,onFocusin:oe,onFocusout:se,onPaste:Z}),[(0,t.createElementVNode)(`input`,{id:(0,t.unref)(D),ref_key:`inputRef`,ref:S,class:`t-visually-hidden`,type:`file`,accept:g.accept||void 0,multiple:g.multiple,disabled:j.value,onChange:ie},null,40,r),(0,t.createElementVNode)(`div`,{class:`t-file-upload__dropzone`,"aria-busy":g.loading||void 0,"aria-controls":g.showFileList&&M.value?A:void 0,"aria-describedby":R.value,"aria-disabled":j.value||void 0,"aria-invalid":g.invalid||void 0,role:`button`,tabindex:j.value?-1:0,onClick:G,onKeydown:ae,onDragenter:ce,onDragover:le,onDragleave:$,onDrop:ue},[n.$slots.icon||!n.$slots.default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,a,[(0,t.renderSlot)(n.$slots,`icon`,{},()=>[_[0]||=(0,t.createElementVNode)(`span`,{class:`t-file-upload__icon-mark`},`+`,-1)])])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,ee,[(0,t.renderSlot)(n.$slots,`default`,{files:g.modelValue,isDragActive:C.value,openFileDialog:G,clearFiles:Y},()=>[(0,t.createElementVNode)(`p`,te,(0,t.toDisplayString)(g.label),1),g.description?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,{key:0,id:O,class:`t-file-upload__description`},(0,t.toDisplayString)(g.description),1)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,o,(0,t.toDisplayString)(g.buttonLabel),1)])]),g.loading?((0,t.openBlock)(),(0,t.createBlock)(e.default,{key:1,class:`t-file-upload__spinner`,size:`sm`,label:`Uploading files`})):(0,t.createCommentVNode)(``,!0)],40,i),E.value.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:k,class:`t-file-upload__feedback`,"aria-live":`polite`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(E.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:e},(0,t.toDisplayString)(e),1))),128))])):(0,t.createCommentVNode)(``,!0),g.showFileList&&M.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,s,[(0,t.createElementVNode)(`div`,c,[(0,t.createElementVNode)(`p`,{id:A,class:`t-file-upload__files-label`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{class:`t-file-upload__clear`,type:`button`,disabled:j.value,onClick:Y},` Clear all `,8,l)]),(0,t.createElementVNode)(`ul`,u,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(g.modelValue,(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:V(e,r),class:`t-file-upload__file`},[(0,t.renderSlot)(n.$slots,`file`,{file:e,index:r,removeFile:()=>J(r)},()=>[(0,t.createElementVNode)(`div`,d,[(0,t.createElementVNode)(`p`,f,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`p`,p,(0,t.toDisplayString)(B(e.size)),1)]),(0,t.createElementVNode)(`button`,{class:`t-file-upload__remove`,type:`button`,disabled:j.value,"aria-label":`Remove ${e.name}`,onClick:e=>J(r)},` Remove `,8,m)])]))),128))])])):(0,t.createCommentVNode)(``,!0),n.$slots.actions?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,h,[(0,t.renderSlot)(n.$slots,`actions`,{files:g.modelValue,openFileDialog:G,clearFiles:Y})])):(0,t.createCommentVNode)(``,!0)],16))}});exports.default=g;
+//# sourceMappingURL=TFileUpload.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TFileUpload.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport type TFileUploadRejectionReason =\n  | 'file-invalid-type'\n  | 'file-too-large'\n  | 'too-many-files';\n\nexport interface TFileUploadRejection {\n  file: File;\n  reason: TFileUploadRejectionReason;\n  message: string;\n}\n\nconst slots = defineSlots<{\n  icon?: () => unknown;\n  default?: (props: {\n    files: File[];\n    isDragActive: boolean;\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n  file?: (props: {\n    file: File;\n    index: number;\n    removeFile: () => void;\n  }) => unknown;\n  actions?: (props: {\n    files: File[];\n    openFileDialog: () => void;\n    clearFiles: () => void;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: File[];\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    accept?: string;\n    multiple?: boolean;\n    maxFiles?: number | null;\n    maxFileSize?: number | null;\n    label?: string;\n    description?: string;\n    buttonLabel?: string;\n    filesLabel?: string;\n    paste?: boolean;\n    drop?: boolean;\n    showFileList?: boolean;\n  }>(),\n  {\n    modelValue: () => [],\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    accept: '',\n    multiple: true,\n    label: 'Drop files here',\n    description: 'Click to browse, drag and drop, or paste with Ctrl+V.',\n    buttonLabel: 'Browse files',\n    filesLabel: 'Selected files',\n    maxFiles: null,\n    maxFileSize: null,\n    paste: true,\n    drop: true,\n    showFileList: true,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [files: File[]];\n  'files-accepted': [files: File[]];\n  'files-rejected': [rejections: TFileUploadRejection[]];\n}>();\n\nconst attrs = useAttrs();\nconst rootRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isDragActive = ref(false);\nconst isFocusedWithin = ref(false);\nconst dragDepth = ref(0);\nconst feedbackMessages = ref<string[]>([]);\n\nconst uploadId = createId('t-file-upload');\nconst descriptionId = `${uploadId}-description`;\nconst feedbackId = `${uploadId}-feedback`;\nconst filesId = `${uploadId}-files`;\n\nconst isUnavailable = computed(() => props.disabled || props.loading);\nconst hasFiles = computed(() => props.modelValue.length > 0);\nconst hasCustomBody = computed(() => Boolean(slots.default));\n\nconst effectiveMaxFiles = computed(() => {\n  if (!props.multiple) {\n    return 1;\n  }\n\n  if (typeof props.maxFiles !== 'number') {\n    return Number.POSITIVE_INFINITY;\n  }\n\n  return Math.max(props.maxFiles, 0);\n});\n\nconst rootClasses = computed(() => [\n  't-file-upload',\n  `t-file-upload--${props.size}`,\n  {\n    'is-disabled': isUnavailable.value,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-drag-active': isDragActive.value,\n    'has-files': hasFiles.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst describedBy = computed(() => {\n  const ids: string[] = [];\n\n  if (props.description && !hasCustomBody.value) {\n    ids.push(descriptionId);\n  }\n\n  if (feedbackMessages.value.length > 0) {\n    ids.push(feedbackId);\n  }\n\n  if (props.showFileList && hasFiles.value) {\n    ids.push(filesId);\n  }\n\n  return ids.length > 0 ? ids.join(' ') : undefined;\n});\n\nconst selectedFilesLabel = computed(() => `${props.filesLabel} (${props.modelValue.length})`);\n\nconst formatFileSize = (size: number) => {\n  if (size < 1024) {\n    return `${size} B`;\n  }\n\n  const units = ['KB', 'MB', 'GB'];\n  let value = size / 1024;\n  let unitIndex = 0;\n\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex += 1;\n  }\n\n  const roundedValue = value >= 10 || Number.isInteger(value)\n    ? Math.round(value)\n    : Number(value.toFixed(1));\n\n  return `${roundedValue} ${units[unitIndex]}`;\n};\n\nconst fileKey = (file: File, index: number) =>\n  `${file.name}-${file.size}-${file.lastModified}-${index}`;\n\nconst matchesAccept = (file: File) => {\n  if (!props.accept.trim()) {\n    return true;\n  }\n\n  const tokens = props.accept\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith('.')) {\n      return fileName.endsWith(token);\n    }\n\n    if (token.endsWith('/*')) {\n      return fileType.startsWith(token.slice(0, -1));\n    }\n\n    return fileType === token;\n  });\n};\n\nconst buildRejectionMessage = (\n  file: File,\n  reason: TFileUploadRejectionReason,\n) => {\n  switch (reason) {\n    case 'file-invalid-type':\n      return `${file.name} is not an accepted file type.`;\n    case 'file-too-large':\n      return `${file.name} exceeds the ${formatFileSize(props.maxFileSize ?? 0)} limit.`;\n    case 'too-many-files':\n      return `You can only add up to ${effectiveMaxFiles.value} file${effectiveMaxFiles.value === 1 ? '' : 's'}.`;\n    default:\n      return `${file.name} could not be added.`;\n  }\n};\n\nconst resetInputValue = () => {\n  if (inputRef.value) {\n    inputRef.value.value = '';\n  }\n};\n\nconst openFileDialog = () => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  inputRef.value?.click();\n};\n\nconst emitFiles = (\n  nextFiles: File[],\n  acceptedFiles: File[],\n  rejections: TFileUploadRejection[],\n) => {\n  feedbackMessages.value = rejections.map((rejection) => rejection.message);\n\n  if (rejections.length > 0) {\n    emit('files-rejected', rejections);\n  }\n\n  if (acceptedFiles.length > 0) {\n    emit('update:modelValue', nextFiles);\n    emit('files-accepted', acceptedFiles);\n  }\n};\n\nconst processFiles = (incomingFiles: File[]) => {\n  if (isUnavailable.value || incomingFiles.length === 0) {\n    return;\n  }\n\n  const nextFiles = props.multiple ? [...props.modelValue] : [];\n  const acceptedFiles: File[] = [];\n  const rejections: TFileUploadRejection[] = [];\n  let remainingSlots = Number.isFinite(effectiveMaxFiles.value)\n    ? Math.max(effectiveMaxFiles.value - nextFiles.length, 0)\n    : Number.POSITIVE_INFINITY;\n\n  for (const file of incomingFiles) {\n    if (remainingSlots <= 0) {\n      rejections.push({\n        file,\n        reason: 'too-many-files',\n        message: buildRejectionMessage(file, 'too-many-files'),\n      });\n      continue;\n    }\n\n    if (!matchesAccept(file)) {\n      rejections.push({\n        file,\n        reason: 'file-invalid-type',\n        message: buildRejectionMessage(file, 'file-invalid-type'),\n      });\n      continue;\n    }\n\n    if (\n      typeof props.maxFileSize === 'number' &&\n      props.maxFileSize > 0 &&\n      file.size > props.maxFileSize\n    ) {\n      rejections.push({\n        file,\n        reason: 'file-too-large',\n        message: buildRejectionMessage(file, 'file-too-large'),\n      });\n      continue;\n    }\n\n    acceptedFiles.push(file);\n    nextFiles.push(file);\n\n    if (Number.isFinite(remainingSlots)) {\n      remainingSlots -= 1;\n    }\n  }\n\n  emitFiles(nextFiles, acceptedFiles, rejections);\n};\n\nconst removeFile = (index: number) => {\n  if (isUnavailable.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', props.modelValue.filter((_, fileIndex) => fileIndex !== index));\n};\n\nconst clearFiles = () => {\n  if (isUnavailable.value || !hasFiles.value) {\n    return;\n  }\n\n  feedbackMessages.value = [];\n  emit('update:modelValue', []);\n};\n\nconst hasTransferFiles = (dataTransfer?: DataTransfer | null) => {\n  if (!dataTransfer) {\n    return false;\n  }\n\n  return dataTransfer.files.length > 0 || Array.from(dataTransfer.types).includes('Files');\n};\n\nconst getClipboardFiles = (\n  clipboardData?: Pick<DataTransfer, 'items'> | null,\n) => {\n  if (!clipboardData?.items) {\n    return [];\n  }\n\n  return Array.from(clipboardData.items)\n    .map((item) => item.getAsFile?.() ?? null)\n    .filter((file): file is File => file instanceof File);\n};\n\nconst onInputChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  processFiles(Array.from(target.files ?? []));\n  resetInputValue();\n};\n\nconst onDropzoneKeydown = (event: KeyboardEvent) => {\n  if (!isActivationKey(event) || isUnavailable.value) {\n    return;\n  }\n\n  event.preventDefault();\n  openFileDialog();\n};\n\nconst onFocusIn = () => {\n  isFocusedWithin.value = true;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const nextTarget = event.relatedTarget as Node | null;\n\n  if (nextTarget && rootRef.value?.contains(nextTarget)) {\n    return;\n  }\n\n  isFocusedWithin.value = false;\n};\n\nconst onPaste = (event: ClipboardEvent) => {\n  if (!props.paste || isUnavailable.value) {\n    return;\n  }\n\n  const clipboardFiles = getClipboardFiles(event.clipboardData);\n\n  if (clipboardFiles.length === 0) {\n    return;\n  }\n\n  event.preventDefault();\n  processFiles(clipboardFiles);\n};\n\nconst onDocumentPaste = (event: Event) => {\n  if (!isFocusedWithin.value || event.defaultPrevented) {\n    return;\n  }\n\n  onPaste(event as ClipboardEvent);\n};\n\nconst onDragEnter = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value += 1;\n  isDragActive.value = true;\n};\n\nconst onDragOver = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  isDragActive.value = true;\n};\n\nconst onDragLeave = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = Math.max(dragDepth.value - 1, 0);\n\n  if (dragDepth.value === 0) {\n    isDragActive.value = false;\n  }\n};\n\nconst onDrop = (event: DragEvent) => {\n  if (!props.drop || isUnavailable.value || !hasTransferFiles(event.dataTransfer)) {\n    return;\n  }\n\n  event.preventDefault();\n  dragDepth.value = 0;\n  isDragActive.value = false;\n  processFiles(Array.from(event.dataTransfer?.files ?? []));\n};\n\nonMounted(() => {\n  document.addEventListener('paste', onDocumentPaste);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('paste', onDocumentPaste);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n    @paste=\"onPaste\"\n  >\n    <input\n      :id=\"uploadId\"\n      ref=\"inputRef\"\n      class=\"t-visually-hidden\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"isUnavailable\"\n      @change=\"onInputChange\"\n    >\n\n    <div\n      class=\"t-file-upload__dropzone\"\n      :aria-busy=\"loading || undefined\"\n      :aria-controls=\"showFileList && hasFiles ? filesId : undefined\"\n      :aria-describedby=\"describedBy\"\n      :aria-disabled=\"isUnavailable || undefined\"\n      :aria-invalid=\"invalid || undefined\"\n      role=\"button\"\n      :tabindex=\"isUnavailable ? -1 : 0\"\n      @click=\"openFileDialog\"\n      @keydown=\"onDropzoneKeydown\"\n      @dragenter=\"onDragEnter\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n      @drop=\"onDrop\"\n    >\n      <div\n        v-if=\"$slots.icon || !$slots.default\"\n        class=\"t-file-upload__icon\"\n        aria-hidden=\"true\"\n      >\n        <slot name=\"icon\">\n          <span class=\"t-file-upload__icon-mark\">+</span>\n        </slot>\n      </div>\n\n      <div class=\"t-file-upload__content\">\n        <slot\n          :files=\"modelValue\"\n          :is-drag-active=\"isDragActive\"\n          :open-file-dialog=\"openFileDialog\"\n          :clear-files=\"clearFiles\"\n        >\n          <p class=\"t-file-upload__label\">\n            {{ label }}\n          </p>\n          <p\n            v-if=\"description\"\n            :id=\"descriptionId\"\n            class=\"t-file-upload__description\"\n          >\n            {{ description }}\n          </p>\n          <span class=\"t-file-upload__browse\">\n            {{ buttonLabel }}\n          </span>\n        </slot>\n      </div>\n\n      <TSpinner\n        v-if=\"loading\"\n        class=\"t-file-upload__spinner\"\n        size=\"sm\"\n        label=\"Uploading files\"\n      />\n    </div>\n\n    <ul\n      v-if=\"feedbackMessages.length > 0\"\n      :id=\"feedbackId\"\n      class=\"t-file-upload__feedback\"\n      aria-live=\"polite\"\n    >\n      <li\n        v-for=\"message in feedbackMessages\"\n        :key=\"message\"\n      >\n        {{ message }}\n      </li>\n    </ul>\n\n    <div\n      v-if=\"showFileList && hasFiles\"\n      class=\"t-file-upload__files\"\n    >\n      <div class=\"t-file-upload__files-header\">\n        <p\n          :id=\"filesId\"\n          class=\"t-file-upload__files-label\"\n        >\n          {{ selectedFilesLabel }}\n        </p>\n\n        <button\n          class=\"t-file-upload__clear\"\n          type=\"button\"\n          :disabled=\"isUnavailable\"\n          @click=\"clearFiles\"\n        >\n          Clear all\n        </button>\n      </div>\n\n      <ul class=\"t-file-upload__list\">\n        <li\n          v-for=\"(file, index) in modelValue\"\n          :key=\"fileKey(file, index)\"\n          class=\"t-file-upload__file\"\n        >\n          <slot\n            name=\"file\"\n            :file=\"file\"\n            :index=\"index\"\n            :remove-file=\"() => removeFile(index)\"\n          >\n            <div class=\"t-file-upload__file-copy\">\n              <p class=\"t-file-upload__file-name\">\n                {{ file.name }}\n              </p>\n              <p class=\"t-file-upload__file-meta\">\n                {{ formatFileSize(file.size) }}\n              </p>\n            </div>\n\n            <button\n              class=\"t-file-upload__remove\"\n              type=\"button\"\n              :disabled=\"isUnavailable\"\n              :aria-label=\"`Remove ${file.name}`\"\n              @click=\"removeFile(index)\"\n            >\n              Remove\n            </button>\n          </slot>\n        </li>\n      </ul>\n    </div>\n\n    <div\n      v-if=\"$slots.actions\"\n      class=\"t-file-upload__actions\"\n    >\n      <slot\n        name=\"actions\"\n        :files=\"modelValue\"\n        :open-file-dialog=\"openFileDialog\"\n        :clear-files=\"clearFiles\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TFileUpload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,284 @@
+import e from "./TSpinner.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _, useSlots as v } from "vue";
+import { createId as y, isActivationKey as b } from "@treeui/utils";
+//#region src/components/TFileUpload.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"id",
+	"accept",
+	"multiple",
+	"disabled"
+], S = [
+	"aria-busy",
+	"aria-controls",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-invalid",
+	"tabindex"
+], ee = {
+	key: 0,
+	class: "t-file-upload__icon",
+	"aria-hidden": "true"
+}, te = { class: "t-file-upload__content" }, C = { class: "t-file-upload__label" }, ne = { class: "t-file-upload__browse" }, re = {
+	key: 1,
+	class: "t-file-upload__files"
+}, ie = { class: "t-file-upload__files-header" }, ae = ["disabled"], oe = { class: "t-file-upload__list" }, se = { class: "t-file-upload__file-copy" }, w = { class: "t-file-upload__file-name" }, T = { class: "t-file-upload__file-meta" }, E = [
+	"disabled",
+	"aria-label",
+	"onClick"
+], ce = {
+	key: 2,
+	class: "t-file-upload__actions"
+}, D = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "TFileUpload",
+	props: {
+		modelValue: { default: () => [] },
+		size: { default: "md" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		accept: { default: "" },
+		multiple: {
+			type: Boolean,
+			default: !0
+		},
+		maxFiles: { default: null },
+		maxFileSize: { default: null },
+		label: { default: "Drop files here" },
+		description: { default: "Click to browse, drag and drop, or paste with Ctrl+V." },
+		buttonLabel: { default: "Browse files" },
+		filesLabel: { default: "Selected files" },
+		paste: {
+			type: Boolean,
+			default: !0
+		},
+		drop: {
+			type: Boolean,
+			default: !0
+		},
+		showFileList: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"files-accepted",
+		"files-rejected"
+	],
+	setup(s, { emit: D }) {
+		let le = v(), O = s, k = D, A = _(), j = f(null), M = f(null), N = f(!1), P = f(!1), F = f(0), I = f([]), L = y("t-file-upload"), R = `${L}-description`, z = `${L}-feedback`, B = `${L}-files`, V = n(() => O.disabled || O.loading), H = n(() => O.modelValue.length > 0), U = n(() => !!le.default), W = n(() => O.multiple ? typeof O.maxFiles == "number" ? Math.max(O.maxFiles, 0) : Infinity : 1), ue = n(() => [
+			"t-file-upload",
+			`t-file-upload--${O.size}`,
+			{
+				"is-disabled": V.value,
+				"is-invalid": O.invalid,
+				"is-loading": O.loading,
+				"is-drag-active": N.value,
+				"has-files": H.value
+			},
+			A.class
+		]), de = n(() => A.style), fe = n(() => {
+			let { class: e, style: t, ...n } = A;
+			return n;
+		}), pe = n(() => {
+			let e = [];
+			return O.description && !U.value && e.push(R), I.value.length > 0 && e.push(z), O.showFileList && H.value && e.push(B), e.length > 0 ? e.join(" ") : void 0;
+		}), me = n(() => `${O.filesLabel} (${O.modelValue.length})`), G = (e) => {
+			if (e < 1024) return `${e} B`;
+			let t = [
+				"KB",
+				"MB",
+				"GB"
+			], n = e / 1024, r = 0;
+			for (; n >= 1024 && r < t.length - 1;) n /= 1024, r += 1;
+			return `${n >= 10 || Number.isInteger(n) ? Math.round(n) : Number(n.toFixed(1))} ${t[r]}`;
+		}, he = (e, t) => `${e.name}-${e.size}-${e.lastModified}-${t}`, ge = (e) => {
+			if (!O.accept.trim()) return !0;
+			let t = O.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), n = e.name.toLowerCase(), r = e.type.toLowerCase();
+			return t.some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
+		}, K = (e, t) => {
+			switch (t) {
+				case "file-invalid-type": return `${e.name} is not an accepted file type.`;
+				case "file-too-large": return `${e.name} exceeds the ${G(O.maxFileSize ?? 0)} limit.`;
+				case "too-many-files": return `You can only add up to ${W.value} file${W.value === 1 ? "" : "s"}.`;
+				default: return `${e.name} could not be added.`;
+			}
+		}, _e = () => {
+			M.value && (M.value.value = "");
+		}, q = () => {
+			V.value || M.value?.click();
+		}, ve = (e, t, n) => {
+			I.value = n.map((e) => e.message), n.length > 0 && k("files-rejected", n), t.length > 0 && (k("update:modelValue", e), k("files-accepted", t));
+		}, J = (e) => {
+			if (V.value || e.length === 0) return;
+			let t = O.multiple ? [...O.modelValue] : [], n = [], r = [], i = Number.isFinite(W.value) ? Math.max(W.value - t.length, 0) : Infinity;
+			for (let a of e) {
+				if (i <= 0) {
+					r.push({
+						file: a,
+						reason: "too-many-files",
+						message: K(a, "too-many-files")
+					});
+					continue;
+				}
+				if (!ge(a)) {
+					r.push({
+						file: a,
+						reason: "file-invalid-type",
+						message: K(a, "file-invalid-type")
+					});
+					continue;
+				}
+				if (typeof O.maxFileSize == "number" && O.maxFileSize > 0 && a.size > O.maxFileSize) {
+					r.push({
+						file: a,
+						reason: "file-too-large",
+						message: K(a, "file-too-large")
+					});
+					continue;
+				}
+				n.push(a), t.push(a), Number.isFinite(i) && --i;
+			}
+			ve(t, n, r);
+		}, Y = (e) => {
+			V.value || (I.value = [], k("update:modelValue", O.modelValue.filter((t, n) => n !== e)));
+		}, X = () => {
+			V.value || !H.value || (I.value = [], k("update:modelValue", []));
+		}, Z = (e) => e ? e.files.length > 0 || Array.from(e.types).includes("Files") : !1, ye = (e) => e?.items ? Array.from(e.items).map((e) => e.getAsFile?.() ?? null).filter((e) => e instanceof File) : [], be = (e) => {
+			let t = e.target;
+			J(Array.from(t.files ?? [])), _e();
+		}, xe = (e) => {
+			!b(e) || V.value || (e.preventDefault(), q());
+		}, Se = () => {
+			P.value = !0;
+		}, Ce = (e) => {
+			let t = e.relatedTarget;
+			t && j.value?.contains(t) || (P.value = !1);
+		}, Q = (e) => {
+			if (!O.paste || V.value) return;
+			let t = ye(e.clipboardData);
+			t.length !== 0 && (e.preventDefault(), J(t));
+		}, $ = (e) => {
+			!P.value || e.defaultPrevented || Q(e);
+		}, we = (e) => {
+			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value += 1, N.value = !0);
+		}, Te = (e) => {
+			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), N.value = !0);
+		}, Ee = (e) => {
+			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value = Math.max(F.value - 1, 0), F.value === 0 && (N.value = !1));
+		}, De = (e) => {
+			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value = 0, N.value = !1, J(Array.from(e.dataTransfer?.files ?? [])));
+		};
+		return u(() => {
+			document.addEventListener("paste", $);
+		}), l(() => {
+			document.removeEventListener("paste", $);
+		}), (n, l) => (d(), a("div", c({
+			ref_key: "rootRef",
+			ref: j
+		}, fe.value, {
+			class: ue.value,
+			style: de.value,
+			onFocusin: Se,
+			onFocusout: Ce,
+			onPaste: Q
+		}), [
+			o("input", {
+				id: g(L),
+				ref_key: "inputRef",
+				ref: M,
+				class: "t-visually-hidden",
+				type: "file",
+				accept: s.accept || void 0,
+				multiple: s.multiple,
+				disabled: V.value,
+				onChange: be
+			}, null, 40, x),
+			o("div", {
+				class: "t-file-upload__dropzone",
+				"aria-busy": s.loading || void 0,
+				"aria-controls": s.showFileList && H.value ? B : void 0,
+				"aria-describedby": pe.value,
+				"aria-disabled": V.value || void 0,
+				"aria-invalid": s.invalid || void 0,
+				role: "button",
+				tabindex: V.value ? -1 : 0,
+				onClick: q,
+				onKeydown: xe,
+				onDragenter: we,
+				onDragover: Te,
+				onDragleave: Ee,
+				onDrop: De
+			}, [
+				n.$slots.icon || !n.$slots.default ? (d(), a("div", ee, [m(n.$slots, "icon", {}, () => [l[0] ||= o("span", { class: "t-file-upload__icon-mark" }, "+", -1)])])) : i("", !0),
+				o("div", te, [m(n.$slots, "default", {
+					files: s.modelValue,
+					isDragActive: N.value,
+					openFileDialog: q,
+					clearFiles: X
+				}, () => [
+					o("p", C, h(s.label), 1),
+					s.description ? (d(), a("p", {
+						key: 0,
+						id: R,
+						class: "t-file-upload__description"
+					}, h(s.description), 1)) : i("", !0),
+					o("span", ne, h(s.buttonLabel), 1)
+				])]),
+				s.loading ? (d(), r(e, {
+					key: 1,
+					class: "t-file-upload__spinner",
+					size: "sm",
+					label: "Uploading files"
+				})) : i("", !0)
+			], 40, S),
+			I.value.length > 0 ? (d(), a("ul", {
+				key: 0,
+				id: z,
+				class: "t-file-upload__feedback",
+				"aria-live": "polite"
+			}, [(d(!0), a(t, null, p(I.value, (e) => (d(), a("li", { key: e }, h(e), 1))), 128))])) : i("", !0),
+			s.showFileList && H.value ? (d(), a("div", re, [o("div", ie, [o("p", {
+				id: B,
+				class: "t-file-upload__files-label"
+			}, h(me.value), 1), o("button", {
+				class: "t-file-upload__clear",
+				type: "button",
+				disabled: V.value,
+				onClick: X
+			}, " Clear all ", 8, ae)]), o("ul", oe, [(d(!0), a(t, null, p(s.modelValue, (e, t) => (d(), a("li", {
+				key: he(e, t),
+				class: "t-file-upload__file"
+			}, [m(n.$slots, "file", {
+				file: e,
+				index: t,
+				removeFile: () => Y(t)
+			}, () => [o("div", se, [o("p", w, h(e.name), 1), o("p", T, h(G(e.size)), 1)]), o("button", {
+				class: "t-file-upload__remove",
+				type: "button",
+				disabled: V.value,
+				"aria-label": `Remove ${e.name}`,
+				onClick: (e) => Y(t)
+			}, " Remove ", 8, E)])]))), 128))])])) : i("", !0),
+			n.$slots.actions ? (d(), a("div", ce, [m(n.$slots, "actions", {
+				files: s.modelValue,
+				openFileDialog: q,
+				clearFiles: X
+			})])) : i("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TFileUpload.vue_vue_type_script_setup_true_lang.js.map