v-nuxt-ui 0.1.0

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

@@ -0,0 +1,35 @@
+<script setup>
+import TableHeaderSettingsColumns from "#v/components/table/header/settings/columns/index.vue";
+defineProps({
+  tblName: { type: String, required: true },
+  rawBizColumns: { type: Array, required: true },
+  onUpdateBizColumns: { type: Function, required: true }
+});
+const emit = defineEmits(["close"]);
+</script>
+
+<template>
+  <USlideover
+    :title="`${tblName}\u8BBE\u7F6E`"
+    description="配置表格列的显示与顺序"
+    inset
+    :close="{ onClick: () => emit('close', false) }"
+  >
+    <template #body>
+      <TableHeaderSettingsColumns
+        :raw-biz-columns="rawBizColumns"
+        :tbl-name="tblName"
+        @update-biz-columns="onUpdateBizColumns"
+      />
+    </template>
+    <template #footer>
+      <UButton
+        label="取消"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-x"
+        @click="emit('close', false)"
+      />
+    </template>
+  </USlideover>
+</template>

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

@@ -0,0 +1,25 @@
+import type { 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<{
+        tblName: string;
+        rawBizColumns: VColumn<T>[];
+        onUpdateBizColumns: (cols: VColumn<T>[]) => void;
+    } & {
+        onClose?: ((args_0: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "close", args_0: boolean) => 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/table/index.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VTableProps } 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<VTableProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        createRow: (model: T) => number;
+        updateRow: (model: T) => void;
+        deleteRow: (model: T) => void;
+        refresh: (fromStart?: boolean) => Promise<void>;
+        stats: import("vue").Ref<import("#v/types").StatsItem[][], import("#v/types").StatsItem[][]>;
+        data: import("vue").Ref<T[], T[]>;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => 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/table/index.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { useProTableView } from "#v/composables/table/useTableView";
+import TableHeader from "#v/components/table/header/index.vue";
+import TableQueryWhere from "#v/components/table/query/where/index.vue";
+import TablePagination from "#v/components/table/Pagination.vue";
+import ScrollArea from "#v/components/ScrollArea.vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  cnName: { type: String, required: true },
+  disableCreation: { type: Boolean, required: false },
+  disableRefresh: { type: Boolean, required: false },
+  disableBatchDeletion: { type: Boolean, required: false },
+  disableSettings: { type: Boolean, required: false },
+  disablePagination: { type: Boolean, required: false },
+  disableFetchOnMounted: { type: Boolean, required: false },
+  useApiGroup: { type: Function, required: false },
+  apiListFn: { type: Function, required: false },
+  fetchAll: { type: Boolean, required: false },
+  onEditRowFromModal: { type: Function, required: false },
+  singleColumn: { type: Boolean, required: false, default: false },
+  hideLastRowBorder: { type: Boolean, required: false },
+  singleRow: { type: Boolean, required: false, default: true },
+  exportExcel: { type: Object, required: false },
+  extraButtons: { type: Array, required: false },
+  onNew: { type: Function, required: false },
+  disableWhereQuery: { type: Boolean, required: false },
+  whereQueryOpen: { type: Boolean, required: false },
+  onUpdateWhereQueryOpen: { type: Function, required: false },
+  extraWhereQueryOptions: { type: Array, required: false },
+  extraWhereQueryInitValues: { type: Object, required: false },
+  disableOrderQuery: { type: Boolean, required: false },
+  extraOrderQueryOptions: { type: Array, required: false },
+  bizColumns: { type: Array, required: true },
+  extraRowActions: { type: Array, required: false },
+  treeifyColName: { type: null, required: false },
+  commonColumnProps: { type: Object, required: false },
+  rowKey: { type: null, required: false },
+  disableRowActions: { type: Boolean, required: false },
+  disableRowUpdate: { type: Boolean, required: false },
+  disableRowCopy: { type: Boolean, required: false },
+  disableRowDeletion: { type: Boolean, required: false },
+  disableRowSelection: { type: Boolean, required: false },
+  expandable: { type: Boolean, required: false },
+  expandVNode: { type: Function, required: false },
+  rowSpanColumns: { type: Array, required: false },
+  customRowCopyFn: { type: Function, required: false }
+});
+const {
+  // data
+  data,
+  createRow,
+  updateRow,
+  deleteRow,
+  stats,
+  // crud
+  fetchList,
+  // row selection
+  rowSelection,
+  onUpdateRowSelection,
+  // props
+  tblProps,
+  tblWhereQueryProps,
+  tblHeaderProps,
+  tblPaginationProps,
+  // others
+  tblContextMenuItems,
+  // view
+  tableWidth,
+  updateTableWidth,
+  tblClasses,
+  tblUi
+} = useProTableView(props);
+defineExpose({ createRow, updateRow, deleteRow, refresh: fetchList, stats, data });
+</script>
+
+<template>
+  <div ref="table" class="flex flex-col h-full">
+    <!-- header -->
+    <div class="flex flex-col">
+      <div class="flex items-center gap-1 py-2 px-3 h-(--ui-header-height) border-b border-default">
+        <div class="font-semibold text-highlighted truncate">
+          {{ cnName }}
+        </div>
+        <TableHeader v-bind="tblHeaderProps" class="ml-auto" />
+      </div>
+      <UCollapsible :open="tblHeaderProps.whereQueryProps.whereQueryOpen">
+        <template #content>
+          <TableQueryWhere ref="proTableQueryWhere" v-bind="tblWhereQueryProps" class="border-b border-default" />
+        </template>
+      </UCollapsible>
+    </div>
+
+    <!-- table -->
+    <UContextMenu :items="tblContextMenuItems">
+      <ScrollArea class="flex-1">
+        <UTable
+          v-bind="tblProps"
+          :row-selection="rowSelection"
+          :class="tblClasses"
+          :ui="tblUi"
+          @resize="updateTableWidth"
+          @update:row-selection="onUpdateRowSelection"
+        >
+          <template v-if="expandable" #expanded="{ row }">
+            <div
+              class="px-1 py-3 sticky inset-4 overflow-hidden"
+              :style="{
+  width: `${tableWidth - 38}px`
+}"
+            >
+              <component :is="() => expandVNode?.(row.original)" role="expand-row" />
+            </div>
+          </template>
+        </UTable>
+      </ScrollArea>
+    </UContextMenu>
+
+    <!-- pagination -->
+    <TablePagination v-bind="tblPaginationProps" />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { VTableProps } 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<VTableProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        createRow: (model: T) => number;
+        updateRow: (model: T) => void;
+        deleteRow: (model: T) => void;
+        refresh: (fromStart?: boolean) => Promise<void>;
+        stats: import("vue").Ref<import("#v/types").StatsItem[][], import("#v/types").StatsItem[][]>;
+        data: import("vue").Ref<T[], T[]>;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => 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/table/query/order/Item.d.vue.ts

@@ -0,0 +1,28 @@
+import type { OrderQueryOpr, OrderQueryOption, 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<{
+        field: string;
+        bizColumns: VColumn<T>[];
+        opr: OrderQueryOpr;
+        orderOptions: OrderQueryOption<any>[];
+        unselectedFields: string[];
+    } & {
+        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: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => 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/table/query/order/Item.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  field: { type: String, required: true },
+  bizColumns: { type: Array, required: true },
+  opr: { type: [String, null], required: true },
+  orderOptions: { type: Array, required: true },
+  unselectedFields: { type: Array, required: true }
+});
+const emit = defineEmits(["change", "remove"]);
+const selectedValue = computed({
+  get() {
+    return props.field;
+  },
+  set(newField) {
+    emit("change", newField, props.opr);
+  }
+});
+const selectedLabel = computed(() => {
+  const option = props.orderOptions.find((option2) => option2.field === props.field);
+  const column = props.bizColumns.find((column2) => column2["accessorKey"] === props.field);
+  return column?.header || option?.label || props.field;
+});
+const unselectedOptions = computed(() => {
+  const options = [props.field].concat(props.unselectedFields).map((field) => {
+    const option = props.orderOptions.find((option2) => option2.field === field);
+    const column = props.bizColumns.find((column2) => column2["accessorKey"] === field);
+    return {
+      type: "checkbox",
+      value: field,
+      checked: selectedValue.value === field,
+      label: column?.header || option?.label || field,
+      onSelect: () => selectedValue.value = field
+    };
+  });
+  options.unshift({
+    type: "label",
+    label: "\u66FF\u6362\u6392\u5E8F\u6761\u4EF6"
+  });
+  return options;
+});
+const onToggleOrderType = () => {
+  emit("change", props.field, props.opr === "asc" ? "desc" : "asc");
+};
+</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>
+    <UDropdownMenu
+      :items="unselectedOptions"
+      :ui="{ content: 'w-54' }"
+    >
+      <UButton
+        variant="outline"
+        color="neutral"
+        size="sm"
+        trailing-icon="i-lucide-chevron-down"
+      >
+        {{ selectedLabel }}
+      </UButton>
+    </UDropdownMenu>
+    <UButton
+      :icon="props.opr === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow'"
+      color="neutral"
+      variant="outline"
+      size="sm"
+      @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>
+</template>

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

@@ -0,0 +1,28 @@
+import type { OrderQueryOpr, OrderQueryOption, 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<{
+        field: string;
+        bizColumns: VColumn<T>[];
+        opr: OrderQueryOpr;
+        orderOptions: OrderQueryOption<any>[];
+        unselectedFields: string[];
+    } & {
+        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: "change", args_0: string, args_1: OrderQueryOpr) => void) & ((evt: "remove") => 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/table/query/order/Newer.d.vue.ts

@@ -0,0 +1,25 @@
+import type { OrderQueryOption, 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<{
+        options: OrderQueryOption<T>[];
+        unselectedFields: string[];
+        bizColumns: VColumn<T>[];
+    } & {
+        onNew?: ((args_0: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "new", args_0: string) => 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/table/query/order/Newer.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  unselectedFields: { type: Array, required: true },
+  bizColumns: { type: Array, required: true }
+});
+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,
+          onSelect: () => {
+            emit("new", field);
+            popoverOpen.value = false;
+          }
+        };
+      })
+    }
+  ];
+  return options;
+});
+</script>
+
+<template>
+  <UPopover v-model:open="popoverOpen">
+    <UButton
+      size="sm"
+      icon="i-lucide-plus"
+      variant="ghost"
+    >
+      新增排序条件
+    </UButton>
+
+    <template #content>
+      <UCommandPalette
+        :groups="unselectedOptions"
+        :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
+        placeholder="搜索未选字段"
+      />
+    </template>
+  </UPopover>
+</template>

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

@@ -0,0 +1,25 @@
+import type { OrderQueryOption, 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<{
+        options: OrderQueryOption<T>[];
+        unselectedFields: string[];
+        bizColumns: VColumn<T>[];
+    } & {
+        onNew?: ((args_0: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "new", args_0: string) => 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/table/query/order/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { OrderQueryProps } 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<OrderQueryProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => 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/table/query/order/index.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { compareObjArrays } from "#v/utils";
+import { computed, ref } from "vue";
+import Dnd from "#v/components/Dnd.client.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 },
+  fetching: { type: Boolean, required: false },
+  triggerFetching: { type: Function, required: true },
+  bizColumns: { type: Array, required: true },
+  size: { type: null, required: false }
+});
+const isOrderQueryDefault = computed(() => compareObjArrays(props.orderQuery, props.defaultOrderQuery));
+const unselectedOrderFields = computed(() => {
+  const selectedFields = props.orderQuery.map((query) => query.field);
+  return props.orderOptions.filter((option) => !selectedFields.includes(option.field)).map((option) => option.field);
+});
+const onUpdateAndTriggerFetching = async (newOrderQuery) => {
+  props.onUpdateOrderQuery(newOrderQuery);
+  await props.triggerFetching();
+};
+const onNewField = (field) => {
+  onUpdateAndTriggerFetching([...props.orderQuery, { field, order: "desc" }]);
+};
+const onChangeField = (oldField, newField, opr) => {
+  const oldIdx = props.orderQuery.findIndex((query) => query.field === oldField);
+  if (oldIdx !== -1) {
+    onUpdateAndTriggerFetching(
+      props.orderQuery.map((query, idx) => idx === oldIdx ? { field: newField, order: opr } : query)
+    );
+  } else {
+    onUpdateAndTriggerFetching([...props.orderQuery, { field: newField, order: opr }]);
+  }
+};
+const onRemoveField = (field) => {
+  onUpdateAndTriggerFetching(props.orderQuery.filter((query) => query.field !== field));
+};
+const dragOrderQuery = computed({
+  get() {
+    return props.orderQuery;
+  },
+  set(newOrderQuery) {
+    onUpdateAndTriggerFetching(newOrderQuery);
+  }
+});
+const open = ref(false);
+</script>
+
+<template>
+  <UPopover v-model:open="open" mode="click">
+    <UChip :show="!isOrderQueryDefault">
+      <UButton
+        icon="i-lucide-arrow-up-down"
+        :color="open ? 'primary' : 'neutral'"
+        :loading="fetching"
+        variant="outline"
+        :size="size"
+      >
+        排序
+      </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>
+</template>

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

@@ -0,0 +1,19 @@
+import type { OrderQueryProps } 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<OrderQueryProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => 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/table/query/where/Newer.d.vue.ts

@@ -0,0 +1,14 @@
+import type { WhereQueryOption, VColumn, Size } from '#v/types';
+type __VLS_Props = {
+    options: WhereQueryOption<any>[];
+    unselectedFields: string[];
+    bizColumns: VColumn<any>[];
+    size?: Size;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    new: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNew?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;