v-nuxt-ui 0.2.33 → 0.3.0

package/dist/runtime/components/table/header/settings/columns/Item.vue

@@ -1,10 +1,14 @@
 <script setup>
-defineProps({
+const props = defineProps({
   columns: { type: Array, required: true },
   stgCol: { type: Object, required: true },
-  onFixCol: { type: Function, required: true }
+  onFixCol: { type: Function, required: true },
+  onToggleChecked: { type: Function, required: false }
 });
 const checked = defineModel("checked", { type: Boolean, skipCheck: true, ...{ required: true } });
+function handleToggleChecked() {
+  props.onToggleChecked?.(props.stgCol);
+}
 </script>
 
 <template>
@@ -51,7 +55,7 @@ const checked = defineModel("checked", { type: Boolean, skipCheck: true, ...{ re
           variant="ghost"
           size="xs"
           color="neutral"
-          @click="checked = !checked"
+          @click="handleToggleChecked"
         />
       </UTooltip>
     </div>

package/dist/runtime/components/table/header/settings/columns/Item.vue.d.ts

@@ -5,6 +5,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         columns: VColumn<T>[];
         stgCol: Column;
         onFixCol: (col: Column, fixType: FixType) => void;
+        onToggleChecked?: (col: Column) => void;
     } & {
         checked: boolean | undefined;
     }) & {

package/dist/runtime/components/table/header/settings/columns/index.d.vue.ts

@@ -1,10 +1,10 @@
-import type { VColumn } from '#v/types';
+import type { Column, VColumn } from '#v/types';
 export type FixType = 'left' | 'right' | 'unfixed';
 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<{
-        tblName: string;
+        name: string;
         rawBizColumns: VColumn<T>[];
-        onUpdateBizColumns: (cols: VColumn<T>[]) => void;
+        onUpdateBizColumns: (cols: VColumn<T>[], storageColumns?: Column[]) => void;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

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

@@ -3,11 +3,11 @@ import { ref, computed, onMounted } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import TableHeaderSettingsColumnsDndList from "#v/components/table/header/settings/columns/DndList.vue";
 const props = defineProps({
-  tblName: { type: String, required: true },
+  name: { type: String, required: true },
   rawBizColumns: { type: Array, required: true },
   onUpdateBizColumns: { type: Function, required: true }
 });
-const localTblSettings = useLocalStorage(`${props.tblName}-table-settings`, {});
+const localTblSettings = useLocalStorage(`${props.name}-table-settings`, {});
 function getFullColumns(stgCols) {
   const bizKeys = props.rawBizColumns.map((col) => col["accessorKey"]);
   const stgColsFiltered = (stgCols ?? []).filter((s) => bizKeys.includes(s.accessorKey));
@@ -85,9 +85,11 @@ function syncToParentAndStorage() {
     ...allColumns.value.filter((c) => c.fixed === "right")
   ];
   localTblSettings.value = { ...localTblSettings.value, columns: ordered };
-  const checkedKeys = ordered.filter((c) => c.checked).map((c) => c.accessorKey);
-  const sortedBizColumns = checkedKeys.map((key) => props.rawBizColumns.find((col) => col["accessorKey"] === key)).filter(Boolean);
-  props.onUpdateBizColumns(sortedBizColumns);
+  const sortedBizColumns = ordered.map((settingCol) => {
+    const bizCol = props.rawBizColumns.find((col) => col["accessorKey"] === settingCol.accessorKey);
+    return bizCol ? { ...bizCol, checked: settingCol.checked } : void 0;
+  }).filter(Boolean);
+  props.onUpdateBizColumns(sortedBizColumns, ordered);
 }
 onMounted(() => {
   syncToParentAndStorage();

package/dist/runtime/components/table/header/settings/columns/index.vue.d.ts

@@ -1,10 +1,10 @@
-import type { VColumn } from '#v/types';
+import type { Column, VColumn } from '#v/types';
 export type FixType = 'left' | 'right' | 'unfixed';
 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<{
-        tblName: string;
+        name: string;
         rawBizColumns: VColumn<T>[];
-        onUpdateBizColumns: (cols: VColumn<T>[]) => void;
+        onUpdateBizColumns: (cols: VColumn<T>[], storageColumns?: Column[]) => void;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/table/header/settings/index.d.vue.ts

@@ -1,9 +1,10 @@
-import type { VColumn } from '#v/types';
+import type { Column, VColumn } 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<{
+        name: string;
         tblName: string;
         rawBizColumns: VColumn<T>[];
-        onUpdateBizColumns: (cols: VColumn<T>[]) => void;
+        onUpdateBizColumns: (cols: VColumn<T>[], storageColumns?: Column[]) => void;
     } & {
         onClose?: ((args_0: boolean) => any) | undefined;
     }> & (typeof globalThis extends {

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

@@ -1,6 +1,7 @@
 <script setup>
 import TableHeaderSettingsColumns from "#v/components/table/header/settings/columns/index.vue";
 defineProps({
+  name: { type: String, required: true },
   tblName: { type: String, required: true },
   rawBizColumns: { type: Array, required: true },
   onUpdateBizColumns: { type: Function, required: true }
@@ -11,20 +12,20 @@ const emit = defineEmits(["close"]);
 <template>
   <USlideover
     :title="`${tblName}\u8BBE\u7F6E`"
-    description="配置表格列的显示与顺序"
+    description="通过拖拽调整顺序，使用右侧按钮固定或隐藏列"
     inset
     :close="{ onClick: () => emit('close', false) }"
   >
     <template #body>
       <TableHeaderSettingsColumns
         :raw-biz-columns="rawBizColumns"
-        :tbl-name="tblName"
-        @update-biz-columns="onUpdateBizColumns"
+        :name="name"
+        :on-update-biz-columns="onUpdateBizColumns"
       />
     </template>
     <template #footer>
       <UButton
-        label="取消"
+        label="关闭"
         color="neutral"
         variant="subtle"
         icon="i-lucide-x"

package/dist/runtime/components/table/header/settings/index.vue.d.ts

@@ -1,9 +1,10 @@
-import type { VColumn } from '#v/types';
+import type { Column, VColumn } 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<{
+        name: string;
         tblName: string;
         rawBizColumns: VColumn<T>[];
-        onUpdateBizColumns: (cols: VColumn<T>[]) => void;
+        onUpdateBizColumns: (cols: VColumn<T>[], storageColumns?: Column[]) => void;
     } & {
         onClose?: ((args_0: boolean) => any) | undefined;
     }> & (typeof globalThis extends {

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

@@ -4,6 +4,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         options: OrderQueryOption<T>[];
         unselectedFields: string[];
         bizColumns: VColumn<T>[];
+        disabled?: boolean;
     } & {
         onNew?: ((args_0: string) => any) | undefined;
     }> & (typeof globalThis extends {

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

@@ -3,7 +3,8 @@ import { ref, computed } from "vue";
 const props = defineProps({
   options: { type: Array, required: true },
   unselectedFields: { type: Array, required: true },
-  bizColumns: { type: Array, required: true }
+  bizColumns: { type: Array, required: true },
+  disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["new"]);
 const popoverOpen = ref(false);
@@ -11,7 +12,7 @@ const unselectedOptions = computed(() => {
   const options = [
     {
       id: "unselected-fields",
-      label: "\u65B0\u589E\u67E5\u8BE2\u5B57\u6BB5",
+      label: "\u65B0\u589E\u6392\u5E8F\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);
@@ -35,13 +36,19 @@ const unselectedOptions = computed(() => {
       size="sm"
       icon="i-lucide-plus"
       variant="ghost"
+      square
+      :disabled="disabled"
     >
       新增排序条件
     </UButton>
 
     <template #content>
       <UCommandPalette
+        size="sm"
         :groups="unselectedOptions"
+        :input="{
+  size: 'xs'
+}"
         :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
         placeholder="搜索未选字段"
       />

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

@@ -4,6 +4,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         options: OrderQueryOption<T>[];
         unselectedFields: string[];
         bizColumns: VColumn<T>[];
+        disabled?: boolean;
     } & {
         onNew?: ((args_0: string) => any) | undefined;
     }> & (typeof globalThis extends {

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

@@ -1,14 +1,16 @@
 <script setup>
 import { compareObjArrays } from "#v/utils";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import Dnd from "#v/components/Dnd.client.vue";
-import TableQueryOrderItem from "#v/components/table/query/order/Item.vue";
+import TableQueryOrderItem from "#v/components/table/query/order/item.vue";
 import TableQueryOrderNewer from "#v/components/table/query/order/Newer.vue";
 const props = defineProps({
   orderOptions: { type: Array, required: true },
   defaultOrderQuery: { type: Array, required: false },
   orderQuery: { type: Array, required: true },
   onUpdateOrderQuery: { type: Function, required: true },
+  orderQueryOpen: { type: Boolean, required: false },
+  onUpdateOrderQueryOpen: { type: Function, required: false },
   fetching: { type: Boolean, required: false },
   triggerFetching: { type: Function, required: true },
   bizColumns: { type: Array, required: true },
@@ -47,62 +49,52 @@ const dragOrderQuery = computed({
     onUpdateAndTriggerFetching(newOrderQuery);
   }
 });
-const open = ref(false);
 </script>
 
 <template>
-  <UPopover v-model:open="open" mode="click">
-    <UChip :show="!isOrderQueryDefault">
+  <div class="flex flex-col p-4 gap-2.5">
+    <div class="font-bold text-xs text-dimmed">
+      排序条件
+    </div>
+    <Dnd
+      v-if="dragOrderQuery.length > 0"
+      v-model="dragOrderQuery"
+      handle=".order-query-handle"
+      class="flex flex-col gap-2.5"
+    >
+      <TableQueryOrderItem
+        v-for="item in dragOrderQuery"
+        :key="item.field"
+        :field="item.field"
+        :biz-columns="bizColumns"
+        :opr="item.order"
+        :order-options="orderOptions"
+        :unselected-fields="unselectedOrderFields"
+        :disabled="fetching"
+        handle-class-name="order-query-handle"
+        @change="(newField, orderType) => onChangeField(item.field, newField, orderType)"
+        @remove="onRemoveField(item.field)"
+      />
+    </Dnd>
+    <div class="flex flex-col">
+      <TableQueryOrderNewer
+        :options="orderOptions"
+        :unselected-fields="unselectedOrderFields"
+        :biz-columns="bizColumns"
+        :disabled="fetching"
+        @new="onNewField"
+      />
       <UButton
-        icon="i-lucide-arrow-up-down"
-        :color="open ? 'primary' : 'neutral'"
-        :loading="fetching"
-        variant="outline"
-        :size="size"
+        size="sm"
+        color="neutral"
+        variant="ghost"
+        square
+        :disabled="isOrderQueryDefault || fetching"
+        icon="i-lucide-timer-reset"
+        @click="() => onUpdateAndTriggerFetching(defaultOrderQuery ?? [])"
       >
-        排序
+        重置
       </UButton>
-    </UChip>
-    <template #content>
-      <div class="flex flex-col gap-2 p-2">
-        <!-- items -->
-        <Dnd
-          v-if="dragOrderQuery.length > 0"
-          v-model="dragOrderQuery"
-          handle=".order-query-handle"
-          class="flex flex-col gap-2"
-        >
-          <TableQueryOrderItem
-            v-for="item in dragOrderQuery"
-            :key="item.field"
-            :field="item.field"
-            :biz-columns="bizColumns"
-            :opr="item.order"
-            :order-options="orderOptions"
-            :unselected-fields="unselectedOrderFields"
-            @change="(newField, orderType) => onChangeField(item.field, newField, orderType)"
-            @remove="onRemoveField(item.field)"
-          />
-        </Dnd>
-        <div class="flex flex-col">
-          <TableQueryOrderNewer
-            :options="orderOptions"
-            :unselected-fields="unselectedOrderFields"
-            :biz-columns="bizColumns"
-            @new="onNewField"
-          />
-          <UButton
-            size="sm"
-            color="neutral"
-            variant="ghost"
-            :disabled="isOrderQueryDefault || fetching"
-            icon="i-lucide-timer-reset"
-            @click="() => onUpdateAndTriggerFetching(defaultOrderQuery ?? [])"
-          >
-            重置
-          </UButton>
-        </div>
-      </div>
-    </template>
-  </UPopover>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/table/query/order/{Item.d.vue.ts → item.d.vue.ts}

@@ -6,6 +6,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         opr: OrderQueryOpr;
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
+        handleClassName?: string;
+        disabled?: boolean;
     } & {
         onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
         onRemove?: (() => any) | undefined;

package/dist/runtime/components/table/query/order/{Item.vue → item.vue}

@@ -5,7 +5,9 @@ const props = defineProps({
   bizColumns: { type: Array, required: true },
   opr: { type: [String, null], required: true },
   orderOptions: { type: Array, required: true },
-  unselectedFields: { type: Array, required: true }
+  unselectedFields: { type: Array, required: true },
+  handleClassName: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["change", "remove"]);
 const selectedValue = computed({
@@ -45,19 +47,26 @@ const onToggleOrderType = () => {
 </script>
 
 <template>
-  <div class="flex items-center gap-3 px-2.5">
-    <div class="order-query-handle cursor-move flex">
-      <UIcon name="i-lucide-grip-vertical" />
-    </div>
+  <UFieldGroup size="sm">
+    <UButton
+      variant="outline"
+      icon="i-lucide-grip-vertical"
+      color="neutral"
+      class="cursor-move hover:bg-default active:bg-default"
+      :class="handleClassName"
+      :disabled="disabled"
+    />
     <UDropdownMenu
       :items="unselectedOptions"
+      size="sm"
       :ui="{ content: 'w-54' }"
+      :disabled="disabled"
     >
       <UButton
         variant="outline"
         color="neutral"
         size="sm"
-        trailing-icon="i-lucide-chevron-down"
+        :disabled="disabled"
       >
         {{ selectedLabel }}
       </UButton>
@@ -67,19 +76,18 @@ const onToggleOrderType = () => {
       color="neutral"
       variant="outline"
       size="sm"
+      :disabled="disabled"
       @click="onToggleOrderType"
     >
       {{ props.opr === "asc" ? "\u5347\u5E8F" : "\u964D\u5E8F" }}
     </UButton>
-    <UTooltip text="删除该排序条件" :content="{ side: 'top' }">
-      <UButton
-        size="xs"
-        icon="i-lucide-x"
-        variant="ghost"
-        color="neutral"
-        class="ml-auto"
-        @click="emit('remove')"
-      />
-    </UTooltip>
-  </div>
+    <UButton
+      size="xs"
+      icon="i-lucide-x"
+      variant="outline"
+      color="neutral"
+      :disabled="disabled"
+      @click="emit('remove')"
+    />
+  </UFieldGroup>
 </template>

package/dist/runtime/components/table/query/order/{Item.vue.d.ts → item.vue.d.ts}

@@ -6,6 +6,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         opr: OrderQueryOpr;
         orderOptions: OrderQueryOption<T>[];
         unselectedFields: string[];
+        handleClassName?: string;
+        disabled?: boolean;
     } & {
         onChange?: ((args_0: string, args_1: OrderQueryOpr) => any) | undefined;
         onRemove?: (() => any) | undefined;

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

@@ -35,14 +35,14 @@ const unselectedOptions = computed(() => {
   });
   const items = [];
   if (commonFields.length > 0) {
-    items.push({ type: "label", label: "\u5E38\u7528\u6761\u4EF6" });
+    items.push({ type: "label", label: "\u5E38\u7528\u67E5\u8BE2\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" });
+    items.push({ type: "label", label: "\u5176\u4ED6\u67E5\u8BE2\u6761\u4EF6" });
     otherFields.forEach((field) => items.push(buildFieldItem(field)));
   }
   return items;