@axin666/ai-ui 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,130 @@
1
+ # AI UI
2
+
3
+ 一个基于 Vue 3 + TypeScript 的组件库,面向中后台场景。
4
+
5
+ ## ✨ 特性
6
+
7
+ - 🚀 **Vue 3 + TypeScript** - 基于 Vue 3 Composition API 和 TypeScript 构建
8
+ - 🎨 **可定制主题** - 基于 CSS 变量的主题系统,支持亮色/暗色模式
9
+ - 📦 **按需引入** - 支持 Tree Shaking,减小包体积
10
+ - 🔧 **AI Coding 友好** - 统一的代码结构、完备的类型定义
11
+
12
+ ## 📦 安装
13
+
14
+ ```bash
15
+ # npm
16
+ npm install ai-ui
17
+
18
+ # pnpm
19
+ pnpm add ai-ui
20
+ ```
21
+
22
+ ## 🔨 使用
23
+
24
+ ### 完整引入
25
+
26
+ ```ts
27
+ import { createApp } from 'vue'
28
+ import AiUI from '@ai-ui'
29
+ import '@ai-ui/theme/index.scss'
30
+ import App from './App.vue'
31
+
32
+ const app = createApp(App)
33
+ app.use(AiUI)
34
+ app.mount('#app')
35
+ ```
36
+
37
+ ### 按需引入
38
+
39
+ ```vue
40
+ <script setup lang="ts">
41
+ // 从主入口引入组件
42
+ import { AiButton, AiLoadingIcon } from '@ai-ui'
43
+
44
+ // 导入工具函数
45
+ import { createBem } from '@ai-ui'
46
+
47
+ // 导入 Hooks
48
+ import { useEventListener } from '@ai-ui'
49
+ </script>
50
+
51
+ <template>
52
+ <AiButton type="primary">
53
+ <template #icon>
54
+ <AiLoadingIcon />
55
+ </template>
56
+ 按钮
57
+ </AiButton>
58
+ </template>
59
+ ```
60
+
61
+ ## 🛠️ 开发
62
+
63
+ ```bash
64
+ # 安装依赖
65
+ pnpm install
66
+
67
+ # 启动开发服务器
68
+ pnpm dev
69
+
70
+ # 构建组件库
71
+ pnpm build
72
+
73
+ # 运行测试
74
+ pnpm test
75
+
76
+ # 启动文档站点
77
+ pnpm docs:dev
78
+ ```
79
+
80
+ ## 📁 项目结构
81
+
82
+ ```
83
+ ai-ui/
84
+ ├── packages/ # 组件库核心代码
85
+ │ ├── index.ts # 主入口文件
86
+ │ ├── components/ # 组件源码
87
+ │ │ ├── Button/ # 按钮组件
88
+ │ │ │ ├── src/
89
+ │ │ │ │ ├── AiButton.vue # 组件实现
90
+ │ │ │ │ ├── props.ts # Props 定义
91
+ │ │ │ │ └── style.scss # 样式
92
+ │ │ │ ├── index.ts # 组件出口
93
+ │ │ │ └── __tests__/ # 单元测试
94
+ │ │ ├── Icon/ # 图标组件
95
+ │ │ ├── index.ts # 组件库入口
96
+ │ │ └── types.ts # 公共类型
97
+ │ ├── hooks/ # 通用 Hooks
98
+ │ │ ├── useEventListener.ts
99
+ │ │ ├── useClickOutside.ts
100
+ │ │ └── index.ts
101
+ │ ├── utils/ # 工具函数
102
+ │ │ ├── bem.ts # BEM 命名工具
103
+ │ │ ├── dom.ts # DOM 工具
104
+ │ │ ├── props.ts # Props 工具
105
+ │ │ └── index.ts
106
+ │ └── theme/ # 主题系统
107
+ │ ├── index.scss # 默认主题(CSS 变量)
108
+ │ ├── dark.scss # 暗色主题
109
+ │ └── tokens/ # 设计令牌
110
+ │ ├── colors.ts
111
+ │ ├── spacing.ts
112
+ │ ├── typography.ts
113
+ │ └── index.ts
114
+ ├── playground/ # 开发预览环境
115
+ │ ├── App.vue # 预览页面
116
+ │ ├── main.ts # 预览入口
117
+ │ └── vite-env.d.ts # 类型声明
118
+ ├── docs/ # VitePress 文档
119
+ │ ├── components/ # 组件文档
120
+ │ ├── guide/ # 指南文档
121
+ │ └── index.md # 文档首页
122
+ ├── index.html # 开发预览 HTML
123
+ ├── vite.config.ts # Vite 配置
124
+ ├── tsconfig.json # TypeScript 配置
125
+ └── package.json # 项目配置
126
+ ```
127
+
128
+ ## 📄 License
129
+
130
+ [MIT](./LICENSE)
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");function g(n){return function(t,s){if(t===void 0)return n;if(typeof t=="object")return y(n,t);const r=`${n}__${t}`;return s===void 0?r:typeof s=="string"?`${r}--${s}`:y(r,s)}}function y(n,o){const t=[n];for(const[s,r]of Object.entries(o))r&&t.push(`${n}--${s}`);return t.join(" ")}function b(n="ai"){return function(o){return g(`${n}-${o}`)}}const T=b("ai"),p=typeof window<"u";function j(n){return p?n in document.documentElement.style:!1}function W(n,o,t,s){return n.addEventListener(o,t,s),()=>n.removeEventListener(o,t,s)}function H(n){let o=n.parentElement;for(;o;){const{overflow:t,overflowX:s,overflowY:r}=getComputedStyle(o);if(/(auto|scroll|overlay)/.test(t+s+r))return o;o=o.parentElement}return window}function h(n){return n.getBoundingClientRect()}function U(n,o=0){const t=h(n),s=window.innerHeight||document.documentElement.clientHeight,r=window.innerWidth||document.documentElement.clientWidth,l=t.top<=s*(1-o)&&t.bottom>=s*o,c=t.left<=r*(1-o)&&t.right>=r*o;return l&&c}function F(n){n.stopPropagation()}function G(n){n.preventDefault()}const k=e.defineComponent({name:"AiButton",__name:"AiButton",props:{type:{default:"default"},size:{default:"md"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},ghost:{type:Boolean,default:!1},block:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},nativeType:{default:"button"},icon:{},iconRight:{},href:{},target:{}},emits:["click"],setup(n,{emit:o}){const t=n,s=o,r=e.useSlots(),l=g("ai-button"),c=e.computed(()=>!!t.href),d=e.computed(()=>{const a=l(),u=[a,`${a}--${t.type}`,`${a}--${t.size}`];return t.block&&u.push(`${a}--block`),t.ghost&&u.push(`${a}--ghost`),t.round&&u.push(`${a}--round`),t.circle&&u.push(`${a}--circle`),t.loading&&u.push(`${a}--loading`),t.disabled&&u.push(`${a}--disabled`),u}),m=a=>{if(t.disabled||t.loading){a.preventDefault(),a.stopPropagation();return}s("click",a)},f=a=>a?typeof a=="string"?a:e.h(a):null;return(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value?"a":"button"),{class:e.normalizeClass(d.value),href:c.value?n.href:void 0,target:c.value?n.target:void 0,type:c.value?void 0:n.nativeType,disabled:!c.value&&n.disabled,onClick:m},{default:e.withCtx(()=>[n.loading?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(l)("spinner"))},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(e.unref(l)("content"))},[e.unref(r).icon||n.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(l)("icon"),e.unref(l)("icon","left")])},[e.renderSlot(a.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f(n.icon))))])],2)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(e.unref(l)("text"))},[e.renderSlot(a.$slots,"default")],2),e.unref(r).iconRight||n.iconRight?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass([e.unref(l)("icon"),e.unref(l)("icon","right")])},[e.renderSlot(a.$slots,"iconRight",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f(n.iconRight))))])],2)):e.createCommentVNode("",!0)],2)]),_:3},8,["class","href","target","type","disabled"]))}}),q={class:"ai-loading-icon"},O=["width","height","stroke","stroke-width"],x=e.defineComponent({name:"AiLoadingIcon",__name:"AiLoadingIcon",props:{size:{default:"1em"},color:{default:"currentColor"},strokeWidth:{default:2}},setup(n){const o=n,t=e.computed(()=>typeof o.size=="number"?`${o.size}px`:o.size);return(s,r)=>(e.openBlock(),e.createElementBlock("span",q,[(e.openBlock(),e.createElementBlock("svg",{width:t.value,height:t.value,viewBox:"0 0 24 24",fill:"none",stroke:n.color,"stroke-width":n.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round"},[...r[0]||(r[0]=[e.createElementVNode("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"},null,-1)])],8,O))]))}}),X=[k,x];function Y(n){X.forEach(o=>{n.component(o.name,o)})}function J(n,o){if(!p)return;const t=s=>{const r=n.value;!r||r===s.target||r.contains(s.target)||o(s)};e.onMounted(()=>{document.addEventListener("click",t,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",t,!0)})}function K(n,o,t,s){if(!p)return;let r;const l=d=>{d.addEventListener(o,t,s),r=()=>d.removeEventListener(o,t,s)},c=()=>{r==null||r(),r=void 0};e.isRef(n)?e.watch(n,(d,m,f)=>{d&&(l(d),f(c))},{immediate:!0}):e.onMounted(()=>l(n)),e.onUnmounted(c)}const v={primary:"#6366f1",primaryLight:"#818cf8",primaryDark:"#4f46e5",primaryBg:"#eef2ff"},C={success:"#10b981",successLight:"#34d399",successDark:"#059669",successBg:"#ecfdf5",warning:"#f59e0b",warningLight:"#fbbf24",warningDark:"#d97706",warningBg:"#fffbeb",error:"#ef4444",errorLight:"#f87171",errorDark:"#dc2626",errorBg:"#fef2f2",info:"#3b82f6",infoLight:"#60a5fa",infoDark:"#2563eb",infoBg:"#eff6ff"},i={white:"#ffffff",black:"#000000",gray50:"#f9fafb",gray100:"#f3f4f6",gray200:"#e5e7eb",gray300:"#d1d5db",gray400:"#9ca3af",gray500:"#6b7280",gray600:"#4b5563",gray700:"#374151",gray800:"#1f2937",gray900:"#111827"},w={primary:i.gray900,secondary:i.gray600,placeholder:i.gray400,disabled:i.gray300,inverse:i.white},B={page:i.gray50,container:i.white,elevated:i.white,disabled:i.gray100,mask:"rgba(0, 0, 0, 0.45)"},E={base:i.gray200,light:i.gray100,dark:i.gray300},S={brand:v,functional:C,neutral:i,text:w,bg:B,border:E},Q=4,L={none:0,xs:4,sm:8,md:12,lg:16,xl:20,"2xl":24,"3xl":32,"4xl":40,"5xl":48,"6xl":64},$={buttonSm:{x:12,y:6},buttonMd:{x:16,y:8},buttonLg:{x:20,y:12},inputSm:{x:8,y:4},inputMd:{x:12,y:8},inputLg:{x:16,y:12},cardSm:12,cardMd:16,cardLg:24},N={none:0,xs:2,sm:4,md:6,lg:8,xl:12,"2xl":16,full:9999},z={none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",base:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},I={fast:"150ms ease",base:"200ms ease",slow:"300ms ease"},P={spacing:L,padding:$,radius:N,shadow:z,transition:I},R={sans:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",mono:"'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace"},A={xs:12,sm:14,base:16,lg:18,xl:20,"2xl":24,"3xl":30,"4xl":36},D={none:1,tight:1.25,snug:1.375,normal:1.5,relaxed:1.625,loose:2},V={normal:400,medium:500,semibold:600,bold:700},M={fontFamily:R,fontSize:A,lineHeight:D,fontWeight:V},Z={...S,...P,...M};exports.AiButton=k;exports.AiLoadingIcon=x;exports.BASE_SPACING_UNIT=Q;exports.addEventListener=W;exports.bgColors=B;exports.borderColors=E;exports.borderRadius=N;exports.brandColors=v;exports.colorTokens=S;exports.componentPadding=$;exports.createBem=g;exports.createNamespace=b;exports.fontFamily=R;exports.fontSize=A;exports.fontWeight=V;exports.functionalColors=C;exports.getElementRect=h;exports.getScrollParent=H;exports.install=Y;exports.isClient=p;exports.isCssPropertySupported=j;exports.isElementInViewport=U;exports.lineHeight=D;exports.neutralColors=i;exports.preventDefault=G;exports.shadows=z;exports.spacingScale=L;exports.spacingTokens=P;exports.stopPropagation=F;exports.textColors=w;exports.tokens=Z;exports.transitions=I;exports.typographyTokens=M;exports.useClickOutside=J;exports.useEventListener=K;exports.useNamespace=T;
@@ -0,0 +1,404 @@
1
+ import { defineComponent as $, useSlots as I, computed as v, createBlock as y, openBlock as d, resolveDynamicComponent as b, normalizeClass as g, withCtx as R, createElementBlock as p, createCommentVNode as h, createElementVNode as k, unref as c, renderSlot as x, h as A, onMounted as B, onUnmounted as E, isRef as z, watch as D } from "vue";
2
+ function S(e) {
3
+ return function(t, s) {
4
+ if (t === void 0)
5
+ return e;
6
+ if (typeof t == "object")
7
+ return L(e, t);
8
+ const o = `${e}__${t}`;
9
+ return s === void 0 ? o : typeof s == "string" ? `${o}--${s}` : L(o, s);
10
+ };
11
+ }
12
+ function L(e, n) {
13
+ const t = [e];
14
+ for (const [s, o] of Object.entries(n))
15
+ o && t.push(`${e}--${s}`);
16
+ return t.join(" ");
17
+ }
18
+ function M(e = "ai") {
19
+ return function(n) {
20
+ return S(`${e}-${n}`);
21
+ };
22
+ }
23
+ const re = M("ai"), w = typeof window < "u";
24
+ function ie(e) {
25
+ return w ? e in document.documentElement.style : !1;
26
+ }
27
+ function ae(e, n, t, s) {
28
+ return e.addEventListener(n, t, s), () => e.removeEventListener(n, t, s);
29
+ }
30
+ function le(e) {
31
+ let n = e.parentElement;
32
+ for (; n; ) {
33
+ const { overflow: t, overflowX: s, overflowY: o } = getComputedStyle(n);
34
+ if (/(auto|scroll|overlay)/.test(t + s + o))
35
+ return n;
36
+ n = n.parentElement;
37
+ }
38
+ return window;
39
+ }
40
+ function N(e) {
41
+ return e.getBoundingClientRect();
42
+ }
43
+ function ce(e, n = 0) {
44
+ const t = N(e), s = window.innerHeight || document.documentElement.clientHeight, o = window.innerWidth || document.documentElement.clientWidth, i = t.top <= s * (1 - n) && t.bottom >= s * n, l = t.left <= o * (1 - n) && t.right >= o * n;
45
+ return i && l;
46
+ }
47
+ function ue(e) {
48
+ e.stopPropagation();
49
+ }
50
+ function de(e) {
51
+ e.preventDefault();
52
+ }
53
+ const P = /* @__PURE__ */ $({
54
+ name: "AiButton",
55
+ __name: "AiButton",
56
+ props: {
57
+ type: { default: "default" },
58
+ size: { default: "md" },
59
+ disabled: { type: Boolean, default: !1 },
60
+ loading: { type: Boolean, default: !1 },
61
+ ghost: { type: Boolean, default: !1 },
62
+ block: { type: Boolean, default: !1 },
63
+ round: { type: Boolean, default: !1 },
64
+ circle: { type: Boolean, default: !1 },
65
+ nativeType: { default: "button" },
66
+ icon: {},
67
+ iconRight: {},
68
+ href: {},
69
+ target: {}
70
+ },
71
+ emits: ["click"],
72
+ setup(e, { emit: n }) {
73
+ const t = e, s = n, o = I(), i = S("ai-button"), l = v(() => !!t.href), f = v(() => {
74
+ const r = i(), u = [r, `${r}--${t.type}`, `${r}--${t.size}`];
75
+ return t.block && u.push(`${r}--block`), t.ghost && u.push(`${r}--ghost`), t.round && u.push(`${r}--round`), t.circle && u.push(`${r}--circle`), t.loading && u.push(`${r}--loading`), t.disabled && u.push(`${r}--disabled`), u;
76
+ }), C = (r) => {
77
+ if (t.disabled || t.loading) {
78
+ r.preventDefault(), r.stopPropagation();
79
+ return;
80
+ }
81
+ s("click", r);
82
+ }, m = (r) => r ? typeof r == "string" ? r : A(r) : null;
83
+ return (r, u) => (d(), y(b(l.value ? "a" : "button"), {
84
+ class: g(f.value),
85
+ href: l.value ? e.href : void 0,
86
+ target: l.value ? e.target : void 0,
87
+ type: l.value ? void 0 : e.nativeType,
88
+ disabled: !l.value && e.disabled,
89
+ onClick: C
90
+ }, {
91
+ default: R(() => [
92
+ e.loading ? (d(), p("span", {
93
+ key: 0,
94
+ class: g(c(i)("spinner"))
95
+ }, null, 2)) : h("", !0),
96
+ k("span", {
97
+ class: g(c(i)("content"))
98
+ }, [
99
+ c(o).icon || e.icon ? (d(), p("span", {
100
+ key: 0,
101
+ class: g([c(i)("icon"), c(i)("icon", "left")])
102
+ }, [
103
+ x(r.$slots, "icon", {}, () => [
104
+ (d(), y(b(m(e.icon))))
105
+ ])
106
+ ], 2)) : h("", !0),
107
+ k("span", {
108
+ class: g(c(i)("text"))
109
+ }, [
110
+ x(r.$slots, "default")
111
+ ], 2),
112
+ c(o).iconRight || e.iconRight ? (d(), p("span", {
113
+ key: 1,
114
+ class: g([c(i)("icon"), c(i)("icon", "right")])
115
+ }, [
116
+ x(r.$slots, "iconRight", {}, () => [
117
+ (d(), y(b(m(e.iconRight))))
118
+ ])
119
+ ], 2)) : h("", !0)
120
+ ], 2)
121
+ ]),
122
+ _: 3
123
+ }, 8, ["class", "href", "target", "type", "disabled"]));
124
+ }
125
+ }), j = { class: "ai-loading-icon" }, V = ["width", "height", "stroke", "stroke-width"], W = /* @__PURE__ */ $({
126
+ name: "AiLoadingIcon",
127
+ __name: "AiLoadingIcon",
128
+ props: {
129
+ size: { default: "1em" },
130
+ color: { default: "currentColor" },
131
+ strokeWidth: { default: 2 }
132
+ },
133
+ setup(e) {
134
+ const n = e, t = v(() => typeof n.size == "number" ? `${n.size}px` : n.size);
135
+ return (s, o) => (d(), p("span", j, [
136
+ (d(), p("svg", {
137
+ width: t.value,
138
+ height: t.value,
139
+ viewBox: "0 0 24 24",
140
+ fill: "none",
141
+ stroke: e.color,
142
+ "stroke-width": e.strokeWidth,
143
+ "stroke-linecap": "round",
144
+ "stroke-linejoin": "round"
145
+ }, [...o[0] || (o[0] = [
146
+ k("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }, null, -1)
147
+ ])], 8, V))
148
+ ]));
149
+ }
150
+ }), H = [P, W];
151
+ function fe(e) {
152
+ H.forEach((n) => {
153
+ e.component(n.name, n);
154
+ });
155
+ }
156
+ function ge(e, n) {
157
+ if (!w) return;
158
+ const t = (s) => {
159
+ const o = e.value;
160
+ !o || o === s.target || o.contains(s.target) || n(s);
161
+ };
162
+ B(() => {
163
+ document.addEventListener("click", t, !0);
164
+ }), E(() => {
165
+ document.removeEventListener("click", t, !0);
166
+ });
167
+ }
168
+ function pe(e, n, t, s) {
169
+ if (!w) return;
170
+ let o;
171
+ const i = (f) => {
172
+ f.addEventListener(n, t, s), o = () => f.removeEventListener(n, t, s);
173
+ }, l = () => {
174
+ o == null || o(), o = void 0;
175
+ };
176
+ z(e) ? D(
177
+ e,
178
+ (f, C, m) => {
179
+ f && (i(f), m(l));
180
+ },
181
+ { immediate: !0 }
182
+ ) : B(() => i(e)), E(l);
183
+ }
184
+ const T = {
185
+ primary: "#6366f1",
186
+ primaryLight: "#818cf8",
187
+ primaryDark: "#4f46e5",
188
+ primaryBg: "#eef2ff"
189
+ }, F = {
190
+ success: "#10b981",
191
+ successLight: "#34d399",
192
+ successDark: "#059669",
193
+ successBg: "#ecfdf5",
194
+ warning: "#f59e0b",
195
+ warningLight: "#fbbf24",
196
+ warningDark: "#d97706",
197
+ warningBg: "#fffbeb",
198
+ error: "#ef4444",
199
+ errorLight: "#f87171",
200
+ errorDark: "#dc2626",
201
+ errorBg: "#fef2f2",
202
+ info: "#3b82f6",
203
+ infoLight: "#60a5fa",
204
+ infoDark: "#2563eb",
205
+ infoBg: "#eff6ff"
206
+ }, a = {
207
+ white: "#ffffff",
208
+ black: "#000000",
209
+ gray50: "#f9fafb",
210
+ gray100: "#f3f4f6",
211
+ gray200: "#e5e7eb",
212
+ gray300: "#d1d5db",
213
+ gray400: "#9ca3af",
214
+ gray500: "#6b7280",
215
+ gray600: "#4b5563",
216
+ gray700: "#374151",
217
+ gray800: "#1f2937",
218
+ gray900: "#111827"
219
+ }, U = {
220
+ primary: a.gray900,
221
+ secondary: a.gray600,
222
+ placeholder: a.gray400,
223
+ disabled: a.gray300,
224
+ inverse: a.white
225
+ }, G = {
226
+ page: a.gray50,
227
+ container: a.white,
228
+ elevated: a.white,
229
+ disabled: a.gray100,
230
+ mask: "rgba(0, 0, 0, 0.45)"
231
+ }, X = {
232
+ base: a.gray200,
233
+ light: a.gray100,
234
+ dark: a.gray300
235
+ }, Y = {
236
+ brand: T,
237
+ functional: F,
238
+ neutral: a,
239
+ text: U,
240
+ bg: G,
241
+ border: X
242
+ }, me = 4, q = {
243
+ /** 0px */
244
+ none: 0,
245
+ /** 4px */
246
+ xs: 4,
247
+ /** 8px */
248
+ sm: 8,
249
+ /** 12px */
250
+ md: 12,
251
+ /** 16px */
252
+ lg: 16,
253
+ /** 20px */
254
+ xl: 20,
255
+ /** 24px */
256
+ "2xl": 24,
257
+ /** 32px */
258
+ "3xl": 32,
259
+ /** 40px */
260
+ "4xl": 40,
261
+ /** 48px */
262
+ "5xl": 48,
263
+ /** 64px */
264
+ "6xl": 64
265
+ }, J = {
266
+ /** 按钮等小型组件 */
267
+ buttonSm: { x: 12, y: 6 },
268
+ buttonMd: { x: 16, y: 8 },
269
+ buttonLg: { x: 20, y: 12 },
270
+ /** 输入框 */
271
+ inputSm: { x: 8, y: 4 },
272
+ inputMd: { x: 12, y: 8 },
273
+ inputLg: { x: 16, y: 12 },
274
+ /** 卡片 */
275
+ cardSm: 12,
276
+ cardMd: 16,
277
+ cardLg: 24
278
+ }, K = {
279
+ /** 0px */
280
+ none: 0,
281
+ /** 2px */
282
+ xs: 2,
283
+ /** 4px */
284
+ sm: 4,
285
+ /** 6px */
286
+ md: 6,
287
+ /** 8px */
288
+ lg: 8,
289
+ /** 12px */
290
+ xl: 12,
291
+ /** 16px */
292
+ "2xl": 16,
293
+ /** 9999px - 完全圆角 */
294
+ full: 9999
295
+ }, Q = {
296
+ none: "none",
297
+ sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
298
+ base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
299
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
300
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
301
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
302
+ }, Z = {
303
+ /** 快速过渡 - 用于小型交互 */
304
+ fast: "150ms ease",
305
+ /** 默认过渡 */
306
+ base: "200ms ease",
307
+ /** 慢速过渡 - 用于大型动画 */
308
+ slow: "300ms ease"
309
+ }, O = {
310
+ spacing: q,
311
+ padding: J,
312
+ radius: K,
313
+ shadow: Q,
314
+ transition: Z
315
+ }, _ = {
316
+ sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
317
+ mono: "'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace"
318
+ }, ee = {
319
+ /** 12px */
320
+ xs: 12,
321
+ /** 14px */
322
+ sm: 14,
323
+ /** 16px */
324
+ base: 16,
325
+ /** 18px */
326
+ lg: 18,
327
+ /** 20px */
328
+ xl: 20,
329
+ /** 24px */
330
+ "2xl": 24,
331
+ /** 30px */
332
+ "3xl": 30,
333
+ /** 36px */
334
+ "4xl": 36
335
+ }, te = {
336
+ /** 1 */
337
+ none: 1,
338
+ /** 1.25 */
339
+ tight: 1.25,
340
+ /** 1.375 */
341
+ snug: 1.375,
342
+ /** 1.5 */
343
+ normal: 1.5,
344
+ /** 1.625 */
345
+ relaxed: 1.625,
346
+ /** 2 */
347
+ loose: 2
348
+ }, ne = {
349
+ /** 400 */
350
+ normal: 400,
351
+ /** 500 */
352
+ medium: 500,
353
+ /** 600 */
354
+ semibold: 600,
355
+ /** 700 */
356
+ bold: 700
357
+ }, oe = {
358
+ fontFamily: _,
359
+ fontSize: ee,
360
+ lineHeight: te,
361
+ fontWeight: ne
362
+ }, ye = {
363
+ ...Y,
364
+ ...O,
365
+ ...oe
366
+ };
367
+ export {
368
+ P as AiButton,
369
+ W as AiLoadingIcon,
370
+ me as BASE_SPACING_UNIT,
371
+ ae as addEventListener,
372
+ G as bgColors,
373
+ X as borderColors,
374
+ K as borderRadius,
375
+ T as brandColors,
376
+ Y as colorTokens,
377
+ J as componentPadding,
378
+ S as createBem,
379
+ M as createNamespace,
380
+ _ as fontFamily,
381
+ ee as fontSize,
382
+ ne as fontWeight,
383
+ F as functionalColors,
384
+ N as getElementRect,
385
+ le as getScrollParent,
386
+ fe as install,
387
+ w as isClient,
388
+ ie as isCssPropertySupported,
389
+ ce as isElementInViewport,
390
+ te as lineHeight,
391
+ a as neutralColors,
392
+ de as preventDefault,
393
+ Q as shadows,
394
+ q as spacingScale,
395
+ O as spacingTokens,
396
+ ue as stopPropagation,
397
+ U as textColors,
398
+ ye as tokens,
399
+ Z as transitions,
400
+ oe as typographyTokens,
401
+ ge as useClickOutside,
402
+ pe as useEventListener,
403
+ re as useNamespace
404
+ };
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";:root{--ai-color-primary: #ff4d4f;--ai-color-primary-hover: #ff7875;--ai-color-primary-active: #d9363e;--ai-color-primary-light: #ff7875;--ai-color-primary-dark: #d9363e;--ai-color-primary-bg: rgba(255, 77, 79, .12);--ai-color-success: #22c55e;--ai-color-success-light: #4ade80;--ai-color-success-dark: #16a34a;--ai-color-success-bg: rgba(34, 197, 94, .12);--ai-color-warning: #eab308;--ai-color-warning-light: #facc15;--ai-color-warning-dark: #ca8a04;--ai-color-warning-bg: rgba(234, 179, 8, .12);--ai-color-danger: #ff4d4f;--ai-color-error: #ff4d4f;--ai-color-error-light: #ff7875;--ai-color-error-dark: #d9363e;--ai-color-error-bg: rgba(255, 77, 79, .12);--ai-color-info: #ff4d4f;--ai-color-info-light: #ff7875;--ai-color-info-dark: #d9363e;--ai-color-info-bg: rgba(255, 77, 79, .12);--ai-color-white: #ffffff;--ai-color-black: #000000;--ai-color-gray-50: #f9fafb;--ai-color-gray-100: #f3f4f6;--ai-color-gray-200: #e5e7eb;--ai-color-gray-300: #d1d5db;--ai-color-gray-400: #9ca3af;--ai-color-gray-500: #6b7280;--ai-color-gray-600: #4b5563;--ai-color-gray-700: #374151;--ai-color-gray-800: #1f2937;--ai-color-gray-900: #111827;--ai-color-bg-base: #ffffff;--ai-color-bg-elevated: #ffffff;--ai-color-fill-default: #f9fafb;--ai-color-fill-hover: #f3f4f6;--ai-color-fill-active: #e5e7eb;--ai-bg-page: #ffffff;--ai-bg-container: #ffffff;--ai-bg-elevated: #ffffff;--ai-bg-disabled: #f3f4f6;--ai-bg-mask: rgba(0, 0, 0, .45);--ai-color-text-primary: #111827;--ai-color-text-secondary: #6b7280;--ai-color-text-disabled: #9ca3af;--ai-text-primary: #111827;--ai-text-secondary: #6b7280;--ai-text-placeholder: #9ca3af;--ai-text-disabled: #9ca3af;--ai-text-inverse: #ffffff;--ai-color-border: #e5e7eb;--ai-color-border-strong: #d1d5db;--ai-border-color: #e5e7eb;--ai-border-color-light: #f3f4f6;--ai-border-color-dark: #d1d5db;--ai-spacing-none: 0;--ai-spacing-xs: 4px;--ai-spacing-sm: 8px;--ai-spacing-md: 12px;--ai-spacing-lg: 16px;--ai-spacing-xl: 20px;--ai-spacing-2xl: 24px;--ai-spacing-3xl: 32px;--ai-spacing-4xl: 40px;--ai-spacing-5xl: 48px;--ai-spacing-6xl: 64px;--ai-radius-none: 0;--ai-radius-xs: 2px;--ai-radius-sm: 4px;--ai-radius-md: 6px;--ai-radius-lg: 8px;--ai-radius-xl: 12px;--ai-radius-2xl: 16px;--ai-radius-full: 9999px;--ai-radius-pill: 9999px;--ai-shadow-none: none;--ai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--ai-shadow-base: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ai-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ai-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--ai-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--ai-font-family-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;--ai-font-size-xs: 12px;--ai-font-size-sm: 14px;--ai-font-size-base: 16px;--ai-font-size-lg: 18px;--ai-font-size-xl: 20px;--ai-font-size-2xl: 24px;--ai-font-size-3xl: 30px;--ai-font-size-4xl: 36px;--ai-line-height-none: 1;--ai-line-height-tight: 1.25;--ai-line-height-snug: 1.375;--ai-line-height-normal: 1.5;--ai-line-height-relaxed: 1.625;--ai-line-height-loose: 2;--ai-line-height-base: 1.5;--ai-font-weight-normal: 400;--ai-font-weight-medium: 500;--ai-font-weight-semibold: 600;--ai-font-weight-bold: 700;--ai-transition-fast: .15s ease;--ai-transition-base: .2s ease;--ai-transition-slow: .3s ease;--ai-z-dropdown: 1000;--ai-z-sticky: 1020;--ai-z-fixed: 1030;--ai-z-modal-backdrop: 1040;--ai-z-modal: 1050;--ai-z-popover: 1060;--ai-z-tooltip: 1070}.ai-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--ai-spacing-md);height:32px;border-radius:var(--ai-radius-md);font-size:var(--ai-font-size-sm);line-height:var(--ai-line-height-base);font-weight:var(--ai-font-weight-medium, 500);border:1px solid transparent;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;background-image:none;touch-action:manipulation;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .1s ease;color:var(--ai-color-text-primary);background-color:var(--ai-color-fill-default);border-color:var(--ai-color-border)}.ai-button:hover{background-color:var(--ai-color-fill-hover);border-color:var(--ai-color-border-strong)}.ai-button:active{background-color:var(--ai-color-fill-active);transform:translateY(1px)}.ai-button--primary{background-color:var(--ai-color-primary);border-color:var(--ai-color-primary);color:#fff}.ai-button--primary:hover{background-color:var(--ai-color-primary-hover);border-color:var(--ai-color-primary-hover)}.ai-button--primary:active{background-color:var(--ai-color-primary-active);border-color:var(--ai-color-primary-active);box-shadow:0 0 0 1px #ff634773}.ai-button--success{background-color:var(--ai-color-success);border-color:var(--ai-color-success);color:#fff}.ai-button--success:hover{background-color:var(--ai-color-success-light);border-color:var(--ai-color-success-light)}.ai-button--success:active{background-color:var(--ai-color-success-dark);border-color:var(--ai-color-success-dark);box-shadow:0 0 0 1px #22c55e66}.ai-button--warning{background-color:var(--ai-color-warning);border-color:var(--ai-color-warning);color:#111827}.ai-button--warning:hover{background-color:var(--ai-color-warning-light);border-color:var(--ai-color-warning-light)}.ai-button--warning:active{background-color:var(--ai-color-warning-dark);border-color:var(--ai-color-warning-dark);box-shadow:0 0 0 1px #eab30866}.ai-button--danger{background-color:var(--ai-color-danger);border-color:var(--ai-color-danger);color:#fff}.ai-button--danger:hover{background-color:var(--ai-color-error-light);border-color:var(--ai-color-error-light)}.ai-button--danger:active{background-color:var(--ai-color-error-dark);border-color:var(--ai-color-error-dark);box-shadow:0 0 0 1px #f9737366}.ai-button--default{background-color:var(--ai-color-fill-default);border-color:var(--ai-color-border);color:var(--ai-color-text-primary)}.ai-button--default:hover{background-color:var(--ai-color-fill-hover);border-color:var(--ai-color-border-strong)}.ai-button--default:active{background-color:var(--ai-color-fill-active)}.ai-button--text{background-color:transparent;border-color:transparent;color:var(--ai-color-text-secondary);padding-left:4px;padding-right:4px}.ai-button--text:hover{background-color:#f871711f;color:var(--ai-color-text-primary)}.ai-button--text:active{background-color:#f8717133}.ai-button--sm{height:28px;padding:0 var(--ai-spacing-sm);font-size:var(--ai-font-size-xs)}.ai-button--lg{height:36px;padding:0 var(--ai-spacing-lg);font-size:var(--ai-font-size-base)}.ai-button--block{display:flex;width:100%}.ai-button--round{border-radius:var(--ai-radius-pill)}.ai-button--circle{border-radius:50%;padding:0;width:32px;height:32px}.ai-button--circle.ai-button--sm{width:28px;height:28px}.ai-button--circle.ai-button--lg{width:36px;height:36px}.ai-button--ghost{background-color:transparent;color:var(--ai-color-text-primary);border-color:var(--ai-color-border)}.ai-button--ghost:hover{background-color:#ff63471f}.ai-button--ghost:active{background-color:#ff634733}.ai-button--ghost.ai-button--primary{color:var(--ai-color-primary);border-color:var(--ai-color-primary)}.ai-button--ghost.ai-button--primary:hover{background-color:#ff63471f}.ai-button--ghost.ai-button--primary:active{background-color:#ff634733}.ai-button--ghost.ai-button--success{color:var(--ai-color-success);border-color:var(--ai-color-success)}.ai-button--ghost.ai-button--success:hover{background-color:#22c55e1f}.ai-button--ghost.ai-button--success:active{background-color:#22c55e33}.ai-button--ghost.ai-button--warning{color:var(--ai-color-warning);border-color:var(--ai-color-warning)}.ai-button--ghost.ai-button--warning:hover{background-color:#eab3081f}.ai-button--ghost.ai-button--warning:active{background-color:#eab30833}.ai-button--ghost.ai-button--danger{color:var(--ai-color-danger);border-color:var(--ai-color-danger)}.ai-button--ghost.ai-button--danger:hover{background-color:#ff63471f}.ai-button--ghost.ai-button--danger:active{background-color:#ff634733}.ai-button--disabled,.ai-button:disabled,.ai-button[disabled]{cursor:not-allowed;opacity:.6;background-color:var(--ai-color-fill-default);border-color:var(--ai-color-border);color:var(--ai-color-text-disabled);box-shadow:none;transform:none}.ai-button--disabled:hover,.ai-button--disabled:active,.ai-button:disabled:hover,.ai-button:disabled:active,.ai-button[disabled]:hover,.ai-button[disabled]:active{background-color:var(--ai-color-fill-default);border-color:var(--ai-color-border);color:var(--ai-color-text-disabled);transform:none}.ai-button--loading{cursor:default;opacity:.85;pointer-events:none}.ai-button__content{display:inline-flex;align-items:center;justify-content:center;gap:6px}.ai-button__text{display:inline-flex;align-items:center}.ai-button__icon{display:inline-flex;align-items:center;justify-content:center}.ai-button__icon--left{margin-right:4px}.ai-button__icon--right{margin-left:4px}.ai-button__spinner{position:absolute;left:8px;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.6;animation:ai-button-spin .7s linear infinite}.ai-button--circle .ai-button__spinner{position:static;left:auto;margin-right:0}@keyframes ai-button-spin{to{transform:rotate(360deg)}}.ai-loading-icon{display:inline-flex;align-items:center;justify-content:center;animation:ai-loading-icon-spin 1s linear infinite}.ai-loading-icon svg{display:block}@keyframes ai-loading-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
@@ -0,0 +1,2 @@
1
+
2
+ export * from '../packages';
@@ -0,0 +1 @@
1
+ export * from '../index'
package/package.json ADDED
@@ -0,0 +1,96 @@
1
+ {
2
+ "name": "@axin666/ai-ui",
3
+ "version": "0.1.9",
4
+ "description": "A Vue 3 component library for admin systems",
5
+ "type": "module",
6
+ "main": "dist/ai-ui.cjs.js",
7
+ "module": "dist/ai-ui.esm.js",
8
+ "types": "dist/types/src/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": "./dist/ai-ui.esm.js",
12
+ "require": "./dist/ai-ui.cjs.js",
13
+ "types": "./dist/types/src/index.d.ts"
14
+ },
15
+ "./dist/style.css": "./dist/style.css"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "sideEffects": [
24
+ "dist/style.css",
25
+ "packages/theme/index.scss",
26
+ "packages/components/**/style.scss"
27
+ ],
28
+ "scripts": {
29
+ "dev": "vite",
30
+ "dev:playground": "vite",
31
+ "build": "vite build --mode lib",
32
+ "build:lib": "BUILD_MODE=lib vite build",
33
+ "preview": "vite preview",
34
+ "test": "vitest",
35
+ "test:coverage": "vitest --coverage",
36
+ "docs:dev": "vitepress dev docs",
37
+ "docs:build": "vitepress build docs",
38
+ "docs:preview": "vitepress preview docs",
39
+ "lint": "eslint . --ext .vue,.ts,.tsx --fix",
40
+ "format": "prettier --write \"**/*.{vue,ts,tsx,js,jsx,json,md,scss,css}\"",
41
+ "prepare": "husky install",
42
+ "type-check": "vue-tsc --noEmit",
43
+ "release": "pnpm lint && pnpm test && pnpm build"
44
+ },
45
+ "peerDependencies": {
46
+ "vue": "^3.3.0"
47
+ },
48
+ "devDependencies": {
49
+ "@types/node": "^20.10.0",
50
+ "@typescript-eslint/eslint-plugin": "^6.13.1",
51
+ "@typescript-eslint/parser": "^6.13.1",
52
+ "@vitejs/plugin-vue": "^5.0.0",
53
+ "@vue/eslint-config-prettier": "^8.0.0",
54
+ "@vue/eslint-config-typescript": "^12.0.0",
55
+ "@vue/test-utils": "^2.4.0",
56
+ "eslint": "^8.54.0",
57
+ "eslint-config-prettier": "^9.0.0",
58
+ "eslint-plugin-prettier": "^5.0.1",
59
+ "eslint-plugin-vue": "^9.18.1",
60
+ "husky": "^8.0.3",
61
+ "jsdom": "^24.0.0",
62
+ "lint-staged": "^15.1.0",
63
+ "prettier": "^3.1.0",
64
+ "sass": "^1.69.0",
65
+ "typescript": "^5.3.0",
66
+ "vite": "^5.0.0",
67
+ "vite-plugin-dts": "^3.7.0",
68
+ "vitepress": "^1.0.0",
69
+ "vitest": "^1.0.0",
70
+ "vue": "^3.4.0",
71
+ "vue-eslint-parser": "^9.3.2",
72
+ "vue-tsc": "^1.8.0"
73
+ },
74
+ "lint-staged": {
75
+ "*.{vue,ts,tsx,js,jsx}": [
76
+ "eslint --fix",
77
+ "prettier --write"
78
+ ],
79
+ "*.{scss,css,json,md}": [
80
+ "prettier --write"
81
+ ]
82
+ },
83
+ "keywords": [
84
+ "vue3",
85
+ "component-library",
86
+ "typescript",
87
+ "admin",
88
+ "ui"
89
+ ],
90
+ "author": "",
91
+ "license": "MIT",
92
+ "repository": {
93
+ "type": "git",
94
+ "url": ""
95
+ }
96
+ }