@hywax/cms 2.1.0 → 3.0.0

package/.nuxt/cms/{input-uplora-image.ts → form-uplora-image.ts}

@@ -1,9 +1,7 @@
 export default {
   "slots": {
-    "root": "relative w-full rounded-md overflow-hidden border-1 border-default aspect-3/2 text-sm bg-default",
-    "image": "",
-    "imageActions": "absolute top-4 right-4 flex gap-2",
-    "imageActionsWarning": "absolute top-0 right-0 size-6 bg-linear-to-bl from-error/90 to-transparent rounded-bl-lg text-error flex items-center justify-center",
+    "root": "relative w-full gap-1",
+    "base": "rounded-md overflow-hidden border-1 border-default bg-default aspect-3/2",
     "uploader": "flex flex-col items-center justify-center w-full h-full",
     "uploaderPendingIcon": "size-6 animate-spin",
     "uploaderIdleButton": "cursor-pointer h-full w-full",
@@ -17,11 +15,6 @@ export default {
       "true": {
         "root": "cursor-not-allowed opacity-75"
       }
-    },
-    "uploaded": {
-      "false": {
-        "root": "border-dashed"
-      }
     }
   }
 }

package/.nuxt/cms/http-statuses.ts

@@ -0,0 +1,59 @@
+export type HttpStatusKey
+  = ('badRequest' | 'unauthorized' | 'forbidden' | 'notFound' | 'alreadyExists' | 'notAllowed' | 'internalServerError' | 'dbNotDefined' | 'dbConnectionRefused' | 'dbInsertFailed' | 'badGateway' | 'serviceUnavailable')
+  & string
+
+export interface HttpStatus {
+  code: number
+  message: string
+}
+
+export const httpStatuses: Record<HttpStatusKey, HttpStatus> = {
+  "badRequest": {
+    "code": 400,
+    "message": "Неверный запрос"
+  },
+  "unauthorized": {
+    "code": 401,
+    "message": "Неавторизован"
+  },
+  "forbidden": {
+    "code": 403,
+    "message": "Доступ запрещен"
+  },
+  "notFound": {
+    "code": 404,
+    "message": "Не найдено"
+  },
+  "alreadyExists": {
+    "code": 409,
+    "message": "Уже существует"
+  },
+  "notAllowed": {
+    "code": 405,
+    "message": "Не разрешено"
+  },
+  "internalServerError": {
+    "code": 500,
+    "message": "Внутренняя ошибка сервера"
+  },
+  "dbNotDefined": {
+    "code": 500,
+    "message": "База данных не определена"
+  },
+  "dbConnectionRefused": {
+    "code": 500,
+    "message": "Не удалось подключиться к базе данных"
+  },
+  "dbInsertFailed": {
+    "code": 500,
+    "message": "Ошибка при добавлении данных в базу данных"
+  },
+  "badGateway": {
+    "code": 502,
+    "message": "Ошибка шлюза"
+  },
+  "serviceUnavailable": {
+    "code": 503,
+    "message": "Сервис недоступен"
+  }
+}

package/.nuxt/cms/index.ts

@@ -3,10 +3,10 @@ export { default as ButtonDeleteConfirm } from './button-delete-confirm'
 export { default as FormPanel } from './form-panel'
 export { default as FormPanelAsideSection } from './form-panel-aside-section'
 export { default as FormPanelSection } from './form-panel-section'
-export { default as InputSeo } from './input-seo'
-export { default as InputUploraImage } from './input-uplora-image'
+export { default as FormSeo } from './form-seo'
+export { default as FormSlug } from './form-slug'
+export { default as FormUploraImage } from './form-uplora-image'
 export { default as ModalConfirm } from './modal-confirm'
 export { default as TablePanel } from './table-panel'
 export { default as TableSearchInput } from './table-search-input'
-export { default as UploraImage } from './uplora-image'
-export { default as inputSlug } from './input-slug'
+export { default as UploraImage } from './uplora-image'

package/.nuxt/cms.css

@@ -4,10 +4,10 @@
 @source "./cms/form-panel.ts";
 @source "./cms/editor-full.ts";
 @source "./cms/form-panel-section.ts";
-@source "./cms/input-slug.ts";
-@source "./cms/input-seo.ts";
-@source "./cms/input-uplora-image.ts";
+@source "./cms/form-slug.ts";
+@source "./cms/form-uplora-image.ts";
 @source "./cms/uplora-image.ts";
+@source "./cms/form-seo.ts";
 @source "./cms/table-panel.ts";
 @source "./cms/modal-confirm.ts";
 @source "./cms/table-search-input.ts";

package/dist/module.d.mts

@@ -34,9 +34,12 @@ interface CMSCoreOptions {
      */
     unovis?: boolean;
     /**
-     * HTTP codes
+     * HTTP statuses
      */
-    httpCodes?: Record<string, string>;
+    httpStatuses?: Record<string, {
+        code: number;
+        message: string;
+    }>;
     /**
      * Component detection
      */

package/dist/module.json

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

package/dist/module.mjs

@@ -1,13 +1,13 @@
 import { createResolver, addComponentsDir, addPlugin, addImports, addImportsDir, addServerImports, addServerImportsDir, addServerHandler, addTypeTemplate, addTemplate, addServerTemplate, updateTemplates, getLayerDirectories, logger, defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'pathe';
-import { snakeCase, pascalCase, kebabCase } from 'scule';
 import { readFile, writeFile } from 'node:fs/promises';
 import { defu } from 'defu';
+import { pascalCase, kebabCase } from 'scule';
 import { globSync } from 'tinyglobby';
 
 const name = "@hywax/cms";
-const version = "2.1.0";
+const version = "3.0.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -30,15 +30,55 @@ const defaultModuleOptions = {
   envPrefix: "APP_",
   unovis: false,
   componentDetection: true,
-  httpCodes: {
-    badRequest: "400: \u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0437\u0430\u043F\u0440\u043E\u0441",
-    unauthorized: "401: \u041D\u0435 \u0430\u0432\u0442\u043E\u0440\u0438\u0437\u043E\u0432\u0430\u043D",
-    forbidden: "403: \u0414\u043E\u0441\u0442\u0443\u043F \u0437\u0430\u043F\u0440\u0435\u0449\u0435\u043D",
-    notFound: "404: \u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
-    requestTimeout: "408: \u0412\u0440\u0435\u043C\u044F \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F \u0437\u0430\u043F\u0440\u043E\u0441\u0430 \u0438\u0441\u0442\u0435\u043A\u043B\u043E",
-    internalServerError: "500: \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u043E\u0448\u0438\u0431\u043A\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430",
-    badGateway: "502: \u041E\u0448\u0438\u0431\u043A\u0430 \u0448\u043B\u044E\u0437\u0430",
-    serviceUnavailable: "503: \u0421\u0435\u0440\u0432\u0438\u0441 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D"
+  httpStatuses: {
+    badRequest: {
+      code: 400,
+      message: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0437\u0430\u043F\u0440\u043E\u0441"
+    },
+    unauthorized: {
+      code: 401,
+      message: "\u041D\u0435\u0430\u0432\u0442\u043E\u0440\u0438\u0437\u043E\u0432\u0430\u043D"
+    },
+    forbidden: {
+      code: 403,
+      message: "\u0414\u043E\u0441\u0442\u0443\u043F \u0437\u0430\u043F\u0440\u0435\u0449\u0435\u043D"
+    },
+    notFound: {
+      code: 404,
+      message: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"
+    },
+    alreadyExists: {
+      code: 409,
+      message: "\u0423\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442"
+    },
+    notAllowed: {
+      code: 405,
+      message: "\u041D\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u043E"
+    },
+    internalServerError: {
+      code: 500,
+      message: "\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u043E\u0448\u0438\u0431\u043A\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430"
+    },
+    dbNotDefined: {
+      code: 500,
+      message: "\u0411\u0430\u0437\u0430 \u0434\u0430\u043D\u043D\u044B\u0445 \u043D\u0435 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u0430"
+    },
+    dbConnectionRefused: {
+      code: 500,
+      message: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C\u0441\u044F \u043A \u0431\u0430\u0437\u0435 \u0434\u0430\u043D\u043D\u044B\u0445"
+    },
+    dbInsertFailed: {
+      code: 500,
+      message: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0438 \u0434\u0430\u043D\u043D\u044B\u0445 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043D\u043D\u044B\u0445"
+    },
+    badGateway: {
+      code: 502,
+      message: "\u041E\u0448\u0438\u0431\u043A\u0430 \u0448\u043B\u044E\u0437\u0430"
+    },
+    serviceUnavailable: {
+      code: 503,
+      message: "\u0421\u0435\u0440\u0432\u0438\u0441 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D"
+    }
   },
   formats: {
     serverDateTime: "YYYY-MM-DD HH:mm:ss"
@@ -51,17 +91,9 @@ const defaultModuleOptions = {
   }
 };
 
-function transformHttpCodes(httpCodes) {
-  return Object.entries(httpCodes).map(([code, value]) => ({
-    code: `HTTP_CODE_${snakeCase(code).toUpperCase()}`,
-    value
-  }));
-}
-
 function prepareAutoImports({ resolve, options, nuxt }) {
   const cmsConfigPath = resolve(nuxt.options.buildDir, "cms/config");
-  const httpCodesPath = resolve(nuxt.options.buildDir, "cms/http-codes");
-  const httpCodesImports = transformHttpCodes(options.httpCodes).map(({ code }) => ({ name: code, from: httpCodesPath }));
+  const httpStatusesPath = resolve(nuxt.options.buildDir, "cms/http-statuses");
   addComponentsDir({
     path: resolve("./runtime/components/prose"),
     prefix: "Prose",
@@ -77,7 +109,6 @@ function prepareAutoImports({ resolve, options, nuxt }) {
   addPlugin(resolve("./runtime/plugins/api"));
   addPlugin(resolve("./runtime/plugins/zod"));
   addImports([
-    ...httpCodesImports,
     { name: "getCmsConfig", from: cmsConfigPath }
   ]);
   addImportsDir([
@@ -85,7 +116,6 @@ function prepareAutoImports({ resolve, options, nuxt }) {
     resolve("./runtime/composables")
   ]);
   addServerImports([
-    ...httpCodesImports,
     { name: "getCmsConfig", from: cmsConfigPath }
   ]);
   addServerImportsDir([
@@ -93,7 +123,7 @@ function prepareAutoImports({ resolve, options, nuxt }) {
     resolve("./runtime/server/utils")
   ]);
   nuxt.options.nitro.alias ||= {};
-  nuxt.options.nitro.alias["#cms/http-codes"] = httpCodesPath;
+  nuxt.options.nitro.alias["#cms/http-statuses"] = httpStatusesPath;
   nuxt.options.alias["#cms"] = resolve("./runtime");
 }
 
@@ -146,7 +176,8 @@ const icons = {
   strikethrough: "i-lucide-strikethrough",
   code: "i-lucide-code",
   image: "i-lucide-image",
-  editLine: "i-lucide-pen-line"
+  editLine: "i-lucide-pen-line",
+  save: "i-lucide-cloud-check"
 };
 
 async function buildComponentDependencyGraph(componentDir, componentPattern) {
@@ -437,24 +468,22 @@ const formPanelSection = {
   }
 };
 
-const inputSeo = {
+const formSeo = {
   slots: {
     root: "flex flex-col gap-4"
   }
 };
 
-const inputSlug = {
+const formSlug = {
   slots: {
     root: "flex flex-col gap-4"
   }
 };
 
-const inputUploraImage = {
+const formUploraImage = {
   slots: {
-    root: "relative w-full rounded-md overflow-hidden border-1 border-default aspect-3/2 text-sm bg-default",
-    image: "",
-    imageActions: "absolute top-4 right-4 flex gap-2",
-    imageActionsWarning: "absolute top-0 right-0 size-6 bg-linear-to-bl from-error/90 to-transparent rounded-bl-lg text-error flex items-center justify-center",
+    root: "relative w-full gap-1",
+    base: "rounded-md overflow-hidden border-1 border-default bg-default aspect-3/2",
     uploader: "flex flex-col items-center justify-center w-full h-full",
     uploaderPendingIcon: "size-6 animate-spin",
     uploaderIdleButton: "cursor-pointer h-full w-full",
@@ -468,11 +497,6 @@ const inputUploraImage = {
       true: {
         root: "cursor-not-allowed opacity-75"
       }
-    },
-    uploaded: {
-      false: {
-        root: "border-dashed"
-      }
     }
   }
 };
@@ -515,13 +539,13 @@ const theme = {
   FormPanel: formPanel,
   FormPanelAsideSection: formPanelAsideSection,
   FormPanelSection: formPanelSection,
-  InputSeo: inputSeo,
-  InputUploraImage: inputUploraImage,
+  FormSeo: formSeo,
+  FormSlug: formSlug,
+  FormUploraImage: formUploraImage,
   ModalConfirm: modalConfirm,
   TablePanel: tablePanel,
   TableSearchInput: tableSearchInput,
-  UploraImage: uploraImage$1,
-  inputSlug: inputSlug
+  UploraImage: uploraImage$1
 };
 
 const themeEditor = {
@@ -694,12 +718,19 @@ export {}
 `
   });
   templates.push({
-    filename: "cms/http-codes.ts",
+    filename: "cms/http-statuses.ts",
     write: true,
     getContents: () => {
-      const httpCodes = transformHttpCodes(options.httpCodes);
-      const content = httpCodes.map(({ code, value }) => `export const ${code} = '${value}'`).join("\n");
-      return `${content}
+      return `export type HttpStatusKey
+  = (${Object.keys(options.httpStatuses).map((key) => `'${key}'`).join(" | ")})
+  & string
+
+export interface HttpStatus {
+  code: number
+  message: string
+}
+
+export const httpStatuses: Record<HttpStatusKey, HttpStatus> = ${JSON.stringify(options.httpStatuses, null, 2)}
 `;
     }
   });

package/dist/runtime/components/DatePicker.vue

@@ -12,7 +12,19 @@
       :size="size"
       v-bind="ariaAttrs"
     >
-      <span class="truncate">{{ textValue }} </span>
+      <span class="truncate">{{ textValue }}</span>
+
+      <template #trailing>
+        <UButton
+          :icon="appConfig.ui.icons.close"
+          as="div"
+          variant="link"
+          size="sm"
+          color="neutral"
+          class="p-0 ms-auto"
+          @click.prevent.stop="$emit('update:modelValue', void 0)"
+        />
+      </template>
     </UButton>
 
     <template #content>

package/dist/runtime/components/FormPanel.vue

@@ -15,6 +15,7 @@
           <UButton
             type="submit"
             label="Сохранить"
+            :icon="appConfig.ui.icons.save"
             :form="formId"
             :loading="loading"
             loading-auto
@@ -28,6 +29,7 @@
         :state="state"
         :schema="schema"
         :class="ui.form({ class: props.ui?.form })"
+        :validate-on="['change']"
         @submit="submitHandler"
       >
         <div :class="ui.body({ class: props.ui?.body })">

package/dist/runtime/components/{InputSeo.d.vue.ts → FormSeo.d.vue.ts}

@@ -1,20 +1,22 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig, SEO } from '../types';
-import theme from '#build/cms/input-seo';
-type InputSeo = ComponentConfig<typeof theme, AppConfig, 'inputSeo'>;
-export interface InputSeoProps {
-    as?: any;
+import theme from '#build/cms/form-seo';
+type FormSeo = ComponentConfig<typeof theme, AppConfig, 'formSeo'>;
+export interface FormSeoProps {
     class?: any;
-    ui?: InputSeo['slots'];
+    name?: string;
+    ui?: FormSeo['slots'];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<InputSeoProps & {
+declare const __VLS_export: import("vue").DefineComponent<FormSeoProps & {
     modelValue?: SEO;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SEO) => any;
-}, string, import("vue").PublicProps, Readonly<InputSeoProps & {
+}, string, import("vue").PublicProps, Readonly<FormSeoProps & {
     modelValue?: SEO;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: SEO) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/{InputSeo.vue → FormSeo.vue}

@@ -1,7 +1,13 @@
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <UForm
+    :name="name"
+    :schema="schema"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :validate-on="['change']"
+    nested
+  >
     <UFormField
-      name="seo.title"
+      name="title"
       label="Заголовок"
       :hint="`${model.title.length}/60`"
       :ui="{ hint: 'text-xs' }"
@@ -21,7 +27,7 @@
     </UFormField>
 
     <UFormField
-      name="seo.description"
+      name="description"
       label="Описание"
       :hint="`${model.description.length}/160`"
       :ui="{ hint: 'text-xs' }"
@@ -44,22 +50,22 @@
         />
       </template>
     </UFormField>
-  </Primitive>
+  </UForm>
 </template>
 
 <script>
-import theme from "#build/cms/input-seo";
+import theme from "#build/cms/form-seo";
 import { useAppConfig } from "#imports";
-import { Primitive } from "reka-ui";
 import { computed } from "vue";
+import { z } from "zod";
 import { useSeoStats } from "../composables/useSeoStats";
 import { tv } from "../tv";
 </script>
 
 <script setup>
 const props = defineProps({
-  as: { type: null, required: false },
   class: { type: null, required: false },
+  name: { type: String, required: false, default: "seo" },
   ui: { type: null, required: false }
 });
 const model = defineModel({ type: Object, ...{
@@ -69,6 +75,10 @@ const model = defineModel({ type: Object, ...{
   })
 } });
 const appConfig = useAppConfig();
+const schema = z.object({
+  title: z.string().min(1),
+  description: z.string().min(1)
+});
 const { title, description } = useSeoStats(model);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputSeo || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formSeo || {} })());
 </script>

package/dist/runtime/components/{InputSeo.vue.d.ts → FormSeo.vue.d.ts}

@@ -1,20 +1,22 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ComponentConfig, SEO } from '../types';
-import theme from '#build/cms/input-seo';
-type InputSeo = ComponentConfig<typeof theme, AppConfig, 'inputSeo'>;
-export interface InputSeoProps {
-    as?: any;
+import theme from '#build/cms/form-seo';
+type FormSeo = ComponentConfig<typeof theme, AppConfig, 'formSeo'>;
+export interface FormSeoProps {
     class?: any;
-    ui?: InputSeo['slots'];
+    name?: string;
+    ui?: FormSeo['slots'];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<InputSeoProps & {
+declare const __VLS_export: import("vue").DefineComponent<FormSeoProps & {
     modelValue?: SEO;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SEO) => any;
-}, string, import("vue").PublicProps, Readonly<InputSeoProps & {
+}, string, import("vue").PublicProps, Readonly<FormSeoProps & {
     modelValue?: SEO;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: SEO) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/{InputSlug.vue.d.ts → FormSlug.d.vue.ts}

@@ -1,33 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { InputProps } from '@nuxt/ui';
 import type { ComponentConfig } from '../types';
-import theme from '#build/cms/input-slug';
-type InputSlug = ComponentConfig<typeof theme, AppConfig, 'inputSlug'>;
-export interface InputSlugProps {
+import theme from '#build/cms/form-slug';
+type FormSlug = ComponentConfig<typeof theme, AppConfig, 'formSlug'>;
+export interface FormSlugProps {
+    name?: string;
     regenerate?: boolean;
     label?: string;
     titleKey?: string;
     slugKey?: string;
     inputProps?: Omit<InputProps, 'modelModifiers'>;
-    as?: any;
     class?: any;
-    ui?: InputSlug['slots'];
+    ui?: FormSlug['slots'];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<InputSlugProps & {
+declare const __VLS_export: import("vue").DefineComponent<FormSlugProps & {
     title?: string;
     slug?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:title": (value: string | undefined) => any;
     "update:slug": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<InputSlugProps & {
+}, string, import("vue").PublicProps, Readonly<FormSlugProps & {
     title?: string;
     slug?: string;
 }> & Readonly<{
     "onUpdate:title"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:slug"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    name: string;
     titleKey: string;
     slugKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/{InputSlug.vue → FormSlug.vue}

@@ -1,5 +1,10 @@
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <UForm
+    :schema="schema"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :validate-on="['change']"
+    nested
+  >
     <UFormField
       :label="label"
       :name="titleKey"
@@ -34,32 +39,36 @@
         </template>
       </UInput>
     </UFormField>
-  </Primitive>
+  </UForm>
 </template>
 
 <script>
-import theme from "#build/cms/input-slug";
+import theme from "#build/cms/form-slug";
 import { useAppConfig } from "#imports";
-import { Primitive } from "reka-ui";
 import { computed, ref, watch } from "vue";
+import { z } from "zod";
 import { tv } from "../tv";
 import { slugify } from "../utils/slugify";
 </script>
 
 <script setup>
 const props = defineProps({
+  name: { type: String, required: false, default: "slug" },
   regenerate: { type: Boolean, required: false },
   label: { 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 },
   ui: { type: null, required: false }
 });
 const title = defineModel("title", { type: String });
 const slug = defineModel("slug", { type: String });
 const appConfig = useAppConfig();
+const schema = z.object({
+  title: z.string().min(1),
+  slug: z.string().min(1)
+});
 const isRegenerate = ref(props.regenerate);
 watch(title, () => {
   if (!isRegenerate.value) {
@@ -67,5 +76,5 @@ watch(title, () => {
   }
   slug.value = slugify(title.value);
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputSlug || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formSlug || {} })());
 </script>

package/dist/runtime/components/{InputSlug.d.vue.ts → FormSlug.vue.d.ts}

@@ -1,33 +1,34 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { InputProps } from '@nuxt/ui';
 import type { ComponentConfig } from '../types';
-import theme from '#build/cms/input-slug';
-type InputSlug = ComponentConfig<typeof theme, AppConfig, 'inputSlug'>;
-export interface InputSlugProps {
+import theme from '#build/cms/form-slug';
+type FormSlug = ComponentConfig<typeof theme, AppConfig, 'formSlug'>;
+export interface FormSlugProps {
+    name?: string;
     regenerate?: boolean;
     label?: string;
     titleKey?: string;
     slugKey?: string;
     inputProps?: Omit<InputProps, 'modelModifiers'>;
-    as?: any;
     class?: any;
-    ui?: InputSlug['slots'];
+    ui?: FormSlug['slots'];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<InputSlugProps & {
+declare const __VLS_export: import("vue").DefineComponent<FormSlugProps & {
     title?: string;
     slug?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:title": (value: string | undefined) => any;
     "update:slug": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<InputSlugProps & {
+}, string, import("vue").PublicProps, Readonly<FormSlugProps & {
     title?: string;
     slug?: string;
 }> & Readonly<{
     "onUpdate:title"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:slug"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    name: string;
     titleKey: string;
     slugKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;