nuxt-ui-tools 0.1.0 → 0.1.2

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    stageKey: string;
+    direction?: 'forward' | 'backward';
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    settled: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSettled?: (() => any) | undefined;
+}>, {
+    direction: "forward" | "backward";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,6 +2,7 @@ import type { TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     leadingIcon: string;
+    operator: TableFilterOperator;
     operatorLabel: string;
     operatorItems: Array<{
         label: string;
@@ -13,12 +14,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;
-    selectOperator: (value: TableFilterOperator) => any;
     activate: (operator: TableFilterOperator) => any;
+    requestMatchMode: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClear?: (() => any) | undefined;
-    onSelectOperator?: ((value: TableFilterOperator) => any) | undefined;
     onActivate?: ((operator: TableFilterOperator) => any) | undefined;
+    onRequestMatchMode?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/FilterTriggerTag.vue

@@ -1,23 +1,22 @@
 <script setup>
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import UButton from "@nuxt/ui/components/Button.vue";
-import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
 import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { mergeDataListUiClass } from "../../../utils";
-import FilterMatchModeButton from "./FilterMatchModeButton.vue";
 const props = defineProps({
   label: { type: String, required: true },
   leadingIcon: { type: String, required: true },
+  operator: { type: String, required: true },
   operatorLabel: { type: String, required: true },
   operatorItems: { type: Array, required: true },
   previewTags: { type: Array, required: false },
   previewSummary: { type: String, required: false },
   active: { type: Boolean, required: false }
 });
-const emit = defineEmits(["selectOperator", "activate", "clear"]);
+const emit = defineEmits(["activate", "requestMatchMode", "clear"]);
 const showMatchMode = computed(() => props.operatorItems.length > 1);
 const showOperatorPickerFirst = computed(() => !props.active && showMatchMode.value);
 const dataListUi = useDataListUi();
@@ -29,26 +28,15 @@ const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
   <div
     :class="mergeDataListUiClass('inline-flex min-w-0 max-w-full align-top', void 0, ui?.root)"
   >
-    <UDropdownMenu
-      v-if="showOperatorPickerFirst"
-      :items="[
-  operatorItems.map((item) => ({
-    label: item.label,
-    onSelect: () => {
-      emit('activate', item.value);
-    }
-  }))
-]"
-      :content="{ side: 'bottom', align: 'start', sideOffset: 6 }"
-      :ui="{ content: 'w-fit p-1 shadow-none' }"
-    >
+    <template v-if="showOperatorPickerFirst">
       <UButton
         color="neutral"
         :variant="props.active ? 'subtle' : 'outline'"
         :size="size"
-        :ui="{ base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger) }"
-        @pointerdown.stop
-        @click.stop
+        :ui="{
+  base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger)
+}"
+        @click.stop="emit('requestMatchMode')"
       >
         <span
           :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)"
@@ -57,14 +45,17 @@ const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
           <span class="truncate">{{ props.label }}</span>
         </span>
       </UButton>
-    </UDropdownMenu>
+    </template>
 
     <UButton
       v-else-if="!props.active"
       color="neutral"
       variant="outline"
       :size="size"
-      :ui="{ base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger) }"
+      :ui="{
+  base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger)
+}"
+      @click.stop="emit('activate', props.operator)"
     >
       <span :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)">
         <UIcon :name="props.leadingIcon" class="size-4 shrink-0 text-muted" />
@@ -78,6 +69,7 @@ const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
         variant="subtle"
         :size="size"
         :ui="{ base: mergeDataListUiClass('shrink-0', void 0, ui?.trigger) }"
+        @click.stop="emit('activate', props.operator)"
       >
         <span
           :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)"
@@ -87,18 +79,27 @@ const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
         </span>
       </UButton>
 
-      <FilterMatchModeButton
+      <UButton
         v-if="showMatchMode"
+        color="neutral"
+        variant="subtle"
+        :size="size"
         :label="props.operatorLabel"
-        :items="props.operatorItems"
-        @select="emit('selectOperator', $event)"
+        trailing-icon="i-lucide-chevron-down"
+        :ui="{
+  base: mergeDataListUiClass('shrink-0', void 0, ui?.operatorTrigger)
+}"
+        @click.stop="emit('requestMatchMode')"
       />
 
       <UButton
         color="neutral"
         variant="subtle"
         :size="size"
-        :ui="{ base: mergeDataListUiClass('min-w-0 max-w-full', void 0, ui?.value) }"
+        :ui="{
+  base: mergeDataListUiClass('min-w-0 max-w-full', void 0, ui?.value)
+}"
+        @click.stop="emit('activate', props.operator)"
       >
         <span class="flex min-w-0 items-center gap-2">
           <UBadge

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

@@ -2,6 +2,7 @@ import type { TableFilterOperator } from '../../../types/index.js';
 type __VLS_Props = {
     label: string;
     leadingIcon: string;
+    operator: TableFilterOperator;
     operatorLabel: string;
     operatorItems: Array<{
         label: string;
@@ -13,12 +14,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;
-    selectOperator: (value: TableFilterOperator) => any;
     activate: (operator: TableFilterOperator) => any;
+    requestMatchMode: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClear?: (() => any) | undefined;
-    onSelectOperator?: ((value: TableFilterOperator) => any) | undefined;
     onActivate?: ((operator: TableFilterOperator) => any) | undefined;
+    onRequestMatchMode?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -3,7 +3,7 @@ type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
     dynamic?: boolean;
     session?: boolean;
-    activationToken?: number;
+    embedded?: boolean;
 };
 declare var __VLS_10: {
     preview: import("../../../utils/index.js").FilterPreviewResult;

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

@@ -1,23 +1,31 @@
 <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 URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.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 { useTableFilterOptions } from "../../../composables/use-table-filter-options";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { resolveBooleanFilterUi, resolveFilterTriggerIcon } from "../../../utils";
+import {
+  mergeDataListUiClass,
+  resolveBooleanFilterUi,
+  resolveFilterTriggerIcon
+} from "../../../utils";
+import FilterPopoverShell from "../shared/FilterPopoverShell.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 }
 });
 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 searchQuery = ref("");
 const isSessionOpen = ref(false);
 const isContentReady = ref(false);
@@ -71,11 +79,10 @@ const radioValue = computed({
 });
 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,
   onOpen: initLocalState,
   onClose: () => {
     isContentReady.value = false;
@@ -84,7 +91,9 @@ const session = useFilterTagSession({
   onDismiss: () => emit("dismiss")
 });
 function initLocalState() {
-  const committedRule = internals.filters.getFilterState({ key: props.definition.key });
+  const committedRule = internals.filters.getFilterState({
+    key: props.definition.key
+  });
   if (committedRule?.value === true || committedRule?.value === false) {
     localValue.value = committedRule.value;
     return;
@@ -92,7 +101,7 @@ function initLocalState() {
   localValue.value = null;
 }
 function handleActivate() {
-  session.openWithLock();
+  session.open();
 }
 function handleContentMounted() {
   isContentReady.value = true;
@@ -115,11 +124,13 @@ function clearFilter() {
 </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"
+    :content-class="
+  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+"
+    @update-open="session.handleOpenChange"
   >
     <slot
       name="trigger"
@@ -135,6 +146,7 @@ function clearFilter() {
       <TableFilterTrigger
         :label="internals.filters.getFilterLabelText({ label: definition.label })"
         :leading-icon="resolveFilterTriggerIcon(definition)"
+        :operator="operator"
         operator-label="is"
         :operator-items="[]"
         :preview-tags="preview.tags"
@@ -146,21 +158,39 @@ function clearFilter() {
     </slot>
 
     <template #content>
-      <div class="w-fit max-w-[calc(100vw-1rem)] bg-default" @vue:mounted="handleContentMounted">
-        <div class="p-2">
+      <div
+        :class="
+  mergeDataListUiClass(
+    'w-fit max-w-[calc(100vw-1rem)] bg-default',
+    void 0,
+    dataListFilterUi?.editor
+  )
+"
+        @vue:mounted="handleContentMounted"
+      >
+        <div :class="mergeDataListUiClass('p-2', void 0, dataListFilterUi?.list)">
           <URadioGroup
             v-model="radioValue"
             :items="radioItems"
             color="neutral"
             variant="list"
+            :size="size"
             :ui="{
   root: 'w-full',
   fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
+  item: mergeDataListUiClass(
+    'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
+    void 0,
+    dataListFilterUi?.option
+  ),
   container: 'self-center pl-3',
   base: 'cursor-pointer',
   wrapper: 'min-w-0 flex-1 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
+  label: mergeDataListUiClass(
+    'w-full cursor-pointer text-sm text-default',
+    void 0,
+    dataListFilterUi?.optionLabel
+  )
 }"
           >
             <template #label="{ item }">
@@ -168,7 +198,13 @@ function clearFilter() {
                 <UIcon
                   v-if="typeof item.icon === 'string'"
                   :name="item.icon"
-                  class="size-4 shrink-0 text-muted"
+                  :class="
+  mergeDataListUiClass(
+    'size-4 shrink-0 text-muted',
+    void 0,
+    dataListFilterUi?.optionIcon
+  )
+"
                 />
 
                 <span class="min-w-0 flex-1 truncate">
@@ -178,7 +214,16 @@ function clearFilter() {
                   v-if="optionSource.isCountLoading.value"
                   class="ml-3 h-3.5 w-6 shrink-0"
                 />
-                <span v-else-if="item.count != null" class="ml-3 shrink-0 text-muted">
+                <span
+                  v-else-if="item.count != null"
+                  :class="
+  mergeDataListUiClass(
+    'ml-3 shrink-0 text-muted',
+    void 0,
+    dataListFilterUi?.optionCount
+  )
+"
+                >
                   {{ item.count }}
                 </span>
               </div>
@@ -188,24 +233,32 @@ function clearFilter() {
 
         <div
           v-if="filterUi.commitMode === 'manual'"
-          class="flex items-center justify-between border-t border-default p-2"
+          :class="
+  mergeDataListUiClass(
+    'flex items-center justify-between border-t border-default p-2',
+    void 0,
+    dataListFilterUi?.footer
+  )
+"
         >
           <UButton
             color="neutral"
             variant="ghost"
-            size="sm"
+            :size="size"
             :label="filterUi.actions.clear"
+            :ui="{ base: dataListFilterUi?.clear }"
             @click="clearFilter"
           />
           <UButton
             color="neutral"
             variant="subtle"
-            size="sm"
+            :size="size"
             :label="filterUi.actions.apply"
+            :ui="{ base: dataListFilterUi?.apply }"
             @click="applyFilter"
           />
         </div>
       </div>
     </template>
-  </UPopover>
+  </FilterPopoverShell>
 </template>

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

@@ -3,7 +3,7 @@ type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
     dynamic?: boolean;
     session?: boolean;
-    activationToken?: number;
+    embedded?: boolean;
 };
 declare var __VLS_10: {
     preview: import("../../../utils/index.js").FilterPreviewResult;

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

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