v-nuxt-ui 0.2.33 → 0.3.0

package/dist/runtime/components/sys/table/SaveModal.vue

@@ -13,7 +13,6 @@ const columnListRef = ref();
 const { onSubmit } = useFormSubmission(
   toRef(oldValues),
   toRef(newValues),
-  (close) => emit("close", close),
   async (model) => {
     const tableApi = useTableApi();
     if (model.id === 0) {

package/dist/runtime/components/sys/table/TableColumnModal.vue

@@ -22,6 +22,10 @@ const fields = computed(() => [
   { name: "fixed", type: "select", label: "\u56FA\u5B9A", colSpan: "8", items: fixedItems, enableEmptyOption: false, zodType: z.string().optional() },
   { name: "visible", type: "switch", label: "\u662F\u5426\u663E\u793A", colSpan: "24", zodType: z.boolean().optional() }
 ]);
+async function onSubmit() {
+  props.onSaveColumn(newValues.value);
+  return true;
+}
 </script>
 
 <template>
@@ -32,9 +36,6 @@ const fields = computed(() => [
     :model-value="newValues"
     :old-model-value="oldValues"
     @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
-    @submit="async () => {
-  props.onSaveColumn(newValues);
-  emit('close', true);
-}"
+    @submit="onSubmit"
   />
 </template>

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

@@ -14,7 +14,6 @@ const { oldValues, newValues } = useFormValues(toRef(props.model), { id: 0, need
 const { onSubmit } = useFormSubmission(
   toRef(oldValues),
   toRef(newValues),
-  (close) => emit("close", close),
   (model) => emit("save", model),
   useUserApi,
   ["roles", "menus"],

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

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import { useOverlay } from "@nuxt/ui/composables";
 import { isEmptyString } from "#v/utils";
 import { useDepartmentApi, useRoleApi, useUserApi } from "#v/composables";
-import { booleanOptions, dateFormat, genderOptions, loginTypeOptions } from "#v/constants";
+import { booleanOptions, dateFormat, genderOptions } from "#v/constants";
 import SysUsersSaveModal from "./SaveModal.vue";
 import UBadge from "@nuxt/ui/components/Badge.vue";
 import TablePage from "#v/components/table/Page.vue";
@@ -54,9 +54,9 @@ const columns = [
     header: "\u76F4\u5C5E\u4E0A\u7EA7",
     sortOption: true,
     cell: ({ row }) => row.original.supervisor?.nickname,
-    preferred: false,
     filterOption: {
       type: "async-select",
+      preferred: false,
       listApi: useUserApi().list,
       likeSearchFields: ["nickname"],
       labelField: "nickname",
@@ -68,10 +68,11 @@ const columns = [
   {
     accessorKey: "roles",
     header: "\u6743\u9650\u89D2\u8272",
-    preferred: false,
     cell: ({ row }) => row.original.roles?.map((role) => role.name).join(", "),
     filterOption: {
       type: "async-select",
+      preferred: false,
+      initHide: true,
       listApi: useRoleApi().list,
       likeSearchFields: ["name"],
       labelField: "name",
@@ -95,11 +96,6 @@ const columns = [
   {
     accessorKey: "loginType",
     header: "\u767B\u5F55\u65B9\u5F0F",
-    filterOption: {
-      type: "select",
-      items: loginTypeOptions
-    },
-    preferred: false,
     meta: {
       class: {
         td: "min-w-24"
@@ -110,23 +106,13 @@ const columns = [
     accessorKey: "email",
     header: "\u90AE\u7BB1",
     filterOption: {
-      type: "input"
+      type: "input",
+      initHide: true
     }
   },
   {
     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",
-        color: "neutral"
-      }
-    }
+    header: "\u5DE5\u65F6\u586B\u62A5"
   },
   {
     accessorKey: "gender",
@@ -151,18 +137,20 @@ const columns = [
     accessorKey: "entryDate",
     header: "\u5165\u804C\u65F6\u95F4",
     sortOption: true,
-    preferred: false,
     filterOption: {
-      type: "date-picker"
+      type: "date-picker",
+      preferred: false,
+      initHide: true
     },
     cell: ({ row }) => dayjs(row.getValue("entryDate")).format(dateFormat)
   },
   {
     accessorKey: "resignDate",
     header: "\u79BB\u804C\u65F6\u95F4",
-    preferred: false,
     filterOption: {
-      type: "date-picker"
+      type: "date-picker",
+      preferred: false,
+      initHide: true
     },
     sortOption: true,
     cell: ({ row }) => dayjs(row.getValue("resignDate")).format(dateFormat)
@@ -171,7 +159,8 @@ const columns = [
     accessorKey: "telNo",
     header: "\u7535\u8BDD",
     filterOption: {
-      type: "input"
+      type: "input",
+      initHide: true
     },
     meta: {
       class: {
@@ -181,12 +170,13 @@ const columns = [
   },
   {
     accessorKey: "isAdmin",
-    header: "\u662F\u5426\u662F\u7CFB\u7EDF\u7BA1\u7406\u5458",
+    header: "\u7CFB\u7EDF\u7BA1\u7406\u5458",
     sortOption: true,
-    preferred: false,
     filterOption: {
       type: "select",
-      items: booleanOptions
+      items: booleanOptions,
+      preferred: false,
+      initHide: true
     }
   }
 ];

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

@@ -4,6 +4,7 @@ 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 TableQueryOrder from "#v/components/table/query/order/index.vue";
 import TablePagination from "#v/components/table/Pagination.vue";
 import ScrollArea from "#v/components/ScrollArea.vue";
 import LayoutButtonCollapse from "#v/components/layout/button/Collapse.vue";
@@ -129,16 +130,16 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
     <USlideover
       :open="tblHeaderProps.whereQueryProps.whereQueryOpen"
       side="top"
+      inset
       :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>
+      <template #content>
         <TableQueryWhere
           ref="proTableQueryWhere"
           v-bind="tblWhereQueryProps"
@@ -149,5 +150,25 @@ defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data
         />
       </template>
     </USlideover>
+
+    <!-- query order (drawer from right) -->
+    <USlideover
+      :open="tblHeaderProps.orderQueryProps.orderQueryOpen"
+      side="top"
+      inset
+      :portal="`#${tablePortalId}`"
+      :ui="{
+  content: '!absolute z-2 h-fit w-fit ml-auto',
+  overlay: 'z-1'
+}"
+      @update:open="tblHeaderProps.orderQueryProps.onUpdateOrderQueryOpen"
+    >
+      <template #content>
+        <TableQueryOrder
+          v-bind="tblHeaderProps.orderQueryProps"
+          :trigger-fetching="tblHeaderProps.orderQueryProps.triggerFetching"
+        />
+      </template>
+    </USlideover>
   </div>
 </template>

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

@@ -32,7 +32,7 @@ const isMobile = useApp().isMobile;
         :total="total"
         :size="size"
         variant="outline"
-        active-variant="subtle"
+        active-variant="outline"
         :disabled="fetching"
         :sibling-count="isMobile ? 1 : 2"
         @update:page="onUpdatePage"

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

@@ -1,17 +1,21 @@
 <script setup>
-import { markRaw } from "vue";
+import { markRaw, computed } from "vue";
 import { defu } from "defu";
+import { compareObjArrays } from "#v/utils";
 import { useOverlay } from "@nuxt/ui/composables";
 import UButton from "@nuxt/ui/components/Button.vue";
 import UChip from "@nuxt/ui/components/Chip.vue";
 import UKbd from "@nuxt/ui/components/Kbd.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
 import PermissionWrapper from "#v/components/PermissionWrapper.vue";
-import TableQueryOrder from "#v/components/table/query/order/index.vue";
 import DeleteModal from "#v/components/DeleteModal.vue";
 import TableHeaderSettings from "#v/components/table/header/settings/index.vue";
 import TableExcelExportModal from "#v/components/table/ExcelExportModal.vue";
+import { useApp } from "#v/composables";
 const props = defineProps({
   name: { type: String, required: true },
+  tblName: { type: String, required: false },
   fetching: { type: Boolean, required: false },
   rawBizColumns: { type: Array, required: true },
   onUpdateBizColumns: { type: Function, required: false },
@@ -38,6 +42,8 @@ const props = defineProps({
   extraButtons: { type: Array, required: false },
   size: { type: null, required: false, default: "md" }
 });
+const app = useApp();
+const isMobile = app.isMobile;
 const defaultNewRow = { id: 0 };
 const overlay = useOverlay();
 const deleteModal = markRaw(overlay.create(DeleteModal));
@@ -57,9 +63,10 @@ async function handleSettings() {
   if (!props.onUpdateBizColumns) return;
   const updateFn = props.onUpdateBizColumns;
   await settingsModal.open({
-    tblName: props.name,
+    name: props.name,
+    tblName: props.tblName ?? props.name,
     rawBizColumns: props.rawBizColumns,
-    onUpdateBizColumns: ((cols) => updateFn(cols))
+    onUpdateBizColumns: ((cols, storageColumns) => updateFn(cols, storageColumns))
   });
 }
 async function handleExportExcel() {
@@ -107,77 +114,227 @@ async function onRightExtraButtonClick(btn, e) {
     originalOnClick?.(e);
   }
 }
+const headerActions = computed(() => {
+  const actions = [];
+  props.extraButtons?.forEach((btn) => {
+    const visible = (!btn.withBatchData || !!props.selectedIds?.length) && btn.appendTo === "left";
+    if (visible) {
+      actions.push({
+        key: `extra-left-${btn.button.label}`,
+        label: btn.button.label ?? "",
+        icon: btn.button.icon,
+        visible,
+        onSelect: () => onLeftExtraButtonClick(btn, new MouseEvent("click"))
+      });
+    }
+  });
+  for (const opr of props.oprOrder) {
+    if (opr === "create") {
+      actions.push({
+        key: "create",
+        label: "\u65B0\u589E",
+        icon: "i-lucide-plus",
+        visible: !props.disableCreation,
+        onSelect: () => handleCreate()
+      });
+    }
+    if (opr === "refresh") {
+      actions.push({
+        key: "refresh",
+        label: "\u5237\u65B0",
+        icon: "i-lucide-refresh-ccw",
+        visible: true,
+        onSelect: () => props.fetchList()
+      });
+    }
+    if (opr === "whereQuery") {
+      actions.push({
+        key: "whereQuery",
+        label: "\u67E5\u8BE2",
+        icon: "i-lucide-list-filter",
+        visible: !props.disableWhereQuery,
+        onSelect: () => props.whereQueryProps.onUpdateWhereQueryOpen?.(!props.whereQueryProps.whereQueryOpen)
+      });
+    }
+    if (opr === "orderQuery") {
+      actions.push({
+        key: "orderQuery",
+        label: "\u6392\u5E8F",
+        icon: "i-lucide-arrow-up-down",
+        visible: !props.disableOrderQuery,
+        onSelect: () => {
+          props.orderQueryProps.onUpdateOrderQueryOpen?.(true);
+        }
+      });
+    }
+    if (opr === "settings") {
+      actions.push({
+        key: "settings",
+        label: "\u8BBE\u7F6E",
+        icon: "i-lucide-settings",
+        visible: !props.disableSettings && !!props.rawBizColumns?.length && !!props.onUpdateBizColumns,
+        onSelect: () => handleSettings()
+      });
+    }
+    if (opr === "exportExcel") {
+      actions.push({
+        key: "exportExcel",
+        label: "\u5BFC\u51FA",
+        icon: "i-lucide-sheet",
+        visible: !!props.exportExcel,
+        onSelect: () => handleExportExcel()
+      });
+    }
+    if (opr === "batchDelete") {
+      actions.push({
+        key: "batchDelete",
+        label: "\u6279\u91CF\u5220\u9664",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        visible: !props.disableBatchDeletion && !!props.selectedIds?.length,
+        onSelect: () => handleBatchDelete()
+      });
+    }
+  }
+  props.extraButtons?.forEach((btn) => {
+    const visible = (!btn.withBatchData || !!props.selectedIds?.length) && btn.appendTo === "right";
+    if (visible) {
+      actions.push({
+        key: `extra-right-${btn.button.label}`,
+        label: btn.button.label ?? "",
+        icon: btn.button.icon,
+        visible,
+        onSelect: () => onRightExtraButtonClick(btn, new MouseEvent("click"))
+      });
+    }
+  });
+  return actions.filter((a) => a.visible);
+});
+const mobileMoreItems = computed(
+  () => headerActions.value.filter((a) => a.key !== "create").map((a) => ({
+    label: a.label,
+    icon: a.icon,
+    color: a.color,
+    onSelect: a.onSelect
+  }))
+);
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-3">
-    <template v-for="(btn, i) in extraButtons" :key="`extra-left-${i}`">
+  <!-- 移动端：新增 + 更多操作下拉 -->
+  <div v-if="isMobile" class="flex flex-wrap items-center gap-3">
+    <UFieldGroup>
       <UButton
-        v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'left'"
-        v-bind="omitOnClick(btn.button)"
-        @click="(e) => onLeftExtraButtonClick(btn, e)"
-      />
-    </template>
-
-    <template v-for="opr in oprOrder" :key="opr">
-      <UButton
-        v-if="opr === 'create' && !disableCreation"
+        v-if="!disableCreation"
         icon="i-lucide-plus"
         :size="size"
+        variant="subtle"
         @click="handleCreate"
       >
         新增
       </UButton>
+      <UDropdownMenu v-if="mobileMoreItems.length" :items="mobileMoreItems">
+        <UButton
+          icon="i-lucide-ellipsis"
+          :size="size"
+          color="neutral"
+          variant="outline"
+          :loading="fetching"
+        />
+      </UDropdownMenu>
+    </UFieldGroup>
+  </div>
+  <template v-else>
+    <div class="flex flex-wrap items-center gap-3">
+      <template v-for="(btn, i) in extraButtons" :key="`extra-left-${i}`">
+        <UButton
+          v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'left'"
+          v-bind="omitOnClick(btn.button)"
+          @click="(e) => onLeftExtraButtonClick(btn, e)"
+        />
+      </template>
 
-      <UButton
-        v-if="opr === 'refresh'"
-        icon="i-lucide-refresh-ccw"
-        :size="size"
-        color="neutral"
-        :loading="fetching"
-        variant="outline"
-        @click="fetchList"
-      >
-        刷新
-      </UButton>
+      <template v-for="opr in oprOrder" :key="opr">
+        <UButton
+          v-if="opr === 'create' && !disableCreation"
+          icon="i-lucide-plus"
+          :size="size"
+          variant="subtle"
+          @click="handleCreate"
+        >
+          新增
+        </UButton>
 
-      <!-- whereQuery: toggle panel -->
-      <UChip
-        v-if="opr === 'whereQuery' && !disableWhereQuery"
-        :show="!whereQueryProps.isWhereQueryValueEmpty"
-      >
         <UButton
-          icon="i-lucide-list-filter"
+          v-if="opr === 'refresh'"
+          icon="i-lucide-refresh-ccw"
           :size="size"
-          :color="whereQueryProps.whereQueryOpen ? 'primary' : 'neutral'"
+          color="neutral"
           :loading="fetching"
           variant="outline"
-          @click="whereQueryProps.onUpdateWhereQueryOpen?.(!whereQueryProps.whereQueryOpen)"
+          @click="fetchList"
         >
-          查询
+          刷新
         </UButton>
-      </UChip>
 
-      <TableQueryOrder
-        v-if="opr === 'orderQuery' && !disableOrderQuery"
-        v-bind="orderQueryProps"
-        :size="size"
-      />
+        <!-- whereQuery: toggle panel -->
+        <UChip
+          v-if="opr === 'whereQuery' && !disableWhereQuery"
+          :show="!whereQueryProps.isWhereQueryValueEmpty"
+        >
+          <UButton
+            icon="i-lucide-list-filter"
+            :size="size"
+            :color="whereQueryProps.whereQueryOpen ? 'primary' : 'neutral'"
+            :loading="fetching"
+            variant="outline"
+            @click="whereQueryProps.onUpdateWhereQueryOpen?.(!whereQueryProps.whereQueryOpen)"
+          >
+            查询
+          </UButton>
+        </UChip>
 
-      <UButton
-        v-if="opr === 'settings' && !disableSettings && rawBizColumns?.length && onUpdateBizColumns"
-        icon="i-lucide-settings"
-        :size="size"
-        color="neutral"
-        variant="outline"
-        @click="handleSettings"
-      >
-        设置
-      </UButton>
+        <UChip
+          v-if="opr === 'orderQuery' && !disableOrderQuery"
+          :show="!compareObjArrays(orderQueryProps.orderQuery, orderQueryProps.defaultOrderQuery)"
+        >
+          <UButton
+            icon="i-lucide-arrow-up-down"
+            :size="size"
+            :color="orderQueryProps.orderQueryOpen ? 'primary' : 'neutral'"
+            :loading="fetching"
+            variant="outline"
+            @click="orderQueryProps.onUpdateOrderQueryOpen?.(!orderQueryProps.orderQueryOpen)"
+          >
+            排序
+          </UButton>
+        </UChip>
+
+        <UButton
+          v-if="opr === 'settings' && !disableSettings && rawBizColumns?.length && onUpdateBizColumns"
+          icon="i-lucide-settings"
+          :size="size"
+          color="neutral"
+          variant="outline"
+          @click="handleSettings"
+        >
+          设置
+        </UButton>
 
-      <template v-if="opr === 'exportExcel' && exportExcel">
-        <PermissionWrapper v-if="exportExcel.permissionKey" :permission="exportExcel.permissionKey">
+        <template v-if="opr === 'exportExcel' && exportExcel">
+          <PermissionWrapper v-if="exportExcel.permissionKey" :permission="exportExcel.permissionKey">
+            <UButton
+              icon="i-lucide-sheet"
+              :size="size"
+              color="neutral"
+              variant="outline"
+              @click="handleExportExcel"
+            >
+              导出
+            </UButton>
+          </PermissionWrapper>
           <UButton
+            v-else
             icon="i-lucide-sheet"
             :size="size"
             color="neutral"
@@ -186,42 +343,32 @@ async function onRightExtraButtonClick(btn, e) {
           >
             导出
           </UButton>
-        </PermissionWrapper>
+        </template>
+
         <UButton
-          v-else
-          icon="i-lucide-sheet"
+          v-if="opr === 'batchDelete' && !disableBatchDeletion && selectedIds?.length"
+          icon="i-lucide-trash-2"
           :size="size"
-          color="neutral"
+          color="error"
           variant="outline"
-          @click="handleExportExcel"
+          @click="handleBatchDelete"
         >
-          导出
+          批量删除
+          <template #trailing>
+            <UKbd size="sm">
+              {{ selectedIds?.length ?? 0 }}
+            </UKbd>
+          </template>
         </UButton>
       </template>
 
-      <UButton
-        v-if="opr === 'batchDelete' && !disableBatchDeletion && selectedIds?.length"
-        icon="i-lucide-trash-2"
-        :size="size"
-        color="error"
-        variant="outline"
-        @click="handleBatchDelete"
-      >
-        批量删除
-        <template #trailing>
-          <UKbd size="sm">
-            {{ selectedIds?.length ?? 0 }}
-          </UKbd>
-        </template>
-      </UButton>
-    </template>
-
-    <template v-for="(btn, i) in extraButtons" :key="`extra-right-${i}`">
-      <UButton
-        v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'right'"
-        v-bind="omitOnClick(btn.button)"
-        @click="(e) => onRightExtraButtonClick(btn, e)"
-      />
-    </template>
-  </div>
+      <template v-for="(btn, i) in extraButtons" :key="`extra-right-${i}`">
+        <UButton
+          v-if="(!btn.withBatchData || selectedIds?.length) && btn.appendTo === 'right'"
+          v-bind="omitOnClick(btn.button)"
+          @click="(e) => onRightExtraButtonClick(btn, e)"
+        />
+      </template>
+    </div>
+  </template>
 </template>

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

@@ -8,6 +8,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         group: DndProps<T>["group"];
         handle: DndProps<T>["handle"];
         onFixCol: (col: Column, fixType: FixType) => void;
+        onToggleChecked?: (col: Column) => void;
         onAfterDrag?: () => void;
     } & {
         list: Column[];

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

@@ -8,6 +8,7 @@ defineProps({
   group: { type: null, required: true },
   handle: { type: String, required: true },
   onFixCol: { type: Function, required: true },
+  onToggleChecked: { type: Function, required: false },
   onAfterDrag: { type: Function, required: false }
 });
 const list = defineModel("list", { type: Array, ...{ required: true } });
@@ -38,7 +39,8 @@ const list = defineModel("list", { type: Array, ...{ required: true } });
           v-model:checked="element.checked"
           :stg-col="element"
           :columns="rawBizColumns"
-          @fix-col="onFixCol"
+          :on-fix-col="onFixCol"
+          :on-toggle-checked="onToggleChecked"
         />
       </Dnd>
     </ScrollArea>

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

@@ -8,6 +8,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         group: DndProps<T>["group"];
         handle: DndProps<T>["handle"];
         onFixCol: (col: Column, fixType: FixType) => void;
+        onToggleChecked?: (col: Column) => void;
         onAfterDrag?: () => void;
     } & {
         list: Column[];

package/dist/runtime/components/table/header/settings/columns/Item.d.vue.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;
     }) & {