@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/TableCell/TableCell.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+import { useTableSize } from "#vuno/components/DataTable/DataTable.context";
+defineOptions({ name: "TableCell" });
+const props = defineProps({
+  colspan: { type: Number, required: false, default: void 0 },
+  headers: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const size = useTableSize();
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ size: size.value })
+);
+</script>
+
+<template>
+    <td
+        :class="ui.cell"
+        :colspan="props.colspan"
+        :headers="props.headers"
+    >
+        <slot />
+    </td>
+</template>

package/dist/runtime/app/components/TableCell/TableCell.vue.d.ts

@@ -0,0 +1,22 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    colspan?: number;
+    headers?: string;
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headers: string;
+    ui: DataTableUi;
+    colspan: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableContainer/TableContainer.d.vue.ts

@@ -0,0 +1,22 @@
+import type { TableContainerProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    decorator?: () => unknown;
+    default?: () => unknown;
+    description?: () => unknown;
+    title?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableContainerProps> & Readonly<{}>, {
+    description: string;
+    title: string;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableContainer/TableContainer.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, provide, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import { tableContainerKey } from "#vuno/components/DataTable/DataTable.context";
+defineOptions({ name: "TableContainer" });
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  stickyHeader: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  useStaticWidth: { type: Boolean, required: false, default: false }
+});
+const slots = defineSlots();
+const baseId = useId();
+const titleId = `${baseId}-title`;
+const descriptionId = `${baseId}-description`;
+const hasTitle = computed(() => Boolean(props.title) || filled(slots.title));
+const hasDescription = computed(() => Boolean(props.description) || filled(slots.description));
+const hasDecorator = computed(() => filled(slots.decorator));
+const hasHeading = computed(() => hasTitle.value || hasDescription.value || hasDecorator.value);
+provide(tableContainerKey, {
+  descriptionId: computed(() => hasDescription.value ? descriptionId : void 0),
+  titleId: computed(() => hasTitle.value ? titleId : void 0)
+});
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ static: String(props.useStaticWidth), sticky: String(props.stickyHeader) })
+);
+</script>
+
+<template>
+    <section :class="ui.container">
+        <div
+            v-if="hasHeading"
+            :class="[ui.titleBar, hasDecorator && 'flex justify-between']"
+        >
+            <div v-if="hasTitle || hasDescription">
+                <h2
+                    v-if="hasTitle"
+                    :id="titleId"
+                    :class="ui.title"
+                >
+                    <slot name="title">{{ props.title }}</slot>
+                </h2>
+                <p
+                    v-if="hasDescription"
+                    :id="descriptionId"
+                    :class="ui.description"
+                >
+                    <slot name="description">{{ props.description }}</slot>
+                </p>
+            </div>
+            <div
+                v-if="hasDecorator"
+                :class="ui.decorator"
+            >
+                <slot name="decorator" />
+            </div>
+        </div>
+
+        <slot />
+    </section>
+</template>

package/dist/runtime/app/components/TableContainer/TableContainer.vue.d.ts

@@ -0,0 +1,22 @@
+import type { TableContainerProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    decorator?: () => unknown;
+    default?: () => unknown;
+    description?: () => unknown;
+    title?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableContainerProps> & Readonly<{}>, {
+    description: string;
+    title: string;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableExpandHeader/TableExpandHeader.d.vue.ts

@@ -0,0 +1,27 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    id?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
+    enableToggle?: boolean;
+    label?: string;
+    ui?: DataTableUi;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    id: string;
+    ui: DataTableUi;
+    ariaLabel: string;
+    ariaControls: string;
+    enableToggle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TableExpandHeader/TableExpandHeader.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { useTableSize } from "#vuno/components/DataTable/DataTable.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TableExpandHeader" });
+const expanded = defineModel("expanded", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  id: { type: String, required: false, default: "expand" },
+  ariaControls: { type: String, required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  enableToggle: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "Expandir" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const size = useTableSize();
+const toggleLabel = computed(() => props.ariaLabel ?? (expanded.value ? "Contraer todas las filas" : "Expandir todas las filas"));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ expanded: String(expanded.value), size: size.value })
+);
+</script>
+
+<template>
+    <th
+        :id="props.id"
+        :class="[ui.header, ui.expandCell]"
+        scope="col"
+    >
+        <button
+            v-if="props.enableToggle"
+            :aria-controls="props.ariaControls"
+            :aria-expanded="expanded"
+            :aria-label="toggleLabel"
+            :class="ui.expandButton"
+            type="button"
+            @click="expanded = !expanded"
+        >
+            <Icon
+                :class="ui.expandIcon"
+                name="carbon:chevron-right"
+            />
+        </button>
+
+        <span
+            v-else
+            class="sr-only"
+        >
+            {{ props.label }}
+        </span>
+    </th>
+</template>

package/dist/runtime/app/components/TableExpandHeader/TableExpandHeader.vue.d.ts

@@ -0,0 +1,27 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    id?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
+    enableToggle?: boolean;
+    label?: string;
+    ui?: DataTableUi;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    id: string;
+    ui: DataTableUi;
+    ariaLabel: string;
+    ariaControls: string;
+    enableToggle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TableExpandRow/TableExpandRow.d.vue.ts

@@ -0,0 +1,28 @@
+import type { TableExpandRowProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = TableExpandRowProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    ariaLabel: string;
+    isSelected: boolean;
+    ariaControls: string;
+    expandHeader: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableExpandRow/TableExpandRow.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tableKey, useTableSize } from "#vuno/components/DataTable/DataTable.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TableExpandRow" });
+const expanded = defineModel("expanded", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  ariaControls: { type: String, required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  expandHeader: { type: String, required: false, default: "expand" },
+  isSelected: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const table = inject(tableKey, void 0);
+const size = useTableSize();
+const label = computed(() => props.ariaLabel ?? (expanded.value ? "Contraer fila" : "Expandir fila"));
+const zebra = computed(() => Boolean(table?.useZebraStyles.value));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({
+    expanded: String(expanded.value),
+    selected: String(props.isSelected),
+    size: size.value,
+    zebra: String(zebra.value)
+  })
+);
+</script>
+
+<template>
+    <tr
+        :class="ui.row"
+        data-parent-row
+    >
+        <td
+            :class="[ui.cell, ui.expandCell]"
+            :headers="props.expandHeader"
+        >
+            <button
+                :aria-controls="props.ariaControls"
+                :aria-expanded="expanded"
+                :aria-label="label"
+                :class="ui.expandButton"
+                type="button"
+                @click="expanded = !expanded"
+            >
+                <Icon
+                    :class="ui.expandIcon"
+                    name="carbon:chevron-right"
+                />
+            </button>
+        </td>
+
+        <slot />
+    </tr>
+</template>

package/dist/runtime/app/components/TableExpandRow/TableExpandRow.vue.d.ts

@@ -0,0 +1,28 @@
+import type { TableExpandRowProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = TableExpandRowProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    ariaLabel: string;
+    isSelected: boolean;
+    ariaControls: string;
+    expandHeader: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableExpandedRow/TableExpandedRow.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    id?: string;
+    colspan: number;
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    id: string;
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableExpandedRow/TableExpandedRow.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+import { useTableSize } from "#vuno/components/DataTable/DataTable.context";
+defineOptions({ name: "TableExpandedRow" });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  colspan: { type: Number, required: true },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const size = useTableSize();
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ size: size.value })
+);
+</script>
+
+<template>
+    <tr
+        :id="props.id"
+        :class="ui.expandedRow"
+        data-child-row
+    >
+        <td
+            :class="[ui.cell, ui.expandedCell]"
+            :colspan="props.colspan"
+        >
+            <div :class="ui.childRow">
+                <slot />
+            </div>
+        </td>
+    </tr>
+</template>

package/dist/runtime/app/components/TableExpandedRow/TableExpandedRow.vue.d.ts

@@ -0,0 +1,21 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    id?: string;
+    colspan: number;
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    id: string;
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableHead/TableHead.d.vue.ts

@@ -0,0 +1,18 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableHead/TableHead.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "TableHead" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme("dataTable", () => props.ui);
+</script>
+
+<template>
+    <thead :class="ui.head">
+        <slot />
+    </thead>
+</template>

package/dist/runtime/app/components/TableHead/TableHead.vue.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableUi } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Props = {
+    ui?: DataTableUi;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: DataTableUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableHeader/TableHeader.d.vue.ts

@@ -0,0 +1,25 @@
+import type { TableHeaderProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableHeaderProps> & Readonly<{
+    onSort?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    id: string;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    isSortable: boolean;
+    colspan: number;
+    scope: string;
+    isSortHeader: boolean;
+    sortDirection: import("#vuno/components/DataTable/DataTable.types").DataTableSortDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/TableHeader/TableHeader.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { computed, inject, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import { tableKey, useTableSize } from "#vuno/components/DataTable/DataTable.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TableHeader" });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  colspan: { type: Number, required: false, default: void 0 },
+  isSortable: { type: Boolean, required: false, default: false },
+  isSortHeader: { type: Boolean, required: false, default: false },
+  scope: { type: String, required: false, default: "col" },
+  sortDirection: { type: String, required: false, default: "NONE" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["sort"]);
+const slots = defineSlots();
+const icons = useIcons();
+const table = inject(tableKey, void 0);
+const size = useTableSize();
+const descriptionId = useId();
+const hasLabel = computed(() => filled(slots.default));
+const direction = computed(() => props.isSortHeader ? props.sortDirection : "NONE");
+const ariaSort = computed(() => direction.value === "ASC" ? "ascending" : direction.value === "DESC" ? "descending" : "none");
+const sortIcon = computed(() => direction.value === "ASC" ? icons.value.sortAsc : direction.value === "DESC" ? icons.value.sortDesc : icons.value.sort);
+const description = computed(() => direction.value === "ASC" ? "Ordena las filas en orden descendente" : direction.value === "DESC" ? "Quita el orden de las filas" : "Ordena las filas en orden ascendente");
+const sortable = computed(() => props.isSortable || Boolean(table?.isSortable.value));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ direction: direction.value, size: size.value, sortable: String(sortable.value) })
+);
+</script>
+
+<template>
+    <th
+        v-if="!props.isSortable"
+        :id="props.id"
+        :class="ui.header"
+        :colspan="props.colspan"
+        :scope="props.scope"
+    >
+        <div
+            v-if="hasLabel"
+            :class="ui.headerLabel"
+        >
+            <slot />
+        </div>
+    </th>
+
+    <th
+        v-else
+        :id="props.id"
+        :aria-sort="ariaSort"
+        :class="ui.header"
+        :colspan="props.colspan"
+        :scope="props.scope"
+    >
+        <div
+            :id="descriptionId"
+            :class="ui.sortDescription"
+        >
+            {{ description }}
+        </div>
+
+        <button
+            :aria-describedby="descriptionId"
+            :class="ui.sort"
+            type="button"
+            @click="emit('sort', $event)"
+        >
+            <span :class="ui.sortFlex">
+                <span :class="ui.headerLabel"><slot /></span>
+                <Icon
+                    :class="ui.sortIcon"
+                    :name="sortIcon"
+                />
+            </span>
+        </button>
+    </th>
+</template>

package/dist/runtime/app/components/TableHeader/TableHeader.vue.d.ts

@@ -0,0 +1,25 @@
+import type { TableHeaderProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<TableHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TableHeaderProps> & Readonly<{
+    onSort?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    id: string;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    isSortable: boolean;
+    colspan: number;
+    scope: string;
+    isSortHeader: boolean;
+    sortDirection: import("#vuno/components/DataTable/DataTable.types").DataTableSortDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};