v-nuxt-ui 0.2.4 → 0.2.5

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

@@ -1,151 +1,57 @@
 <script setup>
-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 { computed, useTemplateRef } from "vue";
+import VAsyncSelect from "#v/components/AsyncSelect.vue";
 const props = defineProps({
-  label: { type: String, required: true },
+  label: { type: String, required: false },
+  floatingPlaceholder: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  triggerFetching: { type: Function, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false, default: "sm" },
+  icon: { type: null, required: false },
   listApi: { type: Function, required: true },
+  searchFields: { type: Function, required: false },
+  likeSearchFields: { type: Array, required: false },
   extraQuery: { type: Object, required: false },
-  initModelValues: { type: null, required: false },
-  onUpdateInitModelValues: { type: Function, required: false },
-  searchFields: { type: Array, required: true },
-  extraSearchFieldFn: { type: Function, required: false },
-  labelField: { type: null, required: false, default: "name" },
-  valueField: { type: null, required: true, default: "id" },
+  fetchAll: { type: Boolean, required: false },
+  labelField: { type: null, required: true },
+  valueField: { type: null, required: true },
   labelRenderFn: { type: Function, required: false },
   enableEmptyOption: { type: Boolean, required: false },
-  disableOprSelector: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
-  placeholder: { type: String, required: false },
-  size: { type: null, required: false, default: "sm" },
+  afterSelect: { type: Function, required: false },
   canCreate: { type: Boolean, required: false },
   createModalComponent: { type: null, required: false },
   createModalOpenProps: { type: Object, required: false }
 });
 const whereQueryItem = defineModel("whereQueryItem", { type: Object, ...{ required: true } });
-const { fetching, startFetching, endFetching } = useFetching();
-const searchedData = ref([]);
-const currentSelectedData = computed(() => [...whereQueryItem.value.extraData ?? []].flat());
-const allData = computed(() => {
-  const newSearchedData = [];
-  if (props.enableEmptyOption) {
-    newSearchedData.push({
-      [props.valueField]: 0,
-      [props.labelField]: "\u65E0"
-    });
-  }
-  newSearchedData.push(...currentSelectedData.value);
-  searchedData.value.forEach((searchedItem) => {
-    const idx = newSearchedData.findIndex((item) => item[props.valueField] === searchedItem[props.valueField]);
-    if (idx === -1) {
-      newSearchedData.push(searchedItem);
-    }
-  });
-  return newSearchedData;
-});
-const items = computed(() => {
-  return fetching.value ? currentSelectedData.value.map((p) => ({
-    label: String(props.labelRenderFn ? props.labelRenderFn(p) : p[props.labelField] ?? ""),
-    value: p[props.valueField]
-  })).filter((p) => p.label && !isEmptyString(String(p.value))) : allData.value.map((p) => ({
-    label: String(props.labelRenderFn ? props.labelRenderFn(p) : p[props.labelField] ?? ""),
-    value: p[props.valueField]
-  })).filter((p) => p.label && !isEmptyString(String(p.value)));
-});
-const inputMenuValue = computed({
+const modelValue = computed({
   get() {
-    return whereQueryItem.value.value;
+    return {
+      values: whereQueryItem.value.value,
+      extraModels: whereQueryItem.value.extraData
+    };
   },
-  set(newValues) {
-    if (!newValues || newValues.length === 0) {
-      whereQueryItem.value = { ...whereQueryItem.value, value: null };
-      return;
-    }
-    const newExtraData = [];
-    newValues.forEach((val) => {
-      const foundItem = allData.value.find((p) => p[props.valueField] === val);
-      if (foundItem) {
-        newExtraData.push(foundItem);
-      }
-    });
+  set(newValue) {
     whereQueryItem.value = {
       ...whereQueryItem.value,
-      value: newValues,
-      extraData: newExtraData
+      value: newValue.values,
+      extraData: newValue.extraModels
     };
   }
 });
-const onFetchItems = async (searchTerm2) => {
-  try {
-    startFetching();
-    const query = {
-      pagination: { pageNum: 1, pageSize: 10 },
-      whereQuery: { items: [] }
-    };
-    if (!isEmptyString(searchTerm2)) {
-      props.searchFields.forEach((field) => {
-        query.whereQuery?.items?.push({ field, opr: "like", value: searchTerm2, andOr: "or" });
-      });
-    }
-    const result = await props.listApi(defu(query, props.extraQuery));
-    if (result.data) {
-      searchedData.value = result.data.value.data?.list ?? [];
-    }
-  } finally {
-    endFetching();
-  }
-};
-const searchTerm = ref("");
-const onDebounceFetchItems = useDebounceFn(onFetchItems, 512);
-watch(searchTerm, (newVal) => {
-  onDebounceFetchItems(newVal);
-}, { immediate: false });
-const inputMenuRef = useTemplateRef("inputMenu");
+const asyncSelectRef = useTemplateRef("asyncSelect");
 defineExpose({
   focus: () => {
-    inputMenuRef.value?.inputRef.focus();
+    asyncSelectRef.value?.focus();
   }
 });
 </script>
 
 <template>
-  <UInputMenu
-    ref="inputMenu"
-    v-model:search-term="searchTerm"
-    v-model="inputMenuValue"
-    :items="items"
-    :placeholder="placeholder"
-    multiple
-    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();
-}"
+  <VAsyncSelect
+    ref="asyncSelect"
+    v-bind="props"
+    v-model="modelValue"
+    :placeholder="`\u8BF7\u9009\u62E9${label ?? ''}`"
   />
 </template>

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

@@ -1,10 +1,6 @@
-import type { VFormFieldAsyncSelectProps, WhereQueryItem } from '#v/types';
+import type { WhereQueryItem, VAsyncSelectProps } 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<({
-        label: string;
-        disabled?: boolean;
-        triggerFetching?: () => Promise<void>;
-    } & VFormFieldAsyncSelectProps<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VAsyncSelectProps<T> & {
         whereQueryItem: WhereQueryItem<T>;
     }) & {
         "onUpdate:whereQueryItem"?: ((value: WhereQueryItem<T>) => any) | undefined;

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

@@ -35,7 +35,7 @@ defineExpose({
     :trigger-fetching="triggerFetching"
   />
   <TableQueryWhereSimpleItemOprInputNumber
-    v-if="option.type === 'input-number'"
+    v-else-if="option.type === 'input-number'"
     ref="item"
     v-model:where-query-item="whereQueryItem"
     :label="option.label || whereQueryItem.field"
@@ -64,7 +64,7 @@ defineExpose({
     :trigger-fetching="triggerFetching"
     :label="option.label"
     :list-api="option.listApi"
-    :search-fields="option.searchFields ?? []"
+    :search-fields="option.searchFields"
     :label-render-fn="option.labelRenderFn"
     :label-field="option.labelField"
     :value-field="option.valueField"

package/dist/runtime/components/table/settings/UserTableColumnModal.d.vue.ts

@@ -5,12 +5,12 @@ type __VLS_Props = {
     loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
     "update:open": (args_0: boolean) => any;
+    close: () => any;
     save: (args_0: UserTableColumn) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onSave?: ((args_0: UserTableColumn) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/table/settings/UserTableColumnModal.vue.d.ts

@@ -5,12 +5,12 @@ type __VLS_Props = {
     loading?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
     "update:open": (args_0: boolean) => any;
+    close: () => any;
     save: (args_0: UserTableColumn) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onSave?: ((args_0: UserTableColumn) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -13,6 +13,7 @@ export interface FlowEdgeStylesState {
 }
 /** 节点样式存储结构 */
 export interface FlowNodeStylesState {
+    showBorder: boolean;
     borderWidth: number;
     borderRadius: number;
     borderColor: string;
@@ -49,6 +50,7 @@ export declare function useFlowStyles(): {
     edgePathType: WritableComputedRef<FlowEdgePathType, FlowEdgePathType>;
     edgeColor: WritableComputedRef<string, string>;
     edgeLabelColor: WritableComputedRef<string, string>;
+    nodeShowBorder: WritableComputedRef<boolean, boolean>;
     nodeBorderWidth: WritableComputedRef<number, number>;
     nodeBorderRadius: WritableComputedRef<number, number>;
     nodeBorderColor: WritableComputedRef<string, string>;

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

@@ -13,6 +13,7 @@ const EDGE_DEFAULTS = {
   labelColor: ""
 };
 const NODE_DEFAULTS = {
+  showBorder: true,
   borderWidth: 2,
   borderRadius: 6,
   borderColor: "",
@@ -74,6 +75,7 @@ export function useFlowStyles() {
   const edgePathType = useField(edgeStore, "pathType");
   const edgeColor = useField(edgeStore, "color");
   const edgeLabelColor = useField(edgeStore, "labelColor");
+  const nodeShowBorder = useField(nodeStore, "showBorder");
   const nodeBorderWidth = useField(nodeStore, "borderWidth");
   const nodeBorderRadius = useField(nodeStore, "borderRadius");
   const nodeBorderColor = useField(nodeStore, "borderColor");
@@ -117,6 +119,7 @@ export function useFlowStyles() {
     edgeColor,
     edgeLabelColor,
     // 节点（原始自定义值，用于 UI 绑定）
+    nodeShowBorder,
     nodeBorderWidth,
     nodeBorderRadius,
     nodeBorderColor,

package/dist/runtime/constants/columns.js

@@ -20,7 +20,7 @@ export const getOprColumns = (createdAtSortOpr = "desc") => [
     filterOption: {
       type: "async-select",
       listApi: useUserApi().list,
-      searchFields: ["nickname"],
+      likeSearchFields: ["nickname"],
       labelField: "nickname",
       valueField: "id",
       multiple: true,
@@ -35,7 +35,7 @@ export const getOprColumns = (createdAtSortOpr = "desc") => [
     filterOption: {
       type: "async-select",
       listApi: useUserApi().list,
-      searchFields: ["nickname"],
+      likeSearchFields: ["nickname"],
       labelField: "nickname",
       valueField: "id",
       multiple: true,

package/dist/runtime/constants/flow.d.ts

@@ -20,6 +20,10 @@ export interface FlowHandle {
  * 鼠标位置注入 Key
  */
 export declare const FLOW_MOUSE_POSITION_KEY: InjectionKey<Ref<FlowMousePosition>>;
+/**
+ * 是否可编辑注入 Key
+ */
+export declare const FLOW_EDITABLE_KEY: InjectionKey<Ref<boolean>>;
 export declare const FLOW_HANDLES: FlowHandle[];
 /**
  * Handle 层级阈值（可配置）

package/dist/runtime/constants/flow.js

@@ -1,6 +1,7 @@
 import { Position } from "@vue-flow/core";
 export const GRID_SIZE = 20;
 export const FLOW_MOUSE_POSITION_KEY = Symbol("flow-mouse-position");
+export const FLOW_EDITABLE_KEY = Symbol("flow-editable");
 export const FLOW_HANDLES = [
   // 4个角 - 可以双向调整
   { id: "tl", position: Position.Top, offsetPercent: { x: 0 } },

package/dist/runtime/types/components/async-select.d.ts

@@ -0,0 +1,30 @@
+import type { ApiGroup, QueryTemplate, WhereQueryItem } from '#v/types';
+import type { Component } from 'vue';
+import type { InputMenuProps } from '@nuxt/ui';
+export type VAsyncSelectProps<T> = {
+    label?: string;
+    floatingPlaceholder?: boolean;
+    disabled?: InputMenuProps['disabled'];
+    placeholder?: InputMenuProps['placeholder'];
+    size?: InputMenuProps['size'];
+    icon?: InputMenuProps['icon'];
+    listApi: ApiGroup<T>['list'];
+    searchFields?(keyword: string): WhereQueryItem<T>[];
+    likeSearchFields?: string[];
+    extraQuery?: QueryTemplate<T>;
+    fetchAll?: boolean;
+    labelField: keyof T;
+    valueField: keyof T;
+    labelRenderFn?(model: T): string | undefined;
+    enableEmptyOption?: boolean;
+    multiple?: boolean;
+    afterSelect?(selected: T | T[] | undefined): void;
+    canCreate?: boolean;
+    createModalComponent?: Component;
+    createModalOpenProps?: Record<string, any>;
+};
+export type AsyncSelectValue = string[] | number[] | string | number | undefined;
+export type AsyncSelectCombinedValue = {
+    values: AsyncSelectValue;
+    extraModels?: any[];
+};

package/dist/runtime/types/components/form/field.d.ts

@@ -1,32 +1,15 @@
-import type { VNode, Ref, Component } from 'vue';
+import type { VNode } from 'vue';
 import type { ButtonProps, FormFieldProps, InputProps, RadioGroupProps, SelectMenuItem, SelectProps, TreeItem } from '@nuxt/ui';
 import type { ZodType } from 'zod';
-import type { PageResult, RequestResult } from '../../request.js';
-import type { QueryTemplate, WhereQueryItem } from '../../query.js';
+import type { VAsyncSelectProps } from '#v/types';
 export type VFormFieldAsyncSelectProps<T> = {
-    listApi(payload: Omit<QueryTemplate<T>, 'selectQuery'>): Promise<{
-        data: Ref<RequestResult<PageResult<T>>>;
-    }>;
-    extraQuery?: QueryTemplate<T>;
-    initModelValues?: any | any[];
-    onUpdateInitModelValues?: (newInitModels: any | any[]) => void;
-    searchFields: (string)[];
-    extraSearchFieldFn?(keyword: string): WhereQueryItem<T>;
-    labelField?: keyof T;
-    valueField: keyof T;
-    labelRenderFn?(model: T): string | undefined;
-    enableEmptyOption?: boolean;
-    disableOprSelector?: boolean;
-    multiple?: boolean;
-    placeholder?: string;
-    size?: SelectProps['size'];
-    canCreate?: boolean;
-    createModalComponent?: Component;
-    createModalOpenProps?: Record<string, any>;
-};
+    initModel?: any | any[];
+    onUpdateInitModel?(model: any | any[] | undefined): void;
+} & VAsyncSelectProps<T>;
 export type VFormFieldAsyncTreeSelectProps<T> = {
-    fetchAll?: boolean;
-} & VFormFieldAsyncSelectProps<T>;
+    initModel?: any | any[];
+    onUpdateInitModel?(model: any | any[] | undefined): void;
+} & VAsyncSelectProps<T>;
 export type VFormFieldTreeSelectTransferProps = {
     sourceTreeItems: TreeItem[];
     targetTreeItems: TreeItem[];

package/dist/runtime/types/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './table/index.js';
 export * from './form/index.js';
 export * from './date.js';
 export * from './dnd.js';
+export * from './async-select.js';

package/dist/runtime/types/components/index.js

@@ -2,3 +2,4 @@ export * from "./table/index.js";
 export * from "./form/index.js";
 export * from "./date.js";
 export * from "./dnd.js";
+export * from "./async-select.js";

package/dist/runtime/types/components/table/column.d.ts

@@ -1,31 +1,7 @@
-import type { OrderQueryOpr, WhereQueryOpr, QueryTemplate, WhereQueryItem } from '../../query.js';
-import type { PageResult, RequestResult } from '../../request.js';
+import type { OrderQueryOpr, WhereQueryOpr } from '../../query.js';
 import type { TableColumn, BadgeProps, InputMenuProps } from '@nuxt/ui';
-import type { SelectOption } from '../../index.js';
-import type { Ref } from 'vue';
+import type { SelectOption, VAsyncSelectProps } from '../../index.js';
 export type WhereQueryType = 'input' | 'input-number' | 'date-picker' | 'select' | 'async-select' | 'unknown';
-/**
- * 专用于 WhereQueryColumnOption async-select 分支的属性类型。
- * 与 VFormFieldAsyncSelectProps<T> 结构一致，但 listApi 使用方法签名。
- * 函数属性使用方法签名以保持 T 的双变性（bivariant），
- * 使 VColumn<SubType> 可以安全赋值给 VColumn<Record<string, any>>。
- */
-export type WhereQueryColumnAsyncSelectProps<T> = {
-    listApi(payload: Omit<QueryTemplate<T>, 'selectQuery'>): Promise<{
-        data: Ref<RequestResult<PageResult<T>>>;
-    }>;
-    extraQuery?: QueryTemplate<T>;
-    searchFields: string[];
-    extraSearchFieldFn?(keyword: string): WhereQueryItem<T>;
-    labelField?: keyof T;
-    valueField: keyof T;
-    labelRenderFn?(model: T): string | undefined;
-    enableEmptyOption?: boolean;
-    disableOprSelector?: boolean;
-    multiple?: boolean;
-    placeholder?: InputMenuProps['placeholder'];
-    size?: InputMenuProps['size'];
-};
 export type WhereQueryColumnOption<T> = {
     defaultOpr?: WhereQueryOpr;
     custom?: boolean;
@@ -46,7 +22,7 @@ export type WhereQueryColumnOption<T> = {
     placeholder?: InputMenuProps['placeholder'];
 } | {
     type: 'async-select';
-} & WhereQueryColumnAsyncSelectProps<T> | {
+} & VAsyncSelectProps<T> | {
     type: 'unknown';
 });
 export type OrderQueryColumnOption = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",
@@ -30,9 +30,9 @@
     "typecheck": "nuxi typecheck playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^4.3.1",
-    "dayjs": "^1.11.19",
-    "defu": "^6.1.4",
+    "@nuxt/kit": "^4.4.2",
+    "dayjs": "^1.11.20",
+    "defu": "^6.1.7",
     "maska": "^3.2.0",
     "uuid": "^13.0.0"
   },
@@ -54,45 +54,45 @@
     }
   },
   "optionalDependencies": {
-    "cronstrue": "^3.12.0",
+    "cronstrue": "^3.14.0",
     "echarts": "^6.0.0",
     "exceljs": "^4.4.0",
     "monaco-editor": "^0.55.1",
     "shiki": "^3.23.0",
-    "sql-formatter": "^15.7.2",
+    "sql-formatter": "^15.7.3",
     "vue-draggable-plus": "^0.6.1",
     "vue-echarts": "^8.0.1"
   },
   "devDependencies": {
-    "@vue-flow/core": "^1.42.2",
-    "@vue-flow/background": "^1.3.2",
-    "@iconify-json/lucide": "^1.2.94",
-    "@internationalized/date": "^3.12.0",
-    "@nuxt/content": "^3.12.0",
+    "@iconify-json/lucide": "^1.2.102",
+    "@internationalized/date": "^3.12.1",
+    "@nuxt/content": "^3.13.0",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/fonts": "^0.12.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/ui": "^4.6.0",
+    "@nuxt/ui": "^4.6.1",
     "@nuxtjs/i18n": "^10.2.4",
     "@nuxtjs/mdc": "^0.20.2",
     "@tanstack/table-core": "^8.21.3",
     "@types/better-sqlite3": "^7.6.13",
     "@types/sortablejs": "^1.15.9",
     "@types/uuid": "^11.0.0",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/core": "^1.48.2",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
-    "better-sqlite3": "^12.8.0",
+    "better-sqlite3": "^12.9.0",
     "cronstrue": "^3.12.0",
     "echarts": "^6.0.0",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "exceljs": "^4.4.0",
     "fflate": "^0.8.2",
     "json5": "^2.2.3",
     "monaco-editor": "^0.55.1",
-    "nuxt": "^4.3.1",
+    "nuxt": "^4.4.2",
     "ohash": "^2.0.11",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.9.6",
     "scule": "^1.3.0",
     "shiki": "^3.23.0",
     "sortablejs": "^1.15.7",
@@ -100,10 +100,10 @@
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "vue": "^3.5.0",
+    "vue": "^3.5.32",
     "vue-draggable-plus": "^0.6.1",
     "vue-echarts": "^8.0.1",
-    "vue-tsc": "^3.2.5",
+    "vue-tsc": "^3.2.6",
     "zod": "^4.3.6"
   },
   "packageManager": "pnpm@10.29.2",