nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/filters/tags/DateFilterTag.vue

@@ -0,0 +1,460 @@
+<script setup>
+import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UCalendar from "@nuxt/ui/components/Calendar.vue";
+import UInputDate from "@nuxt/ui/components/InputDate.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { computed, ref, shallowRef, toRef, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import {
+  formatFilterDate,
+  getDateRangeValue,
+  resolveFilterTriggerIcon,
+  resolveDateFilterRangeCalendarPanels,
+  resolveDateFilterRangePresets,
+  resolveDateFilterScalarPresets,
+  resolveDateFilterUi
+} from "../../../utils";
+import TableFilterTrigger from "../shared/FilterTriggerTag.vue";
+const props = defineProps({
+  definition: { type: Object, required: true },
+  dynamic: { type: Boolean, required: false },
+  session: { type: Boolean, required: false },
+  activationToken: { type: Number, required: false }
+});
+const emit = defineEmits(["dismiss", "sessionClosed"]);
+const internals = useTableInternals();
+const { t } = useUiToolsLocale();
+const isMobile = useMediaQuery("(max-width: 639px)");
+const pendingOperator = ref();
+const localDate = shallowRef(void 0);
+const localRangeStart = shallowRef(void 0);
+const localRangeEnd = shallowRef(void 0);
+const preview = computed(
+  () => internals.filters.getFilterPreview({
+    key: props.definition.key
+  })
+);
+const operator = computed(() => {
+  const value = pendingOperator.value ?? internals.filters.getFilterOperator({
+    key: props.definition.key
+  });
+  return value === "isNot" || value === "before" || value === "after" || value === "between" ? value : "is";
+});
+const filterUi = computed(() => resolveDateFilterUi(props.definition, operator.value));
+const operatorLabel = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  }).find((item) => item.value === operator.value)?.label ?? "is"
+);
+const operatorItems = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  })
+);
+const scalarPresets = computed(
+  () => resolveDateFilterScalarPresets({
+    definition: props.definition,
+    operator: operator.value === "before" || operator.value === "after" || operator.value === "isNot" ? operator.value : "is"
+  })
+);
+const rangePresets = computed(
+  () => resolveDateFilterRangePresets({
+    definition: props.definition
+  })
+);
+const rangeCalendarPanels = computed(
+  () => resolveDateFilterRangeCalendarPanels({
+    definition: props.definition,
+    mobile: isMobile.value
+  })
+);
+const calendarRange = computed(() => {
+  if (!localRangeStart.value || !localRangeEnd.value) return void 0;
+  return {
+    start: localRangeStart.value,
+    end: localRangeEnd.value
+  };
+});
+const rangeSummary = computed(() => {
+  const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
+  const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
+  if (from && to) return `${formatFilterDate({ value: from })} - ${formatFilterDate({ value: to })}`;
+  if (from) return `${t("table.filters.operators.after")} ${formatFilterDate({ value: from })}`;
+  if (to) return `${t("table.filters.operators.before")} ${formatFilterDate({ value: to })}`;
+  return t("table.filters.preview.empty");
+});
+const session = useFilterTagSession({
+  activationToken: toRef(props, "activationToken"),
+  session: props.session,
+  dynamic: props.dynamic,
+  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  onActivated: () => handleActivate(operator.value),
+  onOpen: initLocalState,
+  onClose: () => {
+    pendingOperator.value = void 0;
+  },
+  onSessionClosed: () => emit("sessionClosed"),
+  onDismiss: () => emit("dismiss")
+});
+watch(
+  () => operator.value,
+  () => {
+    if (session.isOpen.value) initLocalState();
+  }
+);
+function handleActivate(op) {
+  pendingOperator.value = op;
+  session.openWithLock();
+}
+function initLocalState() {
+  const rule = internals.filters.getFilterState({ key: props.definition.key });
+  if (operator.value === "between") {
+    const range = getDateRangeValue({
+      value: rule?.value
+    });
+    localRangeStart.value = range?.from ? toCalendarDate(range.from) : void 0;
+    localRangeEnd.value = range?.to ? toCalendarDate(range.to) : void 0;
+    localDate.value = void 0;
+    return;
+  }
+  const date = rule?.value instanceof Date ? rule.value : rule?.value ? new Date(String(rule.value)) : void 0;
+  localDate.value = date ? toCalendarDate(date) : void 0;
+  localRangeStart.value = void 0;
+  localRangeEnd.value = void 0;
+}
+function applyFilter() {
+  const currentOperator = operator.value;
+  const nextOperator = pendingOperator.value;
+  pendingOperator.value = void 0;
+  if (currentOperator === "between") {
+    const from = localRangeStart.value ? toJsDate(localRangeStart.value) : void 0;
+    const to = localRangeEnd.value ? toJsDate(localRangeEnd.value) : void 0;
+    internals.filters.setScalarFilterValue({
+      key: props.definition.key,
+      value: from || to ? { ...from ? { from } : {}, ...to ? { to } : {} } : void 0,
+      operator: nextOperator
+    });
+    session.close();
+    return;
+  }
+  internals.filters.setScalarFilterValue({
+    key: props.definition.key,
+    value: localDate.value ? toJsDate(localDate.value) : void 0,
+    operator: nextOperator
+  });
+  session.close();
+}
+function clearFilter() {
+  internals.filters.clearFilter({ key: props.definition.key });
+  localDate.value = void 0;
+  localRangeStart.value = void 0;
+  localRangeEnd.value = void 0;
+  session.close();
+}
+function handleOperatorChange(op) {
+  if (filterUi.value.clearOnOperatorChange) {
+    internals.filters.clearFilter({ key: props.definition.key });
+  }
+  localDate.value = void 0;
+  localRangeStart.value = void 0;
+  localRangeEnd.value = void 0;
+  if (filterUi.value.reopenOnOperatorChange) handleActivate(op);
+  else pendingOperator.value = op;
+}
+function applyScalarPreset(value) {
+  localDate.value = toCalendarDate(value);
+  if (filterUi.value.commitMode === "auto") applyFilter();
+}
+function applyRangePreset(value) {
+  localRangeStart.value = value.from ? toCalendarDate(value.from) : void 0;
+  localRangeEnd.value = value.to ? toCalendarDate(value.to) : void 0;
+  if (filterUi.value.commitMode === "auto") applyFilter();
+}
+function isRangePresetActive(value) {
+  const fromMatches = areSameCalendarDay(localRangeStart.value, toCalendarDate(value.from));
+  const toMatches = areSameCalendarDay(localRangeEnd.value, toCalendarDate(value.to));
+  return fromMatches && toMatches;
+}
+function setSingleDate(value) {
+  localDate.value = coerceCalendarDate(value);
+  if (filterUi.value.commitMode === "auto") applyFilter();
+}
+function setRangeStart(value) {
+  localRangeStart.value = coerceCalendarDate(value);
+  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "inputs") {
+    applyFilter();
+  }
+}
+function setRangeEnd(value) {
+  localRangeEnd.value = coerceCalendarDate(value);
+  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "inputs") {
+    applyFilter();
+  }
+}
+function setCalendarRange(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    localRangeStart.value = void 0;
+    localRangeEnd.value = void 0;
+    return;
+  }
+  localRangeStart.value = "start" in value ? coerceCalendarDate(value.start) : void 0;
+  localRangeEnd.value = "end" in value ? coerceCalendarDate(value.end) : void 0;
+  if (filterUi.value.commitMode === "auto" && filterUi.value.range.display === "calendar") {
+    applyFilter();
+  }
+}
+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") {
+    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;
+  }
+  const resolvedDate = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(resolvedDate.getTime())) return void 0;
+  return new CalendarDate(
+    resolvedDate.getFullYear(),
+    resolvedDate.getMonth() + 1,
+    resolvedDate.getDate()
+  );
+}
+function toJsDate(value) {
+  return value.toDate(getLocalTimeZone());
+}
+function areSameCalendarDay(left, right) {
+  if (!left && !right) return true;
+  if (!left || !right) return false;
+  return left.year === right.year && left.month === right.month && left.day === right.day;
+}
+</script>
+
+<template>
+  <UPopover
+    :open="session.isOpen.value"
+    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+    :ui="{
+  content: 'max-w-[calc(100vw-1rem)] overflow-hidden p-0 shadow-none'
+}"
+    @update:open="session.handleOpenChange"
+  >
+    <slot
+      name="trigger"
+      :preview="preview"
+      :active="preview.active"
+      :open="session.isOpen.value"
+      :trigger-props="{
+  type: 'button',
+  'aria-haspopup': 'dialog',
+  'aria-expanded': session.isOpen.value
+}"
+    >
+      <TableFilterTrigger
+        :label="internals.filters.getFilterLabelText({ label: definition.label })"
+        :leading-icon="resolveFilterTriggerIcon(definition)"
+        :operator-label="operatorLabel"
+        :operator-items="operatorItems"
+        :preview-summary="preview.summary"
+        :active="preview.active"
+        @select-operator="handleOperatorChange"
+        @activate="handleActivate"
+        @clear="clearFilter"
+      />
+    </slot>
+
+    <template #content>
+      <div
+        class="bg-default"
+        :class="operator === 'between' ? 'w-[min(100vw-1rem,48rem)]' : 'w-[min(100vw-1rem,22rem)]'"
+      >
+        <div v-if="operator === 'between'">
+          <div
+            class="grid gap-0"
+            :class="
+  filterUi.range.presetsPlacement === 'side' ? 'lg:grid-cols-[14rem_minmax(0,1fr)]' : 'grid-cols-1'
+"
+          >
+            <div
+              v-if="rangePresets.length"
+              class="border-b border-default p-3"
+              :class="filterUi.range.presetsPlacement === 'side' ? 'lg:border-r lg:border-b-0' : ''"
+            >
+              <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-muted">
+                Date range
+              </div>
+
+              <div
+                class="mt-3 flex gap-1.5"
+                :class="filterUi.range.presetsPlacement === 'side' ? 'flex-col' : 'flex-wrap'"
+              >
+                <UButton
+                  v-for="preset in rangePresets"
+                  :key="preset.label"
+                  :variant="isRangePresetActive(preset.value) ? 'subtle' : 'ghost'"
+                  class="justify-start rounded-lg px-3"
+                  @click="applyRangePreset(preset.value)"
+                >
+                  {{ preset.label }}
+                </UButton>
+              </div>
+            </div>
+
+            <div v-if="filterUi.range.display !== 'inputs'" class="p-3">
+              <UCalendar
+                :model-value="calendarRange"
+                range
+                :number-of-months="rangeCalendarPanels"
+                :paged-navigation="
+  filterUi.range.calendar.pagedNavigation ?? rangeCalendarPanels > 1
+"
+                :fixed-weeks="filterUi.range.calendar.fixedWeeks"
+                :maximum-days="filterUi.range.calendar.maxRangeDays"
+                :ui="{
+  root: 'border-0 bg-transparent p-0 shadow-none',
+  header: 'px-1 pb-2',
+  body: 'gap-3',
+  grid: 'gap-y-1',
+  cell: 'p-0.5',
+  cellTrigger: 'rounded-md'
+}"
+                @update:model-value="setCalendarRange"
+              />
+            </div>
+          </div>
+
+          <div
+            v-if="filterUi.range.display !== 'calendar'"
+            class="border-t border-default px-3 py-3"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <div class="text-[11px] font-medium uppercase tracking-[0.18em] text-muted">
+                Custom range
+              </div>
+              <div class="truncate text-xs text-muted">
+                {{ rangeSummary }}
+              </div>
+            </div>
+
+            <div class="mt-3 grid gap-2 sm:grid-cols-2">
+              <div class="space-y-1">
+                <span class="px-1 text-xs text-muted">Start</span>
+                <UInputDate
+                  :model-value="localRangeStart"
+                  leading
+                  :fixed="filterUi.range.input.fixed"
+                  :highlight="filterUi.range.input.highlight"
+                  :granularity="filterUi.range.input.granularity"
+                  :hide-time-zone="filterUi.range.input.hideTimeZone"
+                  :hour-cycle="filterUi.range.input.hourCycle"
+                  leading-icon="i-lucide-arrow-right"
+                  class="w-full"
+                  @update:model-value="setRangeStart"
+                />
+              </div>
+
+              <div class="space-y-1">
+                <span class="px-1 text-xs text-muted">End</span>
+                <UInputDate
+                  :model-value="localRangeEnd"
+                  leading
+                  :fixed="filterUi.range.input.fixed"
+                  :highlight="filterUi.range.input.highlight"
+                  :granularity="filterUi.range.input.granularity"
+                  :hide-time-zone="filterUi.range.input.hideTimeZone"
+                  :hour-cycle="filterUi.range.input.hourCycle"
+                  leading-icon="i-lucide-arrow-left"
+                  class="w-full"
+                  @update:model-value="setRangeEnd"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="grid gap-2 p-3">
+          <div v-if="scalarPresets.length" class="flex flex-wrap gap-1.5">
+            <UButton
+              v-for="preset in scalarPresets"
+              :key="preset.label"
+              variant="ghost"
+              class="rounded-lg px-3"
+              @click="applyScalarPreset(preset.value)"
+            >
+              {{ preset.label }}
+            </UButton>
+          </div>
+
+          <UInputDate
+            v-if="
+  filterUi.scalar.display === 'input' || filterUi.scalar.display === 'input-calendar'
+"
+            :model-value="localDate"
+            leading
+            :fixed="filterUi.scalar.input.fixed"
+            :highlight="filterUi.scalar.input.highlight"
+            :granularity="filterUi.scalar.input.granularity"
+            :hide-time-zone="filterUi.scalar.input.hideTimeZone"
+            :hour-cycle="filterUi.scalar.input.hourCycle"
+            leading-icon="i-lucide-calendar-days"
+            class="w-full"
+            @update:model-value="setSingleDate"
+          />
+
+          <UCalendar
+            v-if="
+  filterUi.scalar.display === 'calendar' || filterUi.scalar.display === 'input-calendar'
+"
+            :model-value="localDate"
+            :fixed-weeks="filterUi.scalar.calendar.fixedWeeks"
+            :ui="{
+  root: 'border-0 bg-transparent p-0 shadow-none',
+  header: 'px-1 pb-2',
+  grid: 'gap-y-1',
+  cell: 'p-0.5',
+  cellTrigger: 'rounded-md'
+}"
+            @update:model-value="setSingleDate"
+          />
+        </div>
+
+        <div
+          v-if="filterUi.commitMode === 'manual'"
+          class="flex items-center border-t border-default p-2"
+          :class="operator === 'between' ? 'justify-between' : 'justify-end'"
+        >
+          <UButton
+            v-if="operator === 'between'"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :label="filterUi.actions.clear"
+            @click="clearFilter"
+          />
+          <div class="flex items-center gap-2">
+            <UButton
+              v-if="operator !== 'between'"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :label="filterUi.actions.clear"
+              @click="clearFilter"
+            />
+            <UButton
+              color="neutral"
+              variant="subtle"
+              size="sm"
+              :label="filterUi.actions.apply"
+              @click="applyFilter"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/table/components/filters/tags/DateFilterTag.vue.d.ts

@@ -0,0 +1,35 @@
+import type { TableDateFilterDefinition } from '../../../types/filters.js';
+type __VLS_Props = {
+    definition: TableDateFilterDefinition;
+    dynamic?: boolean;
+    session?: boolean;
+    activationToken?: number;
+};
+declare var __VLS_10: {
+    preview: import("../../../utils/index.js").FilterPreviewResult;
+    active: boolean;
+    open: boolean;
+    triggerProps: {
+        type: string;
+        'aria-haspopup': 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, {
+    dismiss: () => any;
+    sessionClosed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    onSessionClosed?: (() => 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/tags/FilterTagsBar.d.vue.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    showAdd?: boolean;
+    showClear?: boolean;
+};
+declare var __VLS_10: any, __VLS_22: any, __VLS_33: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+}, __VLS_43: {};
+type __VLS_Slots = {} & {
+    filter?: (props: typeof __VLS_10) => any;
+} & {
+    filter?: (props: typeof __VLS_22) => any;
+} & {
+    'add-filter-trigger'?: (props: typeof __VLS_33) => any;
+} & {
+    'clear-filter-label'?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    showAdd: boolean;
+    showClear: boolean;
+}, {}, {}, {}, 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/tags/FilterTagsBar.vue

@@ -0,0 +1,110 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { getFilterLabelText, mergeDataListUiClass } from "../../../utils";
+import DynamicFilterPicker from "../shared/DynamicFilterPicker.vue";
+import { resolveFilterTagComponent } from "./registry";
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const props = defineProps({
+  showAdd: { type: Boolean, required: false, default: true },
+  showClear: { type: Boolean, required: false, default: true }
+});
+const visibleDefinitions = computed(() => [
+  ...internals.filterPresentation.tagDefinitions.value,
+  ...internals.filterPresentation.activeDynamicDefinitions.value
+]);
+const dynamicSessionDefinition = computed(
+  () => internals.filterPresentation.dynamicSessionDefinition.value
+);
+function getFilterLabel(definition) {
+  return getFilterLabelText({ label: definition.label });
+}
+</script>
+
+<template>
+  <div
+    v-if="
+  visibleDefinitions.length || internals.filterPresentation.dormantDynamicDefinitions.value.length || internals.filters.hasActiveUiFilters.value
+"
+    :class="mergeDataListUiClass('contents', void 0, dataListUi.ui.value.filterTags?.ui?.root)"
+  >
+    <component
+      :is="resolveFilterTagComponent(definition)"
+      v-for="definition in visibleDefinitions"
+      :key="definition.key"
+      :definition="definition"
+      :dynamic="
+  internals.filterPresentation.activeDynamicDefinitions.value.some(
+    (item) => item.key === definition.key
+  )
+"
+      @dismiss="internals.filterPresentation.releaseDynamicSession({ key: definition.key })"
+    >
+      <template v-if="$slots.filter" #trigger="scope">
+        <slot name="filter" v-bind="scope" :filter="definition" />
+      </template>
+    </component>
+
+    <component
+      :is="resolveFilterTagComponent(dynamicSessionDefinition)"
+      v-if="dynamicSessionDefinition"
+      :key="`dynamic-session:${dynamicSessionDefinition.key}`"
+      :definition="dynamicSessionDefinition"
+      dynamic
+      session
+      :activation-token="
+  internals.filterPresentation.getDynamicActivationToken({
+    key: dynamicSessionDefinition.key
+  })
+"
+      @dismiss="
+  internals.filterPresentation.releaseDynamicSession({ key: dynamicSessionDefinition.key })
+"
+      @session-closed="
+  internals.filterPresentation.releaseDynamicSession({ key: dynamicSessionDefinition.key })
+"
+    >
+      <template v-if="$slots.filter" #trigger="scope">
+        <slot name="filter" v-bind="scope" :filter="dynamicSessionDefinition" />
+      </template>
+    </component>
+
+    <DynamicFilterPicker
+      v-else-if="
+  props.showAdd && internals.filterPresentation.dormantDynamicDefinitions.value.length
+"
+      :definitions="internals.filterPresentation.dormantDynamicDefinitions.value"
+      :get-label="getFilterLabel"
+      :size="dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
+      :ui="{
+  trigger: dataListUi.ui.value.filterTags?.ui?.addTrigger
+}"
+      @select="internals.filterPresentation.activateDynamicFilter({ key: $event })"
+    >
+      <template v-if="$slots['add-filter-trigger']" #trigger="scope">
+        <slot name="add-filter-trigger" v-bind="scope" />
+      </template>
+    </DynamicFilterPicker>
+
+    <UButton
+      v-if="props.showClear && internals.filters.hasActiveUiFilters.value"
+      color="neutral"
+      variant="outline"
+      :size="dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
+      icon="i-lucide-x"
+      :ui="{
+  base: mergeDataListUiClass(
+    'shrink-0 border-dashed',
+    void 0,
+    dataListUi.ui.value.filterTags?.ui?.clearTrigger
+  )
+}"
+      @click="internals.filters.clearAllFilters()"
+    >
+      <slot name="clear-filter-label" />
+    </UButton>
+  </div>
+</template>

package/dist/runtime/table/components/filters/tags/FilterTagsBar.vue.d.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    showAdd?: boolean;
+    showClear?: boolean;
+};
+declare var __VLS_10: any, __VLS_22: any, __VLS_33: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    openState: boolean;
+    triggerProps: {
+        type: string;
+        'aria-expanded': boolean;
+    };
+}, __VLS_43: {};
+type __VLS_Slots = {} & {
+    filter?: (props: typeof __VLS_10) => any;
+} & {
+    filter?: (props: typeof __VLS_22) => any;
+} & {
+    'add-filter-trigger'?: (props: typeof __VLS_33) => any;
+} & {
+    'clear-filter-label'?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    showAdd: boolean;
+    showClear: boolean;
+}, {}, {}, {}, 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;
+    };
+};