@hywax/cms 2.0.1 → 2.1.0

package/.nuxt/cms/form-panel-section.ts

@@ -1,8 +1,8 @@
 export default {
   "slots": {
     "root": "",
-    "title": "text-base text-pretty font-semibold text-highlighted mb-2",
-    "description": "text-[15px] text-pretty text-muted mt-1",
+    "title": "text-base text-pretty font-semibold text-highlighted",
+    "description": "text-[15px] text-pretty text-muted mb-2",
     "body": "relative rounded-lg bg-elevated/50 ring ring-default grid gap-x-8 gap-y-4 p-4 sm:p-6"
   }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -7,7 +7,7 @@ import { defu } from 'defu';
 import { globSync } from 'tinyglobby';
 
 const name = "@hywax/cms";
-const version = "2.0.1";
+const version = "2.1.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -149,7 +149,86 @@ const icons = {
   editLine: "i-lucide-pen-line"
 };
 
-function prepareMergeConfigs({ nuxt, options }) {
+async function buildComponentDependencyGraph(componentDir, componentPattern) {
+  const dependencyGraph = /* @__PURE__ */ new Map();
+  const componentFiles = globSync(["**/*.vue"], {
+    cwd: componentDir,
+    absolute: true
+  });
+  for (const componentFile of componentFiles) {
+    try {
+      const content = await readFile(componentFile, "utf-8");
+      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
+      const dependencies = /* @__PURE__ */ new Set();
+      const matches = content.matchAll(componentPattern);
+      for (const match of matches) {
+        const depName = match[1] || match[2];
+        if (depName && depName !== componentName) {
+          dependencies.add(depName);
+        }
+      }
+      dependencyGraph.set(componentName, dependencies);
+    } catch {
+    }
+  }
+  return dependencyGraph;
+}
+function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
+  if (resolved.has(component)) {
+    return resolved;
+  }
+  resolved.add(component);
+  const dependencies = dependencyGraph.get(component);
+  if (dependencies) {
+    for (const dep of dependencies) {
+      resolveComponentDependencies(dep, dependencyGraph, resolved);
+    }
+  }
+  return resolved;
+}
+async function detectUsedComponents(dirs, prefix, componentDir, includeComponents) {
+  const detectedComponents = /* @__PURE__ */ new Set();
+  if (includeComponents && includeComponents.length > 0) {
+    for (const component of includeComponents) {
+      detectedComponents.add(component);
+    }
+  }
+  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
+  for (const dir of dirs) {
+    const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
+      cwd: dir,
+      ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
+    });
+    for (const file of appFiles) {
+      try {
+        const filePath = join(dir, file);
+        const content = await readFile(filePath, "utf-8");
+        const matches = content.matchAll(componentPattern);
+        for (const match of matches) {
+          const componentName = match[1] || match[2];
+          if (componentName) {
+            detectedComponents.add(componentName);
+          }
+        }
+      } catch {
+      }
+    }
+  }
+  if (detectedComponents.size === 0) {
+    return void 0;
+  }
+  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
+  const allComponents = /* @__PURE__ */ new Set();
+  for (const component of detectedComponents) {
+    const resolved = resolveComponentDependencies(component, dependencyGraph);
+    for (const resolvedComponent of resolved) {
+      allComponents.add(resolvedComponent);
+    }
+  }
+  return allComponents;
+}
+
+async function prepareMergeConfigs({ nuxt, options, resolve }) {
   nuxt.options.experimental = defu(nuxt.options.experimental || {}, {
     typedPages: true
   });
@@ -219,12 +298,17 @@ function prepareMergeConfigs({ nuxt, options }) {
       }
     }
   });
+  const detectedComponents = await detectUsedComponents(
+    [resolve("./runtime/components"), resolve("./runtime/composables")],
+    "U",
+    resolve("./runtime/components")
+  );
   nuxt.options.ui = defu(nuxt.options.ui || {}, {
     colorMode: true,
     fonts: true,
     mdc: true,
     experimental: {
-      componentDetection: true
+      componentDetection: [...detectedComponents || []]
     }
   });
   nuxt.options.colorMode = defu(nuxt.options.colorMode || {}, {
@@ -347,8 +431,8 @@ const formPanelAsideSection = {
 const formPanelSection = {
   slots: {
     root: "",
-    title: "text-base text-pretty font-semibold text-highlighted mb-2",
-    description: "text-[15px] text-pretty text-muted mt-1",
+    title: "text-base text-pretty font-semibold text-highlighted",
+    description: "text-[15px] text-pretty text-muted mb-2",
     body: "relative rounded-lg bg-elevated/50 ring ring-default grid gap-x-8 gap-y-4 p-4 sm:p-6"
   }
 };
@@ -455,85 +539,6 @@ const themeProse = {
   uploraImage: uploraImage
 };
 
-async function buildComponentDependencyGraph(componentDir, componentPattern) {
-  const dependencyGraph = /* @__PURE__ */ new Map();
-  const componentFiles = globSync(["**/*.vue"], {
-    cwd: componentDir,
-    absolute: true
-  });
-  for (const componentFile of componentFiles) {
-    try {
-      const content = await readFile(componentFile, "utf-8");
-      const componentName = pascalCase(componentFile.split("/").pop().replace(".vue", ""));
-      const dependencies = /* @__PURE__ */ new Set();
-      const matches = content.matchAll(componentPattern);
-      for (const match of matches) {
-        const depName = match[1] || match[2];
-        if (depName && depName !== componentName) {
-          dependencies.add(depName);
-        }
-      }
-      dependencyGraph.set(componentName, dependencies);
-    } catch {
-    }
-  }
-  return dependencyGraph;
-}
-function resolveComponentDependencies(component, dependencyGraph, resolved = /* @__PURE__ */ new Set()) {
-  if (resolved.has(component)) {
-    return resolved;
-  }
-  resolved.add(component);
-  const dependencies = dependencyGraph.get(component);
-  if (dependencies) {
-    for (const dep of dependencies) {
-      resolveComponentDependencies(dep, dependencyGraph, resolved);
-    }
-  }
-  return resolved;
-}
-async function detectUsedComponents(dirs, prefix, componentDir, includeComponents) {
-  const detectedComponents = /* @__PURE__ */ new Set();
-  if (includeComponents && includeComponents.length > 0) {
-    for (const component of includeComponents) {
-      detectedComponents.add(component);
-    }
-  }
-  const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, "g");
-  for (const dir of dirs) {
-    const appFiles = globSync(["**/*.{vue,ts,js,tsx,jsx}"], {
-      cwd: dir,
-      ignore: ["node_modules/**", ".nuxt/**", "dist/**"]
-    });
-    for (const file of appFiles) {
-      try {
-        const filePath = join(dir, file);
-        const content = await readFile(filePath, "utf-8");
-        const matches = content.matchAll(componentPattern);
-        for (const match of matches) {
-          const componentName = match[1] || match[2];
-          if (componentName) {
-            detectedComponents.add(componentName);
-          }
-        }
-      } catch {
-      }
-    }
-  }
-  if (detectedComponents.size === 0) {
-    return void 0;
-  }
-  const dependencyGraph = await buildComponentDependencyGraph(componentDir, componentPattern);
-  const allComponents = /* @__PURE__ */ new Set();
-  for (const component of detectedComponents) {
-    const resolved = resolveComponentDependencies(component, dependencyGraph);
-    for (const resolvedComponent of resolved) {
-      allComponents.add(resolvedComponent);
-    }
-  }
-  return allComponents;
-}
-
 function getAppTemplates({ options, resolve, nuxt }) {
   const templates = [];
   let previousDetectedComponents;
@@ -759,7 +764,7 @@ const module$1 = defineNuxtModule({
   defaults: defaultModuleOptions,
   async setup(options, nuxt) {
     const context = createContext(options, nuxt);
-    prepareMergeConfigs(context);
+    await prepareMergeConfigs(context);
     prepareTemplates(context);
     prepareAutoImports(context);
     prepareServerRoutes(context);

package/dist/runtime/components/InputSlug.d.vue.ts

@@ -27,4 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<InputSlugProps & {
 }> & Readonly<{
     "onUpdate:title"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:slug"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    titleKey: string;
+    slugKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/InputSlug.vue

@@ -50,8 +50,8 @@ import { slugify } from "../utils/slugify";
 const props = defineProps({
   regenerate: { type: Boolean, required: false },
   label: { type: String, required: false },
-  titleKey: { type: String, required: false },
-  slugKey: { type: String, required: false },
+  titleKey: { type: String, required: false, default: "title" },
+  slugKey: { type: String, required: false, default: "slug" },
   inputProps: { type: Object, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },

package/dist/runtime/components/InputSlug.vue.d.ts

@@ -27,4 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<InputSlugProps & {
 }> & Readonly<{
     "onUpdate:title"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:slug"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    titleKey: string;
+    slugKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/TablePreviewLink.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+import type { UploraImageProps } from './UploraImage.vue';
+export interface TablePreviewLinkProps {
+    to?: RouteLocationRaw;
+    target?: ButtonProps['target'];
+    label: string;
+    description?: string;
+    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'>;
+}
+declare const __VLS_export: import("vue").DefineComponent<TablePreviewLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TablePreviewLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/TablePreviewLink.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="relative flex items-center gap-2">
+    <div class="overflow-hidden rounded-lg">
+      <UploraImage
+        v-if="image"
+        v-bind="image"
+        :sizes="[{ width: 32, height: 32, descriptor: '1x' }]"
+        :ui="{ picture: 'aspect-square' }"
+      />
+    </div>
+    <div>
+      <ULink
+        v-if="to"
+        :to="to"
+        :target="target"
+        class="text-primary font-medium"
+      >
+        {{ label }}
+      </ULink>
+      <p v-else class="font-medium text-highlighted text-sm">
+        {{ label }}
+      </p>
+      <p v-if="description" class="text-muted text-xs">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UploraImage from "./UploraImage.vue";
+defineProps({
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  image: { type: Object, required: false }
+});
+</script>

package/dist/runtime/components/TablePreviewLink.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+import type { UploraImageProps } from './UploraImage.vue';
+export interface TablePreviewLinkProps {
+    to?: RouteLocationRaw;
+    target?: ButtonProps['target'];
+    label: string;
+    description?: string;
+    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'>;
+}
+declare const __VLS_export: import("vue").DefineComponent<TablePreviewLinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TablePreviewLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useTableColumns.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonProps, FormSchema, TableColumn, TableData, TableRow } from '@nuxt/ui';
 import type { RowData } from '@tanstack/table-core';
 import type { RouteLocationRaw } from 'vue-router';
+import type { TablePreviewLinkProps } from '../components/TablePreviewLink.vue';
 import type { FiltersField } from '../types';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -18,8 +19,8 @@ export type TableColumnCustom<T extends TableData, D = unknown> = TableColumn<T,
     to?: ((row: TableRow<T>) => RouteLocationRaw | string | undefined) | RouteLocationRaw | string | undefined;
     target?: ButtonProps['target'];
     emptyValue?: string;
-    image?: string;
-    description?: string;
+    image?: ((row: TableRow<T>) => TablePreviewLinkProps['image'] | undefined) | TablePreviewLinkProps['image'] | undefined;
+    description?: ((row: TableRow<T>) => string | undefined) | string | undefined;
 };
 export declare function useTableColumns<I extends Record<string, any>, T extends readonly TableColumnCustom<I>[] = readonly TableColumnCustom<I>[]>(columns: T): {
     columns: {

package/dist/runtime/composables/useTableColumns.js

@@ -1,5 +1,5 @@
-import { UUser } from "#components";
 import { h } from "vue";
+import TablePreviewLink from "../components/TablePreviewLink.vue";
 import { formatDate, formatDateTime, formatNumber } from "../utils/index.js";
 export function useTableFiltersFields(_schema, fields) {
   return { filtersFields: fields };
@@ -28,17 +28,16 @@ function transformColumn(column) {
         return void 0;
       }
       if (column.to) {
-        return h(UUser, {
-          to: typeof column.to === "function" ? column.to(row) : column.to,
-          target: column.target,
-          name: value.toString(),
-          class: "inline-flex",
-          ui: {
-            name: "text-primary",
-            avatar: "group-hover/user:scale-100"
-          },
-          avatar: column.image ? { src: column.image, size: "sm", alt: value.toString() } : void 0,
-          description: column.description
+        const to = typeof column.to === "function" ? column.to(row) : column.to;
+        const target = column.target;
+        const description = typeof column.description === "function" ? column.description(row) : column.description;
+        const image = typeof column.image === "function" ? column.image(row) : column.image;
+        return h(TablePreviewLink, {
+          to,
+          target,
+          description,
+          label: value.toString(),
+          image
         });
       }
       return value;

package/dist/runtime/utils/enums.d.ts

@@ -0,0 +1,4 @@
+export declare function createEnumItems<T extends Record<any, string>>(labels: T): Array<{
+    value: keyof T;
+    label: string;
+}>;

package/dist/runtime/utils/enums.js

@@ -0,0 +1,6 @@
+export function createEnumItems(labels) {
+  return Object.entries(labels).map(([value, label]) => ({
+    value,
+    label
+  }));
+}

package/dist/runtime/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './auth';
 export * from './avatar';
 export * from './date';
+export * from './enums';
 export * from './formatters';
 export * from './logger';
 export * from './slugify';

package/dist/runtime/utils/index.js

@@ -1,6 +1,7 @@
 export * from "./auth.js";
 export * from "./avatar.js";
 export * from "./date.js";
+export * from "./enums.js";
 export * from "./formatters.js";
 export * from "./logger.js";
 export * from "./slugify.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hywax/cms",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "imports": {
     "#build/cms/*": "./.nuxt/cms/*.ts",
@@ -79,16 +79,16 @@
     "scule": "^1.3.0",
     "sortablejs": "^1.15.6",
     "tinyglobby": "^0.2.15",
-    "zod": "^4.3.4"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^5.4.1",
+    "@antfu/eslint-config": "^6.7.3",
     "@commitlint/cli": "^20.3.0",
     "@commitlint/config-conventional": "^20.3.0",
     "@nuxt/devtools": "^3.1.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.2",
-    "@nuxt/test-utils": "^3.21.0",
+    "@nuxt/test-utils": "^3.22.0",
     "@types/sortablejs": "^1.15.9",
     "@vue/test-utils": "^2.4.6",
     "changelogen-monorepo": "^0.5.0",