nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/filters/panel/NumberFilterPanelField.vue

@@ -0,0 +1,151 @@
+<script setup>
+import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
+import { computed, ref } from "vue";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { resolveNumberFilterUi } from "../../../utils";
+import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
+import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+const props = defineProps({
+  definition: { type: Object, required: true }
+});
+const internals = useTableInternals();
+const pendingOperator = ref(resolveInitialOperator());
+const operatorItems = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  })
+);
+const filterUi = computed(() => resolveNumberFilterUi(props.definition, pendingOperator.value));
+const isActive = computed(
+  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+);
+const scalarValue = computed({
+  get() {
+    const value = internals.filterPresentation.getPanelDraftFilterState({
+      key: props.definition.key
+    })?.value;
+    return typeof value === "number" ? value : void 0;
+  },
+  set(value) {
+    internals.filterPresentation.setPanelScalarFilterValue({
+      key: props.definition.key,
+      value,
+      operator: pendingOperator.value
+    });
+  }
+});
+const rangeValue = computed({
+  get: () => {
+    const value = internals.filterPresentation.getPanelDraftFilterState({
+      key: props.definition.key
+    })?.value;
+    if (!value || typeof value !== "object" || Array.isArray(value) || value instanceof Date)
+      return { from: void 0, to: void 0 };
+    return {
+      from: typeof value.from === "number" ? value.from : void 0,
+      to: typeof value.to === "number" ? value.to : void 0
+    };
+  },
+  set(value) {
+    internals.filterPresentation.setPanelScalarFilterValue({
+      key: props.definition.key,
+      value: value.from == null && value.to == null ? void 0 : {
+        ...value.from == null ? {} : { from: value.from },
+        ...value.to == null ? {} : { to: value.to }
+      },
+      operator: pendingOperator.value
+    });
+  }
+});
+function resolveInitialOperator() {
+  const operator = internals.filterPresentation.getPanelFilterOperator({
+    key: props.definition.key
+  });
+  return operator === "isNot" || operator === "gt" || operator === "gte" || operator === "lt" || operator === "lte" || operator === "between" ? operator : "is";
+}
+function handleOperatorChange(operator) {
+  pendingOperator.value = operator === "isNot" || operator === "gt" || operator === "gte" || operator === "lt" || operator === "lte" || operator === "between" ? operator : "is";
+  if (filterUi.value.clearOnOperatorChange)
+    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+}
+function updateRangeFrom(value) {
+  rangeValue.value = {
+    ...rangeValue.value,
+    from: value
+  };
+}
+function updateRangeTo(value) {
+  rangeValue.value = {
+    ...rangeValue.value,
+    to: value
+  };
+}
+function resolveIncrementConfig(hideStepper) {
+  return hideStepper ? false : { variant: "ghost" };
+}
+</script>
+
+<template>
+  <FilterPanelFieldShell
+    :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :active="isActive"
+  >
+    <template #actions>
+      <FilterMatchModeButton
+        v-if="operatorItems.length > 1"
+        :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is'"
+        :items="operatorItems"
+        variant="compact"
+        @select="handleOperatorChange"
+      />
+    </template>
+
+    <div v-if="pendingOperator === 'between'" class="grid gap-3">
+      <div class="grid grid-cols-2 gap-2">
+        <UInputNumber
+          :model-value="rangeValue.from"
+          :placeholder="filterUi.range.inputs.fromPlaceholder"
+          :min="filterUi.min"
+          :max="filterUi.max"
+          :step="filterUi.step"
+          :format-options="filterUi.formatOptions"
+          :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
+          :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          class="w-full"
+          @update:model-value="updateRangeFrom"
+        />
+
+        <UInputNumber
+          :model-value="rangeValue.to"
+          :placeholder="filterUi.range.inputs.toPlaceholder"
+          :min="filterUi.min"
+          :max="filterUi.max"
+          :step="filterUi.step"
+          :format-options="filterUi.formatOptions"
+          :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
+          :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          class="w-full"
+          @update:model-value="updateRangeTo"
+        />
+      </div>
+    </div>
+
+    <div v-else>
+      <UInputNumber
+        :model-value="scalarValue"
+        :placeholder="filterUi.scalar.input.placeholder"
+        :min="filterUi.min"
+        :max="filterUi.max"
+        :step="filterUi.step"
+        :format-options="filterUi.formatOptions"
+        :disable-wheel-change="filterUi.scalar.input.disableWheelChange"
+        :increment="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
+        :decrement="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
+        class="w-full"
+        @update:model-value="scalarValue = $event"
+      />
+    </div>
+  </FilterPanelFieldShell>
+</template>

package/dist/runtime/table/components/filters/panel/NumberFilterPanelField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { TableNumberFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableNumberFilterDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/OptionFilterPanelField.d.vue.ts

@@ -0,0 +1,7 @@
+import type { TableOptionFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableOptionFilterDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/OptionFilterPanelField.vue

@@ -0,0 +1,125 @@
+<script setup>
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed, ref } from "vue";
+import { useOptionFilterEditorState } from "../../../composables/use-option-filter-editor-state";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
+import FilterOptionPickerContent from "../shared/FilterOptionPickerContent.vue";
+import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+import FilterPanelInputTrigger from "./FilterPanelInputTrigger.vue";
+const props = defineProps({
+  definition: { type: Object, required: true }
+});
+const internals = useTableInternals();
+const searchQuery = ref("");
+const pendingOperator = ref(resolveInitialOperator());
+const isOpen = ref(false);
+const selectedValues = computed(() => {
+  const value = internals.filterPresentation.getPanelDraftFilterState({
+    key: props.definition.key
+  })?.value;
+  if (Array.isArray(value)) return value.filter(isPrimitiveValue);
+  return isPrimitiveValue(value) ? [value] : [];
+});
+const state = useOptionFilterEditorState({
+  definition: props.definition,
+  operator: pendingOperator,
+  selectedValues,
+  searchQuery,
+  active: internals.filterPresentation.panelOpen,
+  filters: internals.filters,
+  queryContent: internals.queryContent,
+  schema: internals.schema,
+  setSelectedValues
+});
+const isActive = computed(
+  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+);
+const operatorItems = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  })
+);
+function resolveInitialOperator() {
+  const operator = internals.filterPresentation.getPanelFilterOperator({
+    key: props.definition.key
+  });
+  return operator === "is" || operator === "isNot" ? operator : "isAnyOf";
+}
+function handleOperatorChange(operator) {
+  pendingOperator.value = operator === "is" || operator === "isNot" ? operator : "isAnyOf";
+  if (state.filterUi.value.clearOnOperatorChange) {
+    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+    return;
+  }
+  if (!selectedValues.value.length) return;
+  internals.filterPresentation.setPanelOptionFilterValues({
+    key: props.definition.key,
+    values: selectedValues.value,
+    operator: pendingOperator.value
+  });
+}
+function setSelectedValues(values) {
+  internals.filterPresentation.setPanelOptionFilterValues({
+    key: props.definition.key,
+    values,
+    operator: pendingOperator.value
+  });
+}
+function handleSelectEntry(options) {
+  state.toggleValue(options.value);
+}
+function handleToggleTreeEntry(entryId) {
+  const entry = state.visibleTreeEntries.value.find((item) => item.id === entryId);
+  if (!entry) return;
+  state.toggleTreeEntry(entry);
+}
+function isPrimitiveValue(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+</script>
+
+<template>
+  <FilterPanelFieldShell
+    :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :active="isActive"
+  >
+    <template #actions>
+      <FilterMatchModeButton
+        v-if="operatorItems.length > 1"
+        :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is any of'"
+        :items="operatorItems"
+        variant="compact"
+        @select="handleOperatorChange"
+      />
+    </template>
+
+    <UPopover
+      v-model:open="isOpen"
+      mode="click"
+      :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+      :ui="{
+  content: 'w-[var(--reka-popover-trigger-width)] max-w-[var(--reka-popover-trigger-width)] overflow-hidden p-0 shadow-none'
+}"
+    >
+      <FilterPanelInputTrigger
+        :value="state.triggerSummary.value"
+        :placeholder="state.filterUi.value.labels.searchPlaceholder"
+      />
+
+      <template #content>
+        <FilterOptionPickerContent
+          v-model:search-query="searchQuery"
+          :flat-radio-value="state.flatRadioValue.value"
+          :tree-radio-value="state.treeRadioValue.value"
+          :state="state"
+          @update:flat-radio-value="state.flatRadioValue.value = $event"
+          @update:tree-radio-value="state.treeRadioValue.value = $event"
+          @select-entry="handleSelectEntry"
+          @toggle-tree-entry="handleToggleTreeEntry"
+          @toggle-expanded="state.toggleExpanded"
+        />
+      </template>
+    </UPopover>
+  </FilterPanelFieldShell>
+</template>

package/dist/runtime/table/components/filters/panel/OptionFilterPanelField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { TableOptionFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableOptionFilterDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/TextFilterPanelField.d.vue.ts

@@ -0,0 +1,7 @@
+import type { TableTextFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableTextFilterDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/TextFilterPanelField.vue

@@ -0,0 +1,86 @@
+<script setup>
+import UInput from "@nuxt/ui/components/Input.vue";
+import { computed, ref } from "vue";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { resolveTextFilterUi } from "../../../utils";
+import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
+import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+const props = defineProps({
+  definition: { type: Object, required: true }
+});
+const internals = useTableInternals();
+const pendingOperator = ref(resolveInitialOperator());
+const operatorItems = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  })
+);
+const filterUi = computed(() => resolveTextFilterUi(props.definition, pendingOperator.value));
+const localValue = computed({
+  get: () => {
+    const value = internals.filterPresentation.getPanelDraftFilterState({
+      key: props.definition.key
+    })?.value;
+    return value == null ? "" : String(value);
+  },
+  set: (value) => {
+    internals.filterPresentation.setPanelScalarFilterValue({
+      key: props.definition.key,
+      value: value.trim() || void 0,
+      operator: pendingOperator.value
+    });
+  }
+});
+const isActive = computed(
+  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+);
+function resolveInitialOperator() {
+  const operator = internals.filterPresentation.getPanelFilterOperator({
+    key: props.definition.key
+  });
+  return operator === "is" || operator === "isNot" ? operator : "contains";
+}
+function handleOperatorChange(operator) {
+  pendingOperator.value = operator === "is" || operator === "isNot" ? operator : "contains";
+  if (filterUi.value.clearOnOperatorChange) {
+    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+    return;
+  }
+  if (!localValue.value.trim()) return;
+  internals.filterPresentation.setPanelScalarFilterValue({
+    key: props.definition.key,
+    value: localValue.value.trim(),
+    operator: pendingOperator.value
+  });
+}
+</script>
+
+<template>
+  <FilterPanelFieldShell
+    :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :active="isActive"
+  >
+    <template #actions>
+      <FilterMatchModeButton
+        v-if="operatorItems.length > 1"
+        :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'contains'"
+        :items="operatorItems"
+        variant="compact"
+        @select="handleOperatorChange"
+      />
+    </template>
+
+    <UInput
+      v-model="localValue"
+      :type="filterUi.inputType"
+      :icon="filterUi.leadingIcon"
+      :placeholder="filterUi.placeholder"
+      :autocomplete="filterUi.autocomplete"
+      :highlight="filterUi.input.highlight"
+      :fixed="filterUi.input.fixed"
+      color="neutral"
+      variant="outline"
+      class="w-full"
+    />
+  </FilterPanelFieldShell>
+</template>

package/dist/runtime/table/components/filters/panel/TextFilterPanelField.vue.d.ts

@@ -0,0 +1,7 @@
+import type { TableTextFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableTextFilterDefinition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/registry.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'vue';
+import type { TableUiFilterDefinition } from '../../../types/index.js';
+export declare function resolveFilterPanelComponent(definition: TableUiFilterDefinition): Component;

package/dist/runtime/table/components/filters/panel/registry.js

@@ -0,0 +1,15 @@
+import BooleanFilterPanelField from "./BooleanFilterPanelField.vue";
+import DateFilterPanelField from "./DateFilterPanelField.vue";
+import NumberFilterPanelField from "./NumberFilterPanelField.vue";
+import OptionFilterPanelField from "./OptionFilterPanelField.vue";
+import TextFilterPanelField from "./TextFilterPanelField.vue";
+const FILTER_PANEL_COMPONENTS = {
+  option: OptionFilterPanelField,
+  boolean: BooleanFilterPanelField,
+  date: DateFilterPanelField,
+  number: NumberFilterPanelField,
+  text: TextFilterPanelField
+};
+export function resolveFilterPanelComponent(definition) {
+  return FILTER_PANEL_COMPONENTS[definition.kind];
+}

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.d.vue.ts

@@ -0,0 +1,36 @@
+import type { DataListAddFilterUi, DataListControlSize, TableUiFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definitions: TableUiFilterDefinition[];
+    getLabel: (definition: TableUiFilterDefinition) => string;
+    size?: DataListControlSize;
+    ui?: DataListAddFilterUi;
+};
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
+declare var __VLS_10: {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/table/components/filters/shared/DynamicFilterPicker.vue

@@ -0,0 +1,133 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveFilterTriggerIcon } from "../../../utils";
+import FilterSearchablePanel from "./FilterSearchablePanel.vue";
+const props = defineProps({
+  definitions: { type: Array, required: true },
+  getLabel: { type: Function, required: true },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const { t } = useUiToolsLocale();
+const dataListUi = useDataListUi();
+const isOpen = ref(false);
+const searchQuery = ref("");
+const filteredDefinitions = computed(() => {
+  const search = searchQuery.value.trim().toLowerCase();
+  if (!search) return props.definitions;
+  return props.definitions.filter(
+    (definition) => props.getLabel(definition).toLowerCase().includes(search)
+  );
+});
+function handleSelect(key) {
+  emit("select", key);
+  isOpen.value = false;
+  searchQuery.value = "";
+}
+function open() {
+  isOpen.value = true;
+}
+function close() {
+  isOpen.value = false;
+}
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <UPopover
+    :open="isOpen"
+    mode="click"
+    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+    :ui="{
+  content: mergeDataListUiClass(
+    'w-fit max-w-[calc(100vw-1rem)] overflow-hidden p-0 shadow-none',
+    void 0,
+    ui?.popoverContent
+  )
+}"
+    @update:open="isOpen = $event"
+  >
+    <slot
+      name="trigger"
+      :open="open"
+      :close="close"
+      :toggle="toggle"
+      :open-state="isOpen"
+      :trigger-props="{ type: 'button', 'aria-expanded': isOpen }"
+    >
+      <UButton
+        color="neutral"
+        variant="outline"
+        :size="props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
+        icon="i-lucide-plus"
+        :label="t('table.controls.addFilter')"
+        :ui="{
+  base: mergeDataListUiClass('shrink-0 border-dashed', void 0, ui?.trigger)
+}"
+      />
+    </slot>
+
+    <template #content>
+      <div
+        :class="
+  mergeDataListUiClass(
+    'w-fit min-w-[18rem] max-w-[min(24rem,calc(100vw-1rem))]',
+    void 0,
+    ui?.panel
+  )
+"
+      >
+        <FilterSearchablePanel
+          v-model:search-query="searchQuery"
+          searchable
+          autofocus
+          :search-placeholder="t('table.controls.searchFilters')"
+          :show-empty="!filteredDefinitions.length"
+          :empty-label="t('table.controls.noMatchingFilters')"
+          max-height-class="max-h-72"
+        >
+          <button
+            v-for="definition in filteredDefinitions"
+            :key="definition.key"
+            type="button"
+            :class="
+  mergeDataListUiClass(
+    'flex min-w-0 items-center gap-3 rounded-md px-3 py-2 text-left transition-colors hover:bg-elevated/70',
+    void 0,
+    ui?.option
+  )
+"
+            @click="handleSelect(definition.key)"
+          >
+            <UIcon
+              :name="resolveFilterTriggerIcon(definition)"
+              :class="mergeDataListUiClass('size-4 shrink-0 text-muted', void 0, ui?.optionIcon)"
+            />
+            <span
+              :class="
+  mergeDataListUiClass(
+    'min-w-0 flex-1 truncate text-sm text-default',
+    void 0,
+    ui?.optionLabel
+  )
+"
+            >
+              {{ getLabel(definition) }}
+            </span>
+            <span :class="mergeDataListUiClass('text-muted', void 0, ui?.optionTrailingIcon)">
+              <UIcon name="i-lucide-arrow-right" class="size-4" />
+            </span>
+          </button>
+        </FilterSearchablePanel>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.vue.d.ts

@@ -0,0 +1,36 @@
+import type { DataListAddFilterUi, DataListControlSize, TableUiFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definitions: TableUiFilterDefinition[];
+    getLabel: (definition: TableUiFilterDefinition) => string;
+    size?: DataListControlSize;
+    ui?: DataListAddFilterUi;
+};
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
+declare var __VLS_10: {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/table/components/filters/shared/FilterMatchModeButton.d.vue.ts

@@ -0,0 +1,22 @@
+import type { TableFilterOperator } from '../../../types/index.js';
+type __VLS_Props = {
+    label: string;
+    items?: Array<{
+        label: string;
+        value: TableFilterOperator;
+    }>;
+    variant?: 'default' | 'compact';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: TableFilterOperator) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: TableFilterOperator) => any) | undefined;
+}>, {
+    variant: "default" | "compact";
+    items: Array<{
+        label: string;
+        value: TableFilterOperator;
+    }>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;