@hywax/cms-console 1.0.0

package/dist/runtime/components/InputUploraImage.vue

@@ -0,0 +1,163 @@
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <template v-if="modelValue.image">
+      <UPopover
+        :content="{ align: 'center', side: 'top', sideOffset: 8 }"
+        :ui="{ content: 'p-1' }"
+      >
+        <CUploraImage
+          :image="modelValue.image"
+          :alt="modelValue.alt"
+          :lqip="modelValue.lqip"
+          :class="ui.image({ class: [props.ui?.image] })"
+        />
+
+        <div v-if="!modelValue.alt" :class="ui.imageActionsWarning({ class: [props.ui?.imageActionsWarning] })">
+          <UIcon :name="appConfig.ui.icons.warning" class="size-4" />
+        </div>
+
+        <template #content>
+          <div class="flex items-center gap-0.5">
+            <UPopover :ui="{ content: 'p-1' }" @update:open="syncState">
+              <UButton
+                color="neutral"
+                size="sm"
+                variant="ghost"
+                :icon="appConfig.ui.icons.editLine"
+              />
+              <template #content>
+                <UTextarea
+                  v-model="state.alt"
+                  placeholder="Введите описание..."
+                  autoresize
+                  variant="none"
+                  size="xs"
+                />
+              </template>
+            </UPopover>
+
+            <ButtonDeleteConfirm
+              color="error"
+              size="sm"
+              variant="ghost"
+              label=""
+              :icon="appConfig.ui.icons.trash"
+              @confirm="deleteExecute(modelValue.image)"
+            />
+          </div>
+        </template>
+      </UPopover>
+    </template>
+    <div v-else :id="id" :class="ui.uploader({ class: [props.ui?.uploader] })">
+      <template v-if="uploadStatus === 'pending'">
+        <UIcon :name="appConfig.ui.icons.loading" :class="ui.uploaderPendingIcon({ class: [props.ui?.uploaderPendingIcon] })" />
+      </template>
+      <template v-else-if="uploadStatus === 'idle'">
+        <button
+          type="button"
+          :class="ui.uploaderIdleButton({ class: [props.ui?.uploaderIdleButton] })"
+          :disabled="disabled"
+          v-bind="ariaAttrs"
+          @click="open"
+        >
+          <UAvatar :icon="appConfig.ui.icons.image" size="lg" />
+
+          <p :class="ui.uploaderIdleText({ class: [props.ui?.uploaderIdleText] })">
+            Загрузить изображение
+          </p>
+          <p :class="ui.uploaderIdleExtensions({ class: [props.ui?.uploaderIdleExtensions] })">
+            {{ extensions }}
+          </p>
+        </button>
+      </template>
+      <template v-else-if="uploadStatus === 'error'">
+        <p :class="ui.uploaderErrorText({ class: [props.ui?.uploaderErrorText] })">
+          Произошла ошибка при загрузке изображения
+        </p>
+        <div :class="ui.uploaderErrorActions({ class: [props.ui?.uploaderErrorActions] })">
+          <UButton
+            label="Отменить"
+            variant="ghost"
+            color="neutral"
+            @click="resetUpload"
+          />
+          <UButton
+            label="Повторить"
+            variant="soft"
+            color="neutral"
+            @click="uploadExecute"
+          />
+        </div>
+      </template>
+    </div>
+  </Primitive>
+</template>
+
+<script>
+import theme from "#build/cms-console/input-uplora-image";
+import { computed, reactive, useAppConfig, useFormField, useId, useUploraDelete, useUploraUpload } from "#imports";
+import { imagesExtensions } from "@uplora/formats";
+import { Primitive } from "reka-ui";
+import { tv } from "../tv";
+import ButtonDeleteConfirm from "./ButtonDeleteConfirm.vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  showExtensions: { type: Boolean, required: false, default: true },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["upload", "delete"]);
+const modelValue = defineModel({ type: Object, ...{
+  default: () => ({
+    image: "",
+    alt: ""
+  })
+} });
+const appConfig = useAppConfig();
+const extensions = computed(() => imagesExtensions.filter((extension) => extension !== "jpeg").join(", "));
+const state = reactive({
+  alt: modelValue.value.alt
+});
+const { id: _id, disabled, emitFormChange, emitFormInput, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
+const { open, execute: uploadExecute, status: uploadStatus, reset: resetUpload, onUploaded } = useUploraUpload({
+  accept: "image/*"
+});
+const { execute: deleteExecute, onDeleted } = useUploraDelete();
+onUploaded((file) => {
+  modelValue.value = {
+    ...modelValue.value,
+    image: file.id,
+    lqip: file.lqip
+  };
+  emit("upload", modelValue.value);
+  emitFormChange();
+  emitFormInput();
+});
+onDeleted(() => {
+  resetUpload();
+  modelValue.value = {
+    image: "",
+    alt: ""
+  };
+  emit("delete");
+  emitFormChange();
+  emitFormInput();
+});
+function syncState() {
+  modelValue.value = {
+    ...modelValue.value,
+    alt: state.alt
+  };
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputUploraImage || {} })({
+  disabled: disabled.value,
+  uploaded: modelValue.value.image !== ""
+}));
+</script>

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

@@ -0,0 +1,39 @@
+import type { ComponentConfig } from '@hywax/cms-runtime';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/cms-console/input-uplora-image';
+type InputUploraImage = ComponentConfig<typeof theme, AppConfig, 'inputUploraImage'>;
+export interface InputUploraImageProps {
+    showExtensions?: boolean;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    as?: any;
+    class?: any;
+    ui?: InputUploraImage['slots'];
+}
+export interface InputUploraImageEmits {
+    upload: [InputUploraImageModelValue];
+    delete: [];
+}
+export interface InputUploraImageModelValue {
+    image: string;
+    alt: string;
+    lqip?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<InputUploraImageProps & {
+    modelValue?: InputUploraImageModelValue;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    "update:modelValue": (value: InputUploraImageModelValue) => any;
+    upload: (args_0: InputUploraImageModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<InputUploraImageProps & {
+    modelValue?: InputUploraImageModelValue;
+}> & Readonly<{
+    onDelete?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: InputUploraImageModelValue) => any) | undefined;
+    onUpload?: ((args_0: InputUploraImageModelValue) => any) | undefined;
+}>, {
+    showExtensions: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,30 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+interface LayoutProps {
+    navigation: NavigationMenuItem[];
+    links?: NavigationMenuItem[];
+    version?: string;
+    logotype?: string;
+    logotypeIcon?: string;
+    logotypeShortIcon?: string;
+    homeLink?: RouteLocationRaw;
+}
+interface DashboardLayoutSlots {
+    default: () => any;
+    logotype: (props: {
+        collapsed: boolean | undefined;
+    }) => 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,82 @@
+<template>
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      v-model:open="isSidebarOpen"
+      v-model:collapsed="isSidebarCollapsed"
+      :ui="{ root: 'bg-elevated/25', footer: 'lg:border-t lg:border-default' }"
+      collapsible
+    >
+      <template #header="{ collapsed }">
+        <slot name="logotype" :collapsed="collapsed">
+          <NuxtLink :to="homeLink" class="flex items-center gap-2.5" :class="collapsed && 'mx-auto'">
+            <UIcon v-if="logotypeIcon && logotypeShortIcon" :name="collapsed ? logotypeShortIcon : logotypeIcon" />
+
+            <template v-if="version">
+              <UBadge
+                v-show="!collapsed"
+                color="primary"
+                variant="soft"
+                size="sm"
+                :label="version"
+              />
+            </template>
+          </NuxtLink>
+        </slot>
+      </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 w-full">
+          <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";
+const props = defineProps({
+  navigation: { type: Array, required: true },
+  links: { type: Array, required: false },
+  version: { type: String, required: false },
+  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(() => [
+  ...props.links || [],
+  {
+    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,30 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+import type { RouteLocationRaw } from 'vue-router';
+interface LayoutProps {
+    navigation: NavigationMenuItem[];
+    links?: NavigationMenuItem[];
+    version?: string;
+    logotype?: string;
+    logotypeIcon?: string;
+    logotypeShortIcon?: string;
+    homeLink?: RouteLocationRaw;
+}
+interface DashboardLayoutSlots {
+    default: () => any;
+    logotype: (props: {
+        collapsed: boolean | undefined;
+    }) => 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 { ComponentConfig } from '@hywax/cms-runtime';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import theme from '#build/cms-console/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

@@ -0,0 +1,97 @@
+<template>
+  <UModal
+    :title="title"
+    :ui="{
+  content: 'divide-y-0',
+  body: 'py-0! text-sm',
+  description: 'hidden',
+  footer: 'justify-end'
+}"
+    :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-console/modal-confirm";
+import { computed, reactive, useAppConfig, useTemplateRef } from "#imports";
+import { tv } from "../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,33 @@
+import type { ComponentConfig } from '@hywax/cms-runtime';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import theme from '#build/cms-console/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/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/TableColumnSorting.vue

@@ -0,0 +1,81 @@
+<template>
+  <UPopover v-if="sortingColumns.length > 0" v-model:open="isOpen">
+    <UChip :ui="{ base: 'z-1 size-3' }" :show="model.length > 0" size="xl">
+      <UButton
+        variant="subtle"
+        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 ?? noSortColumn.value"
+          :items="sortingColumns"
+          @update:model-value="updateModel({ id: $event, desc: model[0]?.desc ?? false })"
+        />
+
+        <USeparator />
+
+        <div class="flex gap-2">
+          <UButton
+            v-for="item in sortOrder"
+            :key="item.icon"
+            :icon="item.icon"
+            :label="item.label"
+            :disabled="!model[0]"
+            :variant="item.desc === (model[0]?.desc ?? false) ? 'soft' : 'ghost'"
+            size="sm"
+            color="neutral"
+            class="flex-1"
+            @click="updateModel({ id: model[0]?.id ?? '', desc: item.desc })"
+          />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup>
+import { useAppConfig } from "#imports";
+import { computed, ref } from "vue";
+const props = defineProps({
+  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 [];
+  }
+  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 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;