@hywax/cms 3.0.1 → 3.2.0

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

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

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

@@ -2,7 +2,7 @@ export default {
   "slots": {
     "root": "",
     "form": "flex flex-1 flex-row",
-    "body": "flex-1 overflow-y-auto w-full lg:max-w-2xl mx-auto p-4 sm:p-6",
+    "body": "flex-1 w-full mx-auto p-4 sm:p-6 overflow-y-auto",
     "sidebar": "flex-1 overflow-y-auto border-l border-default w-full max-w-xs p-4 sm:p-4"
   },
   "variants": {
@@ -10,6 +10,11 @@ export default {
       "true": {
         "sidebar": "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px *:not-last:relative *:not-last:pb-4 flex flex-col gap-4"
       }
+    },
+    "bodyFit": {
+      "true": {
+        "body": "lg:max-w-2xl mx-auto"
+      }
     }
   }
 }

package/.nuxt/cms/form-uplora-image.ts

@@ -1,7 +1,7 @@
 export default {
   "slots": {
     "root": "relative w-full gap-1",
-    "base": "rounded-md overflow-hidden border-1 border-default bg-default aspect-3/2",
+    "base": "rounded-md overflow-hidden ring-1 ring-inset ring-accented 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",

package/.nuxt/cms.css

@@ -11,6 +11,7 @@
 @source "./cms/table-panel.ts";
 @source "./cms/modal-confirm.ts";
 @source "./cms/table-search-input.ts";
+@source "./cms/table-preview-seo.ts";
 @source "./cms/ms-core-options.ts";
 @source "./cms/ms-nuxt-context.ts";
 @source "./cms/date-picker.ts";

package/dist/module.json

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

package/dist/module.mjs

@@ -7,7 +7,7 @@ import { pascalCase, kebabCase } from 'scule';
 import { globSync } from 'tinyglobby';
 
 const name = "@hywax/cms";
-const version = "3.0.1";
+const version = "3.2.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -437,7 +437,7 @@ const formPanel = {
   slots: {
     root: "",
     form: "flex flex-1 flex-row",
-    body: "flex-1 overflow-y-auto w-full lg:max-w-2xl mx-auto p-4 sm:p-6",
+    body: "flex-1 w-full mx-auto p-4 sm:p-6 overflow-y-auto",
     sidebar: "flex-1 overflow-y-auto border-l border-default w-full max-w-xs p-4 sm:p-4"
   },
   variants: {
@@ -445,6 +445,11 @@ const formPanel = {
       true: {
         sidebar: "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px *:not-last:relative *:not-last:pb-4 flex flex-col gap-4"
       }
+    },
+    bodyFit: {
+      true: {
+        body: "lg:max-w-2xl mx-auto"
+      }
     }
   }
 };
@@ -461,9 +466,10 @@ const formPanelAsideSection = {
 
 const formPanelSection = {
   slots: {
-    root: "",
+    root: "flex flex-col gap-2",
+    header: "",
     title: "text-base text-pretty font-semibold text-highlighted",
-    description: "text-[15px] text-pretty text-muted mb-2",
+    description: "text-[15px] text-pretty text-muted",
     body: "relative rounded-lg bg-elevated/50 ring ring-default grid gap-x-8 gap-y-4 p-4 sm:p-6"
   }
 };
@@ -483,7 +489,7 @@ const formSlug = {
 const formUploraImage = {
   slots: {
     root: "relative w-full gap-1",
-    base: "rounded-md overflow-hidden border-1 border-default bg-default aspect-3/2",
+    base: "rounded-md overflow-hidden ring-1 ring-inset ring-accented 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",

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

@@ -2,6 +2,7 @@ import type { EditorCustomHandlers, EditorEmits, EditorProps } from '@nuxt/ui';
 import type { HTMLContent } from '@tiptap/vue-3';
 export interface EditorFullProps extends Omit<EditorProps<HTMLContent>, 'autofocus' | 'contentType' | 'placeholder'> {
     customHandlers?: EditorCustomHandlers;
+    madeRaw?: boolean;
 }
 export interface EditorFullEmits extends EditorEmits<HTMLContent> {
 }

package/dist/runtime/components/EditorFull.vue

@@ -1,7 +1,19 @@
 <template>
+  <UTextarea
+    v-if="madeRaw"
+    v-bind="forwardedTextarea"
+    :ui="{
+  root: 'w-full px-6',
+  base: 'text-md text-default min-h-screen'
+}"
+    variant="none"
+    placeholder="Введите текст..."
+    autoresize
+  />
   <UEditor
+    v-else
     v-slot="{ editor, handlers }"
-    v-bind="forwarded"
+    v-bind="forwardedEditor"
     class="min-h-screen"
     content-type="markdown"
     placeholder="Введите '/' для выбора блока..."
@@ -74,7 +86,7 @@
 
 <script>
 import { useAppConfig } from "#imports";
-import { reactiveOmit } from "@vueuse/core";
+import { reactiveOmit, reactivePick } from "@vueuse/core";
 import { useForwardPropsEmits } from "reka-ui";
 import { computed } from "vue";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
@@ -87,6 +99,7 @@ import EditorLinkPopover from "./EditorLinkPopover.vue";
 <script setup>
 const props = defineProps({
   customHandlers: { type: Object, required: false },
+  madeRaw: { type: Boolean, required: false },
   as: { type: null, required: false },
   modelValue: { type: String, required: false },
   starterKit: { type: Object, required: false },
@@ -125,7 +138,8 @@ const props = defineProps({
   onDelete: { type: Function, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
-const forwarded = useForwardPropsEmits(reactiveOmit(props, "extensions", "customHandlers", "handlers"), emit);
+const forwardedEditor = useForwardPropsEmits(reactiveOmit(props, "extensions", "customHandlers", "handlers", "madeRaw"), emit);
+const forwardedTextarea = useForwardPropsEmits(reactivePick(props, "modelValue"), emit);
 const appConfig = useAppConfig();
 const extensions = computed(() => [
   UploraImageExtension,

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

@@ -2,6 +2,7 @@ import type { EditorCustomHandlers, EditorEmits, EditorProps } from '@nuxt/ui';
 import type { HTMLContent } from '@tiptap/vue-3';
 export interface EditorFullProps extends Omit<EditorProps<HTMLContent>, 'autofocus' | 'contentType' | 'placeholder'> {
     customHandlers?: EditorCustomHandlers;
+    madeRaw?: boolean;
 }
 export interface EditorFullEmits extends EditorEmits<HTMLContent> {
 }

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

@@ -13,6 +13,7 @@ export interface FormPanelProps<S extends FormSchema, T extends FormData<S> = Fo
     loading?: boolean;
     handler: (event: FormSubmitEvent<T>) => Promise<void>;
     asideDivide?: boolean;
+    bodyFit?: boolean;
     showReset?: boolean;
     class?: any;
     ui?: FormPanel['slots'];

package/dist/runtime/components/FormPanel.vue

@@ -60,6 +60,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   handler: { type: Function, required: true },
   asideDivide: { type: Boolean, required: false },
+  bodyFit: { type: Boolean, required: false, default: true },
   showReset: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -71,5 +72,8 @@ const formId = computed(() => props.formId ?? `form-${useId()}`);
 async function submitHandler(event) {
   await props.handler?.(event);
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanel || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanel || {} })({
+  bodyFit: props.bodyFit,
+  asideDivide: props.asideDivide
+}));
 </script>

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

@@ -13,6 +13,7 @@ export interface FormPanelProps<S extends FormSchema, T extends FormData<S> = Fo
     loading?: boolean;
     handler: (event: FormSubmitEvent<T>) => Promise<void>;
     asideDivide?: boolean;
+    bodyFit?: boolean;
     showReset?: boolean;
     class?: any;
     ui?: FormPanel['slots'];

package/dist/runtime/components/FormPanelSection.vue

@@ -1,10 +1,12 @@
 <template>
   <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="title" :class="ui.title({ class: props.ui?.title })">
-      {{ title }}
-    </div>
-    <div v-if="description" :class="ui.description({ class: props.ui?.description })">
-      {{ description }}
+    <div v-if="title || description" :class="ui.header({ class: props.ui?.header })">
+      <div v-if="title" :class="ui.title({ class: props.ui?.title })">
+        {{ title }}
+      </div>
+      <div v-if="description" :class="ui.description({ class: props.ui?.description })">
+        {{ description }}
+      </div>
     </div>
     <div :class="ui.body({ class: props.ui?.body })">
       <slot />

package/dist/runtime/components/FormUploraImage.vue

@@ -89,7 +89,8 @@
         placeholder="Введите описание..."
         variant="none"
         size="xs"
-        :ui="{ base: 'text-center' }"
+        :ui="{ base: 'text-center text-toned' }"
+        @update:model-value="onAltInput"
       />
     </UFormField>
   </UForm>
@@ -140,6 +141,14 @@ const { open, execute: uploadExecute, status: uploadStatus, reset: resetUpload,
   accept: "image/*"
 });
 const { execute: deleteExecute, onDeleted } = useUploraDelete();
+function onAltInput(alt) {
+  modelValue.value = {
+    ...modelValue.value,
+    alt: alt || void 0
+  };
+  emitFormChange();
+  emitFormInput();
+}
 function resetState() {
   modelValue.value = {
     image: void 0,

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

@@ -0,0 +1,8 @@
+import type { SEO } from '../types/seo';
+export interface TableCellSeoProps {
+    seo: SEO;
+    as?: any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<TableCellSeoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellSeoProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/TablePreviewSeo.vue

@@ -0,0 +1,23 @@
+<template>
+  <UBadge
+    :color="computeColor(rating)"
+    :label="`${rating}/100`"
+    variant="subtle"
+  />
+</template>
+
+<script>
+import { computed } from "#imports";
+import { useSeoStats } from "../composables/useSeoStats";
+</script>
+
+<script setup>
+const props = defineProps({
+  seo: { type: Object, required: true },
+  as: { type: null, required: false }
+});
+const { title, description, computeColor } = useSeoStats(props.seo);
+const rating = computed(() => {
+  return Math.round((title.value.progress + description.value.progress) / 2);
+});
+</script>

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

@@ -0,0 +1,8 @@
+import type { SEO } from '../types/seo';
+export interface TableCellSeoProps {
+    seo: SEO;
+    as?: any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<TableCellSeoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellSeoProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -7,6 +7,7 @@ interface SEOStats {
 interface UseSeoStatsReturn {
     title: ComputedRef<SEOStats>;
     description: ComputedRef<SEOStats>;
+    computeColor: (score: number) => 'error' | 'warning' | 'success';
 }
 export declare function useSeoStats(options: MaybeRefOrGetter<SEO>): UseSeoStatsReturn;
 export {};

package/dist/runtime/composables/useSeoStats.js

@@ -39,6 +39,7 @@ export function useSeoStats(options) {
   });
   return {
     title,
-    description
+    description,
+    computeColor
   };
 }

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

@@ -16,6 +16,7 @@ export * from '../components/prose/UploraImage.vue';
 export * from '../components/TableColumnSorting.vue';
 export * from '../components/TableFilters.vue';
 export * from '../components/TablePanel.vue';
+export * from '../components/TablePreviewSeo.vue';
 export * from '../components/TableSearchInput.vue';
 export * from '../components/UploraImage.vue';
 export * from '../composables/useAdmin';

package/dist/runtime/types/index.js

@@ -16,6 +16,7 @@ export * from "../components/prose/UploraImage.vue";
 export * from "../components/TableColumnSorting.vue";
 export * from "../components/TableFilters.vue";
 export * from "../components/TablePanel.vue";
+export * from "../components/TablePreviewSeo.vue";
 export * from "../components/TableSearchInput.vue";
 export * from "../components/UploraImage.vue";
 export * from "../composables/useAdmin.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hywax/cms",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "imports": {
     "#build/cms/*": "./.nuxt/cms/*.ts",
@@ -62,6 +62,7 @@
   "dependencies": {
     "@dicebear/collection": "^9.2.4",
     "@dicebear/core": "^9.2.4",
+    "@iconify-json/lucide": "^1.2.83",
     "@nuxt/kit": "^4.2.2",
     "@nuxt/ui": "^4.3.0",
     "@nuxtjs/mdc": "^0.19.2",
@@ -94,7 +95,7 @@
     "@vue/test-utils": "^2.4.6",
     "changelogen-monorepo": "^0.5.0",
     "eslint": "^9.39.2",
-    "happy-dom": "^20.0.11",
+    "happy-dom": "^20.1.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "nuxt": "^4.2.2",