nuxt-ui-tools 0.1.0 → 0.1.1

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

@@ -3,36 +3,47 @@ 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 { computed, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import {
   formatFilterDate,
   getDateRangeValue,
+  mergeDataListUiClass,
   resolveFilterTriggerIcon,
   resolveDateFilterRangeCalendarPanels,
   resolveDateFilterRangePresets,
   resolveDateFilterScalarPresets,
   resolveDateFilterUi
 } 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 dataListUi = useDataListUi();
+const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
+const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
 const { t } = useUiToolsLocale();
 const isMobile = useMediaQuery("(max-width: 639px)");
-const pendingOperator = ref();
+const pendingOperator = ref(props.initialOperator);
 const localDate = shallowRef(void 0);
 const localRangeStart = shallowRef(void 0);
 const localRangeEnd = shallowRef(void 0);
+const stage = ref("editor");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
 const preview = computed(
   () => internals.filters.getFilterPreview({
     key: props.definition.key
@@ -88,11 +99,10 @@ const rangeSummary = computed(() => {
   return t("table.filters.preview.empty");
 });
 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;
@@ -108,7 +118,15 @@ watch(
 );
 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 initLocalState() {
   const rule = internals.filters.getFilterState({ key: props.definition.key });
@@ -156,14 +174,13 @@ function clearFilter() {
   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;
+  pendingOperator.value = op;
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
 }
 function applyScalarPreset(value) {
   localDate.value = toCalendarDate(value);
@@ -236,13 +253,18 @@ function areSameCalendarDay(left, right) {
 </script>
 
 <template>
-  <UPopover
+  <FilterPopoverShell
     :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"
+    :embedded="embedded"
+    :transitioning="stageTransitioning"
+    :content-class="
+  mergeDataListUiClass(
+    'max-w-[calc(100vw-1rem)] overflow-hidden p-0',
+    void 0,
+    dataListFilterUi?.popoverContent
+  )
+"
+    @update-open="session.handleOpenChange"
   >
     <slot
       name="trigger"
@@ -258,203 +280,275 @@ function areSameCalendarDay(left, right) {
       <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="bg-default"
-        :class="operator === 'between' ? 'w-[min(100vw-1rem,48rem)]' : 'w-[min(100vw-1rem,22rem)]'"
+      <FilterStageTransition
+        :stage-key="stage"
+        :direction="stageDirection"
+        @settled="stageTransitioning = false"
       >
-        <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'
+        <FilterMatchModePanel
+          v-if="stage === 'match-mode'"
+          :items="operatorItems"
+          :selected="operator"
+          :size="size"
+          :ui="dataListFilterUi"
+          @select="handleOperatorChange"
+        />
+        <div
+          v-else
+          :class="
+  mergeDataListUiClass(
+    `bg-default ${operator === 'between' ? 'w-[min(100vw-1rem,48rem)]' : 'w-[min(100vw-1rem,22rem)]'}`,
+    void 0,
+    dataListFilterUi?.editor
+  )
 "
-          >
+        >
+          <div v-if="operator === 'between'">
             <div
-              v-if="rangePresets.length"
-              class="border-b border-default p-3"
-              :class="filterUi.range.presetsPlacement === 'side' ? 'lg:border-r lg:border-b-0' : ''"
+              class="grid gap-0"
+              :class="
+  filterUi.range.presetsPlacement === 'side' ? 'lg:grid-cols-[14rem_minmax(0,1fr)]' : 'grid-cols-1'
+"
             >
-              <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'"
+                v-if="rangePresets.length"
+                :class="
+  mergeDataListUiClass(
+    `border-b border-default p-3 ${filterUi.range.presetsPlacement === 'side' ? 'lg:border-r lg:border-b-0' : ''}`,
+    void 0,
+    dataListFilterUi?.presets
+  )
+"
               >
-                <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)"
+                <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'"
                 >
-                  {{ preset.label }}
-                </UButton>
+                  <UButton
+                    v-for="preset in rangePresets"
+                    :key="preset.label"
+                    :variant="isRangePresetActive(preset.value) ? 'subtle' : 'ghost'"
+                    :size="size"
+                    :class="
+  mergeDataListUiClass(
+    'justify-start rounded-lg px-3',
+    void 0,
+    dataListFilterUi?.preset
+  )
+"
+                    @click="applyRangePreset(preset.value)"
+                  >
+                    {{ preset.label }}
+                  </UButton>
+                </div>
               </div>
-            </div>
 
-            <div v-if="filterUi.range.display !== 'inputs'" class="p-3">
-              <UCalendar
-                :model-value="calendarRange"
-                range
-                :number-of-months="rangeCalendarPanels"
-                :paged-navigation="
+              <div
+                v-if="filterUi.range.display !== 'inputs'"
+                :class="mergeDataListUiClass('p-3', void 0, dataListFilterUi?.calendar)"
+              >
+                <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',
+                  :fixed-weeks="filterUi.range.calendar.fixedWeeks"
+                  :maximum-days="filterUi.range.calendar.maxRangeDays"
+                  :ui="{
   header: 'px-1 pb-2',
   body: 'gap-3',
   grid: 'gap-y-1',
   cell: 'p-0.5',
-  cellTrigger: 'rounded-md'
+  cellTrigger: 'rounded-md',
+  root: mergeDataListUiClass(
+    'border-0 bg-transparent p-0',
+    void 0,
+    dataListFilterUi?.calendar
+  )
 }"
-                @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 }}
+                  @update:model-value="setCalendarRange"
+                />
               </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
+              v-if="filterUi.range.display !== 'calendar'"
+              :class="
+  mergeDataListUiClass(
+    'border-t border-default px-3 py-3',
+    void 0,
+    dataListFilterUi?.inputs
+  )
+"
+            >
+              <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="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 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"
+                    :size="size"
+                    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"
+                    :size="size"
+                    class="w-full"
+                    @update:model-value="setRangeEnd"
+                  />
+                </div>
               </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)"
+          <div
+            v-else
+            :class="mergeDataListUiClass('grid gap-2 p-3', void 0, dataListFilterUi?.inputs)"
+          >
+            <div
+              v-if="scalarPresets.length"
+              :class="
+  mergeDataListUiClass('flex flex-wrap gap-1.5', void 0, dataListFilterUi?.presets)
+"
             >
-              {{ preset.label }}
-            </UButton>
-          </div>
+              <UButton
+                v-for="preset in scalarPresets"
+                :key="preset.label"
+                variant="ghost"
+                :size="size"
+                :class="
+  mergeDataListUiClass('rounded-lg px-3', void 0, dataListFilterUi?.preset)
+"
+                @click="applyScalarPreset(preset.value)"
+              >
+                {{ preset.label }}
+              </UButton>
+            </div>
 
-          <UInputDate
-            v-if="
+            <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"
-          />
+              :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"
+              :size="size"
+              class="w-full"
+              @update:model-value="setSingleDate"
+            />
 
-          <UCalendar
-            v-if="
+            <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',
+              :model-value="localDate"
+              :fixed-weeks="filterUi.scalar.calendar.fixedWeeks"
+              :ui="{
+  root: mergeDataListUiClass(
+    'border-0 bg-transparent p-0',
+    void 0,
+    dataListFilterUi?.calendar
+  ),
   header: 'px-1 pb-2',
   grid: 'gap-y-1',
   cell: 'p-0.5',
   cellTrigger: 'rounded-md'
 }"
-            @update:model-value="setSingleDate"
-          />
-        </div>
+              @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">
+          <div
+            v-if="filterUi.commitMode === 'manual'"
+            :class="
+  mergeDataListUiClass(
+    `flex items-center border-t border-default p-2 ${operator === 'between' ? 'justify-between' : 'justify-end'}`,
+    void 0,
+    dataListFilterUi?.footer
+  )
+"
+          >
             <UButton
-              v-if="operator !== 'between'"
+              v-if="operator === 'between'"
               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"
-              :label="filterUi.actions.apply"
-              @click="applyFilter"
-            />
+            <div class="flex items-center gap-2">
+              <UButton
+                v-if="operator !== 'between'"
+                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>
-      </div>
+      </FilterStageTransition>
     </template>
-  </UPopover>
+  </FilterPopoverShell>
 </template>

package/dist/runtime/table/components/filters/tags/DateFilterTag.vue.d.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;

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

@@ -1,25 +1,26 @@
+import type { TableUiFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
 };
-declare var __VLS_10: any, __VLS_22: any, __VLS_33: {
+declare var __VLS_10: any, __VLS_22: {
     open: () => void;
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;
     };
-}, __VLS_43: {};
+}, __VLS_32: {};
 type __VLS_Slots = {} & {
     filter?: (props: typeof __VLS_10) => any;
 } & {
-    filter?: (props: typeof __VLS_22) => any;
+    'add-filter-trigger'?: (props: typeof __VLS_22) => any;
 } & {
-    'add-filter-trigger'?: (props: typeof __VLS_33) => any;
-} & {
-    'clear-filter-label'?: (props: typeof __VLS_43) => any;
+    'clear-filter-label'?: (props: typeof __VLS_32) => 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;

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

@@ -40,49 +40,34 @@ function getFilterLabel(definition) {
   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 })
+  internals.filterPresentation.releaseDynamicSession({
+    key: definition.key
+  })
 "
     >
       <template v-if="$slots.filter" #trigger="scope">
-        <slot name="filter" v-bind="scope" :filter="dynamicSessionDefinition" />
+        <slot name="filter" v-bind="scope" :filter="definition" />
       </template>
     </component>
 
     <DynamicFilterPicker
-      v-else-if="
-  props.showAdd && internals.filterPresentation.dormantDynamicDefinitions.value.length
+      v-if="
+  props.showAdd && (internals.filterPresentation.dormantDynamicDefinitions.value.length || dynamicSessionDefinition)
 "
       :definitions="internals.filterPresentation.dormantDynamicDefinitions.value"
+      :session-definition="dynamicSessionDefinition"
       :get-label="getFilterLabel"
-      :size="dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value"
+      :size="
+  dataListUi.ui.value.addFilter?.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
+"
       :ui="{
+  ...dataListUi.ui.value.addFilter?.ui,
   trigger: dataListUi.ui.value.filterTags?.ui?.addTrigger
 }"
       @select="internals.filterPresentation.activateDynamicFilter({ key: $event })"
+      @release="internals.filterPresentation.releaseDynamicSession({ key: $event })"
     >
       <template v-if="$slots['add-filter-trigger']" #trigger="scope">
         <slot name="add-filter-trigger" v-bind="scope" />