v-nuxt-ui 0.1.36 → 0.2.1

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

@@ -0,0 +1,196 @@
+<script setup>
+import { useOverlay } from "@nuxt/ui/composables";
+import TableColumnModal from "./TableColumnModal.vue";
+import { useTableColumnApi } from "#v/composables";
+import { ref, watch } from "vue";
+import ScrollArea from "#v/components/ScrollArea.vue";
+const props = defineProps({
+  initialColumns: { type: Array, required: false }
+});
+const overlay = useOverlay();
+const columnModal = overlay.create(TableColumnModal);
+const tableColumnApi = useTableColumnApi();
+const columns = ref([]);
+const deletedColumnIds = ref([]);
+watch(() => props.initialColumns, (val) => {
+  if (val && val.length && columns.value.length === 0) {
+    columns.value = val.map((col) => ({
+      ...col,
+      columnKey: col.columnKey ?? "",
+      label: col.label ?? "",
+      order: col.order ?? 0,
+      width: col.width ?? 100,
+      fixed: col.fixed ?? "",
+      visible: col.visible ?? true
+    }));
+  }
+}, { immediate: true });
+function addColumn() {
+  const maxOrder = columns.value.reduce((max, col) => Math.max(max, col.order ?? 0), 0);
+  const defaultCol = {
+    id: 0,
+    columnKey: "",
+    label: "",
+    order: maxOrder + 1,
+    width: 100,
+    fixed: "",
+    visible: true
+  };
+  columnModal.open({
+    column: defaultCol,
+    onSaveColumn: (col) => {
+      columns.value.push({ ...col, id: 0, _isDirty: true });
+    }
+  });
+}
+function removeColumn(index) {
+  const col = columns.value[index];
+  if (!col) return;
+  if (col.id !== 0) {
+    deletedColumnIds.value.push(col.id);
+  }
+  columns.value.splice(index, 1);
+}
+function editColumn(index) {
+  const col = columns.value[index];
+  if (!col) return;
+  columnModal.open({
+    column: col,
+    onSaveColumn: (updated) => {
+      columns.value[index] = { ...updated, id: col.id, _isDirty: true };
+    }
+  });
+}
+function fixedLabel(fixed) {
+  const map = { left: "\u56FA\u5B9A\u5DE6", right: "\u56FA\u5B9A\u53F3" };
+  return map[fixed] ?? "";
+}
+async function createAllColumns(tableId) {
+  for (const col of columns.value) {
+    await tableColumnApi.create(tableColumnApi.prune({
+      ...col,
+      tableId
+    }));
+  }
+}
+async function saveDirtyColumns(tableId) {
+  for (const col of columns.value) {
+    if (col._isDirty) {
+      const colData = {
+        id: col.id,
+        tableId,
+        columnKey: col.columnKey,
+        label: col.label,
+        order: col.order,
+        width: col.width,
+        fixed: col.fixed,
+        visible: col.visible
+      };
+      if (col.id === 0) {
+        await tableColumnApi.create(tableColumnApi.prune(colData));
+      } else {
+        await tableColumnApi.update(tableColumnApi.prune(colData));
+      }
+    }
+  }
+  for (const id of deletedColumnIds.value) {
+    await tableColumnApi.deleteById(id);
+  }
+}
+defineExpose({
+  columns,
+  createAllColumns,
+  saveDirtyColumns
+});
+</script>
+
+<template>
+  <div class="pt-6">
+    <div class="flex items-center justify-between mb-3">
+      <div>
+        <div class="font-semibold text-sm">
+          列配置
+        </div>
+        <div class="text-sm text-dimmed text-xs">
+          配置 Table 的列信息
+        </div>
+      </div>
+      <UButton
+        label="添加列"
+        icon="i-lucide-plus"
+        variant="soft"
+        size="sm"
+        @click="addColumn"
+      />
+    </div>
+
+    <div v-if="columns.length === 0" class="py-8 text-center text-dimmed text-xs">
+      暂无列配置，点击"添加列"创建
+    </div>
+    <ScrollArea v-else class="max-h-72 rounded-md border border-default">
+      <div class="flex flex-col divide-y divide-default">
+        <div
+          v-for="(col, index) in columns"
+          :key="col.id + '-' + index"
+          class="group flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-muted"
+        >
+          <!-- index box -->
+          <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary text-xs font-semibold">
+            {{ col.order }}
+          </div>
+
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <span class="font-medium text-sm truncate">{{ col.label || "\u672A\u547D\u540D" }}</span>
+              <span class="text-xs text-dimmed font-mono truncate">{{ col.columnKey || "-" }}</span>
+            </div>
+            <div class="flex items-center gap-2 mt-0.5">
+              <span class="text-xs text-dimmed">宽 {{ col.width }}px</span>
+              <UBadge
+                v-if="col.fixed"
+                size="xs"
+                variant="subtle"
+                color="info"
+              >
+                {{ fixedLabel(col.fixed) }}
+              </UBadge>
+              <UBadge
+                v-if="!col.visible"
+                size="xs"
+                variant="subtle"
+                color="warning"
+              >
+                已隐藏
+              </UBadge>
+              <UBadge
+                v-if="col.id === 0"
+                size="xs"
+                variant="subtle"
+                color="success"
+              >
+                新增
+              </UBadge>
+            </div>
+          </div>
+
+          <div class="flex shrink-0 items-center opacity-0 group-hover:opacity-100 transition-opacity">
+            <UButton
+              icon="i-lucide-pencil"
+              variant="ghost"
+              size="xs"
+              color="neutral"
+              @click="editColumn(index)"
+            />
+            <UButton
+              icon="i-lucide-trash-2"
+              variant="ghost"
+              size="xs"
+              color="error"
+              @click="removeColumn(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  </div>
+</template>

package/dist/runtime/components/sys/table/TableColumnList.vue.d.ts

@@ -0,0 +1,54 @@
+import type { TableColumn } from '#v/types';
+type __VLS_Props = {
+    initialColumns?: TableColumn[];
+};
+interface ColumnRow extends TableColumn {
+    _isDirty?: boolean;
+}
+/** 供父组件在提交时调用：创建新表后批量创建列 */
+declare function createAllColumns(tableId: number): Promise<void>;
+/** 供父组件在提交时调用：保存已有表的列变更 */
+declare function saveDirtyColumns(tableId: number): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    columns: import("vue").Ref<{
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[], ColumnRow[] | {
+        _isDirty?: boolean | undefined;
+        tableId?: number | undefined;
+        columnKey?: string | undefined;
+        label?: string | undefined;
+        labelI18nKey?: string | undefined;
+        order?: number | undefined;
+        width?: number | undefined;
+        fixed?: "left" | "right" | "" | undefined;
+        visible?: boolean | undefined;
+        id: number;
+        createdAt?: string | undefined;
+        updatedAt?: string | undefined;
+        version?: number | undefined;
+        createdBy?: number | undefined;
+        creator?: any;
+        updatedBy?: number | undefined;
+        updater?: any;
+    }[]>;
+    createAllColumns: typeof createAllColumns;
+    saveDirtyColumns: typeof saveDirtyColumns;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,22 +1,12 @@
-import type { TableColumn, Table } from '#v/types';
+import type { TableColumn } from '#v/types';
 type __VLS_Props = {
-    table: Table;
-    column?: {
-        id: number;
-        columnKey: string;
-        label: string;
-        order: number;
-        width: number;
-        fixed: 'left' | 'right' | '';
-        visible: boolean;
-    };
+    column: TableColumn;
+    onSaveColumn: (col: TableColumn) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: boolean) => any;
-    save: (args_0: Partial<TableColumn>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-    onSave?: ((args_0: Partial<TableColumn>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,107 +1,39 @@
 <script setup>
-import { useTableColumnApi } from "#v/composables/api";
-import { ref } from "vue";
-import { useToast } from "@nuxt/ui/composables";
+import * as z from "zod";
+import FormCreateModalTemplate from "#v/components/form/create-modal-template/index.vue";
+import { useFormValues } from "#v/composables";
+import { computed, toRef } from "vue";
 const props = defineProps({
-  table: { type: Object, required: true },
-  column: { type: Object, required: false }
+  column: { type: Object, required: true },
+  onSaveColumn: { type: Function, required: true }
 });
-const emit = defineEmits(["close", "save"]);
-const tableColumnApi = useTableColumnApi();
-const saving = ref(false);
-const formData = ref({
-  columnKey: props.column?.columnKey ?? "",
-  label: props.column?.label ?? "",
-  order: props.column?.order ?? 0,
-  width: props.column?.width ?? 100,
-  fixed: props.column?.fixed ?? "",
-  visible: props.column?.visible ?? true
-});
-async function handleSave() {
-  saving.value = true;
-  try {
-    emit("save", {
-      id: props.column?.id,
-      columnKey: formData.value.columnKey,
-      label: formData.value.label,
-      order: formData.value.order,
-      width: formData.value.width,
-      fixed: formData.value.fixed,
-      visible: formData.value.visible
-    });
-    emit("close", true);
-  } catch (error) {
-    useToast().add({
-      title: "\u4FDD\u5B58\u5931\u8D25",
-      description: String(error),
-      color: "error",
-      icon: "i-lucide-x-circle"
-    });
-    emit("close", false);
-  } finally {
-    saving.value = false;
-  }
-}
+const emit = defineEmits(["close"]);
+const { newValues } = useFormValues(toRef(props.column), { id: 0 });
+const fixedItems = [
+  { label: "\u4E0D\u56FA\u5B9A", value: "" },
+  { label: "\u5DE6\u4FA7\u56FA\u5B9A", value: "left" },
+  { label: "\u53F3\u4FA7\u56FA\u5B9A", value: "right" }
+];
+const fields = computed(() => [
+  { name: "columnKey", type: "input", label: "\u5217\u6807\u8BC6", colSpan: "12", zodType: z.string().min(1, "\u5217\u6807\u8BC6\u4E0D\u80FD\u4E3A\u7A7A") },
+  { name: "label", type: "input", label: "\u663E\u793A\u540D", colSpan: "12", zodType: z.string().min(1, "\u663E\u793A\u540D\u4E0D\u80FD\u4E3A\u7A7A") },
+  { name: "order", type: "input-number", label: "\u987A\u5E8F", colSpan: "8", zodType: z.number() },
+  { name: "width", type: "input-number", label: "\u5BBD\u5EA6", colSpan: "8", zodType: z.number() },
+  { 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() }
+]);
 </script>
 
 <template>
-  <UModal
-    :title="`\u7F16\u8F91\u5217 - ${column?.columnKey ?? ''}`"
-    size="md"
-    :close="{ onClick: () => emit('close', false) }"
-  >
-    <div class="p-4 space-y-4">
-      <div class="grid grid-cols-2 gap-4">
-        <div>
-          <label class="text-sm font-medium mb-1 block">列标识</label>
-          <UInput v-model="formData.columnKey" placeholder="columnKey" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">显示名</label>
-          <UInput v-model="formData.label" placeholder="显示名" />
-        </div>
-      </div>
-      <div class="grid grid-cols-3 gap-4">
-        <div>
-          <label class="text-sm font-medium mb-1 block">顺序</label>
-          <UInputNumber v-model="formData.order" :min="0" class="w-full" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">宽度</label>
-          <UInputNumber v-model="formData.width" :min="0" class="w-full" />
-        </div>
-        <div>
-          <label class="text-sm font-medium mb-1 block">固定</label>
-          <USelect
-            v-model="formData.fixed"
-            :items="[
-  { label: '\u4E0D\u56FA\u5B9A', value: '' },
-  { label: '\u5DE6\u4FA7', value: 'left' },
-  { label: '\u53F3\u4FA7', value: 'right' }
-]"
-            class="w-full"
-          />
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <USwitch v-model="formData.visible" />
-        <span class="text-sm">{{ formData.visible ? "\u663E\u793A" : "\u9690\u85CF" }}</span>
-      </div>
-    </div>
-    <template #footer>
-      <UButton
-        label="取消"
-        color="neutral"
-        variant="subtle"
-        @click="emit('close', false)"
-      />
-      <UButton
-        label="保存"
-        color="primary"
-        variant="solid"
-        :loading="saving"
-        @click="handleSave"
-      />
-    </template>
-  </UModal>
+  <FormCreateModalTemplate
+    title="列配置"
+    :on-close="(ok) => emit('close', ok)"
+    :fields="fields"
+    :model-value="newValues"
+    @update-model-value="(newVal) => newValues = { id: 0, ...newVal }"
+    @submit="async () => {
+  props.onSaveColumn(newValues);
+  emit('close', true);
+}"
+  />
 </template>

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

@@ -1,22 +1,12 @@
-import type { TableColumn, Table } from '#v/types';
+import type { TableColumn } from '#v/types';
 type __VLS_Props = {
-    table: Table;
-    column?: {
-        id: number;
-        columnKey: string;
-        label: string;
-        order: number;
-        width: number;
-        fixed: 'left' | 'right' | '';
-        visible: boolean;
-    };
+    column: TableColumn;
+    onSaveColumn: (col: TableColumn) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: boolean) => any;
-    save: (args_0: Partial<TableColumn>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-    onSave?: ((args_0: Partial<TableColumn>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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/composables/api/sys/index.d.ts

@@ -12,3 +12,6 @@ export * from './useUserApi.js';
 export * from '../useTableApi.js';
 export * from '../useTableColumnApi.js';
 export * from '../useTablePermissionApi.js';
+export * from './useFlowApi.js';
+export * from './useFlowNodeApi.js';
+export * from './useFlowEdgeApi.js';

package/dist/runtime/composables/api/sys/index.js

@@ -12,3 +12,6 @@ export * from "./useUserApi.js";
 export * from "../useTableApi.js";
 export * from "../useTableColumnApi.js";
 export * from "../useTablePermissionApi.js";
+export * from "./useFlowApi.js";
+export * from "./useFlowNodeApi.js";
+export * from "./useFlowEdgeApi.js";

package/dist/runtime/composables/api/sys/useFlowApi.d.ts

@@ -0,0 +1,2 @@
+import type { ApiGroup, Flow } from '#v/types';
+export declare const useFlowApi: () => ApiGroup<Flow>;

package/dist/runtime/composables/api/sys/useFlowApi.js

@@ -0,0 +1,5 @@
+import { createSharedComposable } from "@vueuse/core";
+import { useApi } from "../useApi.js";
+export const useFlowApi = createSharedComposable(() => ({
+  ...useApi("/flows")
+}));

package/dist/runtime/composables/api/sys/useFlowEdgeApi.d.ts

@@ -0,0 +1,2 @@
+import type { FlowEdge } from '#v/types';
+export declare const useFlowEdgeApi: () => import("#v/types").ApiGroup<FlowEdge>;

package/dist/runtime/composables/api/sys/useFlowEdgeApi.js

@@ -0,0 +1,3 @@
+import { createSharedComposable } from "@vueuse/core";
+import { useApi } from "../useApi.js";
+export const useFlowEdgeApi = createSharedComposable(() => useApi("/flows/edges"));

package/dist/runtime/composables/api/sys/useFlowNodeApi.d.ts

@@ -0,0 +1,2 @@
+import type { FlowNode } from '#v/types';
+export declare const useFlowNodeApi: () => import("#v/types").ApiGroup<FlowNode>;

package/dist/runtime/composables/api/sys/useFlowNodeApi.js

@@ -0,0 +1,3 @@
+import { createSharedComposable } from "@vueuse/core";
+import { useApi } from "../useApi.js";
+export const useFlowNodeApi = createSharedComposable(() => useApi("/flows/nodes"));

package/dist/runtime/composables/flow/index.d.ts

@@ -1 +1,4 @@
+export * from './useFlow.js';
+export * from './useFlowNode.js';
+export * from './useFlowResize.js';
 export * from './useFlowStyles.js';

package/dist/runtime/composables/flow/index.js

@@ -1 +1,4 @@
+export * from "./useFlow.js";
+export * from "./useFlowNode.js";
+export * from "./useFlowResize.js";
 export * from "./useFlowStyles.js";

package/dist/runtime/composables/flow/useFlow.d.ts

@@ -0,0 +1,33 @@
+import type { Node, Edge, Connection } from '@vue-flow/core';
+import type { ComputedRef, ShallowRef, Ref } from 'vue';
+import type { Flow, FlowNode, FlowApi, UseFlowResizeDimensions } from '#v/types';
+export interface UseFlowOptions {
+    flow: ComputedRef<Flow | undefined>;
+    onUpdateModel?: ComputedRef<((model: Flow) => void) | undefined>;
+    /** CRUD API 回调，在节点/边增删改时调用 */
+    api?: ComputedRef<FlowApi | undefined>;
+}
+export interface UseFlowReturn {
+    nodes: ShallowRef<Node[]>;
+    edges: ShallowRef<Edge[]>;
+    GRID_SIZE: number;
+    /** 是否有 API 操作正在进行 */
+    loading: Ref<boolean>;
+    deleteNode: (nodeId: string) => Promise<void>;
+    deleteEdge: (edgeId: string) => Promise<void>;
+    createEdge: (params: Connection) => Promise<void>;
+    /** 重连边：乐观更新，立即移动到新位置（带 opacity），API 完成后恢复 */
+    reconnectEdge: (oldEdgeId: string, connection: Connection) => Promise<void>;
+    updateNodePosition: (nodeId: string, x: number, y: number) => Promise<void>;
+    updateNodeDimensions: (nodeId: string, dimensions: UseFlowResizeDimensions) => Promise<void>;
+    updateNode: (updatedNode: FlowNode) => Promise<void>;
+    createNode: () => Promise<void>;
+    syncNodes: (createHandlers: (nodeId: string) => Record<string, any>) => void;
+    updateEdgeLabel: (edgeId: string, label: string) => Promise<void>;
+    syncEdges: (createHandlers: (edgeId: string) => Record<string, any>) => void;
+}
+/**
+ * Flow 业务逻辑 Composable
+ * 管理节点和边的 CRUD 操作，并同步到外部数据模型
+ */
+export declare function useFlow(options: UseFlowOptions): UseFlowReturn;