v-nuxt-ui 0.1.35 → 0.2.0

package/dist/runtime/components/table/permission/TablePermissionConfig.vue.d.ts

@@ -4,10 +4,10 @@ type __VLS_Props = {
     tableId?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (args_0: boolean) => any;
+    close: (result: false | TablePermission) => any;
     save: (args_0: TablePermission) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((args_0: boolean) => any) | undefined;
+    onClose?: ((result: false | TablePermission) => any) | undefined;
     onSave?: ((args_0: TablePermission) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/table/permission/TablePermissionTab.vue

@@ -10,23 +10,26 @@ const toast = useToast();
 const tablePermissionConfigModal = overlay.create(TablePermissionConfig);
 function openAddModal() {
   tablePermissionConfigModal.open({}).result.then((result) => {
-    if (result?.save) {
-      const newPermissions = [...props.modelValue, result.save];
+    if (result && typeof result === "object") {
+      const saved = result;
+      const newPermissions = [...props.modelValue, saved];
       emit("update:modelValue", newPermissions);
     }
   });
 }
 function openEditModal(permission) {
   tablePermissionConfigModal.open({ permission }).result.then((result) => {
-    if (result?.save) {
+    if (result && typeof result === "object") {
+      const saved = result;
       const newPermissions = props.modelValue.map(
-        (p) => p.tableId === result.save.tableId ? result.save : p
+        (p) => p.tableId === saved.tableId ? saved : p
       );
       emit("update:modelValue", newPermissions);
     }
   });
 }
 function removePermission(tableId) {
+  if (tableId === void 0) return;
   toast.add({
     title: "\u786E\u8BA4\u5220\u9664",
     description: "\u786E\u5B9A\u8981\u5220\u9664\u8BE5 Table \u6743\u9650\u5417\uFF1F",

package/dist/runtime/components/table/query/order/Item.d.vue.ts

@@ -7,15 +7,15 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
     } & {
-        onRemove?: (() => any) | undefined;
         onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
+        onRemove?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "remove") => void) & ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void);
+    emit: ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/table/query/order/Item.vue.d.ts

@@ -7,15 +7,15 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
     } & {
-        onRemove?: (() => any) | undefined;
         onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
+        onRemove?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "remove") => void) & ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void);
+    emit: ((evt: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from "vue";
 import ButtonDropdown from "#v/components/button/Dropdown.vue";
+import { tableWhereQueryItemIconMap } from "#v/constants";
 const props = defineProps({
   options: { type: Array, required: true },
   unselectedFields: { type: Array, required: true },
@@ -19,6 +20,7 @@ const unselectedOptions = computed(() => {
         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;

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

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

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

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

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

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

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

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