@hywax/cms-console 1.0.0

package/dist/runtime/components/TableColumnVisibility.vue

@@ -0,0 +1,110 @@
+<template>
+  <UPopover v-model:open="isOpen">
+    <UChip
+      :ui="{ base: 'z-1 size-3' }"
+      :show="hiddenColumnsCount > 0"
+      :text="hiddenColumnsCount"
+      size="xl"
+    >
+      <UButton
+        variant="subtle"
+        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 { getCmsStorageKey, useAppConfig, useRoute } from "#imports";
+import { syncRef, useLocalStorage } from "@vueuse/core";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { computed, ref, useTemplateRef, watch } from "vue";
+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>

package/dist/runtime/components/TableColumnVisibility.vue.d.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/TableFilters.d.vue.ts

@@ -0,0 +1,90 @@
+import type { KeysMatching } from '@hywax/cms-runtime';
+import type { FormData, FormFieldProps, FormProps, FormSchema, SelectItem, SelectProps, SelectValue } from '@nuxt/ui';
+import type { MaybeRef, VNode } from 'vue';
+import type { DatePickerProps } from './DatePicker.vue';
+type EnumSelectItem = SelectValue | Required<Pick<Extract<SelectItem, object>, 'value' | 'label'>>;
+interface Presets {
+    Input: {
+        modelValue: string | undefined;
+        placeholder?: string;
+    };
+    InputNumber: {
+        modelValue: number | undefined;
+        placeholder?: string;
+    };
+    Date: {
+        modelValue: DatePickerProps<false>['modelValue'];
+        withTime?: DatePickerProps<false>['withTime'];
+    };
+    DateRange: {
+        modelValue: DatePickerProps<true>['modelValue'];
+        withTime?: DatePickerProps<true>['withTime'];
+    };
+    Select: Pick<SelectProps<EnumSelectItem[]>, 'modelValue' | 'items' | 'placeholder'>;
+    MultiSelect: Pick<SelectProps<EnumSelectItem[], 'value', true>, 'modelValue' | 'items' | 'placeholder'>;
+    Checkbox: {
+        modelValue: boolean | undefined;
+    };
+    Switch: {
+        modelValue: boolean | undefined;
+    };
+}
+type GetPresetProps<K extends Presets[keyof Presets]> = {
+    [P in keyof Omit<K, 'modelValue'>]: MaybeRef<K[P]>;
+};
+type PresetField<S extends FormSchema = FormSchema> = {
+    [P in keyof Presets]: {
+        name: KeysMatching<FormData<S>, Presets[P]['modelValue']>;
+        render?: P;
+    } & GetPresetProps<Presets[P]>;
+}[keyof Presets];
+interface BaseField<S extends FormSchema = FormSchema> {
+    name: keyof FormData<S> & string;
+    render?: (state: FormData<S>, field: FiltersField<S>) => VNode;
+}
+export type FiltersField<S extends FormSchema = FormSchema> = Omit<FormFieldProps, 'name'> & (BaseField<S> | PresetField<S>);
+export type TableFiltersModel<S extends FormSchema> = FormData<S>;
+export interface TableFiltersProps<S extends FormSchema, F extends FiltersField<S>[] = FiltersField<S>[]> extends Omit<FormProps<S>, 'transform' | 'onSubmit' | 'id' | 'state' | 'nested' | 'name'> {
+    source: FormData<S>;
+    fields?: F;
+}
+export type TableFiltersSlots<S extends FormSchema> = {
+    [K in Extract<keyof FormData<S>, string>]: (props: {
+        model: FormData<S>[K];
+        state: FormData<S>;
+        updateModel: (value: FormData<S>[K]) => any;
+    }) => any;
+};
+export interface TableFiltersEmits<S extends FormSchema> {
+    submit: [TableFiltersModel<S>];
+    reset: [TableFiltersModel<S>];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, F extends FiltersField<S>[] = FiltersField<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<(TableFiltersProps<S, F> & {
+        modelValue?: TableFiltersModel<S>;
+    }) & {
+        onReset?: ((args_0: import("@nuxt/ui").InferOutput<S>) => any) | undefined;
+        onSubmit?: ((args_0: import("@nuxt/ui").InferOutput<S>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("@nuxt/ui").InferOutput<S> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        appliedFields: import("vue").ComputedRef<FiltersField<S>[]>;
+        clearField: (field: FiltersField<S>) => void;
+        reset: () => void;
+        submit: (data: TableFiltersModel<S>) => void;
+    }>) => void;
+    attrs: any;
+    slots: TableFiltersSlots<S>;
+    emit: (((evt: "reset", args_0: import("@nuxt/ui").InferOutput<S>) => void) & ((evt: "submit", args_0: import("@nuxt/ui").InferOutput<S>) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui").InferOutput<S> | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+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/TableFilters.vue

@@ -0,0 +1,199 @@
+<template>
+  <UPopover v-model:open="isOpen">
+    <UChip
+      :ui="{ base: 'z-1 size-3' }"
+      :show="appliedFields.length > 0"
+      :text="appliedFields.length"
+      size="xl"
+    >
+      <UButton
+        variant="subtle"
+        color="neutral"
+        label="Фильтры"
+        :icon="appConfig.ui.icons.filter"
+      />
+    </UChip>
+
+    <template #content>
+      <UForm
+        :id="formId"
+        ref="filters-form"
+        class="p-4 w-xs max-h-[60vh] overflow-y-auto"
+        :state="models"
+        :schema="schema"
+        @submit="submit($event.data)"
+      >
+        <UFormField
+          v-for="field of fields"
+          :key="field.name"
+          v-bind="field"
+        >
+          <slot
+            :name="field.name"
+            :model="models[field.name]"
+            :state="models"
+            :update-model="(value) => models[field.name] = value"
+          >
+            <component
+              :is="presets[field.render]?.(models, field)"
+              v-if="typeof field.render === 'string'"
+            />
+
+            <component
+              :is="field.render(models, field)"
+              v-else-if="field.render"
+            />
+          </slot>
+        </UFormField>
+      </UForm>
+
+      <USeparator class="mt-0" orientation="horizontal" />
+
+      <div class="flex justify-end space-x-2 p-4">
+        <UButton
+          color="neutral"
+          label="Сбросить"
+          variant="outline"
+          @click="reset"
+        />
+
+        <UButton
+          type="submit"
+          label="Подтвердить"
+          :color="formRef && formRef.errors.length > 0 ? 'error' : 'primary'"
+          :form="formId"
+        />
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script>
+import { UCheckbox, UForm, UInput, USelect, USwitch } from "#components";
+import { useAppConfig } from "#imports";
+import { useCloned } from "@vueuse/core";
+import copy from "fast-copy";
+import { deepEqual } from "fast-equals";
+import { computed, h, nextTick, ref, toValue, unref, useId, useTemplateRef, watch } from "vue";
+import CDatePicker from "./DatePicker.vue";
+const presets = {
+  Date: (state, field) => h(CDatePicker, {
+    "modelValue": state[field.name],
+    "withTime": toValue(field.withTime),
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }),
+  DateRange: (state, field) => h(CDatePicker, {
+    "modelValue": state[field.name],
+    "range": true,
+    "withTime": unref(field.withTime),
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }),
+  Input: (state, field) => h(UInput, {
+    "modelValue": state[field.name],
+    "modelModifiers": { trim: true, optional: true },
+    "placeholder": unref(field.placeholder) ?? `\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ${field.label?.toLowerCase() ?? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"}`,
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }, {}),
+  InputNumber: (state, field) => h(UInput, {
+    "modelValue": state[field.name],
+    "modelModifiers": { number: true, optional: true },
+    "placeholder": unref(field.placeholder) ?? `\u0412\u0432\u0435\u0434\u0438\u0442\u0435 ${field.label?.toLowerCase() ?? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"}`,
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }, {}),
+  Select: (state, field) => h(USelect, {
+    "modelValue": state[field.name],
+    "items": unref(field.items),
+    "placeholder": unref(field.placeholder) ?? `\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 ${field.label?.toLowerCase() ?? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"}`,
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }, {}),
+  MultiSelect: (state, field) => h(USelect, {
+    "modelValue": state[field.name],
+    "items": unref(field.items),
+    "placeholder": unref(field.placeholder) ?? `\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 ${field.label?.toLowerCase() ?? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"}`,
+    "multiple": true,
+    "onUpdate:modelValue": (value) => state[field.name] = value
+  }, {}),
+  Checkbox: (state, field) => h(UCheckbox, {
+    "modelValue": state[field.name],
+    "label": unref(field.label),
+    "onUpdate:modelValue": (value) => state[field.name] = Boolean(value) || void 0
+  }),
+  Switch: (state, field) => h(USwitch, {
+    "modelValue": state[field.name],
+    "label": unref(field.label),
+    "onUpdate:modelValue": (value) => state[field.name] = value || void 0
+  })
+};
+</script>
+
+<script setup>
+const props = defineProps({
+  source: { type: null, required: true },
+  fields: { type: null, required: false },
+  schema: { type: null, required: false },
+  validate: { type: Function, required: false },
+  validateOn: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emit = defineEmits(["submit", "reset"]);
+defineSlots();
+const appConfig = useAppConfig();
+const filters = defineModel({ type: null });
+const formId = `form-${useId()}`;
+const formRef = useTemplateRef("filters-form");
+const { cloned: models, sync: resetModels } = useCloned(() => props.source, {
+  clone: copy
+});
+const appliedFields = computed(() => {
+  return props.fields?.filter((field) => {
+    let value = filters.value?.[field.name];
+    let sourceValue = props.source?.[field.name];
+    if (value === "" || value === null || value === void 0 || Array.isArray(value) && value.length === 0) {
+      value = null;
+    }
+    if (sourceValue === "" || sourceValue === null || sourceValue === void 0 || Array.isArray(sourceValue) && sourceValue.length === 0) {
+      sourceValue = null;
+    }
+    return value !== sourceValue && !deepEqual(value, sourceValue);
+  }) ?? [];
+});
+let _isInternalUpdate = false;
+watch(filters, (value) => {
+  if (!value) {
+    return;
+  }
+  if (_isInternalUpdate) {
+    return;
+  }
+  models.value = copy(value);
+}, { immediate: true, deep: true });
+const isOpen = ref(false);
+function submit(data) {
+  filters.value = copy(data);
+  emit("submit", filters.value);
+  isOpen.value = false;
+  _isInternalUpdate = true;
+  nextTick(() => _isInternalUpdate = false);
+}
+function reset() {
+  resetModels();
+  filters.value = copy(models.value);
+  emit("reset", filters.value);
+  isOpen.value = false;
+  _isInternalUpdate = true;
+  nextTick(() => _isInternalUpdate = false);
+}
+function clearField(field) {
+  models.value = copy({ ...models.value, [field.name]: props.source[field.name] });
+  submit(models.value);
+}
+defineExpose({
+  appliedFields,
+  clearField,
+  reset,
+  submit
+});
+</script>

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

@@ -0,0 +1,90 @@
+import type { KeysMatching } from '@hywax/cms-runtime';
+import type { FormData, FormFieldProps, FormProps, FormSchema, SelectItem, SelectProps, SelectValue } from '@nuxt/ui';
+import type { MaybeRef, VNode } from 'vue';
+import type { DatePickerProps } from './DatePicker.vue';
+type EnumSelectItem = SelectValue | Required<Pick<Extract<SelectItem, object>, 'value' | 'label'>>;
+interface Presets {
+    Input: {
+        modelValue: string | undefined;
+        placeholder?: string;
+    };
+    InputNumber: {
+        modelValue: number | undefined;
+        placeholder?: string;
+    };
+    Date: {
+        modelValue: DatePickerProps<false>['modelValue'];
+        withTime?: DatePickerProps<false>['withTime'];
+    };
+    DateRange: {
+        modelValue: DatePickerProps<true>['modelValue'];
+        withTime?: DatePickerProps<true>['withTime'];
+    };
+    Select: Pick<SelectProps<EnumSelectItem[]>, 'modelValue' | 'items' | 'placeholder'>;
+    MultiSelect: Pick<SelectProps<EnumSelectItem[], 'value', true>, 'modelValue' | 'items' | 'placeholder'>;
+    Checkbox: {
+        modelValue: boolean | undefined;
+    };
+    Switch: {
+        modelValue: boolean | undefined;
+    };
+}
+type GetPresetProps<K extends Presets[keyof Presets]> = {
+    [P in keyof Omit<K, 'modelValue'>]: MaybeRef<K[P]>;
+};
+type PresetField<S extends FormSchema = FormSchema> = {
+    [P in keyof Presets]: {
+        name: KeysMatching<FormData<S>, Presets[P]['modelValue']>;
+        render?: P;
+    } & GetPresetProps<Presets[P]>;
+}[keyof Presets];
+interface BaseField<S extends FormSchema = FormSchema> {
+    name: keyof FormData<S> & string;
+    render?: (state: FormData<S>, field: FiltersField<S>) => VNode;
+}
+export type FiltersField<S extends FormSchema = FormSchema> = Omit<FormFieldProps, 'name'> & (BaseField<S> | PresetField<S>);
+export type TableFiltersModel<S extends FormSchema> = FormData<S>;
+export interface TableFiltersProps<S extends FormSchema, F extends FiltersField<S>[] = FiltersField<S>[]> extends Omit<FormProps<S>, 'transform' | 'onSubmit' | 'id' | 'state' | 'nested' | 'name'> {
+    source: FormData<S>;
+    fields?: F;
+}
+export type TableFiltersSlots<S extends FormSchema> = {
+    [K in Extract<keyof FormData<S>, string>]: (props: {
+        model: FormData<S>[K];
+        state: FormData<S>;
+        updateModel: (value: FormData<S>[K]) => any;
+    }) => any;
+};
+export interface TableFiltersEmits<S extends FormSchema> {
+    submit: [TableFiltersModel<S>];
+    reset: [TableFiltersModel<S>];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, F extends FiltersField<S>[] = FiltersField<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<(TableFiltersProps<S, F> & {
+        modelValue?: TableFiltersModel<S>;
+    }) & {
+        onReset?: ((args_0: import("@nuxt/ui").InferOutput<S>) => any) | undefined;
+        onSubmit?: ((args_0: import("@nuxt/ui").InferOutput<S>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("@nuxt/ui").InferOutput<S> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        appliedFields: import("vue").ComputedRef<FiltersField<S>[]>;
+        clearField: (field: FiltersField<S>) => void;
+        reset: () => void;
+        submit: (data: TableFiltersModel<S>) => void;
+    }>) => void;
+    attrs: any;
+    slots: TableFiltersSlots<S>;
+    emit: (((evt: "reset", args_0: import("@nuxt/ui").InferOutput<S>) => void) & ((evt: "submit", args_0: import("@nuxt/ui").InferOutput<S>) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui").InferOutput<S> | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+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/TablePanel.d.vue.ts

@@ -0,0 +1,95 @@
+import type { AsyncDataRequestStatus } from '#app';
+import type { ComponentConfig, OptionalKeys } from '@hywax/cms-runtime';
+import type { AppConfig } from '@nuxt/schema';
+import type { DropdownMenuItem, FormSchema, PaginationEmits, PaginationProps, TableData, TableProps, TableRow, TableSlots } from '@nuxt/ui';
+import type { ColumnPinningState, GroupingState, RowSelectionState } from '@tanstack/vue-table';
+import type { ModalConfirmProps } from './ModalConfirm.vue';
+import type { TableColumnSortingModel } from './TableColumnSorting.vue';
+import type { TableColumnVisibilityProps } from './TableColumnVisibility.vue';
+import type { TableFiltersEmits, TableFiltersModel, TableFiltersProps, TableFiltersSlots } from './TableFilters.vue';
+import theme from '#build/cms-console/table-panel';
+type TablePanel = ComponentConfig<typeof theme, AppConfig, 'tablePanel'>;
+export interface ActionMenuItem extends DropdownMenuItem {
+    confirm?: ModalConfirmProps;
+    delete?: OptionalKeys<ModalConfirmProps, 'message'>;
+    visibility?: () => boolean;
+}
+export interface TablePanelProps<Data extends TableData, Schema extends FormSchema> {
+    title?: string;
+    status?: AsyncDataRequestStatus;
+    page?: PaginationProps['page'];
+    itemsPerPage?: PaginationProps['itemsPerPage'];
+    total?: PaginationProps['total'];
+    storageKey?: TableColumnVisibilityProps['storageKey'];
+    /** @default true */
+    columnVisibility?: boolean;
+    defaultHiddenColumns?: string[];
+    sorting?: TableColumnSortingModel;
+    columns?: TableProps<Data>['columns'];
+    data?: TableProps<Data>['data'];
+    /** @default true */
+    sticky?: TableProps<Data>['sticky'];
+    columnPinning?: ColumnPinningState;
+    getRowId?: TableProps<Data>['getRowId'];
+    rowSelection?: RowSelectionState;
+    rowSelectionOptions?: TableProps<Data>['rowSelectionOptions'];
+    /** @default true */
+    resetRowSelection?: boolean;
+    grouping?: GroupingState;
+    /** @default { getGroupedRowModel: getGroupedRowModel(), groupedColumnMode: false } */
+    groupingOptions?: TableProps<Data>['groupingOptions'];
+    hideSelectedFilters?: true;
+    filters?: TableFiltersModel<Schema>;
+    filtersSchema?: Schema;
+    filtersSource?: TableFiltersProps<Schema>['source'];
+    filtersFields?: TableFiltersProps<Schema>['fields'];
+    empty?: TableProps<Data>['empty'];
+    actions?: ((row: TableRow<Data>) => ActionMenuItem[] | undefined);
+    onSelect?: TableProps<Data>['onSelect'];
+    class?: any;
+    ui?: TablePanel['slots'];
+}
+export interface TablePanelEmits<Schema extends FormSchema> {
+    'update:page': PaginationEmits['update:page'];
+    'update:items-per-page': [value: number];
+    'update:sorting': [value: TableColumnSortingModel];
+    'update:row-selection': [value?: RowSelectionState];
+    'update:filters': [value: TableFiltersModel<Schema>];
+    'update:grouping': [value?: GroupingState];
+    'filtersReset': TableFiltersEmits<Schema>['reset'];
+    'filtersSubmit': TableFiltersEmits<Schema>['submit'];
+}
+export type TablePanelSlots<Data extends TableData, Schema extends FormSchema> = TableSlots<Data> & {
+    'toolbar-left'?: () => any;
+    'navbar-right'?: () => any;
+    'toolbar-right'?: () => any;
+} & {
+    [P in keyof TableFiltersSlots<Schema> as `filter-${P}`]: TableFiltersSlots<Schema>[P];
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <Data extends TableData, Schema extends FormSchema>(__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<TablePanelProps<Data, Schema> & {
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:items-per-page"?: ((value: number) => any) | undefined;
+        "onUpdate:sorting"?: ((value: import("@tanstack/table-core").SortingState) => any) | undefined;
+        "onUpdate:row-selection"?: ((value?: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:filters"?: ((value: import("@nuxt/ui").InferOutput<Schema>) => any) | undefined;
+        "onUpdate:grouping"?: ((value?: GroupingState | undefined) => any) | undefined;
+        onFiltersReset?: ((args_0: import("@nuxt/ui").InferOutput<Schema>) => any) | undefined;
+        onFiltersSubmit?: ((args_0: import("@nuxt/ui").InferOutput<Schema>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TablePanelSlots<Data, Schema>;
+    emit: ((evt: "update:page", value: number) => void) & ((evt: "update:items-per-page", value: number) => void) & ((evt: "update:sorting", value: import("@tanstack/table-core").SortingState) => void) & ((evt: "update:row-selection", value?: RowSelectionState | undefined) => void) & ((evt: "update:filters", value: import("@nuxt/ui").InferOutput<Schema>) => void) & ((evt: "update:grouping", value?: GroupingState | undefined) => void) & ((evt: "filtersReset", args_0: import("@nuxt/ui").InferOutput<Schema>) => void) & ((evt: "filtersSubmit", args_0: import("@nuxt/ui").InferOutput<Schema>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};