v-nuxt-ui 0.2.19 → 0.2.22

package/dist/module.json

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

package/dist/runtime/components/AsyncSelect.vue

@@ -25,7 +25,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const overlay = useOverlay();
 const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
@@ -117,6 +118,12 @@ const onSelect = (values) => {
     };
   }
 };
+const ui = computed(() => ({
+  root: ["min-w-32", props.roundedNone && "rounded-none"].filter(Boolean).join(" "),
+  base: "peer",
+  content: "min-w-fit",
+  tagsInput: "min-w-4 w-0"
+}));
 const dropdownOpen = ref(false);
 const searchTerm = ref("");
 const onDebounceFetchItems = useDebounceFn(onFetchItems, 512);
@@ -158,12 +165,7 @@ defineExpose({
     open-on-focus
     trailing
     ignore-filter
-    :ui="{
-  root: 'min-w-32',
-  base: 'peer',
-  content: 'min-w-fit',
-  tagsInput: 'min-w-4 w-0'
-}"
+    :ui="ui"
     :content="{
   align: 'start'
 }"

package/dist/runtime/components/AsyncTreeSelect.vue

@@ -27,7 +27,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
 const treeModelValue = computed(() => allModels.value.filter((item) => item[props.valueField] === modelValue.value));

package/dist/runtime/components/Select.d.vue.ts

@@ -0,0 +1,25 @@
+import type { VSelectProps } 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<(VSelectProps<T> & {
+        modelValue: string | number | string[] | number[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | string[] | number[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | string[] | number[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Select.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  floatingPlaceholder: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: null, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
+  items: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  afterSelect: { type: Function, required: false },
+  roundedNone: { type: Boolean, required: false }
+});
+const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const searchTerm = ref("");
+const getItemLabel = (item) => {
+  if (typeof item === "string" || typeof item === "number" || typeof item === "boolean" || typeof item === "bigint") {
+    return String(item);
+  }
+  return String(item?.label ?? "");
+};
+const filteredItems = computed(() => {
+  if (!searchTerm.value) {
+    return props.items;
+  }
+  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(" "),
+  base: "peer",
+  content: "min-w-fit",
+  tagsInput: "min-w-4 w-0"
+}));
+const inputMenuRef = useTemplateRef("inputMenu");
+defineExpose({
+  focus: () => {
+    inputMenuRef.value?.inputRef.focus();
+  }
+});
+</script>
+
+<template>
+  <UInputMenu
+    ref="inputMenu"
+    v-model:search-term="searchTerm"
+    v-model="modelValue"
+    :items="filteredItems"
+    :placeholder="placeholder"
+    :multiple="multiple ?? false"
+    :size="size"
+    color="neutral"
+    delete-icon="i-lucide-trash"
+    value-key="value"
+    clear
+    clear-icon="i-lucide-circle-x"
+    :icon="icon"
+    :disabled="disabled"
+    open-on-focus
+    trailing
+    :ui="ui"
+    :content="{
+  align: 'start'
+}"
+  />
+</template>

package/dist/runtime/components/Select.vue.d.ts

@@ -0,0 +1,25 @@
+import type { VSelectProps } 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<(VSelectProps<T> & {
+        modelValue: string | number | string[] | number[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | string[] | number[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | string[] | number[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/button/Dropdown.d.vue.ts

@@ -1,13 +1,12 @@
-import type { CommandPaletteGroup, CommandPaletteProps } from '@nuxt/ui';
+import type { ListboxItem, ListboxProps } from '@nuxt/ui';
 type __VLS_Props = {
-    groups: CommandPaletteGroup[];
-    multiple?: CommandPaletteProps['multiple'];
-    enableFooterToolbar?: boolean;
+    items: ListboxItem[];
+    multiple?: ListboxProps['multiple'];
     onOpen?: () => Promise<void>;
     onSearch?: (searchTerm: string) => Promise<void>;
 };
 type __VLS_ModelProps = {
-    'modelValue'?: string | number | undefined | null | (string | number)[];
+    'modelValue'?: string | number | undefined | (string | number)[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_8: {};
@@ -17,9 +16,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | null | undefined) => any;
+    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/button/Dropdown.vue

@@ -1,59 +1,12 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
-  groups: { type: Array, required: true },
+  items: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
-  enableFooterToolbar: { type: Boolean, required: false },
   onOpen: { type: Function, required: false },
   onSearch: { type: Function, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: false } });
-const commandPaletteModelValue = computed({
-  get() {
-    if (props.multiple) {
-      const values = [];
-      for (const group of props.groups) {
-        for (const item of group.items) {
-          if (Array.isArray(modelValue.value) && modelValue.value.includes(item.value)) {
-            values.push(item);
-          }
-        }
-      }
-      return values;
-    }
-    for (const group of props.groups) {
-      for (const item of group.items) {
-        if (item.value === modelValue.value) {
-          const newItem = { ...item };
-          delete newItem.onSelect;
-          return newItem;
-        }
-      }
-    }
-    return {};
-  },
-  set(newValue) {
-    if (props.multiple) {
-      modelValue.value = newValue.map((item) => item.value);
-    } else {
-      modelValue.value = newValue.value;
-    }
-  }
-});
-const footerActions = [
-  {
-    label: "\u5168\u9009",
-    fn: () => modelValue.value = props.groups.flatMap((group) => group.items.map((item) => item.value))
-  },
-  {
-    label: "\u53CD\u9009",
-    fn: () => modelValue.value = props.groups.flatMap((group) => group.items.map((item) => item.value)).filter((value) => !(Array.isArray(modelValue.value) ? modelValue.value.includes(value) : modelValue.value === value))
-  },
-  {
-    label: "\u6E05\u7A7A",
-    fn: () => modelValue.value = []
-  }
-];
 const searchTerm = ref("");
 const popoverOpen = ref(false);
 watch(popoverOpen, async (newOpen) => {
@@ -82,46 +35,22 @@ defineExpose({
     <slot />
 
     <template #content>
-      <UCommandPalette
-        :model-value="commandPaletteModelValue"
-        :selection-behavior="multiple ? 'toggle' : 'replace'"
-        :groups="groups"
+      <UListbox
+        v-model="modelValue"
+        v-model:search-term="searchTerm"
+        autofocus
         size="sm"
-        :multiple="multiple"
-        :ui="{
-  input: '[&>input]:h-7',
-  itemLeadingIcon: 'size-3 self-center'
+        value-key="value"
+        :filter="{
+  placeholder: '\u641C\u7D22...',
+  icon: 'i-lucide-search'
 }"
-        placeholder="搜索"
-        :search-term="searchTerm"
-        @update:model-value="(newValue) => {
-  commandPaletteModelValue = newValue;
-  if (!multiple) {
-    popoverOpen = false;
-  }
-}"
-        @update:search-term="async (newSearchTerm) => {
-  searchTerm = newSearchTerm;
-  await onSearch?.(newSearchTerm);
+        :ui="{
+  root: 'ring-0'
 }"
-      >
-        <template v-if="enableFooterToolbar && multiple" #footer>
-          <div class="flex">
-            <UFieldGroup class="flex items-center ml-auto">
-              <UButton
-                v-for="action in footerActions"
-                :key="action.label"
-                :label="action.label"
-                size="xs"
-                color="neutral"
-                variant="ghost"
-                class="text-muted font-normal"
-                @click="action.fn"
-              />
-            </UFieldGroup>
-          </div>
-        </template>
-      </UCommandPalette>
+        :items="props.items"
+        :multiple="props.multiple"
+      />
     </template>
   </UPopover>
 </template>

package/dist/runtime/components/button/Dropdown.vue.d.ts

@@ -1,13 +1,12 @@
-import type { CommandPaletteGroup, CommandPaletteProps } from '@nuxt/ui';
+import type { ListboxItem, ListboxProps } from '@nuxt/ui';
 type __VLS_Props = {
-    groups: CommandPaletteGroup[];
-    multiple?: CommandPaletteProps['multiple'];
-    enableFooterToolbar?: boolean;
+    items: ListboxItem[];
+    multiple?: ListboxProps['multiple'];
     onOpen?: () => Promise<void>;
     onSearch?: (searchTerm: string) => Promise<void>;
 };
 type __VLS_ModelProps = {
-    'modelValue'?: string | number | undefined | null | (string | number)[];
+    'modelValue'?: string | number | undefined | (string | number)[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_8: {};
@@ -17,9 +16,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | null | undefined) => any;
+    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/field/AsyncObjectSelect.vue

@@ -23,7 +23,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
 const modelValueWithValueField = ref(modelValue.value?.map((item) => item[props.valueField]));

package/dist/runtime/components/form/field/AsyncSelect.vue

@@ -28,7 +28,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
 const asyncSelectModelValue = computed({

package/dist/runtime/components/form/field/AsyncTreeSelect.vue

@@ -27,7 +27,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
 const asyncTreeSelectModelValue = computed({

package/dist/runtime/components/form/field/Select.d.vue.ts

@@ -1,16 +1,23 @@
 import type { VFormFieldSelectProps } from '#v/types';
-type __VLS_Props = {
-    disabled?: boolean;
-    icon?: string;
-} & VFormFieldSelectProps;
-type __VLS_ModelProps = {
-    'modelValue': string | null | undefined;
+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<(VFormFieldSelectProps<T> & {
+        modelValue: string | number | string[] | number[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | string[] | number[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | string[] | number[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/field/Select.vue

@@ -1,13 +1,18 @@
 <script setup>
 import { computed } from "vue";
+import VSelect from "#v/components/Select.vue";
 const props = defineProps({
+  label: { type: String, required: false },
+  floatingPlaceholder: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  icon: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: null, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
   items: { type: Array, required: true },
-  searchable: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
-  enableEmptyOption: { type: Boolean, required: false },
-  placeholder: { type: String, required: false }
+  afterSelect: { type: Function, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
 const selectItems = computed(
@@ -16,10 +21,10 @@ const selectItems = computed(
 </script>
 
 <template>
-  <USelectMenu
+  <VSelect
     v-model="modelValue"
+    v-bind="props"
     :items="selectItems"
-    :search-input="searchable ?? false"
     :icon="icon ? icon : multiple ? 'i-lucide-list-todo' : void 0"
     :placeholder="placeholder"
     value-key="value"

package/dist/runtime/components/form/field/Select.vue.d.ts

@@ -1,16 +1,23 @@
 import type { VFormFieldSelectProps } from '#v/types';
-type __VLS_Props = {
-    disabled?: boolean;
-    icon?: string;
-} & VFormFieldSelectProps;
-type __VLS_ModelProps = {
-    'modelValue': string | null | undefined;
+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<(VFormFieldSelectProps<T> & {
+        modelValue: string | number | string[] | number[] | undefined;
+    }) & {
+        "onUpdate:modelValue"?: ((value: string | number | string[] | number[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: string | number | string[] | number[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/field/index.vue

@@ -110,13 +110,7 @@ const fieldModelValue = computed({
   <FormFieldSelect
     v-else-if="field.type === 'select'"
     v-model="fieldModelValue"
-    :items="field.items"
-    :searchable="field.searchable ?? false"
-    :icon="field.icon ? field.icon : field.multiple ? 'i-lucide-list-todo' : void 0"
-    :enable-empty-option="field.enableEmptyOption"
-    :placeholder="field.placeholder"
-    value-key="value"
-    :disabled="field.disabled"
+    v-bind="field"
   />
   <USelectMenu
     v-else-if="field.type === 'multiple-select-string'"

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

@@ -129,6 +129,7 @@ const columns = [
     filterOption: {
       type: "select",
       items: genderOptions,
+      multiple: true,
       empty: {
         label: "\u672A\u77E5",
         variant: "outline",
@@ -192,11 +193,6 @@ const columns = [
     :extra-order-query-options="[
   { field: 'createdAt', label: '\u521B\u5EFA\u65F6\u95F4', defaultOpr: 'desc' }
 ]"
-    :extra-where-query-init-values="{
-  items: [
-    { field: 'isAdmin', opr: 'eq', value: false }
-  ]
-}"
     @edit-row-from-modal="async (row) => await createModal.open({ model: row }).result"
   />
 </template>

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

@@ -10,32 +10,23 @@ const props = defineProps({
 });
 const emit = defineEmits(["new"]);
 const popoverOpen = ref(false);
-const unselectedOptions = computed(() => {
-  const options = [
-    {
-      id: "unselected-fields",
-      label: "\u65B0\u589E\u67E5\u8BE2\u5B57\u6BB5",
-      items: props.unselectedFields.map((field) => {
-        const option = props.options.find((option2) => option2.field === field);
-        const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
-        return {
-          label: column?.header || option?.label || field,
-          icon: tableWhereQueryItemIconMap.get(option?.type ?? "unknown") || "field",
-          onSelect: () => {
-            emit("new", field);
-            popoverOpen.value = false;
-          }
-        };
-      })
+const unselectedOptions = computed(() => props.unselectedFields.map((field) => {
+  const option = props.options.find((option2) => option2.field === field);
+  const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
+  return {
+    label: column?.header || option?.label || field,
+    icon: tableWhereQueryItemIconMap.get(option?.type ?? "unknown") || "field",
+    onSelect: () => {
+      emit("new", field);
+      popoverOpen.value = false;
     }
-  ];
-  return options;
-});
+  };
+}));
 </script>
 
 <template>
   <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
-  <ButtonDropdown :groups="unselectedOptions">
+  <ButtonDropdown :items="unselectedOptions">
     <UButton
       label="新增"
       :size="size"

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

@@ -9,25 +9,17 @@ const props = defineProps({
   focus: { type: Function, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
-const items = computed(() => {
-  return [
-    {
-      id: "query-fields",
-      label: "\u67E5\u8BE2\u5B57\u6BB5",
-      items: 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(() => 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 modelValue = computed({
   get() {
     return whereQueryItem.value.field;
@@ -53,7 +45,7 @@ const currentOption = computed(() => {
 <template>
   <ButtonDropdown
     v-model="modelValue"
-    :groups="items"
+    :items="items"
   >
     <UButton
       :size="'sm'"

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

@@ -16,22 +16,16 @@ const items = computed(() => {
     console.error("Cannot find field option or missing type for field:", whereQueryItem.value.field);
     return [];
   }
-  return [
-    {
-      id: "operators",
-      label: "\u64CD\u4F5C\u7B26",
-      items: useTableOpr().getOprNameOptionsByType(option.value.type).map((option2) => ({
-        label: option2.label,
-        value: option2.value,
-        onSelect: () => {
-          modelValue.value = option2.value;
-          nextTick(() => {
-            props.focus?.();
-          });
-        }
-      }))
+  return useTableOpr().getOprNameOptionsByType(option.value.type).map((option2) => ({
+    label: option2.label,
+    value: option2.value,
+    onSelect: () => {
+      modelValue.value = option2.value;
+      nextTick(() => {
+        props.focus?.();
+      });
     }
-  ];
+  }));
 });
 const modelValue = computed({
   get() {
@@ -55,7 +49,7 @@ const currentLabel = computed(() => {
   <!-- NOTE: 自己实现DropdownMenu, 原生DropdownMenu的Focus有问题，会让查询字段打开的Popover关闭 -->
   <ButtonDropdown
     v-model="modelValue"
-    :groups="items"
+    :items="items"
   >
     <UButton
       size="sm"

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

@@ -21,7 +21,8 @@ const props = defineProps({
   afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
-  createModalOpenProps: { type: Object, required: false }
+  createModalOpenProps: { type: Object, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
 const modelValue = computed({
@@ -53,5 +54,6 @@ 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/Select.d.vue.ts

@@ -1,11 +1,6 @@
-import type { WhereQueryItem } from '#v/types';
-import type { InputMenuItem, InputMenuProps } from '@nuxt/ui';
+import type { VSelectProps, 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;
-        items: InputMenuItem[];
-        placeholder?: InputMenuProps["placeholder"];
-    } & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VSelectProps<T> & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {
         "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;

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

@@ -1,12 +1,21 @@
 <script setup>
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, useTemplateRef } from "vue";
+import VSelect from "#v/components/Select.vue";
 const props = defineProps({
+  label: { type: String, required: false },
+  floatingPlaceholder: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false, default: "sm" },
+  icon: { type: null, required: false },
+  enableEmptyOption: { type: Boolean, required: false },
   items: { type: Array, required: true },
-  placeholder: { type: String, required: false }
+  multiple: { type: Boolean, required: false },
+  afterSelect: { type: Function, required: false },
+  roundedNone: { type: Boolean, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
-const inputMenuValue = computed({
+const modelValue = computed({
   get() {
     return whereQueryItem.value.value;
   },
@@ -14,49 +23,20 @@ const inputMenuValue = computed({
     whereQueryItem.value = { ...whereQueryItem.value, value: newValue };
   }
 });
-const searchTerm = ref("");
-const filteredItems = computed(() => {
-  if (!searchTerm.value) {
-    return props.items;
-  }
-  return props.items.filter((item) => item?.label.toLowerCase().includes(searchTerm.value.toLowerCase()));
-});
-const inputMenuRef = useTemplateRef("inputMenu");
+const selectRef = useTemplateRef("select");
 defineExpose({
   focus: () => {
-    inputMenuRef.value?.inputRef.focus();
+    selectRef.value?.focus();
   }
 });
 </script>
 
 <template>
-  <UInputMenu
-    ref="inputMenu"
-    v-model:search-term="searchTerm"
-    v-model="inputMenuValue"
-    :items="filteredItems"
-    :placeholder="placeholder"
-    multiple
-    color="neutral"
-    delete-icon="i-lucide-trash"
-    value-key="value"
-    clear
-    clear-icon="i-lucide-circle-x"
-    icon=""
-    :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:model-value="() => {
-  inputMenuRef?.inputRef.focus();
-}"
+  <VSelect
+    ref="select"
+    v-bind="props"
+    v-model="modelValue"
+    :placeholder="`\u8BF7\u9009\u62E9${label ?? ''}`"
+    rounded-none
   />
 </template>

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

@@ -1,11 +1,6 @@
-import type { WhereQueryItem } from '#v/types';
-import type { InputMenuItem, InputMenuProps } from '@nuxt/ui';
+import type { VSelectProps, 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;
-        items: InputMenuItem[];
-        placeholder?: InputMenuProps["placeholder"];
-    } & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VSelectProps<T> & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {
         "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;

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

@@ -48,8 +48,7 @@ defineExpose({
     ref="item"
     v-model:where-query-item="whereQueryItem"
     :disabled="fetching"
-    :items="option.items || []"
-    :placeholder="option.placeholder"
+    v-bind="option"
   />
   <TableQueryWhereSimpleItemOprDatePicker
     v-else-if="option.type === 'date-picker'"
@@ -62,7 +61,6 @@ defineExpose({
     ref="item"
     v-model:where-query-item="whereQueryItem"
     :disabled="fetching"
-    :trigger-fetching="triggerFetching"
     v-bind="option"
   />
 </template>

package/dist/runtime/types/components/async-select.d.ts

@@ -22,6 +22,7 @@ export type VAsyncSelectProps<T> = {
     canCreate?: boolean;
     createModalComponent?: Component;
     createModalOpenProps?: Record<string, any>;
+    roundedNone?: boolean;
 };
 export type AsyncSelectValue = string[] | number[] | string | number | undefined;
 export type AsyncSelectCombinedValue = {

package/dist/runtime/types/components/form/field.d.ts

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
-import type { ButtonProps, FormFieldProps, InputProps, RadioGroupProps, SelectMenuItem, SelectProps, TreeItem } from '@nuxt/ui';
+import type { ButtonProps, FormFieldProps, InputProps, RadioGroupProps, SelectMenuItem, TreeItem } from '@nuxt/ui';
 import type { ZodType } from 'zod';
-import type { VAsyncSelectProps } from '#v/types';
+import type { VAsyncSelectProps, VSelectProps } from '#v/types';
 export type VFormFieldAsyncSelectProps<T> = {
     initModel?: any | any[];
     onUpdateInitModel?(model: any | any[] | undefined): void;
@@ -16,12 +16,7 @@ export type VFormFieldTreeSelectTransferProps = {
     onUpdateTargetTreeItems: (val: TreeItem[]) => void;
     disabled?: boolean;
 };
-export type VFormFieldSelectProps = {
-    items: SelectMenuItem[];
-    searchable?: boolean;
-    multiple?: SelectProps['multiple'];
-    enableEmptyOption?: boolean;
-} & Pick<SelectProps, 'placeholder'>;
+export type VFormFieldSelectProps<T> = {} & VSelectProps<T>;
 export type VFormFieldDynamicObjectInputProps = {
     objectFields: Array<{
         key: string;
@@ -66,7 +61,7 @@ export type VFormFieldProps = FormFieldProps & {
     peerButtons?: ButtonProps[];
 } | {
     type: 'select';
-} & VFormFieldSelectProps | {
+} & VFormFieldSelectProps<any> | {
     type: 'multiple-select-string';
     items: SelectMenuItem[];
     searchable?: boolean;

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

@@ -3,3 +3,4 @@ export * from './form/index.js';
 export * from './date.js';
 export * from './dnd.js';
 export * from './async-select.js';
+export * from './select.js';

package/dist/runtime/types/components/index.js

@@ -3,3 +3,4 @@ export * from "./form/index.js";
 export * from "./date.js";
 export * from "./dnd.js";
 export * from "./async-select.js";
+export * from "./select.js";

package/dist/runtime/types/components/select.d.ts

@@ -0,0 +1,14 @@
+import type { InputMenuItem, InputMenuProps } from '@nuxt/ui';
+export type VSelectProps<T> = {
+    label?: string;
+    floatingPlaceholder?: boolean;
+    disabled?: InputMenuProps['disabled'];
+    placeholder?: InputMenuProps['placeholder'];
+    size?: InputMenuProps['size'];
+    icon?: InputMenuProps['icon'];
+    enableEmptyOption?: boolean;
+    items: InputMenuItem[];
+    multiple?: boolean;
+    afterSelect?(selected: T | T[] | undefined): void;
+    roundedNone?: boolean;
+};

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

@@ -1,6 +1,6 @@
 import type { OrderQueryOpr, WhereQueryOpr } from '../../query.js';
-import type { TableColumn, BadgeProps, InputMenuProps } from '@nuxt/ui';
-import type { SelectOption, VAsyncSelectProps } from '../../index.js';
+import type { BadgeProps, TableColumn } from '@nuxt/ui';
+import type { VAsyncSelectProps, VSelectProps } from '../../index.js';
 export type WhereQueryType = 'input' | 'input-number' | 'date-picker' | 'select' | 'async-select' | 'unknown';
 export type WhereQueryColumnOption<T> = {
     defaultOpr?: WhereQueryOpr;
@@ -17,10 +17,8 @@ export type WhereQueryColumnOption<T> = {
 } | {
     type: 'select';
     variant?: BadgeProps['variant'];
-    items: SelectOption[];
     empty?: BadgeProps;
-    placeholder?: InputMenuProps['placeholder'];
-} | {
+} & VSelectProps<T> | {
     type: 'async-select';
 } & VAsyncSelectProps<T> | {
     type: 'unknown';

package/package.json

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