@hywax/cms 3.4.3 → 3.6.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/prose/uplora-image.ts

@@ -1,5 +1,15 @@
 export default {
   "slots": {
-    "base": "rounded-lg"
+    "base": "rounded-lg",
+    "overlay": "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
+    "content": "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none",
+    "zoomedImage": "w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md"
+  },
+  "variants": {
+    "open": {
+      "false": {
+        "base": "cursor-zoom-in"
+      }
+    }
   }
 }

package/.nuxt/cms/toc.ts

@@ -0,0 +1,21 @@
+export default {
+  "slots": {
+    "root": "",
+    "header": "flex items-center gap-2 text-sm font-medium mb-2",
+    "icon": "size-4",
+    "title": "text-sm font-medium",
+    "list": "min-w-0 border-default border-l-2 pl-4 ml-0.5",
+    "listWithChildren": "ms-3",
+    "item": "min-w-0",
+    "itemWithChildren": "",
+    "link": "group relative text-sm flex items-center focus-visible:outline-primary py-1 font-medium 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.6.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.6.0";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -182,7 +182,8 @@ const icons = {
   code: "i-lucide-code",
   image: "i-lucide-image",
   editLine: "i-lucide-pen-line",
-  save: "i-lucide-cloud-check"
+  save: "i-lucide-cloud-check",
+  toc: "i-lucide-text-align-start"
 };
 
 async function buildComponentDependencyGraph(componentDir, componentPattern) {
@@ -536,6 +537,28 @@ const tableSearchInput = {
   }
 };
 
+const toc = {
+  slots: {
+    root: "",
+    header: "flex items-center gap-2 text-sm font-medium mb-2",
+    icon: "size-4",
+    title: "text-sm font-medium",
+    list: "min-w-0 border-default border-l-2 pl-4 ml-0.5",
+    listWithChildren: "ms-3",
+    item: "min-w-0",
+    itemWithChildren: "",
+    link: "group relative text-sm flex items-center focus-visible:outline-primary py-1 font-medium 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,12 +581,23 @@ const theme = {
   modalConfirm: modalConfirm,
   tablePanel: tablePanel,
   tableSearchInput: tableSearchInput,
+  toc: toc,
   uploraImage: uploraImage$1
 };
 
 const uploraImage = {
   slots: {
-    base: "rounded-lg"
+    base: "rounded-lg",
+    overlay: "fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity",
+    content: "fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none",
+    zoomedImage: "w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md"
+  },
+  variants: {
+    open: {
+      false: {
+        base: "cursor-zoom-in"
+      }
+    }
   }
 };
 

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,24 @@
+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 {
+    title?: string;
+    links: TocLink[];
+    container?: string;
+    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;
+}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Toc.vue

@@ -0,0 +1,74 @@
+<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] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <UIcon :class="ui.icon({ class: props.ui?.icon })" :name="appConfig.ui.icons.toc" />
+
+      <span :class="ui.title({ class: props.ui?.title })">
+        {{ title }}
+      </span>
+    </div>
+
+    <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({
+  title: { type: String, required: false, default: "\u0421\u043E\u0434\u0435\u0440\u0436\u0430\u043D\u0438\u0435" },
+  links: { type: Array, required: true },
+  container: { type: String, required: false },
+  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(document.querySelector(props.container ?? "body")?.querySelectorAll("h2, h3") ?? []);
+  updateHeadings(headings);
+});
+nuxtApp.hooks.hook("page:transition:finish", () => {
+  const headings = Array.from(document.querySelector(props.container ?? "body")?.querySelectorAll("h2, h3") ?? []);
+  updateHeadings(headings);
+});
+</script>

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

@@ -0,0 +1,24 @@
+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 {
+    title?: string;
+    links: TocLink[];
+    container?: string;
+    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;
+}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,10 +1,11 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ImgHTMLAttributes } from 'vue';
 import type { ComponentConfig, ImageFormat, ImageSize } from '../types';
+import type { BuildUploraImage } from '../utils';
 import theme from '#build/cms/uplora-image';
 export type UploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage'>;
 export interface UploraImageProps {
-    image: string;
+    image: string | BuildUploraImage;
     alt?: string;
     formats?: ImageFormat[];
     sizes?: ImageSize[];

package/dist/runtime/components/UploraImage.vue

@@ -41,7 +41,7 @@ import { buildUploraImage } from "../utils";
 
 <script setup>
 const props = defineProps({
-  image: { type: String, required: true },
+  image: { type: [String, Object], required: true },
   alt: { type: String, required: false },
   formats: { type: Array, required: false },
   sizes: { type: Array, required: false },
@@ -59,11 +59,11 @@ const appConfig = useAppConfig();
 const cmsConfig = getCmsConfig();
 const nuxtApp = useNuxtApp();
 const initialLoad = nuxtApp.isHydrating;
-const image = computed(() => buildUploraImage({
+const image = computed(() => typeof props.image === "string" ? buildUploraImage({
   id: props.image,
   formats: props.formats ?? cmsConfig?.components?.uploraImage?.formats,
   sizes: props.sizes
-}));
+}) : props.image);
 const sources = computed(() => {
   if (image.value.sources.length > 1) {
     return image.value.sources.slice(1);

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

@@ -1,10 +1,11 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { ImgHTMLAttributes } from 'vue';
 import type { ComponentConfig, ImageFormat, ImageSize } from '../types';
+import type { BuildUploraImage } from '../utils';
 import theme from '#build/cms/uplora-image';
 export type UploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage'>;
 export interface UploraImageProps {
-    image: string;
+    image: string | BuildUploraImage;
     alt?: string;
     formats?: ImageFormat[];
     sizes?: ImageSize[];

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

@@ -1,9 +1,10 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig, ImageSize } from '../../types';
+import type { ComponentConfig, ImageFormat, 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;
+    image: string;
+    formats?: ImageFormat[];
     alt?: string;
     color?: string;
     sizes?: ImageSize[];

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

@@ -1,25 +1,61 @@
 <template>
-  <BaseUploraImage
-    v-if="image"
-    :image="image"
-    :class="ui.base({ class: [props.ui?.base, props.class] })"
-    :alt="alt"
-    :color="color"
-    :sizes="sizes"
-  />
+  <DialogRoot
+    v-slot="{ close }"
+    v-model:open="open"
+    :modal="false"
+  >
+    <DialogTrigger as-child>
+      <Motion :layout-id="layoutId" as-child :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
+        <BaseUploraImage
+          v-if="image"
+          :image="image"
+          :class="ui.base({ class: [props.ui?.base, props.class] })"
+          :alt="alt"
+          :color="color"
+        />
+      </Motion>
+    </DialogTrigger>
+
+    <DialogPortal>
+      <AnimatePresence>
+        <Motion
+          v-if="open"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :class="ui.overlay({ class: [props.ui?.overlay] })"
+        />
+
+        <div v-if="open" :class="ui.content({ class: [props.ui?.content] })" @click="close">
+          <Motion as-child :layout-id="layoutId" :transition="{ type: 'spring', bounce: 0.15, duration: 0.5, ease: 'easeInOut' }">
+            <img
+              :src="image.original"
+              :alt="alt"
+              :class="ui.zoomedImage({ class: props.ui?.zoomedImage })"
+            >
+          </Motion>
+        </div>
+      </AnimatePresence>
+    </DialogPortal>
+  </DialogRoot>
 </template>
 
 <script>
 import theme from "#build/cms/prose/uplora-image";
 import { getCmsConfig, useAppConfig } from "#imports";
-import { computed } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { AnimatePresence, Motion } from "motion-v";
+import { DialogPortal, DialogRoot, DialogTrigger } from "reka-ui";
+import { computed, onMounted, ref, useId } from "vue";
 import { tv } from "../../tv";
+import { buildUploraImage } from "../../utils";
 import BaseUploraImage from "../UploraImage.vue";
 </script>
 
 <script setup>
 const props = defineProps({
-  image: { type: String, required: false },
+  image: { type: String, required: true },
+  formats: { type: Array, required: false },
   alt: { type: String, required: false },
   color: { type: String, required: false },
   sizes: { type: Array, required: false },
@@ -28,6 +64,19 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const cmsConfig = getCmsConfig();
-const sizes = props.sizes ?? cmsConfig?.components?.prose?.uploraImage?.sizes;
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.prose?.uploraImage || {} })());
+const layoutId = computed(() => `${props.image}::${useId()}`);
+const open = ref(false);
+const image = computed(() => buildUploraImage({
+  id: props.image,
+  formats: props.formats ?? cmsConfig?.components?.uploraImage?.formats,
+  sizes: props.sizes ?? cmsConfig?.components?.prose?.uploraImage?.sizes
+}));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.prose?.uploraImage || {} })({
+  open: open.value
+}));
+onMounted(() => {
+  useEventListener(window, "scroll", () => {
+    open.value = false;
+  });
+});
 </script>

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

@@ -1,9 +1,10 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig, ImageSize } from '../../types';
+import type { ComponentConfig, ImageFormat, 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;
+    image: string;
+    formats?: ImageFormat[];
     alt?: string;
     color?: string;
     sizes?: ImageSize[];

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/dist/runtime/utils/uplora.d.ts

@@ -9,8 +9,9 @@ export interface BuildUploraImageOptions {
     id: string;
     formats?: ImageFormat[];
     sizes?: ImageSize[];
+    originalWithFormat?: boolean;
 }
-export interface BuildUploraImageReturn {
+export interface BuildUploraImage {
     img: string;
     original: string;
     sources: ImageSource[];
@@ -19,7 +20,7 @@ export interface BuildUploraImageReturn {
 /**
  * Создает URL изображения из Uplora
  */
-export declare function buildUploraImage(options: BuildUploraImageOptions): BuildUploraImageReturn;
+export declare function buildUploraImage(options: BuildUploraImageOptions): BuildUploraImage;
 export interface GenerateImageSizesOptions {
     width: number;
     minWidth?: number;

package/dist/runtime/utils/uplora.js

@@ -14,7 +14,7 @@ export function createUploraImageResolver() {
 }
 export function buildUploraImage(options) {
   const resolver = createUploraImageResolver();
-  const original = resolver(options.id);
+  let original = resolver(options.id);
   const sizes = options.sizes ?? [{ descriptor: "1x" }];
   const sources = [];
   function makeSrcset(format) {
@@ -23,7 +23,7 @@ export function buildUploraImage(options) {
     }
     return null;
   }
-  if (options.formats) {
+  if (options.formats?.length) {
     for (const format of options.formats) {
       const srcset = makeSrcset(format);
       sources.push({
@@ -38,6 +38,9 @@ export function buildUploraImage(options) {
         type: imagesExtensionsToMimeTypes[format]
       });
     }
+    if (options.originalWithFormat) {
+      original = resolver(options.id, { format: options.formats[0] });
+    }
   } else {
     const srcset = makeSrcset();
     sources.push({

package/package.json

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