nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/components/filters/panel/{BooleanFilterPanelField.d.vue.ts → boolean-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableBooleanFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableBooleanFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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;

package/dist/runtime/table/components/filters/panel/boolean-filter-panel-field.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, ref } from "vue";
+import { isBoolean } from "../../../../shared/utils/predicate";
+import { useTableFilterOptions } from "../../../composables/use-table-filter-options";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { resolveBooleanFilterUi } from "../../../utils";
+import FilterPanelChips from "./filter-panel-chips.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
+const props = defineProps({
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const searchQuery = ref("");
+const optionSource = useTableFilterOptions({
+  active: internals.filterPresentation.panelOpen,
+  definition: props.definition,
+  filters: internals.filters,
+  queryContent: internals.queryContent,
+  schema: internals.schema,
+  searchQuery
+});
+const filterUi = computed(() => resolveBooleanFilterUi(props.definition, "is"));
+const current = computed(() => {
+  const value = internals.filterPresentation.getPanelDraftFilterState({
+    key: props.definition.key
+  })?.value;
+  return value === true || value === false ? value : void 0;
+});
+const isActive = computed(() => current.value !== void 0);
+const entries = computed(
+  () => optionSource.filteredEntries.value.filter((entry) => isBoolean(entry.value)).map((entry) => ({
+    count: entry.count,
+    icon: entry.value === true ? filterUi.value.icons.true : filterUi.value.icons.false,
+    label: entry.value === true ? filterUi.value.labels.true : filterUi.value.labels.false,
+    selected: current.value === entry.value,
+    value: entry.value
+  }))
+);
+function toggle(value) {
+  if (current.value === value) {
+    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+    return;
+  }
+  internals.filterPresentation.setPanelScalarFilterValue({
+    key: props.definition.key,
+    value: value === true
+  });
+}
+</script>
+
+<template>
+  <FilterPanelFieldShell
+    :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :active="isActive"
+    :size="size"
+    :ui="ui"
+  >
+    <FilterPanelChips
+      :entries="entries"
+      :loading="optionSource.isLoading.value"
+      :count-loading="optionSource.isCountLoading.value"
+      show-counts
+      :ui="ui"
+      @toggle="toggle"
+    />
+  </FilterPanelFieldShell>
+</template>

package/dist/runtime/table/components/filters/panel/{BooleanFilterPanelField.vue.d.ts → boolean-filter-panel-field.vue.d.ts}

@@ -1,6 +1,8 @@
-import type { TableBooleanFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableBooleanFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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;

package/dist/runtime/table/components/filters/panel/{DateFilterPanelField.d.vue.ts → date-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableDateFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableDateFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableDateFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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;

package/dist/runtime/table/components/filters/panel/{DateFilterPanelField.vue → date-filter-panel-field.vue}

@@ -2,12 +2,15 @@
 import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
 import UInputDate from "@nuxt/ui/components/InputDate.vue";
 import { computed, ref, shallowRef, watch } from "vue";
+import { isDate, isNumber, isObject, isString, isNullish } from "../../../../shared/utils/predicate";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import { getDateRangeValue, resolveDateFilterUi } from "../../../utils";
-import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
-import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+import FilterMatchModeButton from "../shared/filter-match-mode-button.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
 const props = defineProps({
-  definition: { type: Object, required: true }
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
 const pendingOperator = ref(resolveInitialOperator());
@@ -18,11 +21,13 @@ const operatorItems = computed(
 );
 const filterUi = computed(() => resolveDateFilterUi(props.definition, pendingOperator.value));
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
-const localDate = shallowRef(void 0);
-const localRangeStart = shallowRef(void 0);
-const localRangeEnd = shallowRef(void 0);
+const localDate = shallowRef();
+const localRangeStart = shallowRef();
+const localRangeEnd = shallowRef();
 function resolveInitialOperator() {
   const operator = internals.filterPresentation.getPanelFilterOperator({
     key: props.definition.key
@@ -31,7 +36,9 @@ function resolveInitialOperator() {
 }
 function handleOperatorChange(operator) {
   pendingOperator.value = operator === "isNot" || operator === "before" || operator === "after" || operator === "between" ? operator : "is";
-  if (filterUi.value.clearOnOperatorChange) clearFilter();
+  if (filterUi.value.clearOnOperatorChange) {
+    clearFilter();
+  }
 }
 function setSingleDate(value) {
   localDate.value = coerceCalendarDate(value);
@@ -48,17 +55,24 @@ function setRangeEnd(value) {
 function syncScalarDraft() {
   internals.filterPresentation.setPanelScalarFilterValue({
     key: props.definition.key,
-    value: localDate.value ? toJsDate(localDate.value) : void 0,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    value: localDate.value ? toJsDate(localDate.value) : void 0
   });
 }
 function syncRangeDraft() {
   const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
   const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
+  const value = {};
+  if (from) {
+    value.from = from;
+  }
+  if (to) {
+    value.to = to;
+  }
   internals.filterPresentation.setPanelScalarFilterValue({
     key: props.definition.key,
-    value: from || to ? { ...from ? { from } : {}, ...to ? { to } : {} } : void 0,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    value: from || to ? value : void 0
   });
 }
 function resetLocalState() {
@@ -86,16 +100,18 @@ function clearFilter() {
   localRangeEnd.value = void 0;
 }
 function coerceCalendarDate(value) {
-  if (value && typeof value === "object" && "year" in value && "month" in value && "day" in value && typeof value.year === "number" && typeof value.month === "number" && typeof value.day === "number") {
+  if (value && isObject(value) && "year" in value && "month" in value && "day" in value && isNumber(value.year) && isNumber(value.month) && isNumber(value.day)) {
     return new CalendarDate(value.year, value.month, value.day);
   }
-  return void 0;
 }
 function toCalendarDate(value) {
-  if (!(value instanceof Date) && typeof value !== "string" && typeof value !== "number")
-    return void 0;
+  if (!isDate(value) && !isString(value) && !isNumber(value)) {
+    return;
+  }
   const resolvedDate = value instanceof Date ? value : new Date(value);
-  if (Number.isNaN(resolvedDate.getTime())) return void 0;
+  if (Number.isNaN(resolvedDate.getTime())) {
+    return;
+  }
   return new CalendarDate(
     resolvedDate.getFullYear(),
     resolvedDate.getMonth() + 1,
@@ -109,7 +125,9 @@ resetLocalState();
 watch(
   () => internals.filterPresentation.panelOpen.value,
   (open) => {
-    if (!open) return;
+    if (!open) {
+      return;
+    }
     resetLocalState();
   }
 );
@@ -132,12 +150,16 @@ watch(
   <FilterPanelFieldShell
     :label="internals.filters.getFilterLabelText({ label: definition.label })"
     :active="isActive"
+    :size="size"
+    :ui="ui"
   >
     <template #actions>
       <FilterMatchModeButton
-        v-if="operatorItems.length > 1"
+        v-if="operatorItems.length"
         :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
@@ -152,6 +174,7 @@ watch(
         :granularity="filterUi.range.input.granularity"
         :hide-time-zone="filterUi.range.input.hideTimeZone"
         :hour-cycle="filterUi.range.input.hourCycle"
+        :size="size"
         leading-icon="i-lucide-calendar-days"
         class="w-full"
         @update:model-value="setRangeStart"
@@ -165,6 +188,7 @@ watch(
         :granularity="filterUi.range.input.granularity"
         :hide-time-zone="filterUi.range.input.hideTimeZone"
         :hour-cycle="filterUi.range.input.hourCycle"
+        :size="size"
         leading-icon="i-lucide-calendar-days"
         class="w-full"
         @update:model-value="setRangeEnd"
@@ -180,6 +204,7 @@ watch(
       :granularity="filterUi.scalar.input.granularity"
       :hide-time-zone="filterUi.scalar.input.hideTimeZone"
       :hour-cycle="filterUi.scalar.input.hourCycle"
+      :size="size"
       leading-icon="i-lucide-calendar-days"
       class="w-full"
       @update:model-value="setSingleDate"

package/dist/runtime/table/components/filters/panel/{DateFilterPanelField.vue.d.ts → date-filter-panel-field.vue.d.ts}

@@ -1,6 +1,8 @@
-import type { TableDateFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableDateFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableDateFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 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;

package/dist/runtime/table/components/filters/panel/filter-panel-chips.d.vue.ts

@@ -0,0 +1,23 @@
+import type { DataListFilterPanelUi } from '../../../types/index.js';
+export interface FilterPanelChipEntry {
+    value: string | number | boolean;
+    label: string;
+    count?: number;
+    selected: boolean;
+    color?: string;
+    icon?: string;
+}
+type __VLS_Props = {
+    entries: FilterPanelChipEntry[];
+    loading?: boolean;
+    countLoading?: boolean;
+    showCounts?: boolean;
+    ui?: DataListFilterPanelUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((value: string | number | boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/filter-panel-chips.vue

@@ -0,0 +1,71 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass } from "../../../utils";
+const props = defineProps({
+  entries: { type: Array, required: true },
+  loading: { type: Boolean, required: false },
+  countLoading: { type: Boolean, required: false },
+  showCounts: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["toggle"]);
+const dataListUi = useDataListUi();
+const ui = computed(() => ({
+  ...dataListUi.ui.value.filterPanel?.ui,
+  ...props.ui
+}));
+const CHIP = "nut-dl-chip inline-flex h-7 max-w-full items-center gap-1.5 rounded-md border border-transparent bg-muted px-2.5 text-[12.5px] text-default transition-colors outline-none hover:bg-elevated focus-visible:ring-2 focus-visible:ring-primary/40";
+const CHIP_ACTIVE = "nut-dl-chip--active border-primary/25 bg-primary/10 text-[var(--nut-dl-accent-ink,var(--ui-primary))] hover:bg-primary/15";
+</script>
+
+<template>
+  <div
+    :class="mergeDataListUiClass('nut-dl-chips flex flex-wrap gap-1.5', void 0, ui.chips)"
+    role="group"
+  >
+    <template v-if="loading">
+      <span
+        v-for="index in 3"
+        :key="index"
+        class="nut-dl-skeleton nut-dl-chip__skeleton inline-block h-7 rounded-md"
+        :style="{ width: `${52 + index * 14}px` }"
+        aria-hidden="true"
+      />
+    </template>
+    <button
+      v-for="entry in entries"
+      v-else
+      :key="String(entry.value)"
+      type="button"
+      :class="
+  mergeDataListUiClass(
+    CHIP,
+    entry.selected ? mergeDataListUiClass(CHIP_ACTIVE, void 0, ui.chipActive) : void 0,
+    ui.chip
+  )
+"
+      :aria-pressed="entry.selected"
+      :data-value="String(entry.value)"
+      @click="emit('toggle', entry.value)"
+    >
+      <span
+        v-if="entry.color"
+        class="nut-dl-chip__dot size-[7px] shrink-0 rounded-full"
+        :style="{ background: entry.color }"
+        aria-hidden="true"
+      />
+      <UIcon v-else-if="entry.icon" :name="entry.icon" class="size-3.5 shrink-0 text-muted" />
+      <span class="nut-dl-chip__label min-w-0 truncate">{{ entry.label }}</span>
+      <span
+        v-if="showCounts && countLoading"
+        class="nut-dl-skeleton inline-block h-2.5 w-4 rounded"
+        aria-hidden="true"
+      />
+      <small v-else-if="showCounts" class="nut-dl-chip__count text-[11px] text-dimmed tabular-nums">
+        {{ entry.count ?? 0 }}
+      </small>
+    </button>
+  </div>
+</template>

package/dist/runtime/table/components/filters/panel/filter-panel-chips.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DataListFilterPanelUi } from '../../../types/index.js';
+export interface FilterPanelChipEntry {
+    value: string | number | boolean;
+    label: string;
+    count?: number;
+    selected: boolean;
+    color?: string;
+    icon?: string;
+}
+type __VLS_Props = {
+    entries: FilterPanelChipEntry[];
+    loading?: boolean;
+    countLoading?: boolean;
+    showCounts?: boolean;
+    ui?: DataListFilterPanelUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((value: string | number | boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/filters/panel/{FilterPanelFieldShell.d.vue.ts → filter-panel-field-shell.d.vue.ts}

@@ -1,6 +1,10 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
+    meta?: string;
     active?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 type __VLS_Slots = {
     actions?: () => any;

package/dist/runtime/table/components/filters/panel/filter-panel-field-shell.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { mergeDataListUiClass } from "../../../utils";
+const props = defineProps({
+  label: { type: String, required: true },
+  meta: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const dataListUi = useDataListUi();
+const ui = computed(() => ({
+  ...dataListUi.ui.value.filterPanel?.ui,
+  ...props.ui
+}));
+</script>
+
+<template>
+  <section
+    :class="mergeDataListUiClass('nut-dl-fpanel__field grid gap-2', void 0, ui.field)"
+    :data-active="active"
+  >
+    <div class="flex min-w-0 items-center justify-between gap-2">
+      <h3
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__label min-w-0 flex-1 truncate text-[12px] font-semibold text-default',
+    void 0,
+    ui.fieldLabel
+  )
+"
+      >
+        {{ label }}
+      </h3>
+      <div class="flex shrink-0 items-center gap-2">
+        <small
+          v-if="meta"
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__meta text-[11px] font-medium text-dimmed tabular-nums',
+    void 0,
+    ui.fieldMeta
+  )
+"
+        >
+          {{ meta }}
+        </small>
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <slot />
+  </section>
+</template>

package/dist/runtime/table/components/filters/panel/{FilterPanelFieldShell.vue.d.ts → filter-panel-field-shell.vue.d.ts}

@@ -1,6 +1,10 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
+    meta?: string;
     active?: boolean;
+    size?: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 type __VLS_Slots = {
     actions?: () => any;

package/dist/runtime/table/components/filters/panel/filter-panel-fields.d.vue.ts

@@ -0,0 +1,8 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
+type __VLS_Props = {
+    size: DataListControlSize;
+    ui: DataListFilterPanelUi;
+};
+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/filter-panel-fields.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { mergeDataListUiClass } from "../../../utils";
+import { resolveFilterPanelComponent } from "./registry";
+const props = defineProps({
+  size: { type: String, required: true },
+  ui: { type: Object, required: true }
+});
+const internals = useTableInternals();
+const sections = computed(() => internals.filterPresentation.panelSections.value);
+const captioned = computed(
+  () => sections.value.length > 1 || sections.value[0] && sections.value[0].label !== "Filters"
+);
+</script>
+
+<template>
+  <div :class="mergeDataListUiClass('nut-dl-fpanel__fields grid gap-7', void 0, ui.fields)">
+    <section
+      v-for="section in sections"
+      :key="section.label"
+      :class="mergeDataListUiClass('nut-dl-fpanel__section grid gap-4', void 0, ui.section)"
+    >
+      <div
+        v-if="captioned"
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__caption text-[10.5px] font-semibold tracking-[0.08em] text-dimmed uppercase',
+    void 0,
+    ui.sectionTitle
+  )
+"
+      >
+        {{ section.label }}
+      </div>
+      <component
+        :is="resolveFilterPanelComponent(definition)"
+        v-for="definition in section.items"
+        :key="definition.key"
+        :size="props.size"
+        :definition="definition"
+        :ui="ui"
+      />
+    </section>
+  </div>
+</template>

package/dist/runtime/table/components/filters/panel/filter-panel-fields.vue.d.ts

@@ -0,0 +1,8 @@
+import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
+type __VLS_Props = {
+    size: DataListControlSize;
+    ui: DataListFilterPanelUi;
+};
+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/{FilterPanelInputTrigger.d.vue.ts → filter-panel-input-trigger.d.vue.ts}

@@ -1,7 +1,9 @@
+import type { DataListControlSize } from '../../../types/index.js';
 type __VLS_Props = {
     value?: string;
     placeholder: string;
     icon?: string;
+    size?: DataListControlSize;
 };
 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;

package/dist/runtime/table/components/filters/panel/filter-panel-input-trigger.vue

@@ -0,0 +1,26 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { resolveDataListControlGeometry } from "../../../utils";
+const props = defineProps({
+  value: { type: String, required: false },
+  placeholder: { type: String, required: true },
+  icon: { type: String, required: false },
+  size: { type: String, required: false }
+});
+const geometry = computed(() => resolveDataListControlGeometry(props.size ?? "md"));
+</script>
+
+<template>
+  <UButton color="neutral" variant="outline" :size="size" class="w-full justify-between text-left">
+    <span :class="['flex min-w-0 items-center', geometry.toolbarGap]">
+      <UIcon v-if="icon" :name="icon" :class="[geometry.icon, 'shrink-0 text-muted']" />
+      <span class="min-w-0 truncate" :class="value ? 'text-default' : 'text-muted'">
+        {{ value || placeholder }}
+      </span>
+    </span>
+
+    <UIcon name="i-lucide-chevron-down" :class="[geometry.icon, 'shrink-0 text-muted']" />
+  </UButton>
+</template>

package/dist/runtime/table/components/filters/panel/{FilterPanelInputTrigger.vue.d.ts → filter-panel-input-trigger.vue.d.ts}

@@ -1,7 +1,9 @@
+import type { DataListControlSize } from '../../../types/index.js';
 type __VLS_Props = {
     value?: string;
     placeholder: string;
     icon?: string;
+    size?: DataListControlSize;
 };
 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;

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

@@ -0,0 +1,35 @@
+import type { VNodeChild } from 'vue';
+import type { DataListControlSize, DataListFilterPanelCommitMode, DataListFilterPanelMode, DataListFilterPanelProps, DataListFilterPanelUi } from '../../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    description?: string;
+    ui?: DataListFilterPanelUi;
+    props?: DataListFilterPanelProps;
+    mode?: DataListFilterPanelMode;
+    commitMode?: DataListFilterPanelCommitMode;
+};
+type __VLS_Slots = {
+    trigger?: (props: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        openState: boolean;
+        activeCount: number;
+        triggerProps: {
+            type: 'button';
+            'aria-expanded': boolean;
+        };
+    }) => VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: DataListFilterPanelMode;
+    commitMode: DataListFilterPanelCommitMode;
+}, {}, {}, {}, 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;
+    };
+};