@cynnie/ui-core 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @cynnie/ui-core
+
+SnowUI 组件库的无 UI 依赖核心层：`createApis`、通用 hooks（`useOptions` / `useDebounce` / `useThrottle` / `useAsyncLoading`）以及类型契约（`FormItem`、`TableColumn`、`DialogOptions` 等）。
+
+`@cynnie/ui-antd`、`@cynnie/ui-element`、`@cynnie/ui-shadcn` 均依赖本包，一般无需单独安装；如果你的项目只用核心工具函数，可以只装它。
+
+## 安装
+
+```sh
+pnpm add @cynnie/ui-core
+```
+
+## 使用
+
+```ts
+import { createApis, useOptions, useDebounce } from "@cynnie/ui-core";
+```
+
+peer 依赖 `vue ^3.5`，需在你的项目中自行安装。
+
+## 相关包
+
+- [@cynnie/ui-antd](https://www.npmjs.com/package/@cynnie/ui-antd) — 基于 ant-design-vue
+- [@cynnie/ui-element](https://www.npmjs.com/package/@cynnie/ui-element) — 基于 element-plus
+- [@cynnie/ui-shadcn](https://www.npmjs.com/package/@cynnie/ui-shadcn) — 基于 shadcn-vue（reka-ui + Tailwind CSS v4）
+
+## License
+
+MIT

package/dist/composables/hooks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 防抖：间隔内重复调用只执行最后一次
+ */
+export declare function useDebounce(fn: (...args: any[]) => void, delay?: number): (...args: any[]) => void;
+/**
+ * 节流：间隔内最多执行一次
+ */
+export declare function useThrottle(fn: (...args: any[]) => void, interval?: number): (...args: any[]) => void;
+/**
+ * async 点击的 loading 状态：等待 promise 结束自动复位
+ */
+export declare function useAsyncLoading(): {
+    isLoading: import('vue').Ref<boolean, boolean>;
+    wrap: (fn: (...args: any[]) => any, ...args: any[]) => Promise<any>;
+};

package/dist/composables/useOptions.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+export interface DictOption {
+    label: string;
+    value: any;
+    disabled?: boolean;
+}
+export interface UseOptionsOptions {
+    /** 静态选项，元素支持任意结构（配合 labelField/valueField）；也支持返回选项的函数或响应式值 */
+    options?: any;
+    /** 远程字典：返回选项数组的函数，会在挂载时和 deps 变化时自动调用 */
+    fetch?: (...args: any[]) => Promise<DictOption[]> | DictOption[];
+    /** 依赖值，变化时重新拉取远程字典 */
+    deps?: Ref<any> | Ref<any>[];
+    /** 挂载时是否立即拉取，默认 true */
+    immediate?: boolean;
+}
+/**
+ * 选项数据源：静态数组 / 函数 / 远程字典三选一。
+ * 供 ProSelect / ProCheckboxGroup / ProRadioGroup 共用。
+ */
+export declare function useOptions(config?: UseOptionsOptions): {
+    options: Ref<any[], any[]>;
+    isLoading: Ref<boolean, boolean>;
+    reload: () => Promise<void>;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { createApis } from './utils/createApis.js';
+export * from './types.js';
+export * from './composables/useOptions.js';
+export * from './composables/hooks.js';

package/dist/index.js

@@ -0,0 +1,95 @@
+import { onMounted, ref, watch } from "vue";
+function createApis(baseUrl, options = {}) {
+	const request = options.request || ((url, init) => fetch(url, init).then((res) => res.json()));
+	return {
+		get: (params) => request(`${baseUrl}?${new URLSearchParams(params)}`, { method: "GET" }),
+		create: (data) => request(baseUrl, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(data)
+		}),
+		update: (data) => request(baseUrl, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(data)
+		}),
+		remove: (ids) => request(baseUrl, {
+			method: "DELETE",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(ids)
+		})
+	};
+}
+function useOptions(config = {}) {
+	const options = ref([]);
+	const isLoading = ref(false);
+	function unwrapDeps() {
+		const deps = config.deps;
+		if (deps == null) return void 0;
+		if (Array.isArray(deps)) return deps.map((d) => d && typeof d === "object" && "value" in d ? d.value : d);
+		return deps && typeof deps === "object" && "value" in deps ? deps.value : deps;
+	}
+	async function load() {
+		const { options: staticOptions, fetch: fetch$1 } = config;
+		const source = typeof staticOptions === "object" && staticOptions !== null && "value" in staticOptions ? staticOptions.value : staticOptions;
+		if (source) {
+			options.value = typeof source === "function" ? await source(unwrapDeps()) : source;
+			return;
+		}
+		if (fetch$1) {
+			isLoading.value = true;
+			try {
+				options.value = await fetch$1(unwrapDeps());
+			} finally {
+				isLoading.value = false;
+			}
+		}
+	}
+	if (config.deps) watch(Array.isArray(config.deps) ? config.deps : [config.deps], () => load());
+	onMounted(() => {
+		if (config.immediate !== false) load();
+	});
+	return {
+		options,
+		isLoading,
+		reload: load
+	};
+}
+function useDebounce(fn, delay = 300) {
+	let timer;
+	return (...args) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn(...args);
+		}, delay);
+	};
+}
+function useThrottle(fn, interval = 300) {
+	let last = 0;
+	return (...args) => {
+		const now = Date.now();
+		if (now - last >= interval) {
+			last = now;
+			fn(...args);
+		}
+	};
+}
+function useAsyncLoading() {
+	const isLoading = ref(false);
+	async function wrap(fn, ...args) {
+		if (isLoading.value) return;
+		isLoading.value = true;
+		try {
+			return await fn(...args);
+		} finally {
+			isLoading.value = false;
+		}
+	}
+	return {
+		isLoading,
+		wrap
+	};
+}
+export { createApis, useAsyncLoading, useDebounce, useOptions, useThrottle };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["timer: ReturnType<typeof setTimeout> | undefined"],"sources":["../src/utils/createApis.ts","../src/composables/useOptions.ts","../src/composables/hooks.ts"],"sourcesContent":["/**\n * 根据接口地址创建 ProTable 需要的 CRUD 接口集合（基于 fetch 的默认实现）。\n * 实际项目里可换成自己的请求库，只要提供 get/create/update/remove 四个 Promise 方法即可。\n */\nexport type PromiseFn = (...args: any[]) => Promise<any>;\n\nexport interface PageApis {\n  get: PromiseFn;\n  create: PromiseFn;\n  update: PromiseFn;\n  remove: PromiseFn;\n}\n\nexport interface CreateApisOptions {\n  /** 自定义请求实现，默认使用 fetch */\n  request?: (url: string, init: RequestInit) => Promise<any>;\n}\n\nexport function createApis(baseUrl: string, options: CreateApisOptions = {}): PageApis {\n  const request = options.request || ((url, init) => fetch(url, init).then((res) => res.json()));\n\n  return {\n    get: (params?: Record<string, any>) =>\n      request(`${baseUrl}?${new URLSearchParams(params)}`, { method: \"GET\" }),\n    create: (data: Record<string, any>) =>\n      request(baseUrl, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(data),\n      }),\n    update: (data: Record<string, any>) =>\n      request(baseUrl, {\n        method: \"PUT\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(data),\n      }),\n    remove: (ids: Array<string | number>) =>\n      request(baseUrl, {\n        method: \"DELETE\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(ids),\n      }),\n  };\n}\n","import { onMounted, ref, watch, type Ref } from \"vue\";\n\nexport interface DictOption {\n  label: string;\n  value: any;\n  disabled?: boolean;\n}\n\nexport interface UseOptionsOptions {\n  /** 静态选项，元素支持任意结构（配合 labelField/valueField）；也支持返回选项的函数或响应式值 */\n  options?: any\n  /** 远程字典：返回选项数组的函数，会在挂载时和 deps 变化时自动调用 */\n  fetch?: (...args: any[]) => Promise<DictOption[]> | DictOption[]\n  /** 依赖值，变化时重新拉取远程字典 */\n  deps?: Ref<any> | Ref<any>[]\n  /** 挂载时是否立即拉取，默认 true */\n  immediate?: boolean\n}\n\n/**\n * 选项数据源：静态数组 / 函数 / 远程字典三选一。\n * 供 ProSelect / ProCheckboxGroup / ProRadioGroup 共用。\n */\nexport function useOptions(config: UseOptionsOptions = {}) {\n  const options = ref<any[]>([]);\n  const isLoading = ref(false);\n\n  function unwrapDeps(): any {\n    const deps = config.deps;\n    // deps 可能是 Ref / Ref 数组 / 普通值，取当前值给 fetch 函数用\n    if (deps == null) return undefined;\n    if (Array.isArray(deps)) {\n      return deps.map((d) => (d && typeof d === \"object\" && \"value\" in d ? d.value : d));\n    }\n    return deps && typeof deps === \"object\" && \"value\" in deps ? deps.value : deps;\n  }\n\n  async function load() {\n    const { options: staticOptions, fetch } = config;\n    // options 可能是响应式包裹的值（computed），先解包\n    const source = typeof staticOptions === \"object\" && staticOptions !== null && \"value\" in staticOptions ? (staticOptions as any).value : staticOptions;\n    if (source) {\n      options.value = typeof source === \"function\" ? await source(unwrapDeps()) : source;\n      return;\n    }\n    if (fetch) {\n      isLoading.value = true;\n      try {\n        options.value = await fetch(unwrapDeps());\n      } finally {\n        isLoading.value = false;\n      }\n    }\n  }\n\n  if (config.deps) {\n    const deps = Array.isArray(config.deps) ? config.deps : [config.deps];\n    watch(deps, () => load());\n  }\n\n  onMounted(() => {\n    if (config.immediate !== false) load();\n  });\n\n  return { options, isLoading, reload: load };\n}\n","import { ref } from \"vue\";\n\n/**\n * 防抖：间隔内重复调用只执行最后一次\n */\nexport function useDebounce(fn: (...args: any[]) => void, delay = 300) {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  return (...args: any[]) => {\n    if (timer) clearTimeout(timer);\n    timer = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n}\n\n/**\n * 节流：间隔内最多执行一次\n */\nexport function useThrottle(fn: (...args: any[]) => void, interval = 300) {\n  let last = 0;\n\n  return (...args: any[]) => {\n    const now = Date.now();\n    if (now - last >= interval) {\n      last = now;\n      fn(...args);\n    }\n  };\n}\n\n/**\n * async 点击的 loading 状态：等待 promise 结束自动复位\n */\nexport function useAsyncLoading() {\n  const isLoading = ref(false);\n\n  async function wrap(fn: (...args: any[]) => any, ...args: any[]) {\n    if (isLoading.value) return;\n    isLoading.value = true;\n    try {\n      return await fn(...args);\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  return { isLoading, wrap };\n}\n"],"mappings":";AAkBA,SAAgB,WAAW,SAAiB,UAA6B,EAAE,EAAY;CACrF,MAAM,UAAU,QAAQ,aAAa,KAAK,SAAS,MAAM,KAAK,KAAK,CAAC,MAAM,QAAQ,IAAI,MAAM,CAAC;AAE7F,QAAO;EACL,MAAM,WACJ,QAAQ,GAAG,QAAQ,GAAG,IAAI,gBAAgB,OAAO,IAAI,EAAE,QAAQ,OAAO,CAAC;EACzE,SAAS,SACP,QAAQ,SAAS;GACf,QAAQ;GACR,SAAS,EAAE,gBAAgB,oBAAoB;GAC/C,MAAM,KAAK,UAAU,KAAK;GAC3B,CAAC;EACJ,SAAS,SACP,QAAQ,SAAS;GACf,QAAQ;GACR,SAAS,EAAE,gBAAgB,oBAAoB;GAC/C,MAAM,KAAK,UAAU,KAAK;GAC3B,CAAC;EACJ,SAAS,QACP,QAAQ,SAAS;GACf,QAAQ;GACR,SAAS,EAAE,gBAAgB,oBAAoB;GAC/C,MAAM,KAAK,UAAU,IAAI;GAC1B,CAAC;EACL;;ACnBH,SAAgB,WAAW,SAA4B,EAAE,EAAE;CACzD,MAAM,UAAU,IAAW,EAAE,CAAC;CAC9B,MAAM,YAAY,IAAI,MAAM;CAE5B,SAAS,aAAkB;EACzB,MAAM,OAAO,OAAO;AAEpB,MAAI,QAAQ,KAAM,QAAO,KAAA;AACzB,MAAI,MAAM,QAAQ,KAAK,CACrB,QAAO,KAAK,KAAK,MAAO,KAAK,OAAO,MAAM,YAAY,WAAW,IAAI,EAAE,QAAQ,EAAG;AAEpF,SAAO,QAAQ,OAAO,SAAS,YAAY,WAAW,OAAO,KAAK,QAAQ;;CAG5E,eAAe,OAAO;EACpB,MAAM,EAAE,SAAS,eAAe,OAAA,YAAU;EAE1C,MAAM,SAAS,OAAO,kBAAkB,YAAY,kBAAkB,QAAQ,WAAW,gBAAiB,cAAsB,QAAQ;AACxI,MAAI,QAAQ;AACV,WAAQ,QAAQ,OAAO,WAAW,aAAa,MAAM,OAAO,YAAY,CAAC,GAAG;AAC5E;;AAEF,MAAI,SAAO;AACT,aAAU,QAAQ;AAClB,OAAI;AACF,YAAQ,QAAQ,MAAM,QAAM,YAAY,CAAC;aACjC;AACR,cAAU,QAAQ;;;;AAKxB,KAAI,OAAO,KAET,OADa,MAAM,QAAQ,OAAO,KAAK,GAAG,OAAO,OAAO,CAAC,OAAO,KAAK,QACnD,MAAM,CAAC;AAG3B,iBAAgB;AACd,MAAI,OAAO,cAAc,MAAO,OAAM;GACtC;AAEF,QAAO;EAAE;EAAS;EAAW,QAAQ;EAAM;;AC3D7C,SAAgB,YAAY,IAA8B,QAAQ,KAAK;CACrE,IAAIA;AAEJ,SAAQ,GAAG,SAAgB;AACzB,MAAI,MAAO,cAAa,MAAM;AAC9B,UAAQ,iBAAiB;AACvB,MAAG,GAAG,KAAK;KACV,MAAM;;;AAOb,SAAgB,YAAY,IAA8B,WAAW,KAAK;CACxE,IAAI,OAAO;AAEX,SAAQ,GAAG,SAAgB;EACzB,MAAM,MAAM,KAAK,KAAK;AACtB,MAAI,MAAM,QAAQ,UAAU;AAC1B,UAAO;AACP,MAAG,GAAG,KAAK;;;;AAQjB,SAAgB,kBAAkB;CAChC,MAAM,YAAY,IAAI,MAAM;CAE5B,eAAe,KAAK,IAA6B,GAAG,MAAa;AAC/D,MAAI,UAAU,MAAO;AACrB,YAAU,QAAQ;AAClB,MAAI;AACF,UAAO,MAAM,GAAG,GAAG,KAAK;YAChB;AACR,aAAU,QAAQ;;;AAItB,QAAO;EAAE;EAAW;EAAM"}

package/dist/types.d.ts

@@ -0,0 +1,44 @@
+import { Component } from 'vue';
+export type PromiseFn = (...args: any[]) => Promise<any>;
+export interface PageApis {
+    get: PromiseFn;
+    create: PromiseFn;
+    update: PromiseFn;
+    remove: PromiseFn;
+}
+export interface CreateApisOptions {
+    /** 自定义请求实现，默认使用 fetch */
+    request?: (url: string, init: RequestInit) => Promise<any>;
+}
+/** ProFormBuilder 的单项配置 */
+export interface FormItem extends Record<string, any> {
+    label?: string;
+    key: string;
+    /** 内置类型：input / textarea / number / date / select / checkbox；也可直接传组件 */
+    type?: string | Component;
+    /** 隐藏该项（配合 computed 可做联动显隐） */
+    hidden?: boolean;
+    /** 栅格数（24 分制），不传用组件的 span */
+    span?: number;
+    /** 直接透传给渲染组件的 props（设置后其余顶层字段不再透传） */
+    props?: Record<string, any>;
+    /** 配置式插槽：{ 默认插槽名或函数 }，传给渲染的组件 */
+    slots?: Record<string, any>;
+}
+/** ProFormBuilder 的规则配置：各 UI 库的原生校验规则结构 */
+export type FormRules = Record<string, any>;
+/** ProTable 的列配置：各 UI 库的原生表格列结构 */
+export type TableColumn = Record<string, any>;
+/** 命令式弹窗的配置：title / width / onOk / onCancel 等公共字段 */
+export interface DialogOptions {
+    title?: any;
+    width?: string | number;
+    /** 点确定：拿到内容组件实例（或提交结果），返回 false / reject 拦截关闭 */
+    onOk?: (result?: any) => any;
+    onCancel?: (e?: any) => any;
+    [key: string]: any;
+}
+/** openDialog 的返回值 */
+export interface DialogHandle {
+    close: () => void;
+}

package/dist/utils/createApis.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 根据接口地址创建 ProTable 需要的 CRUD 接口集合（基于 fetch 的默认实现）。
+ * 实际项目里可换成自己的请求库，只要提供 get/create/update/remove 四个 Promise 方法即可。
+ */
+export type PromiseFn = (...args: any[]) => Promise<any>;
+export interface PageApis {
+    get: PromiseFn;
+    create: PromiseFn;
+    update: PromiseFn;
+    remove: PromiseFn;
+}
+export interface CreateApisOptions {
+    /** 自定义请求实现，默认使用 fetch */
+    request?: (url: string, init: RequestInit) => Promise<any>;
+}
+export declare function createApis(baseUrl: string, options?: CreateApisOptions): PageApis;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@cynnie/ui-core",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "SnowUI 无 UI 依赖的核心层：createApis / hooks / 类型契约",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/snowbitx/ui.git",
+    "directory": "packages/ui-core"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": "^3.5.17"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue-jsx": "^5.0.0",
+    "@vue/tsconfig": "^0.7.0",
+    "vite": "npm:rolldown-vite@^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.17",
+    "vue-tsc": "^2.2.10"
+  },
+  "scripts": {
+    "build": "vite build",
+    "format": "prettier --write src/",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json"
+  }
+}