@xleddyl/443-components-vue 0.1.0 → 0.2.2

package/dist/locale/types.d.ts

@@ -0,0 +1,292 @@
+export type MessageParams = Record<string, string | number>;
+export interface KMessages {
+    common: {
+        cancel: string;
+        confirm: string;
+        close: string;
+        ok: string;
+        clear: string;
+        loading: string;
+        areYouSure: string;
+        noResults: string;
+        remove: string;
+        dismiss: string;
+        copy: string;
+        copied: string;
+        search: string;
+        back: string;
+        save: string;
+        saveChanges: string;
+        discard: string;
+        retry: string;
+        unsavedChanges: string;
+        somethingWentWrong: string;
+        selected: string;
+    };
+    form: {
+        required: string;
+        min: string;
+        max: string;
+        minLength: string;
+        maxLength: string;
+        minItems: string;
+        maxItems: string;
+        pattern: string;
+        invalid: string;
+    };
+    editor: {
+        bold: string;
+        italic: string;
+        strike: string;
+        code: string;
+        heading: string;
+        bulletList: string;
+        orderedList: string;
+        blockquote: string;
+        link: string;
+        undo: string;
+        redo: string;
+        toolbar: string;
+        linkUrl: string;
+        applyLink: string;
+        removeLink: string;
+        characters: string;
+    };
+    grid: {
+        noRows: string;
+        loading: string;
+        search: string;
+        clearSearch: string;
+        toolbar: string;
+        columns: string;
+        resetColumns: string;
+        exportCsv: string;
+        rowsPerPage: string;
+        previousPage: string;
+        nextPage: string;
+        pageStatus: string;
+        selected: string;
+        copied: string;
+        yes: string;
+        no: string;
+    };
+    account: {
+        label: string;
+    };
+    alert: {
+        title: string;
+    };
+    appearance: {
+        theme: string;
+        themeDescription: string;
+        style: string;
+        styleDescription: string;
+    };
+    auth: {
+        aside: string;
+    };
+    avatar: {
+        label: string;
+        online: string;
+        away: string;
+        busy: string;
+        offline: string;
+    };
+    avatarGroup: {
+        more: string;
+    };
+    breadcrumbs: {
+        label: string;
+    };
+    calendar: {
+        previousMonth: string;
+        nextMonth: string;
+    };
+    chart: {
+        empty: string;
+        loading: string;
+    };
+    colorInput: {
+        pick: string;
+        swatches: string;
+    };
+    combobox: {
+        clear: string;
+        toggle: string;
+        list: string;
+        create: string;
+        results: string;
+    };
+    commandPalette: {
+        placeholder: string;
+        label: string;
+        recent: string;
+        minQuery: string;
+        error: string;
+        results: string;
+        move: string;
+        select: string;
+        close: string;
+    };
+    contextMenu: {
+        label: string;
+    };
+    dashboardLayout: {
+        pages: string;
+        searchPlaceholder: string;
+    };
+    dashboardPage: {
+        stats: string;
+    };
+    datePicker: {
+        placeholder: string;
+        clear: string;
+        dialog: string;
+        range: string;
+    };
+    descriptionList: {
+        empty: string;
+    };
+    detailPage: {
+        sections: string;
+        details: string;
+        error: string;
+    };
+    dirtyGuard: {
+        title: string;
+        description: string;
+        confirm: string;
+        cancel: string;
+    };
+    emptyPage: {
+        title: string;
+        steps: string;
+        done: string;
+        todo: string;
+    };
+    errorPage: {
+        home: string;
+        back: string;
+        retry: string;
+        badRequestTitle: string;
+        badRequestMessage: string;
+        signInTitle: string;
+        signInMessage: string;
+        forbiddenTitle: string;
+        forbiddenMessage: string;
+        notFoundTitle: string;
+        notFoundMessage: string;
+        serverTitle: string;
+        serverMessage: string;
+        unavailableTitle: string;
+        unavailableMessage: string;
+    };
+    fileInput: {
+        title: string;
+        drop: string;
+        list: string;
+        selected: string;
+    };
+    filterPills: {
+        label: string;
+    };
+    listPage: {
+        toolbar: string;
+        emptyTitle: string;
+        noResultsDescription: string;
+        clearFilters: string;
+    };
+    numberInput: {
+        increase: string;
+        decrease: string;
+    };
+    pagination: {
+        label: string;
+        page: string;
+        previous: string;
+        next: string;
+        pageSize: string;
+        of: string;
+    };
+    passwordInput: {
+        show: string;
+        hide: string;
+        generate: string;
+        copy: string;
+        strength: string;
+    };
+    passwordStrength: {
+        tooShort: string;
+        weak: string;
+        fair: string;
+        good: string;
+        strong: string;
+    };
+    preset: {
+        default: string;
+        defaultDescription: string;
+        suedtirolDescription: string;
+        spotfishDescription: string;
+    };
+    progress: {
+        label: string;
+    };
+    prompt: {
+        title: string;
+    };
+    saveBar: {
+        message: string;
+    };
+    settings: {
+        title: string;
+        close: string;
+        sections: string;
+        signOut: string;
+        session: string;
+        sessionDescription: string;
+        accountDescription: string;
+        appearance: string;
+        appearanceDescription: string;
+    };
+    shell: {
+        sidebar: string;
+        openNavigation: string;
+        skipToContent: string;
+        main: string;
+        collapse: string;
+        expand: string;
+    };
+    stat: {
+        increased: string;
+        decreased: string;
+    };
+    table: {
+        selectAll: string;
+        loading: string;
+        selectRow: string;
+    };
+    theme: {
+        label: string;
+        system: string;
+        light: string;
+        dark: string;
+    };
+    toaster: {
+        label: string;
+        dismiss: string;
+    };
+    tree: {
+        label: string;
+    };
+}
+export interface KLocale {
+    code: string;
+    dir: 'ltr' | 'rtl';
+    messages: KMessages;
+}
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends string ? T[K] : DeepPartial<T[K]>;
+};
+export type MessageKey = {
+    [N in keyof KMessages & string]: `${N}.${keyof KMessages[N] & string}`;
+}[keyof KMessages & string];

package/dist/nuxt/module.d.ts

@@ -1,7 +1,13 @@
 import type { KAppConfig } from '../components/templates/types';
 import type { ThemePreference } from '../composables/useTheme';
 import type { ThemePreset } from '../internal/core/preset-data';
+import type { DeepPartial, KMessages } from '../locale/types';
 export type { KAppConfig } from '../components/templates/types';
+export interface IconCollectionOption {
+    prefix: string;
+    include?: string[];
+    exclude?: string[];
+}
 export interface LayoutsOption {
     dashboard?: string | false;
     auth?: string | false;
@@ -10,6 +16,7 @@ export interface ModuleOptions {
     prefix: string;
     global: boolean;
     css: boolean;
+    cssLayers: string | false;
     composables: boolean;
     grid: boolean;
     editor: boolean;
@@ -18,23 +25,30 @@ export interface ModuleOptions {
     cssTarget: string[] | false;
     icons: {
         dir?: string;
+        collections?: (string | IconCollectionOption)[];
+        defaultCollection?: string;
+        aliases?: Record<string, string>;
     };
     theme: {
-        cookie: string;
+        cookie: string | false;
         default: ThemePreference;
     };
     preset: {
-        cookie: string;
+        cookie: string | false;
         default: ThemePreset;
     };
     fonts: boolean | ThemePreset[];
+    locale: string;
+    messages: Record<string, DeepPartial<KMessages>>;
 }
 export interface KRuntimeConfig {
     global: boolean;
-    themeCookie: string;
+    themeCookie: string | false;
     themeDefault: ThemePreference;
-    presetCookie: string;
+    presetCookie: string | false;
     presetDefault: ThemePreset;
+    locale: string;
+    messages: Record<string, DeepPartial<KMessages>>;
 }
 declare module '@nuxt/schema' {
     interface PublicRuntimeConfig {

package/dist/nuxt/module.mjs

@@ -1,5 +1,6 @@
 import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { isAbsolute, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
 import {
   addComponent,
   addComponentsDir,
@@ -7,6 +8,7 @@ import {
   addImportsDir,
   addPlugin,
   addPluginTemplate,
+  addTemplate,
   createResolver,
   defineNuxtModule,
   directoryToURL,
@@ -25,6 +27,7 @@ export default defineNuxtModule({
     prefix: "K",
     global: false,
     css: true,
+    cssLayers: "theme, base, k, components, utilities",
     composables: true,
     grid: false,
     editor: false,
@@ -40,7 +43,9 @@ export default defineNuxtModule({
       cookie: "k-preset",
       default: "default"
     },
-    fonts: true
+    fonts: true,
+    locale: "en",
+    messages: {}
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
@@ -102,15 +107,19 @@ export default defineNuxtModule({
     const viteBuild = nuxt.options.vite.build ??= {};
     if (options.cssTarget && viteBuild.cssTarget === void 0)
       viteBuild.cssTarget = options.cssTarget;
-    nuxt.options.runtimeConfig.public.k = {
+    const runtimeConfig = {
       global: options.global,
       themeCookie: options.theme.cookie,
       themeDefault: options.theme.default,
       presetCookie: options.preset.cookie,
-      presetDefault
+      presetDefault,
+      locale: options.locale,
+      messages: options.messages
     };
+    Object.assign(nuxt.options.runtimeConfig.public, { k: runtimeConfig });
     addPlugin(resolver.resolve("./runtime/theme"));
     addPlugin(resolver.resolve("./runtime/storage"));
+    addPlugin(resolver.resolve("./runtime/locale"));
     if (options.composables)
       addImports({ name: "useDashboard", from: resolver.resolve("./runtime/dashboard") });
     const layouts = resolveLayouts(options.layouts);
@@ -139,16 +148,65 @@ export default defineNuxtModule({
         `})`
       ].join("\n")
     });
-    if (options.icons.dir) {
-      const aliased = resolveAlias(options.icons.dir);
-      const iconsDir = isAbsolute(aliased) ? aliased : join(nuxt.options.srcDir, aliased);
-      if (!existsSync(iconsDir)) console.warn(`[@xleddyl/443-components-vue] icons.dir not found: ${iconsDir}`);
+    const collections = [];
+    for (const entry of options.icons.collections ?? []) {
+      const collection = typeof entry === "string" ? { prefix: entry } : entry;
+      const file = await resolveCollectionFile(collection.prefix, searchPaths);
+      if (!file) {
+        console.warn(
+          `[@xleddyl/443-components-vue] icon collection "${collection.prefix}" not installed: pnpm add -D @iconify-json/${collection.prefix}`
+        );
+        continue;
+      }
+      const data = filterCollection(JSON.parse(readFileSync(file, "utf8")), collection);
+      collections.push(data);
+      addTemplate({
+        filename: `k-icons/${collection.prefix}.mjs`,
+        getContents: () => `export default ${JSON.stringify(data)}
+`
+      });
+    }
+    if (collections.length || options.icons.defaultCollection) {
+      addPluginTemplate({
+        filename: "k-icon-collections.mjs",
+        getContents: () => [
+          `import { defineNuxtPlugin } from '#app'`,
+          `import { ICON_USAGE_KEY, loadIconCollection, registerIconCollection, setDefaultIconCollection } from '@xleddyl/443-components-vue'`,
+          ...collections.map(
+            (collection) => `registerIconCollection(${JSON.stringify(collection.prefix)}, () => import('#build/k-icons/${collection.prefix}.mjs'))`
+          ),
+          `setDefaultIconCollection(${JSON.stringify(options.icons.defaultCollection)})`,
+          `const prefixes = ${JSON.stringify(collections.map((collection) => collection.prefix))}`,
+          `export default defineNuxtPlugin({`,
+          `   name: 'k:icon-collections',`,
+          `   async setup(nuxtApp) {`,
+          `      if (import.meta.server) {`,
+          `         await Promise.all(prefixes.map(loadIconCollection))`,
+          `         const used = new Set()`,
+          `         nuxtApp.vueApp.provide(ICON_USAGE_KEY, used)`,
+          `         nuxtApp.hook('app:rendered', () => {`,
+          `            nuxtApp.payload.kIconCollections = [...used]`,
+          `         })`,
+          `         return`,
+          `      }`,
+          `      const used = nuxtApp.payload.kIconCollections ?? []`,
+          `      await Promise.all(used.map(loadIconCollection))`,
+          `   },`,
+          `})`
+        ].join("\n")
+      });
+    }
+    const aliasIcons = resolveAliasIcons(options.icons.aliases ?? {}, collections);
+    const iconsDir = options.icons.dir ? resolveIconsDir(options.icons.dir, nuxt.options.srcDir) : void 0;
+    if (iconsDir && !existsSync(iconsDir))
+      console.warn(`[@xleddyl/443-components-vue] icons.dir not found: ${iconsDir}`);
+    if (iconsDir || Object.keys(options.icons.aliases ?? {}).length) {
       addPluginTemplate({
         filename: "k-icons.mjs",
         getContents: () => [
           `import { defineNuxtPlugin } from '#app'`,
           `import { createIcons } from '@xleddyl/443-components-vue'`,
-          `const icons = ${JSON.stringify(readIconsDir(iconsDir), null, 2)}`,
+          `const icons = ${JSON.stringify(withDirAliases(iconsDir ? readIconsDir(iconsDir) : {}, aliasIcons, options.icons.aliases ?? {}), null, 2)}`,
           `export default defineNuxtPlugin({`,
           `   name: 'k:icons',`,
           `   setup(nuxtApp) {`,
@@ -158,12 +216,20 @@ export default defineNuxtModule({
         ].join("\n")
       });
       nuxt.hook("builder:watch", async (_event, path) => {
-        if (!path.endsWith(".svg")) return;
+        if (!iconsDir || !path.endsWith(".svg")) return;
         const candidates = isAbsolute(path) ? [path] : [join(nuxt.options.srcDir, path), join(nuxt.options.rootDir, path)];
         if (!candidates.some((candidate) => candidate.startsWith(iconsDir))) return;
         await updateTemplates({ filter: (template) => template.filename === "k-icons.mjs" });
       });
     }
+    if (options.css && options.cssLayers) {
+      const layers = addTemplate({
+        filename: "k-layers.css",
+        getContents: () => `@layer ${options.cssLayers};
+`
+      });
+      nuxt.options.css.unshift(layers.dst);
+    }
   }
 });
 function resolveLayouts(option) {
@@ -198,6 +264,69 @@ const OPTIONAL_GROUPS = [
     dependencies: ["chart.js", "chart.js/helpers", "vue-chartjs"]
   }
 ];
+function resolveIconsDir(dir, srcDir) {
+  const aliased = resolveAlias(dir);
+  return isAbsolute(aliased) ? aliased : join(srcDir, aliased);
+}
+async function resolveCollectionFile(prefix, searchPaths) {
+  for (const id of [`@iconify-json/${prefix}/icons.json`, `@iconify/json/json/${prefix}.json`]) {
+    const resolved = await tryResolveModule(id, searchPaths);
+    if (resolved) return resolved.startsWith("file:") ? fileURLToPath(resolved) : resolved;
+  }
+  return void 0;
+}
+function globToRegExp(pattern) {
+  const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+  return new RegExp(`^${escaped}$`);
+}
+function filterCollection(data, option) {
+  const include = (option.include ?? []).map(globToRegExp);
+  const exclude = (option.exclude ?? []).map(globToRegExp);
+  const keep = (name) => (!include.length || include.some((pattern) => pattern.test(name))) && !exclude.some((pattern) => pattern.test(name));
+  const icons = Object.fromEntries(Object.entries(data.icons).filter(([name]) => keep(name)));
+  const aliases = Object.fromEntries(
+    Object.entries(data.aliases ?? {}).filter(
+      ([name, alias]) => keep(name) && alias.parent in icons
+    )
+  );
+  return { prefix: data.prefix, icons, aliases, width: data.width, height: data.height };
+}
+function collectionSvg(collections, name) {
+  const index = name.indexOf(":");
+  if (index <= 0) return void 0;
+  const collection = collections.find((entry) => entry.prefix === name.slice(0, index));
+  if (!collection) return void 0;
+  let key = name.slice(index + 1);
+  for (let depth = 0; depth < 5 && !collection.icons[key]; depth++) {
+    const parent = collection.aliases?.[key]?.parent;
+    if (!parent) break;
+    key = parent;
+  }
+  const icon = collection.icons[key];
+  if (!icon) return void 0;
+  const width = icon.width ?? collection.width ?? 16;
+  const height = icon.height ?? collection.height ?? 16;
+  return `<svg viewBox="${icon.left ?? 0} ${icon.top ?? 0} ${width} ${height}">${icon.body}</svg>`;
+}
+function resolveAliasIcons(aliases, collections) {
+  const icons = {};
+  for (const [name, target] of Object.entries(aliases)) {
+    const svg = collectionSvg(collections, target);
+    if (svg) icons[name] = svg;
+  }
+  return icons;
+}
+function withDirAliases(dirIcons, aliasIcons, aliases) {
+  const icons = { ...dirIcons, ...aliasIcons };
+  for (const [name, target] of Object.entries(aliases)) {
+    if (name in aliasIcons) continue;
+    const svg = dirIcons[target];
+    if (svg) icons[name] = svg;
+    else
+      console.warn(`[@xleddyl/443-components-vue] icon alias "${name}" -> "${target}" not found`);
+  }
+  return icons;
+}
 function readIconsDir(dir) {
   if (!existsSync(dir)) return {};
   const icons = {};