@soave/nuxt-ui 0.1.0

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,25 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface SoaveNuxtModuleOptions {
+    prefix?: string;
+    global?: boolean;
+    i18n?: {
+        enabled?: boolean;
+        default_locale?: string;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<SoaveNuxtModuleOptions, SoaveNuxtModuleOptions, false>;
+
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        soaveUI: {
+            i18n: {
+                enabled: boolean;
+                default_locale: string;
+            };
+        };
+    }
+}
+
+export { _default as default };
+export type { SoaveNuxtModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,25 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface SoaveNuxtModuleOptions {
+    prefix?: string;
+    global?: boolean;
+    i18n?: {
+        enabled?: boolean;
+        default_locale?: string;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<SoaveNuxtModuleOptions, SoaveNuxtModuleOptions, false>;
+
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        soaveUI: {
+            i18n: {
+                enabled: boolean;
+                default_locale: string;
+            };
+        };
+    }
+}
+
+export { _default as default };
+export type { SoaveNuxtModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@soave/nuxt-ui",
+  "configKey": "soaveUI",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,52 @@
+import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addPlugin } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@soave/nuxt-ui",
+    configKey: "soaveUI",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {
+    prefix: "",
+    global: true,
+    i18n: {
+      enabled: false,
+      default_locale: "en"
+    }
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.build.transpile.push("@soave/ui");
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    await addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix,
+      global: options.global
+    });
+    await addComponentsDir({
+      path: resolver.resolve("../../core/components/ui"),
+      prefix: options.prefix,
+      global: options.global
+    });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/ui-provider.client"),
+      mode: "client"
+    });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/ui-provider.server"),
+      mode: "server"
+    });
+    nuxt.options.runtimeConfig.public.soaveUI = {
+      i18n: options.i18n
+    };
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({
+        path: resolver.resolve("./types.d.ts")
+      });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/Breadcrumbs.vue

@@ -0,0 +1,78 @@
+<template>
+    <nav :aria-label="aria_label" :class="cn(base_classes, props.class)">
+        <ol class="flex items-center gap-2">
+            <li
+                v-for="(item, index) in items"
+                :key="index"
+                class="flex items-center gap-2"
+            >
+                <component
+                    :is="item.href && !item.current ? 'a' : 'span'"
+                    :href="item.href"
+                    :class="item_classes(item)"
+                    :aria-current="item.current ? 'page' : undefined"
+                    :aria-disabled="item.disabled ? 'true' : undefined"
+                >
+                    <slot name="icon" :item="item" :index="index">
+                        <component
+                            v-if="item.icon"
+                            :is="item.icon"
+                            class="h-4 w-4"
+                        />
+                    </slot>
+                    <slot name="item" :item="item" :index="index">
+                        {{ item.label }}
+                    </slot>
+                </component>
+
+                <slot v-if="index < items.length - 1" name="separator">
+                    <span
+                        :class="separator_classes"
+                        aria-hidden="true"
+                    >
+                        {{ separator }}
+                    </span>
+                </slot>
+            </li>
+        </ol>
+    </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "@soave/ui"
+import type { BreadcrumbItem } from "../../types"
+
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[]
+    separator?: string
+    aria_label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbsProps>(), {
+    separator: "/",
+    aria_label: "Breadcrumb"
+})
+
+const base_classes = "flex"
+
+const separator_classes = computed(() =>
+    cn("text-muted-foreground select-none")
+)
+
+const item_classes = (item: BreadcrumbItem): string => {
+    const base = "text-sm transition-colors"
+    const current_state = item.current
+        ? "text-foreground font-medium pointer-events-none"
+        : "text-muted-foreground hover:text-foreground"
+    const disabled_state = item.disabled && !item.current
+        ? "opacity-50 pointer-events-none"
+        : ""
+    const link_state = item.href && !item.current
+        ? "hover:underline underline-offset-4"
+        : ""
+
+    return cn(base, current_state, disabled_state, link_state)
+}
+</script>

package/dist/runtime/components/DataTable.vue

@@ -0,0 +1,334 @@
+<template>
+    <div :class="cn('space-y-4', props.class)">
+        <!-- Header slot for search, filters, etc. -->
+        <slot name="header" />
+
+        <!-- Table -->
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <!-- Selection checkbox column -->
+                    <TableHead v-if="selectable" class="w-12">
+                        <input
+                            type="checkbox"
+                            :checked="is_all_selected"
+                            :indeterminate="is_some_selected && !is_all_selected"
+                            class="h-4 w-4 rounded border-gray-300"
+                            aria-label="Select all rows"
+                            @change="toggleSelectAll"
+                        />
+                    </TableHead>
+
+                    <!-- Column headers -->
+                    <TableHead
+                        v-for="column in columns"
+                        :key="String(column.key)"
+                        :sortable="sortable && column.sortable !== false"
+                        :sort_direction="getSortDirection(column.key)"
+                        :class="column.width ? `w-[${column.width}]` : ''"
+                        :style="{ textAlign: column.align || 'left' }"
+                        @sort="handleSort(column.key)"
+                    >
+                        <slot :name="`header-${String(column.key)}`" :column="column">
+                            {{ column.label }}
+                        </slot>
+                    </TableHead>
+
+                    <!-- Actions column -->
+                    <TableHead v-if="$slots.actions" class="w-12">
+                        <span class="sr-only">Actions</span>
+                    </TableHead>
+                </TableRow>
+            </TableHeader>
+
+            <TableBody>
+                <!-- Empty state -->
+                <TableRow v-if="paginated_data.length === 0">
+                    <TableCell
+                        :colspan="column_count"
+                        class="h-24 text-center"
+                    >
+                        <slot name="empty">
+                            No results found.
+                        </slot>
+                    </TableCell>
+                </TableRow>
+
+                <!-- Data rows -->
+                <TableRow
+                    v-for="(row, row_index) in paginated_data"
+                    :key="getRowKey(row, row_index)"
+                    :selected="isRowSelected(row)"
+                >
+                    <!-- Selection checkbox -->
+                    <TableCell v-if="selectable">
+                        <input
+                            type="checkbox"
+                            :checked="isRowSelected(row)"
+                            class="h-4 w-4 rounded border-gray-300"
+                            :aria-label="`Select row ${row_index + 1}`"
+                            @change="toggleRowSelection(row)"
+                        />
+                    </TableCell>
+
+                    <!-- Data cells -->
+                    <TableCell
+                        v-for="column in columns"
+                        :key="String(column.key)"
+                        :style="{ textAlign: column.align || 'left' }"
+                    >
+                        <slot
+                            :name="`cell-${String(column.key)}`"
+                            :row="row"
+                            :value="getCellValue(row, column)"
+                            :column="column"
+                            :index="row_index"
+                        >
+                            {{ getCellValue(row, column) }}
+                        </slot>
+                    </TableCell>
+
+                    <!-- Actions cell -->
+                    <TableCell v-if="$slots.actions">
+                        <slot name="actions" :row="row" :index="row_index" />
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+
+        <!-- Pagination -->
+        <div v-if="pagination && pagination_state.total_pages > 1" class="flex items-center justify-between">
+            <div class="text-sm text-muted-foreground">
+                <slot name="pagination-info" :state="pagination_state">
+                    Showing {{ start_item }} to {{ end_item }} of {{ pagination_state.total_items }} results
+                </slot>
+            </div>
+            <Pagination
+                :state="pagination_state"
+                :pages="pagination_pages"
+                @page="handlePageChange"
+                @previous="handlePreviousPage"
+                @next="handleNextPage"
+                @first="handleFirstPage"
+                @last="handleLastPage"
+            />
+        </div>
+
+        <!-- Footer slot -->
+        <slot name="footer" />
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed, ref, watch } from "vue"
+import { cn } from "@soave/ui"
+import { usePagination } from "../composables/usePagination"
+import type { TableColumn, TableSortState } from "../../types"
+import Table from "./Table.vue"
+import TableHeader from "./TableHeader.vue"
+import TableBody from "./TableBody.vue"
+import TableRow from "./TableRow.vue"
+import TableHead from "./TableHead.vue"
+import TableCell from "./TableCell.vue"
+import Pagination from "./Pagination.vue"
+
+export interface DataTableProps<T> {
+    columns: TableColumn<T>[]
+    data: T[]
+    row_key?: keyof T | ((row: T) => string | number)
+    sortable?: boolean
+    selectable?: boolean
+    pagination?: boolean
+    per_page?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<DataTableProps<T>>(), {
+    sortable: false,
+    selectable: false,
+    pagination: false,
+    per_page: 10
+})
+
+const emit = defineEmits<{
+    sort: [state: TableSortState]
+    select: [rows: T[]]
+    "page-change": [page: number]
+}>()
+
+// Sort state
+const sort_state = ref<TableSortState | null>(null)
+
+// Selected rows
+const selected_rows = ref<Set<T>>(new Set())
+
+// Pagination
+const {
+    state: pagination_state,
+    pages: pagination_pages,
+    setPage,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage,
+    setTotalItems
+} = usePagination({
+    per_page: props.per_page
+})
+
+// Watch data changes to update total items
+watch(
+    () => props.data,
+    (new_data) => {
+        setTotalItems(new_data.length)
+    },
+    { immediate: true }
+)
+
+// Computed
+const sorted_data = computed<T[]>(() => {
+    if (!sort_state.value || !props.sortable) {
+        return props.data
+    }
+
+    const { column, direction } = sort_state.value
+    const sorted = [...props.data].sort((a, b) => {
+        const a_value = a[column as keyof T]
+        const b_value = b[column as keyof T]
+
+        if (a_value === b_value) return 0
+        if (a_value === null || a_value === undefined) return 1
+        if (b_value === null || b_value === undefined) return -1
+
+        const comparison = a_value < b_value ? -1 : 1
+        return direction === "asc" ? comparison : -comparison
+    })
+
+    return sorted
+})
+
+const paginated_data = computed<T[]>(() => {
+    if (!props.pagination) {
+        return sorted_data.value
+    }
+
+    const start = (pagination_state.value.current_page - 1) * pagination_state.value.per_page
+    const end = start + pagination_state.value.per_page
+    return sorted_data.value.slice(start, end)
+})
+
+const column_count = computed(() => {
+    let count = props.columns.length
+    if (props.selectable) count++
+    return count
+})
+
+const is_all_selected = computed(() => {
+    return props.data.length > 0 && selected_rows.value.size === props.data.length
+})
+
+const is_some_selected = computed(() => {
+    return selected_rows.value.size > 0
+})
+
+const start_item = computed(() => {
+    return (pagination_state.value.current_page - 1) * pagination_state.value.per_page + 1
+})
+
+const end_item = computed(() => {
+    return Math.min(
+        pagination_state.value.current_page * pagination_state.value.per_page,
+        pagination_state.value.total_items
+    )
+})
+
+// Methods
+const getRowKey = (row: T, index: number): string | number => {
+    if (!props.row_key) {
+        return index
+    }
+    if (typeof props.row_key === "function") {
+        return props.row_key(row)
+    }
+    return String(row[props.row_key])
+}
+
+const getCellValue = (row: T, column: TableColumn<T>): unknown => {
+    const value = row[column.key as keyof T]
+    if (column.render) {
+        return column.render(value, row)
+    }
+    return value
+}
+
+const getSortDirection = (column_key: keyof T | string): "asc" | "desc" | null => {
+    if (!sort_state.value || sort_state.value.column !== column_key) {
+        return null
+    }
+    return sort_state.value.direction
+}
+
+const handleSort = (column_key: keyof T | string): void => {
+    if (!props.sortable) return
+
+    let direction: "asc" | "desc" = "asc"
+
+    if (sort_state.value && sort_state.value.column === column_key) {
+        direction = sort_state.value.direction === "asc" ? "desc" : "asc"
+    }
+
+    sort_state.value = {
+        column: String(column_key),
+        direction
+    }
+
+    emit("sort", sort_state.value)
+}
+
+const isRowSelected = (row: T): boolean => {
+    return selected_rows.value.has(row)
+}
+
+const toggleRowSelection = (row: T): void => {
+    if (selected_rows.value.has(row)) {
+        selected_rows.value.delete(row)
+    } else {
+        selected_rows.value.add(row)
+    }
+    emit("select", Array.from(selected_rows.value))
+}
+
+const toggleSelectAll = (): void => {
+    if (is_all_selected.value) {
+        selected_rows.value.clear()
+    } else {
+        selected_rows.value = new Set(props.data)
+    }
+    emit("select", Array.from(selected_rows.value))
+}
+
+const handlePageChange = (page: number): void => {
+    setPage(page)
+    emit("page-change", page)
+}
+
+const handlePreviousPage = (): void => {
+    previousPage()
+    emit("page-change", pagination_state.value.current_page)
+}
+
+const handleNextPage = (): void => {
+    nextPage()
+    emit("page-change", pagination_state.value.current_page)
+}
+
+const handleFirstPage = (): void => {
+    firstPage()
+    emit("page-change", pagination_state.value.current_page)
+}
+
+const handleLastPage = (): void => {
+    lastPage()
+    emit("page-change", pagination_state.value.current_page)
+}
+</script>

package/dist/runtime/components/Pagination.vue

@@ -0,0 +1,154 @@
+<template>
+    <nav
+        :aria-label="aria_label"
+        :class="cn('flex items-center justify-center gap-1', props.class)"
+        role="navigation"
+    >
+        <!-- First Page Button -->
+        <button
+            v-if="show_first_last"
+            type="button"
+            :class="button_classes"
+            :disabled="!state.has_previous"
+            :aria-label="first_label"
+            @click="emit('first')"
+        >
+            <slot name="first-icon">
+                <span aria-hidden="true">&laquo;</span>
+            </slot>
+        </button>
+
+        <!-- Previous Page Button -->
+        <button
+            type="button"
+            :class="button_classes"
+            :disabled="!state.has_previous"
+            :aria-label="previous_label"
+            @click="emit('previous')"
+        >
+            <slot name="previous-icon">
+                <span aria-hidden="true">&lsaquo;</span>
+            </slot>
+        </button>
+
+        <!-- Page Numbers -->
+        <template v-for="(page, index) in pages" :key="index">
+            <span
+                v-if="page === 'ellipsis'"
+                :class="ellipsis_classes"
+                aria-hidden="true"
+            >
+                <slot name="ellipsis">&hellip;</slot>
+            </span>
+            <button
+                v-else
+                type="button"
+                :class="page_button_classes(page)"
+                :aria-label="`${page_label} ${page}`"
+                :aria-current="page === state.current_page ? 'page' : undefined"
+                @click="emit('page', page)"
+            >
+                {{ page }}
+            </button>
+        </template>
+
+        <!-- Next Page Button -->
+        <button
+            type="button"
+            :class="button_classes"
+            :disabled="!state.has_next"
+            :aria-label="next_label"
+            @click="emit('next')"
+        >
+            <slot name="next-icon">
+                <span aria-hidden="true">&rsaquo;</span>
+            </slot>
+        </button>
+
+        <!-- Last Page Button -->
+        <button
+            v-if="show_first_last"
+            type="button"
+            :class="button_classes"
+            :disabled="!state.has_next"
+            :aria-label="last_label"
+            @click="emit('last')"
+        >
+            <slot name="last-icon">
+                <span aria-hidden="true">&raquo;</span>
+            </slot>
+        </button>
+    </nav>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+import type { PaginationState } from "../../types"
+
+export interface PaginationProps {
+    state: PaginationState
+    pages: (number | "ellipsis")[]
+    size?: "sm" | "md" | "lg"
+    show_first_last?: boolean
+    aria_label?: string
+    previous_label?: string
+    next_label?: string
+    first_label?: string
+    last_label?: string
+    page_label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+    size: "md",
+    show_first_last: true,
+    aria_label: "Pagination",
+    previous_label: "Go to previous page",
+    next_label: "Go to next page",
+    first_label: "Go to first page",
+    last_label: "Go to last page",
+    page_label: "Go to page"
+})
+
+const emit = defineEmits<{
+    page: [page: number]
+    previous: []
+    next: []
+    first: []
+    last: []
+}>()
+
+const size_classes = {
+    sm: "h-8 min-w-8 text-xs",
+    md: "h-9 min-w-9 text-sm",
+    lg: "h-10 min-w-10 text-base"
+}
+
+const button_classes = cn(
+    "inline-flex items-center justify-center rounded-md font-medium",
+    "transition-colors focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2",
+    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+    size_classes[props.size]
+)
+
+const ellipsis_classes = cn(
+    "flex items-center justify-center",
+    "text-muted-foreground",
+    size_classes[props.size]
+)
+
+const page_button_classes = (page: number): string => {
+    const is_current = page === props.state.current_page
+    return cn(
+        "inline-flex items-center justify-center rounded-md font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-ring focus-visible:ring-offset-2",
+        size_classes[props.size],
+        is_current
+            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+            : "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    )
+}
+</script>