@hywax/cms 0.0.23 → 1.0.1

package/dist/runtime/components/FormPanel.vue

@@ -11,11 +11,12 @@
         </template>
         <template #right>
           <slot name="actions" />
+
           <UButton
             type="submit"
             label="Сохранить"
             :form="formId"
-            :loading="form?.loading"
+            :loading="loading"
             loading-auto
           />
         </template>
@@ -24,7 +25,6 @@
     <template #body>
       <UForm
         :id="formId"
-        ref="form"
         :state="state"
         :schema="schema"
         :class="ui.form({ class: props.ui?.form })"
@@ -43,7 +43,8 @@
 
 <script>
 import theme from "#build/cms/form-panel";
-import { computed, useAppConfig, useTemplateRef } from "#imports";
+import { useAppConfig } from "#imports";
+import { computed, useId } from "vue";
 import { tv } from "../tv";
 </script>
 
@@ -51,18 +52,20 @@ import { tv } from "../tv";
 const props = defineProps({
   title: { type: String, required: false },
   toBack: { type: null, required: false },
-  formId: { type: String, required: true },
-  schema: { type: Object, required: true },
+  formId: { type: String, required: false },
+  schema: { type: null, required: true },
   state: { type: Object, required: true },
+  loading: { type: Boolean, required: false },
+  handler: { type: Function, required: true },
   asideDivide: { type: Boolean, required: false },
-  handler: { type: Function, required: false },
+  showReset: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
 defineEmits(["update:state"]);
 defineSlots();
 const appConfig = useAppConfig();
-const form = useTemplateRef("form");
+const formId = computed(() => props.formId ?? `form-${useId()}`);
 async function submitHandler(event) {
   await props.handler?.(event);
 }

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

@@ -1,22 +1,23 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { FormSubmitEvent } from '@nuxt/ui';
+import type { FormData, FormSchema, 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> {
+export interface FormPanelProps<S extends FormSchema, T extends FormData<S> = FormData<S>> {
     title?: string;
     toBack?: RouteLocationRaw;
-    formId: string;
-    schema: ZodSchema<any>;
+    formId?: string;
+    schema: S;
     state: Partial<T>;
+    loading?: boolean;
+    handler: (event: FormSubmitEvent<T>) => Promise<void>;
     asideDivide?: boolean;
-    handler?: (event: FormSubmitEvent<T>) => Promise<void>;
+    showReset?: boolean;
     class?: any;
     ui?: FormPanel['slots'];
 }
-export interface FormPanelEmits<T> {
+export interface FormPanelEmits<S extends FormSchema, T extends FormData<S> = FormData<S>> {
     'update:state': [value: T];
 }
 export interface FormPanelSlots {
@@ -24,18 +25,23 @@ export interface FormPanelSlots {
     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;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, T extends FormData<S> = FormData<S>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FormPanelProps<S, T> & {
+        "onUpdate:state"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => 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> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,24 @@
+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: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __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>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -14,8 +14,9 @@ export interface FormPanelAsideSectionSlots {
     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>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __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>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,21 @@
+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: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __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>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormPanelSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.title({ class: props.ui?.title })">
+    <div v-if="title" :class="ui.title({ class: props.ui?.title })">
       {{ title }}
     </div>
     <div v-if="description" :class="ui.description({ class: props.ui?.description })">
@@ -20,7 +20,7 @@ import { tv } from "../tv";
 
 <script setup>
 const props = defineProps({
-  title: { type: String, required: true },
+  title: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }

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

@@ -3,7 +3,7 @@ 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;
+    title?: string;
     description?: string;
     class?: any;
     ui?: FormPanelSection['slots'];
@@ -11,8 +11,9 @@ export interface FormPanelSectionProps {
 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>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __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>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,27 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+interface LayoutProps {
+    navigation: NavigationMenuItem[];
+    version: string;
+    logotype?: string;
+    logotypeIcon?: string;
+    logotypeShortIcon?: string;
+    homeLink?: RouteLocationRaw;
+}
+interface DashboardLayoutSlots {
+    default: () => any;
+    logotype: () => any;
+    footer: (props: {
+        collapsed: boolean | undefined;
+    }) => any;
+}
+type __VLS_Slots = DashboardLayoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<LayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Layout.vue

@@ -0,0 +1,79 @@
+<template>
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      v-model:open="isSidebarOpen"
+      v-model:collapsed="isSidebarCollapsed"
+      :ui="{ footer: 'lg:border-t lg:border-default' }"
+      collapsible
+    >
+      <template #header="{ collapsed }">
+        <NuxtLink :to="homeLink" class="flex items-center gap-2.5" :class="collapsed && 'mx-auto'">
+          <UIcon v-if="logotypeIcon && logotypeShortIcon" :name="collapsed ? logotypeShortIcon : logotypeIcon" />
+          <slot v-else name="logotype">
+            <span class="text-lg">{{ logotype }}</span>
+          </slot>
+
+          <UBadge
+            v-show="!collapsed"
+            color="primary"
+            variant="soft"
+            size="sm"
+            :label="version"
+          />
+        </NuxtLink>
+      </template>
+
+      <template #default="{ collapsed }">
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="navigation"
+          orientation="vertical"
+          tooltip
+          popover
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="links"
+          orientation="vertical"
+          tooltip
+          class="mt-auto"
+        />
+      </template>
+
+      <template v-if="$slots.footer" #footer="{ collapsed }">
+        <div class="my-1">
+          <slot name="footer" :collapsed="collapsed" />
+        </div>
+      </template>
+    </UDashboardSidebar>
+
+    <slot />
+  </UDashboardGroup>
+</template>
+
+<script setup>
+import { useAppConfig } from "#imports";
+import { computed } from "vue";
+import { useAdmin } from "../composables/useAdmin";
+defineProps({
+  navigation: { type: Array, required: true },
+  version: { type: String, required: true },
+  logotype: { type: String, required: false },
+  logotypeIcon: { type: String, required: false },
+  logotypeShortIcon: { type: String, required: false },
+  homeLink: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const { isSidebarOpen, isSidebarCollapsed } = useAdmin();
+const links = computed(() => [
+  {
+    label: isSidebarCollapsed.value ? "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" : "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E",
+    icon: isSidebarCollapsed.value ? appConfig.ui.icons.panelClose : appConfig.ui.icons.panelOpen,
+    onSelect: () => {
+      isSidebarCollapsed.value = !isSidebarCollapsed.value;
+    }
+  }
+]);
+</script>

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

@@ -0,0 +1,27 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+interface LayoutProps {
+    navigation: NavigationMenuItem[];
+    version: string;
+    logotype?: string;
+    logotypeIcon?: string;
+    logotypeShortIcon?: string;
+    homeLink?: RouteLocationRaw;
+}
+interface DashboardLayoutSlots {
+    default: () => any;
+    logotype: () => any;
+    footer: (props: {
+        collapsed: boolean | undefined;
+    }) => any;
+}
+type __VLS_Slots = DashboardLayoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<LayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,33 @@
+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: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: 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>;

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

@@ -19,7 +19,9 @@ export interface ModalConfirmEmits {
     confirm: [];
     close: [];
 }
-declare const _default: import("vue").DefineComponent<ModalConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ModalConfirmProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     confirm: () => any;
 }, string, import("vue").PublicProps, Readonly<ModalConfirmProps> & Readonly<{
@@ -29,4 +31,3 @@ declare const _default: import("vue").DefineComponent<ModalConfirmProps, {}, {},
     size: "xs" | "sm" | "md" | "lg" | "xl";
     confirmLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -0,0 +1,17 @@
+import type { SortingState, Table } from '@tanstack/vue-table';
+export interface TableColumnSortingProps {
+    table?: Table<any>;
+}
+export type TableColumnSortingModel = SortingState;
+type __VLS_Props = TableColumnSortingProps;
+type __VLS_ModelProps = {
+    modelValue?: TableColumnSortingModel;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SortingState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SortingState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/{TablePanelColumnSorting.vue → TableColumnSorting.vue}

@@ -1,18 +1,18 @@
 <template>
-  <UPopover v-if="sortingColumns.length > 0">
+  <UPopover v-if="sortingColumns.length > 0" v-model:open="isOpen">
     <UChip :ui="{ base: 'z-1 size-3' }" :show="model.length > 0" size="xl">
       <UButton
-        :icon="appConfig.ui.icons.arrowDownUp"
-        variant="outline"
+        variant="soft"
         color="neutral"
         label="Сортировка"
+        :icon="appConfig.ui.icons.sort"
       />
     </UChip>
 
     <template #content>
       <div class="flex flex-col gap-2 p-3">
         <URadioGroup
-          :model-value="model[0]?.id"
+          :model-value="model[0]?.id ?? noSortColumn.value"
           :items="sortingColumns"
           @update:model-value="updateModel({ id: $event, desc: model[0]?.desc ?? false })"
         />
@@ -38,35 +38,44 @@
   </UPopover>
 </template>
 
-<script>
-import theme from "#build/cms/table-panel-column-sorting";
-import { computed, useAppConfig } from "#imports";
-import { tv } from "../tv";
-</script>
-
 <script setup>
+import { useAppConfig } from "#imports";
+import { computed, ref } from "vue";
 const props = defineProps({
-  table: { type: Object, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  table: { type: Object, required: false }
 });
 const model = defineModel({ type: Array, ...{ default: [] } });
 const appConfig = useAppConfig();
+const noSortColumn = { label: "\u0411\u0435\u0437 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438", value: "null" };
 const sortingColumns = computed(() => {
   if (!props.table) {
     return [];
   }
-  return props.table.getAllColumns().filter((column) => column.columnDef.enableSorting).map((column) => ({
-    label: typeof column.columnDef.header === "string" ? column.columnDef.header : column.columnDef.id,
-    value: column.id
-  }));
+  const items = props.table.getAllColumns().filter((column) => column.columnDef.enableSorting).map((column) => {
+    const label = column.columnDef.meta?.headerLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.columnDef.id);
+    return {
+      label,
+      value: column.id
+    };
+  });
+  items.length > 0 && items.unshift(noSortColumn);
+  return items;
 });
 const sortOrder = [
   { icon: appConfig.ui.icons.sortAsc, label: "\u0410-\u042F", desc: false },
   { icon: appConfig.ui.icons.sortDesc, label: "\u042F-\u0410", desc: true }
 ];
 function updateModel(value) {
+  const currentSort = model.value[0];
+  const shouldUpdate = currentSort?.id !== value.id || currentSort?.desc !== value.desc || value.id === noSortColumn.value && model.value.length > 0;
+  if (!shouldUpdate) {
+    return;
+  }
+  if (value.id === noSortColumn.value) {
+    model.value = [];
+    return;
+  }
   model.value = [value];
 }
-const _ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tablePanelColumnSorting || {} })());
+const isOpen = ref(false);
 </script>

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

@@ -0,0 +1,17 @@
+import type { SortingState, Table } from '@tanstack/vue-table';
+export interface TableColumnSortingProps {
+    table?: Table<any>;
+}
+export type TableColumnSortingModel = SortingState;
+type __VLS_Props = TableColumnSortingProps;
+type __VLS_ModelProps = {
+    modelValue?: TableColumnSortingModel;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SortingState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SortingState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+import type { ColumnOrderState, Table, VisibilityState } from '@tanstack/vue-table';
+export interface TableColumnVisibilityProps {
+    storageKey?: string;
+    table?: Table<any>;
+}
+export type TableColumnVisibilityModel = VisibilityState;
+export type TableColumnVisibilityOrderModel = ColumnOrderState;
+type __VLS_Props = TableColumnVisibilityProps;
+type __VLS_ModelProps = {
+    'visibility'?: TableColumnVisibilityModel;
+    'order'?: TableColumnVisibilityOrderModel;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:visibility": (value: VisibilityState) => any;
+    "update:order": (value: ColumnOrderState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:visibility"?: ((value: VisibilityState) => any) | undefined;
+    "onUpdate:order"?: ((value: ColumnOrderState) => any) | undefined;
+}>, {
+    storageKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/TableColumnVisibility.vue

@@ -0,0 +1,111 @@
+<template>
+  <UPopover v-model:open="isOpen">
+    <UChip
+      :ui="{ base: 'z-1 size-3' }"
+      :show="hiddenColumnsCount > 0"
+      :text="hiddenColumnsCount"
+      size="xl"
+    >
+      <UButton
+        variant="soft"
+        color="neutral"
+        label="Колонки"
+        :icon="appConfig.ui.icons.columns"
+      />
+    </UChip>
+
+    <template #content>
+      <div class="p-3 min-w-64">
+        <h3 class="text-sm mb-2 text-muted">
+          Настройка колонок:
+        </h3>
+
+        <div ref="container">
+          <div
+            v-for="column in sortedItems"
+            v-show="column.label"
+            :key="column.id"
+            class="flex items-center gap-2 rounded hover:bg-elevated"
+          >
+            <UIcon
+              :name="appConfig.ui.icons.drag"
+              class="w-4 h-7 text-dimmed cursor-move shrink-0 handle"
+            />
+
+            <UCheckbox
+              class="flex-1 py-1"
+              :model-value="column.visible"
+              :label="column.label"
+              :disabled="!column.canHide"
+              @update:model-value="toggleColumnVisibility(column.id, $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+import { useAppConfig, useRoute } from "#imports";
+import { syncRef, useLocalStorage } from "@vueuse/core";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { getCmsStorageKey } from "../utils";
+const props = defineProps({
+  storageKey: { type: String, required: false, default: () => useRoute().name },
+  table: { type: Object, required: false }
+});
+const visibility = defineModel("visibility", { type: Object, ...{ default: {} } });
+const storedVisibility = useLocalStorage(getCmsStorageKey(`column-visibility:${props.storageKey}`), visibility.value);
+syncRef(storedVisibility, visibility, {
+  transform: { ltr: (value) => value }
+});
+const order = defineModel("order", { type: Array, ...{ default: [] } });
+const storedOrder = useLocalStorage(getCmsStorageKey(`column-order:${props.storageKey}`), order.value);
+syncRef(storedOrder, order, {
+  transform: { ltr: (value) => value }
+});
+const appConfig = useAppConfig();
+const isOpen = ref(false);
+const columns = computed(() => {
+  if (!props.table) {
+    return [];
+  }
+  return props.table.getAllColumns().map((column) => {
+    const label = column.columnDef.meta?.headerLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : void 0);
+    return {
+      id: column.id,
+      label,
+      visible: column.getIsVisible(),
+      canHide: column.getCanHide(),
+      onUpdateChecked: (checked) => toggleColumnVisibility(column.id, checked)
+    };
+  });
+});
+const sortedItems = computed(() => {
+  const sortOrder = Object.fromEntries(order.value.map((id, index) => [id, index]));
+  return columns.value.toSorted((a, b) => sortOrder[a.id] - sortOrder[b.id]);
+});
+const hiddenColumnsCount = computed(() => {
+  return columns.value.filter((column) => !column.visible).length;
+});
+function toggleColumnVisibility(columnId, visible) {
+  visibility.value = { ...visibility.value, [columnId]: !!visible };
+}
+const containerRef = useTemplateRef("container");
+const { start: startSortable, stop: stopSortable } = useSortable(containerRef, order, {
+  handle: ".handle",
+  animation: 150,
+  onUpdate: (e) => {
+    const newColumnOrder = order.value.length !== sortedItems.value.length ? sortedItems.value.map((column) => column.id) : [...order.value];
+    newColumnOrder.splice(
+      e.newIndex,
+      0,
+      newColumnOrder.splice(e.oldIndex, 1)[0]
+    );
+    order.value = newColumnOrder;
+  }
+});
+watch(containerRef, (value) => value ? startSortable() : stopSortable());
+</script>