@hywax/cms 3.4.3 → 3.5.0

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "3.4.3",
+  "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.3";
+const version = "3.5.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -536,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",
@@ -558,6 +577,7 @@ const theme = {
   modalConfirm: modalConfirm,
   tablePanel: tablePanel,
   tableSearchInput: tableSearchInput,
+  toc: toc,
   uploraImage: uploraImage$1
 };
 

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/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.3",
+  "version": "3.5.0",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "imports": {
     "#build/cms/*": "./.nuxt/cms/*.ts",