v-uixy 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/components/Button/Button.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const buttonStyles = styles(
-  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none border border-transparent",
+  "relative cursor-pointer font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none border border-transparent",
   {
     variant: {
       primary:
@@ -14,9 +14,9 @@ export const buttonStyles = styles(
         "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
     },
     size: {
-      sm: "px-5 py-1 text-button-sm",
-      md: "px-6 py-1 text-button-md",
-      lg: "px-7 py-1 text-button-lg",
+      sm: "h-7 px-4 text-button-sm",
+      md: "h-8 px-6 text-button-md",
+      lg: "h-10 px-8 text-button-lg",
     },
     rounded: {
       true: "rounded-full",

package/templates/components/Checkbox/Checkbox.component.vue

@@ -2,14 +2,15 @@
   <label :class="checkboxStyles($attrs.class as string)">
     <div class="relative flex items-center justify-center">
       <input
+        ref="inputRef"
         type="checkbox"
         :disabled="props.disabled"
         v-model="checked"
-        class="size-4 cursor-pointer appearance-none rounded-1 border border-black transition-all duration-150 ease-in-out checked:bg-black hover:bg-gray-300 checked:hover:bg-gray-800 disabled:pointer-events-none disabled:border-gray-500 disabled:bg-gray-300 checked:disabled:bg-gray-500 dark:border-gray-100 dark:checked:bg-gray-100 dark:hover:bg-gray-800 dark:checked:hover:bg-gray-200 dark:disabled:border-gray-600 dark:disabled:bg-gray-900 dark:checked:disabled:bg-gray-600"
+        :class="inputStyles({ indeterminate: !!props.indeterminate })"
       />
       <animate-presence>
         <motion.div
-          v-if="checked"
+          v-if="checked || props.indeterminate"
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"
           :exit="{ opacity: 0 }"
@@ -17,11 +18,11 @@
           class="pointer-events-none absolute"
         >
           <uixy-icon
-            name="check"
+            :name="props.indeterminate ? 'minus' : 'check'"
             :class="
               iconStyles({
                 disabled: !!props.disabled,
-                checked: checked,
+                checked: checked || props.indeterminate,
               })
             "
           />
@@ -41,9 +42,22 @@
   import { motion, AnimatePresence } from "motion-v";
   import { UixyIcon } from "../Icon";
   import type { UixyCheckboxProps } from "./Checkbox.types";
-  import { checkboxStyles, iconStyles, labelStyles } from "./Checkbox.styles";
+  import {
+    checkboxStyles,
+    inputStyles,
+    iconStyles,
+    labelStyles,
+  } from "./Checkbox.styles";
 
   const props = defineProps<UixyCheckboxProps>();
 
   const checked = defineModel<boolean>("checked");
+
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  watchEffect(() => {
+    if (inputRef.value) {
+      inputRef.value.indeterminate = !!props.indeterminate;
+    }
+  });
 </script>

package/templates/components/Checkbox/Checkbox.styles.ts

@@ -2,6 +2,16 @@ import styles from "~/utils/styles";
 
 export const checkboxStyles = styles("flex items-center gap-2");
 
+export const inputStyles = styles(
+  "size-4 cursor-pointer appearance-none rounded-1 border border-black transition-all duration-150 ease-in-out checked:bg-black hover:bg-gray-300 checked:hover:bg-gray-800 disabled:pointer-events-none disabled:border-gray-500 disabled:bg-gray-300 checked:disabled:bg-gray-500 dark:border-gray-100 dark:checked:bg-gray-100 dark:hover:bg-gray-800 dark:checked:hover:bg-gray-200 dark:disabled:border-gray-600 dark:disabled:bg-gray-900 dark:checked:disabled:bg-gray-600",
+  {
+    indeterminate: {
+      true: "bg-black hover:bg-gray-800 disabled:bg-gray-300 dark:bg-gray-100 dark:hover:bg-gray-200 dark:disabled:bg-gray-900",
+      false: "",
+    },
+  },
+);
+
 export const iconStyles = styles("h-3 w-3", {
   disabled: {
     true: "text-gray-500",

package/templates/components/Checkbox/Checkbox.types.ts

@@ -1,3 +1,4 @@
 export interface UixyCheckboxProps {
   disabled?: boolean;
+  indeterminate?: boolean;
 }

package/templates/components/Popover/Popover.component.vue

@@ -17,7 +17,7 @@
             :exit="{ opacity: 0, scale: 0.8 }"
             :transition="{ duration: 0.15, ease: 'easeInOut' }"
           >
-            <slot />
+            <slot :close="handleLeave" />
           </motion.div>
         </div>
       </motion.div>

package/templates/components/Table/Table.component.vue

@@ -0,0 +1,507 @@
+<template>
+  <uixy-card :class="cardClass" v-bind="filteredAttrs">
+    <uixy-card class="w-full overflow-hidden p-0">
+      <div
+        :class="scrollAreaStyles({ scrollY: !!props.maxHeight })"
+        :style="props.maxHeight ? { maxHeight: props.maxHeight } : undefined"
+      >
+        <table :class="tableStyles()">
+          <caption v-if="props.caption" :class="captionStyles()">
+            {{
+              props.caption
+            }}
+          </caption>
+
+          <colgroup>
+            <col v-if="props.selectable" style="width: 44px" />
+            <col
+              v-for="column in props.columns"
+              :key="column.key"
+              :style="{ width: column.width, minWidth: column.minWidth }"
+            />
+          </colgroup>
+
+          <thead>
+            <tr>
+              <th
+                v-if="props.selectable"
+                :class="
+                  thStyles(
+                    {
+                      align: 'left',
+                      density: props.density,
+                      sticky: !!props.stickyHeader,
+                    },
+                    'w-11',
+                  )
+                "
+              >
+                <uixy-checkbox
+                  :checked="allSelected"
+                  :indeterminate="someSelected"
+                  :disabled="!props.rows.length"
+                  @update:checked="toggleSelectAll"
+                />
+              </th>
+              <th
+                v-for="column in props.columns"
+                :key="column.key"
+                scope="col"
+                :class="
+                  thStyles({
+                    align: column.align ?? 'left',
+                    density: props.density,
+                    sticky: !!props.stickyHeader,
+                  })
+                "
+              >
+                <span :class="thContentStyles()">
+                  <span
+                    :class="thLabelStyles({ align: column.align ?? 'left' })"
+                  >
+                    <span
+                      v-if="column.sortable"
+                      :class="sortButtonStyles()"
+                      @click="handleSort(column)"
+                    >
+                      {{ column.header }}
+                      <uixy-icon
+                        :name="sortIconName(column)"
+                        :class="sortIconStyles({ active: isSorted(column) })"
+                      />
+                    </span>
+                    <span v-else>{{ column.header }}</span>
+                  </span>
+                  <uixy-popover
+                    v-if="hasFilterSlot(column)"
+                    :group="filterGroupId"
+                  >
+                    <template #trigger="triggerProps">
+                      <button
+                        v-bind="triggerProps"
+                        type="button"
+                        :class="
+                          filterTriggerStyles({
+                            active: isFilterActive(column),
+                          })
+                        "
+                      >
+                        <uixy-icon name="sliders-2" class="h-3.5 w-3.5" />
+                      </button>
+                    </template>
+                    <template #default="{ close }">
+                      <uixy-card :class="filterPanelStyles()">
+                        <slot
+                          :name="`filter-${column.key}`"
+                          :column="column"
+                          :filter="filterFor(column)"
+                          :close="close"
+                        />
+                      </uixy-card>
+                    </template>
+                  </uixy-popover>
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <template v-if="props.loading">
+              <tr v-for="n in skeletonRowCount" :key="`skeleton-${n}`">
+                <td
+                  v-if="props.selectable"
+                  :class="
+                    tdStyles({
+                      align: 'left',
+                      density: props.density,
+                      last: n === skeletonRowCount,
+                    })
+                  "
+                >
+                  <uixy-skeleton class="h-4 w-4 rounded-1" />
+                </td>
+                <td
+                  v-for="column in props.columns"
+                  :key="column.key"
+                  :class="
+                    tdStyles({
+                      align: column.align ?? 'left',
+                      density: props.density,
+                      last: n === skeletonRowCount,
+                    })
+                  "
+                >
+                  <uixy-skeleton class="h-4 w-full max-w-32 rounded-1" />
+                </td>
+              </tr>
+            </template>
+
+            <template v-else-if="!props.rows.length">
+              <tr>
+                <td :colspan="totalColumnCount" class="p-0">
+                  <div :class="emptyStyles()">
+                    <slot name="empty">
+                      <span>{{ props.emptyText ?? "No data available." }}</span>
+                    </slot>
+                  </div>
+                </td>
+              </tr>
+            </template>
+
+            <template v-else>
+              <tr
+                v-for="(row, index) in props.rows"
+                :key="keyOf(row, index)"
+                :class="rowStyles({ selected: isSelected(row, index) })"
+              >
+                <td
+                  v-if="props.selectable"
+                  :class="
+                    tdStyles({
+                      align: 'left',
+                      density: props.density,
+                      last: index === props.rows.length - 1,
+                    })
+                  "
+                >
+                  <uixy-checkbox
+                    :checked="isSelected(row, index)"
+                    @update:checked="
+                      (checked) => toggleRow(row, index, checked)
+                    "
+                  />
+                </td>
+                <td
+                  v-for="column in props.columns"
+                  :key="column.key"
+                  :class="
+                    tdStyles({
+                      align: column.align ?? 'left',
+                      density: props.density,
+                      last: index === props.rows.length - 1,
+                    })
+                  "
+                >
+                  <slot
+                    :name="`cell-${column.key}`"
+                    :row="row"
+                    :value="cellValue(row, column)"
+                    :column="column"
+                    :index="index"
+                  >
+                    {{ cellValue(row, column) }}
+                  </slot>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+
+          <tfoot v-if="props.summary">
+            <tr>
+              <td
+                v-if="props.selectable"
+                :class="
+                  footerCellStyles({ align: 'left', density: props.density })
+                "
+              />
+              <td
+                v-for="column in props.columns"
+                :key="column.key"
+                :class="
+                  footerCellStyles({
+                    align: column.align ?? 'left',
+                    density: props.density,
+                  })
+                "
+              >
+                <slot
+                  :name="`summary-${column.key}`"
+                  :column="column"
+                  :value="props.summary?.[column.key]"
+                >
+                  {{ props.summary?.[column.key] ?? "" }}
+                </slot>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </uixy-card>
+
+    <div v-if="props.pagination" :class="paginationBarStyles()">
+      <slot
+        name="pagination"
+        :pagination="props.pagination"
+        :page-count="pageCount"
+        :go-to-page="goToPage"
+      >
+        <span :class="paginationInfoStyles()">{{ paginationRangeText }}</span>
+        <div :class="paginationControlsStyles()">
+          <button
+            type="button"
+            :class="paginationButtonStyles()"
+            :disabled="props.pagination.page <= 1"
+            @click="goToPage(props.pagination.page - 1)"
+          >
+            <uixy-icon name="chevron-left" class="h-4 w-4" />
+          </button>
+          <template v-for="(item, i) in paginationItems" :key="i">
+            <span
+              v-if="item === 'ellipsis'"
+              :class="paginationEllipsisStyles()"
+            >
+              …
+            </span>
+            <button
+              v-else
+              type="button"
+              :class="
+                paginationButtonStyles({
+                  active: item === props.pagination.page,
+                })
+              "
+              @click="goToPage(item)"
+            >
+              {{ item }}
+            </button>
+          </template>
+          <button
+            type="button"
+            :class="paginationButtonStyles()"
+            :disabled="props.pagination.page >= pageCount"
+            @click="goToPage(props.pagination.page + 1)"
+          >
+            <uixy-icon name="chevron-right" class="h-4 w-4" />
+          </button>
+        </div>
+      </slot>
+    </div>
+  </uixy-card>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="TRow extends Record<string, any> = Record<string, any>"
+>
+  import { UixyCard } from "../Card";
+  import { UixyCheckbox } from "../Checkbox";
+  import { UixyIcon } from "../Icon";
+  import { UixyPopover } from "../Popover";
+  import { UixySkeleton } from "../Skeleton";
+  import type {
+    UixyTableProps,
+    UixyTableEmits,
+    UixyTableSlots,
+    UixyTableColumn,
+    UixyTableSort,
+  } from "./Table.types";
+  import {
+    scrollAreaStyles,
+    tableStyles,
+    captionStyles,
+    thStyles,
+    thContentStyles,
+    thLabelStyles,
+    sortButtonStyles,
+    sortIconStyles,
+    filterTriggerStyles,
+    filterPanelStyles,
+    rowStyles,
+    tdStyles,
+    footerCellStyles,
+    emptyStyles,
+    paginationBarStyles,
+    paginationInfoStyles,
+    paginationControlsStyles,
+    paginationButtonStyles,
+    paginationEllipsisStyles,
+  } from "./Table.styles";
+
+  const props = withDefaults(defineProps<UixyTableProps<TRow>>(), {
+    rowKey: "id",
+    density: "comfortable",
+    sort: null,
+    selectedRowKeys: () => [],
+    loading: false,
+    selectable: false,
+    stickyHeader: false,
+  });
+
+  const emit = defineEmits<UixyTableEmits<TRow>>();
+
+  defineSlots<UixyTableSlots<TRow>>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+  const slots = useSlots();
+  const filterGroupId = useId();
+
+  const filteredAttrs = computed(() => {
+    const { class: _cls, ...rest } = attrs;
+    return rest;
+  });
+
+  const cardClass = computed(() =>
+    ["w-full p-1 bg-gray-100 dark:bg-black", attrs.class]
+      .filter(Boolean)
+      .join(" "),
+  );
+
+  const totalColumnCount = computed(
+    () => props.columns.length + (props.selectable ? 1 : 0),
+  );
+
+  function keyOf(row: TRow, index: number): string | number {
+    const rk = props.rowKey;
+    const value =
+      typeof rk === "function"
+        ? rk(row)
+        : (row as Record<string, unknown>)[(rk ?? "id") as string];
+    return (value as string | number | undefined) ?? index;
+  }
+
+  function cellValue(row: TRow, column: UixyTableColumn<TRow>): unknown {
+    if (column.accessor) return column.accessor(row);
+    return (row as Record<string, unknown>)[column.key];
+  }
+
+  function filterFor(column: UixyTableColumn<TRow>) {
+    return props.filters?.find((filter) => filter.key === column.key);
+  }
+
+  function hasFilterSlot(column: UixyTableColumn<TRow>) {
+    return !!slots[`filter-${column.key}`];
+  }
+
+  function isFilterActive(column: UixyTableColumn<TRow>) {
+    return !!filterFor(column)?.active;
+  }
+
+  function isSorted(column: UixyTableColumn<TRow>) {
+    return props.sort?.key === column.key;
+  }
+
+  function sortIconName(column: UixyTableColumn<TRow>) {
+    if (!isSorted(column)) return "chevrons-vertical" as const;
+    return props.sort?.direction === "asc"
+      ? ("chevron-up" as const)
+      : ("chevron-down" as const);
+  }
+
+  function handleSort(column: UixyTableColumn<TRow>) {
+    if (!column.sortable) return;
+
+    const current = props.sort;
+    let next: UixyTableSort<TRow> | null;
+
+    if (!current || current.key !== column.key) {
+      next = { key: column.key, direction: "asc" };
+    } else if (current.direction === "asc") {
+      next = { key: column.key, direction: "desc" };
+    } else {
+      next = null;
+    }
+
+    emit("sortChange", next);
+  }
+
+  const selectedKeySet = computed(() => new Set(props.selectedRowKeys ?? []));
+
+  function isSelected(row: TRow, index: number) {
+    return selectedKeySet.value.has(keyOf(row, index));
+  }
+
+  const allSelected = computed(
+    () =>
+      props.rows.length > 0 &&
+      props.rows.every((row, index) => isSelected(row, index)),
+  );
+
+  const someSelected = computed(
+    () =>
+      !allSelected.value &&
+      props.rows.some((row, index) => isSelected(row, index)),
+  );
+
+  function toggleRow(row: TRow, index: number, checked: boolean | undefined) {
+    const key = keyOf(row, index);
+    const next = new Set(selectedKeySet.value);
+
+    if (checked) next.add(key);
+    else next.delete(key);
+
+    emit("selectionChange", Array.from(next));
+  }
+
+  function toggleSelectAll(checked: boolean | undefined) {
+    const next = new Set(selectedKeySet.value);
+
+    props.rows.forEach((row, index) => {
+      const key = keyOf(row, index);
+      if (checked) next.add(key);
+      else next.delete(key);
+    });
+
+    emit("selectionChange", Array.from(next));
+  }
+
+  const skeletonRowCount = computed(() =>
+    Math.min(props.pagination?.pageSize ?? 8, 10),
+  );
+
+  const pageCount = computed(() => {
+    if (!props.pagination) return 1;
+    return Math.max(
+      1,
+      Math.ceil(props.pagination.total / props.pagination.pageSize),
+    );
+  });
+
+  const paginationRangeText = computed(() => {
+    if (!props.pagination) return "";
+
+    const { page, pageSize, total } = props.pagination;
+    if (total === 0) return "0 results";
+
+    const from = (page - 1) * pageSize + 1;
+    const to = Math.min(page * pageSize, total);
+
+    return `${from}–${to} of ${total}`;
+  });
+
+  function goToPage(page: number) {
+    if (!props.pagination) return;
+
+    const clamped = Math.min(Math.max(page, 1), pageCount.value);
+
+    if (clamped === props.pagination.page) return;
+
+    emit("pageChange", clamped);
+  }
+
+  type PaginationItem = number | "ellipsis";
+
+  const paginationItems = computed<PaginationItem[]>(() => {
+    const count = pageCount.value;
+    const current = props.pagination?.page ?? 1;
+    const siblings = 1;
+    const items: PaginationItem[] = [1];
+
+    const start = Math.max(2, current - siblings);
+    const end = Math.min(count - 1, current + siblings);
+
+    if (start > 2) items.push("ellipsis");
+
+    for (let i = start; i <= end; i++) items.push(i);
+
+    if (end < count - 1) items.push("ellipsis");
+
+    if (count > 1) items.push(count);
+
+    return items;
+  });
+</script>

package/templates/components/Table/Table.styles.ts

@@ -0,0 +1,140 @@
+import styles from "~/utils/styles";
+
+export const scrollAreaStyles = styles("scrollbar w-full overflow-x-auto", {
+  scrollY: {
+    true: "overflow-y-auto",
+    false: "",
+  },
+});
+
+export const tableStyles = styles(
+  "w-full caption-bottom border-separate border-spacing-0 text-xs",
+);
+
+export const captionStyles = styles(
+  "px-4 py-3 text-left text-xs text-gray-600 dark:text-gray-500",
+);
+
+export const thStyles = styles(
+  "whitespace-nowrap border-b border-gray-300 bg-white align-middle text-xs font-500 text-gray-600 dark:border-gray-900 dark:bg-gray-1000 dark:text-gray-500",
+  {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    density: {
+      compact: "h-9 px-3",
+      comfortable: "h-10 px-4",
+    },
+    sticky: {
+      true: "sticky top-0 z-10",
+      false: "",
+    },
+  },
+);
+
+export const thContentStyles = styles("flex w-full items-center gap-2");
+
+export const thLabelStyles = styles("flex min-w-0 flex-1 items-center gap-1", {
+  align: {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+  },
+});
+
+export const sortButtonStyles = styles(
+  "inline-flex cursor-pointer select-none items-center gap-1 transition-colors hover:text-black dark:hover:text-white",
+);
+
+export const sortIconStyles = styles(
+  "h-3.5 w-3.5 shrink-0 text-gray-500 dark:text-gray-600",
+  {
+    active: {
+      true: "text-black dark:text-white",
+      false: "",
+    },
+  },
+);
+
+export const filterTriggerStyles = styles(
+  "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-800",
+  {
+    active: {
+      true: "text-black dark:text-white",
+      false: "text-gray-500 dark:text-gray-600",
+    },
+  },
+);
+
+export const filterPanelStyles = styles("flex w-56 flex-col gap-2 p-2");
+
+export const rowStyles = styles("transition-colors", {
+  selected: {
+    true: "bg-gray-100 dark:bg-gray-900",
+    false: "hover:bg-gray-100 dark:hover:bg-gray-900",
+  },
+});
+
+export const tdStyles = styles(
+  "border-b border-gray-300 align-middle text-gray-900 dark:border-gray-900 dark:text-gray-100",
+  {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    density: {
+      compact: "px-3 py-2",
+      comfortable: "px-4 py-3",
+    },
+    last: {
+      true: "border-b-0",
+      false: "",
+    },
+  },
+);
+
+export const footerCellStyles = styles(
+  "border-t border-gray-300 bg-gray-100 align-middle font-500 text-gray-800 dark:border-gray-900 dark:bg-gray-900 dark:text-gray-300",
+  {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    density: {
+      compact: "px-3 py-2",
+      comfortable: "px-4 py-3",
+    },
+  },
+);
+
+export const emptyStyles = styles(
+  "flex flex-col items-center justify-center gap-2 py-16 text-xs text-gray-500 dark:text-gray-500",
+);
+
+export const paginationBarStyles = styles(
+  "flex flex-wrap items-center justify-between gap-3 px-2 pt-1 pb-0 text-xs",
+);
+
+export const paginationInfoStyles = styles(
+  "text-xs text-gray-600 dark:text-gray-500",
+);
+
+export const paginationControlsStyles = styles("flex items-center gap-1");
+
+export const paginationButtonStyles = styles(
+  "flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-1 px-1.5 text-xs transition-colors hover:bg-gray-200 disabled:pointer-events-none disabled:cursor-default disabled:text-gray-400 dark:hover:bg-gray-800 dark:disabled:text-gray-700",
+  {
+    active: {
+      true: "bg-gray-800 text-gray-100 hover:bg-gray-700 dark:bg-gray-300 dark:text-black dark:hover:bg-gray-200",
+      false: "text-gray-800 dark:text-gray-300",
+    },
+  },
+);
+
+export const paginationEllipsisStyles = styles(
+  "flex h-6 min-w-6 items-center justify-center text-gray-500 dark:text-gray-600",
+);

package/templates/components/Table/Table.types.ts

@@ -0,0 +1,98 @@
+export type UixyTableAlign = "left" | "center" | "right";
+export type UixyTableDensity = "compact" | "comfortable";
+export type UixyTableSortDirection = "asc" | "desc";
+
+export type UixyTableColumnKey<TRow> =
+  | Extract<keyof TRow, string>
+  | (string & {});
+
+export interface UixyTableColumn<TRow = Record<string, unknown>> {
+  key: UixyTableColumnKey<TRow>;
+  header: string;
+  accessor?: (row: TRow) => unknown;
+  sortable?: boolean;
+  align?: UixyTableAlign;
+  width?: string;
+  minWidth?: string;
+}
+
+export interface UixyTableSort<TRow = Record<string, unknown>> {
+  key: UixyTableColumnKey<TRow>;
+  direction: UixyTableSortDirection;
+}
+
+export interface UixyTablePagination {
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface UixyTableFilter {
+  key: string;
+  type: string;
+  label?: string;
+  active?: boolean;
+  [key: string]: unknown;
+}
+
+export type UixyTableRowKey<TRow> =
+  | UixyTableColumnKey<TRow>
+  | ((row: TRow) => string | number);
+
+export interface UixyTableProps<TRow = Record<string, unknown>> {
+  columns: UixyTableColumn<TRow>[];
+  rows: TRow[];
+  rowKey?: UixyTableRowKey<TRow>;
+  sort?: UixyTableSort<TRow> | null;
+  pagination?: UixyTablePagination;
+  filters?: UixyTableFilter[];
+  selectable?: boolean;
+  selectedRowKeys?: Array<string | number>;
+  summary?: Partial<Record<UixyTableColumnKey<TRow>, unknown>>;
+  loading?: boolean;
+  density?: UixyTableDensity;
+  stickyHeader?: boolean;
+  maxHeight?: string;
+  caption?: string;
+  emptyText?: string;
+}
+
+export interface UixyTableEmits<TRow = Record<string, unknown>> {
+  (event: "sortChange", sort: UixyTableSort<TRow> | null): void;
+  (event: "pageChange", page: number): void;
+  (event: "selectionChange", keys: Array<string | number>): void;
+}
+
+export interface UixyTableCellSlotProps<TRow = Record<string, unknown>> {
+  row: TRow;
+  value: unknown;
+  column: UixyTableColumn<TRow>;
+  index: number;
+}
+
+export interface UixyTableSummarySlotProps<TRow = Record<string, unknown>> {
+  column: UixyTableColumn<TRow>;
+  value: unknown;
+}
+
+export interface UixyTableFilterSlotProps<TRow = Record<string, unknown>> {
+  column: UixyTableColumn<TRow>;
+  filter?: UixyTableFilter;
+  close: () => void;
+}
+
+export interface UixyTablePaginationSlotProps {
+  pagination: UixyTablePagination;
+  pageCount: number;
+  goToPage: (page: number) => void;
+}
+
+export interface UixyTableSlots<TRow = Record<string, unknown>> {
+  empty?: (props: Record<string, never>) => unknown;
+  pagination?: (props: UixyTablePaginationSlotProps) => unknown;
+  [key: `cell-${string}`]: (props: UixyTableCellSlotProps<TRow>) => unknown;
+  [key: `summary-${string}`]: (
+    props: UixyTableSummarySlotProps<TRow>,
+  ) => unknown;
+  [key: `filter-${string}`]: (props: UixyTableFilterSlotProps<TRow>) => unknown;
+}

package/templates/components/Table/index.ts

@@ -0,0 +1,39 @@
+import UixyTable from "./Table.component.vue";
+import {
+  type UixyTableProps,
+  type UixyTableEmits,
+  type UixyTableSlots,
+  type UixyTableColumn,
+  type UixyTableColumnKey,
+  type UixyTableSort,
+  type UixyTableSortDirection,
+  type UixyTablePagination,
+  type UixyTableFilter,
+  type UixyTableRowKey,
+  type UixyTableAlign,
+  type UixyTableDensity,
+  type UixyTableCellSlotProps,
+  type UixyTableSummarySlotProps,
+  type UixyTableFilterSlotProps,
+  type UixyTablePaginationSlotProps,
+} from "./Table.types";
+
+export {
+  UixyTable,
+  type UixyTableProps,
+  type UixyTableEmits,
+  type UixyTableSlots,
+  type UixyTableColumn,
+  type UixyTableColumnKey,
+  type UixyTableSort,
+  type UixyTableSortDirection,
+  type UixyTablePagination,
+  type UixyTableFilter,
+  type UixyTableRowKey,
+  type UixyTableAlign,
+  type UixyTableDensity,
+  type UixyTableCellSlotProps,
+  type UixyTableSummarySlotProps,
+  type UixyTableFilterSlotProps,
+  type UixyTablePaginationSlotProps,
+};

package/templates/components.json

@@ -198,6 +198,12 @@
       "packages": ["motion-v"],
       "composables": []
     },
+    {
+      "name": "Table",
+      "related-components": ["Card", "Checkbox", "Icon", "Skeleton", "Popover"],
+      "packages": [],
+      "composables": []
+    },
     {
       "name": "TableOfContents",
       "related-components": [],

package/templates/composables/usePosition.ts

@@ -6,6 +6,8 @@ interface UsePositionOptions {
   direction?: Direction;
 }
 
+const GAP = 6;
+
 function hasFixedParent(el: HTMLElement | null): boolean {
   while (el) {
     const style = window.getComputedStyle(el);
@@ -46,8 +48,8 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
 
     const spaceBelow = winH - targetRect.bottom;
     const spaceAbove = targetRect.top;
-    const fitsBelow = spaceBelow >= tooltipRect.height + 6;
-    const fitsAbove = spaceAbove >= tooltipRect.height + 6;
+    const fitsBelow = spaceBelow >= tooltipRect.height + GAP;
+    const fitsAbove = spaceAbove >= tooltipRect.height + GAP;
 
     const effectiveDirection =
       direction === "top"
@@ -60,8 +62,8 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
 
     top =
       effectiveDirection === "top"
-        ? targetRect.top - tooltipRect.height - 6 + scrollY
-        : targetRect.bottom + 6 + scrollY;
+        ? targetRect.top - tooltipRect.height - GAP + scrollY
+        : targetRect.bottom + GAP + scrollY;
 
     let left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
     const newStyles: Record<string, string | number> = {