npm - @treeui/vue - Versions diffs - 0.17.0 → 0.19.0 - Mend

@treeui/vue 0.17.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/dist/components/TPricingCard.vue.d.ts CHANGED Viewed

@@ -42,8 +42,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     disabled: boolean;
     size: TSize;
-    description: string;
     badge: string;
+    description: string;
     currency: string;
     period: string;
     features: PricingFeature[];

package/dist/components/TPricingCard.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TPricingCard.vue.d.ts","sourceRoot":"","sources":["../../src/components/TPricingCard.vue"],"names":[],"mappings":"AAyJA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAIhD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwDJ,iBAAS,cAAc;WAkIT,OAAO,IAA6B;;iBApKvC,MAAM,OAAO;gBACd,MAAM,OAAO;mBACV,MAAM,OAAO;iBACf,MAAM,OAAO;gBACd,MAAM,OAAO;;iBAJZ,MAAM,OAAO;gBACd,MAAM,OAAO;mBACV,MAAM,OAAO;iBACf,MAAM,OAAO;gBACd,MAAM,OAAO;;;;EAqKtB;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;cA/MN,OAAO;UADX,KAAK;~~iBARE~~,MAAM;~~WAMZ~~,MAAM;~~cAJH~~,MAAM;YACR,MAAM;cACJ,cAAc,EAAE;iBACb,OAAO;gBAER,MAAM;qFA0NrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"TPricingCard.vue.d.ts","sourceRoot":"","sources":["../../src/components/TPricingCard.vue"],"names":[],"mappings":"AAyJA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAIhD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwDJ,iBAAS,cAAc;WAkIT,OAAO,IAA6B;;iBApKvC,MAAM,OAAO;gBACd,MAAM,OAAO;mBACV,MAAM,OAAO;iBACf,MAAM,OAAO;gBACd,MAAM,OAAO;;iBAJZ,MAAM,OAAO;gBACd,MAAM,OAAO;mBACV,MAAM,OAAO;iBACf,MAAM,OAAO;gBACd,MAAM,OAAO;;;;EAqKtB;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;cA/MN,OAAO;UADX,KAAK;WAFJ,MAAM;iBANA,MAAM;cAET,MAAM;YACR,MAAM;cACJ,cAAc,EAAE;iBACb,OAAO;gBAER,MAAM;qFA0NrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TSidebar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSidebar.cjs","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TSidebar.cjs","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":""}

package/dist/components/TSidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSidebar.js","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TSidebar.js","names":[],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":""}

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../composables/useControllableOpen.cjs"),t=require("./sidebar.cjs");let n=require("vue"),r=require("@treeui/icons");var i={key:0,class:`t-sidebar__header`},a={class:`t-sidebar__body`},o={key:1,class:`t-sidebar__footer`},s=[`aria-label`,`aria-expanded`],c={key:0},l=(0,n.defineComponent)({inheritAttrs:!1,__name:`TSidebar`,props:{as:{default:`aside`},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},size:{default:`md`},side:{default:`left`},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!0},width:{default:`17.5rem`},collapsedWidth:{default:`4.75rem`},collapseLabel:{default:`Collapse sidebar`},expandLabel:{default:`Expand sidebar`}},emits:[`update:collapsed`,`collapse-change`],setup(l,{emit:u}){let d=(0,r.getTreeIcon)(`chevron-left`),f=(0,r.getTreeIcon)(`chevron-right`),p=l,m=u,h=(0,n.useAttrs)(),{value:g,setValue:_}=e.useControllableOpen((0,n.toRef)(p,`collapsed`),p.defaultCollapsed,e=>{m(`update:collapsed`,e),m(`collapse-change`,e)}),v=(0,n.computed)(()=>[`t-sidebar`,`t-sidebar--${p.size}`,`t-sidebar--${p.side}`,{"is-collapsed":g.value,"is-sticky":p.sticky,"is-bordered":p.bordered},h.class]),y=(0,n.computed)(()=>[{"--tree-sidebar-width":p.width,"--tree-sidebar-collapsed-width":p.collapsedWidth},h.style]),b=(0,n.computed)(()=>{let{class:e,style:t,...n}=h;return n}),x=()=>{p.collapsible&&_(!g.value)},S=(0,n.computed)(()=>p.side===`right`?g.value?d:f:g.value?f:d),C=(0,n.computed)(()=>g.value?p.expandLabel:p.collapseLabel);return(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:(0,n.computed)(()=>g.value)}),(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(l.as),(0,n.mergeProps)(b.value,{class:v.value,style:y.value,"data-state":(0,n.unref)(g)?`collapsed`:`expanded`}),{default:(0,n.withCtx)(()=>[e.$slots.header?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.renderSlot)(e.$slots,`header`,{collapsed:(0,n.unref)(g)})])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,a,[(0,n.renderSlot)(e.$slots,`default`,{collapsed:(0,n.unref)(g)})]),e.$slots.footer||l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[e.$slots.footer?(0,n.renderSlot)(e.$slots,`footer`,{collapsed:(0,n.unref)(g)},void 0,void 0,0):(0,n.createCommentVNode)(``,!0),l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:1,type:`button`,class:`t-sidebar__toggle`,"aria-label":C.value,"aria-expanded":!(0,n.unref)(g),onClick:x},[(0,n.renderSlot)(e.$slots,`toggle`,{collapsed:(0,n.unref)(g)},()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(S.value),{size:16})),(0,n.unref)(g)?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,(0,n.toDisplayString)(C.value),1))])],8,s)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`data-state`]))}});exports.default=l;
+const e=require("../composables/useControllableOpen.cjs"),t=require("./sidebar.cjs");let n=require("vue"),r=require("@treeui/icons");var i={key:0,class:`t-sidebar__header`},a={class:`t-sidebar__body`},o={key:1,class:`t-sidebar__footer`},s=[`aria-label`,`aria-expanded`],c={key:0},l=(0,n.defineComponent)({inheritAttrs:!1,__name:`TSidebar`,props:{as:{default:`aside`},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},collapsible:{type:Boolean,default:!0},size:{default:`md`},side:{default:`left`},sticky:{type:Boolean,default:!1},bordered:{type:Boolean,default:!0},width:{default:`17.5rem`},collapsedWidth:{default:`4.75rem`},collapseLabel:{default:`Collapse sidebar`},expandLabel:{default:`Expand sidebar`}},emits:[`update:collapsed`,`collapse-change`],setup(l,{emit:u}){let d=(0,n.computed)(()=>(0,r.getTreeIcon)(`chevron-left`)),f=(0,n.computed)(()=>(0,r.getTreeIcon)(`chevron-right`)),p=l,m=u,h=(0,n.useAttrs)(),{value:g,setValue:_}=e.useControllableOpen((0,n.toRef)(p,`collapsed`),p.defaultCollapsed,e=>{m(`update:collapsed`,e),m(`collapse-change`,e)}),v=(0,n.computed)(()=>[`t-sidebar`,`t-sidebar--${p.size}`,`t-sidebar--${p.side}`,{"is-collapsed":g.value,"is-sticky":p.sticky,"is-bordered":p.bordered},h.class]),y=(0,n.computed)(()=>[{"--tree-sidebar-width":p.width,"--tree-sidebar-collapsed-width":p.collapsedWidth},h.style]),b=(0,n.computed)(()=>{let{class:e,style:t,...n}=h;return n}),x=()=>{p.collapsible&&_(!g.value)},S=(0,n.computed)(()=>p.side===`right`?g.value?d:f:g.value?f:d),C=(0,n.computed)(()=>g.value?p.expandLabel:p.collapseLabel);return(0,n.provide)(t.treeSidebarInjectionKey,{collapsed:(0,n.computed)(()=>g.value)}),(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(l.as),(0,n.mergeProps)(b.value,{class:v.value,style:y.value,"data-state":(0,n.unref)(g)?`collapsed`:`expanded`}),{default:(0,n.withCtx)(()=>[e.$slots.header?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.renderSlot)(e.$slots,`header`,{collapsed:(0,n.unref)(g)})])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,a,[(0,n.renderSlot)(e.$slots,`default`,{collapsed:(0,n.unref)(g)})]),e.$slots.footer||l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,o,[e.$slots.footer?(0,n.renderSlot)(e.$slots,`footer`,{collapsed:(0,n.unref)(g)},void 0,void 0,0):(0,n.createCommentVNode)(``,!0),l.collapsible?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:1,type:`button`,class:`t-sidebar__toggle`,"aria-label":C.value,"aria-expanded":!(0,n.unref)(g),onClick:x},[(0,n.renderSlot)(e.$slots,`toggle`,{collapsed:(0,n.unref)(g)},()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(S.value),{size:16})),(0,n.unref)(g)?(0,n.createCommentVNode)(``,!0):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,(0,n.toDisplayString)(C.value),1))])],8,s)):(0,n.createCommentVNode)(``,!0)])):(0,n.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`data-state`]))}});exports.default=l;
 //# sourceMappingURL=TSidebar.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":"qyBAeA,IAAM,GAAA,EAAA,EAAA,YAAA,~~CAA8B~~,cAAc,~~EAC5C~~,GAAA,EAAA,EAAA,YAAA,~~CAA+B~~,eAAe,~~EAE9C~~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"}
1	+ {"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":"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"}

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -43,7 +43,7 @@ var y = {
 	},
 	emits: ["update:collapsed", "collapse-change"],
 	setup(s, { emit: w }) {
-		let T = v("chevron-left"), E = v("chevron-right"), D = s, O = w, k = g(), { value: A, setValue: j } = e(m(D, "collapsed"), D.defaultCollapsed, (e) => {
+		let T = n(() => v("chevron-left")), E = n(() => v("chevron-right")), D = s, O = w, k = g(), { value: A, setValue: j } = e(m(D, "collapsed"), D.defaultCollapsed, (e) => {
 			O("update:collapsed", e), O("collapse-change", e);
 		}), M = n(() => [
 			"t-sidebar",

package/dist/components/TSidebar.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAM,IAAkB,EAAY,cAAc,~~GAC5C~~,IAAmB,EAAY,eAAe,~~GAE9C~~,IAAQ,GA+BR,IAAO,GAYP,IAAQ,EAAS,GAEjB,EAAE,OAAO,GAAa,gBAAa,EACvC,EAAM,GAAO,WAAW,GACxB,EAAM,mBACL,MAAU;GAET,AADA,EAAK,oBAAoB,CAAK,GAC9B,EAAK,mBAAmB,CAAK;EAC/B,CACF,GAEM,IAAc,QAAe;GACjC;GACA,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB;IACE,gBAAgB,EAAY;IAC5B,aAAa,EAAM;IACnB,eAAe,EAAM;GACvB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,CAC/B;GACE,wBAAwB,EAAM;GAC9B,kCAAkC,EAAM;EAC1C,GACA,EAAM,KACR,CAAC,GAEK,IAAY,QAAe;GAC/B,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,UAAwB;GACvB,EAAM,eAIX,EAAS,CAAC,EAAY,KAAK;EAC7B,GAEM,IAAa,QACb,EAAM,SAAS,UACV,EAAY,QAAQ,IAAkB,IAGxC,EAAY,QAAQ,IAAmB,CAC/C,GAEK,IAAc,QAClB,EAAY,QAAQ,EAAM,cAAc,EAAM,aAChD;SAEA,EAAQ,GAAyB,EAC/B,WAAW,QAAe,EAAY,KAAK,EAC7C,CAAC,mBAIC,EAmDY,EAlDL,EAAA,EAAE,GADT,EAEU,EAiDE,OAjDO;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;GACP,cAAY,EAAA,CAAA,IAAW,cAAA;;oBAUlB;IAPEA,EAAAA,OAAO,UAAA,EAAA,GADf,EAQM,OARN,GAQM,CAJJ,EAGE,EAAA,QAAA,UAAA,EADC,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAI3B,EAEM,OAFN,GAEM,CADJ,EAAiC,EAAA,QAAA,WAAA,EAA1B,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA;IAIvBA,EAAAA,OAAO,UAAU,EAAA,eAAA,EAAA,GADzB,EA6BM,OA7BN,GA6BM,CAxBIA,EAAAA,OAAO,SADf,EAIE,EAAA,QAAA,UAAA,EADC,WAAW,EAAA,CAAA,EAAW,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,GAIjB,EAAA,eAAA,EAAA,GADR,EAkBS,UAAA;;KAhBP,MAAK;KACL,OAAM;KACL,cAAY,EAAA;KACZ,iBAAa,CAAG,EAAA,CAAA;KAChB,SAAO;QAER,EASO,EAAA,QAAA,UAAA,EAPJ,WAAW,EAAA,CAAA,EAAW,SAOlB,EAAA,EAAA,GALL,EAGE,EAFK,EAAA,KAAU,GAAA,EACd,MAAM,GAAE,CAAA,IAEE,EAAA,CAAA,IAA2B,EAAA,IAAA,EAAA,KAA3B,EAAA,GAAb,EAAkD,QAAA,GAAA,EAArB,EAAA,KAAW,GAAA,CAAA,EAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
1	+ {"version":3,"file":"TSidebar.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { computed, provide, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst _treeSidebarSides = ['left', 'right'] as const;\n\nexport type TSidebarSide = (typeof _treeSidebarSides)[number];\n\nconst ChevronLeftIcon = computed(() => getTreeIcon('chevron-left'));\nconst ChevronRightIcon = computed(() => getTreeIcon('chevron-right'));\n\nconst props = withDefaults(\n defineProps<{\n as?: string;\n collapsed?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n size?: TSize;\n side?: TSidebarSide;\n sticky?: boolean;\n bordered?: boolean;\n width?: string;\n collapsedWidth?: string;\n collapseLabel?: string;\n expandLabel?: string;\n }>(),\n {\n as: 'aside',\n collapsed: undefined,\n defaultCollapsed: false,\n collapsible: true,\n size: 'md',\n side: 'left',\n sticky: false,\n bordered: true,\n width: '17.5rem',\n collapsedWidth: '4.75rem',\n collapseLabel: 'Collapse sidebar',\n expandLabel: 'Expand sidebar',\n },\n);\n\nconst emit = defineEmits<{\n 'update:collapsed': [value: boolean];\n 'collapse-change': [value: boolean];\n}>();\n\ndefineSlots<{\n header?: (props: { collapsed: boolean }) => unknown;\n default?: (props: { collapsed: boolean }) => unknown;\n footer?: (props: { collapsed: boolean }) => unknown;\n toggle?: (props: { collapsed: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isCollapsed, setValue } = useControllableOpen(\n toRef(props, 'collapsed'),\n props.defaultCollapsed,\n (value) => {\n emit('update:collapsed', value);\n emit('collapse-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-sidebar',\n `t-sidebar--${props.size}`,\n `t-sidebar--${props.side}`,\n {\n 'is-collapsed': isCollapsed.value,\n 'is-sticky': props.sticky,\n 'is-bordered': props.bordered,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => [\n {\n '--tree-sidebar-width': props.width,\n '--tree-sidebar-collapsed-width': props.collapsedWidth,\n },\n attrs.style,\n]);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst toggleCollapsed = () => {\n if (!props.collapsible) {\n return;\n }\n\n setValue(!isCollapsed.value);\n};\n\nconst ToggleIcon = computed(() => {\n if (props.side === 'right') {\n return isCollapsed.value ? ChevronLeftIcon : ChevronRightIcon;\n }\n\n return isCollapsed.value ? ChevronRightIcon : ChevronLeftIcon;\n});\n\nconst toggleLabel = computed(() =>\n isCollapsed.value ? props.expandLabel : props.collapseLabel,\n);\n\nprovide(treeSidebarInjectionKey, {\n collapsed: computed(() => isCollapsed.value),\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isCollapsed ? 'collapsed' : 'expanded'\"\n >\n <div\n v-if=\"$slots.header\"\n class=\"t-sidebar__header\"\n >\n <slot\n name=\"header\"\n :collapsed=\"isCollapsed\"\n />\n </div>\n\n <div class=\"t-sidebar__body\">\n <slot :collapsed=\"isCollapsed\" />\n </div>\n\n <div\n v-if=\"$slots.footer \|\| collapsible\"\n class=\"t-sidebar__footer\"\n >\n <slot\n v-if=\"$slots.footer\"\n name=\"footer\"\n :collapsed=\"isCollapsed\"\n />\n\n <button\n v-if=\"collapsible\"\n type=\"button\"\n class=\"t-sidebar__toggle\"\n :aria-label=\"toggleLabel\"\n :aria-expanded=\"!isCollapsed\"\n @click=\"toggleCollapsed\"\n >\n <slot\n name=\"toggle\"\n :collapsed=\"isCollapsed\"\n >\n <component\n :is=\"ToggleIcon\"\n :size=\"16\"\n />\n <span v-if=\"!isCollapsed\">{{ toggleLabel }}</span>\n </slot>\n </button>\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,IAAM,IAAkB,QAAe,EAAY,cAAc,CAAC,GAC5D,IAAmB,QAAe,EAAY,eAAe,CAAC,GAE9D,IAAQ,GA+BR,IAAO,GAYP,IAAQ,EAAS,GAEjB,EAAE,OAAO,GAAa,gBAAa,EACvC,EAAM,GAAO,WAAW,GACxB,EAAM,mBACL,MAAU;GAET,AADA,EAAK,oBAAoB,CAAK,GAC9B,EAAK,mBAAmB,CAAK;EAC/B,CACF,GAEM,IAAc,QAAe;GACjC;GACA,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB;IACE,gBAAgB,EAAY;IAC5B,aAAa,EAAM;IACnB,eAAe,EAAM;GACvB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,CAC/B;GACE,wBAAwB,EAAM;GAC9B,kCAAkC,EAAM;EAC1C,GACA,EAAM,KACR,CAAC,GAEK,IAAY,QAAe;GAC/B,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,UAAwB;GACvB,EAAM,eAIX,EAAS,CAAC,EAAY,KAAK;EAC7B,GAEM,IAAa,QACb,EAAM,SAAS,UACV,EAAY,QAAQ,IAAkB,IAGxC,EAAY,QAAQ,IAAmB,CAC/C,GAEK,IAAc,QAClB,EAAY,QAAQ,EAAM,cAAc,EAAM,aAChD;SAEA,EAAQ,GAAyB,EAC/B,WAAW,QAAe,EAAY,KAAK,EAC7C,CAAC,mBAIC,EAmDY,EAlDL,EAAA,EAAE,GADT,EAEU,EAiDE,OAjDO;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;GACP,cAAY,EAAA,CAAA,IAAW,cAAA;;oBAUlB;IAPEA,EAAAA,OAAO,UAAA,EAAA,GADf,EAQM,OARN,GAQM,CAJJ,EAGE,EAAA,QAAA,UAAA,EADC,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAI3B,EAEM,OAFN,GAEM,CADJ,EAAiC,EAAA,QAAA,WAAA,EAA1B,WAAW,EAAA,CAAA,EAAW,CAAA,CAAA,CAAA;IAIvBA,EAAAA,OAAO,UAAU,EAAA,eAAA,EAAA,GADzB,EA6BM,OA7BN,GA6BM,CAxBIA,EAAAA,OAAO,SADf,EAIE,EAAA,QAAA,UAAA,EADC,WAAW,EAAA,CAAA,EAAW,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,EAAA,IAAA,EAAA,GAIjB,EAAA,eAAA,EAAA,GADR,EAkBS,UAAA;;KAhBP,MAAK;KACL,OAAM;KACL,cAAY,EAAA;KACZ,iBAAa,CAAG,EAAA,CAAA;KAChB,SAAO;QAER,EASO,EAAA,QAAA,UAAA,EAPJ,WAAW,EAAA,CAAA,EAAW,SAOlB,EAAA,EAAA,GALL,EAGE,EAFK,EAAA,KAAU,GAAA,EACd,MAAM,GAAE,CAAA,IAEE,EAAA,CAAA,IAA2B,EAAA,IAAA,EAAA,KAA3B,EAAA,GAAb,EAAkD,QAAA,GAAA,EAArB,EAAA,KAAW,GAAA,CAAA,EAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TSteps.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSteps.cjs","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = getTreeIcon('check');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TSteps.cjs","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = computed(() => getTreeIcon('check'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":""}

package/dist/components/TSteps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSteps.js","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = getTreeIcon('check');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TSteps.js","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = computed(() => getTreeIcon('check'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":""}

package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-let e=require("vue"),t=require("@treeui/icons");var n=[`disabled`,`aria-current`,`onClick`],r={class:`t-steps__indicator`,"aria-hidden":`true`},i={key:1},a={key:2},o={class:`t-steps__copy`},s={class:`t-steps__label`},c={key:0,class:`t-steps__description`},l={key:0,class:`t-steps__meta`},u=(0,e.defineComponent)({inheritAttrs:!1,__name:`TSteps`,props:{modelValue:{default:void 0},defaultValue:{default:``},items:{default:()=>[]},size:{default:`md`},orientation:{default:`horizontal`},interactive:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(u,{emit:d}){let f=(0,t.getTreeIcon)(`check`),p=u,m=d,h=(0,e.useAttrs)(),g=(0,e.ref)(p.defaultValue||p.items[0]?.value||``),_=(0,e.computed)(()=>p.modelValue??g.value),v=(0,e.computed)(()=>{let e=p.items.findIndex(e=>e.value===_.value);return e>=0?e:0}),y=(0,e.computed)(()=>[`t-steps`,`t-steps--${p.size}`,`t-steps--${p.orientation}`,{"is-interactive":p.interactive},h.class]),b=(0,e.computed)(()=>h.style),x=(0,e.computed)(()=>{let{class:e,style:t,...n}=h;return n}),S=(e,t)=>e.status?e.status:t<v.value?`complete`:t===v.value?`current`:`upcoming`,C=e=>{!p.interactive||e.disabled||(p.modelValue===void 0&&(g.value=e.value),m(`update:modelValue`,e.value))};return(0,e.watch)(()=>p.items,e=>{!e.some(e=>e.value===_.value)&&e[0]&&p.modelValue===void 0&&(g.value=e[0].value)},{deep:!0}),(d,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(`ol`,(0,e.mergeProps)(x.value,{class:y.value,style:b.value}),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(u.items,(p,m)=>((0,e.openBlock)(),(0,e.createElementBlock)(`li`,{key:p.value,class:(0,e.normalizeClass)([`t-steps__item`,`is-${S(p,m)}`])},[(0,e.createElementVNode)(`button`,{type:`button`,class:(0,e.normalizeClass)([`t-steps__button`,{"is-current":S(p,m)===`current`,"is-disabled":p.disabled}]),disabled:!u.interactive||p.disabled,"aria-current":S(p,m)===`current`?`step`:void 0,onClick:e=>C(p)},[(0,e.renderSlot)(d.$slots,`item`,{item:p,index:m,status:S(p,m),current:S(p,m)===`current`},()=>[(0,e.createElementVNode)(`span`,r,[S(p,m)===`complete`?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(f),(0,e.mergeProps)({key:0,ref_for:!0},(0,e.unref)(t.treeIconDefaults)),null,16)):S(p,m)===`error`?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,i,`!`)):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,a,(0,e.toDisplayString)(m+1),1))]),(0,e.createElementVNode)(`span`,o,[(0,e.createElementVNode)(`span`,s,(0,e.toDisplayString)(p.label),1),p.description?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,c,(0,e.toDisplayString)(p.description),1)):(0,e.createCommentVNode)(``,!0)]),p.meta?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,l,(0,e.toDisplayString)(p.meta),1)):(0,e.createCommentVNode)(``,!0)])],10,n)],2))),128))],16))}});exports.default=u;
+let e=require("vue"),t=require("@treeui/icons");var n=[`disabled`,`aria-current`,`onClick`],r={class:`t-steps__indicator`,"aria-hidden":`true`},i={key:1},a={key:2},o={class:`t-steps__copy`},s={class:`t-steps__label`},c={key:0,class:`t-steps__description`},l={key:0,class:`t-steps__meta`},u=(0,e.defineComponent)({inheritAttrs:!1,__name:`TSteps`,props:{modelValue:{default:void 0},defaultValue:{default:``},items:{default:()=>[]},size:{default:`md`},orientation:{default:`horizontal`},interactive:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(u,{emit:d}){let f=(0,e.computed)(()=>(0,t.getTreeIcon)(`check`)),p=u,m=d,h=(0,e.useAttrs)(),g=(0,e.ref)(p.defaultValue||p.items[0]?.value||``),_=(0,e.computed)(()=>p.modelValue??g.value),v=(0,e.computed)(()=>{let e=p.items.findIndex(e=>e.value===_.value);return e>=0?e:0}),y=(0,e.computed)(()=>[`t-steps`,`t-steps--${p.size}`,`t-steps--${p.orientation}`,{"is-interactive":p.interactive},h.class]),b=(0,e.computed)(()=>h.style),x=(0,e.computed)(()=>{let{class:e,style:t,...n}=h;return n}),S=(e,t)=>e.status?e.status:t<v.value?`complete`:t===v.value?`current`:`upcoming`,C=e=>{!p.interactive||e.disabled||(p.modelValue===void 0&&(g.value=e.value),m(`update:modelValue`,e.value))};return(0,e.watch)(()=>p.items,e=>{!e.some(e=>e.value===_.value)&&e[0]&&p.modelValue===void 0&&(g.value=e[0].value)},{deep:!0}),(d,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(`ol`,(0,e.mergeProps)(x.value,{class:y.value,style:b.value}),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(u.items,(p,m)=>((0,e.openBlock)(),(0,e.createElementBlock)(`li`,{key:p.value,class:(0,e.normalizeClass)([`t-steps__item`,`is-${S(p,m)}`])},[(0,e.createElementVNode)(`button`,{type:`button`,class:(0,e.normalizeClass)([`t-steps__button`,{"is-current":S(p,m)===`current`,"is-disabled":p.disabled}]),disabled:!u.interactive||p.disabled,"aria-current":S(p,m)===`current`?`step`:void 0,onClick:e=>C(p)},[(0,e.renderSlot)(d.$slots,`item`,{item:p,index:m,status:S(p,m),current:S(p,m)===`current`},()=>[(0,e.createElementVNode)(`span`,r,[S(p,m)===`complete`?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(f),(0,e.mergeProps)({key:0,ref_for:!0},(0,e.unref)(t.treeIconDefaults)),null,16)):S(p,m)===`error`?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,i,`!`)):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,a,(0,e.toDisplayString)(m+1),1))]),(0,e.createElementVNode)(`span`,o,[(0,e.createElementVNode)(`span`,s,(0,e.toDisplayString)(p.label),1),p.description?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,c,(0,e.toDisplayString)(p.description),1)):(0,e.createCommentVNode)(``,!0)]),p.meta?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,l,(0,e.toDisplayString)(p.meta),1)):(0,e.createCommentVNode)(``,!0)])],10,n)],2))),128))],16))}});exports.default=u;
 //# sourceMappingURL=TSteps.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSteps.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = getTreeIcon('check');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":"yjBAwBA,IAAM,GAAA,EAAA,EAAA,YAAA,~~CAAwB~~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"}
1	+ {"version":3,"file":"TSteps.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = computed(() => getTreeIcon('check'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":"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"}

package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -30,7 +30,7 @@ var y = [
 	},
 	emits: ["update:modelValue"],
 	setup(o, { emit: D }) {
-		let O = _("check"), k = o, A = D, j = h(), M = u(k.defaultValue || k.items[0]?.value || ""), N = t(() => k.modelValue ?? M.value), P = t(() => {
+		let O = t(() => _("check")), k = o, A = D, j = h(), M = u(k.defaultValue || k.items[0]?.value || ""), N = t(() => k.modelValue ?? M.value), P = t(() => {
 			let e = k.items.findIndex((e) => e.value === N.value);
 			return e >= 0 ? e : 0;
 		}), F = t(() => [

package/dist/components/TSteps.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TSteps.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = getTreeIcon('check');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAM,IAAY,EAAY,OAAO,GAE/B,IAAQ,GAmBR,IAAO,GAaP,IAAQ,EAAS,GACjB,IAAgB,EAAI,EAAM,gBAAgB,EAAM,MAAM,EAAE,EAAE,SAAS,EAAE,GAErE,IAAc,QAAe,EAAM,cAAc,EAAc,KAAK,GAEpE,IAAe,QAAe;GAClC,IAAM,IAAc,EAAM,MAAM,WAAW,MAAS,EAAK,UAAU,EAAY,KAAK;GACpF,OAAO,KAAe,IAAI,IAAc;EAC1C,CAAC,GAEK,IAAc,QAAe;GACjC;GACA,YAAY,EAAM;GAClB,YAAY,EAAM;GAClB,EACE,kBAAkB,EAAM,YAC1B;GACA,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,GAEK,KAAiB,GAAiB,MAClC,EAAK,SACA,EAAK,SAGV,IAAQ,EAAa,QAChB,aAGL,MAAU,EAAa,QAClB,YAGF,YAGH,KAAc,MAAoB;GAClC,CAAC,EAAM,eAAe,EAAK,aAI3B,EAAM,eAAe,KAAA,MACvB,EAAc,QAAQ,EAAK,QAG7B,EAAK,qBAAqB,EAAK,KAAK;EACtC;SAEA,QACQ,EAAM,QACX,MAAU;GAGT,AAAI,CAFmB,EAAM,MAAM,MAAS,EAAK,UAAU,EAAY,KAElE,KAAkB,EAAM,MAAM,EAAM,eAAe,KAAA,MACtD,EAAc,QAAQ,EAAM,EAAE,CAAC;EAEnC,GACA,EAAE,MAAM,GAAK,CACf,mBAIE,EA4DK,MA5DL,EACU,EA2DL,OA3Dc;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;eAER,EAsDK,GAAA,MAAA,EArDqB,EAAA,QAAhB,GAAM,YADhB,EAsDK,MAAA;GApDF,KAAK,EAAK;GACX,OAAK,EAAA,CAAC,iBAAe,MACP,EAAc,GAAM,CAAK,GAAA,CAAA;MAEvC,EA+CS,UAAA;GA9CP,MAAK;GACL,OAAK,EAAA,CAAC,mBAAiB;kBACW,EAAc,GAAM,CAAK,MAAA;mBAA0C,EAAK;;GAIzG,UAAQ,CAAG,EAAA,eAAe,EAAK;GAC/B,gBAAc,EAAc,GAAM,CAAK,MAAA,YAAA,SAA2B,KAAA;GAClE,UAAK,MAAE,EAAW,CAAI;MAEvB,EAmCO,EAAA,QAAA,QAAA;GAjCE;GACC;GACP,QAAQ,EAAc,GAAM,CAAK;GACjC,SAAS,EAAc,GAAM,CAAK,MAAA;WA8B9B;GA5BL,EAUO,QAVP,GAUO,CALG,EAAc,GAAM,CAAK,MAAA,cAAA,EAAA,GADjC,EAGE,EAAA,CAAA,GAHF,EAGE;;;MADQ,EAAA,CAAA,CAAgB,GAAA,MAAA,EAAA,KAET,EAAc,GAAM,CAAK,MAAA,WAAA,EAAA,GAA1C,EAAiE,QAAA,GAAR,GAAC,MAAA,EAAA,GAC1D,EAAmC,QAAA,GAAA,EAAnB,IAAK,CAAA,GAAA,CAAA,EAAA,CAAA;GAGvB,EAQO,QARP,GAQO,CAPL,EAAoD,QAApD,GAAoD,EAApB,EAAK,KAAK,GAAA,CAAA,GAElC,EAAK,eAAA,EAAA,GADb,EAKO,QALP,GAKO,EADF,EAAK,WAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAKf,EAAK,QAAA,EAAA,GADb,EAKO,QALP,GAKO,EADF,EAAK,IAAI,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
1	+ {"version":3,"file":"TSteps.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport { computed, ref, useAttrs, watch } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TStepItem {\n label: string;\n value: string;\n description?: string;\n meta?: string;\n status?: TStepStatus;\n disabled?: boolean;\n}\n\nconst _treeStepStatuses = ['complete', 'current', 'upcoming', 'error'] as const;\nconst _treeStepOrientations = ['horizontal', 'vertical'] as const;\n\nexport type TStepStatus = (typeof _treeStepStatuses)[number];\nexport type TStepOrientation = (typeof _treeStepOrientations)[number];\n\nconst CheckIcon = computed(() => getTreeIcon('check'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TStepItem[];\n size?: TSize;\n orientation?: TStepOrientation;\n interactive?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n orientation: 'horizontal',\n interactive: false,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TStepItem;\n index: number;\n status: TStepStatus;\n current: boolean;\n }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst internalValue = ref(props.defaultValue \|\| props.items[0]?.value \|\| '');\n\nconst activeValue = computed(() => props.modelValue ?? internalValue.value);\n\nconst currentIndex = computed(() => {\n const activeIndex = props.items.findIndex((item) => item.value === activeValue.value);\n return activeIndex >= 0 ? activeIndex : 0;\n});\n\nconst rootClasses = computed(() => [\n 't-steps',\n `t-steps--${props.size}`,\n `t-steps--${props.orientation}`,\n {\n 'is-interactive': props.interactive,\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 resolveStatus = (item: TStepItem, index: number): TStepStatus => {\n if (item.status) {\n return item.status;\n }\n\n if (index < currentIndex.value) {\n return 'complete';\n }\n\n if (index === currentIndex.value) {\n return 'current';\n }\n\n return 'upcoming';\n};\n\nconst selectStep = (item: TStepItem) => {\n if (!props.interactive \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n};\n\nwatch(\n () => props.items,\n (items) => {\n const hasCurrentItem = items.some((item) => item.value === activeValue.value);\n\n if (!hasCurrentItem && items[0] && props.modelValue === undefined) {\n internalValue.value = items[0].value;\n }\n },\n { deep: true },\n);\n</script>\n\n<template>\n <ol\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-steps__item\"\n :class=\"`is-${resolveStatus(item, index)}`\"\n >\n <button\n type=\"button\"\n class=\"t-steps__button\"\n :class=\"{\n 'is-current': resolveStatus(item, index) === 'current',\n 'is-disabled': item.disabled,\n }\"\n :disabled=\"!interactive \|\| item.disabled\"\n :aria-current=\"resolveStatus(item, index) === 'current' ? 'step' : undefined\"\n @click=\"selectStep(item)\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :index=\"index\"\n :status=\"resolveStatus(item, index)\"\n :current=\"resolveStatus(item, index) === 'current'\"\n >\n <span\n class=\"t-steps__indicator\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"resolveStatus(item, index) === 'complete'\"\n v-bind=\"treeIconDefaults\"\n />\n <span v-else-if=\"resolveStatus(item, index) === 'error'\">!</span>\n <span v-else>{{ index + 1 }}</span>\n </span>\n\n <span class=\"t-steps__copy\">\n <span class=\"t-steps__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-steps__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.meta\"\n class=\"t-steps__meta\"\n >\n {{ item.meta }}\n </span>\n </slot>\n </button>\n </li>\n </ol>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAM,IAAY,QAAe,EAAY,OAAO,CAAC,GAE/C,IAAQ,GAmBR,IAAO,GAaP,IAAQ,EAAS,GACjB,IAAgB,EAAI,EAAM,gBAAgB,EAAM,MAAM,EAAE,EAAE,SAAS,EAAE,GAErE,IAAc,QAAe,EAAM,cAAc,EAAc,KAAK,GAEpE,IAAe,QAAe;GAClC,IAAM,IAAc,EAAM,MAAM,WAAW,MAAS,EAAK,UAAU,EAAY,KAAK;GACpF,OAAO,KAAe,IAAI,IAAc;EAC1C,CAAC,GAEK,IAAc,QAAe;GACjC;GACA,YAAY,EAAM;GAClB,YAAY,EAAM;GAClB,EACE,kBAAkB,EAAM,YAC1B;GACA,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,GAEK,KAAiB,GAAiB,MAClC,EAAK,SACA,EAAK,SAGV,IAAQ,EAAa,QAChB,aAGL,MAAU,EAAa,QAClB,YAGF,YAGH,KAAc,MAAoB;GAClC,CAAC,EAAM,eAAe,EAAK,aAI3B,EAAM,eAAe,KAAA,MACvB,EAAc,QAAQ,EAAK,QAG7B,EAAK,qBAAqB,EAAK,KAAK;EACtC;SAEA,QACQ,EAAM,QACX,MAAU;GAGT,AAAI,CAFmB,EAAM,MAAM,MAAS,EAAK,UAAU,EAAY,KAElE,KAAkB,EAAM,MAAM,EAAM,eAAe,KAAA,MACtD,EAAc,QAAQ,EAAM,EAAE,CAAC;EAEnC,GACA,EAAE,MAAM,GAAK,CACf,mBAIE,EA4DK,MA5DL,EACU,EA2DL,OA3Dc;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;eAER,EAsDK,GAAA,MAAA,EArDqB,EAAA,QAAhB,GAAM,YADhB,EAsDK,MAAA;GApDF,KAAK,EAAK;GACX,OAAK,EAAA,CAAC,iBAAe,MACP,EAAc,GAAM,CAAK,GAAA,CAAA;MAEvC,EA+CS,UAAA;GA9CP,MAAK;GACL,OAAK,EAAA,CAAC,mBAAiB;kBACW,EAAc,GAAM,CAAK,MAAA;mBAA0C,EAAK;;GAIzG,UAAQ,CAAG,EAAA,eAAe,EAAK;GAC/B,gBAAc,EAAc,GAAM,CAAK,MAAA,YAAA,SAA2B,KAAA;GAClE,UAAK,MAAE,EAAW,CAAI;MAEvB,EAmCO,EAAA,QAAA,QAAA;GAjCE;GACC;GACP,QAAQ,EAAc,GAAM,CAAK;GACjC,SAAS,EAAc,GAAM,CAAK,MAAA;WA8B9B;GA5BL,EAUO,QAVP,GAUO,CALG,EAAc,GAAM,CAAK,MAAA,cAAA,EAAA,GADjC,EAGE,EAAA,CAAA,GAHF,EAGE;;;MADQ,EAAA,CAAA,CAAgB,GAAA,MAAA,EAAA,KAET,EAAc,GAAM,CAAK,MAAA,WAAA,EAAA,GAA1C,EAAiE,QAAA,GAAR,GAAC,MAAA,EAAA,GAC1D,EAAmC,QAAA,GAAA,EAAnB,IAAK,CAAA,GAAA,CAAA,EAAA,CAAA;GAGvB,EAQO,QARP,GAQO,CAPL,EAAoD,QAApD,GAAoD,EAApB,EAAK,KAAK,GAAA,CAAA,GAElC,EAAK,eAAA,EAAA,GADb,EAKO,QALP,GAKO,EADF,EAAK,WAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAKf,EAAK,QAAA,EAAA,GADb,EAKO,QALP,GAKO,EADF,EAAK,IAAI,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TTable.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TTable.cjs","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n</script>\n\n<template>\n <div class=\"t-table-wrapper\">\n <table\n :class=\"classes\"\n ~~role~~=\"~~grid~~\"\n >\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n ~~aria-hidden~~=\"~~true\"\n >\n <svg\n v-if=\"currentSort?.key~~ ~~=== column.key && currentSort.direction ===~~ '~~asc~~'~~\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0~~ 0 ~~24 24~~\"\n ~~fill=\"none\"\n stroke=\"currentColor\"\n stroke~~-~~width~~=\"2\"\n ~~stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n~~ >\n ~~<path d=\"m18 15-6-6-6 6\" />\n~~ ~~</svg>\n~~ <~~svg~~\n ~~v-else-if~~=\"~~currentSort?.key ===~~ column~~.key && currentSort.direction === 'desc'~~\"\n ~~xmlns~~=\"~~http://www.w3.org/2000/svg\"\n width=\"~~14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n ~~>\n <path d=\"m6 9 6 6 6-6\"~~ />\n </svg>\n <svg\n v-else\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n style=\"opacity: 0.4\"\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TTable.cjs","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue';\nimport type { TIconName } from '@treeui/icons';\nimport type { TSize } from '../types/contracts';\nimport TIcon from './TIcon.vue';\n\n// The scroll container is the root element, but the accessible name and any\n// aria-/id belong on the <table> itself, so attrs are split rather than\n// inherited onto the wrapper.\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n /\n Visible `<caption>` naming the table. For a name without visible text,\n * pass `aria-label` / `aria-labelledby` instead — both land on the `<table>`.\n /\n caption?: string;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n caption: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n\nfunction isSortedBy(column: TTableColumn): boolean {\n const cur = currentSort.value;\n return cur?.key === column.key && cur.direction !== 'none';\n}\n\nfunction sortIconName(column: TTableColumn): TIconName {\n const cur = currentSort.value;\n if (!isSortedBy(column)) return 'chevrons-up-down';\n return cur?.direction === 'asc' ? 'chevron-up' : 'chevron-down';\n}\n\nconst attrs = useAttrs();\n\n// class/style stay on the scroll wrapper (the root); everything else —\n// aria-label, aria-labelledby, id, data- — is forwarded to the <table>.\nconst tableAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n</script>\n\n<template>\n <div\n class=\"t-table-wrapper\"\n :class=\"attrs.class\"\n :style=\"attrs.style\"\n >\n <table\n v-bind=\"tableAttrs\"\n :class=\"classes\"\n >\n <caption\n v-if=\"caption\"\n class=\"t-table__caption\"\n >\n {{ caption }}\n </caption>\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n :class=\"{ 'is-inactive': !isSortedBy(column) }\"\n aria-hidden=\"true\"\n >\n <TIcon\n :name=\"sortIconName(column)\"\n :size=\"14\"\n />\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/TTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TTable.js","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n</script>\n\n<template>\n <div class=\"t-table-wrapper\">\n <table\n :class=\"classes\"\n ~~role~~=\"~~grid~~\"\n >\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n ~~aria-hidden~~=\"~~true\"\n >\n <svg\n v-if=\"currentSort?.key~~ ~~=== column.key && currentSort.direction ===~~ '~~asc~~'~~\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0~~ 0 ~~24 24~~\"\n ~~fill=\"none\"\n stroke=\"currentColor\"\n stroke~~-~~width~~=\"2\"\n ~~stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n~~ >\n ~~<path d=\"m18 15-6-6-6 6\" />\n~~ ~~</svg>\n~~ <~~svg~~\n ~~v-else-if~~=\"~~currentSort?.key ===~~ column~~.key && currentSort.direction === 'desc'~~\"\n ~~xmlns~~=\"~~http://www.w3.org/2000/svg\"\n width=\"~~14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n ~~>\n <path d=\"m6 9 6 6 6-6\"~~ />\n </svg>\n <svg\n v-else\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n style=\"opacity: 0.4\"\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TTable.js","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue';\nimport type { TIconName } from '@treeui/icons';\nimport type { TSize } from '../types/contracts';\nimport TIcon from './TIcon.vue';\n\n// The scroll container is the root element, but the accessible name and any\n// aria-/id belong on the <table> itself, so attrs are split rather than\n// inherited onto the wrapper.\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n /\n Visible `<caption>` naming the table. For a name without visible text,\n * pass `aria-label` / `aria-labelledby` instead — both land on the `<table>`.\n /\n caption?: string;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n caption: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n\nfunction isSortedBy(column: TTableColumn): boolean {\n const cur = currentSort.value;\n return cur?.key === column.key && cur.direction !== 'none';\n}\n\nfunction sortIconName(column: TTableColumn): TIconName {\n const cur = currentSort.value;\n if (!isSortedBy(column)) return 'chevrons-up-down';\n return cur?.direction === 'asc' ? 'chevron-up' : 'chevron-down';\n}\n\nconst attrs = useAttrs();\n\n// class/style stay on the scroll wrapper (the root); everything else —\n// aria-label, aria-labelledby, id, data- — is forwarded to the <table>.\nconst tableAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n</script>\n\n<template>\n <div\n class=\"t-table-wrapper\"\n :class=\"attrs.class\"\n :style=\"attrs.style\"\n >\n <table\n v-bind=\"tableAttrs\"\n :class=\"classes\"\n >\n <caption\n v-if=\"caption\"\n class=\"t-table__caption\"\n >\n {{ caption }}\n </caption>\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n :class=\"{ 'is-inactive': !isSortedBy(column) }\"\n aria-hidden=\"true\"\n >\n <TIcon\n :name=\"sortIconName(column)\"\n :size=\"14\"\n />\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/TTable.vue.d.ts CHANGED Viewed

@@ -16,6 +16,11 @@ type __VLS_Props = {
     rows: Record<string, unknown>[];
     size?: TSize;
     sortBy?: TTableSortState;
+    /**
+     * Visible `<caption>` naming the table. For a name without visible text,
+     * pass `aria-label` / `aria-labelledby` instead — both land on the `<table>`.
+     */
+    caption?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -39,7 +44,7 @@ declare function __VLS_template(): {
         empty: () => void;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -48,8 +53,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onSort?: ((state: TTableSortState) => any) | undefined;
 }>, {
     size: TSize;
+    caption: string;
     sortBy: TTableSortState;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/TTable.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/TTable.vue"],"names":[],"mappings":"~~AAqOA~~,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;~~AAEhD~~,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAEF,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,eAAe,CAAC;~~CAC1B~~,CAAC;~~AAuFJ~~,iBAAS,cAAc;~~WAkJT~~,OAAO,IAA6B;;~~yCA1Nf~~;YAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAE,KAAK,IAAI;2CACvD;YAAE,MAAM,EAAE,YAAY,CAAA;SAAE,KAAK,IAAI;eAC7D,MAAM,IAAI;;yCAFgB;YAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAE,KAAK,IAAI;2CACvD;YAAE,MAAM,EAAE,YAAY,CAAA;SAAE,KAAK,IAAI;eAC7D,MAAM,IAAI;;;;~~EA6NlB~~;~~AAgBD~~,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;~~UAjQV~~,KAAK;~~YACH~~,eAAe;~~wFAyQ1B~~,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"TTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/TTable.vue"],"names":[],"mappings":"AA4OA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAUhD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAEF,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA6GJ,iBAAS,cAAc;WAkHT,OAAO,IAA6B;;yCA/Mf;YAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAE,KAAK,IAAI;2CACvD;YAAE,MAAM,EAAE,YAAY,CAAA;SAAE,KAAK,IAAI;eAC7D,MAAM,IAAI;;yCAFgB;YAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAE,KAAK,IAAI;2CACvD;YAAE,MAAM,EAAE,YAAY,CAAA;SAAE,KAAK,IAAI;eAC7D,MAAM,IAAI;;;;EAkNlB;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;UAhQV,KAAK;aAMF,MAAM;YALP,eAAe;6EAuQ1B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TTable.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-let e=require("vue");var t={class:`t-table-wrapper`},n={class:`t-table__head`},r={class:`t-table__row`},i=[`aria-sort`,`tabindex`,`onClick`,`onKeydown`],a={class:`t-table__header-content`},o={key:0,class:`t-table__sort-icon`,"aria-hidden":`true`},s={key:0,xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},c={key:1,xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},l={key:2,xmlns:`http://www.w3.org/2000/svg`,width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,style:{opacity:`0.4`}},u={class:`t-table__body`},d={key:0,class:`t-table__row t-table__row--empty`},f=[`colspan`],p=(0,e.defineComponent)({__name:`TTable`,props:{columns:{},rows:{},size:{default:`md`},sortBy:{default:void 0}},emits:[`sort`],setup(p,{emit:m}){let h=p,g=m,_=(0,e.ref)(void 0),v=(0,e.computed)(()=>h.sortBy??_.value),y=(0,e.computed)(()=>[`t-table`,`t-table--${h.size}`]),b=(0,e.computed)(()=>{let e=v.value;return!e||e.direction===`none`?h.rows:[...h.rows].sort((t,n)=>{let r=t[e.key],i=n[e.key];if(r==null&&i==null)return 0;if(r==null)return 1;if(i==null)return-1;let a=typeof r==`number`&&typeof i==`number`?r-i:String(r).localeCompare(String(i));return e.direction===`desc`?-a:a})});function x(e){if(!e.sortable)return;let t=v.value,n=`asc`;t?.key===e.key&&(n=t.direction===`asc`?`desc`:t.direction===`desc`?`none`:`asc`);let r={key:e.key,direction:n};_.value=r,g(`sort`,r)}function S(e){if(!e.sortable)return;let t=v.value;return t?.key!==e.key||t.direction===`none`?`none`:t.direction===`asc`?`ascending`:`descending`}function C(e,t){t.sortable&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),x(t))}return(m,h)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[(0,e.createElementVNode)(`table`,{class:(0,e.normalizeClass)(y.value),role:`grid`},[(0,e.createElementVNode)(`thead`,n,[(0,e.createElementVNode)(`tr`,r,[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(p.columns,t=>((0,e.openBlock)(),(0,e.createElementBlock)(`th`,{key:t.key,class:(0,e.normalizeClass)([`t-table__header`,[t.sortable?`t-table__header--sortable`:``,t.align?`t-table__header--${t.align}`:``]]),style:(0,e.normalizeStyle)(t.width?{width:t.width}:void 0),"aria-sort":S(t),tabindex:t.sortable?0:void 0,scope:`col`,onClick:e=>x(t),onKeydown:e=>C(e,t)},[(0,e.renderSlot)(m.$slots,`header-${t.key}`,{column:t},()=>[(0,e.createElementVNode)(`span`,a,[(0,e.createTextVNode)((0,e.toDisplayString)(t.label)+` `,1),t.sortable?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,o,[v.value?.key===t.key&&v.value.direction===`asc`?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,s,[...h[0]||=[(0,e.createElementVNode)(`path`,{d:`m18 15-6-6-6 6`},null,-1)]])):v.value?.key===t.key&&v.value.direction===`desc`?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,c,[...h[1]||=[(0,e.createElementVNode)(`path`,{d:`m6 9 6 6 6-6`},null,-1)]])):((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,l,[...h[2]||=[(0,e.createElementVNode)(`path`,{d:`m7 15 5 5 5-5`},null,-1),(0,e.createElementVNode)(`path`,{d:`m7 9 5-5 5 5`},null,-1)]]))])):(0,e.createCommentVNode)(``,!0)])])],46,i))),128))])]),(0,e.createElementVNode)(`tbody`,u,[b.value.length===0?((0,e.openBlock)(),(0,e.createElementBlock)(`tr`,d,[(0,e.createElementVNode)(`td`,{colspan:p.columns.length,class:`t-table__cell t-table__cell--empty`},[(0,e.renderSlot)(m.$slots,`empty`,{},()=>[h[3]||=(0,e.createTextVNode)(` No data available. `,-1)])],8,f)])):(0,e.createCommentVNode)(``,!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(b.value,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`tr`,{key:n,class:`t-table__row`},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(p.columns,n=>((0,e.openBlock)(),(0,e.createElementBlock)(`td`,{key:n.key,class:(0,e.normalizeClass)([`t-table__cell`,n.align?`t-table__cell--${n.align}`:``])},[(0,e.renderSlot)(m.$slots,`cell-${n.key}`,{row:t,value:t[n.key]},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t[n.key]??``),1)])],2))),128))]))),128))])],2)]))}});exports.default=p;
+const e=require("./TIcon.cjs");let t=require("vue");var n={key:0,class:`t-table__caption`},r={class:`t-table__head`},i={class:`t-table__row`},a=[`aria-sort`,`tabindex`,`onClick`,`onKeydown`],o={class:`t-table__header-content`},s={class:`t-table__body`},c={key:0,class:`t-table__row t-table__row--empty`},l=[`colspan`],u=(0,t.defineComponent)({inheritAttrs:!1,__name:`TTable`,props:{columns:{},rows:{},size:{default:`md`},sortBy:{default:void 0},caption:{default:void 0}},emits:[`sort`],setup(u,{emit:d}){let f=u,p=d,m=(0,t.ref)(void 0),h=(0,t.computed)(()=>f.sortBy??m.value),g=(0,t.computed)(()=>[`t-table`,`t-table--${f.size}`]),_=(0,t.computed)(()=>{let e=h.value;return!e||e.direction===`none`?f.rows:[...f.rows].sort((t,n)=>{let r=t[e.key],i=n[e.key];if(r==null&&i==null)return 0;if(r==null)return 1;if(i==null)return-1;let a=typeof r==`number`&&typeof i==`number`?r-i:String(r).localeCompare(String(i));return e.direction===`desc`?-a:a})});function v(e){if(!e.sortable)return;let t=h.value,n=`asc`;t?.key===e.key&&(n=t.direction===`asc`?`desc`:t.direction===`desc`?`none`:`asc`);let r={key:e.key,direction:n};m.value=r,p(`sort`,r)}function y(e){if(!e.sortable)return;let t=h.value;return t?.key!==e.key||t.direction===`none`?`none`:t.direction===`asc`?`ascending`:`descending`}function b(e,t){t.sortable&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v(t))}function x(e){let t=h.value;return t?.key===e.key&&t.direction!==`none`}function S(e){let t=h.value;return x(e)?t?.direction===`asc`?`chevron-up`:`chevron-down`:`chevrons-up-down`}let C=(0,t.useAttrs)(),w=(0,t.computed)(()=>{let{class:e,style:t,...n}=C;return n});return(d,f)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`t-table-wrapper`,(0,t.unref)(C).class]),style:(0,t.normalizeStyle)((0,t.unref)(C).style)},[(0,t.createElementVNode)(`table`,(0,t.mergeProps)(w.value,{class:g.value}),[u.caption?((0,t.openBlock)(),(0,t.createElementBlock)(`caption`,n,(0,t.toDisplayString)(u.caption),1)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`thead`,r,[(0,t.createElementVNode)(`tr`,i,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(u.columns,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`th`,{key:n.key,class:(0,t.normalizeClass)([`t-table__header`,[n.sortable?`t-table__header--sortable`:``,n.align?`t-table__header--${n.align}`:``]]),style:(0,t.normalizeStyle)(n.width?{width:n.width}:void 0),"aria-sort":y(n),tabindex:n.sortable?0:void 0,scope:`col`,onClick:e=>v(n),onKeydown:e=>b(e,n)},[(0,t.renderSlot)(d.$slots,`header-${n.key}`,{column:n},()=>[(0,t.createElementVNode)(`span`,o,[(0,t.createTextVNode)((0,t.toDisplayString)(n.label)+` `,1),n.sortable?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:0,class:(0,t.normalizeClass)([`t-table__sort-icon`,{"is-inactive":!x(n)}]),"aria-hidden":`true`},[(0,t.createVNode)(e.default,{name:S(n),size:14},null,8,[`name`])],2)):(0,t.createCommentVNode)(``,!0)])])],46,a))),128))])]),(0,t.createElementVNode)(`tbody`,s,[_.value.length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`tr`,c,[(0,t.createElementVNode)(`td`,{colspan:u.columns.length,class:`t-table__cell t-table__cell--empty`},[(0,t.renderSlot)(d.$slots,`empty`,{},()=>[f[0]||=(0,t.createTextVNode)(` No data available. `,-1)])],8,l)])):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(_.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`tr`,{key:n,class:`t-table__row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(u.columns,n=>((0,t.openBlock)(),(0,t.createElementBlock)(`td`,{key:n.key,class:(0,t.normalizeClass)([`t-table__cell`,n.align?`t-table__cell--${n.align}`:``])},[(0,t.renderSlot)(d.$slots,`cell-${n.key}`,{row:e,value:e[n.key]},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e[n.key]??``),1)])],2))),128))]))),128))])],16)],6))}});exports.default=u;
 //# sourceMappingURL=TTable.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TTable.vue_vue_type_script_setup_true_lang.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TTable.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport type { TSize } from '../types/contracts';\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n</script>\n\n<template>\n <div class=\"t-table-wrapper\">\n <table\n :class=\"classes\"\n role=\"grid\"\n >\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n aria-hidden=\"true\"\n >\n <svg\n v-if=\"currentSort?.key === column.key && currentSort.direction === 'asc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n <svg\n v-else-if=\"currentSort?.key === column.key && currentSort.direction === 'desc'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <svg\n v-else\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n style=\"opacity: 0.4\"\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"TTable.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue';\nimport type { TIconName } from '@treeui/icons';\nimport type { TSize } from '../types/contracts';\nimport TIcon from './TIcon.vue';\n\n// The scroll container is the root element, but the accessible name and any\n// aria-/id belong on the <table> itself, so attrs are split rather than\n// inherited onto the wrapper.\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport type TTableColumn = {\n key: string;\n label: string;\n sortable?: boolean;\n align?: 'left' \| 'center' \| 'right';\n width?: string;\n};\n\nexport type TTableSortDirection = 'asc' \| 'desc' \| 'none';\n\nexport type TTableSortState = {\n key: string;\n direction: TTableSortDirection;\n};\n\nconst props = withDefaults(\n defineProps<{\n columns: TTableColumn[];\n rows: Record<string, unknown>[];\n size?: TSize;\n sortBy?: TTableSortState;\n /\n Visible `<caption>` naming the table. For a name without visible text,\n * pass `aria-label` / `aria-labelledby` instead — both land on the `<table>`.\n /\n caption?: string;\n }>(),\n {\n size: 'md',\n sortBy: undefined,\n caption: undefined,\n },\n);\n\nconst emit = defineEmits<{\n (e: 'sort', state: TTableSortState): void;\n}>();\n\ndefineSlots<{\n [key: `cell-${string}`]: (props: { row: Record<string, unknown>; value: unknown }) => void;\n [key: `header-${string}`]: (props: { column: TTableColumn }) => void;\n empty: () => void;\n}>();\n\nconst internalSort = ref<TTableSortState \| undefined>(undefined);\n\nconst currentSort = computed(() => props.sortBy ?? internalSort.value);\n\nconst classes = computed(() => [\n 't-table',\n `t-table--${props.size}`,\n]);\n\nconst sortedRows = computed(() => {\n const sort = currentSort.value;\n if (!sort \|\| sort.direction === 'none') return props.rows;\n\n return [...props.rows].sort((a, b) => {\n const aVal = a[sort.key];\n const bVal = b[sort.key];\n\n if (aVal == null && bVal == null) return 0;\n if (aVal == null) return 1;\n if (bVal == null) return -1;\n\n const cmp =\n typeof aVal === 'number' && typeof bVal === 'number'\n ? aVal - bVal\n : String(aVal).localeCompare(String(bVal));\n\n return sort.direction === 'desc' ? -cmp : cmp;\n });\n});\n\nfunction handleSort(column: TTableColumn) {\n if (!column.sortable) return;\n\n const cur = currentSort.value;\n let direction: TTableSortDirection = 'asc';\n\n if (cur?.key === column.key) {\n if (cur.direction === 'asc') direction = 'desc';\n else if (cur.direction === 'desc') direction = 'none';\n else direction = 'asc';\n }\n\n const state: TTableSortState = { key: column.key, direction };\n internalSort.value = state;\n emit('sort', state);\n}\n\nfunction sortAriaSort(column: TTableColumn): 'none' \| 'ascending' \| 'descending' \| undefined {\n if (!column.sortable) return undefined;\n const cur = currentSort.value;\n if (cur?.key !== column.key \|\| cur.direction === 'none') return 'none';\n return cur.direction === 'asc' ? 'ascending' : 'descending';\n}\n\nfunction handleHeaderKeydown(event: KeyboardEvent, column: TTableColumn) {\n if (column.sortable && (event.key === 'Enter' \|\| event.key === ' ')) {\n event.preventDefault();\n handleSort(column);\n }\n}\n\nfunction isSortedBy(column: TTableColumn): boolean {\n const cur = currentSort.value;\n return cur?.key === column.key && cur.direction !== 'none';\n}\n\nfunction sortIconName(column: TTableColumn): TIconName {\n const cur = currentSort.value;\n if (!isSortedBy(column)) return 'chevrons-up-down';\n return cur?.direction === 'asc' ? 'chevron-up' : 'chevron-down';\n}\n\nconst attrs = useAttrs();\n\n// class/style stay on the scroll wrapper (the root); everything else —\n// aria-label, aria-labelledby, id, data- — is forwarded to the <table>.\nconst tableAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n</script>\n\n<template>\n <div\n class=\"t-table-wrapper\"\n :class=\"attrs.class\"\n :style=\"attrs.style\"\n >\n <table\n v-bind=\"tableAttrs\"\n :class=\"classes\"\n >\n <caption\n v-if=\"caption\"\n class=\"t-table__caption\"\n >\n {{ caption }}\n </caption>\n <thead class=\"t-table__head\">\n <tr class=\"t-table__row\">\n <th\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__header\"\n :class=\"[\n column.sortable ? 't-table__header--sortable' : '',\n column.align ? `t-table__header--${column.align}` : '',\n ]\"\n :style=\"column.width ? { width: column.width } : undefined\"\n :aria-sort=\"sortAriaSort(column)\"\n :tabindex=\"column.sortable ? 0 : undefined\"\n scope=\"col\"\n @click=\"handleSort(column)\"\n @keydown=\"handleHeaderKeydown($event, column)\"\n >\n <slot\n :name=\"`header-${column.key}`\"\n :column=\"column\"\n >\n <span class=\"t-table__header-content\">\n {{ column.label }}\n <span\n v-if=\"column.sortable\"\n class=\"t-table__sort-icon\"\n :class=\"{ 'is-inactive': !isSortedBy(column) }\"\n aria-hidden=\"true\"\n >\n <TIcon\n :name=\"sortIconName(column)\"\n :size=\"14\"\n />\n </span>\n </span>\n </slot>\n </th>\n </tr>\n </thead>\n <tbody class=\"t-table__body\">\n <tr\n v-if=\"sortedRows.length === 0\"\n class=\"t-table__row t-table__row--empty\"\n >\n <td\n :colspan=\"columns.length\"\n class=\"t-table__cell t-table__cell--empty\"\n >\n <slot name=\"empty\">\n No data available.\n </slot>\n </td>\n </tr>\n <tr\n v-for=\"(row, index) in sortedRows\"\n :key=\"index\"\n class=\"t-table__row\"\n >\n <td\n v-for=\"column in columns\"\n :key=\"column.key\"\n class=\"t-table__cell\"\n :class=\"column.align ? `t-table__cell--${column.align}` : ''\"\n >\n <slot\n :name=\"`cell-${column.key}`\"\n :row=\"row\"\n :value=\"row[column.key]\"\n >\n {{ row[column.key] ?? '' }}\n </slot>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</template>\n"],"mappings":"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"}