nuxt-ui-tools 0.1.0 → 0.1.1

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

@@ -1,28 +1,43 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
-import UPopover from "@nuxt/ui/components/Popover.vue";
-import { computed, ref, toRef } from "vue";
+import { computed, ref } from "vue";
 import { useRangeSelect } from "../../../../shared";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useOptionFilterEditorState } from "../../../composables/use-option-filter-editor-state";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { resolveFilterTriggerIcon } from "../../../utils";
+import {
+  mergeDataListUiClass,
+  resolveFilterEditorSizeClasses,
+  resolveFilterTriggerIcon
+} from "../../../utils";
+import FilterMatchModePanel from "../shared/FilterMatchModePanel.vue";
 import FilterOptionPickerContent from "../shared/FilterOptionPickerContent.vue";
+import FilterPopoverShell from "../shared/FilterPopoverShell.vue";
+import FilterStageTransition from "../shared/FilterStageTransition.vue";
 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 }
+  embedded: { type: Boolean, required: false },
+  initialOperator: { type: String, required: false }
 });
 const emit = defineEmits(["dismiss", "sessionClosed"]);
 const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
+const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
 const searchQuery = ref("");
 const isSessionOpen = ref(false);
 const isContentReady = ref(false);
-const pendingOperator = ref();
+const pendingOperator = ref(props.initialOperator);
 const localSelectedValues = ref([]);
 const pinnedValues = ref(/* @__PURE__ */ new Set());
+const stage = ref("editor");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
 const operator = computed(() => {
   const next = pendingOperator.value ?? internals.filters.getFilterOperator({
     key: props.definition.key
@@ -43,11 +58,10 @@ const state = useOptionFilterEditorState({
 });
 const session = useFilterTagSession({
   isOpen: isSessionOpen,
-  activationToken: toRef(props, "activationToken"),
   session: props.session,
   dynamic: props.dynamic,
+  embedded: props.embedded,
   hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
-  onActivated: () => handleActivate(operator.value),
   onOpen: () => {
     isContentReady.value = false;
     initLocalState();
@@ -109,7 +123,9 @@ const restRangeSelect = useRangeSelect({
   onToggle: state.toggleValue
 });
 function initLocalState() {
-  const committedRule = internals.filters.getFilterState({ key: props.definition.key });
+  const committedRule = internals.filters.getFilterState({
+    key: props.definition.key
+  });
   const values = Array.isArray(committedRule?.value) ? committedRule.value.filter(
     (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean"
   ) : committedRule?.value != null && (typeof committedRule.value === "string" || typeof committedRule.value === "number" || typeof committedRule.value === "boolean") ? [committedRule.value] : [];
@@ -119,19 +135,27 @@ function initLocalState() {
 }
 function handleActivate(op) {
   pendingOperator.value = op;
-  session.openWithLock();
+  stage.value = "editor";
+  stageDirection.value = "backward";
+  session.open();
+}
+function handleRequestMatchMode() {
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "match-mode";
+  session.open();
 }
 function handleOperatorChange(op) {
-  if (state.filterUi.value.clearOnOperatorChange)
-    internals.filters.clearFilter({ key: props.definition.key });
   localSelectedValues.value = [];
   pinnedValues.value = /* @__PURE__ */ new Set();
   state.resetExpandedIds();
   searchQuery.value = "";
   pinnedRangeSelect.reset();
   restRangeSelect.reset();
-  if (state.filterUi.value.reopenOnOperatorChange) handleActivate(op);
-  else pendingOperator.value = op;
+  pendingOperator.value = op;
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
 }
 function setSelectedValues(values) {
   localSelectedValues.value = values;
@@ -183,11 +207,14 @@ function handleContentMounted() {
 </script>
 
 <template>
-  <UPopover
+  <FilterPopoverShell
     :open="session.isOpen.value"
-    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
-    :ui="{ content: 'w-fit overflow-hidden p-0 shadow-none' }"
-    @update:open="session.handleOpenChange"
+    :embedded="embedded"
+    :transitioning="stageTransitioning"
+    :content-class="
+  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+"
+    @update-open="session.handleOpenChange"
   >
     <slot
       name="trigger"
@@ -203,52 +230,87 @@ function handleContentMounted() {
       <TableFilterTrigger
         :label="internals.filters.getFilterLabelText({ label: definition.label })"
         :leading-icon="resolveFilterTriggerIcon(definition)"
+        :operator="operator"
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-tags="preview.tags"
         :preview-summary="preview.summary"
         :active="preview.active"
-        @select-operator="handleOperatorChange"
         @activate="handleActivate"
+        @request-match-mode="handleRequestMatchMode"
         @clear="clearFilter"
       />
     </slot>
 
     <template #content>
-      <div class="w-fit max-w-[calc(100vw-1rem)] bg-default" @vue:mounted="handleContentMounted">
-        <FilterOptionPickerContent
-          v-model:search-query="searchQuery"
-          :flat-radio-value="state.flatRadioValue.value"
-          :tree-radio-value="state.treeRadioValue.value"
-          :state="state"
-          :sections="listSections"
-          @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"
+      <FilterStageTransition
+        :stage-key="stage"
+        :direction="stageDirection"
+        @settled="stageTransitioning = false"
+      >
+        <FilterMatchModePanel
+          v-if="stage === 'match-mode'"
+          :items="operatorItems"
+          :selected="operator"
+          :size="size"
+          :ui="dataListFilterUi"
+          @select="handleOperatorChange"
         />
-
         <div
-          v-if="state.filterUi.value.commitMode === 'manual'"
-          class="flex items-center justify-between border-t border-default p-2"
+          v-else
+          :class="
+  mergeDataListUiClass(
+    `${sizeClasses.editor} max-w-[calc(100vw-1rem)] bg-default`,
+    void 0,
+    dataListFilterUi?.editor
+  )
+"
+          @vue:mounted="handleContentMounted"
         >
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :label="state.filterUi.value.actions.clear"
-            @click="clearFilter"
-          />
-          <UButton
-            color="neutral"
-            variant="subtle"
-            size="sm"
-            :label="state.filterUi.value.actions.apply"
-            @click="applyFilter"
+          <FilterOptionPickerContent
+            v-model:search-query="searchQuery"
+            :flat-radio-value="state.flatRadioValue.value"
+            :tree-radio-value="state.treeRadioValue.value"
+            :state="state"
+            :sections="listSections"
+            :size="size"
+            :ui="dataListFilterUi"
+            @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"
           />
+
+          <div
+            v-if="state.filterUi.value.commitMode === 'manual'"
+            :class="
+  mergeDataListUiClass(
+    `flex items-center justify-between border-t border-default ${sizeClasses.footer}`,
+    void 0,
+    dataListFilterUi?.footer
+  )
+"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :size="size"
+              :label="state.filterUi.value.actions.clear"
+              :ui="{ base: dataListFilterUi?.clear }"
+              @click="clearFilter"
+            />
+            <UButton
+              color="neutral"
+              variant="subtle"
+              :size="size"
+              :label="state.filterUi.value.actions.apply"
+              :ui="{ base: dataListFilterUi?.apply }"
+              @click="applyFilter"
+            />
+          </div>
         </div>
-      </div>
+      </FilterStageTransition>
     </template>
-  </UPopover>
+  </FilterPopoverShell>
 </template>

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

@@ -1,9 +1,10 @@
-import type { TableOptionFilterDefinition } from '../../../types/index.js';
+import type { TableFilterOperator, TableOptionFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableOptionFilterDefinition;
     dynamic?: boolean;
     session?: boolean;
-    activationToken?: number;
+    embedded?: boolean;
+    initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
     preview: import("../../../utils/index.js").FilterPreviewResult;

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

@@ -1,9 +1,10 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { TableFilterOperator, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
     dynamic?: boolean;
     session?: boolean;
-    activationToken?: number;
+    embedded?: boolean;
+    initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
     preview: import("../../../utils/index.js").FilterPreviewResult;

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

@@ -1,22 +1,32 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
-import UPopover from "@nuxt/ui/components/Popover.vue";
-import { computed, ref, toRef } from "vue";
+import { computed, ref } from "vue";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { resolveFilterTriggerIcon, resolveTextFilterUi } from "../../../utils";
+import { mergeDataListUiClass, resolveFilterTriggerIcon, resolveTextFilterUi } from "../../../utils";
+import FilterMatchModePanel from "../shared/FilterMatchModePanel.vue";
+import FilterPopoverShell from "../shared/FilterPopoverShell.vue";
+import FilterStageTransition from "../shared/FilterStageTransition.vue";
 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 }
+  embedded: { type: Boolean, required: false },
+  initialOperator: { type: String, required: false }
 });
 const emit = defineEmits(["dismiss", "sessionClosed"]);
 const internals = useTableInternals();
-const pendingOperator = ref();
+const dataListUi = useDataListUi();
+const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
+const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const pendingOperator = ref(props.initialOperator);
 const localValue = ref("");
+const stage = ref("editor");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
 const preview = computed(
   () => internals.filters.getFilterPreview({
     key: props.definition.key
@@ -40,15 +50,16 @@ const operatorItems = computed(
 );
 const filterUi = computed(() => resolveTextFilterUi(props.definition, operator.value));
 function initLocalState() {
-  const value = internals.filters.getFilterState({ key: props.definition.key })?.value;
+  const value = internals.filters.getFilterState({
+    key: props.definition.key
+  })?.value;
   localValue.value = value == null ? "" : String(value);
 }
 const session = useFilterTagSession({
-  activationToken: toRef(props, "activationToken"),
   session: props.session,
   dynamic: props.dynamic,
+  embedded: props.embedded,
   hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
-  onActivated: () => handleActivate(operator.value),
   onOpen: initLocalState,
   onClose: () => {
     pendingOperator.value = void 0;
@@ -58,7 +69,15 @@ const session = useFilterTagSession({
 });
 function handleActivate(op) {
   pendingOperator.value = op;
-  session.openWithLock();
+  stage.value = "editor";
+  stageDirection.value = "backward";
+  session.open();
+}
+function handleRequestMatchMode() {
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "match-mode";
+  session.open();
 }
 function applyFilter() {
   const op = pendingOperator.value;
@@ -75,12 +94,11 @@ function clearFilter() {
   session.close();
 }
 function handleOperatorChange(op) {
-  if (filterUi.value.clearOnOperatorChange) {
-    internals.filters.clearFilter({ key: props.definition.key });
-  }
   localValue.value = "";
-  if (filterUi.value.reopenOnOperatorChange) handleActivate(op);
-  else pendingOperator.value = op;
+  pendingOperator.value = op;
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
 }
 function handleValueUpdate(value) {
   localValue.value = value == null ? "" : String(value);
@@ -95,13 +113,14 @@ function handleValueUpdate(value) {
 </script>
 
 <template>
-  <UPopover
+  <FilterPopoverShell
     :open="session.isOpen.value"
-    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
-    :ui="{
-  content: 'w-fit overflow-hidden p-0 shadow-none'
-}"
-    @update:open="session.handleOpenChange"
+    :embedded="embedded"
+    :transitioning="stageTransitioning"
+    :content-class="
+  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+"
+    @update-open="session.handleOpenChange"
   >
     <slot
       name="trigger"
@@ -117,55 +136,99 @@ function handleValueUpdate(value) {
       <TableFilterTrigger
         :label="internals.filters.getFilterLabelText({ label: definition.label })"
         :leading-icon="resolveFilterTriggerIcon(definition)"
+        :operator="operator"
         :operator-label="operatorLabel"
         :operator-items="operatorItems"
         :preview-summary="preview.summary"
         :active="preview.active"
-        @select-operator="handleOperatorChange"
         @activate="handleActivate"
+        @request-match-mode="handleRequestMatchMode"
         @clear="clearFilter"
       />
     </slot>
 
     <template #content>
-      <div class="w-fit max-w-[calc(100vw-1rem)] bg-default">
-        <div class="border-b border-default p-2">
-          <UInput
-            :model-value="localValue"
-            :type="filterUi.inputType"
-            :icon="filterUi.leadingIcon"
-            :placeholder="filterUi.placeholder"
-            :autocomplete="filterUi.autocomplete"
-            :autofocus="filterUi.input.autofocus"
-            :highlight="filterUi.input.highlight"
-            :fixed="filterUi.input.fixed"
-            class="w-[min(13rem,calc(100vw-3rem))] max-w-full"
-            :ui="{ base: 'rounded-md' }"
-            @update:model-value="handleValueUpdate"
-            @keydown.enter.prevent="applyFilter"
-          />
-        </div>
-
+      <FilterStageTransition
+        :stage-key="stage"
+        :direction="stageDirection"
+        @settled="stageTransitioning = false"
+      >
+        <FilterMatchModePanel
+          v-if="stage === 'match-mode'"
+          :items="operatorItems"
+          :selected="operator"
+          :size="size"
+          :ui="dataListFilterUi"
+          @select="handleOperatorChange"
+        />
         <div
-          v-if="filterUi.commitMode === 'manual'"
-          class="flex items-center justify-between border-t border-default p-2"
+          v-else
+          :class="
+  mergeDataListUiClass(
+    'w-fit max-w-[calc(100vw-1rem)] bg-default',
+    void 0,
+    dataListFilterUi?.editor
+  )
+"
         >
-          <UButton
-            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
+            :class="
+  mergeDataListUiClass(
+    'border-b border-default p-2',
+    void 0,
+    dataListFilterUi?.inputs
+  )
+"
+          >
+            <UInput
+              :model-value="localValue"
+              :type="filterUi.inputType"
+              :icon="filterUi.leadingIcon"
+              :placeholder="filterUi.placeholder"
+              :autocomplete="filterUi.autocomplete"
+              :autofocus="filterUi.input.autofocus"
+              :highlight="filterUi.input.highlight"
+              :fixed="filterUi.input.fixed"
+              :size="size"
+              class="w-[min(13rem,calc(100vw-3rem))] max-w-full"
+              :ui="{
+  root: dataListFilterUi?.search,
+  base: dataListFilterUi?.searchInput
+}"
+              @update:model-value="handleValueUpdate"
+              @keydown.enter.prevent="applyFilter"
+            />
+          </div>
+
+          <div
+            v-if="filterUi.commitMode === 'manual'"
+            :class="
+  mergeDataListUiClass(
+    'flex items-center justify-between border-t border-default p-2',
+    void 0,
+    dataListFilterUi?.footer
+  )
+"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :size="size"
+              :label="filterUi.actions.clear"
+              :ui="{ base: dataListFilterUi?.clear }"
+              @click="clearFilter"
+            />
+            <UButton
+              color="neutral"
+              variant="subtle"
+              :size="size"
+              :label="filterUi.actions.apply"
+              :ui="{ base: dataListFilterUi?.apply }"
+              @click="applyFilter"
+            />
+          </div>
         </div>
-      </div>
+      </FilterStageTransition>
     </template>
-  </UPopover>
+  </FilterPopoverShell>
 </template>

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

@@ -1,9 +1,10 @@
-import type { TableTextFilterDefinition } from '../../../types/index.js';
+import type { TableFilterOperator, TableTextFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableTextFilterDefinition;
     dynamic?: boolean;
     session?: boolean;
-    activationToken?: number;
+    embedded?: boolean;
+    initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
     preview: import("../../../utils/index.js").FilterPreviewResult;

package/dist/runtime/table/components/grid/GridRenderer.vue

@@ -162,7 +162,7 @@ function unwrapElement(value) {
       </div>
     </div>
 
-    <div v-else :class="mergeDataListUiClass('px-0 py-1', void 0, ui?.flow)">
+    <div v-else :class="mergeDataListUiClass(void 0, void 0, ui?.flowRoot)">
       <div
         v-if="showInitialLoading"
         :class="mergeDataListUiClass('grid gap-4', void 0, ui?.loading)"

package/dist/runtime/table/components/layout/TableFooter.vue

@@ -80,6 +80,7 @@ function formatCount(value) {
           <span>{{ t("table.footer.rowsPerPage") }}</span>
 
           <UDropdownMenu
+            :size="controlSize"
             :items="pageSizeItems"
             :content="{ align: 'end', side: 'top', sideOffset: 10 }"
           >

package/dist/runtime/table/components/table/TableRenderer.vue

@@ -42,7 +42,7 @@ watch(tableEmpty, (isEmpty) => {
 
 <template>
   <div
-    :class="mergeDataListUiClass('relative overflow-hidden', void 0, ui?.root)"
+    :class="mergeDataListUiClass('relative overflow-hidden', void 0, ui?.wrapper)"
     :style="height ? { height } : void 0"
   >
     <UTable
@@ -79,18 +79,31 @@ watch(tableEmpty, (isEmpty) => {
       loading-animation="carousel"
       :class="height ? 'h-full' : void 0"
       :ui="{
-  root: ui?.base,
+  root: ui?.root,
+  base: ui?.base,
   caption: ui?.caption,
   thead: mergeDataListUiClass(
     'group/table-head after:inset-x-0 after:bottom-0 after:w-full after:z-[2] after:pointer-events-none',
     void 0,
     ui?.thead
   ),
-  tbody: ui?.tbody,
+  tbody: mergeDataListUiClass(
+    'border-b border-default [&>tr]:hover:bg-elevated/50',
+    void 0,
+    ui?.tbody
+  ),
   tfoot: ui?.tfoot,
-  tr: mergeDataListUiClass('transition-colors', void 0, ui?.tr),
+  tr: mergeDataListUiClass(
+    'border-b border-default transition-colors last:border-b',
+    void 0,
+    ui?.tr
+  ),
   th: ui?.th,
-  td: ui?.td,
+  td: mergeDataListUiClass(
+    '[&[data-pinned=left]]:bg-inherit [&[data-pinned=right]]:bg-inherit',
+    void 0,
+    ui?.td
+  ),
   separator: ui?.separator,
   empty: ui?.empty,
   loading: ui?.loading
@@ -142,7 +155,3 @@ watch(tableEmpty, (isEmpty) => {
     </div>
   </div>
 </template>
-
-<style scoped>
-:deep([data-slot=root]){scrollbar-color:color-mix(in oklab,var(--ui-border) 82%,transparent) transparent;scrollbar-width:thin}:deep([data-slot=root]:hover){scrollbar-color:color-mix(in oklab,var(--ui-border-accented) 92%,transparent) transparent}:deep([data-slot=root]::-webkit-scrollbar){height:10px;width:10px}:deep([data-slot=root]::-webkit-scrollbar-track){background:transparent}:deep([data-slot=root]::-webkit-scrollbar-thumb){background:color-mix(in oklab,var(--ui-border) 86%,transparent);background-clip:padding-box;border:2px solid transparent;border-radius:999px}:deep([data-slot=root]:hover::-webkit-scrollbar-thumb){background:color-mix(in oklab,var(--ui-border-accented) 80%,transparent);background-clip:padding-box}:deep([data-slot=root]::-webkit-scrollbar-thumb:hover){background:color-mix(in oklab,var(--ui-border-accented) 95%,transparent);background-clip:padding-box}:deep([data-slot=root]::-webkit-scrollbar-corner){background:transparent}:deep(th[data-pinned]){backdrop-filter:blur(6px) saturate(120%);background-color:color-mix(in oklab,var(--ui-bg) 94%,transparent)!important;background-image:none!important}:deep(td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg) 96%,transparent)!important;background-image:none!important}:deep(tbody tr[data-selected=true] td){background-color:color-mix(in oklab,var(--ui-bg-elevated) 88%,transparent)!important;color:var(--ui-text)!important}:deep(tbody tr:hover td){background-color:color-mix(in oklab,var(--ui-bg-elevated) 18%,transparent)!important}:deep(tr[data-selected=true] td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg-elevated) 96%,transparent)!important;color:var(--ui-text)!important}:deep(tbody tr:hover td[data-pinned]){backdrop-filter:none;background-color:color-mix(in oklab,var(--ui-bg-elevated) 68%,transparent)!important}:deep(td[data-pinned=left]),:deep(th[data-pinned=left]){box-shadow:12px 0 18px -18px color-mix(in oklab,var(--ui-border-accented) 80%,transparent)}:deep(td[data-pinned=right]),:deep(th[data-pinned=right]){box-shadow:-12px 0 18px -18px color-mix(in oklab,var(--ui-border-accented) 80%,transparent)}:deep(thead th){border-bottom-color:var(--ui-border)!important}:deep(thead tr[data-slot=separator]){background-color:var(--ui-border)!important;border-color:var(--ui-border)!important}:deep(tbody td){border-bottom-color:color-mix(in oklab,var(--ui-border) 34%,transparent)!important}
-</style>

package/dist/runtime/table/composables/use-filter-tag-session.d.ts

@@ -1,11 +1,10 @@
 import { type Ref } from 'vue';
 export interface UseFilterTagSessionParams {
     isOpen?: Ref<boolean>;
-    activationToken?: Ref<number | undefined>;
     session?: boolean;
     dynamic?: boolean;
+    embedded?: boolean;
     hasCommittedState: () => boolean;
-    onActivated: () => void;
     onOpen: () => void;
     onClose: () => void;
     onSessionClosed: () => void;
@@ -13,7 +12,7 @@ export interface UseFilterTagSessionParams {
 }
 export declare function useFilterTagSession(options: UseFilterTagSessionParams): {
     isOpen: Ref<boolean, boolean>;
-    openWithLock: () => void;
-    handleOpenChange: (open: boolean) => void;
+    open: () => void;
+    handleOpenChange: (nextOpen: boolean) => void;
     close: () => void;
 };