@hywax/cms 3.4.2 → 3.5.0

package/.nuxt/cms/config.ts

@@ -3,11 +3,14 @@ const cmsConfig = {
   "formats": {
     "serverDateTime": "YYYY-MM-DD HH:mm:ss"
   },
-  "prose": {
-    "enabled": true,
+  "components": {
     "uploraImage": {
-      "formats": [],
-      "sizes": []
+      "formats": []
+    },
+    "prose": {
+      "uploraImage": {
+        "sizes": []
+      }
     }
   }
 }

package/.nuxt/cms/index.ts

@@ -9,5 +9,6 @@ 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 toc } from './toc'
 export { default as uploraImage } from './uplora-image'
 export * as prose from './prose'

package/.nuxt/cms/toc.ts

@@ -0,0 +1,18 @@
+export default {
+  "slots": {
+    "root": "",
+    "list": "min-w-0",
+    "listWithChildren": "ms-3",
+    "item": "min-w-0",
+    "itemWithChildren": "",
+    "link": "group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors",
+    "linkText": "truncate"
+  },
+  "variants": {
+    "active": {
+      "true": {
+        "link": "text-primary"
+      }
+    }
+  }
+}

package/.nuxt/cms.css

@@ -1,4 +1,5 @@
 @source "./cms/prose";
+@source "./cms/toc.ts";
 @source "./cms/form-panel.ts";
 @source "./cms/form-panel-section.ts";
 @source "./cms/form-slug.ts";

package/dist/module.d.mts

@@ -50,14 +50,20 @@ interface CMSCoreOptions {
     formats?: {
         serverDateTime?: string;
     };
-    /**
-     * Prose configuration
-     */
-    prose?: {
-        enabled?: boolean;
+    components?: {
+        /**
+         * Uplora image configuration
+         */
         uploraImage?: {
             formats?: ImageFormat[];
-            sizes?: ImageSize[];
+        };
+        /**
+         * Prose configuration
+         */
+        prose?: {
+            uploraImage?: {
+                sizes?: ImageSize[];
+            };
         };
     };
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "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.4.2";
+const version = "3.5.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -31,6 +31,19 @@ const defaultModuleOptions = {
   envPrefix: "APP_",
   unovis: false,
   componentDetection: true,
+  components: {
+    uploraImage: {
+      formats: []
+    },
+    prose: {
+      uploraImage: {
+        sizes: []
+      }
+    }
+  },
+  formats: {
+    serverDateTime: "YYYY-MM-DD HH:mm:ss"
+  },
   httpStatuses: {
     badRequest: {
       code: 400,
@@ -80,16 +93,6 @@ const defaultModuleOptions = {
       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"
-  },
-  prose: {
-    enabled: true,
-    uploraImage: {
-      formats: [],
-      sizes: []
-    }
   }
 };
 
@@ -533,6 +536,25 @@ const tableSearchInput = {
   }
 };
 
+const toc = {
+  slots: {
+    root: "",
+    list: "min-w-0",
+    listWithChildren: "ms-3",
+    item: "min-w-0",
+    itemWithChildren: "",
+    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1 text-muted hover:text-default transition-colors",
+    linkText: "truncate"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary"
+      }
+    }
+  }
+};
+
 const uploraImage$1 = {
   slots: {
     root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
@@ -555,6 +577,7 @@ const theme = {
   modalConfirm: modalConfirm,
   tablePanel: tablePanel,
   tableSearchInput: tableSearchInput,
+  toc: toc,
   uploraImage: uploraImage$1
 };
 
@@ -607,7 +630,7 @@ async function getAppTemplates({ options, resolve, nuxt, detectedComponents: con
     }
   }
   async function generateSources() {
-    const sources2 = [];
+    const sources = [];
     const layers = getLayerDirectories(nuxt).map((layer) => layer.app);
     if (options.componentDetection) {
       const detectedComponents = await detectUsedComponents({
@@ -628,14 +651,12 @@ async function getAppTemplates({ options, resolve, nuxt, detectedComponents: con
           logger.success(`CMS detected ${detectedComponents.size} components in use (including dependencies)`);
         }
         previousDetectedComponents = detectedComponents;
-        if (options.prose?.enabled) {
-          sources2.push('@source "./cms/prose";');
-        }
+        sources.push('@source "./cms/prose";');
         for (const component of detectedComponents) {
           const kebabComponent = kebabCase(component);
           const camelComponent = camelCase(component);
           if (theme[camelComponent]) {
-            sources2.push(`@source "./cms/${kebabComponent}.ts";`);
+            sources.push(`@source "./cms/${kebabComponent}.ts";`);
           }
           contextDetectedComponents.add(component);
         }
@@ -644,27 +665,26 @@ async function getAppTemplates({ options, resolve, nuxt, detectedComponents: con
           logger.info("CMS detected no components in use, including all components");
         }
         previousDetectedComponents = /* @__PURE__ */ new Set();
-        sources2.push('@source "./cms";');
+        sources.push('@source "./cms";');
       }
     } else {
-      sources2.push('@source "./cms";');
+      sources.push('@source "./cms";');
     }
-    return sources2.join("\n");
-  }
-  if (options.prose?.enabled) {
-    templates.push({
-      filename: `cms/prose/index.ts`,
-      write: true,
-      getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
-    });
-    writeThemeTemplate(themeProse, "prose");
+    return sources.join("\n");
   }
+  templates.push({
+    filename: `cms/prose/index.ts`,
+    write: true,
+    getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
+  writeThemeTemplate(themeProse, "prose");
   writeThemeTemplate(theme);
-  const sources = await generateSources();
+  await generateSources();
   templates.push({
     filename: "cms.css",
     write: true,
     getContents: async () => {
+      const sources = await generateSources();
       return `${sources}
 ${options.unovis ? `
     @layer components {
@@ -704,7 +724,7 @@ ${options.unovis ? `
     write: true,
     getContents: () => [
       ...Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`),
-      ...options.prose?.enabled ? [`export * as prose from './prose'`] : []
+      `export * as prose from './prose'`
     ].join("\n")
   });
   templates.push({
@@ -744,7 +764,7 @@ export {}
       const config = {
         name: options.name,
         formats: options.formats,
-        prose: options.prose
+        components: options.components
       };
       return `const cmsConfig = ${JSON.stringify(config, null, 2)}
 

package/dist/runtime/components/TablePreviewLink.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative flex items-center gap-2">
-    <div v-if="image" class="overflow-hidden rounded-lg shrink-0">
+    <div v-if="image" class="overflow-hidden rounded-lg shrink-0 size-8">
       <CUploraImage
         v-bind="image"
         :sizes="[{ width: 32, height: 32, descriptor: '1x' }]"

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { TocLink } from '@nuxtjs/mdc';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/toc';
+type Toc = ComponentConfig<typeof theme, AppConfig, 'toc'>;
+export interface TocProps {
+    links: TocLink[];
+    containerRef?: HTMLElement | null;
+    class?: any;
+    ui?: Toc['slots'];
+}
+export interface TocEmits {
+    move: [string];
+}
+declare const __VLS_export: import("vue").DefineComponent<TocProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<TocProps> & Readonly<{
+    onMove?: ((args_0: string) => any) | undefined;
+}>, {
+    containerRef: HTMLElement | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Toc.vue

@@ -0,0 +1,65 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <DefineListTemplate v-slot="{ links, level }">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })">
+        <a
+          :href="`#${link.id}`"
+          :class="ui.link({ class: props.ui?.link, active: activeHeadings.includes(link.id) })"
+          @click="scrollToHeading(link.id)"
+        >
+          {{ link.text }}
+        </a>
+
+        <ReuseListTemplate
+          v-if="link.children?.length"
+          :links="link.children"
+          :level="level + 1"
+        />
+      </li>
+    </ul>
+  </DefineListTemplate>
+
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ReuseListTemplate :links="props.links" :level="0" />
+  </div>
+</template>
+
+<script setup>
+import theme from "#build/cms/toc";
+import { useAppConfig, useNuxtApp, useRouter, useScrollspy } from "#imports";
+import { createReusableTemplate } from "@vueuse/core";
+import { computed } from "vue";
+import { tv } from "../tv";
+const props = defineProps({
+  links: { type: Array, required: true },
+  containerRef: { type: null, required: false, default: null },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emits = defineEmits(["move"]);
+const router = useRouter();
+const appConfig = useAppConfig();
+const { activeHeadings, updateHeadings } = useScrollspy();
+const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
+  props: {
+    links: Array,
+    level: Number
+  }
+});
+function scrollToHeading(id) {
+  const encodedId = encodeURIComponent(id);
+  router.push(`#${encodedId}`);
+  emits("move", id);
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.toc || {} })());
+const nuxtApp = useNuxtApp();
+nuxtApp.hooks.hook("page:loading:end", () => {
+  const headings = Array.from((props.containerRef || document)?.querySelectorAll("h2, h3") ?? []);
+  updateHeadings(headings);
+});
+nuxtApp.hooks.hook("page:transition:finish", () => {
+  const headings = Array.from((props.containerRef || document)?.querySelectorAll("h2, h3") ?? []);
+  updateHeadings(headings);
+});
+</script>

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { TocLink } from '@nuxtjs/mdc';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/toc';
+type Toc = ComponentConfig<typeof theme, AppConfig, 'toc'>;
+export interface TocProps {
+    links: TocLink[];
+    containerRef?: HTMLElement | null;
+    class?: any;
+    ui?: Toc['slots'];
+}
+export interface TocEmits {
+    move: [string];
+}
+declare const __VLS_export: import("vue").DefineComponent<TocProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    move: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<TocProps> & Readonly<{
+    onMove?: ((args_0: string) => any) | undefined;
+}>, {
+    containerRef: HTMLElement | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UploraImage.vue

@@ -33,7 +33,7 @@
 
 <script>
 import theme from "#build/cms/uplora-image";
-import { useAppConfig, useHead, useNuxtApp } from "#imports";
+import { getCmsConfig, useAppConfig, useHead, useNuxtApp } from "#imports";
 import { computed, onMounted, useTemplateRef } from "vue";
 import { tv } from "../tv";
 import { buildUploraImage } from "../utils";
@@ -55,11 +55,13 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const emit = defineEmits(["load", "error"]);
+const appConfig = useAppConfig();
+const cmsConfig = getCmsConfig();
 const nuxtApp = useNuxtApp();
 const initialLoad = nuxtApp.isHydrating;
 const image = computed(() => buildUploraImage({
   id: props.image,
-  formats: props.formats,
+  formats: props.formats ?? cmsConfig?.components?.uploraImage?.formats,
   sizes: props.sizes
 }));
 const sources = computed(() => {
@@ -106,6 +108,5 @@ onMounted(() => {
     emit("error", event);
   };
 });
-const appConfig = useAppConfig();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })());
 </script>

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

@@ -1,11 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig } from '../../types';
+import type { ComponentConfig, ImageSize } from '../../types';
 import theme from '#build/cms/prose/uplora-image';
 export type ProseUploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage', 'cms.prose'>;
 export interface ProseUploraImageProps {
     image?: string;
     alt?: string;
     color?: string;
+    sizes?: ImageSize[];
     class?: any;
     ui?: ProseUploraImage['slots'];
 }

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

@@ -5,7 +5,6 @@
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     :alt="alt"
     :color="color"
-    :formats="formats"
     :sizes="sizes"
   />
 </template>
@@ -23,12 +22,12 @@ const props = defineProps({
   image: { type: String, required: false },
   alt: { type: String, required: false },
   color: { type: String, required: false },
+  sizes: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const cmsConfig = getCmsConfig();
-const formats = cmsConfig?.prose?.uploraImage?.formats.length > 0 ? cmsConfig?.prose?.uploraImage?.formats : void 0;
-const sizes = cmsConfig?.prose?.uploraImage?.sizes.length > 0 ? cmsConfig?.prose?.uploraImage?.sizes : void 0;
+const sizes = props.sizes ?? cmsConfig?.components?.prose?.uploraImage?.sizes;
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.prose?.uploraImage || {} })());
 </script>

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

@@ -1,11 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig } from '../../types';
+import type { ComponentConfig, ImageSize } from '../../types';
 import theme from '#build/cms/prose/uplora-image';
 export type ProseUploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage', 'cms.prose'>;
 export interface ProseUploraImageProps {
     image?: string;
     alt?: string;
     color?: string;
+    sizes?: ImageSize[];
     class?: any;
     ui?: ProseUploraImage['slots'];
 }

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

@@ -18,6 +18,7 @@ export * from '../components/TableFilters.vue';
 export * from '../components/TablePanel.vue';
 export * from '../components/TablePreviewSeo.vue';
 export * from '../components/TableSearchInput.vue';
+export * from '../components/Toc.vue';
 export * from '../components/UploraImage.vue';
 export * from '../composables/useAdmin';
 export * from '../composables/useApi';

package/dist/runtime/types/index.js

@@ -18,6 +18,7 @@ export * from "../components/TableFilters.vue";
 export * from "../components/TablePanel.vue";
 export * from "../components/TablePreviewSeo.vue";
 export * from "../components/TableSearchInput.vue";
+export * from "../components/Toc.vue";
 export * from "../components/UploraImage.vue";
 export * from "../composables/useAdmin.js";
 export * from "../composables/useApi.js";

package/package.json

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