nuxt-ui-tools 0.1.0 → 0.1.2

package/dist/runtime/table/components/filters/tags/FilterTagsBar.vue.d.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/NumberFilterTag.d.vue.ts

@@ -1,9 +1,10 @@
-import type { TableNumberFilterDefinition } from '../../../types/index.js';
+import type { TableFilterOperator, TableNumberFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableNumberFilterDefinition;
     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/NumberFilterTag.vue

@@ -1,24 +1,38 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
-import UPopover from "@nuxt/ui/components/Popover.vue";
 import USlider from "@nuxt/ui/components/Slider.vue";
-import { computed, ref, toRef, watch } from "vue";
+import { computed, ref, watch } 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, resolveNumberFilterUi } from "../../../utils";
+import {
+  mergeDataListUiClass,
+  resolveFilterTriggerIcon,
+  resolveNumberFilterUi
+} 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 rangeValue = ref({ from: "", to: "" });
+const stage = ref("editor");
+const stageDirection = ref("forward");
+const stageTransitioning = ref(false);
 const preview = computed(
   () => internals.filters.getFilterPreview({
     key: props.definition.key
@@ -58,11 +72,10 @@ const sliderRangeValue = computed(() => [
   rangeValue.value.to === "" ? sliderBounds.value.max : Number(rangeValue.value.to)
 ]);
 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;
@@ -77,7 +90,9 @@ watch(
   }
 );
 function initLocalState() {
-  const value = internals.filters.getFilterState({ key: props.definition.key })?.value;
+  const value = internals.filters.getFilterState({
+    key: props.definition.key
+  })?.value;
   if (operator.value === "between") {
     if (value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date)) {
       rangeValue.value = {
@@ -95,16 +110,23 @@ 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 (filterUi.value.clearOnOperatorChange) {
-    internals.filters.clearFilter({ key: props.definition.key });
-  }
   localValue.value = "";
   rangeValue.value = { from: "", to: "" };
-  if (filterUi.value.reopenOnOperatorChange) handleActivate(op);
-  else pendingOperator.value = op;
+  pendingOperator.value = op;
+  stageDirection.value = "forward";
+  stageTransitioning.value = true;
+  stage.value = "editor";
 }
 function commitIfAuto() {
   if (filterUi.value.commitMode === "auto") applyFilter();
@@ -174,11 +196,14 @@ function resolveIncrementConfig(hideStepper) {
 </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"
@@ -194,128 +219,189 @@ function resolveIncrementConfig(hideStepper) {
       <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="min-w-[16rem] max-w-[calc(100vw-1rem)] bg-default">
-        <div v-if="operator === 'between'" class="grid gap-3 border-b border-default p-3">
+      <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-else
+          :class="
+  mergeDataListUiClass(
+    'min-w-[16rem] max-w-[calc(100vw-1rem)] bg-default',
+    void 0,
+    dataListFilterUi?.editor
+  )
+"
+        >
           <div
-            v-if="filterUi.range.display === 'inputs' || filterUi.range.display === 'inputs-slider'"
-            class="grid grid-cols-2 gap-2"
+            v-if="operator === 'between'"
+            :class="
+  mergeDataListUiClass(
+    'grid gap-3 border-b border-default p-3',
+    void 0,
+    dataListFilterUi?.inputs
+  )
+"
           >
-            <UInputNumber
-              :model-value="rangeValue.from === '' ? void 0 : Number(rangeValue.from)"
-              :placeholder="filterUi.range.inputs.fromPlaceholder"
-              :min="filterUi.min"
-              :max="filterUi.max"
-              :step="filterUi.step"
-              :format-options="filterUi.formatOptions"
-              :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
-              :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
-              :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
-              :ui="{
+            <div
+              v-if="
+  filterUi.range.display === 'inputs' || filterUi.range.display === 'inputs-slider'
+"
+              class="grid grid-cols-2 gap-2"
+            >
+              <UInputNumber
+                :model-value="rangeValue.from === '' ? void 0 : Number(rangeValue.from)"
+                :placeholder="filterUi.range.inputs.fromPlaceholder"
+                :min="filterUi.min"
+                :max="filterUi.max"
+                :step="filterUi.step"
+                :format-options="filterUi.formatOptions"
+                :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
+                :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+                :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+                :size="size"
+                :ui="{
   base: 'h-9 px-2',
   increment: 'size-7 rounded-md',
   decrement: 'size-7 rounded-md'
 }"
-              @update:model-value="updateRangeFrom"
-              @keydown.enter.prevent="applyFilter"
+                @update:model-value="updateRangeFrom"
+                @keydown.enter.prevent="applyFilter"
+              />
+
+              <UInputNumber
+                :model-value="rangeValue.to === '' ? void 0 : Number(rangeValue.to)"
+                :placeholder="filterUi.range.inputs.toPlaceholder"
+                :min="filterUi.min"
+                :max="filterUi.max"
+                :step="filterUi.step"
+                :format-options="filterUi.formatOptions"
+                :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
+                :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+                :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+                :size="size"
+                :ui="{
+  base: 'h-9 px-2',
+  increment: 'size-7 rounded-md',
+  decrement: 'size-7 rounded-md'
+}"
+                @update:model-value="updateRangeTo"
+                @keydown.enter.prevent="applyFilter"
+              />
+            </div>
+
+            <USlider
+              v-if="
+  filterUi.range.display === 'slider' || filterUi.range.display === 'inputs-slider'
+"
+              :model-value="sliderRangeValue"
+              :min="filterUi.range.slider.min ?? sliderBounds.min"
+              :max="filterUi.range.slider.max ?? sliderBounds.max"
+              :step="filterUi.range.slider.step ?? filterUi.step"
+              :min-steps-between-thumbs="filterUi.range.minGap"
+              :tooltip="filterUi.range.slider.showTooltip"
+              :class="dataListFilterUi?.slider"
+              @update:model-value="updateSliderRangeValue"
             />
+          </div>
 
+          <div
+            v-else
+            :class="
+  mergeDataListUiClass(
+    'grid gap-3 border-b border-default p-3',
+    void 0,
+    dataListFilterUi?.inputs
+  )
+"
+          >
             <UInputNumber
-              :model-value="rangeValue.to === '' ? void 0 : Number(rangeValue.to)"
-              :placeholder="filterUi.range.inputs.toPlaceholder"
+              v-if="
+  filterUi.scalar.display === 'input' || filterUi.scalar.display === 'input-slider'
+"
+              :model-value="scalarValue"
+              :placeholder="filterUi.scalar.input.placeholder"
               :min="filterUi.min"
               :max="filterUi.max"
               :step="filterUi.step"
               :format-options="filterUi.formatOptions"
-              :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
-              :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
-              :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+              :disable-wheel-change="filterUi.scalar.input.disableWheelChange"
+              :increment="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
+              :decrement="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
+              :size="size"
               :ui="{
   base: 'h-9 px-2',
   increment: 'size-7 rounded-md',
   decrement: 'size-7 rounded-md'
 }"
-              @update:model-value="updateRangeTo"
+              @update:model-value="updateScalarValue"
               @keydown.enter.prevent="applyFilter"
             />
-          </div>
-
-          <USlider
-            v-if="filterUi.range.display === 'slider' || filterUi.range.display === 'inputs-slider'"
-            :model-value="sliderRangeValue"
-            :min="filterUi.range.slider.min ?? sliderBounds.min"
-            :max="filterUi.range.slider.max ?? sliderBounds.max"
-            :step="filterUi.range.slider.step ?? filterUi.step"
-            :min-steps-between-thumbs="filterUi.range.minGap"
-            :tooltip="filterUi.range.slider.showTooltip"
-            @update:model-value="updateSliderRangeValue"
-          />
-        </div>
-
-        <div v-else class="grid gap-3 border-b border-default p-3">
-          <UInputNumber
-            v-if="filterUi.scalar.display === 'input' || filterUi.scalar.display === 'input-slider'"
-            :model-value="scalarValue"
-            :placeholder="filterUi.scalar.input.placeholder"
-            :min="filterUi.min"
-            :max="filterUi.max"
-            :step="filterUi.step"
-            :format-options="filterUi.formatOptions"
-            :disable-wheel-change="filterUi.scalar.input.disableWheelChange"
-            :increment="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
-            :decrement="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
-            :ui="{
-  base: 'h-9 px-2',
-  increment: 'size-7 rounded-md',
-  decrement: 'size-7 rounded-md'
-}"
-            @update:model-value="updateScalarValue"
-            @keydown.enter.prevent="applyFilter"
-          />
 
-          <USlider
-            v-if="
+            <USlider
+              v-if="
   filterUi.scalar.display === 'slider' || filterUi.scalar.display === 'input-slider'
 "
-            :model-value="scalarValue"
-            :min="filterUi.scalar.slider.min ?? sliderBounds.min"
-            :max="filterUi.scalar.slider.max ?? sliderBounds.max"
-            :step="filterUi.scalar.slider.step ?? filterUi.step"
-            :tooltip="filterUi.scalar.slider.showTooltip"
-            @update:model-value="updateSliderScalarValue"
-          />
-        </div>
+              :model-value="scalarValue"
+              :min="filterUi.scalar.slider.min ?? sliderBounds.min"
+              :max="filterUi.scalar.slider.max ?? sliderBounds.max"
+              :step="filterUi.scalar.slider.step ?? filterUi.step"
+              :tooltip="filterUi.scalar.slider.showTooltip"
+              :class="dataListFilterUi?.slider"
+              @update:model-value="updateSliderScalarValue"
+            />
+          </div>
 
-        <div
-          v-if="filterUi.commitMode === 'manual'"
-          class="flex items-center justify-between border-t border-default p-2"
-        >
-          <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
+            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/NumberFilterTag.vue.d.ts

@@ -1,9 +1,10 @@
-import type { TableNumberFilterDefinition } from '../../../types/index.js';
+import type { TableFilterOperator, TableNumberFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableNumberFilterDefinition;
     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/OptionFilterTag.d.vue.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;