@hywax/cms 0.0.3 → 0.0.5

package/dist/runtime/components/AutocompleteSelect.vue

@@ -0,0 +1,170 @@
+<template>
+  <USelectMenu
+    v-model:search-term="searchTerm"
+    v-model:open="isOpen"
+    :model-value="modelValue"
+    :items="items"
+    :loading="isLoading"
+    ignore-filter
+    :value-key="valueKey"
+    :label-key="labelKey"
+    :placeholder="placeholder"
+    :content="{ 'data-autocomplete-select-content': autocompleteSelectId }"
+    :multiple="multiple"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template v-if="modelValue && !props.multiple">
+      <span class="truncate pointer-events-none">
+        {{ getCachedLabel(modelValue) }}
+      </span>
+    </template>
+
+    <template v-if="!multiple" #trailing>
+      <ButtonClear
+        :model-value="modelValue"
+        :reset-value="resetValue"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+    </template>
+  </USelectMenu>
+</template>
+
+<script>
+import theme from "#build/cms/autocomplete-select";
+import { computed, ref, refDebounced, shallowRef, toRaw, triggerRef, useAppConfig, useAsyncData, useId, useNuxtData, watch } from "#imports";
+import { useInfiniteScroll, useOffsetPagination } from "@vueuse/core";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  cacheKey: { type: String, required: true },
+  handler: { type: Function, required: true },
+  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false },
+  multiple: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  resetValue: { type: [String, Number, Boolean, null], required: false, skipCheck: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const appConfig = useAppConfig();
+const autocompleteSelectId = `autocomplete-select-${useId()}`;
+const { initialPagination, initialData, initialStatus } = useInitialData();
+const { fetchPage, nextPage, isLastPage, pageDataStatus, allPagesData } = usePageData({
+  pagination: initialPagination,
+  total: () => initialData.value?.pagination.total ?? 0
+});
+const { searchTerm, searchData, searchStatus } = useSearch({ pagination: initialPagination });
+const { isOpen } = useInfiniteScrollData({ nextPage, isLastPage, fetchPage, searchTerm });
+const isLoading = computed(() => [
+  initialStatus.value,
+  pageDataStatus.value,
+  searchStatus.value
+].includes("pending"));
+const items = computed(() => {
+  if (searchTerm.value) {
+    return searchData.value?.items ?? [];
+  }
+  return [
+    ...initialData.value?.items ?? [],
+    ...allPagesData.value
+  ];
+});
+const { getCachedLabel } = useAutocompleteCache({ items });
+function useInitialData() {
+  const initialPagination2 = { page: "1", perPage: "25" };
+  const { data: initialData2, status: initialStatus2 } = useAsyncData(
+    `autocomplete-select:${props.cacheKey}`,
+    () => props.handler({ ...initialPagination2, search: "" }),
+    {
+      lazy: true,
+      getCachedData: (key) => useNuxtData(key).data.value ?? void 0,
+      dedupe: "defer"
+    }
+  );
+  return {
+    initialPagination: initialPagination2,
+    initialData: initialData2,
+    initialStatus: initialStatus2
+  };
+}
+function usePageData(options) {
+  const { currentPage, currentPageSize, next, isLastPage: isLastPage2 } = useOffsetPagination({
+    total: options.total,
+    pageSize: Number(options.pagination.perPage),
+    page: Number(options.pagination.page)
+  });
+  const { execute: fetchPage2, data: pageData, status: pageDataStatus2 } = useAsyncData(() => {
+    return props.handler({
+      page: String(currentPage.value),
+      perPage: String(currentPageSize.value),
+      search: ""
+    });
+  }, { immediate: false });
+  const allPagesData2 = shallowRef([]);
+  watch(pageData, (value) => {
+    if (value?.items) {
+      allPagesData2.value.push(...value.items);
+      triggerRef(allPagesData2);
+    }
+  });
+  return { fetchPage: fetchPage2, pageData, nextPage: next, isLastPage: isLastPage2, pageDataStatus: pageDataStatus2, allPagesData: allPagesData2 };
+}
+function useInfiniteScrollData(options) {
+  const isOpen2 = ref(false);
+  const contentDiv = ref(null);
+  watch(isOpen2, (value) => {
+    if (value) {
+      contentDiv.value = document.querySelector(`
+          [data-autocomplete-select-content="${autocompleteSelectId}"] [data-reka-combobox-viewport]
+        `) ?? null;
+    }
+  }, { flush: "post" });
+  useInfiniteScroll(contentDiv, () => {
+    options.nextPage();
+    return fetchPage();
+  }, { distance: 10, canLoadMore: () => !searchTerm.value && !isLastPage.value });
+  return { isOpen: isOpen2 };
+}
+function useSearch(options) {
+  const searchTerm2 = ref("");
+  const searchTermDebounced = refDebounced(searchTerm2, 500);
+  let controller;
+  const { data: searchData2, status: searchStatus2, execute: search } = useAsyncData(() => {
+    controller?.abort();
+    controller = new AbortController();
+    return props.handler({
+      ...options.pagination,
+      search: searchTermDebounced.value
+    }, controller.signal);
+  }, { lazy: true, immediate: false });
+  watch(searchTermDebounced, (value) => {
+    value && search();
+  });
+  return { searchData: searchData2, searchStatus: searchStatus2, searchTerm: searchTerm2 };
+}
+function useAutocompleteCache(options) {
+  const selectedItemCache = shallowRef(/* @__PURE__ */ new Map());
+  watch(() => [props.modelValue, options.items.value], ([value]) => {
+    const cacheSize = selectedItemCache.value.size;
+    (Array.isArray(value) ? value : [value]).forEach((code) => {
+      if (!code || selectedItemCache.value.has(code)) {
+        return;
+      }
+      const item = options.items.value.find((item2) => item2[props.valueKey] === code);
+      if (item) {
+        selectedItemCache.value.set(code, structuredClone(toRaw(item)));
+      }
+    });
+    cacheSize !== selectedItemCache.value.size && triggerRef(selectedItemCache);
+  }, { immediate: true });
+  const getCachedLabel2 = (value) => {
+    return selectedItemCache.value.get(value)?.[props.labelKey] ?? value;
+  };
+  return { selectedItemCache, getCachedLabel: getCachedLabel2 };
+}
+const _ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.autocompleteSelect || {} })());
+</script>

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

@@ -0,0 +1,42 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, Pagination, PaginationQueryRaw } from '../types';
+import type { ResetValue } from './ButtonClear.vue';
+import theme from '#build/cms/autocomplete-select';
+type AutocompleteSelect = ComponentConfig<typeof theme, AppConfig, 'autocompleteSelect'>;
+type PaginationQuery = Required<PaginationQueryRaw>;
+type HandlerQuery = PaginationQuery & {
+    search: string;
+};
+export interface AutocompleteSelectProps<T extends object, M extends boolean = true> {
+    modelValue: M extends true ? (string | number)[] : (string | number | null | undefined);
+    cacheKey: string;
+    handler: (query: HandlerQuery, signal?: AbortSignal) => Promise<{
+        items: T[];
+        pagination: Pagination;
+    }>;
+    valueKey?: keyof T;
+    labelKey?: keyof T;
+    multiple?: M;
+    placeholder?: string;
+    resetValue?: ResetValue;
+    class?: any;
+    ui?: AutocompleteSelect['slots'];
+}
+export interface AutocompleteSelectEmits {
+    'update:modelValue': [string[]];
+}
+declare const _default: <T extends object, M extends boolean = true>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((args_0: string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AutocompleteSelectProps<T, M> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", args_0: string[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/ButtonCopy.vue

@@ -0,0 +1,40 @@
+<template>
+  <UTooltip
+    :text="tooltipText"
+    :content="{ side: 'top' }"
+    disable-hoverable-content
+    disable-closing-trigger
+  >
+    <UButton
+      :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+      :color="color"
+      :variant="variant"
+      :size="size"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
+      @click="copy(value)"
+    />
+  </UTooltip>
+</template>
+
+<script>
+import theme from "#build/cms/button-copy";
+import { computed, useAppConfig, useClipboard } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  label: { type: String, required: false, default: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C" },
+  copiedLabel: { type: String, required: false, default: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E" },
+  value: { type: String, required: true },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "link" },
+  size: { type: null, required: false, default: "sm" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const { copy, copied } = useClipboard();
+const tooltipText = computed(() => copied.value ? props.copiedLabel : props.label);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.buttonCopy || {} })());
+</script>

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/button-copy';
+type ButtonCopy = ComponentConfig<typeof theme, AppConfig, 'buttonCopy'>;
+export interface ButtonCopyProps {
+    label?: string;
+    copiedLabel?: string;
+    value: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    class?: any;
+    ui?: ButtonCopy['slots'];
+}
+declare const _default: import("vue").DefineComponent<ButtonCopyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonCopyProps> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    variant: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link";
+    label: string;
+    copiedLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/ButtonDelete.vue

@@ -0,0 +1,52 @@
+<template>
+  <UTooltip
+    :text="tooltipText"
+    :content="{ side: 'top' }"
+    :disabled="!tooltipText"
+    disable-hoverable-content
+    disable-closing-trigger
+  >
+    <UButton
+      v-bind="buttonProps"
+      color="error"
+      auto-loading
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
+      @click="handleDeleteClick()"
+    />
+  </UTooltip>
+</template>
+
+<script>
+import theme from "#build/cms/button-delete";
+import { computed, useAppConfig, useOverlay } from "#imports";
+import { tv } from "../utils/tv";
+import ModalConfirm from "./ModalConfirm.vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  modalProps: { type: Object, required: false },
+  buttonProps: { type: Object, required: false },
+  confirmText: { type: String, required: false },
+  title: { type: String, required: false },
+  message: { type: String, required: false },
+  tooltipText: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  onConfirm: { type: Function, required: false }
+});
+defineEmits(["confirm", "close"]);
+const appConfig = useAppConfig();
+const modal = useOverlay().create(ModalConfirm);
+function handleDeleteClick() {
+  return modal.open({
+    ...props.modalProps,
+    title: props.title ?? "\u0423\u0434\u0430\u043B\u0435\u043D\u0438\u0435",
+    message: props.message ?? "\u0412\u044B \u0434\u0435\u0438\u0306\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0445\u043E\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043B\u0438\u0442\u044C?",
+    confirmButton: { color: "error", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
+    confirmText: props.confirmText,
+    onConfirm: props.onConfirm
+  });
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.buttonDelete || {} })());
+</script>

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

@@ -0,0 +1,28 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ModalProps } from '@nuxt/ui';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentConfig } from '../types';
+import type { ModalConfirmEmits, ModalConfirmProps } from './ModalConfirm.vue';
+import theme from '#build/cms/button-delete';
+import ModalConfirm from './ModalConfirm.vue';
+type ButtonDelete = ComponentConfig<typeof theme, AppConfig, 'buttonDelete'>;
+export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'> {
+    modalProps?: Omit<ModalProps & ComponentProps<typeof ModalConfirm>, 'title' | 'message' | 'onConfirm' | 'confirmButton'>;
+    buttonProps?: Omit<ButtonProps, 'color'>;
+    confirmText?: string;
+    title?: string;
+    message?: string;
+    tooltipText?: string;
+    class?: any;
+    ui?: ButtonDelete['slots'];
+}
+export interface ButtonDeleteEmits extends ModalConfirmEmits {
+}
+declare const _default: import("vue").DefineComponent<ButtonDeleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ButtonDeleteProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/FormPanel.vue

@@ -0,0 +1,70 @@
+<template>
+  <UDashboardPanel
+    :ui="{
+  body: 'flex-row p-0 sm:p-0 gap-0 sm:gap-0'
+}"
+  >
+    <template #header>
+      <UDashboardNavbar :title="title" :ui="{ right: 'gap-2' }">
+        <template v-if="toBack" #leading>
+          <UButton :to="toBack" variant="link" :icon="appConfig.ui.icons.arrowLeft" />
+        </template>
+        <template #right>
+          <slot name="actions" />
+          <UButton
+            type="submit"
+            label="Сохранить"
+            :form="formId"
+            :loading="form?.loading"
+            loading-auto
+          />
+        </template>
+      </UDashboardNavbar>
+    </template>
+    <template #body>
+      <UForm
+        :id="formId"
+        ref="form"
+        :state="state"
+        :schema="schema"
+        :class="ui.form({ class: props.ui?.form })"
+        @submit="submitHandler"
+      >
+        <div :class="ui.body({ class: props.ui?.body })">
+          <slot />
+        </div>
+        <div v-if="$slots.sidebar" :class="ui.sidebar({ class: props.ui?.sidebar })">
+          <slot name="sidebar" />
+        </div>
+      </UForm>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script>
+import theme from "#build/cms/form-panel";
+import { computed, useAppConfig, useTemplateRef } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  toBack: { type: null, required: false },
+  formId: { type: String, required: true },
+  schema: { type: Object, required: true },
+  state: { type: Object, required: true },
+  asideDivide: { type: Boolean, required: false },
+  handler: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineEmits(["update:state"]);
+defineSlots();
+const appConfig = useAppConfig();
+const form = useTemplateRef("form");
+async function submitHandler(event) {
+  await props.handler?.(event);
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanel || {} })());
+</script>

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

@@ -0,0 +1,41 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { FormSubmitEvent } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ZodSchema } from 'zod';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/form-panel';
+type FormPanel = ComponentConfig<typeof theme, AppConfig, 'formPanel'>;
+export interface FormPanelProps<T> {
+    title?: string;
+    toBack?: RouteLocationRaw;
+    formId: string;
+    schema: ZodSchema<any>;
+    state: Partial<T>;
+    asideDivide?: boolean;
+    handler?: (event: FormSubmitEvent<T>) => Promise<void>;
+    class?: any;
+    ui?: FormPanel['slots'];
+}
+export interface FormPanelEmits<T> {
+    'update:state': [value: T];
+}
+export interface FormPanelSlots {
+    default?: () => any;
+    sidebar?: () => any;
+    actions?: () => any;
+}
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:state"?: ((value: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:state"> & FormPanelProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: FormPanelSlots;
+    emit: (evt: "update:state", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/FormPanelAsideSection.vue

@@ -0,0 +1,41 @@
+<template>
+  <UCollapsible :class="ui.root({ class: [props.ui?.root, props.class] })" default-open>
+    <div v-if="title || $slots.title || icon || $slots.icon" :class="ui.header({ class: props.ui?.header })">
+      <div v-if="icon || $slots.icon" :class="ui.icon({ class: props.ui?.icon })">
+        <slot name="icon">
+          <UIcon v-if="icon" :name="icon" />
+        </slot>
+      </div>
+      <div v-if="title || $slots.title" :class="ui.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+    </div>
+
+    <template #content>
+      <div :class="ui.body({ class: props.ui?.body })">
+        <slot />
+      </div>
+    </template>
+  </UCollapsible>
+</template>
+
+<script>
+import theme from "#build/cms/form-panel-aside-section";
+import { computed, useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  icon: { type: String, required: false },
+  divide: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanelAsideSection || {} })());
+</script>

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/form-panel-aside-section';
+type FormPanelAsideSection = ComponentConfig<typeof theme, AppConfig, 'formPanelAsideSection'>;
+export interface FormPanelAsideSectionProps {
+    title?: string;
+    icon?: string;
+    divide?: boolean;
+    class?: any;
+    ui?: FormPanelAsideSection['slots'];
+}
+export interface FormPanelAsideSectionSlots {
+    default?: () => any;
+    icon?: () => any;
+    title?: () => any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormPanelAsideSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormPanelAsideSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormPanelAsideSectionSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormPanelSection.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.title({ class: props.ui?.title })">
+      {{ title }}
+    </div>
+    <div v-if="description" :class="ui.description({ class: props.ui?.description })">
+      {{ description }}
+    </div>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import theme from "#build/cms/form-panel-section";
+import { computed, useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.formPanelSection || {} })());
+</script>

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

@@ -0,0 +1,20 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/form-panel-section';
+type FormPanelSection = ComponentConfig<typeof theme, AppConfig, 'formPanelSection'>;
+export interface FormPanelSectionProps {
+    title: string;
+    description?: string;
+    class?: any;
+    ui?: FormPanelSection['slots'];
+}
+export interface FormPanelSectionSlots {
+    default?: () => any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormPanelSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormPanelSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormPanelSectionSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InputSeo.vue

@@ -0,0 +1,73 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UFormField
+      name="seo.title"
+      label="Заголовок"
+      :hint="`${model.title.length}/60`"
+      :ui="{ hint: 'text-xs' }"
+    >
+      <UInput v-model="model.title" placeholder="Введите заголовок..." class="w-full" />
+
+      <template #help>
+        <p class="text-xs mb-2">
+          Рекомендуемая длина: 45-60 символов
+        </p>
+        <UProgress
+          :model-value="title.progress"
+          :color="title.color"
+          size="sm"
+        />
+      </template>
+    </UFormField>
+
+    <UFormField
+      name="seo.description"
+      label="Описание"
+      :hint="`${model.description.length}/160`"
+      :ui="{ hint: 'text-xs' }"
+    >
+      <UTextarea
+        v-model="model.description"
+        placeholder="Введите описание..."
+        class="w-full"
+        autoresize
+      />
+
+      <template #help>
+        <p class="text-xs mb-2">
+          Рекомендуемая длина: 130-160 символов
+        </p>
+        <UProgress
+          :model-value="description.progress"
+          :color="description.color"
+          size="sm"
+        />
+      </template>
+    </UFormField>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/input-seo";
+import { computed, useAppConfig } from "#imports";
+import { Primitive } from "reka-ui";
+import { useSeoStats } from "../composables/useSeoStats";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const model = defineModel({ type: Object, ...{
+  default: () => ({
+    title: "",
+    description: ""
+  })
+} });
+const appConfig = useAppConfig();
+const { title, description } = useSeoStats(model);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputSeo || {} })());
+</script>