nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,16 +1,25 @@
 <script setup>
 import UPopover from "@nuxt/ui/components/Popover.vue";
 import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isBoolean, isNumber, isString, isNullish } from "../../../../shared/utils/predicate";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
 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";
+import { resolveDataListPopoverContentClass } from "../../../utils";
+import FilterMatchModeButton from "../shared/filter-match-mode-button.vue";
+import FilterOptionPickerContent from "../shared/filter-option-picker-content.vue";
+import FilterPanelChips from "./filter-panel-chips.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
+import FilterPanelInputTrigger from "./filter-panel-input-trigger.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 dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
 const searchQuery = ref("");
 const pendingOperator = ref(resolveInitialOperator());
 const isOpen = ref(false);
@@ -18,28 +27,52 @@ const selectedValues = computed(() => {
   const value = internals.filterPresentation.getPanelDraftFilterState({
     key: props.definition.key
   })?.value;
-  if (Array.isArray(value)) return value.filter(isPrimitiveValue);
+  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,
+  definition: props.definition,
   filters: internals.filters,
+  operator: pendingOperator,
   queryContent: internals.queryContent,
   schema: internals.schema,
+  searchQuery,
+  selectedValues,
   setSelectedValues
 });
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
 const operatorItems = computed(
   () => internals.filters.getFilterOperatorOptions({
     key: props.definition.key
   })
 );
+const chipLimit = computed(() => dataListUi.ui.value.filterPanel?.props?.chips ?? 8);
+const staticCount = computed(
+  () => Array.isArray(props.definition.source?.options) ? props.definition.source.options.length : Number.POSITIVE_INFINITY
+);
+const chips = computed(
+  () => chipLimit.value !== false && state.filterUi.value.presentation !== "tree" && staticCount.value <= chipLimit.value
+);
+const chipEntries = computed(
+  () => state.displayEntries.value.filter((entry) => !isNullish(entry.value)).map((entry) => ({
+    color: entry.color,
+    count: entry.count,
+    icon: entry.icon,
+    label: entry.label,
+    selected: Boolean(entry.selected),
+    value: entry.value
+  }))
+);
+const meta = computed(
+  () => selectedValues.value.length ? t("table.filters.preview.selected", { count: selectedValues.value.length }) : ""
+);
 function resolveInitialOperator() {
   const operator = internals.filterPresentation.getPanelFilterOperator({
     key: props.definition.key
@@ -52,18 +85,20 @@ function handleOperatorChange(operator) {
     internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
     return;
   }
-  if (!selectedValues.value.length) return;
+  if (!selectedValues.value.length) {
+    return;
+  }
   internals.filterPresentation.setPanelOptionFilterValues({
     key: props.definition.key,
-    values: selectedValues.value,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values: selectedValues.value
   });
 }
 function setSelectedValues(values) {
   internals.filterPresentation.setPanelOptionFilterValues({
     key: props.definition.key,
-    values,
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    values
   });
 }
 function handleSelectEntry(options) {
@@ -71,40 +106,59 @@ function handleSelectEntry(options) {
 }
 function handleToggleTreeEntry(entryId) {
   const entry = state.visibleTreeEntries.value.find((item) => item.id === entryId);
-  if (!entry) return;
+  if (!entry) {
+    return;
+  }
   state.toggleTreeEntry(entry);
 }
 function isPrimitiveValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
 <template>
   <FilterPanelFieldShell
     :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :meta="meta"
     :active="isActive"
+    :size="size"
+    :ui="ui"
   >
     <template #actions>
       <FilterMatchModeButton
         v-if="operatorItems.length > 1"
         :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is any of'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
     </template>
 
+    <FilterPanelChips
+      v-if="chips"
+      :entries="chipEntries"
+      :loading="state.optionSource.isLoading.value"
+      :count-loading="state.optionSource.isCountLoading.value"
+      :show-counts="state.optionSource.showCounts.value"
+      :ui="ui"
+      @toggle="state.toggleValue"
+    />
+
     <UPopover
+      v-else
       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'
+  content: resolveDataListPopoverContentClass('trigger', 'p-0 shadow-none')
 }"
     >
       <FilterPanelInputTrigger
         :value="state.triggerSummary.value"
-        :placeholder="state.filterUi.value.labels.searchPlaceholder"
+        :placeholder="t('table.filters.preview.empty')"
+        :size="size"
       />
 
       <template #content>
@@ -113,6 +167,7 @@ function isPrimitiveValue(value) {
           :flat-radio-value="state.flatRadioValue.value"
           :tree-radio-value="state.treeRadioValue.value"
           :state="state"
+          :size="size"
           @update:flat-radio-value="state.flatRadioValue.value = $event"
           @update:tree-radio-value="state.treeRadioValue.value = $event"
           @select-entry="handleSelectEntry"

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

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

@@ -1,13 +1,13 @@
-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";
+import BooleanFilterPanelField from "./boolean-filter-panel-field.vue";
+import DateFilterPanelField from "./date-filter-panel-field.vue";
+import NumberFilterPanelField from "./number-filter-panel-field.vue";
+import OptionFilterPanelField from "./option-filter-panel-field.vue";
+import TextFilterPanelField from "./text-filter-panel-field.vue";
 const FILTER_PANEL_COMPONENTS = {
-  option: OptionFilterPanelField,
   boolean: BooleanFilterPanelField,
   date: DateFilterPanelField,
   number: NumberFilterPanelField,
+  option: OptionFilterPanelField,
   text: TextFilterPanelField
 };
 export function resolveFilterPanelComponent(definition) {

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

@@ -1,6 +1,8 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
+    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/{TextFilterPanelField.vue → text-filter-panel-field.vue}

@@ -1,12 +1,15 @@
 <script setup>
 import UInput from "@nuxt/ui/components/Input.vue";
 import { computed, ref } from "vue";
+import { isNullish } from "../../../../shared/utils/predicate";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import { resolveTextFilterUi } 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());
@@ -21,18 +24,20 @@ const localValue = computed({
     const value = internals.filterPresentation.getPanelDraftFilterState({
       key: props.definition.key
     })?.value;
-    return value == null ? "" : String(value);
+    return isNullish(value) ? "" : String(value);
   },
   set: (value) => {
     internals.filterPresentation.setPanelScalarFilterValue({
       key: props.definition.key,
-      value: value.trim() || void 0,
-      operator: pendingOperator.value
+      operator: pendingOperator.value,
+      value: value.trim() || void 0
     });
   }
 });
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
 function resolveInitialOperator() {
   const operator = internals.filterPresentation.getPanelFilterOperator({
@@ -46,11 +51,13 @@ function handleOperatorChange(operator) {
     internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
     return;
   }
-  if (!localValue.value.trim()) return;
+  if (!localValue.value.trim()) {
+    return;
+  }
   internals.filterPresentation.setPanelScalarFilterValue({
     key: props.definition.key,
-    value: localValue.value.trim(),
-    operator: pendingOperator.value
+    operator: pendingOperator.value,
+    value: localValue.value.trim()
   });
 }
 </script>
@@ -59,12 +66,16 @@ function handleOperatorChange(operator) {
   <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 ?? 'contains'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
@@ -78,6 +89,7 @@ function handleOperatorChange(operator) {
       :autocomplete="filterUi.autocomplete"
       :highlight="filterUi.input.highlight"
       :fixed="filterUi.input.fixed"
+      :size="size"
       color="neutral"
       variant="outline"
       class="w-full"

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

@@ -1,6 +1,8 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
+    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/shared/{DynamicFilterPicker.d.vue.ts → dynamic-filter-picker.d.vue.ts}

@@ -9,7 +9,7 @@ type __VLS_Props = {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
-declare var __VLS_10: {
+declare var __VLS_9: {
     open: typeof open;
     close: typeof close;
     toggle: typeof toggle;
@@ -22,7 +22,7 @@ declare var __VLS_10: {
     };
 };
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_10) => any;
+    trigger?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;

package/dist/runtime/table/components/filters/shared/dynamic-filter-picker.vue

@@ -0,0 +1,327 @@
+<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, nextTick, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber, isNullish } from "../../../../shared/utils/predicate";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import {
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveFilterEditorSizeClasses,
+  resolveDataListPopoverContentClass,
+  resolveFilterTriggerIcon
+} from "../../../utils";
+import { resolveFilterTagComponent } from "../tags/registry";
+import FilterMatchModePanel from "./filter-match-mode-panel.vue";
+import FilterSearchablePanel from "./filter-searchable-panel.vue";
+import FilterStageTransition from "./filter-stage-transition.vue";
+const props = defineProps({
+  definitions: { type: Array, required: true },
+  sessionDefinition: { type: null, required: false },
+  getLabel: { type: Function, required: true },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select", "release"]);
+const { t } = useUiToolsLocale();
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const isOpen = ref(false);
+const searchQuery = ref("");
+const selectedKey = ref(null);
+const pendingOperator = ref();
+const stage = ref("picker");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
+let releaseAfterCommit = false;
+const size = computed(
+  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
+const pickerProps = computed(() => dataListUi.ui.value.addFilter?.props);
+const searchable = computed(() => {
+  const search = pickerProps.value?.search ?? 8;
+  return isNumber(search) ? props.definitions.length > search : search;
+});
+const triggerProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: size.value, variant: "ghost" },
+    dataListUi.ui.value.filterTags?.props?.addTrigger,
+    dataListUi.ui.value.addFilter?.props?.trigger
+  )
+);
+const selectedDefinition = computed(() => {
+  if (isNullish(selectedKey.value)) {
+    return void 0;
+  }
+  if (props.sessionDefinition?.key === selectedKey.value) {
+    return props.sessionDefinition;
+  }
+  return props.definitions.find((definition) => definition.key === selectedKey.value);
+});
+const operatorItems = computed(
+  () => isNullish(selectedKey.value) ? [] : internals.filters.getFilterOperatorOptions({ key: selectedKey.value })
+);
+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)
+  );
+});
+async function handleSelect(key) {
+  selectedKey.value = key;
+  searchQuery.value = "";
+  const items = internals.filters.getFilterOperatorOptions({ key });
+  if (items.length > 1) {
+    pendingOperator.value = internals.filters.getFilterOperator({ key });
+    stageDirection.value = "forward";
+    stageTransitioning.value = true;
+    stage.value = "match-mode";
+    return;
+  }
+  const defaultOperator = items[0]?.value;
+  if (!defaultOperator) {
+    return;
+  }
+  await openEditor(defaultOperator);
+}
+async function openEditor(operator) {
+  const key = selectedKey.value;
+  if (!key) {
+    return;
+  }
+  pendingOperator.value = operator;
+  emit("select", key);
+  await nextTick();
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
+}
+function handleFocusOutside(event) {
+  if (stageTransitioning.value) {
+    event.preventDefault();
+  }
+}
+function handleOpenChange(nextOpen) {
+  isOpen.value = nextOpen;
+  if (!nextOpen && !releaseAfterCommit) {
+    releaseSession();
+  }
+}
+function handleSessionClosed() {
+  isOpen.value = false;
+  releaseAfterCommit = true;
+  queueMicrotask(() => {
+    releaseSession();
+    releaseAfterCommit = false;
+  });
+}
+function goBack() {
+  stageTransitioning.value = true;
+  releaseSession();
+}
+function releaseSession() {
+  const key = selectedKey.value;
+  selectedKey.value = null;
+  pendingOperator.value = void 0;
+  searchQuery.value = "";
+  stage.value = "picker";
+  stageDirection.value = "backward";
+  if (key) {
+    emit("release", key);
+  }
+}
+function open() {
+  isOpen.value = true;
+}
+function close() {
+  isOpen.value = false;
+  releaseSession();
+}
+function toggle() {
+  if (isOpen.value) {
+    close();
+  } else {
+    open();
+  }
+}
+</script>
+
+<template>
+  <div class="contents">
+    <UPopover
+      :open="isOpen"
+      mode="click"
+      :content="{
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 8,
+  onFocusOutside: handleFocusOutside
+}"
+      :ui="{
+  content: resolveDataListPopoverContentClass(
+    'fit',
+    mergeDataListUiClass(
+      `${sizeClasses.editor} overflow-hidden p-0`,
+      void 0,
+      ui?.popoverContent
+    )
+  )
+}"
+      @update:open="handleOpenChange"
+    >
+      <slot
+        v-if="$slots.trigger"
+        name="trigger"
+        :open="open"
+        :close="close"
+        :toggle="toggle"
+        :open-state="isOpen"
+        :stage="stage"
+        :definition="selectedDefinition"
+        :trigger-props="{
+  type: 'button',
+  'aria-expanded': isOpen
+}"
+      />
+      <UButton
+        v-else
+        v-bind="triggerProps"
+        :icon="
+  selectedDefinition ? dataListUi.ui.value.filterTags?.props?.icon === false ? void 0 : resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'
+"
+        :label="
+  selectedDefinition ? getLabel(selectedDefinition) : triggerProps.label ?? t('table.controls.addFilter')
+"
+        :ui="{
+  base: mergeDataListUiClass(
+    `nut-dl-tag nut-dl-tag--add shrink-0 ${selectedDefinition ? '' : 'border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]'}`,
+    void 0,
+    ui?.trigger
+  ),
+  leadingIcon: 'size-[13px]'
+}"
+      />
+
+      <template #content>
+        <FilterStageTransition
+          :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
+          :direction="stageDirection"
+          @settled="stageTransitioning = false"
+        >
+          <div
+            v-if="stage === 'picker'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <div
+              v-if="pickerProps?.title !== false"
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-picker__title px-2.5 pt-2 pb-0.5 text-[11.5px] font-semibold text-muted',
+    void 0,
+    ui?.title
+  )
+"
+            >
+              {{ t("table.controls.addFilter") }}
+            </div>
+            <FilterSearchablePanel
+              v-model:search-query="searchQuery"
+              :searchable="searchable"
+              :autofocus="searchable"
+              :search-placeholder="t('table.controls.searchFilters')"
+              :show-empty="!filteredDefinitions.length"
+              :empty-label="t('table.controls.noMatchingFilters')"
+              max-height-class="max-h-72"
+              :size="size"
+              :ui="ui"
+            >
+              <button
+                v-for="definition in filteredDefinitions"
+                :key="definition.key"
+                type="button"
+                :class="
+  mergeDataListUiClass(
+    `flex min-w-0 items-center rounded-md text-left outline-none transition-colors hover:bg-elevated/70 focus-visible:ring-2 focus-visible:ring-primary/40 ${sizeClasses.option}`,
+    void 0,
+    ui?.option
+  )
+"
+                @click="handleSelect(definition.key)"
+              >
+                <UIcon
+                  :name="
+  pickerProps?.icon === 'kind' ? resolveFilterTriggerIcon(definition) : 'i-lucide-plus'
+"
+                  :class="
+  mergeDataListUiClass(
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
+    void 0,
+    ui?.optionIcon
+  )
+"
+                />
+                <span
+                  :class="
+  mergeDataListUiClass(
+    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
+    void 0,
+    ui?.optionLabel
+  )
+"
+                >
+                  {{ getLabel(definition) }}
+                </span>
+                <span
+                  :class="
+  mergeDataListUiClass(
+    'inline-flex shrink-0 items-center text-dimmed',
+    void 0,
+    ui?.optionTrailingIcon
+  )
+"
+                >
+                  <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
+                </span>
+              </button>
+            </FilterSearchablePanel>
+          </div>
+
+          <div
+            v-else-if="stage === 'match-mode'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <FilterMatchModePanel
+              :items="operatorItems"
+              :selected="pendingOperator"
+              :size="size"
+              :ui="ui"
+              @select="openEditor"
+            />
+          </div>
+
+          <component
+            :is="resolveFilterTagComponent(sessionDefinition)"
+            v-else-if="stage === 'editor' && sessionDefinition"
+            :definition="sessionDefinition"
+            dynamic
+            session
+            embedded
+            :initial-operator="pendingOperator"
+            @dismiss="handleSessionClosed"
+            @session-closed="handleSessionClosed"
+            @back="goBack"
+          />
+        </FilterStageTransition>
+      </template>
+    </UPopover>
+  </div>
+</template>