@hywax/cms 3.5.0 → 3.6.0

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

@@ -1,11 +1,14 @@
 export default {
   "slots": {
     "root": "",
-    "list": "min-w-0",
+    "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 text-muted hover:text-default transition-colors",
+    "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": {

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "3.5.0",
+  "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.5.0";
+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) {
@@ -539,11 +540,14 @@ const tableSearchInput = {
 const toc = {
   slots: {
     root: "",
-    list: "min-w-0",
+    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 text-muted hover:text-default transition-colors",
+    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: {
@@ -583,7 +587,17 @@ const theme = {
 
 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/Toc.d.vue.ts

@@ -4,8 +4,9 @@ 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[];
-    containerRef?: HTMLElement | null;
+    container?: string;
     class?: any;
     ui?: Toc['slots'];
 }
@@ -17,7 +18,7 @@ declare const __VLS_export: import("vue").DefineComponent<TocProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<TocProps> & Readonly<{
     onMove?: ((args_0: string) => any) | undefined;
 }>, {
-    containerRef: HTMLElement | null;
+    title: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Toc.vue

@@ -21,6 +21,14 @@
   </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>
@@ -32,8 +40,9 @@ 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 },
-  containerRef: { type: null, required: false, default: null },
+  container: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
@@ -55,11 +64,11 @@ function scrollToHeading(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") ?? []);
+  const headings = Array.from(document.querySelector(props.container ?? "body")?.querySelectorAll("h2, h3") ?? []);
   updateHeadings(headings);
 });
 nuxtApp.hooks.hook("page:transition:finish", () => {
-  const headings = Array.from((props.containerRef || document)?.querySelectorAll("h2, h3") ?? []);
+  const headings = Array.from(document.querySelector(props.container ?? "body")?.querySelectorAll("h2, h3") ?? []);
   updateHeadings(headings);
 });
 </script>

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

@@ -4,8 +4,9 @@ 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[];
-    containerRef?: HTMLElement | null;
+    container?: string;
     class?: any;
     ui?: Toc['slots'];
 }
@@ -17,7 +18,7 @@ declare const __VLS_export: import("vue").DefineComponent<TocProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<TocProps> & Readonly<{
     onMove?: ((args_0: string) => any) | undefined;
 }>, {
-    containerRef: HTMLElement | null;
+    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/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.5.0",
+  "version": "3.6.0",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "imports": {
     "#build/cms/*": "./.nuxt/cms/*.ts",