@hywax/cms-console 1.0.0

package/dist/runtime/composables/useEditorDragHandle.js

@@ -0,0 +1,95 @@
+import { useAppConfig } from "#imports";
+import { mapEditorItems } from "@nuxt/ui/utils/editor";
+import { upperFirst } from "scule";
+import { ref, toValue } from "vue";
+export function useEditorDragHandle(customHandlers) {
+  const appConfig = useAppConfig();
+  const selectedNode = ref();
+  const getItems = (editor) => {
+    if (!selectedNode.value?.node?.type) {
+      return [];
+    }
+    return mapEditorItems(editor, [
+      [
+        {
+          type: "label",
+          label: upperFirst(selectedNode.value.node.type)
+        },
+        {
+          label: "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C",
+          icon: appConfig.ui.icons.repeat,
+          children: [
+            { kind: "paragraph", label: "\u041F\u0430\u0440\u0430\u0433\u0440\u0430\u0444", icon: appConfig.ui.icons.paragraph },
+            { kind: "heading", level: 1, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 1", icon: appConfig.ui.icons.heading1 },
+            { kind: "heading", level: 2, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2", icon: appConfig.ui.icons.heading2 },
+            { kind: "heading", level: 3, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3", icon: appConfig.ui.icons.heading3 },
+            { kind: "heading", level: 4, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 4", icon: appConfig.ui.icons.heading4 },
+            { kind: "bulletList", label: "\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A", icon: appConfig.ui.icons.list },
+            { kind: "orderedList", label: "\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A", icon: appConfig.ui.icons.listOrdered },
+            { kind: "blockquote", label: "\u0426\u0438\u0442\u0430\u0442\u0430", icon: appConfig.ui.icons.blockquote },
+            { kind: "codeBlock", label: "\u0411\u043B\u043E\u043A \u043A\u043E\u0434\u0430", icon: appConfig.ui.icons.codeBlock }
+          ]
+        },
+        {
+          kind: "clearFormatting",
+          pos: selectedNode.value?.pos,
+          label: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u043E\u0440\u043C\u0430\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435",
+          icon: appConfig.ui.icons.reload
+        }
+      ],
+      [
+        {
+          kind: "duplicate",
+          pos: selectedNode.value?.pos,
+          label: "\u0414\u0443\u0431\u043B\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+          icon: appConfig.ui.icons.copy
+        },
+        {
+          label: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+          icon: appConfig.ui.icons.clipboard,
+          onSelect: async () => {
+            if (!selectedNode.value) {
+              return;
+            }
+            const pos = selectedNode.value.pos;
+            const node = editor.state.doc.nodeAt(pos);
+            if (node) {
+              await navigator.clipboard.writeText(node.textContent);
+            }
+          }
+        }
+      ],
+      [
+        {
+          kind: "moveUp",
+          pos: selectedNode.value?.pos,
+          label: "\u041F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u0432\u0432\u0435\u0440\u0445",
+          icon: appConfig.ui.icons.arrowUp
+        },
+        {
+          kind: "moveDown",
+          pos: selectedNode.value?.pos,
+          label: "\u041F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u0432\u043D\u0438\u0437",
+          icon: appConfig.ui.icons.arrowDown
+        }
+      ],
+      [
+        {
+          kind: "delete",
+          pos: selectedNode.value?.pos,
+          label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
+          color: "error",
+          icon: appConfig.ui.icons.trash
+        }
+      ]
+    ], toValue(customHandlers));
+  };
+  const onNodeChange = (event) => {
+    selectedNode.value = event;
+  };
+  return {
+    selectedNode,
+    getItems,
+    onNodeChange
+  };
+}

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

@@ -0,0 +1,74 @@
+import type { EditorCustomHandlers } from '@nuxt/ui';
+import type { MaybeRefOrGetter } from 'vue';
+export declare function useEditorSuggestions<T extends EditorCustomHandlers>(_customHandlers?: MaybeRefOrGetter<T>): {
+    items: (({
+        type: "label";
+        label: string;
+        kind?: undefined;
+        icon?: undefined;
+        level?: undefined;
+    } | {
+        kind: "paragraph";
+        label: string;
+        icon: any;
+        type?: undefined;
+        level?: undefined;
+    } | {
+        kind: "heading";
+        level: 1;
+        label: string;
+        icon: any;
+        type?: undefined;
+    } | {
+        kind: "heading";
+        level: 2;
+        label: string;
+        icon: any;
+        type?: undefined;
+    } | {
+        kind: "heading";
+        level: 3;
+        label: string;
+        icon: any;
+        type?: undefined;
+    } | {
+        kind: "bulletList";
+        label: string;
+        icon: any;
+        type?: undefined;
+        level?: undefined;
+    } | {
+        kind: "orderedList";
+        label: string;
+        icon: any;
+        type?: undefined;
+        level?: undefined;
+    } | {
+        kind: "blockquote";
+        label: string;
+        icon: any;
+        type?: undefined;
+        level?: undefined;
+    } | {
+        kind: "codeBlock";
+        label: string;
+        icon: any;
+        type?: undefined;
+        level?: undefined;
+    })[] | ({
+        type: "label";
+        label: string;
+        kind?: undefined;
+        icon?: undefined;
+    } | {
+        kind: "horizontalRule";
+        label: string;
+        icon: any;
+        type?: undefined;
+    } | {
+        kind: "uploraImage";
+        label: string;
+        icon: any;
+        type?: undefined;
+    })[])[];
+};

package/dist/runtime/composables/useEditorSuggestions.js

@@ -0,0 +1,25 @@
+import { useAppConfig } from "#imports";
+export function useEditorSuggestions(_customHandlers) {
+  const appConfig = useAppConfig();
+  const items = [
+    [
+      { type: "label", label: "\u0422\u0438\u043F" },
+      { kind: "paragraph", label: "\u041F\u0430\u0440\u0430\u0433\u0440\u0430\u0444", icon: appConfig.ui.icons.paragraph },
+      { kind: "heading", level: 1, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 1", icon: appConfig.ui.icons.heading1 },
+      { kind: "heading", level: 2, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2", icon: appConfig.ui.icons.heading2 },
+      { kind: "heading", level: 3, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3", icon: appConfig.ui.icons.heading3 },
+      { kind: "bulletList", label: "\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A", icon: appConfig.ui.icons.list },
+      { kind: "orderedList", label: "\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A", icon: appConfig.ui.icons.listOrdered },
+      { kind: "blockquote", label: "\u0426\u0438\u0442\u0430\u0442\u0430", icon: appConfig.ui.icons.blockquote },
+      { kind: "codeBlock", label: "\u0411\u043B\u043E\u043A \u043A\u043E\u0434\u0430", icon: appConfig.ui.icons.codeBlock }
+    ],
+    [
+      { type: "label", label: "\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C" },
+      { kind: "horizontalRule", label: "\u0413\u043E\u0440\u0438\u0437\u043E\u043D\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u043B\u0438\u043D\u0438\u044F", icon: appConfig.ui.icons.horizontalRule },
+      { kind: "uploraImage", label: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435", icon: appConfig.ui.icons.image }
+    ]
+  ];
+  return {
+    items
+  };
+}

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

@@ -0,0 +1,121 @@
+import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui';
+import type { Editor } from '@tiptap/vue-3';
+import type { MaybeRefOrGetter } from 'vue';
+export declare function useEditorToolbar<T extends EditorCustomHandlers>(_customHandlers?: MaybeRefOrGetter<T>): {
+    toolbarItems: EditorToolbarItem<T>[][];
+    bubbleToolbarItems: import("vue").ComputedRef<({
+        label: string;
+        trailingIcon: any;
+        activeColor: "neutral";
+        activeVariant: "ghost";
+        tooltip: {
+            text: string;
+        };
+        content: {
+            align: "start";
+        };
+        ui: {
+            label: string;
+        };
+        items: ({
+            type: "label";
+            label: string;
+            kind?: undefined;
+            icon?: undefined;
+            level?: undefined;
+        } | {
+            kind: "paragraph";
+            label: string;
+            icon: any;
+            type?: undefined;
+            level?: undefined;
+        } | {
+            kind: "heading";
+            level: 1;
+            icon: any;
+            label: string;
+            type?: undefined;
+        } | {
+            kind: "heading";
+            level: 2;
+            icon: any;
+            label: string;
+            type?: undefined;
+        } | {
+            kind: "heading";
+            level: 3;
+            icon: any;
+            label: string;
+            type?: undefined;
+        } | {
+            kind: "heading";
+            level: 4;
+            icon: any;
+            label: string;
+            type?: undefined;
+        } | {
+            kind: "bulletList";
+            icon: any;
+            label: string;
+            type?: undefined;
+            level?: undefined;
+        } | {
+            kind: "orderedList";
+            icon: any;
+            label: string;
+            type?: undefined;
+            level?: undefined;
+        } | {
+            kind: "blockquote";
+            icon: any;
+            label: string;
+            type?: undefined;
+            level?: undefined;
+        } | {
+            kind: "codeBlock";
+            icon: any;
+            label: string;
+            type?: undefined;
+            level?: undefined;
+        })[];
+    }[] | ({
+        kind: "mark";
+        mark: "bold";
+        icon: any;
+        tooltip: {
+            text: string;
+        };
+    } | {
+        kind: "mark";
+        mark: "italic";
+        icon: any;
+        tooltip: {
+            text: string;
+        };
+    } | {
+        kind: "mark";
+        mark: "underline";
+        icon: any;
+        tooltip: {
+            text: string;
+        };
+    } | {
+        kind: "mark";
+        mark: "strike";
+        icon: any;
+        tooltip: {
+            text: string;
+        };
+    } | {
+        kind: "mark";
+        mark: "code";
+        icon: any;
+        tooltip: {
+            text: string;
+        };
+    })[] | {
+        slot: "link";
+        icon: any;
+    }[])[]>;
+    getImageToolbarItems: (editor: Editor) => EditorToolbarItem<T>[][];
+};

package/dist/runtime/composables/useEditorToolbar.js

@@ -0,0 +1,87 @@
+import { useAppConfig } from "#imports";
+import { computed } from "vue";
+export function useEditorToolbar(_customHandlers) {
+  const appConfig = useAppConfig();
+  const toolbarItems = [];
+  const bubbleToolbarItems = computed(() => [
+    [
+      {
+        label: "\u041F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u0442\u044C",
+        trailingIcon: appConfig.ui.icons.chevronDown,
+        activeColor: "neutral",
+        activeVariant: "ghost",
+        tooltip: { text: "\u041F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u0442\u044C" },
+        content: { align: "start" },
+        ui: { label: "text-xs" },
+        items: [
+          { type: "label", label: "\u041F\u0440\u0435\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u0442\u044C" },
+          { kind: "paragraph", label: "\u041F\u0430\u0440\u0430\u0433\u0440\u0430\u0444", icon: appConfig.ui.icons.paragraph },
+          { kind: "heading", level: 1, icon: appConfig.ui.icons.heading1, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 1" },
+          { kind: "heading", level: 2, icon: appConfig.ui.icons.heading2, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 2" },
+          { kind: "heading", level: 3, icon: appConfig.ui.icons.heading3, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 3" },
+          { kind: "heading", level: 4, icon: appConfig.ui.icons.heading4, label: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A 4" },
+          { kind: "bulletList", icon: appConfig.ui.icons.list, label: "\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A" },
+          { kind: "orderedList", icon: appConfig.ui.icons.listOrdered, label: "\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A" },
+          { kind: "blockquote", icon: appConfig.ui.icons.blockquote, label: "\u0426\u0438\u0442\u0430\u0442\u0430" },
+          { kind: "codeBlock", icon: appConfig.ui.icons.codeBlock, label: "\u0411\u043B\u043E\u043A \u043A\u043E\u0434\u0430" }
+        ]
+      }
+    ],
+    [
+      { kind: "mark", mark: "bold", icon: appConfig.ui.icons.bold, tooltip: { text: "\u0416\u0438\u0440\u043D\u044B\u0439" } },
+      { kind: "mark", mark: "italic", icon: appConfig.ui.icons.italic, tooltip: { text: "\u041A\u0443\u0440\u0441\u0438\u0432" } },
+      { kind: "mark", mark: "underline", icon: appConfig.ui.icons.underline, tooltip: { text: "\u041F\u043E\u0434\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439" } },
+      { kind: "mark", mark: "strike", icon: appConfig.ui.icons.strikethrough, tooltip: { text: "\u0417\u0430\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439" } },
+      { kind: "mark", mark: "code", icon: appConfig.ui.icons.code, tooltip: { text: "\u041A\u043E\u0434" } }
+    ],
+    [
+      { slot: "link", icon: appConfig.ui.icons.link }
+    ]
+  ]);
+  const getImageToolbarItems = (editor) => {
+    const node = editor.state.doc.nodeAt(editor.state.selection.from);
+    return [
+      [
+        {
+          icon: appConfig.ui.icons.download,
+          to: node?.attrs?.src,
+          download: true,
+          tooltip: { text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C" }
+        },
+        {
+          icon: appConfig.ui.icons.reload,
+          tooltip: { text: "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C" },
+          onClick: () => {
+            const { state } = editor;
+            const { selection } = state;
+            const pos = selection.from;
+            const node2 = state.doc.nodeAt(pos);
+            if (node2 && node2.type.name === "image") {
+              editor.chain().focus().deleteRange({ from: pos, to: pos + node2.nodeSize }).insertContentAt(pos, { type: "imageUpload" }).run();
+            }
+          }
+        }
+      ],
+      [
+        {
+          icon: appConfig.ui.icons.trash,
+          tooltip: { text: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
+          onClick: () => {
+            const { state } = editor;
+            const { selection } = state;
+            const pos = selection.from;
+            const node2 = state.doc.nodeAt(pos);
+            if (node2 && node2.type.name === "image") {
+              editor.chain().focus().deleteRange({ from: pos, to: pos + node2.nodeSize }).run();
+            }
+          }
+        }
+      ]
+    ];
+  };
+  return {
+    toolbarItems,
+    bubbleToolbarItems,
+    getImageToolbarItems
+  };
+}

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

@@ -0,0 +1,28 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { LocationQueryValue } from 'vue-router';
+type RouteQueryValueRaw = LocationQueryValue | LocationQueryValue[] | undefined;
+type QueryTransformGetter<Default, Value = Default> = (queryOrDefault: Default | RouteQueryValueRaw) => Value;
+type QueryTransform<Default, Value = Default> = QueryTransformGetter<Default, Value> | ({
+    get?: QueryTransformGetter<Default, Value>;
+    set?: (value: Value) => RouteQueryValueRaw;
+});
+interface Transforms<Default> {
+    number: QueryTransformGetter<number | Default>;
+    boolean: QueryTransformGetter<boolean | Default>;
+    date: QueryTransformGetter<string | Default>;
+    dateRange: QueryTransform<{
+        end: string;
+        start: string;
+    } | Default>;
+    arrayString: QueryTransformGetter<any[] extends Default ? Default : string[]>;
+}
+type GetTransform<T> = keyof {
+    [P in keyof Transforms<T> as Transforms<T>[P] extends QueryTransform<any, T> ? P : never]: P;
+};
+export type GetQueryTransforms<T> = {
+    [P in keyof T as T[P] extends Exclude<RouteQueryValueRaw, any[]> ? never : P]: GetTransform<T[P]> | QueryTransform<T[P], T[P]>;
+} & {
+    [P in keyof T as T[P] extends Exclude<RouteQueryValueRaw, any[]> ? P : never]?: GetTransform<T[P]> | QueryTransform<T[P], T[P]>;
+};
+export declare function useQueryState<T extends Record<string, any>>(defaults: MaybeRefOrGetter<T>, stateTransforms: GetQueryTransforms<T>): Ref<T>;
+export {};

package/dist/runtime/composables/useQueryState.js

@@ -0,0 +1,105 @@
+import { useRoute, useRouter } from "#imports";
+import { computed, customRef, reactive, toValue, watch } from "vue";
+import { formatServerDateTime } from "../utils/date.js";
+import { useRouteQuery } from "./useRouteQuery.js";
+const valuesCache = /* @__PURE__ */ new WeakMap();
+const queryTransforms = {
+  number: (val) => val === null || val === void 0 ? val : Number(val),
+  boolean: (val) => val === null || val === void 0 ? val : val === "true" ? true : val === "false" ? false : Boolean(val),
+  date: (val) => val === null || val === void 0 ? val : formatServerDateTime(val),
+  dateRange: {
+    get: (val) => {
+      if (!Array.isArray(val)) {
+        return val;
+      }
+      if (valuesCache.has(val)) {
+        return valuesCache.get(val);
+      }
+      const date = {
+        start: formatServerDateTime(val[0]),
+        end: formatServerDateTime(val[1])
+      };
+      valuesCache.set(val, date);
+      return date;
+    },
+    set: (value) => {
+      if (!value || typeof value !== "object") {
+        return value;
+      }
+      return [value.start, value.end];
+    }
+  },
+  arrayString: (val) => {
+    if (typeof val === "string") {
+      val = [val];
+    }
+    if (!Array.isArray(val)) {
+      return val;
+    }
+    if (valuesCache.has(val)) {
+      return valuesCache.get(val);
+    } else {
+      valuesCache.set(val, val);
+    }
+    return val;
+  }
+};
+export function useQueryState(defaults, stateTransforms) {
+  const route = useRoute();
+  const router = useRouter();
+  const defaultsValue = computed(() => toValue(defaults));
+  const proxy = customRef((track, trigger) => {
+    let queryState = { _initial: true };
+    return {
+      get: () => {
+        track();
+        return queryState;
+      },
+      set: (newValue) => {
+        if (newValue === queryState) {
+          return;
+        }
+        if (typeof newValue !== "object" || newValue === null) {
+          queryState = newValue;
+          return trigger();
+        }
+        const defaultValuesValue = defaultsValue.value;
+        const newQueryState = {};
+        for (const key in newValue) {
+          const query = createQuery(key, defaultValuesValue[key]);
+          const newValueField = newValue[key];
+          if (query.value !== newValueField && !queryState._initial) {
+            query.value = newValueField;
+          }
+          newQueryState[key] = query;
+        }
+        queryState = reactive(newQueryState);
+        trigger();
+      }
+    };
+  });
+  watch(() => toValue(defaults), (value) => {
+    proxy.value = value;
+  }, { immediate: true });
+  function getTransform(key) {
+    if (!stateTransforms[key]) {
+      return void 0;
+    }
+    const transform = stateTransforms[key];
+    if (typeof transform !== "function" && typeof transform !== "string") {
+      return void 0;
+    }
+    if (typeof transform === "string") {
+      return queryTransforms[transform];
+    }
+    return transform;
+  }
+  function createQuery(key, value) {
+    return useRouteQuery(key, value, {
+      transform: getTransform(key),
+      route,
+      router
+    });
+  }
+  return proxy;
+}

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

@@ -0,0 +1,37 @@
+import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { RouteParamValueRaw } from 'vue-router';
+import { useRoute, useRouter } from '#imports';
+/**
+ * Скопировано из vueuse, модифицированно для поддержки не примитивов:
+ * @see https://github.com/vueuse/vueuse/blob/main/packages/router/useRouteQuery/index.ts
+ */
+export type RouteQueryValueRaw = RouteParamValueRaw | string[];
+interface ReactiveRouteOptions {
+    /**
+     * Mode to update the router query, ref is also acceptable
+     *
+     * @default 'replace'
+     */
+    mode?: MaybeRef<'replace' | 'push'>;
+    /**
+     * Route instance, use `useRoute()` if not given
+     */
+    route?: ReturnType<typeof useRoute>;
+    /**
+     * Router instance, use `useRouter()` if not given
+     */
+    router?: ReturnType<typeof useRouter>;
+}
+interface ReactiveRouteOptionsWithTransform<V, R> extends ReactiveRouteOptions {
+    /**
+     * Function to transform data before return, or an object with one or both functions:
+     * `get` to transform data before returning, and `set` to transform data before setting
+     */
+    transform?: ((val: V) => R) | ({
+        get?: (value: V) => R;
+        set?: (value: R) => V;
+    });
+}
+export declare function useRouteQuery(name: string): Ref<undefined | null | string | string[]>;
+export declare function useRouteQuery<T extends RouteQueryValueRaw = RouteQueryValueRaw, K = T>(name: string, defaultValue?: MaybeRefOrGetter<T>, options?: ReactiveRouteOptionsWithTransform<T, K>): Ref<K>;
+export {};

package/dist/runtime/composables/useRouteQuery.js

@@ -0,0 +1,81 @@
+import { useRoute, useRouter } from "#imports";
+import { tryOnScopeDispose } from "@vueuse/core";
+import { customRef, nextTick, toValue, watch } from "vue";
+const _queue = /* @__PURE__ */ new WeakMap();
+export function useRouteQuery(name, defaultValue, options = {}) {
+  const {
+    mode = "replace",
+    route = useRoute(),
+    router = useRouter(),
+    transform
+  } = options;
+  let transformGet = (value) => value;
+  let transformSet = (value) => value;
+  if (typeof transform === "function") {
+    transformGet = transform;
+  } else if (transform) {
+    if (transform.get) {
+      transformGet = transform.get;
+    }
+    if (transform.set) {
+      transformSet = transform.set;
+    }
+  }
+  if (!_queue.has(router)) {
+    _queue.set(router, /* @__PURE__ */ new Map());
+  }
+  const _queriesQueue = _queue.get(router);
+  let query = route.query[name];
+  tryOnScopeDispose(() => {
+    query = void 0;
+  });
+  let _trigger;
+  const proxy = customRef((track, trigger) => {
+    _trigger = trigger;
+    return {
+      get() {
+        track();
+        return transformGet(query !== void 0 ? query : toValue(defaultValue));
+      },
+      set(v) {
+        v = transformSet(v);
+        if (query === v) {
+          return;
+        }
+        query = v === toValue(defaultValue) ? void 0 : v;
+        _queriesQueue.set(name, v === toValue(defaultValue) ? void 0 : v);
+        trigger();
+        nextTick(() => {
+          if (_queriesQueue.size === 0) {
+            return;
+          }
+          const newQueries = Object.fromEntries(_queriesQueue.entries());
+          _queriesQueue.clear();
+          const { params, query: query2, hash } = route;
+          router[toValue(mode)]({
+            params,
+            query: { ...query2, ...newQueries },
+            hash
+          });
+        });
+      }
+    };
+  });
+  watch(
+    () => route.query[name],
+    (v) => {
+      const newQueryValue = transformSet(transformGet(v));
+      if (query === newQueryValue) {
+        return;
+      }
+      if (JSON.stringify(query) === JSON.stringify(newQueryValue)) {
+        query = v;
+        return;
+      }
+      query = v;
+      _trigger();
+    },
+    { flush: "sync" }
+  );
+  return proxy;
+}

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 {};