@hywax/cms 0.0.4 → 0.0.6

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

@@ -0,0 +1,19 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig, SEO } from '../types';
+import theme from '#build/cms/input-seo';
+type InputSeo = ComponentConfig<typeof theme, AppConfig, 'inputSeo'>;
+export interface InputSeoProps {
+    as?: any;
+    class?: any;
+    ui?: InputSeo['slots'];
+}
+declare const _default: import("vue").DefineComponent<InputSeoProps & {
+    modelValue?: SEO;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SEO) => any;
+}, string, import("vue").PublicProps, Readonly<InputSeoProps & {
+    modelValue?: SEO;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SEO) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/InputSlug.vue

@@ -0,0 +1,74 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UFormField
+      :label="label"
+      :name="titleKey"
+    >
+      <UInput
+        v-model="title"
+        :color="color"
+        :variant="variant"
+        :size="size"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField :name="slugKey" class="-mt-3" eager-validation>
+      <UInput
+        v-model="slug"
+        class="w-full"
+        size="xs"
+        variant="none"
+        :placeholder="isRegenerate ? '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A' : '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u043B\u0430\u0433'"
+        :disabled="isRegenerate"
+        :ui="{
+  base: 'text-muted'
+}"
+      >
+        <template #leading>
+          <UButton
+            size="xs"
+            variant="link"
+            :icon="appConfig.ui.icons.link"
+            class="p-0"
+            :color="isRegenerate ? 'success' : 'neutral'"
+            @click="isRegenerate = !isRegenerate"
+          />
+        </template>
+      </UInput>
+    </UFormField>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/input-slug";
+import { computed, ref, useAppConfig, watch } from "#imports";
+import { Primitive } from "reka-ui";
+import { slugify } from "../utils/slugify";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  regenerate: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  titleKey: { type: String, required: false },
+  slugKey: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const title = defineModel("title", { type: String });
+const slug = defineModel("slug", { type: String });
+const appConfig = useAppConfig();
+const isRegenerate = ref(props.regenerate);
+watch(title, () => {
+  if (!isRegenerate.value) {
+    return;
+  }
+  slug.value = slugify(title.value);
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputSlug || {} })());
+</script>

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

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { InputProps } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/input-slug';
+type InputSlug = ComponentConfig<typeof theme, AppConfig, 'inputSlug'>;
+export interface InputSlugProps {
+    regenerate?: boolean;
+    label?: string;
+    titleKey?: string;
+    slugKey?: string;
+    color?: InputProps['color'];
+    variant?: InputProps['variant'];
+    size?: InputProps['size'];
+    as?: any;
+    class?: any;
+    ui?: InputSlug['slots'];
+}
+declare const _default: import("vue").DefineComponent<InputSlugProps & {
+    title?: string;
+    slug?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:title": (value: string | undefined) => any;
+    "update:slug": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<InputSlugProps & {
+    title?: string;
+    slug?: string;
+}> & Readonly<{
+    "onUpdate:title"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:slug"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/ModalConfirm.vue

@@ -0,0 +1,96 @@
+<template>
+  <UModal
+    :title="title"
+    :ui="{
+  content: 'divide-y-0',
+  body: 'py-0! text-sm',
+  description: 'hidden'
+}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <template #description />
+    <template #body>
+      {{ message }}
+
+      <UForm
+        v-if="confirmText"
+        id="confirm-form"
+        ref="form"
+        class="pt-3"
+        :state="state"
+        @submit="handleConfirmClick()"
+      >
+        <UFormField name="confirmTextValue">
+          <template #label>
+            Введите <strong class="text-highlighted">{{ confirmText }}</strong> для подтверждения
+          </template>
+
+          <UInput v-model="state.confirmTextValue" class="w-full" />
+        </UFormField>
+      </UForm>
+    </template>
+
+    <template #footer>
+      <UButton
+        color="neutral"
+        label="Закрыть"
+        variant="ghost"
+        :size="size"
+        @click="emit('close')"
+      />
+
+      <UButton
+        v-if="confirmText"
+        form="confirm-form"
+        type="submit"
+        :label="confirmLabel"
+        :disabled="state.confirmTextValue !== confirmText"
+        :loading="form?.loading"
+        :color="color"
+        :variant="variant"
+        :size="size"
+      />
+      <UButton
+        v-else
+        label="Подтвердить"
+        loading-auto
+        :color="color"
+        :variant="variant"
+        :size="size"
+        @click="handleConfirmClick()"
+      />
+    </template>
+  </UModal>
+</template>
+
+<script>
+import theme from "#build/cms/modal-confirm";
+import { computed, reactive, useAppConfig, useTemplateRef } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  message: { type: String, required: true },
+  confirmText: { type: String, required: false },
+  confirmLabel: { type: String, required: false, default: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false, default: "lg" },
+  onConfirm: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["confirm", "close"]);
+const appConfig = useAppConfig();
+const form = useTemplateRef("form");
+const state = reactive({
+  confirmTextValue: ""
+});
+async function handleConfirmClick() {
+  await props.onConfirm?.();
+  emit("close");
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.modalConfirm || {} })());
+</script>

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

@@ -0,0 +1,32 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/modal-confirm';
+type ModalConfirm = ComponentConfig<typeof theme, AppConfig, 'modalConfirm'>;
+export interface ModalConfirmProps {
+    title?: string;
+    message: string;
+    confirmText?: string;
+    confirmLabel?: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    onConfirm?: () => Promise<any> | any;
+    class?: any;
+    ui?: ModalConfirm['slots'];
+}
+export interface ModalConfirmEmits {
+    confirm: [];
+    close: [];
+}
+declare const _default: import("vue").DefineComponent<ModalConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ModalConfirmProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    confirmLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TableCellPreview.vue

@@ -0,0 +1,40 @@
+<template>
+  <ULink :to="to" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UploraImage
+      v-if="thumbnail"
+      :id="thumbnail.id"
+      :alt="title"
+      :lqip="thumbnail.lqip"
+      :sizes="[{ width: 30, height: 30, descriptor: '1x' }]"
+      :ui="{ picture: 'aspect-square' }"
+      :class="ui.image({ class: props.ui?.image })"
+    />
+    <div :class="ui.container({ class: props.ui?.container })">
+      <p :class="ui.title({ class: props.ui?.title })">
+        {{ title }}
+      </p>
+      <p v-if="description" :class="ui.description({ class: props.ui?.description })">
+        {{ description }}
+      </p>
+    </div>
+  </ULink>
+</template>
+
+<script>
+import theme from "#build/cms/table-cell-preview";
+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 },
+  thumbnail: { type: Object, required: false },
+  to: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tableCellPreview || {} })());
+</script>

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

@@ -0,0 +1,18 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/table-cell-preview';
+type TableCellPreview = ComponentConfig<typeof theme, AppConfig, 'tableCellPreview'>;
+export interface TableCellPreviewProps {
+    title: string;
+    description?: string;
+    thumbnail?: {
+        id: string;
+        lqip?: string;
+    };
+    to?: RouteLocationRaw;
+    class?: any;
+    ui?: TableCellPreview['slots'];
+}
+declare const _default: import("vue").DefineComponent<TableCellPreviewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellPreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TableCellSeo.vue

@@ -0,0 +1,34 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <UBadge
+      :label="title.progress"
+      :color="title.color"
+      variant="subtle"
+    />
+    <UBadge
+      :label="description.progress"
+      :color="description.color"
+      variant="subtle"
+    />
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms/table-cell-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({
+  seo: { type: Object, required: true },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const { title, description } = useSeoStats(props.seo);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tableCellSeo || {} })());
+</script>

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

@@ -0,0 +1,13 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+import type { SEO } from '../types/seo';
+import theme from '#build/cms/table-cell-seo';
+type TableCellSeo = ComponentConfig<typeof theme, AppConfig, 'tableCellSeo'>;
+export interface TableCellSeoProps {
+    seo: SEO;
+    as?: any;
+    class?: any;
+    ui?: TableCellSeo['slots'];
+}
+declare const _default: import("vue").DefineComponent<TableCellSeoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellSeoProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TableCellUser.vue

@@ -0,0 +1,33 @@
+<template>
+  <UUser
+    :name="name"
+    :description="description"
+    :to="to"
+    :avatar="{
+  src: createAvatarByName(name)
+}"
+    size="sm"
+    :as="as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  />
+</template>
+
+<script>
+import theme from "#build/cms/table-cell-user";
+import { computed, useAppConfig } from "#imports";
+import { createAvatarByName } from "../utils/avatar";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  name: { type: String, required: true },
+  description: { type: String, required: false },
+  to: { type: null, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tableCellUser || {} })());
+</script>

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

@@ -0,0 +1,15 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/table-cell-user';
+type TableCellUser = ComponentConfig<typeof theme, AppConfig, 'tableCellUser'>;
+export interface TableCellUserProps {
+    name: string;
+    description?: string;
+    to?: RouteLocationRaw;
+    as?: any;
+    class?: any;
+    ui?: TableCellUser['slots'];
+}
+declare const _default: import("vue").DefineComponent<TableCellUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellUserProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TablePanel.vue

@@ -0,0 +1,153 @@
+<template>
+  <UDashboardPanel
+    :ui="{ body: 'border-b border-default relative' }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <template #header>
+      <UDashboardNavbar :title="title">
+        <template #right>
+          <slot name="navbar-right" />
+        </template>
+      </UDashboardNavbar>
+      <UDashboardToolbar>
+        <template #left>
+          <slot name="toolbar-left" />
+        </template>
+        <template #right>
+          <slot name="toolbar-right" />
+
+          <TablePanelColumnSorting
+            :model-value="sorting"
+            :table="tableRef?.tableApi"
+            @update:model-value="emit('update:sorting', $event)"
+          />
+          <TablePanelColumnVisibility
+            v-if="props.columnVisibility"
+            v-model="columnVisibility"
+            :table="tableRef?.tableApi"
+          />
+        </template>
+      </UDashboardToolbar>
+    </template>
+    <template #body>
+      <div v-show="loading" :class="ui.loader({ class: props.ui?.loader })">
+        <UIcon :name="appConfig.ui.icons.loading" :class="ui.loaderIcon({ class: props.ui?.loaderIcon })" />
+      </div>
+
+      <UTable
+        ref="table"
+        v-model:column-visibility="columnVisibility"
+        :class="ui.table({ class: props.ui?.table })"
+        :column-pinning="columnPinning"
+        :columns="tableColumns"
+        :data="data"
+        :sorting-options="{ manualSorting: hasPagination }"
+        :sticky="sticky"
+        :ui="{
+  base: 'table-fixed border-separate border-spacing-0',
+  thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+  tbody: '[&>tr]:last:[&>td]:border-b-0',
+  th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+  td: 'border-b border-default'
+}"
+      >
+        <template v-for="(_, name) in tableProxySlots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </UTable>
+    </template>
+
+    <template v-if="hasPagination" #footer>
+      <div class="flex justify-between items-center py-3 px-4">
+        <div>
+          <span class="text-sm text-muted">
+            Всего: {{ total ?? 0 }}
+          </span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-muted">
+            Строк на странице:
+          </span>
+          <USelect
+            :model-value="paginationProps.itemsPerPage"
+            :items="itemsPerPageList"
+            class="w-18"
+            @update:model-value="emit('update:itemsPerPage', Number($event))"
+          />
+          <UPagination
+            v-bind="paginationProps"
+            :sibling-count="1"
+            variant="ghost"
+            show-edges
+            @update:page="emit('update:page', $event)"
+          />
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script>
+import theme from "#build/cms/table-panel";
+import { UButton, UDropdownMenu } from "#components";
+import { computed, h, ref, useAppConfig, useTemplateRef } from "#imports";
+import { objectOmit, reactivePick } from "@vueuse/core";
+import { useForwardProps } from "reka-ui";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  page: { type: Number, required: false },
+  itemsPerPage: { type: Number, required: false },
+  total: { type: Number, required: false },
+  data: { type: Array, required: false },
+  columns: { type: null, required: false },
+  sticky: { type: Boolean, required: false, default: true },
+  columnPinning: { type: Object, required: false },
+  columnVisibility: { type: Boolean, required: false, default: true },
+  defaultHiddenColumns: { type: Array, required: false, default: () => [] },
+  sorting: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  actions: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["update:sorting", "update:page", "update:itemsPerPage"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const tableColumns = computed(() => [
+  ...props.columns ?? [],
+  ...props.actions ? [{
+    id: "actions",
+    meta: { class: { td: "w-20" } },
+    enableHiding: false,
+    cell: ({ row }) => h(
+      "div",
+      { class: "text-right" },
+      h(
+        UDropdownMenu,
+        {
+          content: { align: "end" },
+          items: props.actions?.(row.original) ?? []
+        },
+        () => h(UButton, {
+          icon: "lucide:ellipsis-vertical",
+          color: "neutral",
+          variant: "ghost",
+          class: "ml-auto"
+        })
+      )
+    )
+  }] : []
+]);
+const paginationProps = useForwardProps(reactivePick(props, "page", "itemsPerPage", "total"));
+const tableProxySlots = objectOmit(slots, ["toolbar-left", "toolbar-right", "navbar-right"]);
+const tableRef = useTemplateRef("table");
+const initialVisibilityState = Object.fromEntries(props.defaultHiddenColumns.map((column) => [column, false]));
+const columnVisibility = ref(initialVisibilityState);
+const hasPagination = computed(() => props.page !== void 0);
+const itemsPerPageList = [10, 20, 50, 100];
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tablePanel || {} })());
+</script>

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

@@ -0,0 +1,50 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { DropdownMenuItem, TableProps, TableSlots } from '@nuxt/ui';
+import type { ColumnPinningState, SortingState } from '@tanstack/vue-table';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/table-panel';
+type TablePanel = ComponentConfig<typeof theme, AppConfig, 'tablePanel'>;
+export interface TablePanelProps<T> {
+    title?: string;
+    page?: number;
+    itemsPerPage?: number;
+    total?: number;
+    data?: T[];
+    columns?: TableProps<T>['columns'];
+    sticky?: boolean;
+    columnPinning?: ColumnPinningState;
+    columnVisibility?: boolean;
+    defaultHiddenColumns?: string[];
+    sorting?: SortingState;
+    loading?: boolean;
+    actions?: (row: T) => DropdownMenuItem[];
+    class?: any;
+    ui?: TablePanel['slots'];
+}
+export interface TablePanelEmits {
+    'update:sorting': [value: SortingState];
+    'update:page': [value: number];
+    'update:itemsPerPage': [value: number];
+}
+export type TablePanelSlots<T> = Omit<TableSlots<T>, 'toolbar-left' | 'toolbar-right' | 'navbar-right'> & {
+    'toolbar-left'?: () => any;
+    'navbar-right'?: () => any;
+    'toolbar-right'?: () => 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:sorting"?: ((value: SortingState) => any) | undefined;
+        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sorting" | "onUpdate:page" | "onUpdate:itemsPerPage"> & TablePanelProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: TablePanelSlots<T>;
+    emit: ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:itemsPerPage", value: number) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};