@hywax/cms 0.0.1 → 0.0.3

package/dist/runtime/components/UploraImage.vue

@@ -0,0 +1,108 @@
+<template>
+  <figure :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div
+      v-if="lqip"
+      :class="ui.lqip({ class: props.ui?.lqip })"
+      :style="{
+  backgroundImage: `url(${lqip})`
+}"
+    />
+    <picture :class="ui.picture({ class: props.ui?.picture })">
+      <template v-if="sources.length">
+        <source
+          v-for="(source, key) in sources"
+          :key="key"
+          :srcset="source.srcset"
+          :type="source.type"
+        >
+      </template>
+
+      <img
+        ref="imageRef"
+        v-bind="imageAttrs"
+        :src="image.img"
+        :srcset="image?.srcset"
+        :alt="alt"
+        :loading="loading"
+        :class="ui.img({ class: props.ui?.img })"
+      >
+    </picture>
+  </figure>
+</template>
+
+<script>
+import theme from "#build/cms/uplora-image";
+import { computed, onMounted, useAppConfig, useHead, useNuxtApp, useTemplateRef } from "#imports";
+import { buildUploraImage } from "../utils";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: String, required: true },
+  alt: { type: String, required: true },
+  formats: { type: Array, required: false },
+  sizes: { type: Array, required: false },
+  lqip: { type: String, required: false },
+  loading: { type: String, required: false, default: "lazy" },
+  preload: { type: [Boolean, Object], required: false },
+  nonce: { type: String, required: false },
+  imgAttrs: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["load", "error"]);
+const nuxtApp = useNuxtApp();
+const initialLoad = nuxtApp.isHydrating;
+const image = computed(() => buildUploraImage({
+  id: props.id,
+  formats: props.formats,
+  sizes: props.sizes
+}));
+const sources = computed(() => {
+  if (image.value.sources.length > 1) {
+    return image.value.sources.slice(1);
+  }
+  return [];
+});
+if (import.meta.server && props.preload) {
+  useHead({ link: () => {
+    if (!image.value.img) {
+      return [];
+    }
+    const link = {
+      rel: "preload",
+      as: "image",
+      imagesrcset: image.value.srcset,
+      nonce: props.nonce,
+      ...typeof props.preload !== "boolean" && props.preload?.fetchPriority ? { fetchpriority: props.preload.fetchPriority } : {}
+    };
+    return [link];
+  } });
+}
+const imageRef = useTemplateRef("imageRef");
+const imageAttrs = computed(() => ({
+  ...props.imgAttrs || {},
+  ...import.meta.server ? { onerror: "this.setAttribute('data-error', 1)" } : {}
+}));
+onMounted(() => {
+  if (!imageRef.value) {
+    return;
+  }
+  if (imageRef.value.complete && initialLoad) {
+    if (imageRef.value.getAttribute("data-error")) {
+      emit("error", new Event("error"));
+    } else {
+      emit("load", new Event("load"));
+    }
+  }
+  imageRef.value.onload = (event) => {
+    emit("load", event);
+  };
+  imageRef.value.onerror = (event) => {
+    emit("error", event);
+  };
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })());
+</script>

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

@@ -0,0 +1,34 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ImgHTMLAttributes } from 'vue';
+import type { ComponentConfig, ImageFormat, ImageSize } from '../types';
+import theme from '#build/cms/uplora-image';
+export type UploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage'>;
+export interface UploraImageProps {
+    id: string;
+    alt: string;
+    formats?: ImageFormat[];
+    sizes?: ImageSize[];
+    lqip?: string;
+    loading?: 'lazy' | 'eager';
+    preload?: boolean | {
+        fetchPriority: 'auto' | 'high' | 'low';
+    };
+    nonce?: string;
+    imgAttrs?: ImgHTMLAttributes;
+    class?: any;
+    ui?: UploraImage['slots'];
+}
+export interface UploraImageEmits {
+    load: [Event];
+    error: [string | Event];
+}
+declare const _default: import("vue").DefineComponent<UploraImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (args_0: string | Event) => any;
+    load: (args_0: Event) => any;
+}, string, import("vue").PublicProps, Readonly<UploraImageProps> & Readonly<{
+    onError?: ((args_0: string | Event) => any) | undefined;
+    onLoad?: ((args_0: Event) => any) | undefined;
+}>, {
+    loading: "lazy" | "eager";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,23 @@
+<template>
+  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+    ...
+  </div>
+</template>
+
+<script>
+import theme from "#build/cms/prose/uplora-image";
+import { computed, useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  image: { type: String, required: true },
+  alt: { type: String, required: true },
+  lqip: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.prose?.uploraImage || {} })());
+</script>

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

@@ -0,0 +1,13 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } 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;
+    lqip?: string;
+    class?: any;
+    ui?: ProseUploraImage['slots'];
+}
+declare const _default: import("vue").DefineComponent<ProseUploraImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProseUploraImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { AvailableRouterMethod, NitroFetchRequest } from 'nitropack';
+import type { AsyncData, FetchResult, UseFetchOptions } from 'nuxt/app';
+import type { DefaultAsyncDataValue } from 'nuxt/app/defaults';
+import type { FetchError } from 'ofetch';
+import type { Ref } from 'vue';
+type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? keyof T extends K[number] ? T : K[number] extends never ? T : Pick<T, K[number]> : T;
+type KeysOf<T> = Array<T extends T ? (keyof T extends string ? keyof T : never) : never>;
+/**
+ * На данный момент нет возможности использовать `useFetch` со своим $fetch,
+ * поэтому приходится использовать костыль.
+ * https://github.com/nuxt/nuxt/issues/14736
+ */
+export declare function useApi<ResT = void, ErrorT = FetchError, ReqT extends NitroFetchRequest = NitroFetchRequest, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, DataT = _ResT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = DefaultAsyncDataValue>(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataValue>;
+export {};

package/dist/runtime/composables/useApi.js

@@ -0,0 +1,16 @@
+import { useFetch, useNuxtApp } from "#imports";
+import { defu } from "defu";
+export function useApi(request, opts) {
+  const $api = useNuxtApp().$api;
+  return useFetch(
+    request,
+    defu(
+      {
+        $fetch: $api
+      },
+      {
+        ...opts
+      }
+    )
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { SEO } from '../types';
+interface SEOStats {
+    progress: number;
+    color: 'error' | 'warning' | 'success';
+}
+interface UseSEOStatsReturn {
+    title: ComputedRef<SEOStats>;
+    description: ComputedRef<SEOStats>;
+}
+export declare function useSEOStats(options: MaybeRefOrGetter<SEO>): UseSEOStatsReturn;
+export {};

package/dist/runtime/composables/useSeoStats.js

@@ -0,0 +1,44 @@
+import { computed, toValue } from "#imports";
+function computeScore(length, recommendedLength, maxLength) {
+  if (length === 0) {
+    return 0;
+  }
+  if (length < recommendedLength) {
+    return length / recommendedLength * 100;
+  }
+  if (length > maxLength) {
+    return Math.max(0, 100 - (length - maxLength) / maxLength * 100);
+  }
+  return 100;
+}
+function computeColor(score) {
+  if (score < 30) {
+    return "error";
+  }
+  if (score < 70) {
+    return "warning";
+  }
+  return "success";
+}
+export function useSEOStats(options) {
+  const title = computed(() => {
+    const value = toValue(options);
+    const score = computeScore(value.title.length, 45, 60);
+    return {
+      progress: Math.round(score),
+      color: computeColor(score)
+    };
+  });
+  const description = computed(() => {
+    const value = toValue(options);
+    const score = computeScore(value.description.length, 130, 160);
+    return {
+      progress: Math.round(score),
+      color: computeColor(score)
+    };
+  });
+  return {
+    title,
+    description
+  };
+}

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@import "@nuxt/ui-pro";@import "#build/cms.css";@source "./components";

package/dist/runtime/plugins/api.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("#app").Plugin<{
+    api: import("nitropack/types").$Fetch<unknown, import("nitropack/types").NitroFetchRequest>;
+}> & import("#app").ObjectPlugin<{
+    api: import("nitropack/types").$Fetch<unknown, import("nitropack/types").NitroFetchRequest>;
+}>;
+export default _default;

package/dist/runtime/plugins/api.js

@@ -0,0 +1,26 @@
+import { defineNuxtPlugin, navigateTo, useAppConfig, useToast } from "#imports";
+export default defineNuxtPlugin({
+  name: "cms-api",
+  async setup() {
+    const toast = useToast();
+    const appConfig = useAppConfig();
+    const api = $fetch.create({
+      async onResponseError({ response }) {
+        toast.add({
+          title: "\u041E\u0448\u0438\u0431\u043A\u0430",
+          description: response._data.message ?? "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A",
+          color: "error",
+          icon: appConfig.ui.icons.close
+        });
+        if (response.status === 401) {
+          await navigateTo({ name: "index" });
+        }
+      }
+    });
+    return {
+      provide: {
+        api
+      }
+    };
+  }
+});

package/dist/runtime/types/app.config.d.ts

@@ -0,0 +1,6 @@
+declare module '#build/app.config' {
+  import type { AppConfig } from '@nuxt/schema'
+
+  const _default: AppConfig
+  export default _default
+}

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

@@ -0,0 +1,48 @@
+import type { ImageExtension, ImageMimeType } from '@uplora/formats';
+export type ImageFormat = ImageExtension;
+/**
+ * Размер изображения
+ */
+export interface ImageSize {
+    /**
+     * Ширина
+     *
+     * @example 1024
+     */
+    width?: number;
+    /**
+     * Высота
+     *
+     * @example 1024
+     */
+    height?: number;
+    /**
+     * Описание размера
+     *
+     * @example 2x, 512px
+     */
+    descriptor: string;
+}
+/**
+ * Источник изображения
+ */
+export interface ImageSource {
+    /**
+     * Image URL
+     *
+     * @example https://uplora.ru/fgu1yd2ncj05iogcooz31u55
+     */
+    img: string;
+    /**
+     * Image srcset
+     *
+     * @example https://uplora.ru/fgu1yd2ncj05iogcooz31u55/-/format/jpg 1x, https://uplora.ru/fgu1yd2ncj05iogcooz31u55/-/format/jpg 2x
+     */
+    srcset?: string;
+    /**
+     * Image mime type
+     *
+     * @example image/jpeg
+     */
+    type?: ImageMimeType;
+}

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

@@ -0,0 +1,5 @@
+export * from '../components/ButtonClear.vue';
+export * from '../components/UploraImage.vue';
+export * from './image';
+export * from './seo';
+export * from './utils';

package/dist/runtime/types/index.js

@@ -0,0 +1,5 @@
+export * from "../components/ButtonClear.vue";
+export * from "../components/UploraImage.vue";
+export * from "./image.js";
+export * from "./seo.js";
+export * from "./utils.js";

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

@@ -0,0 +1,4 @@
+export interface SEO {
+    title: string;
+    description: string;
+}

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

@@ -0,0 +1,53 @@
+import type { ClassValue, TVCompoundVariants, TVDefaultVariants, TVVariants } from 'tailwind-variants';
+/**
+ * Defines the AppConfig object based on the tailwind-variants configuration.
+ */
+export type TVConfig<T extends Record<string, any>> = {
+    [P in keyof T]?: {
+        [K in keyof T[P] as K extends 'base' | 'slots' | 'variants' | 'compoundVariants' | 'defaultVariants' ? K : never]?: K extends 'base' ? ClassValue : K extends 'slots' ? {
+            [S in keyof T[P]['slots']]?: ClassValue;
+        } : K extends 'variants' ? TVVariants<T[P]['slots'], ClassValue, T[P]['variants']> : K extends 'compoundVariants' ? TVCompoundVariants<T[P]['variants'], T[P]['slots'], ClassValue, object, undefined> : K extends 'defaultVariants' ? TVDefaultVariants<T[P]['variants'], T[P]['slots'], object, undefined> : never;
+    };
+};
+/**
+ * Utility type to flatten intersection types for better IDE hover information.
+ * @template T The type to flatten.
+ */
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentVariants<T extends {
+    variants?: Record<string, Record<string, any>>;
+}> = {
+    [K in keyof T['variants']]: keyof T['variants'][K];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T['slots']]?: ClassValue;
+}>;
+type GetComponentAppConfig<A, U extends string, K extends string> = A extends Record<U, Record<K, any>> ? A[U][K] : object;
+type ComponentAppConfig<T, A extends Record<string, any>, K extends string, U extends string = 'cms' | 'cms.prose'> = A & (U extends 'cms.prose' ? {
+    cms?: {
+        prose?: {
+            [k in K]?: Partial<T>;
+        };
+    };
+} : {
+    [key in Exclude<U, 'cms.prose'>]?: {
+        [k in K]?: Partial<T>;
+    };
+});
+/**
+ * Defines the configuration shape expected for a component.
+ * @template T The component's theme imported from `#build/cms/*`.
+ * @template A The base AppConfig type from `@nuxt/schema`.
+ * @template K The key identifying the component (e.g., 'badge').
+ * @template U The top-level key in AppConfig ('cms' or 'cms.prose').
+ */
+export type ComponentConfig<T extends Record<string, any>, A extends Record<string, any>, K extends string, U extends 'cms' | 'cms.prose' = 'cms'> = {
+    AppConfig: ComponentAppConfig<T, A, K, U>;
+    variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>;
+    slots: ComponentSlots<T>;
+};
+export {};

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

@@ -0,0 +1,3 @@
+import type { AcceptableValue as _AcceptableValue } from 'reka-ui';
+export type AcceptableValue = Exclude<_AcceptableValue, Record<string, any>>;
+export * from './tv';

package/dist/runtime/types/utils.js

@@ -0,0 +1 @@
+export * from "./tv.js";

package/dist/runtime/utils/image.d.ts

@@ -0,0 +1,30 @@
+import type { Filters } from '@uplora/serializer';
+import type { ImageFormat, ImageSize, ImageSource } from '../types';
+/**
+ * Создает функцию для получения URL изображения из Uplora
+ */
+export declare function createUploraImageResolver(): (id: string, filters?: Filters) => string;
+export interface BuildUploraImageOptions {
+    id: string;
+    formats?: ImageFormat[];
+    sizes?: ImageSize[];
+}
+export interface BuildUploraImageReturn {
+    img: string;
+    original: string;
+    sources: ImageSource[];
+    srcset?: string;
+}
+/**
+ * Создает URL изображения из Uplora
+ */
+export declare function buildUploraImage(options: BuildUploraImageOptions): BuildUploraImageReturn;
+export interface GenerateImageSizesOptions {
+    width: number;
+    minWidth?: number;
+    step?: number;
+}
+/**
+ * Генерирует размеры изображения
+ */
+export declare function generateImageSizes(options: GenerateImageSizesOptions): ImageSize[];

package/dist/runtime/utils/image.js

@@ -0,0 +1,81 @@
+import { useRuntimeConfig } from "#imports";
+import { imagesExtensionsToMimeTypes } from "@uplora/formats";
+import { serialize } from "@uplora/serializer";
+export function createUploraImageResolver() {
+  const runtimeConfig = useRuntimeConfig();
+  const { fluxorUrl } = runtimeConfig.public.cms;
+  return (id, filters) => {
+    const serializeFilters = filters ? serialize(filters) : "";
+    return `${fluxorUrl}/${id}${serializeFilters ? `/${serializeFilters}` : ""}`;
+  };
+}
+export function buildUploraImage(options) {
+  const resolver = createUploraImageResolver();
+  const original = resolver(options.id);
+  const sizes = options.sizes ?? [{ descriptor: "1x" }];
+  const sources = [];
+  function makeSrcset(format) {
+    if (sizes && sizes.length > 1) {
+      return sizes.map((size) => `${resolver(options.id, { resize: { width: size.width, height: size.height }, format })} ${size.descriptor}`).join(", ");
+    }
+    return null;
+  }
+  if (options.formats) {
+    for (const format of options.formats) {
+      const srcset = makeSrcset(format);
+      sources.push({
+        img: resolver(options.id, {
+          resize: {
+            width: sizes[0]?.width,
+            height: sizes[0]?.height
+          },
+          format
+        }),
+        ...srcset ? { srcset } : {},
+        type: imagesExtensionsToMimeTypes[format]
+      });
+    }
+  } else {
+    const srcset = makeSrcset();
+    sources.push({
+      img: resolver(options.id, {
+        resize: {
+          width: sizes[0]?.width,
+          height: sizes[0]?.height
+        }
+      }),
+      ...srcset ? { srcset } : {}
+    });
+  }
+  return {
+    img: original,
+    original,
+    ...sources.length > 0 ? {
+      img: sources[0]?.img,
+      srcset: sources[0]?.srcset
+    } : {},
+    sources
+  };
+}
+export function generateImageSizes(options) {
+  const { width, minWidth = 640, step = 0.7 } = options;
+  const sizes = [];
+  let currentWidth = width;
+  while (true) {
+    const normalizedWidth = Math.round(currentWidth);
+    sizes.push({
+      width: normalizedWidth,
+      descriptor: `${Math.round(normalizedWidth * step)}w`
+    });
+    currentWidth *= step;
+    if (currentWidth < minWidth) {
+      const normalizedWidth2 = Math.round(currentWidth);
+      sizes.push({
+        width: normalizedWidth2,
+        descriptor: `${Math.round(normalizedWidth2 * step)}w`
+      });
+      break;
+    }
+  }
+  return sizes;
+}

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

@@ -0,0 +1 @@
+export * from './image';

package/dist/runtime/utils/index.js

@@ -0,0 +1 @@
+export * from "./image.js";

package/dist/runtime/utils/tv.d.ts

@@ -0,0 +1 @@
+export declare const tv: import("tailwind-variants").CreateTV;

package/dist/runtime/utils/tv.js

@@ -0,0 +1,4 @@
+import appConfig from "#build/app.config";
+import { createTV } from "tailwind-variants";
+const appConfigTv = appConfig;
+export const tv = /* @__PURE__ */ createTV(appConfigTv.ui?.tv);

package/dist/types.d.mts

@@ -1,3 +1,5 @@
 export { default } from './module.mjs'
 
 export { type ModuleOptions } from './module.mjs'
+
+export * from '../dist/runtime/types/index.js'