focusin-mini-ui 1.0.6 → 1.0.8
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 +98 -9
- package/dist/FocusinMiniUi.es.js +123 -140
- package/dist/FocusinMiniUi.umd.js +1 -1
- package/dist/style.css +1 -1
- package/hooks/useColPickerData.ts +90 -48
- package/package.json +56 -10
- package/packages/fs-button/index.vue +172 -83
- package/packages/fs-col-picker/index.vue +336 -112
- package/packages/fs-file-box/index.vue +227 -0
- package/packages/fs-filter-input/index.vue +297 -0
- package/packages/fs-form/index.vue +175 -99
- package/packages/fs-pop/index.vue +1 -1
- package/packages/fs-radio/index.vue +1 -1
- package/packages/fs-search-bar/index.vue +1 -1
- package/packages/fs-select-button/sButton.vue +1 -1
- package/packages/fs-tabs/index.vue +1 -1
- package/packages/fs-time-bar/index.vue +1 -1
package/README.md
CHANGED
|
@@ -1,17 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
# Focusin Mini UI
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
2
4
|
Focusin Mini UI 是一套基于 Uniapp + Vue3 + Vite + TailwindCSS 的通用组件库，主要依赖于 Wot Design UI 和 Unocss 构建。
|
|
3
5
|
|
|
4
|
-
特性
|
|
5
|
-
🚀 基于 Vue3 + Vite 的现代前端技术栈
|
|
6
|
+
## 特性
|
|
7
|
+
- 🚀 基于 Vue3 + Vite 的现代前端技术栈
|
|
8
|
+
- 📱 专为 Uniapp 多端开发优化
|
|
9
|
+
- 🎨 使用 TailwindCSS 和 Unocss 提供强大的样式工具
|
|
10
|
+
- 🔌 深度集成 Wot Design UI 组件库
|
|
11
|
+
- ⚡️ 高性能、轻量级的组件实现
|
|
12
|
+
- 🌈 丰富的预设组件，开箱即用
|
|
13
|
+
|
|
14
|
+
## 快速开始
|
|
15
|
+
|
|
16
|
+
### 安装
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install focusin-mini-ui
|
|
20
|
+
# 或
|
|
21
|
+
pnpm install focusin-mini-ui
|
|
22
|
+
# 或
|
|
23
|
+
yarn add focusin-mini-ui
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 使用
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
import { createApp } from 'vue'
|
|
30
|
+
import FocusinMiniUi from 'focusin-mini-ui'
|
|
31
|
+
import 'focusin-mini-ui/style.scss'
|
|
32
|
+
|
|
33
|
+
const app = createApp(App)
|
|
34
|
+
app.use(FocusinMiniUi)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 运行示例
|
|
38
|
+
|
|
39
|
+
项目提供了完整的示例代码，你可以在 `examples` 目录中查看所有组件的使用示例。
|
|
40
|
+
|
|
41
|
+
### 启动示例
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
# 使用 npm
|
|
45
|
+
npm run dev:example
|
|
46
|
+
|
|
47
|
+
# 使用 pnpm
|
|
48
|
+
pnpm dev:example
|
|
49
|
+
|
|
50
|
+
# 使用 yarn
|
|
51
|
+
yarn dev:example
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
启动后，浏览器会自动打开 `http://localhost:3000`，你可以在这里查看和体验所有组件的效果。
|
|
55
|
+
|
|
56
|
+
### 示例内容
|
|
57
|
+
|
|
58
|
+
示例应用包含以下组件的演示：
|
|
59
|
+
|
|
60
|
+
- **FsButton** - 按钮组件，支持多种类型、尺寸和状态
|
|
61
|
+
- **FsCollapse** - 折叠面板组件，支持展开/收起
|
|
62
|
+
- **FsPop** - 弹窗组件，支持底部弹出和自定义内容
|
|
63
|
+
- 更多组件正在持续更新中...
|
|
64
|
+
|
|
65
|
+
## 组件列表
|
|
66
|
+
|
|
67
|
+
- `FsButton` - 按钮组件
|
|
68
|
+
- `FsCollapse` - 折叠面板
|
|
69
|
+
- `FsPop` - 弹窗组件
|
|
70
|
+
- `FsColPicker` - 列选择器
|
|
71
|
+
- `FsForm` - 表单组件
|
|
72
|
+
- `FsTable` - 表格组件
|
|
73
|
+
- `FsTabs` - 标签页组件
|
|
74
|
+
- `FsTree` - 树形组件
|
|
75
|
+
- `FsVoicePop` - 语音弹窗组件
|
|
76
|
+
- `FsRadio` - 单选框组件
|
|
77
|
+
- `FsSelectButton` - 选择按钮组件
|
|
78
|
+
- `FsSearchBar` - 搜索栏组件
|
|
79
|
+
- `FsTimeBar` - 时间栏组件
|
|
80
|
+
- `FsEmpty` - 空状态组件
|
|
81
|
+
- `FsIcon` - 图标组件
|
|
82
|
+
- `FsListCheck` - 列表选择组件
|
|
83
|
+
- `FsFileBox` - 文件盒子组件
|
|
84
|
+
- `FsFilterInput` - 过滤输入组件
|
|
85
|
+
- `FsCommonAudio` - 音频组件
|
|
86
|
+
|
|
87
|
+
## 注意事项
|
|
88
|
+
|
|
89
|
+
- 用表单的 upload 记得在项目中配置 `VITE_APP_BASE_UPLOAD`
|
|
6
90
|
|
|
7
|
-
|
|
91
|
+
## 开发
|
|
8
92
|
|
|
9
|
-
|
|
93
|
+
```bash
|
|
94
|
+
# 安装依赖
|
|
95
|
+
npm install
|
|
10
96
|
|
|
11
|
-
|
|
97
|
+
# 构建组件库
|
|
98
|
+
npm run build
|
|
12
99
|
|
|
13
|
-
|
|
100
|
+
# 运行示例
|
|
101
|
+
npm run dev:example
|
|
102
|
+
```
|
|
14
103
|
|
|
15
|
-
|
|
104
|
+
## License
|
|
16
105
|
|
|
17
|
-
|
|
106
|
+
MIT
|
package/dist/FocusinMiniUi.es.js
CHANGED
|
@@ -1,85 +1,49 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
3
|
-
function H(n, s, t = {}) {
|
|
4
|
-
let o = null, a, u, d;
|
|
5
|
-
const c = T(t.leading) ? t.leading : !1, r = T(t.trailing) ? t.trailing : !0;
|
|
6
|
-
function g() {
|
|
7
|
-
a !== void 0 && (d = n.apply(u, a), a = void 0);
|
|
8
|
-
}
|
|
9
|
-
function m() {
|
|
10
|
-
o = setTimeout(() => {
|
|
11
|
-
o = null, r && g();
|
|
12
|
-
}, s);
|
|
13
|
-
}
|
|
14
|
-
function h() {
|
|
15
|
-
o !== null && (clearTimeout(o), o = null);
|
|
16
|
-
}
|
|
17
|
-
function y(...v) {
|
|
18
|
-
return a = v, u = this, o === null ? (c && g(), m()) : r && (h(), m()), d;
|
|
19
|
-
}
|
|
20
|
-
return y;
|
|
21
|
-
}
|
|
22
|
-
const b = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"], A = (n) => n.replace(/[+/]/g, (s) => s === "+" ? "-" : "_").replace(/=+\$/m, ""), J = (n, s = !1) => {
|
|
23
|
-
let t = "";
|
|
24
|
-
for (let o = 0, a = n.length; o < a; o += 3) {
|
|
25
|
-
const [u, d, c] = [n[o], n[o + 1], n[o + 2]], r = u << 16 | d << 8 | c;
|
|
26
|
-
t += b[r >>> 18], t += b[r >>> 12 & 63], t += typeof d < "u" ? b[r >>> 6 & 63] : "=", t += typeof c < "u" ? b[r & 63] : "=";
|
|
27
|
-
}
|
|
28
|
-
return s ? A(t) : t;
|
|
29
|
-
}, K = typeof btoa == "function" ? (n) => btoa(n) : (n) => {
|
|
30
|
-
if (n.charCodeAt(0) > 255)
|
|
31
|
-
throw new RangeError("The string contains invalid characters.");
|
|
32
|
-
return J(Uint8Array.from(n, (s) => s.charCodeAt(0)));
|
|
33
|
-
}, Q = (n) => unescape(encodeURIComponent(n));
|
|
34
|
-
function W(n, s = !1) {
|
|
35
|
-
const t = K(Q(n));
|
|
36
|
-
return s ? A(t) : t;
|
|
37
|
-
}
|
|
38
|
-
const p = (n) => ({
|
|
1
|
+
import { defineComponent as R, ref as v, computed as U, watch as j, resolveComponent as q, openBlock as b, createElementBlock as P, unref as z, normalizeClass as D, normalizeStyle as A, createElementVNode as y, createBlock as H, createCommentVNode as J, renderSlot as K } from "vue";
|
|
2
|
+
const l = (a) => ({
|
|
39
3
|
type: Boolean,
|
|
40
|
-
default:
|
|
41
|
-
}),
|
|
4
|
+
default: a
|
|
5
|
+
}), c = (a) => ({
|
|
42
6
|
type: String,
|
|
43
|
-
default:
|
|
44
|
-
}),
|
|
7
|
+
default: a
|
|
8
|
+
}), Q = {
|
|
45
9
|
/**
|
|
46
10
|
* 自定义根节点样式
|
|
47
11
|
*/
|
|
48
|
-
customStyle:
|
|
12
|
+
customStyle: c(""),
|
|
49
13
|
/**
|
|
50
14
|
* 自定义根节点样式类
|
|
51
15
|
*/
|
|
52
|
-
customClass:
|
|
53
|
-
},
|
|
54
|
-
...
|
|
16
|
+
customClass: c("")
|
|
17
|
+
}, W = {
|
|
18
|
+
...Q,
|
|
55
19
|
/**
|
|
56
20
|
* 幽灵按钮
|
|
57
21
|
*/
|
|
58
|
-
plain:
|
|
22
|
+
plain: l(!1),
|
|
59
23
|
/**
|
|
60
24
|
* 圆角按钮
|
|
61
25
|
*/
|
|
62
|
-
round:
|
|
26
|
+
round: l(!0),
|
|
63
27
|
/**
|
|
64
28
|
* 禁用按钮
|
|
65
29
|
*/
|
|
66
|
-
disabled:
|
|
30
|
+
disabled: l(!1),
|
|
67
31
|
/**
|
|
68
32
|
* 是否细边框
|
|
69
33
|
*/
|
|
70
|
-
hairline:
|
|
34
|
+
hairline: l(!1),
|
|
71
35
|
/**
|
|
72
36
|
* 块状按钮
|
|
73
37
|
*/
|
|
74
|
-
block:
|
|
38
|
+
block: l(!1),
|
|
75
39
|
/**
|
|
76
40
|
* 按钮类型，可选值：primary / success / info / warning / error / text / icon
|
|
77
41
|
*/
|
|
78
|
-
type:
|
|
42
|
+
type: c("primary"),
|
|
79
43
|
/**
|
|
80
44
|
* 按钮尺寸，可选值：small / medium / large
|
|
81
45
|
*/
|
|
82
|
-
size:
|
|
46
|
+
size: c("medium"),
|
|
83
47
|
/**
|
|
84
48
|
* 图标类名
|
|
85
49
|
*/
|
|
@@ -87,11 +51,11 @@ const p = (n) => ({
|
|
|
87
51
|
/**
|
|
88
52
|
* 类名前缀，用于使用自定义图标，用法参考Icon组件
|
|
89
53
|
*/
|
|
90
|
-
classPrefix:
|
|
54
|
+
classPrefix: c("wd-icon"),
|
|
91
55
|
/**
|
|
92
56
|
* 加载中按钮
|
|
93
57
|
*/
|
|
94
|
-
loading:
|
|
58
|
+
loading: l(!1),
|
|
95
59
|
/**
|
|
96
60
|
* 加载图标颜色
|
|
97
61
|
*/
|
|
@@ -141,12 +105,12 @@ const p = (n) => ({
|
|
|
141
105
|
* 可选值：'phoneNumber' | 'userInfo'
|
|
142
106
|
*/
|
|
143
107
|
scope: String
|
|
144
|
-
},
|
|
108
|
+
}, X = ["id", "hover-class", "hover-start-time", "hover-stay-time", "open-type", "send-message-title", "send-message-path", "send-message-img", "app-parameter", "show-message-card", "session-from", "lang", "hover-stop-propagation", "scope"], Y = { class: "wd-button__content" }, Z = {
|
|
145
109
|
key: 0,
|
|
146
110
|
class: "wd-button__loading"
|
|
147
|
-
},
|
|
111
|
+
}, _ = { class: "wd-button__text" }, x = /* @__PURE__ */ R({
|
|
148
112
|
__name: "index",
|
|
149
|
-
props:
|
|
113
|
+
props: W,
|
|
150
114
|
emits: [
|
|
151
115
|
"click",
|
|
152
116
|
"getuserinfo",
|
|
@@ -158,81 +122,101 @@ const p = (n) => ({
|
|
|
158
122
|
"chooseavatar",
|
|
159
123
|
"agreeprivacyauthorization"
|
|
160
124
|
],
|
|
161
|
-
setup(
|
|
162
|
-
const
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
125
|
+
setup(a, { emit: i }) {
|
|
126
|
+
const p = (e, n, t) => {
|
|
127
|
+
let o = null;
|
|
128
|
+
const { leading: d = !1, trailing: f = !0 } = t || {};
|
|
129
|
+
return function(...u) {
|
|
130
|
+
d && !o && e.apply(this, u), clearTimeout(o), o = setTimeout(() => {
|
|
131
|
+
f && e.apply(this, u), o = null;
|
|
132
|
+
}, n);
|
|
133
|
+
};
|
|
134
|
+
}, h = (e) => {
|
|
135
|
+
if (typeof btoa < "u")
|
|
136
|
+
return btoa(unescape(encodeURIComponent(e)));
|
|
137
|
+
const n = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
|
138
|
+
let t = "", o = 0;
|
|
139
|
+
for (; o < e.length; ) {
|
|
140
|
+
const d = e.charCodeAt(o++), f = o < e.length ? e.charCodeAt(o++) : 0, u = o < e.length ? e.charCodeAt(o++) : 0, g = d << 16 | f << 8 | u;
|
|
141
|
+
t += n.charAt(g >> 18 & 63), t += n.charAt(g >> 12 & 63), t += o - 2 < e.length ? n.charAt(g >> 6 & 63) : "=", t += o - 1 < e.length ? n.charAt(g & 63) : "=";
|
|
142
|
+
}
|
|
143
|
+
return t;
|
|
144
|
+
}, m = (e = "#a52929", n = !0) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${n ? e : "#fff"}" offset="0%" stop-opacity="0"/><stop stop-color="${n ? e : "#fff"}" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${n ? "#fff" : e}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`, r = a, s = i, B = v(20), I = v(70), w = v(""), T = U(() => `background-image: url(${w.value});`);
|
|
145
|
+
j(
|
|
146
|
+
() => r.loading,
|
|
167
147
|
() => {
|
|
168
|
-
|
|
148
|
+
V();
|
|
169
149
|
},
|
|
170
150
|
{ deep: !0, immediate: !0 }
|
|
171
151
|
);
|
|
172
|
-
const
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
152
|
+
const S = p(
|
|
153
|
+
(e) => {
|
|
154
|
+
!r.disabled && !r.loading && s("click", e);
|
|
155
|
+
},
|
|
156
|
+
1e3,
|
|
157
|
+
{ leading: !0, trailing: !1 }
|
|
158
|
+
);
|
|
159
|
+
function $(e) {
|
|
160
|
+
r.scope === "phoneNumber" ? C(e) : r.scope === "userInfo" && k(e);
|
|
177
161
|
}
|
|
178
|
-
function
|
|
179
|
-
|
|
162
|
+
function k(e) {
|
|
163
|
+
s("getuserinfo", e.detail);
|
|
180
164
|
}
|
|
181
|
-
function
|
|
182
|
-
|
|
165
|
+
function G(e) {
|
|
166
|
+
s("contact", e.detail);
|
|
183
167
|
}
|
|
184
|
-
function
|
|
185
|
-
|
|
168
|
+
function C(e) {
|
|
169
|
+
s("getphonenumber", e.detail);
|
|
186
170
|
}
|
|
187
|
-
function
|
|
188
|
-
|
|
171
|
+
function E(e) {
|
|
172
|
+
s("error", e.detail);
|
|
189
173
|
}
|
|
190
|
-
function
|
|
191
|
-
|
|
174
|
+
function F(e) {
|
|
175
|
+
s("launchapp", e.detail);
|
|
192
176
|
}
|
|
193
|
-
function
|
|
194
|
-
|
|
177
|
+
function L(e) {
|
|
178
|
+
s("opensetting", e.detail);
|
|
195
179
|
}
|
|
196
|
-
function
|
|
197
|
-
|
|
180
|
+
function N(e) {
|
|
181
|
+
s("chooseavatar", e.detail);
|
|
198
182
|
}
|
|
199
|
-
function
|
|
200
|
-
|
|
183
|
+
function O(e) {
|
|
184
|
+
s("agreeprivacyauthorization", e.detail);
|
|
201
185
|
}
|
|
202
|
-
function
|
|
203
|
-
const { loadingColor: e, type:
|
|
204
|
-
let
|
|
205
|
-
if (!
|
|
206
|
-
switch (
|
|
186
|
+
function V() {
|
|
187
|
+
const { loadingColor: e, type: n, plain: t } = r;
|
|
188
|
+
let o = e;
|
|
189
|
+
if (!o)
|
|
190
|
+
switch (n) {
|
|
207
191
|
case "primary":
|
|
208
|
-
|
|
192
|
+
o = "#a52929";
|
|
209
193
|
break;
|
|
210
194
|
case "success":
|
|
211
|
-
|
|
195
|
+
o = "#34d19d";
|
|
212
196
|
break;
|
|
213
197
|
case "info":
|
|
214
|
-
|
|
198
|
+
o = "#333";
|
|
215
199
|
break;
|
|
216
200
|
case "warning":
|
|
217
|
-
|
|
201
|
+
o = "#f0883a";
|
|
218
202
|
break;
|
|
219
203
|
case "error":
|
|
220
|
-
|
|
204
|
+
o = "#fa4350";
|
|
221
205
|
break;
|
|
222
206
|
case "default":
|
|
223
|
-
|
|
207
|
+
o = "#333";
|
|
224
208
|
break;
|
|
225
209
|
}
|
|
226
|
-
const
|
|
227
|
-
|
|
210
|
+
const d = m(o, !t);
|
|
211
|
+
w.value = `"data:image/svg+xml;base64,${h(d)}"`;
|
|
228
212
|
}
|
|
229
|
-
return (e,
|
|
230
|
-
const
|
|
231
|
-
return
|
|
213
|
+
return (e, n) => {
|
|
214
|
+
const t = q("wd-icon");
|
|
215
|
+
return b(), P("button", {
|
|
232
216
|
id: e.buttonId,
|
|
233
217
|
"hover-class": `${e.disabled || e.loading ? "" : "wd-button--active"}`,
|
|
234
|
-
style:
|
|
235
|
-
class:
|
|
218
|
+
style: A(e.customStyle),
|
|
219
|
+
class: D([
|
|
236
220
|
"wd-button",
|
|
237
221
|
`is-${e.type}`,
|
|
238
222
|
`is-${e.size}`,
|
|
@@ -246,8 +230,8 @@ const p = (n) => ({
|
|
|
246
230
|
},
|
|
247
231
|
e.customClass
|
|
248
232
|
]),
|
|
249
|
-
"hover-start-time":
|
|
250
|
-
"hover-stay-time":
|
|
233
|
+
"hover-start-time": B.value,
|
|
234
|
+
"hover-stay-time": I.value,
|
|
251
235
|
"open-type": e.disabled || e.loading ? void 0 : e.openType,
|
|
252
236
|
"send-message-title": e.sendMessageTitle,
|
|
253
237
|
"send-message-path": e.sendMessagePath,
|
|
@@ -258,52 +242,51 @@ const p = (n) => ({
|
|
|
258
242
|
lang: e.lang,
|
|
259
243
|
"hover-stop-propagation": e.hoverStopPropagation,
|
|
260
244
|
scope: e.scope,
|
|
261
|
-
onClick:
|
|
262
|
-
(...
|
|
263
|
-
"on:getAuthorize":
|
|
264
|
-
onGetuserinfo:
|
|
265
|
-
onContact:
|
|
266
|
-
onGetphonenumber:
|
|
267
|
-
onError:
|
|
268
|
-
onLaunchapp:
|
|
269
|
-
onOpensetting:
|
|
270
|
-
onChooseavatar:
|
|
271
|
-
onAgreeprivacyauthorization:
|
|
245
|
+
onClick: n[0] || (n[0] = //@ts-ignore
|
|
246
|
+
(...o) => z(S) && z(S)(...o)),
|
|
247
|
+
"on:getAuthorize": $,
|
|
248
|
+
onGetuserinfo: k,
|
|
249
|
+
onContact: G,
|
|
250
|
+
onGetphonenumber: C,
|
|
251
|
+
onError: E,
|
|
252
|
+
onLaunchapp: F,
|
|
253
|
+
onOpensetting: L,
|
|
254
|
+
onChooseavatar: N,
|
|
255
|
+
onAgreeprivacyauthorization: O
|
|
272
256
|
}, [
|
|
273
|
-
|
|
274
|
-
e.loading ? (
|
|
275
|
-
|
|
257
|
+
y("view", Y, [
|
|
258
|
+
e.loading ? (b(), P("view", Z, [
|
|
259
|
+
y("view", {
|
|
276
260
|
class: "wd-button__loading-svg",
|
|
277
|
-
style:
|
|
261
|
+
style: A(T.value)
|
|
278
262
|
}, null, 4)
|
|
279
|
-
])) : e.icon ? (
|
|
263
|
+
])) : e.icon ? (b(), H(t, {
|
|
280
264
|
key: 1,
|
|
281
265
|
"custom-class": "wd-button__icon",
|
|
282
266
|
name: e.icon,
|
|
283
267
|
classPrefix: e.classPrefix
|
|
284
|
-
}, null, 8, ["name", "classPrefix"])) :
|
|
285
|
-
|
|
286
|
-
|
|
268
|
+
}, null, 8, ["name", "classPrefix"])) : J("", !0),
|
|
269
|
+
y("view", _, [
|
|
270
|
+
K(e.$slots, "default", {}, void 0, !0)
|
|
287
271
|
])
|
|
288
272
|
])
|
|
289
|
-
], 46,
|
|
273
|
+
], 46, X);
|
|
290
274
|
};
|
|
291
275
|
}
|
|
292
|
-
})
|
|
293
|
-
const
|
|
294
|
-
const
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
n.component(s.name, s);
|
|
276
|
+
}), ee = (a, i) => {
|
|
277
|
+
const p = a.__vccOpts || a;
|
|
278
|
+
for (const [h, m] of i)
|
|
279
|
+
p[h] = m;
|
|
280
|
+
return p;
|
|
281
|
+
}, M = /* @__PURE__ */ ee(x, [["__scopeId", "data-v-f725b53f"]]), oe = [M], ne = (a) => {
|
|
282
|
+
oe.forEach((i) => {
|
|
283
|
+
a.component(i.name, i);
|
|
301
284
|
});
|
|
302
|
-
},
|
|
303
|
-
install:
|
|
304
|
-
FsButton:
|
|
285
|
+
}, ae = {
|
|
286
|
+
install: ne,
|
|
287
|
+
FsButton: M
|
|
305
288
|
};
|
|
306
289
|
export {
|
|
307
|
-
|
|
308
|
-
|
|
290
|
+
M as FsButton,
|
|
291
|
+
ae as default
|
|
309
292
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.FocusinMiniUi={},r.Vue))})(this,function(r,n){"use strict";const l=s=>({type:Boolean,default:s}),p=s=>({type:String,default:s}),P={...{customStyle:p(""),customClass:p("")},plain:l(!1),round:l(!0),disabled:l(!1),hairline:l(!1),block:l(!1),type:p("primary"),size:p("medium"),icon:String,classPrefix:p("wd-icon"),loading:l(!1),loadingColor:String,openType:String,hoverStopPropagation:Boolean,lang:String,sessionFrom:String,sendMessageTitle:String,sendMessagePath:String,sendMessageImg:String,appParameter:String,showMessageCard:Boolean,buttonId:String,scope:String},z=["id","hover-class","hover-start-time","hover-stay-time","open-type","send-message-title","send-message-path","send-message-img","app-parameter","show-message-card","session-from","lang","hover-stop-propagation","scope"],B={class:"wd-button__content"},M={key:0,class:"wd-button__loading"},A={class:"wd-button__text"},m=((s,d)=>{const u=s.__vccOpts||s;for(const[b,y]of d)u[b]=y;return u})(n.defineComponent({__name:"index",props:P,emits:["click","getuserinfo","contact","getphonenumber","error","launchapp","opensetting","chooseavatar","agreeprivacyauthorization"],setup(s,{emit:d}){const u=(e,t,a)=>{let o=null;const{leading:g=!1,trailing:S=!0}=a||{};return function(...f){g&&!o&&e.apply(this,f),clearTimeout(o),o=setTimeout(()=>{S&&e.apply(this,f),o=null},t)}},b=e=>{if(typeof btoa<"u")return btoa(unescape(encodeURIComponent(e)));const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";let a="",o=0;for(;o<e.length;){const g=e.charCodeAt(o++),S=o<e.length?e.charCodeAt(o++):0,f=o<e.length?e.charCodeAt(o++):0,h=g<<16|S<<8|f;a+=t.charAt(h>>18&63),a+=t.charAt(h>>12&63),a+=o-2<e.length?t.charAt(h>>6&63):"=",a+=o-1<e.length?t.charAt(h&63):"="}return a},y=(e="#a52929",t=!0)=>`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${t?e:"#fff"}" offset="0%" stop-opacity="0"/><stop stop-color="${t?e:"#fff"}" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${t?"#fff":e}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`,c=s,i=d,E=n.ref(20),$=n.ref(70),k=n.ref(""),G=n.computed(()=>`background-image: url(${k.value});`);n.watch(()=>c.loading,()=>{U()},{deep:!0,immediate:!0});const w=u(e=>{!c.disabled&&!c.loading&&i("click",e)},1e3,{leading:!0,trailing:!1});function _(e){c.scope==="phoneNumber"?C(e):c.scope==="userInfo"&&v(e)}function v(e){i("getuserinfo",e.detail)}function F(e){i("contact",e.detail)}function C(e){i("getphonenumber",e.detail)}function N(e){i("error",e.detail)}function V(e){i("launchapp",e.detail)}function O(e){i("opensetting",e.detail)}function L(e){i("chooseavatar",e.detail)}function j(e){i("agreeprivacyauthorization",e.detail)}function U(){const{loadingColor:e,type:t,plain:a}=c;let o=e;if(!o)switch(t){case"primary":o="#a52929";break;case"success":o="#34d19d";break;case"info":o="#333";break;case"warning":o="#f0883a";break;case"error":o="#fa4350";break;case"default":o="#333";break}const g=y(o,!a);k.value=`"data:image/svg+xml;base64,${b(g)}"`}return(e,t)=>{const a=n.resolveComponent("wd-icon");return n.openBlock(),n.createElementBlock("button",{id:e.buttonId,"hover-class":`${e.disabled||e.loading?"":"wd-button--active"}`,style:n.normalizeStyle(e.customStyle),class:n.normalizeClass(["wd-button",`is-${e.type}`,`is-${e.size}`,{"is-round":e.round,"is-hairline":e.hairline,"is-plain":e.plain,"is-disabled":e.disabled,"is-block":e.block,"is-loading":e.loading},e.customClass]),"hover-start-time":E.value,"hover-stay-time":$.value,"open-type":e.disabled||e.loading?void 0:e.openType,"send-message-title":e.sendMessageTitle,"send-message-path":e.sendMessagePath,"send-message-img":e.sendMessageImg,"app-parameter":e.appParameter,"show-message-card":e.showMessageCard,"session-from":e.sessionFrom,lang:e.lang,"hover-stop-propagation":e.hoverStopPropagation,scope:e.scope,onClick:t[0]||(t[0]=(...o)=>n.unref(w)&&n.unref(w)(...o)),"on:getAuthorize":_,onGetuserinfo:v,onContact:F,onGetphonenumber:C,onError:N,onLaunchapp:V,onOpensetting:O,onChooseavatar:L,onAgreeprivacyauthorization:j},[n.createElementVNode("view",B,[e.loading?(n.openBlock(),n.createElementBlock("view",M,[n.createElementVNode("view",{class:"wd-button__loading-svg",style:n.normalizeStyle(G.value)},null,4)])):e.icon?(n.openBlock(),n.createBlock(a,{key:1,"custom-class":"wd-button__icon",name:e.icon,classPrefix:e.classPrefix},null,8,["name","classPrefix"])):n.createCommentVNode("",!0),n.createElementVNode("view",A,[n.renderSlot(e.$slots,"default",{},void 0,!0)])])],46,z)}}}),[["__scopeId","data-v-f725b53f"]]),T=[m],I={install:s=>{T.forEach(d=>{s.component(d.name,d)})},FsButton:m};r.FsButton=m,r.default=I,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.wot-theme-dark .wd-button.is-info[data-v-
|
|
1
|
+
@charset "UTF-8";.wot-theme-dark .wd-button.is-info[data-v-f725b53f]{background:var(--wot-dark-background4, #323233);color:var(--wot-dark-color3, rgba(232, 230, 227, .8))}.wot-theme-dark .wd-button.is-plain[data-v-f725b53f]{background:transparent}.wot-theme-dark .wd-button.is-plain.is-info[data-v-f725b53f]{color:var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)))}.wot-theme-dark .wd-button.is-plain.is-info[data-v-f725b53f]:after{border-color:var(--wot-dark-background5, #646566)}.wot-theme-dark .wd-button.is-text.is-disabled[data-v-f725b53f]{color:var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));background:transparent}.wot-theme-dark .wd-button.is-icon[data-v-f725b53f]{color:var(--wot-dark-color, var(--wot-color-white, rgb(255, 255, 255)))}.wot-theme-dark .wd-button.is-icon.is-disabled[data-v-f725b53f]{color:var(--wot-dark-color-gray, var(--wot-color-secondary, #595959));background:transparent}.wd-button[data-v-f725b53f]{margin-left:initial;margin-right:initial;position:relative;display:inline-block;-webkit-appearance:none;outline:none;background:transparent;box-sizing:border-box;border:none;border-radius:0;color:var(--wot-button-normal-color, var(--wot-color-title, var(--wot-color-black, rgb(0, 0, 0))));transition:opacity .2s;-webkit-user-select:none;user-select:none;font-weight:400}.wd-button[data-v-f725b53f]:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--wot-color-black, rgb(0, 0, 0));border:inherit;border-color:var(--wot-color-black, rgb(0, 0, 0));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.wd-button[data-v-f725b53f]:after{border:none;border-radius:0}.wd-button__content[data-v-f725b53f]{display:flex;justify-content:center;align-items:center;height:100%}.wd-button--active[data-v-f725b53f]:active:before{opacity:.15}.wd-button.is-disabled[data-v-f725b53f]{opacity:var(--wot-button-disabled-opacity, .6)}.wd-button__loading[data-v-f725b53f]{margin-right:5px;animation:wd-rotate-f725b53f .8s linear infinite;animation-duration:2s}.wd-button__loading-svg[data-v-f725b53f]{width:100%;height:100%;background-size:cover;background-repeat:no-repeat}.wd-button.is-primary[data-v-f725b53f]{background:var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));color:var(--wot-button-primary-color, var(--wot-color-white, rgb(255, 255, 255)))}.wd-button.is-success[data-v-f725b53f]{background:var(--wot-button-success-bg-color, var(--wot-color-success, #34d19d));color:var(--wot-button-success-color, var(--wot-color-white, rgb(255, 255, 255)))}.wd-button.is-info[data-v-f725b53f]{background:var(--wot-button-info-bg-color, #f0f0f0);color:var(--wot-button-info-color, var(--wot-color-title, var(--wot-color-black, rgb(0, 0, 0))))}.wd-button.is-warning[data-v-f725b53f]{background:var(--wot-button-warning-bg-color, var(--wot-color-warning, #f0883a));color:var(--wot-button-warning-color, var(--wot-color-white, rgb(255, 255, 255)))}.wd-button.is-error[data-v-f725b53f]{background:var(--wot-button-error-bg-color, var(--wot-color-danger, #fa4350));color:var(--wot-button-error-color, var(--wot-color-white, rgb(255, 255, 255)))}.wd-button.is-small[data-v-f725b53f]{height:var(--wot-button-small-height, 28px);padding:var(--wot-button-small-padding, 0 12px);border-radius:var(--wot-button-small-radius, 2px);font-size:var(--wot-button-small-fs, var(--wot-fs-secondary, 12px));font-weight:400}.wd-button.is-small .wd-button__loading[data-v-f725b53f]{width:var(--wot-button-small-loading, 14px);height:var(--wot-button-small-loading, 14px)}.wd-button.is-medium[data-v-f725b53f]{height:var(--wot-button-medium-height, 36px);padding:var(--wot-button-medium-padding, 0 16px);border-radius:var(--wot-button-medium-radius, 4px);font-size:var(--wot-button-medium-fs, var(--wot-fs-content, 14px));min-width:120px}.wd-button.is-medium.is-round.is-icon[data-v-f725b53f]{min-width:0;border-radius:50%}.wd-button.is-medium.is-round.is-text[data-v-f725b53f]{border-radius:0;min-width:0}.wd-button.is-medium .wd-button__loading[data-v-f725b53f]{width:var(--wot-button-medium-loading, 18px);height:var(--wot-button-medium-loading, 18px)}.wd-button.is-large[data-v-f725b53f]{height:var(--wot-button-large-height, 44px);padding:var(--wot-button-large-padding, 0 36px);border-radius:var(--wot-button-large-radius, 8px);font-size:var(--wot-button-large-fs, var(--wot-fs-title, 16px))}.wd-button.is-large[data-v-f725b53f]:after{border-radius:var(--wot-button-large-radius, 8px)}.wd-button.is-large .wd-button__loading[data-v-f725b53f]{width:var(--wot-button-large-loading, 24px);height:var(--wot-button-large-loading, 24px)}.wd-button.is-round[data-v-f725b53f]{border-radius:999px}.wd-button.is-text[data-v-f725b53f]{color:var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0));min-width:0;padding:4px 0}.wd-button.is-text[data-v-f725b53f]:after{display:none}.wd-button.is-text.wd-button--active[data-v-f725b53f]{opacity:var(--wot-button-text-hover-opacity, .7)}.wd-button.is-text.wd-button--active[data-v-f725b53f]:active:before{display:none}.wd-button.is-text.is-disabled[data-v-f725b53f]{color:var(--wot-button-normal-disabled-color, rgba(0, 0, 0, .25));background:transparent}.wd-button.is-plain[data-v-f725b53f]{background:var(--wot-button-plain-bg-color, var(--wot-color-white, rgb(255, 255, 255)));border:1px solid currentColor}.wd-button.is-plain.is-primary[data-v-f725b53f]{color:var(--wot-button-primary-bg-color, var(--wot-color-theme, #4d80f0))}.wd-button.is-plain.is-success[data-v-f725b53f]{color:var(--wot-button-success-bg-color, var(--wot-color-success, #34d19d))}.wd-button.is-plain.is-info[data-v-f725b53f]{color:var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, .85));border-color:var(--wot-button-info-plain-border-color, rgba(0, 0, 0, .45))}.wd-button.is-plain.is-warning[data-v-f725b53f]{color:var(--wot-button-warning-bg-color, var(--wot-color-warning, #f0883a))}.wd-button.is-plain.is-error[data-v-f725b53f]{color:var(--wot-button-error-bg-color, var(--wot-color-danger, #fa4350))}.wd-button.is-hairline[data-v-f725b53f]{border-width:0}.wd-button.is-hairline.is-plain[data-v-f725b53f]{position:relative}.wd-button.is-hairline.is-plain[data-v-f725b53f]:after{position:absolute;display:block;content:" ";pointer-events:none;width:200%;height:200%;left:0;top:0;border:1px solid var(--wot-color-border-light, #e8e8e8);transform:scale(.5);box-sizing:border-box;transform-origin:left top}.wd-button.is-hairline.is-plain[data-v-f725b53f]:before{border-radius:inherit}.wd-button.is-hairline.is-plain[data-v-f725b53f]:after{border-color:inherit}.wd-button.is-hairline.is-plain.is-round[data-v-f725b53f]:after{border-radius:inherit!important}.wd-button.is-hairline.is-plain.is-large[data-v-f725b53f]:after{border-radius:calc(2 * var(--wot-button-large-radius, 8px))}.wd-button.is-hairline.is-plain.is-medium[data-v-f725b53f]:after{border-radius:calc(2 * var(--wot-button-medium-radius, 4px))}.wd-button.is-hairline.is-plain.is-small[data-v-f725b53f]:after{border-radius:calc(2 * var(--wot-button-small-radius, 2px))}.wd-button.is-block[data-v-f725b53f]{display:block}.wd-button.is-icon[data-v-f725b53f]{width:var(--wot-button-icon-size, 40px);height:var(--wot-button-icon-size, 40px);padding:0;border-radius:50%;color:var(--wot-button-icon-color, rgba(0, 0, 0, .65))}.wd-button.is-icon[data-v-f725b53f]:after{display:none}.wd-button.is-icon[data-v-f725b53f] .wd-button__icon{margin-right:0}.wd-button.is-icon.is-disabled[data-v-f725b53f]{color:var(--wot-button-icon-disabled-color, var(--wot-color-icon-disabled, #a7a7a7));background:transparent}[data-v-f725b53f] .wd-button__icon{display:block;margin-right:6px;font-size:var(--wot-button-icon-fs, 18px);vertical-align:middle}.wd-button__text[data-v-f725b53f]{-webkit-user-select:none;user-select:none;white-space:nowrap}@keyframes wd-rotate-f725b53f{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|