v-nuxt-ui 0.2.33 → 0.3.0

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

@@ -85,41 +85,22 @@ const whereQueryWithoutInitValues = computed(() => {
     return !defaultKeys.includes(field);
   }) ?? [];
 });
-const whereQuerySectionExtraDataKey = "__whereQuerySection";
 function getBaseItemSection(item) {
   return props.whereOptions.find((opt) => opt.field === item.field)?.preferred === false ? "other" : "preferred";
 }
-function getItemSectionOverride(item) {
-  if (!item.extraData || typeof item.extraData !== "object" || Array.isArray(item.extraData)) return void 0;
-  const section = item.extraData[whereQuerySectionExtraDataKey];
-  return section === "preferred" || section === "other" ? section : void 0;
-}
 function getItemSection(item) {
-  return getItemSectionOverride(item) ?? getBaseItemSection(item);
+  const section = item.whereQuerySection;
+  return section === "preferred" || section === "other" ? section : getBaseItemSection(item);
 }
 function isPreferredItem(item) {
   return getItemSection(item) === "preferred";
 }
 function setItemSection(item, section) {
-  const baseSection = getBaseItemSection(item);
-  if (item.extraData && (typeof item.extraData !== "object" || Array.isArray(item.extraData))) {
-    return item;
-  }
-  const extraData = item.extraData ? { ...item.extraData } : {};
-  if (section === baseSection) {
-    const { [whereQuerySectionExtraDataKey]: _section, ...restExtraData } = extraData;
-    return {
-      ...item,
-      extraData: Object.keys(restExtraData).length > 0 ? restExtraData : void 0
-    };
-  } else {
-    ;
-    extraData[whereQuerySectionExtraDataKey] = section;
+  if (section === getBaseItemSection(item)) {
+    const { whereQuerySection: _omit, ...rest } = item;
+    return rest;
   }
-  return {
-    ...item,
-    extraData: Object.keys(extraData).length > 0 ? extraData : void 0
-  };
+  return { ...item, whereQuerySection: section };
 }
 const preferredItems = computed(
   () => whereQueryWithoutInitValues.value.filter(isPreferredItem)
@@ -133,18 +114,33 @@ watch([preferredItems, otherItems], () => {
   preferredDndItems.value = [...preferredItems.value];
   otherDndItems.value = [...otherItems.value];
 }, { immediate: true });
-function onDndEnd() {
+function updateWhereQuerySections(preferred, other) {
   const defaultKeys = getDefaultKeys();
   const initItems = props.whereQuery?.items?.filter((q) => defaultKeys.includes(q.field)) ?? [];
   props.onUpdateWhereQuery({
     ...props.whereQuery,
     items: [
       ...initItems,
-      ...preferredDndItems.value.map((item) => setItemSection(item, "preferred")),
-      ...otherDndItems.value.map((item) => setItemSection(item, "other"))
+      ...preferred.map((item) => setItemSection(item, "preferred")),
+      ...other.map((item) => setItemSection(item, "other"))
     ]
   });
 }
+function onDndEnd() {
+  updateWhereQuerySections(preferredDndItems.value, otherDndItems.value);
+}
+function onMoveItemSection(field, section) {
+  const currentPreferredItems = [...preferredDndItems.value];
+  const currentOtherItems = [...otherDndItems.value];
+  const sourceItems = section === "preferred" ? currentOtherItems : currentPreferredItems;
+  const item = sourceItems.find((item2) => item2.field === field);
+  if (!item) return;
+  const nextPreferredItems = section === "preferred" ? [...currentPreferredItems, item] : currentPreferredItems.filter((item2) => item2.field !== field);
+  const nextOtherItems = section === "other" ? [...currentOtherItems, item] : currentOtherItems.filter((item2) => item2.field !== field);
+  preferredDndItems.value = nextPreferredItems;
+  otherDndItems.value = nextOtherItems;
+  updateWhereQuerySections(nextPreferredItems, nextOtherItems);
+}
 function onUpdateWhereQueryItem(field, newWhereQueryItem) {
   const items = props.whereQuery?.items ?? [];
   const realIdx = items.findIndex((query) => query.field === field);
@@ -172,7 +168,22 @@ const onClearValues = () => {
   });
 };
 const onResetAll = () => {
-  props.onUpdateWhereQuery(props.defaultWhereQuery);
+  const currentItems = props.whereQuery?.items ?? [];
+  const currentFields = new Set(currentItems.map((item) => item.field));
+  const missingOptions = props.whereOptions.filter((opt) => !opt.initHide && !currentFields.has(opt.field));
+  const newItems = missingOptions.map((opt) => ({
+    field: opt.field,
+    opr: opt.defaultOpr ?? useTableOpr().getDefaultOprByType(opt.type),
+    value: null,
+    custom: opt.custom
+  }));
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: [
+      ...currentItems.map((item) => ({ ...item, value: null })),
+      ...newItems
+    ]
+  });
 };
 const onFillMissingFields = () => {
   const currentFields = new Set((props.whereQuery?.items ?? []).map((item) => item.field));
@@ -200,8 +211,8 @@ const onRemoveAllFields = () => {
   });
 };
 const moreActions = computed(() => [
-  { label: "\u8865\u5168\u5B57\u6BB5", icon: "i-lucide-list-plus", onSelect: onFillMissingFields },
-  { label: "\u5220\u9664\u6240\u6709\u5B57\u6BB5", icon: "i-lucide-trash-2", onSelect: onRemoveAllFields }
+  { label: "\u8865\u5168\u5168\u90E8\u5B57\u6BB5", icon: "i-lucide-list-plus", onSelect: onFillMissingFields },
+  { label: "\u6E05\u7A7A\u5168\u90E8\u5B57\u6BB5", icon: "i-lucide-trash-2", onSelect: onRemoveAllFields }
 ]);
 const focusField = (field) => {
   const item = itemRefMap.value.get(field);
@@ -211,65 +222,67 @@ const focusField = (field) => {
   }
   return false;
 };
-const conditionListClass = "grid grid-cols-24 gap-3";
+const conditionListClass = "grid grid-cols-24 gap-2.5";
 const sections = reactive([
-  { key: "preferred", label: "\u5E38\u7528\u6761\u4EF6", dndItems: preferredDndItems, unselectedFields: unselectedPreferredFields },
-  { key: "other", label: "\u5176\u4ED6\u6761\u4EF6", dndItems: otherDndItems, unselectedFields: unselectedOtherFields }
+  { key: "preferred", label: "\u5E38\u7528\u67E5\u8BE2\u6761\u4EF6", dndItems: preferredDndItems, unselectedFields: unselectedPreferredFields },
+  { key: "other", label: "\u5176\u4ED6\u67E5\u8BE2\u6761\u4EF6", dndItems: otherDndItems, unselectedFields: unselectedOtherFields }
 ]);
 defineExpose({ focusField });
 </script>
 
 <template>
   <div class="divide-y divide-default">
-    <div class="@container p-2.5 space-y-4">
-      <div
+    <div class="@container p-4 space-y-6">
+      <template
         v-for="section in sections"
         :key="section.key"
       >
-        <div class="font-bold text-xs text-dimmed mb-1.5">
-          {{ section.label }}
-        </div>
-        <Dnd
-          v-model="section.dndItems"
-          group="where-query"
-          handle=".where-query-handle"
-          :on-end="onDndEnd"
-          :class="conditionListClass"
-        >
-          <div
-            v-for="item in section.dndItems"
-            :key="item.field"
-            class="flex items-center gap-1 col-span-24 @3xl:col-span-12 @5xl:col-span-8 @7xl:col-span-6"
-            :class="isDateRangeQueryItem(item) ? '@3xl:col-span-24 @5xl:col-span-12 @7xl:col-span-8' : void 0"
-          >
-            <TableQueryWhereSimpleItem
-              :ref="(el) => setItemRef(item.field, el)"
-              :where-query-item="item"
-              :options="whereOptions"
-              :fetching="fetching"
-              :trigger-fetching="() => triggerFetching(true)"
-              handle-class-name="where-query-handle"
-              @remove="onRemoveFilter"
-              @update:where-query-item="(newWhereQueryItem) => onUpdateWhereQueryItem(item.field, newWhereQueryItem)"
-            />
+        <div v-if="section.dndItems.length > 0">
+          <div class="font-bold text-xs text-dimmed mb-2.5">
+            {{ section.label }}
           </div>
-          <div class="col-span-24 @3xl:col-span-12 @5xl:col-span-8 @7xl:col-span-6">
-            <TableQueryWhereNewer
-              v-if="unselectedWhereFields.length > 0"
-              :options="whereOptions"
-              :unselected-fields="unselectedWhereFields"
-              :biz-columns="bizColumns ?? []"
-              size="sm"
-              @new="onNewField"
-            />
-          </div>
-        </Dnd>
-      </div>
+          <Dnd
+            v-model="section.dndItems"
+            group="where-query"
+            handle=".where-query-handle"
+            :on-end="onDndEnd"
+            :class="conditionListClass"
+          >
+            <div
+              v-for="item in section.dndItems"
+              :key="item.field"
+              class="col-span-24 @2xl:col-span-12 @4xl:col-span-8 @6xl:col-span-6 @7xl:col-span-4"
+              :class="isDateRangeQueryItem(item) ? '@2xl:col-span-24 @4xl:col-span-12 @6xl:col-span-8 @7xl:col-span-6' : void 0"
+            >
+              <TableQueryWhereSimpleItem
+                :ref="(el) => setItemRef(item.field, el)"
+                :where-query-item="item"
+                :options="whereOptions"
+                :fetching="fetching"
+                :trigger-fetching="() => triggerFetching(true)"
+                handle-class-name="where-query-handle"
+                :section="section.key"
+                @remove="onRemoveFilter"
+                @move-section="onMoveItemSection"
+                @update:where-query-item="(newWhereQueryItem) => onUpdateWhereQueryItem(item.field, newWhereQueryItem)"
+              />
+            </div>
+          </Dnd>
+        </div>
+      </template>
     </div>
     <!-- action bar -->
-    <div class="flex items-center gap-2.5 p-2.5">
+    <div class="flex items-center gap-2.5 p-4">
       <div class="flex-1" />
       <div class="flex items-center gap-2.5">
+        <TableQueryWhereNewer
+          v-if="unselectedWhereFields.length > 0"
+          :options="whereOptions"
+          :unselected-fields="unselectedWhereFields"
+          :biz-columns="bizColumns ?? []"
+          size="sm"
+          @new="onNewField"
+        />
         <UButton
           v-if="!hideQueryButton"
           label="查询"
@@ -302,9 +315,9 @@ defineExpose({ focusField });
             :disabled="fetching"
             @click="onResetAll"
           >
-            还原默认
+            恢复默认条件
           </UButton>
-          <UDropdownMenu :items="moreActions">
+          <UDropdownMenu :items="moreActions" size="sm">
             <UButton
               color="neutral"
               variant="subtle"

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

@@ -32,14 +32,14 @@ const items = computed(() => {
   });
   const result = [];
   if (commonItems.length > 0) {
-    result.push({ type: "label", label: "\u5E38\u7528\u6761\u4EF6" });
+    result.push({ type: "label", label: "\u5E38\u7528\u67E5\u8BE2\u6761\u4EF6" });
     result.push(...commonItems);
   }
   if (otherItems.length > 0) {
     if (result.length > 0) {
       result.push({ type: "separator" });
     }
-    result.push({ type: "label", label: "\u5176\u4ED6\u6761\u4EF6" });
+    result.push({ type: "label", label: "\u5176\u4ED6\u67E5\u8BE2\u6761\u4EF6" });
     result.push(...otherItems);
   }
   return result;
@@ -72,14 +72,15 @@ const currentOption = computed(() => {
     :items="items"
   >
     <UButton
-      :size="'sm'"
-      :color="'neutral'"
-      :variant="'outline'"
+      size="sm"
+      color="neutral"
+      variant="ghost"
+      :icon="tableWhereQueryItemIconMap.get(currentOption?.type ?? 'unknown') || 'field'"
       :label="currentOption?.label || '\u9009\u62E9\u5B57\u6BB5'"
       :disabled="disabled"
-      :icon="tableWhereQueryItemIconMap.get(currentOption?.type ?? 'unknown') || 'field'"
       :ui="{
-  label: 'font-bold'
+  base: 'w-full rounded-b-none',
+  label: 'font-bold text-highlighted'
 }"
     />
   </ButtonDropdown>

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

@@ -4,6 +4,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         options: WhereQueryOption<T>[];
         disabled?: boolean;
         focus?: () => void;
+        buttonClass?: string;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {

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

@@ -5,7 +5,8 @@ import ButtonDropdown from "#v/components/button/Dropdown.vue";
 const props = defineProps({
   options: { type: Array, required: true },
   disabled: { type: Boolean, required: false },
-  focus: { type: Function, required: false }
+  focus: { type: Function, required: false },
+  buttonClass: { type: String, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
 const option = computed(
@@ -57,6 +58,10 @@ const currentLabel = computed(() => {
       variant="outline"
       :label="currentLabel"
       :disabled="disabled"
+      :ui="{
+  base: 'rounded-t-none',
+  label: 'text-dimmed'
+}"
     />
   </ButtonDropdown>
 </template>

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

@@ -4,6 +4,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         options: WhereQueryOption<T>[];
         disabled?: boolean;
         focus?: () => void;
+        buttonClass?: string;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {

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

@@ -6,10 +6,12 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         triggerFetching?: () => Promise<void>;
         onRemove: (field: string) => void;
         handleClassName?: string;
+        section: "preferred" | "other";
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {
         "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+        onMoveSection?: ((field: string, section: "preferred" | "other") => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -18,7 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     }>) => void;
     attrs: any;
     slots: {};
-    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+    emit: ((evt: "moveSection", field: string, section: "preferred" | "other") => void) & ((event: "update:whereQueryItem", value: WhereQueryItem<T>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,17 +1,45 @@
 <script setup>
-import { computed, watch, useTemplateRef } from "vue";
-import TableQueryWhereSimpleItemColumnPicker from "#v/components/table/query/where/simple/item/ColumnPicker.vue";
+import { computed, shallowRef, watch, useTemplateRef } from "vue";
 import TableQueryWhereSimpleItemOprPicker from "#v/components/table/query/where/simple/item/OprPicker.vue";
 import TableQueryWhereSimpleItemOpr from "#v/components/table/query/where/simple/item/opr/index.vue";
+import ButtonConfirm from "#v/components/button/Confirm.vue";
+import { tableWhereQueryItemIconMap } from "#v/constants";
 const props = defineProps({
   options: { type: Array, required: true },
   fetching: { type: Boolean, required: false },
   triggerFetching: { type: Function, required: false },
   onRemove: { type: Function, required: true },
-  handleClassName: { type: String, required: false }
+  handleClassName: { type: String, required: false },
+  section: { type: String, required: true }
 });
+const emit = defineEmits(["moveSection"]);
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
 const option = computed(() => props.options.find((option2) => option2.field === whereQueryItem.value.field));
+const moveMenuOpen = shallowRef(false);
+const pointerStart = shallowRef(null);
+const moveSectionItems = computed(() => {
+  const targetSection = props.section === "preferred" ? "other" : "preferred";
+  return [{
+    label: props.section === "preferred" ? "\u79FB\u52A8\u5230\u5176\u4ED6\u67E5\u8BE2\u6761\u4EF6" : "\u79FB\u52A8\u5230\u5E38\u7528\u67E5\u8BE2\u6761\u4EF6",
+    icon: props.section === "preferred" ? "i-lucide-folder-input" : "i-lucide-star",
+    onSelect: () => emit("moveSection", whereQueryItem.value.field, targetSection)
+  }];
+});
+function onHandlePointerDown(event) {
+  pointerStart.value = event;
+}
+function onHandlePointerUp(event) {
+  if (!pointerStart.value) return;
+  const distance = Math.hypot(
+    event.clientX - pointerStart.value.clientX,
+    event.clientY - pointerStart.value.clientY
+  );
+  pointerStart.value = null;
+  if (distance > 4) return;
+  window.setTimeout(() => {
+    moveMenuOpen.value = !moveMenuOpen.value;
+  });
+}
 watch(
   () => option.value?.custom,
   (newCustom) => {
@@ -27,40 +55,57 @@ defineExpose({
 </script>
 
 <template>
-  <UFieldGroup size="sm" class="w-full">
-    <UButton
-      variant="outline"
-      icon="i-lucide-grip-vertical"
-      color="neutral"
-      :class="handleClassName"
-    />
-    <TableQueryWhereSimpleItemColumnPicker
-      v-model:where-query-item="whereQueryItem"
-      :options="options"
-      :fetching="fetching"
-      disabled
-      :focus="() => oprRef?.focus()"
-    />
-    <TableQueryWhereSimpleItemOprPicker
-      v-model:where-query-item="whereQueryItem"
-      :options="options"
-      :fetching="fetching"
-      :focus="() => oprRef?.focus()"
-      :disabled="option?.disableOprSelector"
-    />
-    <TableQueryWhereSimpleItemOpr
-      ref="opr"
-      v-model:where-query-item="whereQueryItem"
-      :options="options"
-      :fetching="fetching"
-      :trigger-fetching="triggerFetching"
-      class="w-full"
-    />
-    <UButton
-      color="neutral"
-      variant="outline"
-      icon="i-lucide-x"
-      @click="onRemove(whereQueryItem.field)"
-    />
-  </UFieldGroup>
+  <div class="w-full flex flex-col group/where-item">
+    <div class="flex items-center rounded-t-md bg-elevated/40 border border-b-0 border-accented">
+      <!-- <TableQueryWhereSimpleItemColumnPicker
+        v-model:where-query-item="whereQueryItem"
+        :options="options"
+        :fetching="fetching"
+        disabled
+        class="!bg-elevated/40"
+        :focus="() => oprRef?.focus()"
+      /> -->
+      <div class="flex-1 flex items-center gap-1 pl-2.5">
+        <UIcon :name="tableWhereQueryItemIconMap.get(option?.type ?? 'unknown') || 'field'" class="size-3.5 text-highlighted" />
+        <span class="text-xs font-bold text-highlighted">
+          {{ option?.label ?? whereQueryItem.field }}
+        </span>
+      </div>
+      <ButtonConfirm
+        class="rounded-br-none opacity-0 transition-all group-hover/where-item:opacity-100 max-md:opacity-100"
+        @confirm="onRemove(whereQueryItem.field)"
+      />
+    </div>
+    <UFieldGroup size="sm" class="w-full">
+      <TableQueryWhereSimpleItemOprPicker
+        v-model:where-query-item="whereQueryItem"
+        :options="options"
+        :fetching="fetching"
+        :focus="() => oprRef?.focus()"
+        :disabled="option?.disableOprSelector"
+        button-class="rounded-t-none bg-default text-muted font-normal"
+      />
+      <TableQueryWhereSimpleItemOpr
+        ref="opr"
+        v-model:where-query-item="whereQueryItem"
+        :options="options"
+        :fetching="fetching"
+        :trigger-fetching="triggerFetching"
+        class="w-full"
+      />
+      <UDropdownMenu v-model:open="moveMenuOpen" :items="moveSectionItems" size="sm">
+        <UButton
+          variant="outline"
+          icon="i-lucide-grip-vertical"
+          color="neutral"
+          class="cursor-move hover:bg-default active:bg-default rounded-t-none"
+          :class="handleClassName"
+          aria-label="拖拽或移动查询条件分组"
+          @pointerdown="onHandlePointerDown"
+          @pointerup="onHandlePointerUp"
+          @pointercancel="pointerStart = null"
+        />
+      </UDropdownMenu>
+    </UFieldGroup>
+  </div>
 </template>

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

@@ -6,10 +6,12 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         triggerFetching?: () => Promise<void>;
         onRemove: (field: string) => void;
         handleClassName?: string;
+        section: "preferred" | "other";
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {
         "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;
+        onMoveSection?: ((field: string, section: "preferred" | "other") => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -18,7 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     }>) => void;
     attrs: any;
     slots: {};
-    emit: (event: "update:whereQueryItem", value: WhereQueryItem<T>) => void;
+    emit: ((evt: "moveSection", field: string, section: "preferred" | "other") => void) & ((event: "update:whereQueryItem", value: WhereQueryItem<T>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -54,6 +54,5 @@ defineExpose({
     v-bind="props"
     v-model="modelValue"
     :placeholder="`\u8BF7\u9009\u62E9${label ?? ''}`"
-    rounded-none
   />
 </template>

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

@@ -2,6 +2,7 @@ import type { WhereQueryItem } from '#v/types';
 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;
+        roundedNone?: boolean;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {

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

@@ -7,7 +7,8 @@ import { useApp } from "#v/composables/useApp";
 import { TIME_ZONE } from "#v/constants";
 import DatePickerInput from "#v/components/date-picker/Input.vue";
 defineProps({
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
 const app = useApp();
@@ -57,7 +58,6 @@ const calendarValue = computed({
 });
 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;
@@ -150,54 +150,56 @@ const dateRangeShortcuts = [
   onOpenAutoFocus: (e) => e.preventDefault()
 }"
   >
-    <!-- 输入框直接暴露 -->
-    <template v-if="isNoCalendarOpr" />
+    <!--
+      使用 anchor 插槽而非默认（trigger）插槽来承载输入框：
+      UPopover 的 trigger（mode="click"）会把 onClick 切换逻辑及 aria 属性
+      合并到插槽根元素上，若输入框直接作为根元素，会与 focus 打开逻辑冲突
+      （弹层一闪即关）并污染 input。anchor 只负责定位，不带点击切换。
+    -->
+    <template #anchor>
+      <span v-if="isNoCalendarOpr" />
 
-    <UFieldGroup
-      v-else-if="isRangeOpr"
-      class="w-full"
-    >
-      <div />
-      <DatePickerInput
-        ref="startDateStrValueInput"
-        v-model:value="startDateStrValue"
-        icon=""
-        input-class="min-w-28 flex-1"
-        placeholder="YYYY-MM-DD"
-        @focus="onOpenCalendar"
-        @blur="onCloseCalendar"
-      />
-      <UBadge variant="outline" color="neutral">
-        ~
-      </UBadge>
-      <DatePickerInput
-        ref="endDateStrValueInput"
-        v-model:value="endDateStrValue"
-        icon=""
-        input-class="min-w-28 flex-1"
-        placeholder="YYYY-MM-DD"
-        @focus="onOpenCalendar"
-        @blur="onCloseCalendar"
-      />
-      <div />
-    </UFieldGroup>
+      <UFieldGroup
+        v-else-if="isRangeOpr"
+        class="w-full"
+      >
+        <DatePickerInput
+          ref="startDateStrValueInput"
+          v-model:value="startDateStrValue"
+          icon=""
+          input-class="flex-1"
+          :rounded-none="roundedNone"
+          placeholder="YYYY-MM-DD"
+          @focus="onOpenCalendar"
+          @blur="onCloseCalendar"
+        />
+        <UBadge variant="outline" color="neutral">
+          ~
+        </UBadge>
+        <DatePickerInput
+          ref="endDateStrValueInput"
+          v-model:value="endDateStrValue"
+          icon=""
+          input-class="flex-1"
+          :rounded-none="roundedNone"
+          placeholder="YYYY-MM-DD"
+          @focus="onOpenCalendar"
+          @blur="onCloseCalendar"
+        />
+      </UFieldGroup>
 
-    <div
-      v-else
-      class="w-full"
-    >
-      <div />
       <DatePickerInput
+        v-else
         ref="singleDateStrValueInput"
         v-model:value="singleDateStrValue"
         icon=""
-        input-class="w-full min-w-32"
+        input-class="w-full"
+        :rounded-none="roundedNone"
         placeholder="YYYY-MM-DD"
         @focus="onOpenCalendar"
         @blur="onCloseCalendar"
       />
-      <div />
-    </div>
+    </template>
 
     <template #content>
       <div

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

@@ -2,6 +2,7 @@ import type { WhereQueryItem } from '#v/types';
 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;
+        roundedNone?: boolean;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {