@soave/nuxt-ui 0.1.0

package/dist/runtime/components/Table.vue

@@ -0,0 +1,18 @@
+<template>
+    <div :class="cn('relative w-full overflow-auto', wrapper_class)">
+        <table :class="cn('w-full caption-bottom text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableProps {
+    class?: string
+    wrapper_class?: string
+}
+
+const props = defineProps<TableProps>()
+</script>

package/dist/runtime/components/TableBody.vue

@@ -0,0 +1,15 @@
+<template>
+    <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableBodyProps {
+    class?: string
+}
+
+const props = defineProps<TableBodyProps>()
+</script>

package/dist/runtime/components/TableCell.vue

@@ -0,0 +1,20 @@
+<template>
+    <td
+        :class="cn(
+            'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+            props.class
+        )"
+    >
+        <slot />
+    </td>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableCellProps {
+    class?: string
+}
+
+const props = defineProps<TableCellProps>()
+</script>

package/dist/runtime/components/TableHead.vue

@@ -0,0 +1,44 @@
+<template>
+    <th
+        :class="cn(
+            'h-10 px-4 text-left align-middle font-medium text-muted-foreground',
+            '[&:has([role=checkbox])]:pr-0',
+            sortable && 'cursor-pointer select-none hover:text-foreground',
+            props.class
+        )"
+        :aria-sort="sort_direction ? (sort_direction === 'asc' ? 'ascending' : 'descending') : undefined"
+        @click="handleClick"
+    >
+        <div class="flex items-center gap-2">
+            <slot />
+            <span v-if="sortable && sort_direction" aria-hidden="true">
+                {{ sort_direction === "asc" ? "↑" : "↓" }}
+            </span>
+        </div>
+    </th>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableHeadProps {
+    sortable?: boolean
+    sort_direction?: "asc" | "desc" | null
+    class?: string
+}
+
+const props = withDefaults(defineProps<TableHeadProps>(), {
+    sortable: false,
+    sort_direction: null
+})
+
+const emit = defineEmits<{
+    sort: []
+}>()
+
+const handleClick = (): void => {
+    if (props.sortable) {
+        emit("sort")
+    }
+}
+</script>

package/dist/runtime/components/TableHeader.vue

@@ -0,0 +1,15 @@
+<template>
+    <thead :class="cn('[&_tr]:border-b', props.class)">
+        <slot />
+    </thead>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableHeaderProps {
+    class?: string
+}
+
+const props = defineProps<TableHeaderProps>()
+</script>

package/dist/runtime/components/TableRow.vue

@@ -0,0 +1,25 @@
+<template>
+    <tr
+        :class="cn(
+            'border-b transition-colors hover:bg-muted/50',
+            selected && 'bg-muted',
+            props.class
+        )"
+        :data-state="selected ? 'selected' : undefined"
+    >
+        <slot />
+    </tr>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@soave/ui"
+
+export interface TableRowProps {
+    selected?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<TableRowProps>(), {
+    selected: false
+})
+</script>

package/dist/runtime/components/index.js

@@ -0,0 +1,9 @@
+export { default as Breadcrumbs } from "./Breadcrumbs.vue";
+export { default as Pagination } from "./Pagination.vue";
+export { default as Table } from "./Table.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableRow } from "./TableRow.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableCell } from "./TableCell.vue";
+export { default as DataTable } from "./DataTable.vue";

package/dist/runtime/composables/index.js

@@ -0,0 +1,20 @@
+export {
+  defineRoute,
+  useTypedParams,
+  useTypedQuery,
+  useParam,
+  useQueryParam
+} from "./useTypedRoute.js";
+export {
+  useBreadcrumbs
+} from "./useBreadcrumbs.js";
+export {
+  useSoaveSeoMeta,
+  useStructuredData
+} from "./useSoaveSeoMeta.js";
+export { usePagination } from "./usePagination.js";
+export {
+  useI18nUI,
+  createUITranslations,
+  getDefaultTranslations
+} from "./useI18nUI.js";

package/dist/runtime/composables/useBreadcrumbs.js

@@ -0,0 +1,75 @@
+import { useRoute } from "#app";
+import { computed, ref } from "vue";
+const default_label_transformer = (segment) => {
+  return segment.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+};
+export function useBreadcrumbs(options = {}) {
+  const route = useRoute();
+  const {
+    home_label = "Home",
+    home_href = "/",
+    home_icon,
+    include_home = true,
+    label_transformer = default_label_transformer,
+    custom_labels = {}
+  } = options;
+  const manual_items = ref(null);
+  const auto_breadcrumbs = computed(() => {
+    const path_segments = route.path.split("/").filter(Boolean);
+    const items = [];
+    if (include_home) {
+      items.push({
+        label: home_label,
+        href: home_href,
+        icon: home_icon,
+        current: path_segments.length === 0
+      });
+    }
+    let accumulated_path = "";
+    path_segments.forEach((segment, index) => {
+      if (segment.startsWith("[") && segment.endsWith("]")) {
+        const param_name = segment.slice(1, -1);
+        const param_value = route.params[param_name];
+        if (param_value) {
+          segment = String(param_value);
+        }
+      }
+      accumulated_path += `/${segment}`;
+      const is_last = index === path_segments.length - 1;
+      const label = custom_labels[segment] || custom_labels[accumulated_path] || label_transformer(segment);
+      items.push({
+        label,
+        href: is_last ? void 0 : accumulated_path,
+        current: is_last,
+        disabled: is_last
+      });
+    });
+    return items;
+  });
+  const breadcrumbs = computed(() => {
+    return manual_items.value ?? auto_breadcrumbs.value;
+  });
+  const current = computed(() => {
+    return breadcrumbs.value.find((item) => item.current);
+  });
+  const set = (items) => {
+    manual_items.value = items;
+  };
+  const append = (item) => {
+    if (manual_items.value) {
+      manual_items.value = [...manual_items.value, item];
+    } else {
+      manual_items.value = [...auto_breadcrumbs.value, item];
+    }
+  };
+  const reset = () => {
+    manual_items.value = null;
+  };
+  return {
+    breadcrumbs,
+    current,
+    set,
+    append,
+    reset
+  };
+}

package/dist/runtime/composables/useI18nUI.js

@@ -0,0 +1,105 @@
+import { computed, toValue } from "vue";
+const DEFAULT_TRANSLATIONS = {
+  pagination: {
+    previous: "Previous",
+    next: "Next",
+    first: "First",
+    last: "Last",
+    page: "Page",
+    showing: "Showing",
+    of: "of",
+    results: "results"
+  },
+  data_table: {
+    no_results: "No results found.",
+    select_all: "Select all",
+    select_row: "Select row",
+    actions: "Actions",
+    loading: "Loading...",
+    sort_ascending: "Sort ascending",
+    sort_descending: "Sort descending"
+  },
+  breadcrumbs: {
+    home: "Home",
+    navigation: "Breadcrumb"
+  },
+  common: {
+    loading: "Loading...",
+    error: "An error occurred",
+    empty: "No data available",
+    cancel: "Cancel",
+    confirm: "Confirm",
+    save: "Save",
+    delete: "Delete",
+    edit: "Edit",
+    create: "Create",
+    search: "Search",
+    filter: "Filter",
+    clear: "Clear",
+    close: "Close",
+    open: "Open",
+    submit: "Submit",
+    reset: "Reset"
+  }
+};
+let nuxt_i18n_available = false;
+let use_i18n_function = null;
+try {
+  const i18n_module = import.meta.glob("/node_modules/@nuxtjs/i18n/**/*.js", { eager: false });
+  nuxt_i18n_available = Object.keys(i18n_module).length > 0;
+} catch {
+  nuxt_i18n_available = false;
+}
+export function useI18nUI(options = {}) {
+  const { translations: custom_translations = {}, use_nuxt_i18n = nuxt_i18n_available } = options;
+  const merged_translations = mergeDeep(DEFAULT_TRANSLATIONS, custom_translations);
+  const t = (namespace, key) => {
+    return computed(() => {
+      if (use_nuxt_i18n && use_i18n_function) {
+        const i18n = use_i18n_function();
+        const i18n_key = `soave_ui.${namespace}.${String(key)}`;
+        const translated = i18n.t(i18n_key);
+        if (translated !== i18n_key) {
+          return translated;
+        }
+      }
+      const namespace_translations = merged_translations[namespace];
+      if (namespace_translations && key in namespace_translations) {
+        return namespace_translations[key];
+      }
+      return String(key);
+    });
+  };
+  return {
+    t,
+    translations: merged_translations
+  };
+}
+export function createUITranslations(translations) {
+  const resolved = toValue(translations);
+  return mergeDeep(DEFAULT_TRANSLATIONS, resolved);
+}
+export function getDefaultTranslations() {
+  return { ...DEFAULT_TRANSLATIONS };
+}
+function mergeDeep(target, source) {
+  const output = { ...target };
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const source_value = source[key];
+      const target_value = output[key];
+      if (isObject(source_value) && isObject(target_value)) {
+        output[key] = mergeDeep(
+          target_value,
+          source_value
+        );
+      } else if (source_value !== void 0) {
+        output[key] = source_value;
+      }
+    }
+  }
+  return output;
+}
+function isObject(item) {
+  return item !== null && typeof item === "object" && !Array.isArray(item);
+}

package/dist/runtime/composables/usePagination.js

@@ -0,0 +1,114 @@
+import { computed, ref } from "vue";
+export function usePagination(options = {}) {
+  const {
+    initial_page = 1,
+    per_page: initial_per_page = 10,
+    total_items: initial_total_items = 0,
+    sibling_count = 1,
+    boundary_count = 1
+  } = options;
+  const current_page = ref(initial_page);
+  const per_page = ref(initial_per_page);
+  const total_items = ref(initial_total_items);
+  const total_pages = computed(() => {
+    return Math.max(1, Math.ceil(total_items.value / per_page.value));
+  });
+  const has_previous = computed(() => current_page.value > 1);
+  const has_next = computed(() => current_page.value < total_pages.value);
+  const state = computed(() => ({
+    current_page: current_page.value,
+    total_pages: total_pages.value,
+    total_items: total_items.value,
+    per_page: per_page.value,
+    has_previous: has_previous.value,
+    has_next: has_next.value
+  }));
+  const pages = computed(() => {
+    const total = total_pages.value;
+    const current = current_page.value;
+    const result = [];
+    const start_pages = range(1, Math.min(boundary_count, total));
+    const end_pages = range(Math.max(total - boundary_count + 1, boundary_count + 1), total);
+    const sibling_start = Math.max(
+      Math.min(
+        current - sibling_count,
+        total - boundary_count - sibling_count * 2 - 1
+      ),
+      boundary_count + 2
+    );
+    const sibling_end = Math.min(
+      Math.max(
+        current + sibling_count,
+        boundary_count + sibling_count * 2 + 2
+      ),
+      end_pages.length > 0 ? end_pages[0] - 2 : total - 1
+    );
+    result.push(...start_pages);
+    if (sibling_start > boundary_count + 2) {
+      result.push("ellipsis");
+    } else if (boundary_count + 1 < total - boundary_count) {
+      result.push(boundary_count + 1);
+    }
+    result.push(...range(sibling_start, sibling_end));
+    if (sibling_end < total - boundary_count - 1) {
+      result.push("ellipsis");
+    } else if (total - boundary_count > boundary_count) {
+      result.push(total - boundary_count);
+    }
+    result.push(...end_pages);
+    const unique = [...new Set(result.filter((p) => p === "ellipsis" || p >= 1 && p <= total))];
+    return unique;
+  });
+  const setPage = (page) => {
+    if (page >= 1 && page <= total_pages.value) {
+      current_page.value = page;
+    }
+  };
+  const nextPage = () => {
+    if (has_next.value) {
+      current_page.value++;
+    }
+  };
+  const previousPage = () => {
+    if (has_previous.value) {
+      current_page.value--;
+    }
+  };
+  const firstPage = () => {
+    current_page.value = 1;
+  };
+  const lastPage = () => {
+    current_page.value = total_pages.value;
+  };
+  const setPerPage = (count) => {
+    per_page.value = count;
+    current_page.value = 1;
+  };
+  const setTotalItems = (count) => {
+    total_items.value = count;
+    if (current_page.value > total_pages.value) {
+      current_page.value = total_pages.value;
+    }
+  };
+  return {
+    state,
+    current_page,
+    per_page,
+    total_items,
+    pages,
+    setPage,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage,
+    setPerPage,
+    setTotalItems
+  };
+}
+function range(start, end) {
+  const result = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+}

package/dist/runtime/composables/useSoaveSeoMeta.js

@@ -0,0 +1,130 @@
+import { useSeoMeta as useNuxtSeoMeta, useHead } from "#app";
+import { computed, toValue } from "vue";
+export function useSoaveSeoMeta(options) {
+  const title = computed(() => toValue(options.title));
+  const description = computed(() => toValue(options.description));
+  const image = computed(() => toValue(options.image));
+  const url = computed(() => toValue(options.url));
+  const type = computed(() => toValue(options.type) || "website");
+  const site_name = computed(() => toValue(options.site_name));
+  const locale = computed(() => toValue(options.locale));
+  const twitter_card = computed(() => toValue(options.twitter_card) || "summary_large_image");
+  const author = computed(() => toValue(options.author));
+  const keywords = computed(() => toValue(options.keywords));
+  const robots = computed(() => toValue(options.robots));
+  useNuxtSeoMeta({
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogImage: image,
+    ogUrl: url,
+    ogType: type,
+    ogSiteName: site_name,
+    ogLocale: locale,
+    twitterCard: twitter_card,
+    twitterTitle: title,
+    twitterDescription: description,
+    twitterImage: image,
+    author,
+    robots
+  });
+  if (options.keywords) {
+    useHead({
+      meta: [
+        {
+          name: "keywords",
+          content: keywords
+        }
+      ]
+    });
+  }
+  if (options.published_time || options.modified_time) {
+    useHead({
+      meta: [
+        ...options.published_time ? [{
+          property: "article:published_time",
+          content: computed(() => toValue(options.published_time))
+        }] : [],
+        ...options.modified_time ? [{
+          property: "article:modified_time",
+          content: computed(() => toValue(options.modified_time))
+        }] : []
+      ]
+    });
+  }
+}
+export function useStructuredData(options) {
+  const scripts = [];
+  if (options.breadcrumbs && options.breadcrumbs.length > 0) {
+    const breadcrumb_list = {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": options.breadcrumbs.map((item, index) => ({
+        "@type": "ListItem",
+        "position": index + 1,
+        "name": item.name,
+        "item": item.url
+      }))
+    };
+    scripts.push({
+      type: "application/ld+json",
+      innerHTML: JSON.stringify(breadcrumb_list)
+    });
+  }
+  if (options.article) {
+    const article = {
+      "@context": "https://schema.org",
+      "@type": "Article",
+      "headline": options.article.headline,
+      "author": {
+        "@type": "Person",
+        "name": options.article.author
+      },
+      "datePublished": options.article.published_date,
+      ...options.article.modified_date && { "dateModified": options.article.modified_date },
+      ...options.article.image && { "image": options.article.image }
+    };
+    scripts.push({
+      type: "application/ld+json",
+      innerHTML: JSON.stringify(article)
+    });
+  }
+  if (options.organization) {
+    const organization = {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": options.organization.name,
+      "url": options.organization.url,
+      ...options.organization.logo && { "logo": options.organization.logo }
+    };
+    scripts.push({
+      type: "application/ld+json",
+      innerHTML: JSON.stringify(organization)
+    });
+  }
+  if (options.product) {
+    const product = {
+      "@context": "https://schema.org",
+      "@type": "Product",
+      "name": options.product.name,
+      "description": options.product.description,
+      ...options.product.image && { "image": options.product.image },
+      "offers": {
+        "@type": "Offer",
+        "price": options.product.price,
+        "priceCurrency": options.product.currency,
+        ...options.product.availability && { "availability": `https://schema.org/${options.product.availability}` }
+      }
+    };
+    scripts.push({
+      type: "application/ld+json",
+      innerHTML: JSON.stringify(product)
+    });
+  }
+  if (scripts.length > 0) {
+    useHead({
+      script: scripts
+    });
+  }
+}

package/dist/runtime/composables/useTypedRoute.js

@@ -0,0 +1,22 @@
+import { useRoute } from "#app";
+import { computed } from "vue";
+export function defineRoute() {
+  const route = useRoute();
+  return route;
+}
+export function useTypedParams() {
+  const route = useRoute();
+  return computed(() => route.params);
+}
+export function useTypedQuery() {
+  const route = useRoute();
+  return computed(() => route.query);
+}
+export function useParam(key) {
+  const route = useRoute();
+  return computed(() => route.params[key]);
+}
+export function useQueryParam(key) {
+  const route = useRoute();
+  return computed(() => route.query[key]);
+}

package/dist/runtime/plugins/ui-provider.client.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#app";
+import { useUIProvider } from "@soave/ui";
+export default defineNuxtPlugin(() => {
+  const config = useUIProvider();
+  return {
+    provide: {
+      soaveUI: config
+    }
+  };
+});

package/dist/runtime/plugins/ui-provider.server.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#app";
+import { useUIProvider } from "@soave/ui";
+export default defineNuxtPlugin(() => {
+  const config = useUIProvider();
+  return {
+    provide: {
+      soaveUI: config
+    }
+  };
+});

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'