v-nuxt-ui 0.1.35 → 0.1.36

package/dist/runtime/components/table/query/where/index.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, useTemplateRef, nextTick } from "vue";
+import { computed, ref, nextTick } from "vue";
 import { useTableOpr } from "#v/composables/table/useTableOpr";
 import { useToast } from "@nuxt/ui/composables";
-import TableQueryWhereSimple from "#v/components/table/query/where/simple/index.vue";
+import TableQueryWhereSimpleItem from "#v/components/table/query/where/simple/item/index.vue";
 import TableQueryWhereNewer from "#v/components/table/query/where/Newer.vue";
 const props = defineProps({
   whereOptions: { type: Array, required: true },
@@ -23,7 +23,19 @@ const selectedWhereFields = computed(() => {
 const unselectedWhereFields = computed(() => {
   return props.whereOptions.map((option) => option.field).filter((field) => !selectedWhereFields.value.includes(field));
 });
-const simpleWhereQueryRef = useTemplateRef("simpleWhereQuery");
+const itemRefMap = ref(/* @__PURE__ */ new Map());
+function setItemRef(field, el) {
+  if (el && "focus" in el && typeof el.focus === "function") {
+    itemRefMap.value.set(field, el);
+  }
+}
+const onRemoveFilter = (field) => {
+  const updatedItems = props.whereQuery?.items?.filter((query) => query.field !== field) ?? [];
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: updatedItems
+  });
+};
 const onNewField = (field) => {
   const option = props.whereOptions.find((option2) => option2.field === field);
   if (!option || !option.type) {
@@ -44,7 +56,10 @@ const onNewField = (field) => {
     }]
   });
   nextTick(() => {
-    simpleWhereQueryRef.value?.focusItem(field);
+    const item = itemRefMap.value.get(field);
+    if (item) {
+      item.focus();
+    }
   });
 };
 const isWhereQueryEmpty = computed(() => {
@@ -52,7 +67,12 @@ const isWhereQueryEmpty = computed(() => {
   (props.whereQuery?.items?.filter((query) => props.whereOptions.find((option) => option.field === query.field)).length ?? 0) === 0 && (props.whereQuery?.groups?.length ?? 0) === 0;
 });
 const focusField = (field) => {
-  return simpleWhereQueryRef.value?.focusItem(field) ?? false;
+  const item = itemRefMap.value.get(field);
+  if (item) {
+    item.focus();
+    return true;
+  }
+  return false;
 };
 defineExpose({ focusField });
 </script>
@@ -61,16 +81,27 @@ defineExpose({ focusField });
   <div class="flex items-start gap-2 pl-4 pr-2.5 py-2.5">
     <!-- conditions -->
     <div class="flex flex-wrap items-center gap-2.5">
-      <TableQueryWhereSimple
-        v-if="!isWhereQueryEmpty"
-        v-bind="props"
-        ref="simpleWhereQuery"
-        :items="whereQuery?.items"
-        @update-items="(newItems) => onUpdateWhereQuery({
-  ...whereQuery,
-  items: newItems
-})"
-      />
+      <!-- key如果是field，那么field修改后，不能聚焦后面的组件，所以这里的key用idx代替 -->
+      <template v-if="!isWhereQueryEmpty">
+        <TableQueryWhereSimpleItem
+          v-for="(item, idx) in whereQuery?.items"
+          :ref="(el) => setItemRef(item.field, el)"
+          :key="idx"
+          :where-query-item="item"
+          :options="whereOptions"
+          :fetching="fetching"
+          :trigger-fetching="() => triggerFetching(true)"
+          @remove="onRemoveFilter"
+          @update:where-query-item="(newWhereQueryItem) => {
+  const updatedItems = [...props.whereQuery?.items ?? []];
+  updatedItems[idx] = newWhereQueryItem;
+  onUpdateWhereQuery({
+    ...whereQuery,
+    items: updatedItems
+  });
+}"
+        />
+      </template>
       <TableQueryWhereNewer
         :options="whereOptions"
         :unselected-fields="unselectedWhereFields"

package/dist/runtime/components/table/query/where/simple/item/ColumnPicker.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick } from "vue";
 import { useTableOpr } from "#v/composables/table/useTableOpr";
 import ButtonDropdown from "#v/components/button/Dropdown.vue";
+import { tableWhereQueryItemIconMap } from "#v/constants";
 const props = defineProps({
   options: { type: Array, required: true },
   disabled: { type: Boolean, required: false },
@@ -16,6 +17,7 @@ const items = computed(() => {
       items: props.options.map((option) => ({
         label: option.label,
         value: option.field,
+        icon: tableWhereQueryItemIconMap.get(option.type) || "field",
         onSelect: () => {
           modelValue.value = option.field;
           nextTick(() => {
@@ -43,9 +45,8 @@ const modelValue = computed({
     };
   }
 });
-const currentLabel = computed(() => {
-  const option = props.options.find((opt) => opt.field === modelValue.value);
-  return option?.label || "";
+const currentOption = computed(() => {
+  return props.options.find((opt) => opt.field === modelValue.value);
 });
 </script>
 
@@ -58,8 +59,12 @@ const currentLabel = computed(() => {
       :size="'sm'"
       :color="'neutral'"
       :variant="'outline'"
-      :label="currentLabel"
+      :label="currentOption?.label || '\u9009\u62E9\u5B57\u6BB5'"
       :disabled="disabled"
+      :icon="tableWhereQueryItemIconMap.get(currentOption?.type ?? 'unknown') || 'field'"
+      :ui="{
+  label: 'font-bold'
+}"
     />
   </ButtonDropdown>
 </template>

package/dist/runtime/components/table/query/where/simple/item/OprPicker.vue

@@ -58,9 +58,9 @@ const currentLabel = computed(() => {
     :groups="items"
   >
     <UButton
-      :size="'sm'"
-      :color="'neutral'"
-      :variant="'outline'"
+      size="sm"
+      color="neutral"
+      variant="outline"
       :label="currentLabel"
       :disabled="disabled"
     />

package/dist/runtime/components/table/query/where/simple/item/opr/AsyncSelect.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed, useTemplateRef } from "vue";
+import { ref, computed, useTemplateRef, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
 import { useFetching } from "#v/composables/useBoolean";
 import { isEmptyString } from "#v/utils";
-import ButtonDropdown from "#v/components/button/Dropdown.vue";
 const props = defineProps({
   label: { type: String, required: true },
   disabled: { type: Boolean, required: false },
@@ -57,7 +56,7 @@ const items = computed(() => {
     value: p[props.valueField]
   })).filter((p) => p.label && !isEmptyString(String(p.value)));
 });
-const commandPaletteValue = computed({
+const inputMenuValue = computed({
   get() {
     return whereQueryItem.value.value;
   },
@@ -80,26 +79,16 @@ const commandPaletteValue = computed({
     };
   }
 });
-const commandPaletteGroups = computed(() => {
-  const options = [
-    {
-      id: "fields",
-      items: items.value,
-      ignoreFilter: true
-    }
-  ];
-  return options;
-});
-const onFetchItems = async (searchTerm) => {
+const onFetchItems = async (searchTerm2) => {
   try {
     startFetching();
     const query = {
       pagination: { pageNum: 1, pageSize: 10 },
       whereQuery: { items: [] }
     };
-    if (!isEmptyString(searchTerm)) {
+    if (!isEmptyString(searchTerm2)) {
       props.searchFields.forEach((field) => {
-        query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm, andOr: "or" });
+        query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm2, andOr: "or" });
       });
     }
     const result = await props.listApi(defu(query, props.extraQuery));
@@ -110,45 +99,53 @@ const onFetchItems = async (searchTerm) => {
     endFetching();
   }
 };
+const searchTerm = ref("");
 const onDebounceFetchItems = useDebounceFn(onFetchItems, 512);
-const dropdownBtnRef = useTemplateRef("dropdownBtn");
+watch(searchTerm, (newVal) => {
+  onDebounceFetchItems(newVal);
+}, { immediate: false });
+const inputMenuRef = useTemplateRef("inputMenu");
 defineExpose({
   focus: () => {
-    dropdownBtnRef.value?.focus();
+    inputMenuRef.value?.inputRef.focus();
   }
 });
 </script>
 
 <template>
-  <ButtonDropdown
-    ref="dropdownBtn"
-    v-model="commandPaletteValue"
-    :groups="commandPaletteGroups"
+  <UInputMenu
+    ref="inputMenu"
+    v-model:search-term="searchTerm"
+    v-model="inputMenuValue"
+    :items="items"
+    :placeholder="placeholder"
     multiple
-    enable-footer-toolbar
-    @open="() => onFetchItems('')"
-    @search="onDebounceFetchItems"
-  >
-    <UButton
-      size="sm"
-      color="neutral"
-      variant="outline"
-    >
-      <div v-if="!whereQueryItem?.value || whereQueryItem.value.length === 0">
-        --
-      </div>
-      <div v-else-if="whereQueryItem.value.length <= 2" class="flex items-center gap-1">
-        {{ whereQueryItem.value.map((value2) => items.find((item) => item.value === value2)?.label || value2).join(", ") }}
-      </div>
-      <div v-else>
-        <!-- 打印前两项,后面+1代替 -->
-        <div class="flex items-center gap-1">
-          <div v-for="value in whereQueryItem.value.slice(0, 2)" :key="value">
-            {{ items.find((item) => item.value === value)?.label || value }}
-          </div>
-          <span>+{{ whereQueryItem.value.length - 2 }}</span>
-        </div>
-      </div>
-    </UButton>
-  </ButtonDropdown>
+    color="neutral"
+    delete-icon="i-lucide-trash"
+    value-key="value"
+    clear
+    clear-icon="i-lucide-circle-x"
+    icon=""
+    :loading="fetching"
+    :disabled="disabled"
+    open-on-focus
+    trailing
+    :ui="{
+  root: 'rounded-none min-w-32',
+  // TODO: 不然有rounded，这个应该是个bug
+  content: 'min-w-fit',
+  tagsInput: 'min-w-4 w-0'
+}"
+    :content="{
+  align: 'start'
+}"
+    @update:open="(opened) => {
+  if (opened) {
+    onFetchItems(searchTerm);
+  }
+}"
+    @update:model-value="() => {
+  inputMenuRef?.inputRef.focus();
+}"
+  />
 </template>

package/dist/runtime/components/table/query/where/simple/item/opr/DatePicker.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { computed, useTemplateRef, nextTick, ref } from "vue";
-import { now, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from "@internationalized/date";
+import { now } from "@internationalized/date";
 import dayjs from "dayjs";
 import { useDate } from "#v/composables/useDate";
 import { useApp } from "#v/composables/useApp";
-import { dateFormat, TIME_ZONE } from "#v/constants";
+import { TIME_ZONE } from "#v/constants";
 import DatePickerInput from "#v/components/date-picker/Input.vue";
 defineProps({
   disabled: { type: Boolean, required: false }
@@ -55,177 +55,183 @@ const calendarValue = computed({
     whereQueryItem.value = { ...whereQueryItem.value, value: updatedValue };
   }
 });
-const createDateStrComputed = (getValue, setValue) => computed({
-  get: getValue,
+const displayDateFormat = "YYYY-MM-DD";
+const startDateStrValueInput = useTemplateRef("startDateStrValueInput");
+const endDateStrValueInput = useTemplateRef("endDateStrValueInput");
+const startDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(calendarValue.value?.start)?.format(displayDateFormat) ?? void 0;
+  },
   set(newValue) {
     if (!newValue) {
-      setValue(void 0);
+      calendarValue.value = { ...calendarValue.value, start: void 0 };
       return;
     }
-    const formattedDayjs = dayjs(newValue, dateFormat, true);
+    const formattedDayjs = dayjs(newValue, displayDateFormat, true);
     if (formattedDayjs.isValid()) {
-      setValue(useDate().dayjsToDateValue(formattedDayjs));
+      calendarValue.value = {
+        ...calendarValue.value,
+        start: useDate().dayjsToDateValue(formattedDayjs)
+      };
     }
   }
 });
-const startDateStrValueInput = useTemplateRef("startDateStrValueInput");
-const startDateStrValue = createDateStrComputed(
-  () => useDate().dateValueToDayjs(calendarValue.value?.start)?.format(dateFormat) ?? void 0,
-  (start) => {
-    calendarValue.value = { ...calendarValue.value, start };
-  }
-);
-const endDateStrValue = createDateStrComputed(
-  () => useDate().dateValueToDayjs(calendarValue.value?.end)?.format(dateFormat) ?? void 0,
-  (end) => {
-    calendarValue.value = { ...calendarValue.value, end };
+const endDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(calendarValue.value?.end)?.format(displayDateFormat) ?? void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      calendarValue.value = { ...calendarValue.value, end: void 0 };
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, displayDateFormat, true);
+    if (formattedDayjs.isValid()) {
+      calendarValue.value = {
+        ...calendarValue.value,
+        end: useDate().dayjsToDateValue(formattedDayjs)
+      };
+    }
   }
-);
+});
 const singleDateStrValueInput = useTemplateRef("singleDateStrValueInput");
-const singleDateStrValue = createDateStrComputed(
-  () => useDate().dateValueToDayjs(calendarValue.value)?.format(dateFormat) || void 0,
-  (date) => {
-    calendarValue.value = date;
+const singleDateStrValue = computed({
+  get() {
+    return useDate().dateValueToDayjs(calendarValue.value)?.format(displayDateFormat) || void 0;
+  },
+  set(newValue) {
+    if (!newValue) {
+      calendarValue.value = null;
+      return;
+    }
+    const formattedDayjs = dayjs(newValue, displayDateFormat, true);
+    if (formattedDayjs.isValid()) {
+      calendarValue.value = useDate().dayjsToDateValue(formattedDayjs);
+    }
   }
-);
-const dateStrInputFocus = () => {
+});
+const popoverOpen = ref(false);
+const onOpenCalendar = () => {
+  popoverOpen.value = true;
+};
+const onCloseCalendar = () => {
+  popoverOpen.value = false;
+};
+const focusStartInput = () => {
   nextTick(() => {
-    const input = isRangeOpr.value ? startDateStrValueInput : singleDateStrValueInput;
-    input.value?.focus();
+    if (isRangeOpr.value) {
+      startDateStrValueInput.value?.focus();
+    } else {
+      singleDateStrValueInput.value?.focus();
+    }
   });
 };
-const popoverOpen = ref(false);
 defineExpose({
   focus: () => {
-    popoverOpen.value = true;
-    dateStrInputFocus();
+    focusStartInput();
   }
 });
+const date = useDate();
 const dateRangeShortcuts = [
-  {
-    label: "\u672C\u5468",
-    dateFn: () => {
-      const today = now(TIME_ZONE);
-      return {
-        start: startOfWeek(today, "zh-CN", "mon"),
-        end: endOfWeek(today, "zh-CN", "mon")
-      };
-    }
-  },
-  {
-    label: "\u672C\u6708",
-    dateFn: () => {
-      const today = now(TIME_ZONE);
-      return {
-        start: startOfMonth(today),
-        end: endOfMonth(today)
-      };
-    }
-  },
-  {
-    label: "\u4E0A\u5468",
-    dateFn: () => {
-      const today = now(TIME_ZONE);
-      const lastWeek = today.subtract({ weeks: 1 });
-      return {
-        start: startOfWeek(lastWeek, "zh-CN", "mon"),
-        end: endOfWeek(lastWeek, "zh-CN", "mon")
-      };
-    }
-  },
-  {
-    label: "\u4E0A\u6708",
-    dateFn: () => {
-      const today = now(TIME_ZONE);
-      const lastMonth = today.subtract({ months: 1 });
-      return {
-        start: startOfMonth(lastMonth),
-        end: endOfMonth(lastMonth)
-      };
-    }
-  }
+  date.lastWeekDateShortcut,
+  date.lastMonthDateShortcut,
+  date.currentWeekDateShortcut,
+  date.currentMonthDateShortcut
 ];
-const isValueEmpty = computed(() => {
-  if (isNoCalendarOpr.value) return false;
-  const value = whereQueryItem.value.value;
-  if (isRangeOpr.value) {
-    return value === null || value?.start === null && value?.end === null;
-  }
-  return value === null || value === "";
-});
-const displayValue = computed(() => {
-  if (isValueEmpty.value) return "";
-  if (isRangeOpr.value) {
-    const range = calendarValue.value;
-    const start = useDate().dateValueToDayjs(range?.start)?.format(dateFormat) || "";
-    const end = useDate().dateValueToDayjs(range?.end)?.format(dateFormat) || "";
-    return `${start} ~ ${end}`;
-  }
-  return useDate().dateValueToDayjs(calendarValue.value)?.format(dateFormat) || "";
-});
 </script>
 
 <template>
   <UPopover
     v-model:open="popoverOpen"
+    :dismissible="false"
     :content="{
   align: 'start',
-  onCloseAutoFocus: (e) => e.preventDefault()
+  onCloseAutoFocus: (e) => e.preventDefault(),
+  onOpenAutoFocus: (e) => e.preventDefault()
 }"
   >
-    <UButton size="sm" color="neutral" variant="outline">
-      {{ isValueEmpty ? "--" : displayValue }}
-    </UButton>
+    <!-- 输入框直接暴露 -->
+    <template v-if="isNoCalendarOpr" />
 
-    <template #content>
-      <div class="p-3 flex flex-col gap-2">
-        <UFieldGroup v-if="isRangeOpr" :orientation="app.isMobile.value ? 'vertical' : 'horizontal'">
-          <DatePickerInput
-            ref="startDateStrValueInput"
-            v-model:value="startDateStrValue"
-            placeholder="YYYY/MM/DD 开始日期"
-            :disabled="disabled"
-          />
-          <DatePickerInput
-            ref="endDateStrValueInput"
-            v-model:value="endDateStrValue"
-            placeholder="YYYY/MM/DD 结束日期"
-            :disabled="disabled"
-          />
-        </UFieldGroup>
+    <template v-else-if="isRangeOpr">
+      <!-- 必须加这个div，不然第一个输入框无法正确渲染 -->
+      <div />
+      <DatePickerInput
+        ref="startDateStrValueInput"
+        v-model:value="startDateStrValue"
+        icon=""
+        input-class="w-32"
+        placeholder="YYYY-MM-DD"
+        @focus="onOpenCalendar"
+        @blur="onCloseCalendar"
+      />
+      <UBadge variant="outline" color="neutral">
+        ~
+      </UBadge>
+      <DatePickerInput
+        ref="endDateStrValueInput"
+        v-model:value="endDateStrValue"
+        icon=""
+        input-class="w-32"
+        placeholder="YYYY-MM-DD"
+        @focus="onOpenCalendar"
+        @blur="onCloseCalendar"
+      />
+    </template>
 
-        <DatePickerInput
-          v-else
-          ref="singleDateStrValueInput"
-          v-model:value="singleDateStrValue"
-          placeholder="YYYY/MM/DD 日期"
-          :disabled="disabled"
-        />
+    <template v-else>
+      <div />
+      <DatePickerInput
+        ref="singleDateStrValueInput"
+        v-model:value="singleDateStrValue"
+        icon=""
+        input-class="w-32"
+        placeholder="YYYY-MM-DD"
+        @focus="onOpenCalendar"
+        @blur="onCloseCalendar"
+      />
+    </template>
 
+    <template #content>
+      <div
+        class="p-3 flex flex-col gap-2"
+        @mousedown.prevent
+      >
         <UCalendar
           v-if="!isNoCalendarOpr"
           :model-value="calendarValue"
           :range="isRangeOpr"
           size="sm"
+          variant="subtle"
           :disabled="disabled"
           :number-of-months="app.isMobile.value || !isRangeOpr ? 1 : 2"
           @update:model-value="(newValue) => calendarValue = newValue ?? null"
         />
 
-        <div v-if="isRangeOpr" class="ml-auto">
-          <UFieldGroup>
-            <UButton
-              v-for="shortcut in dateRangeShortcuts"
-              :key="shortcut.label"
-              :label="shortcut.label"
-              size="xs"
-              color="neutral"
-              variant="outline"
-              :disabled="disabled"
-              @click="calendarValue = shortcut.dateFn()"
-            />
-          </UFieldGroup>
-        </div>
+        <UFieldGroup class="ml-auto">
+          <UButton
+            v-for="shortcut in isRangeOpr ? dateRangeShortcuts : []"
+            :key="shortcut.label"
+            :label="shortcut.label"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            :disabled="disabled"
+            :tabindex="-1"
+            @click="calendarValue = shortcut.dateFn()"
+          />
+          <UButton
+            v-if="!isRangeOpr"
+            label="今天"
+            size="xs"
+            color="neutral"
+            variant="outline"
+            :tabindex="-1"
+            @click="() => {
+  calendarValue = now(TIME_ZONE);
+}"
+          />
+        </UFieldGroup>
       </div>
     </template>
   </UPopover>

package/dist/runtime/components/table/query/where/simple/item/opr/Select.d.vue.ts

@@ -1,8 +1,10 @@
-import type { SelectOption, WhereQueryItem } from '#v/types';
+import type { WhereQueryItem } from '#v/types';
+import type { InputMenuItem, InputMenuProps } from '@nuxt/ui';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         disabled?: boolean;
-        items: SelectOption[];
+        items: InputMenuItem[];
+        placeholder?: InputMenuProps["placeholder"];
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {