@hywax/cms 0.0.23 → 1.1.0

package/dist/runtime/components/TablePanel.vue

@@ -16,33 +16,47 @@
         <template #right>
           <slot name="toolbar-right" />
 
-          <TablePanelColumnSorting
-            :model-value="sorting"
+          <TableColumnVisibility
+            v-model:visibility="columnVisibility"
+            v-model:order="columnOrder"
             :table="tableRef?.tableApi"
-            @update:model-value="emit('update:sorting', $event)"
+            :storage-key="storageKey"
           />
-          <TablePanelColumnVisibility
-            v-if="props.columnVisibility"
-            v-model="columnVisibility"
+          <TableColumnSorting
+            :model-value="sorting"
             :table="tableRef?.tableApi"
+            @update:model-value="emit('update:sorting', $event)"
           />
+          <TableFilters
+            v-if="props.filtersSource"
+            :model-value="props.filters"
+            :schema="props.filtersSchema"
+            :source="props.filtersSource"
+            :fields="props.filtersFields"
+            @update:model-value="emit('update:filters', $event)"
+            @reset="emit('filtersReset', $event)"
+            @submit="emit('filtersSubmit', $event)"
+          >
+            <template
+              v-for="(filterSlot, pageTableSlot) in getFiltersSlots(slots)"
+              #[filterSlot]="slotData"
+            >
+              <slot :name="pageTableSlot" v-bind="slotData" />
+            </template>
+          </TableFilters>
         </template>
       </UDashboardToolbar>
     </template>
     <template #body>
-      <div v-show="loading" :class="ui.loader({ class: props.ui?.loader })">
+      <div v-show="status === 'pending'" :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"
+        v-model:column-order="columnOrder"
         :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',
@@ -50,8 +64,25 @@
   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'
 }"
+        :loading="status === 'pending'"
+        :row-selection="rowSelection"
+        :row-selection-options="rowSelectionOptions"
+        :column-pinning="columnPinningWrap"
+        :columns="tableColumns"
+        :data="data"
+        :sorting-options="{ manualSorting: hasPagination }"
+        :sorting="sorting"
+        :sticky="sticky"
+        :get-row-id="getRowId"
+        :grouping="grouping"
+        :grouping-options="groupingOptions"
+        :column-filters="columnFilters"
+        :empty="empty"
+        @select="onSelect"
+        @update:row-selection="emit('update:row-selection', $event)"
+        @update:grouping="emit('update:grouping', $event)"
       >
-        <template v-for="(_, name) in tableProxySlots" #[name]="slotData">
+        <template v-for="(_, name) in slots" #[name]="slotData">
           <slot :name="name" v-bind="slotData" />
         </template>
       </UTable>
@@ -65,20 +96,28 @@
           </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))"
-          />
+            :model-value="itemsPerPage"
+            :items="itemsPerPageItems"
+            :ui="{ base: 'text-muted' }"
+            variant="soft"
+            @update:model-value="emit('update:items-per-page', $event)"
+          >
+            <template #default="{ modelValue }">
+              {{ modelValue }} / на страницу
+            </template>
+
+            <template #item="{ item }">
+              {{ item }}
+            </template>
+          </USelect>
+
           <UPagination
             v-bind="paginationProps"
-            :sibling-count="1"
-            variant="ghost"
-            show-edges
+            :ui="isTotalUnknown ? { first: 'hidden', last: 'hidden' } : void 0"
+            variant="soft"
+            :sibling-count="isTotalUnknown ? 3 : 1"
+            :show-edges="!isTotalUnknown"
             @update:page="emit('update:page', $event)"
           />
         </div>
@@ -89,67 +128,169 @@
 
 <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 { LazyCModalConfirm, LazyUDropdownMenu, UButton, UCheckbox, UTable } from "#components";
+import { useAppConfig } from "#imports";
+import { useOverlay } from "@nuxt/ui/composables/useOverlay";
+import { getGroupedRowModel } from "@tanstack/vue-table";
+import { reactivePick } from "@vueuse/core";
+import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
+import { computed, h, ref, useTemplateRef, watch } from "vue";
 import { tv } from "../tv";
-import TablePanelColumnSorting from "./TablePanelColumnSorting.vue";
-import TablePanelColumnVisibility from "./TablePanelColumnVisibility.vue";
+import TableColumnSorting from "./TableColumnSorting.vue";
+import TableColumnVisibility from "./TableColumnVisibility.vue";
+import TableFilters from "./TableFilters.vue";
 </script>
 
 <script setup>
 const props = defineProps({
   title: { type: String, required: false },
+  status: { 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 },
+  storageKey: { type: String, required: false },
   columnVisibility: { type: Boolean, required: false, default: true },
-  defaultHiddenColumns: { type: Array, required: false, default: () => [] },
+  defaultHiddenColumns: { type: Array, required: false },
   sorting: { type: Array, required: false },
-  loading: { type: Boolean, required: false },
+  columns: { type: Array, required: false },
+  data: { type: Array, required: false },
+  sticky: { type: [Boolean, String], required: false, default: true },
+  columnPinning: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  rowSelection: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  resetRowSelection: { type: Boolean, required: false, default: true },
+  grouping: { type: Array, required: false },
+  groupingOptions: { type: Object, required: false, default: () => ({ getGroupedRowModel: getGroupedRowModel(), groupedColumnMode: false }) },
+  hideSelectedFilters: { type: Boolean, required: false },
+  filters: { type: null, required: false },
+  filtersSchema: { type: null, required: false },
+  filtersSource: { type: null, required: false },
+  filtersFields: { type: null, required: false },
+  empty: { type: String, required: false },
   actions: { type: Function, required: false },
+  onSelect: { type: Function, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
-const emit = defineEmits(["update:sorting", "update:page", "update:itemsPerPage"]);
+const emit = defineEmits(["update:page", "update:items-per-page", "update:sorting", "update:row-selection", "update:filters", "update:grouping", "filtersReset", "filtersSubmit"]);
 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: appConfig.ui.icons.ellipsisVertical,
-          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 paginationProps = useForwardProps(
+  reactivePick(props, "page", "itemsPerPage", "total")
+);
 const tableRef = useTemplateRef("table");
-const initialVisibilityState = Object.fromEntries(props.defaultHiddenColumns.map((column) => [column, false]));
-const columnVisibility = ref(initialVisibilityState);
+watch(() => props.resetRowSelection && props.data, (value) => {
+  value && tableRef.value?.tableApi.resetRowSelection();
+});
+watch(() => props.data, () => {
+  tableRef.value?.tableRef?.parentElement?.scrollTo({ top: 0 });
+});
+const modalConfirm = useOverlay().create(LazyCModalConfirm);
+function createActionCell(action) {
+  if (action.visibility && !action.visibility()) {
+    return;
+  }
+  if (action.confirm) {
+    return {
+      ...action,
+      onClick: () => modalConfirm.open(action.confirm)
+    };
+  }
+  if (action.delete) {
+    return {
+      ...action,
+      color: "error",
+      onClick: () => modalConfirm.open(defu(action.delete, {
+        title: "\u0423\u0434\u0430\u043B\u0435\u043D\u0438\u0435",
+        message: "\u0412\u044B \u0434\u0435\u0438\u0306\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0445\u043E\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442?",
+        confirmButton: { color: "error", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" }
+      }))
+    };
+  }
+  return action;
+}
+const tableColumns = computed(() => {
+  const columns = props.columns ? [...props.columns] : Object.keys(props.data?.[0] ?? {}).map((accessorKey) => ({ accessorKey, header: accessorKey }));
+  if (props.actions) {
+    columns.push({
+      id: "actions",
+      enableHiding: false,
+      meta: {
+        class: {
+          th: "w-20",
+          td: "text-right"
+        }
+      },
+      cell: ({ row }) => {
+        const items = props.actions?.(row)?.map(createActionCell).filter((item) => item);
+        if (!items?.length) {
+          return;
+        }
+        return h(
+          LazyUDropdownMenu,
+          {
+            items,
+            content: { align: "end" }
+          },
+          () => h(UButton, {
+            icon: appConfig.ui.icons.ellipsisVertical,
+            color: "neutral",
+            variant: "ghost"
+          })
+        );
+      }
+    });
+  }
+  if (props.rowSelection) {
+    columns.unshift({
+      id: "select",
+      header: ({ table }) => h(UCheckbox, {
+        "modelValue": table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+        "onUpdate:modelValue": (value) => table.toggleAllPageRowsSelected(!!value)
+      }),
+      cell: ({ row }) => h(UCheckbox, {
+        "modelValue": row.getIsSelected(),
+        "disabled": !row.getCanSelect(),
+        "onUpdate:modelValue": (value) => row.toggleSelected(!!value)
+      }),
+      enableHiding: false
+    });
+  }
+  return columns;
+});
+const columnVisibility = ref();
+watch(() => props.defaultHiddenColumns, (value) => {
+  columnVisibility.value = Object.fromEntries(
+    value?.map((column) => [column, false]) ?? []
+  );
+}, { immediate: true });
+const columnOrder = ref([]);
 const hasPagination = computed(() => props.page !== void 0);
-const itemsPerPageList = [10, 20, 50, 100];
+const itemsPerPageItems = [20, 50, 100, 200];
+const isTotalUnknown = computed(() => (props.total ?? 0) >= 1e6);
+const columnPinningWrap = computed(() => {
+  return defu(props.columnPinning, { right: props.actions ? ["actions"] : [] });
+});
+const columnFilters = computed(() => {
+  if (hasPagination.value || !props.filters) {
+    return;
+  }
+  return Object.entries(props.filters).flatMap(([id, value]) => {
+    if (value === void 0) {
+      return [];
+    }
+    return [{ id, value }];
+  });
+});
+function getFiltersSlots(slots2) {
+  return Object.keys(slots2).reduce((acc, key) => {
+    if (key.startsWith("filter-")) {
+      acc[key] = key.replace("filter-", "");
+    }
+    return acc;
+  }, {});
+}
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tablePanel || {} })());
 </script>

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

@@ -1,50 +1,95 @@
+import type { AsyncDataRequestStatus } from '#app';
 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 type { DropdownMenuItem, FormSchema, PaginationEmits, PaginationProps, TableData, TableProps, TableRow, TableSlots } from '@nuxt/ui';
+import type { ColumnPinningState, GroupingState, RowSelectionState } from '@tanstack/vue-table';
+import type { ComponentConfig, OptionalKeys } from '../types';
+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/table-panel';
 type TablePanel = ComponentConfig<typeof theme, AppConfig, 'tablePanel'>;
-export interface TablePanelProps<T> {
+export interface ActionMenuItem extends DropdownMenuItem {
+    confirm?: ModalConfirmProps;
+    delete?: OptionalKeys<ModalConfirmProps, 'message'>;
+    visibility?: () => boolean;
+}
+export interface TablePanelProps<Data extends TableData, Schema extends FormSchema> {
     title?: string;
-    page?: number;
-    itemsPerPage?: number;
-    total?: number;
-    data?: T[];
-    columns?: TableProps<T>['columns'];
-    sticky?: boolean;
-    columnPinning?: ColumnPinningState;
+    status?: AsyncDataRequestStatus;
+    page?: PaginationProps['page'];
+    itemsPerPage?: PaginationProps['itemsPerPage'];
+    total?: PaginationProps['total'];
+    storageKey?: TableColumnVisibilityProps['storageKey'];
+    /** @default true */
     columnVisibility?: boolean;
     defaultHiddenColumns?: string[];
-    sorting?: SortingState;
-    loading?: boolean;
-    actions?: (row: T) => DropdownMenuItem[];
+    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 {
-    'update:sorting': [value: SortingState];
-    'update:page': [value: number];
-    'update:itemsPerPage': [value: number];
+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<T> = Omit<TableSlots<T>, 'toolbar-left' | 'toolbar-right' | 'navbar-right'> & {
+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: <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;
+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<T>;
-    emit: ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:itemsPerPage", value: number) => void);
+    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>;
 };
-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/TableSearchInput.d.vue.ts

@@ -0,0 +1,33 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { InputEmits, InputProps, InputValue } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/table-search-input';
+type TableSearchInput = ComponentConfig<typeof theme, AppConfig, 'tableSearchInput'>;
+export interface TableSearchInputProps<T extends InputValue> extends Omit<InputProps<T>, 'ui'> {
+    class?: any;
+    ui?: TableSearchInput['slots'];
+}
+export interface TableSearchInputEmits<T extends InputValue> extends InputEmits<T> {
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputValue>(__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<TableSearchInputProps<T> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => 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/TableSearchInput.vue

@@ -0,0 +1,96 @@
+<template>
+  <UInput
+    :class="ui.input({ class: props.ui?.input })"
+    :leading-icon="appConfig.ui.icons.search"
+    v-bind="{
+  ...forward,
+  'modelValue': inputValue,
+  'modelModifiers': { trim: true, ...forward.modelModifiers },
+  'onUpdate:modelValue': updateInputValue
+}"
+  >
+    <template #trailing>
+      <UButton
+        v-if="inputValue"
+        :icon="appConfig.ui.icons.close"
+        variant="link"
+        size="sm"
+        color="neutral"
+        @click="clearInput"
+      />
+    </template>
+  </UInput>
+</template>
+
+<script>
+import theme from "#build/cms/table-search-input";
+import { computed, useAppConfig } from "#imports";
+import { reactiveOmit, watchDebounced } from "@vueuse/core";
+import { useForwardPropsEmits } from "reka-ui";
+import { ref, watch } from "vue";
+import { tv } from "../tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  type: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  autocomplete: { type: null, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
+  icon: { type: null, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: null, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const appConfig = useAppConfig();
+const forward = useForwardPropsEmits(reactiveOmit(props, "modelValue"), emit);
+const inputValue = ref();
+function updateInputValue(value) {
+  inputValue.value = value;
+}
+watch(() => props.modelValue, (value) => {
+  if (value !== inputValue.value) {
+    updateInputValue(value);
+  }
+}, { immediate: true });
+watchDebounced(inputValue, () => search(), { debounce: 500 });
+function search() {
+  if (props.modelValue !== inputValue.value) {
+    emit("update:modelValue", inputValue.value);
+  }
+}
+const defaultValue = computed(() => {
+  if (props.modelModifiers?.nullable) {
+    return null;
+  }
+  if (props.modelModifiers?.optional) {
+    return void 0;
+  }
+  return props.defaultValue;
+});
+function clearInput() {
+  updateInputValue(defaultValue.value);
+  search();
+}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.tableSearchInput || {} })());
+</script>

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

@@ -0,0 +1,33 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { InputEmits, InputProps, InputValue } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/table-search-input';
+type TableSearchInput = ComponentConfig<typeof theme, AppConfig, 'tableSearchInput'>;
+export interface TableSearchInputProps<T extends InputValue> extends Omit<InputProps<T>, 'ui'> {
+    class?: any;
+    ui?: TableSearchInput['slots'];
+}
+export interface TableSearchInputEmits<T extends InputValue> extends InputEmits<T> {
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputValue>(__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<TableSearchInputProps<T> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => 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];
+}) & {};