@hywax/cms 3.7.0 → 3.8.1

package/.nuxt/cms/prose/uplora-image-gallery.ts

@@ -3,7 +3,7 @@ export default {
     "base": "grid gap-4"
   },
   "variants": {
-    "columns": {
+    "layout": {
       "two-columns": {
         "base": "grid-cols-2"
       },

package/dist/module.json

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

package/dist/module.mjs

@@ -7,7 +7,7 @@ import { pascalCase, kebabCase, camelCase } from 'scule';
 import { globSync } from 'tinyglobby';
 
 const name = "@hywax/cms";
-const version = "3.7.0";
+const version = "3.8.1";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -619,7 +619,7 @@ const uploraImageGallery = {
     base: "grid gap-4"
   },
   variants: {
-    columns: {
+    layout: {
       "two-columns": {
         base: "grid-cols-2"
       },

package/dist/runtime/components/FormPanel.vue

@@ -29,7 +29,7 @@
         :state="state"
         :schema="schema"
         :class="ui.form({ class: props.ui?.form })"
-        :validate-on="['change']"
+        :validate-on="['input']"
         @submit="submitHandler"
       >
         <div :class="ui.body({ class: props.ui?.body })">

package/dist/runtime/components/FormSeo.vue

@@ -3,7 +3,7 @@
     :name="name"
     :schema="schema"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :validate-on="['change']"
+    :validate-on="['input']"
     nested
   >
     <UFormField
@@ -83,14 +83,15 @@ const state = computed({
     };
   },
   set: (value) => {
-    model.value = value;
+    const isEmpty = Object.values(value).every((value2) => !value2);
+    model.value = isEmpty ? null : value;
   }
 });
 const appConfig = useAppConfig();
 const schema = z.object({
   title: z.string(),
   description: z.string()
-});
+}).nullable();
 const { title, description } = useSeoStats(() => state.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formSeo || {} })());
 </script>

package/dist/runtime/components/FormSlug.vue

@@ -1,8 +1,9 @@
 <template>
   <UForm
+    ref="formRef"
     :schema="schema"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :validate-on="['change']"
+    :validate-on="['input']"
     nested
   >
     <UFormField
@@ -45,7 +46,7 @@
 <script>
 import theme from "#build/cms/form-slug";
 import { useAppConfig } from "#imports";
-import { computed, ref, watch } from "vue";
+import { computed, ref, useTemplateRef, watch } from "vue";
 import { z } from "zod";
 import { tv } from "../tv";
 import { slugify } from "../utils/slugify";
@@ -69,6 +70,7 @@ const schema = z.object({
   title: z.string().min(1),
   slug: z.string().min(1)
 });
+const formRef = useTemplateRef("formRef");
 const isRegenerate = ref(props.regenerate);
 watch(title, () => {
   if (!isRegenerate.value) {
@@ -76,5 +78,10 @@ watch(title, () => {
   }
   slug.value = slugify(title.value);
 });
+watch(slug, () => {
+  if (formRef.value?.getErrors("slug")) {
+    formRef.value?.clear("slug");
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formSlug || {} })());
 </script>

package/dist/runtime/components/FormUploraImage.vue

@@ -3,7 +3,7 @@
     :name="name"
     :schema="schema"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :validate-on="['change']"
+    :validate-on="['input']"
     :nested="nested"
   >
     <UFormField name="image" :label="label">
@@ -148,7 +148,8 @@ const state = computed({
     };
   },
   set: (value) => {
-    model.value = value;
+    const isEmpty = Object.values(value).every((value2) => !value2);
+    model.value = isEmpty ? null : value;
   }
 });
 const appConfig = useAppConfig();
@@ -160,7 +161,7 @@ const schema = z.object({
   lqip: z.string().min(1).optional(),
   color: z.string().min(1).optional(),
   aspect: z.union([z.literal("horizontal"), z.literal("vertical"), z.literal("dynamic")]).optional()
-});
+}).nullable();
 const extensions = computed(() => imagesExtensions.filter((extension) => extension !== "jpeg").join(", "));
 const aspectItems = [
   { value: "horizontal", label: "\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u044B\u0439" },

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

@@ -5,8 +5,8 @@ export interface TablePreviewLinkProps {
     to?: RouteLocationRaw;
     target?: ButtonProps['target'];
     label: string;
-    description?: string;
-    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'>;
+    description?: string | null;
+    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'> | null;
 }
 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;

package/dist/runtime/components/TablePreviewLink.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="relative flex items-center gap-2">
+    <!-- TODO: добавить <CUploraPlaceholder /> -->
     <div v-if="image" class="overflow-hidden rounded-lg shrink-0 size-8">
       <CUploraImage
         v-bind="image"
@@ -32,7 +33,7 @@ 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 }
+  description: { type: [String, null], required: false },
+  image: { type: [Object, null], required: false }
 });
 </script>

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

@@ -5,8 +5,8 @@ export interface TablePreviewLinkProps {
     to?: RouteLocationRaw;
     target?: ButtonProps['target'];
     label: string;
-    description?: string;
-    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'>;
+    description?: string | null;
+    image?: Pick<UploraImageProps, 'image' | 'alt' | 'color' | 'lqip'> | null;
 }
 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;

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

@@ -1,6 +1,6 @@
 import type { SEO } from '../types/seo';
 export interface TableCellSeoProps {
-    seo: SEO;
+    seo: SEO | null;
     as?: any;
 }
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/TablePreviewSeo.vue

@@ -13,10 +13,11 @@ import { useSeoStats } from "../composables/useSeoStats";
 
 <script setup>
 const props = defineProps({
-  seo: { type: Object, required: true },
+  seo: { type: [Object, null], required: true },
   as: { type: null, required: false }
 });
-const { title, description, computeColor } = useSeoStats(props.seo);
+const seo = computed(() => props.seo ?? { title: "", description: "" });
+const { title, description, computeColor } = useSeoStats(seo);
 const rating = computed(() => {
   return Math.round((title.value.progress + description.value.progress) / 2);
 });

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

@@ -1,6 +1,6 @@
 import type { SEO } from '../types/seo';
 export interface TableCellSeoProps {
-    seo: SEO;
+    seo: SEO | null;
     as?: any;
 }
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/prose/UploraImageGallery.d.vue.ts

@@ -3,7 +3,7 @@ import type { ComponentConfig } from '../../types';
 import theme from '#build/cms/prose/uplora-image-gallery';
 export type ProseUploraImageGallery = ComponentConfig<typeof theme, AppConfig, 'uploraImageGallery', 'cms.prose'>;
 export interface ProseUploraImageGalleryProps {
-    columns: 'two-columns' | 'three-columns';
+    layout: 'two-columns' | 'three-columns';
     class?: any;
     ui?: ProseUploraImageGallery['slots'];
 }

package/dist/runtime/components/prose/UploraImageGallery.vue

@@ -13,12 +13,12 @@ import { tv } from "../../tv";
 
 <script setup>
 const props = defineProps({
-  columns: { type: String, required: true },
+  layout: { type: String, required: true },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.prose?.uploraImageGallery || {} })({
-  columns: props.columns
+  layout: props.layout
 }));
 </script>

package/dist/runtime/components/prose/UploraImageGallery.vue.d.ts

@@ -3,7 +3,7 @@ import type { ComponentConfig } from '../../types';
 import theme from '#build/cms/prose/uplora-image-gallery';
 export type ProseUploraImageGallery = ComponentConfig<typeof theme, AppConfig, 'uploraImageGallery', 'cms.prose'>;
 export interface ProseUploraImageGalleryProps {
-    columns: 'two-columns' | 'three-columns';
+    layout: 'two-columns' | 'three-columns';
     class?: any;
     ui?: ProseUploraImageGallery['slots'];
 }

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

@@ -19,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?: ((row: TableRow<T>) => TablePreviewLinkProps['image'] | undefined) | TablePreviewLinkProps['image'] | undefined;
-    description?: ((row: TableRow<T>) => string | undefined) | string | undefined;
+    image?: ((row: TableRow<T>) => TablePreviewLinkProps['image'] | undefined | null) | TablePreviewLinkProps['image'] | undefined | null;
+    description?: ((row: TableRow<T>) => string | undefined | null) | string | undefined | null;
 };
 export declare function useTableColumns<I extends Record<string, any>, T extends readonly TableColumnCustom<I>[] = readonly TableColumnCustom<I>[]>(columns: T): {
     columns: {

package/dist/runtime/editor/uplora-image-gallery/EditorUploraImageGallery.js

@@ -20,7 +20,7 @@ export const UploraImageGallery = Node.create({
   content: "block*",
   addAttributes() {
     return {
-      columns: { default: "two-columns" }
+      layout: { default: "two-columns" }
     };
   },
   ...createBlockMarkdownSpec({ name: "uplora-image-gallery", content: "block" }),

package/dist/runtime/editor/uplora-image-gallery/EditorUploraImageGalleryNode.vue

@@ -14,9 +14,9 @@
               variant="ghost"
               color="neutral"
               size="sm"
-              :items="columnsItems"
-              :model-value="attrs.columns"
-              @update:model-value="updateAttributes({ ...attrs, columns: $event })"
+              :items="layoutItems"
+              :model-value="attrs.layout"
+              @update:model-value="updateAttributes({ ...attrs, layout: $event })"
             />
             <UButton
               color="neutral"
@@ -63,7 +63,7 @@ const theme = {
     actions: "flex items-center gap-0.5"
   },
   variants: {
-    columns: {
+    layout: {
       "two-columns": {
         content: "grid-cols-2"
       },
@@ -73,7 +73,7 @@ const theme = {
     }
   }
 };
-const columnsItems = [
+const layoutItems = [
   { value: "two-columns", label: "2 \u043A\u043E\u043B\u043E\u043D\u043A\u0438" },
   { value: "three-columns", label: "3 \u043A\u043E\u043B\u043E\u043D\u043A\u0438" }
 ];
@@ -88,6 +88,6 @@ function handleInsertImage() {
   });
 }
 const ui = computed(() => tv({ extend: tv(theme) })({
-  columns: attrs.value.columns
+  layout: attrs.value.layout
 }));
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hywax/cms",
   "type": "module",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "imports": {
     "#build/cms/*": "./.nuxt/cms/*.ts",