v-nuxt-ui 0.2.19 → 0.2.21

package/dist/module.json

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

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/sys/user/Table.vue

@@ -192,11 +192,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "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",