v-nuxt-ui 0.2.31 → 0.2.32

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.2.31",
+  "version": "0.2.32",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/AsyncSelect.vue

@@ -119,7 +119,7 @@ const onSelect = (values) => {
   }
 };
 const ui = computed(() => ({
-  root: ["min-w-32", props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
+  root: [props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
   base: "peer",
   content: "min-w-fit",
   tagsItem: "max-w-48 inline-flex min-w-0",

package/dist/runtime/components/Select.vue

@@ -30,7 +30,7 @@ const filteredItems = computed(() => {
   return props.items.filter((item) => getItemLabel(item).toLowerCase().includes(searchTerm.value.toLowerCase()));
 });
 const ui = computed(() => ({
-  root: ["min-w-32", props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
+  root: [props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
   base: "peer",
   content: "min-w-fit",
   tagsInput: "min-w-4 w-0"

package/dist/runtime/components/date-picker/Input.vue

@@ -58,7 +58,6 @@ defineExpose({
     v-model="inputBuffer"
     v-maska="'####-##-##'"
     size="sm"
-    class="font-semibold"
     :class="inputClass"
     :icon="icon"
     :placeholder="placeholder"

package/dist/runtime/components/layout/default.vue

@@ -46,7 +46,8 @@ watch(
   body: 'px-0 sm:px-0',
   footer: 'h-(--ui-footer-height)',
   container: 'ease-in-out duration-360',
-  gap: 'ease-in-out duration-360'
+  gap: 'ease-in-out duration-360',
+  inner: 'bg-default'
 }"
     >
       <template #header="{ state }">

package/dist/runtime/components/sys/user/Table.vue

@@ -54,6 +54,7 @@ const columns = [
     header: "\u76F4\u5C5E\u4E0A\u7EA7",
     sortOption: true,
     cell: ({ row }) => row.original.supervisor?.nickname,
+    preferred: false,
     filterOption: {
       type: "async-select",
       listApi: useUserApi().list,
@@ -66,7 +67,8 @@ const columns = [
   },
   {
     accessorKey: "roles",
-    header: "\u7CFB\u7EDF\u6743\u9650\u89D2\u8272",
+    header: "\u6743\u9650\u89D2\u8272",
+    preferred: false,
     cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", "),
     filterOption: {
       type: "async-select",
@@ -97,6 +99,7 @@ const columns = [
       type: "select",
       items: loginTypeOptions
     },
+    preferred: false,
     meta: {
       class: {
         td: "min-w-24"
@@ -113,9 +116,11 @@ const columns = [
   {
     accessorKey: "needFillWh",
     header: "\u662F\u5426\u9700\u8981\u586B\u5199\u5DE5\u65F6",
+    preferred: false,
     filterOption: {
       type: "select",
       items: booleanOptions,
+      multiple: true,
       empty: {
         label: "\u5426",
         variant: "outline",
@@ -146,6 +151,7 @@ const columns = [
     accessorKey: "entryDate",
     header: "\u5165\u804C\u65F6\u95F4",
     sortOption: true,
+    preferred: false,
     filterOption: {
       type: "date-picker"
     },
@@ -154,6 +160,7 @@ const columns = [
   {
     accessorKey: "resignDate",
     header: "\u79BB\u804C\u65F6\u95F4",
+    preferred: false,
     filterOption: {
       type: "date-picker"
     },
@@ -176,6 +183,7 @@ const columns = [
     accessorKey: "isAdmin",
     header: "\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458",
     sortOption: true,
+    preferred: false,
     filterOption: {
       type: "select",
       items: booleanOptions

package/dist/runtime/components/table/Page.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { useId } from "vue";
 import { useProTableView } from "#v/composables/table/useTableView";
+import USlideover from "@nuxt/ui/components/Slideover.vue";
 import TableHeader from "#v/components/table/header/index.vue";
 import TableQueryWhere from "#v/components/table/query/where/index.vue";
 import TablePagination from "#v/components/table/Pagination.vue";
@@ -25,6 +27,8 @@ const props = defineProps({
   extraButtons: { type: Array, required: false },
   onNew: { type: Function, required: false },
   disableWhereQuery: { type: Boolean, required: false },
+  whereQueryMode: { type: String, required: false },
+  whereQueryPopoverWidth: { type: [String, Number], required: false },
   whereQueryOpen: { type: Boolean, required: false },
   onUpdateWhereQueryOpen: { type: Function, required: false },
   extraWhereQueryOptions: { type: Array, required: false },
@@ -48,6 +52,7 @@ const props = defineProps({
   customRowCopyFn: { type: Function, required: false },
   displayFnInDeleteModal: { type: Function, required: false }
 });
+const tablePortalId = `v-table-portal-${useId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
 const {
   // data
   data,
@@ -77,9 +82,9 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
 </script>
 
 <template>
-  <div class="flex-1 flex flex-col overflow-hidden">
+  <div class="flex-1 flex flex-col overflow-hidden divide-y divide-default">
     <!-- header -->
-    <div class="h-(--ui-header-height) flex items-center pl-2.5 pr-2.5 border-b border-default z-1">
+    <div class="h-(--ui-header-height) flex items-center pl-2.5 pr-2.5 z-3 bg-default">
       <div class="flex items-center gap-1">
         <LayoutButtonCollapse />
         <span class="font-bold">{{ cnName }}</span>
@@ -87,15 +92,8 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
       <TableHeader v-bind="tblHeaderProps" class="ml-auto" />
     </div>
 
-    <!-- query where -->
-    <UCollapsible :open="tblHeaderProps.whereQueryProps.whereQueryOpen">
-      <template #content>
-        <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="bg-muted border-b border-default" />
-      </template>
-    </UCollapsible>
-
     <!-- table -->
-    <div ref="table" class="flex-1 flex flex-col h-full overflow-hidden border-b border-default">
+    <div :id="tablePortalId" ref="table" class="relative flex-1 flex flex-col h-full overflow-hidden">
       <!-- table -->
       <UContextMenu :items="tblContextMenuItems">
         <ScrollArea class="flex-1">
@@ -126,5 +124,30 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
 
     <!-- pagination -->
     <TablePagination v-bind="tblPaginationProps" />
+
+    <!-- query where (slideover from top, portalled into table) -->
+    <USlideover
+      :open="tblHeaderProps.whereQueryProps.whereQueryOpen"
+      side="top"
+      :close="false"
+      :portal="`#${tablePortalId}`"
+      :ui="{
+  content: '!absolute z-2',
+  body: 'p-0 sm:p-0',
+  overlay: 'z-1'
+}"
+      @update:open="tblHeaderProps.whereQueryProps.onUpdateWhereQueryOpen"
+    >
+      <template #body>
+        <TableQueryWhere
+          ref="proTableQueryWhere"
+          v-bind="tblWhereQueryProps"
+          :trigger-fetching="async (fromStart) => {
+  await tblWhereQueryProps.triggerFetching(fromStart);
+  tblHeaderProps.whereQueryProps.onUpdateWhereQueryOpen?.(false);
+}"
+        />
+      </template>
+    </USlideover>
   </div>
 </template>

package/dist/runtime/components/table/header/index.vue

@@ -25,6 +25,8 @@ const props = defineProps({
   displayFnInDeleteModal: { type: Function, required: false },
   disableCreation: { type: Boolean, required: false },
   disableWhereQuery: { type: Boolean, required: false },
+  whereQueryMode: { type: String, required: false },
+  whereQueryPopoverWidth: { type: [String, Number], required: false },
   whereQueryProps: { type: Object, required: true },
   disableOrderQuery: { type: Boolean, required: false },
   orderQueryProps: { type: Object, required: true },
@@ -139,6 +141,7 @@ async function onRightExtraButtonClick(btn, e) {
         刷新
       </UButton>
 
+      <!-- whereQuery: toggle panel -->
       <UChip
         v-if="opr === 'whereQuery' && !disableWhereQuery"
         :show="!whereQueryProps.isWhereQueryValueEmpty"

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

@@ -24,6 +24,8 @@ const props = defineProps({
   extraButtons: { type: Array, required: false },
   onNew: { type: Function, required: false },
   disableWhereQuery: { type: Boolean, required: false },
+  whereQueryMode: { type: String, required: false },
+  whereQueryPopoverWidth: { type: [String, Number], required: false },
   whereQueryOpen: { type: Boolean, required: false },
   onUpdateWhereQueryOpen: { type: Function, required: false },
   extraWhereQueryOptions: { type: Array, required: false },

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

@@ -10,7 +10,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["new"]);
 const popoverOpen = ref(false);
-const unselectedOptions = computed(() => props.unselectedFields.map((field) => {
+function buildFieldItem(field) {
   const option = props.options.find((option2) => option2.field === field);
   const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
   return {
@@ -21,12 +21,37 @@ const unselectedOptions = computed(() => props.unselectedFields.map((field) => {
       popoverOpen.value = false;
     }
   };
-}));
+}
+const unselectedOptions = computed(() => {
+  const commonFields = [];
+  const otherFields = [];
+  props.unselectedFields.forEach((field) => {
+    const option = props.options.find((opt) => opt.field === field);
+    if (option?.preferred !== false) {
+      commonFields.push(field);
+    } else {
+      otherFields.push(field);
+    }
+  });
+  const items = [];
+  if (commonFields.length > 0) {
+    items.push({ type: "label", label: "\u5E38\u7528\u6761\u4EF6" });
+    commonFields.forEach((field) => items.push(buildFieldItem(field)));
+  }
+  if (otherFields.length > 0) {
+    if (items.length > 0) {
+      items.push({ type: "separator" });
+    }
+    items.push({ type: "label", label: "\u5176\u4ED6\u6761\u4EF6" });
+    otherFields.forEach((field) => items.push(buildFieldItem(field)));
+  }
+  return items;
+});
 </script>
 
 <template>
   <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
-  <ButtonDropdown :items="unselectedOptions">
+  <ButtonDropdown :items="unselectedOptions" class="w-fit h-fit">
     <UButton
       label="新增"
       :size="size"

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

@@ -1,7 +1,10 @@
 <script setup>
-import { computed, ref, nextTick } from "vue";
+import { computed, ref, reactive, watch, nextTick } from "vue";
 import { useTableOpr } from "#v/composables/table/useTableOpr";
 import { useToast } from "@nuxt/ui/composables";
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import Dnd from "#v/components/Dnd.client.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({
@@ -24,6 +27,16 @@ const selectedWhereFields = computed(() => {
 const unselectedWhereFields = computed(() => {
   return props.whereOptions.map((option) => option.field).filter((field) => !selectedWhereFields.value.includes(field));
 });
+const unselectedPreferredFields = computed(
+  () => unselectedWhereFields.value.filter(
+    (field) => props.whereOptions.find((opt) => opt.field === field)?.preferred !== false
+  )
+);
+const unselectedOtherFields = computed(
+  () => unselectedWhereFields.value.filter(
+    (field) => props.whereOptions.find((opt) => opt.field === field)?.preferred === false
+  )
+);
 const itemRefMap = ref(/* @__PURE__ */ new Map());
 function setItemRef(field, el) {
   if (el && "focus" in el && typeof el.focus === "function") {
@@ -63,18 +76,133 @@ const onNewField = (field) => {
     }
   });
 };
-const isWhereQueryEmpty = computed(() => {
-  return !props.whereQuery || Object.keys(props.whereQuery ?? {}).length === 0 || // 仅检查有对应option的item的值是否为空
-  (props.whereQuery?.items?.filter((query) => props.whereOptions.find((option) => option.field === query.field)).length ?? 0) === 0 && (props.whereQuery?.groups?.length ?? 0) === 0;
-});
+const getDefaultKeys = () => props.extraWhereQueryInitValues?.items?.map((query) => query.field) ?? [];
 const whereQueryWithoutInitValues = computed(() => {
   if (!props.whereQuery) return [];
-  const defaultKeys = props.extraWhereQueryInitValues?.items?.map((query) => query.field) ?? [];
+  const defaultKeys = getDefaultKeys();
   return props.whereQuery.items?.filter((query) => {
     const field = query.field;
     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);
+}
+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;
+  }
+  return {
+    ...item,
+    extraData: Object.keys(extraData).length > 0 ? extraData : void 0
+  };
+}
+const preferredItems = computed(
+  () => whereQueryWithoutInitValues.value.filter(isPreferredItem)
+);
+const otherItems = computed(
+  () => whereQueryWithoutInitValues.value.filter((item) => !isPreferredItem(item))
+);
+const preferredDndItems = ref([]);
+const otherDndItems = ref([]);
+watch([preferredItems, otherItems], () => {
+  preferredDndItems.value = [...preferredItems.value];
+  otherDndItems.value = [...otherItems.value];
+}, { immediate: true });
+function onDndEnd() {
+  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"))
+    ]
+  });
+}
+function onUpdateWhereQueryItem(field, newWhereQueryItem) {
+  const items = props.whereQuery?.items ?? [];
+  const realIdx = items.findIndex((query) => query.field === field);
+  if (realIdx === -1) return;
+  const currentItem = items[realIdx];
+  if (!currentItem) return;
+  const currentSection = getItemSection(currentItem);
+  const updatedItems = [...items];
+  updatedItems[realIdx] = setItemSection(newWhereQueryItem, currentSection);
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: updatedItems
+  });
+}
+const rangeOprList = ["range_gt_lt", "range_gt_lte", "range_gte_lt", "range_gte_lte"];
+const isDateRangeQueryItem = (item) => {
+  const option = props.whereOptions.find((option2) => option2.field === item.field);
+  return option?.type === "date-picker" && rangeOprList.includes(item.opr);
+};
+const onClearValues = () => {
+  if (!props.whereQuery?.items) return;
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: props.whereQuery.items.map((item) => ({ ...item, value: null }))
+  });
+};
+const onResetAll = () => {
+  props.onUpdateWhereQuery(props.defaultWhereQuery);
+};
+const onFillMissingFields = () => {
+  const currentFields = new Set((props.whereQuery?.items ?? []).map((item) => item.field));
+  const missingOptions = props.whereOptions.filter((opt) => !currentFields.has(opt.field));
+  if (missingOptions.length === 0) return;
+  const preferred = missingOptions.filter((opt) => opt.preferred !== false);
+  const other = missingOptions.filter((opt) => opt.preferred === false);
+  const newItems = [...preferred, ...other].map((opt) => ({
+    field: opt.field,
+    opr: opt.defaultOpr ?? useTableOpr().getDefaultOprByType(opt.type),
+    value: null,
+    custom: opt.custom
+  }));
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: [...props.whereQuery?.items ?? [], ...newItems]
+  });
+};
+const onRemoveAllFields = () => {
+  const defaultKeys = props.extraWhereQueryInitValues?.items?.map((q) => q.field) ?? [];
+  const initItems = props.whereQuery?.items?.filter((q) => defaultKeys.includes(q.field)) ?? [];
+  props.onUpdateWhereQuery({
+    ...props.whereQuery,
+    items: initItems.map((item) => ({ ...item, value: null }))
+  });
+};
+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 }
+]);
 const focusField = (field) => {
   const item = itemRefMap.value.get(field);
   if (item) {
@@ -83,67 +211,109 @@ const focusField = (field) => {
   }
   return false;
 };
+const conditionListClass = "grid grid-cols-24 gap-3";
+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 }
+]);
 defineExpose({ focusField });
 </script>
 
 <template>
-  <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">
-      <!-- key如果是field，那么field修改后，不能聚焦后面的组件，所以这里的key用idx代替 -->
-      <template v-if="!isWhereQueryEmpty">
-        <TableQueryWhereSimpleItem
-          v-for="(item, idx) in whereQueryWithoutInitValues"
-          :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 items = props.whereQuery?.items ?? [];
-  const realIdx = items.findIndex((q) => q.field === item.field);
-  if (realIdx === -1) return;
-  const updatedItems = [...items];
-  updatedItems[realIdx] = newWhereQueryItem;
-  onUpdateWhereQuery({
-    ...whereQuery,
-    items: updatedItems
-  });
-}"
-        />
-      </template>
-      <TableQueryWhereNewer
-        :options="whereOptions"
-        :unselected-fields="unselectedWhereFields"
-        :biz-columns="bizColumns ?? []"
-        size="sm"
-        @new="onNewField"
-      />
-      <USeparator orientation="vertical" class="h-4" />
-      <UButton
-        v-if="!hideQueryButton"
-        label="查询"
-        color="neutral"
-        variant="subtle"
-        size="sm"
-        :loading="fetching"
-        icon="i-lucide-search"
-        @click="async () => {
+  <div class="divide-y divide-default">
+    <div class="@container p-2.5 space-y-4">
+      <div
+        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>
+          <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>
+    </div>
+    <!-- action bar -->
+    <div class="flex items-center gap-2.5 p-2.5">
+      <div class="flex-1" />
+      <div class="flex items-center gap-2.5">
+        <UButton
+          v-if="!hideQueryButton"
+          label="查询"
+          color="neutral"
+          variant="subtle"
+          size="sm"
+          :loading="fetching"
+          icon="i-lucide-search"
+          @click="async () => {
   await triggerFetching(true);
 }"
-      />
-      <UButton
-        color="neutral"
-        variant="subtle"
-        size="sm"
-        icon="i-lucide-timer-reset"
-        :disabled="fetching"
-        @click="() => onUpdateWhereQuery(defaultWhereQuery)"
-      >
-        重置
-      </UButton>
+        />
+        <UButton
+          color="neutral"
+          variant="subtle"
+          size="sm"
+          icon="i-lucide-eraser"
+          :disabled="fetching"
+          @click="onClearValues"
+        >
+          清空
+        </UButton>
+      </div>
+      <div class="flex-1 flex justify-end items-center">
+        <UFieldGroup size="sm">
+          <UButton
+            color="neutral"
+            variant="subtle"
+            icon="i-lucide-timer-reset"
+            :disabled="fetching"
+            @click="onResetAll"
+          >
+            还原默认
+          </UButton>
+          <UDropdownMenu :items="moreActions">
+            <UButton
+              color="neutral"
+              variant="subtle"
+              icon="i-lucide-ellipsis"
+              :disabled="fetching"
+            />
+          </UDropdownMenu>
+        </UFieldGroup>
+      </div>
     </div>
   </div>
 </template>

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

@@ -9,17 +9,41 @@ const props = defineProps({
   focus: { type: Function, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
-const items = computed(() => props.options.map((option) => ({
-  label: option.label,
-  value: option.field,
-  icon: tableWhereQueryItemIconMap.get(option.type) || "field",
-  onSelect: () => {
-    modelValue.value = option.field;
-    nextTick(() => {
-      props.focus?.();
-    });
+const items = computed(() => {
+  const commonItems = [];
+  const otherItems = [];
+  props.options.forEach((option) => {
+    const item = {
+      label: option.label,
+      value: option.field,
+      icon: tableWhereQueryItemIconMap.get(option.type) || "field",
+      onSelect: () => {
+        modelValue.value = option.field;
+        nextTick(() => {
+          props.focus?.();
+        });
+      }
+    };
+    if (option.preferred === true) {
+      commonItems.push(item);
+    } else {
+      otherItems.push(item);
+    }
+  });
+  const result = [];
+  if (commonItems.length > 0) {
+    result.push({ type: "label", label: "\u5E38\u7528\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(...otherItems);
+  }
+  return result;
+});
 const modelValue = computed({
   get() {
     return whereQueryItem.value.field;

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

@@ -5,6 +5,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         fetching?: boolean;
         triggerFetching?: () => Promise<void>;
         onRemove: (field: string) => void;
+        handleClassName?: string;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {

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

@@ -7,7 +7,8 @@ const props = defineProps({
   options: { type: Array, required: true },
   fetching: { type: Boolean, required: false },
   triggerFetching: { type: Function, required: false },
-  onRemove: { type: Function, required: true }
+  onRemove: { type: Function, required: true },
+  handleClassName: { type: String, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
 const option = computed(() => props.options.find((option2) => option2.field === whereQueryItem.value.field));
@@ -26,11 +27,18 @@ defineExpose({
 </script>
 
 <template>
-  <UFieldGroup size="sm">
+  <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
@@ -46,6 +54,7 @@ defineExpose({
       :options="options"
       :fetching="fetching"
       :trigger-fetching="triggerFetching"
+      class="w-full"
     />
     <UButton
       color="neutral"

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

@@ -5,6 +5,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         fetching?: boolean;
         triggerFetching?: () => Promise<void>;
         onRemove: (field: string) => void;
+        handleClassName?: string;
     } & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {

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

@@ -153,14 +153,16 @@ const dateRangeShortcuts = [
     <!-- 输入框直接暴露 -->
     <template v-if="isNoCalendarOpr" />
 
-    <template v-else-if="isRangeOpr">
-      <!-- 必须加这个div，不然第一个输入框无法正确渲染 -->
+    <UFieldGroup
+      v-else-if="isRangeOpr"
+      class="w-full"
+    >
       <div />
       <DatePickerInput
         ref="startDateStrValueInput"
         v-model:value="startDateStrValue"
         icon=""
-        input-class="w-32"
+        input-class="min-w-28 flex-1"
         placeholder="YYYY-MM-DD"
         @focus="onOpenCalendar"
         @blur="onCloseCalendar"
@@ -172,25 +174,30 @@ const dateRangeShortcuts = [
         ref="endDateStrValueInput"
         v-model:value="endDateStrValue"
         icon=""
-        input-class="w-32"
+        input-class="min-w-28 flex-1"
         placeholder="YYYY-MM-DD"
         @focus="onOpenCalendar"
         @blur="onCloseCalendar"
       />
-    </template>
+      <div />
+    </UFieldGroup>
 
-    <template v-else>
+    <div
+      v-else
+      class="w-full"
+    >
       <div />
       <DatePickerInput
         ref="singleDateStrValueInput"
         v-model:value="singleDateStrValue"
         icon=""
-        input-class="w-32"
+        input-class="w-full min-w-32"
         placeholder="YYYY-MM-DD"
         @focus="onOpenCalendar"
         @blur="onCloseCalendar"
       />
-    </template>
+      <div />
+    </div>
 
     <template #content>
       <div

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

@@ -36,6 +36,9 @@ defineExpose({
     :placeholder="`\u8BF7\u8F93\u5165${label.toString()}`"
     :disabled="disabled"
     color="neutral"
+    :ui="{
+  base: 'h-full'
+}"
     @keyup.enter="async () => {
   await triggerFetching?.();
 }"

package/dist/runtime/composables/table/useTable.js

@@ -25,6 +25,8 @@ export function useTable(props) {
     onNew,
     // where query
     disableWhereQuery,
+    whereQueryMode,
+    whereQueryPopoverWidth,
     extraWhereQueryOptions,
     extraWhereQueryInitValues,
     // order query
@@ -316,6 +318,8 @@ export function useTable(props) {
     displayFnInDeleteModal,
     disableCreation,
     disableWhereQuery,
+    whereQueryMode,
+    whereQueryPopoverWidth,
     whereQueryProps: tblWhereQueryProps.value,
     disableOrderQuery,
     orderQueryProps: tblOrderQueryProps.value,

package/dist/runtime/composables/table/useTableQuery.js

@@ -10,6 +10,7 @@ export function useTableQuery(props) {
     const options = bizColumns.filter((col) => col.filterOption).map((col) => ({
       field: col.accessorKey,
       label: col.header,
+      preferred: col.preferred,
       ...col.filterOption
     }));
     extraWhereQueryOptions?.forEach((option) => {
@@ -19,7 +20,7 @@ export function useTableQuery(props) {
   });
   const whereQueryInitValues = computed(() => {
     const initValues = {
-      items: whereQueryOptions.value.filter((option) => option.initValues !== void 0 && option.initValues !== null || option.initHide === false).map((option) => ({
+      items: whereQueryOptions.value.map((option) => ({
         field: option.field,
         opr: option.defaultOpr ?? useTableOpr().getDefaultOprByType(option.type),
         value: option.initValues ?? null,
@@ -46,7 +47,8 @@ export function useTableQuery(props) {
     () => bizColumns.map((col) => ({
       accessorKey: col["accessorKey"],
       fixed: "unfixed",
-      checked: !col.initHide
+      checked: !col.initHide,
+      preferred: col.preferred
     }))
   );
   const localStgSettings = useLocalStorage(`${name}-table-settings`, {

package/dist/runtime/composables/table/useTableView.d.ts

@@ -16,6 +16,7 @@ export interface UseProTableViewReturn<T> {
     tblPaginationProps: ComputedRef<TablePaginationProps<T>>;
     tblContextMenuItems: Ref<ContextMenuItem[]>;
     tableWidth: Ref<number>;
+    tableDiv: Ref<HTMLDivElement | null>;
     updateTableWidth: () => void;
     tblClasses: ComputedRef<(string | boolean | (string | boolean)[])[]>;
     tblUi: ComputedRef<{

package/dist/runtime/composables/table/useTableView.js

@@ -145,6 +145,7 @@ export function useProTableView(props) {
     tblContextMenuItems,
     // view
     tableWidth,
+    tableDiv,
     updateTableWidth,
     tblClasses,
     tblUi,

package/dist/runtime/constants/options.js

@@ -1,6 +1,6 @@
 export const booleanOptions = [
-  { label: "Yes", value: true },
-  { label: "No", value: false }
+  { label: "\u662F", value: true },
+  { label: "\u5426", value: false }
 ];
 export var Gender = /* @__PURE__ */ ((Gender2) => {
   Gender2[Gender2["MALE"] = 1] = "MALE";

package/dist/runtime/types/components/table/column.d.ts

@@ -31,5 +31,6 @@ export type VColumn<T> = {
     sortOption?: OrderQueryColumnOption | true;
     initHide?: boolean;
     checked?: boolean;
+    preferred?: boolean;
     exportCell?(row: T): string | string[];
 } & TableColumn<T>;

package/dist/runtime/types/components/table/header.d.ts

@@ -17,6 +17,8 @@ export type TableHeaderProps<T> = {
     displayFnInDeleteModal?: (model: T) => string | undefined;
     disableCreation?: boolean;
     disableWhereQuery?: boolean;
+    whereQueryMode?: 'inline' | 'popover';
+    whereQueryPopoverWidth?: string | number;
     whereQueryProps: WhereQueryProps<T>;
     disableOrderQuery?: boolean;
     orderQueryProps: OrderQueryProps<T>;

package/dist/runtime/types/components/table/index.d.ts

@@ -82,6 +82,8 @@ export type VTableProps<T> = {
     extraButtons?: TableHeaderProps<T>['extraButtons'];
     onNew?: TableHeaderProps<T>['onNew'];
     disableWhereQuery?: TableHeaderProps<T>['disableWhereQuery'];
+    whereQueryMode?: 'inline' | 'popover';
+    whereQueryPopoverWidth?: string | number;
     whereQueryOpen?: boolean;
     onUpdateWhereQueryOpen?: (open: boolean) => void;
     extraWhereQueryOptions?: WhereQueryOption<T>[];

package/dist/runtime/types/components/table/query/where.d.ts

@@ -2,6 +2,7 @@ import type { VColumn, WhereQuery, WhereQueryColumnOption, WhereQueryItemGroup }
 export type WhereQueryOption<T> = {
     field: string & keyof T | string;
     label: string;
+    preferred?: boolean;
 } & WhereQueryColumnOption<T>;
 export type WhereQueryProps<T> = {
     whereOptions: WhereQueryOption<T>[];

package/dist/runtime/types/storage.d.ts

@@ -13,6 +13,7 @@ export type Column = {
     checked?: boolean;
     width?: string | number;
     fixed: 'left' | 'right' | 'unfixed';
+    preferred?: boolean;
 };
 export type TableSettings<T> = {
     columns?: Column[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",
@@ -72,7 +72,7 @@
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/fonts": "^0.12.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/ui": "^4.7.1",
+    "@nuxt/ui": "^4.8.1",
     "@nuxtjs/i18n": "^10.3.0",
     "@nuxtjs/mdc": "^0.20.2",
     "@tanstack/table-core": "^8.21.3",