@tuya-miniapp/smart-ui 2.2.1-beta-3 → 2.3.0-beta-1
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/dist/circle/index.css +1 -1
- package/dist/circle/index.js +193 -11
- package/dist/circle/index.wxml +1 -13
- package/dist/circle/index.wxss +1 -1
- package/dist/dialog/index.js +3 -0
- package/dist/popover/index.css +1 -0
- package/dist/popover/index.d.ts +1 -0
- package/dist/popover/index.js +179 -0
- package/dist/popover/index.json +7 -0
- package/dist/popover/index.wxml +25 -0
- package/dist/popover/index.wxss +1 -0
- package/dist/slider/index.js +2 -1
- package/dist/toast/index.js +3 -7
- package/lib/circle/demo/index.js +2 -2
- package/lib/circle/index.css +1 -1
- package/lib/circle/index.js +196 -11
- package/lib/circle/index.wxml +1 -13
- package/lib/circle/index.wxss +1 -1
- package/lib/dialog/index.js +3 -0
- package/lib/popover/demo/index.d.ts +1 -0
- package/lib/popover/demo/index.js +27 -0
- package/lib/popover/index.css +1 -0
- package/lib/popover/index.d.ts +1 -0
- package/lib/popover/index.js +195 -0
- package/lib/popover/index.json +7 -0
- package/lib/popover/index.wxml +25 -0
- package/lib/popover/index.wxss +1 -0
- package/lib/slider/index.js +2 -1
- package/lib/toast/index.js +3 -7
- package/package.json +1 -1
package/dist/circle/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css'
|
|
1
|
+
@import '../common/index.css';
|
package/dist/circle/index.js
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
|
+
/* eslint-disable guard-for-in */
|
|
2
|
+
/* eslint-disable no-restricted-syntax */
|
|
3
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
4
|
+
/* eslint-disable prefer-destructuring */
|
|
5
|
+
/* eslint-disable prettier/prettier */
|
|
1
6
|
import { SmartComponent } from '../common/component';
|
|
2
7
|
// @ts-ignore
|
|
8
|
+
function percentToDecimal(percent) {
|
|
9
|
+
percent = percent.replace('%', '');
|
|
10
|
+
return percent / 100;
|
|
11
|
+
}
|
|
3
12
|
SmartComponent({
|
|
4
13
|
props: {
|
|
5
14
|
className: String,
|
|
15
|
+
canvasId: {
|
|
16
|
+
type: String,
|
|
17
|
+
value: 'circle_' + Date.now(),
|
|
18
|
+
},
|
|
6
19
|
customStyle: String,
|
|
7
20
|
size: {
|
|
8
21
|
type: String,
|
|
@@ -20,27 +33,196 @@ SmartComponent({
|
|
|
20
33
|
type: String,
|
|
21
34
|
value: '#007AFF',
|
|
22
35
|
},
|
|
36
|
+
maskColor: {
|
|
37
|
+
type: String,
|
|
38
|
+
value: '#ffffff',
|
|
39
|
+
},
|
|
40
|
+
fillColorStops: {
|
|
41
|
+
type: null,
|
|
42
|
+
},
|
|
23
43
|
percent: {
|
|
24
44
|
type: Number,
|
|
25
45
|
value: 0,
|
|
26
46
|
observer(val) {
|
|
27
|
-
this.
|
|
47
|
+
this.render(val);
|
|
28
48
|
},
|
|
29
49
|
},
|
|
30
|
-
|
|
50
|
+
mode: {
|
|
31
51
|
type: String,
|
|
32
|
-
|
|
52
|
+
// basic | angle
|
|
53
|
+
value: 'basic',
|
|
54
|
+
},
|
|
55
|
+
round: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
value: true,
|
|
33
58
|
},
|
|
34
59
|
},
|
|
35
|
-
data: { transformLeft: '', transformRight: '' },
|
|
36
60
|
methods: {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
61
|
+
renderAll(canvas, ctx, progress, ops = {
|
|
62
|
+
lineCap: 'round',
|
|
63
|
+
}) {
|
|
64
|
+
const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
65
|
+
const lineWidth = canvas.lineWidth; // 进度条宽度
|
|
66
|
+
const startAngle = Math.PI; // 起始角度（3点钟方向）
|
|
67
|
+
const endAngle = 4 * Math.PI; // 结束角度（360度）
|
|
68
|
+
// 绘制环形进度条的函数
|
|
69
|
+
function drawProgressBar(progress, color) {
|
|
70
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
71
|
+
// 绘制灰色背景
|
|
72
|
+
ctx.beginPath();
|
|
73
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
74
|
+
// 填充颜色
|
|
75
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
76
|
+
ctx.fill(); // 填充路径
|
|
77
|
+
ctx.setLineWidth(lineWidth);
|
|
78
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
79
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
80
|
+
ctx.stroke();
|
|
81
|
+
// 绘制进度条
|
|
82
|
+
const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
83
|
+
ctx.beginPath();
|
|
84
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
85
|
+
ctx.setLineWidth(lineWidth);
|
|
86
|
+
if (canvas.fillColorStops) {
|
|
87
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
88
|
+
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
89
|
+
for (const stop in canvas.fillColorStops) {
|
|
90
|
+
// 添加渐变色
|
|
91
|
+
gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
|
|
92
|
+
}
|
|
93
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
97
|
+
}
|
|
98
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
99
|
+
ctx.stroke();
|
|
100
|
+
ctx.draw();
|
|
101
|
+
}
|
|
102
|
+
// 示例：绘制不同的进度条
|
|
103
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
104
|
+
},
|
|
105
|
+
renderHalf(canvas, ctx, progress, ops = {
|
|
106
|
+
lineCap: 'round',
|
|
107
|
+
}) {
|
|
108
|
+
const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
109
|
+
const lineWidth = canvas.lineWidth; // 进度条宽度
|
|
110
|
+
const startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
|
|
111
|
+
const endAngle = 2 * Math.PI; // 结束角度（360度）
|
|
112
|
+
// 绘制环形进度条的函数
|
|
113
|
+
function drawProgressBar(progress, color) {
|
|
114
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
115
|
+
// 绘制灰色背景
|
|
116
|
+
ctx.beginPath();
|
|
117
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
118
|
+
// 填充颜色
|
|
119
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
120
|
+
ctx.fill(); // 填充路径
|
|
121
|
+
ctx.setLineWidth(lineWidth);
|
|
122
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
123
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
124
|
+
ctx.stroke();
|
|
125
|
+
// 绘制进度条
|
|
126
|
+
const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
127
|
+
ctx.beginPath();
|
|
128
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
129
|
+
ctx.setLineWidth(lineWidth);
|
|
130
|
+
if (canvas.fillColorStops) {
|
|
131
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
132
|
+
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
133
|
+
for (const stop in canvas.fillColorStops) {
|
|
134
|
+
// 添加渐变色
|
|
135
|
+
gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
|
|
136
|
+
}
|
|
137
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
141
|
+
}
|
|
142
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
143
|
+
ctx.stroke();
|
|
144
|
+
ctx.draw();
|
|
145
|
+
}
|
|
146
|
+
// 示例：绘制不同的进度条
|
|
147
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
148
|
+
},
|
|
149
|
+
parseSize() {
|
|
150
|
+
if (typeof this.data.size === 'number')
|
|
151
|
+
return this.data.size;
|
|
152
|
+
if (typeof this.data.size === 'string') {
|
|
153
|
+
const res = this.data.size.match(/\d+/);
|
|
154
|
+
if (res) {
|
|
155
|
+
return res[0];
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
return this.data.size;
|
|
159
|
+
},
|
|
160
|
+
renderHalf2(canvas, ctx, progress, ops = {
|
|
161
|
+
lineCap: 'round',
|
|
162
|
+
}) {
|
|
163
|
+
const radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
164
|
+
const lineWidth = canvas.lineWidth; // 进度条宽度
|
|
165
|
+
const startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
|
|
166
|
+
const endAngle = 2.2 * Math.PI; // 结束角度（360度）
|
|
167
|
+
// 绘制环形进度条的函数
|
|
168
|
+
function drawProgressBar(progress, color) {
|
|
169
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
170
|
+
// 绘制灰色背景
|
|
171
|
+
ctx.beginPath();
|
|
172
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
173
|
+
// 填充颜色
|
|
174
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
175
|
+
ctx.fill(); // 填充路径
|
|
176
|
+
ctx.setLineWidth(lineWidth);
|
|
177
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
178
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
179
|
+
ctx.stroke();
|
|
180
|
+
// 绘制进度条
|
|
181
|
+
const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
182
|
+
ctx.beginPath();
|
|
183
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
184
|
+
ctx.setLineWidth(lineWidth);
|
|
185
|
+
if (canvas.fillColorStops) {
|
|
186
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
187
|
+
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
188
|
+
for (const stop in canvas.fillColorStops) {
|
|
189
|
+
// 添加渐变色
|
|
190
|
+
gradient.addColorStop(percentToDecimal(stop), canvas.fillColorStops[stop]);
|
|
191
|
+
}
|
|
192
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
193
|
+
}
|
|
194
|
+
else {
|
|
195
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
196
|
+
}
|
|
197
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
198
|
+
ctx.stroke();
|
|
199
|
+
ctx.draw();
|
|
200
|
+
}
|
|
201
|
+
// 示例：绘制不同的进度条
|
|
202
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
203
|
+
},
|
|
204
|
+
render(val) {
|
|
205
|
+
// @ts-ignore
|
|
206
|
+
const context = ty.createCanvasContext(this.data.canvasId);
|
|
207
|
+
const sizeVal = this.parseSize();
|
|
208
|
+
const params = {
|
|
209
|
+
width: sizeVal,
|
|
210
|
+
height: sizeVal,
|
|
211
|
+
lineWidth: this.data.trackWidth,
|
|
212
|
+
trackColor: this.data.trackColor,
|
|
213
|
+
fillColor: this.data.fillColor,
|
|
214
|
+
fillColorStops: this.data.fillColorStops,
|
|
215
|
+
maskColor: this.data.maskColor,
|
|
216
|
+
};
|
|
217
|
+
if (this.data.mode === 'basic') {
|
|
218
|
+
this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
219
|
+
}
|
|
220
|
+
if (this.data.mode === 'angle') {
|
|
221
|
+
this.renderHalf(params, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
222
|
+
}
|
|
223
|
+
if (this.data.mode === 'angle2') {
|
|
224
|
+
this.renderHalf2(params, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
225
|
+
}
|
|
44
226
|
},
|
|
45
227
|
},
|
|
46
228
|
});
|
package/dist/circle/index.wxml
CHANGED
|
@@ -1,13 +1 @@
|
|
|
1
|
-
<
|
|
2
|
-
<view class="smart-progress-circle-box smart-progress-circle-box-left">
|
|
3
|
-
<view class="smart-progress-circle-bar smart-progress-circle-bar-left" style="transform:{{transformLeft}};background:{{trackColor}};">
|
|
4
|
-
</view>
|
|
5
|
-
</view>
|
|
6
|
-
<view class="smart-progress-circle-box smart-progress-circle-box-right">
|
|
7
|
-
<view class="smart-progress-circle-bar smart-progress-circle-bar-right" style="transform:{{transformRight}};background:{{trackColor}};">
|
|
8
|
-
</view>
|
|
9
|
-
</view>
|
|
10
|
-
<view class="smart-progress-circle-content" style="background:{{maskColor}};">
|
|
11
|
-
<slot></slot>
|
|
12
|
-
</view>
|
|
13
|
-
</view>
|
|
1
|
+
<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
|
package/dist/circle/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss'
|
|
1
|
+
@import '../common/index.wxss';
|
package/dist/dialog/index.js
CHANGED
|
@@ -95,6 +95,9 @@ SmartComponent({
|
|
|
95
95
|
mounted: function () {
|
|
96
96
|
if (!this.id)
|
|
97
97
|
return;
|
|
98
|
+
if (contextRef.value[`#${this.id}`]) {
|
|
99
|
+
console.error(`Dialog component #${this.id} repeated!`);
|
|
100
|
+
}
|
|
98
101
|
contextRef.value[`#${this.id}`] = getCurrentPage();
|
|
99
102
|
},
|
|
100
103
|
destroyed: function () {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
/* eslint-disable prefer-destructuring */
|
|
2
|
+
import { SmartComponent } from '../common/component';
|
|
3
|
+
import { transition } from '../mixins/transition';
|
|
4
|
+
const IconSrc = (deg) => `<svg style="transform: rotate(${deg})" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18.00000052453666" height="6.000001573609978" viewBox="0 0 18.00000052453666 6.000001573609978"><g transform="matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)"><path d="M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>`;
|
|
5
|
+
function createSvgIcon(svg) {
|
|
6
|
+
return `data:image/svg+xml,${encodeURIComponent(`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">${svg}`)}`;
|
|
7
|
+
}
|
|
8
|
+
SmartComponent({
|
|
9
|
+
classes: [
|
|
10
|
+
'enter-class',
|
|
11
|
+
'enter-active-class',
|
|
12
|
+
'enter-to-class',
|
|
13
|
+
'leave-class',
|
|
14
|
+
'leave-active-class',
|
|
15
|
+
'leave-to-class',
|
|
16
|
+
'close-icon-class',
|
|
17
|
+
],
|
|
18
|
+
mixins: [transition(false)],
|
|
19
|
+
props: {
|
|
20
|
+
// `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
|
|
21
|
+
placement: {
|
|
22
|
+
type: String,
|
|
23
|
+
value: 'right',
|
|
24
|
+
},
|
|
25
|
+
show: {
|
|
26
|
+
type: Boolean,
|
|
27
|
+
observer(value) {
|
|
28
|
+
if (value !== this.data.currentShow) {
|
|
29
|
+
this.setData({
|
|
30
|
+
currentShow: value,
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
customStyle: {
|
|
36
|
+
type: String,
|
|
37
|
+
value: '',
|
|
38
|
+
},
|
|
39
|
+
zIndex: {
|
|
40
|
+
type: Number,
|
|
41
|
+
value: 101,
|
|
42
|
+
},
|
|
43
|
+
duration: {
|
|
44
|
+
type: Number,
|
|
45
|
+
value: 2000,
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
data: { currentShow: false },
|
|
49
|
+
mounted() { },
|
|
50
|
+
created() { },
|
|
51
|
+
methods: {
|
|
52
|
+
getButtonPosition() {
|
|
53
|
+
const placement = this.data.placement;
|
|
54
|
+
let params = {
|
|
55
|
+
// left: rect.left,
|
|
56
|
+
// top: rect.top,
|
|
57
|
+
transform: '',
|
|
58
|
+
iconTransform: '',
|
|
59
|
+
iconPos: '',
|
|
60
|
+
iconPosVal: 0,
|
|
61
|
+
iconSrc: createSvgIcon(IconSrc('0deg')),
|
|
62
|
+
iconWidth: '18px',
|
|
63
|
+
iconHeight: '6px',
|
|
64
|
+
iconStyle: '',
|
|
65
|
+
};
|
|
66
|
+
if (placement.startsWith('left')) {
|
|
67
|
+
let iconAlignPos = '';
|
|
68
|
+
let transform = 'translate(-100%,-50%)';
|
|
69
|
+
if (placement === 'leftTop') {
|
|
70
|
+
iconAlignPos = 'top: calc(0% + 16px)';
|
|
71
|
+
transform = 'translate(-100%, 0)';
|
|
72
|
+
params.top = '0px';
|
|
73
|
+
params.left = '-8px';
|
|
74
|
+
}
|
|
75
|
+
else if (placement === 'leftBottom') {
|
|
76
|
+
iconAlignPos = 'bottom: calc(0% - 6px)';
|
|
77
|
+
transform = 'translate(-100%, -100%)';
|
|
78
|
+
params.left = '-9px';
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
transform = 'translate(-100%, -50%)';
|
|
82
|
+
params.left = '-9px';
|
|
83
|
+
params.top = '50%';
|
|
84
|
+
iconAlignPos = 'top: 50%';
|
|
85
|
+
}
|
|
86
|
+
params = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc('270deg')), iconStyle: `right:8px;transform:translate(100%, -50%);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos}` });
|
|
87
|
+
}
|
|
88
|
+
if (placement.startsWith('top')) {
|
|
89
|
+
let iconAlignPos = '';
|
|
90
|
+
let transform = 'translate(-50%, -100%)';
|
|
91
|
+
if (placement === 'topLeft') {
|
|
92
|
+
iconAlignPos = 'left: calc(0% + 16px);';
|
|
93
|
+
transform = 'translate(calc(0% - 16px), -100%)';
|
|
94
|
+
params.top = '-12px';
|
|
95
|
+
params.left = '16px';
|
|
96
|
+
}
|
|
97
|
+
else if (placement === 'topRight') {
|
|
98
|
+
iconAlignPos = 'left: calc(100% - 16px);';
|
|
99
|
+
transform = 'translate(0, -100%)';
|
|
100
|
+
params.top = '-12px';
|
|
101
|
+
params.right = '2px';
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
iconAlignPos = 'left: 50%';
|
|
105
|
+
transform = 'translate(-50%, -100%)';
|
|
106
|
+
params.top = '-12px';
|
|
107
|
+
params.left = '50%';
|
|
108
|
+
}
|
|
109
|
+
params = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc('0deg')), iconStyle: `bottom:0px;transform:translate(-50%, 100%);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}` });
|
|
110
|
+
}
|
|
111
|
+
if (placement.startsWith('right')) {
|
|
112
|
+
let iconAlignPos = '';
|
|
113
|
+
let transform = 'translateY(-50%)';
|
|
114
|
+
if (placement === 'rightTop') {
|
|
115
|
+
iconAlignPos = 'top: calc(0% + 16px)';
|
|
116
|
+
transform = `translate(0%,0)`;
|
|
117
|
+
params.left = 'calc(100% + 8px)';
|
|
118
|
+
params.top = '2px';
|
|
119
|
+
}
|
|
120
|
+
else if (placement === 'rightBottom') {
|
|
121
|
+
iconAlignPos = 'top: calc(100% - 12px)';
|
|
122
|
+
transform = `translate(0%,0)`;
|
|
123
|
+
params.left = 'calc(100% + 8px)';
|
|
124
|
+
params.bottom = '2px';
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
iconAlignPos = 'top: 50%';
|
|
128
|
+
transform = `translate(0%, -50%)`;
|
|
129
|
+
params.left = 'calc(100% + 8px)';
|
|
130
|
+
params.top = '50%';
|
|
131
|
+
}
|
|
132
|
+
params = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc('90deg')), iconStyle: `left:-10px;transform:translate(0%, -50%);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos};` });
|
|
133
|
+
}
|
|
134
|
+
if (placement.startsWith('bottom')) {
|
|
135
|
+
let iconAlignPos = '';
|
|
136
|
+
let transform = 'translateX(-50%)';
|
|
137
|
+
if (placement === 'bottomLeft') {
|
|
138
|
+
iconAlignPos = 'left: calc(0% + 16px);';
|
|
139
|
+
transform = 'translate(calc(0% - 16px), 100%)';
|
|
140
|
+
params.bottom = '-10px';
|
|
141
|
+
params.left = '18px';
|
|
142
|
+
}
|
|
143
|
+
else if (placement === 'bottomRight') {
|
|
144
|
+
iconAlignPos = 'left: calc(100% - 16px);';
|
|
145
|
+
transform = 'translate(0, 100%)';
|
|
146
|
+
params.bottom = '-10px';
|
|
147
|
+
params.right = '2px';
|
|
148
|
+
}
|
|
149
|
+
else {
|
|
150
|
+
iconAlignPos = 'left: 50%';
|
|
151
|
+
transform = 'translate(-50%, 100%)';
|
|
152
|
+
params.bottom = '-10px';
|
|
153
|
+
params.left = '50%';
|
|
154
|
+
}
|
|
155
|
+
params = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc('180deg')), iconStyle: `top:0px;transform:translate(-50%, -100%);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}` });
|
|
156
|
+
}
|
|
157
|
+
this.setData(params);
|
|
158
|
+
},
|
|
159
|
+
onClick() {
|
|
160
|
+
this.getButtonPosition();
|
|
161
|
+
this.setData({
|
|
162
|
+
currentShow: true,
|
|
163
|
+
});
|
|
164
|
+
this.$emit('showchange', true);
|
|
165
|
+
if (this.data.duration) {
|
|
166
|
+
setTimeout(() => {
|
|
167
|
+
this.onClose();
|
|
168
|
+
}, this.data.duration);
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
onClose() {
|
|
172
|
+
this.setData({
|
|
173
|
+
currentShow: false,
|
|
174
|
+
});
|
|
175
|
+
this.$emit('showchange', false);
|
|
176
|
+
this.$emit('close', false);
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<view class="smart-popover">
|
|
2
|
+
|
|
3
|
+
<smart-overlay
|
|
4
|
+
show="{{ currentShow }}"
|
|
5
|
+
z-index="{{ zIndex }}"
|
|
6
|
+
bind:click="onClose"
|
|
7
|
+
transition="{{ transition }}"
|
|
8
|
+
close-on-click-overlay
|
|
9
|
+
bind:close="onClose"
|
|
10
|
+
z-index="{{zIndex}}"
|
|
11
|
+
>
|
|
12
|
+
|
|
13
|
+
</smart-overlay>
|
|
14
|
+
|
|
15
|
+
<view class="smart-popover-button" id="{{popoverId}}" catch:tap="onClick">
|
|
16
|
+
<slot />
|
|
17
|
+
<smart-transition show="{{currentShow}}">
|
|
18
|
+
<view class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}">
|
|
19
|
+
<slot name="overlay" />
|
|
20
|
+
<view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
|
|
21
|
+
</view>
|
|
22
|
+
</smart-transition>
|
|
23
|
+
</view>
|
|
24
|
+
|
|
25
|
+
</view>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
|
package/dist/slider/index.js
CHANGED
|
@@ -17,6 +17,7 @@ SmartComponent({
|
|
|
17
17
|
disabled: Boolean,
|
|
18
18
|
useButtonSlot: Boolean,
|
|
19
19
|
activeColor: String,
|
|
20
|
+
inActiveColor: String,
|
|
20
21
|
inactiveColor: String,
|
|
21
22
|
max: {
|
|
22
23
|
type: Number,
|
|
@@ -145,7 +146,7 @@ SmartComponent({
|
|
|
145
146
|
const mainAxis = vertical ? 'height' : 'width';
|
|
146
147
|
this.setData({
|
|
147
148
|
wrapperStyle: `
|
|
148
|
-
background: ${this.data.inactiveColor || ''};
|
|
149
|
+
background: ${this.data.inactiveColor || this.data.inActiveColor || ''};
|
|
149
150
|
${vertical ? 'width' : 'height'}: ${addUnit(this.data.barHeight) || ''};
|
|
150
151
|
`,
|
|
151
152
|
barStyle: `
|
package/dist/toast/index.js
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: mjh
|
|
3
|
-
* @Date: 2025-02-14 16:33:01
|
|
4
|
-
* @LastEditors: mjh
|
|
5
|
-
* @LastEditTime: 2025-02-18 10:12:49
|
|
6
|
-
* @Description:
|
|
7
|
-
*/
|
|
8
1
|
import { Success, Alarm, Error } from './icons';
|
|
9
2
|
import { SmartComponent } from '../common/component';
|
|
10
3
|
import { contextRef } from './toast';
|
|
@@ -43,6 +36,9 @@ SmartComponent({
|
|
|
43
36
|
mounted: function () {
|
|
44
37
|
if (!this.id)
|
|
45
38
|
return;
|
|
39
|
+
if (contextRef.value[`#${this.id}`]) {
|
|
40
|
+
console.error(`Toast component #${this.id} repeated!`);
|
|
41
|
+
}
|
|
46
42
|
contextRef.value[`#${this.id}`] = getCurrentPage();
|
|
47
43
|
},
|
|
48
44
|
destroyed: function () {
|
package/lib/circle/demo/index.js
CHANGED
package/lib/circle/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css'
|
|
1
|
+
@import '../common/index.css';
|
package/lib/circle/index.js
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/* eslint-disable guard-for-in */
|
|
4
|
+
/* eslint-disable no-restricted-syntax */
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
6
|
+
/* eslint-disable prefer-destructuring */
|
|
7
|
+
/* eslint-disable prettier/prettier */
|
|
3
8
|
var component_1 = require("../common/component");
|
|
4
9
|
// @ts-ignore
|
|
10
|
+
function percentToDecimal(percent) {
|
|
11
|
+
percent = percent.replace('%', '');
|
|
12
|
+
return percent / 100;
|
|
13
|
+
}
|
|
5
14
|
(0, component_1.SmartComponent)({
|
|
6
15
|
props: {
|
|
7
16
|
className: String,
|
|
17
|
+
canvasId: {
|
|
18
|
+
type: String,
|
|
19
|
+
value: 'circle_' + Date.now(),
|
|
20
|
+
},
|
|
8
21
|
customStyle: String,
|
|
9
22
|
size: {
|
|
10
23
|
type: String,
|
|
@@ -22,27 +35,199 @@ var component_1 = require("../common/component");
|
|
|
22
35
|
type: String,
|
|
23
36
|
value: '#007AFF',
|
|
24
37
|
},
|
|
38
|
+
maskColor: {
|
|
39
|
+
type: String,
|
|
40
|
+
value: '#ffffff',
|
|
41
|
+
},
|
|
42
|
+
fillColorStops: {
|
|
43
|
+
type: null,
|
|
44
|
+
},
|
|
25
45
|
percent: {
|
|
26
46
|
type: Number,
|
|
27
47
|
value: 0,
|
|
28
48
|
observer: function (val) {
|
|
29
|
-
this.
|
|
49
|
+
this.render(val);
|
|
30
50
|
},
|
|
31
51
|
},
|
|
32
|
-
|
|
52
|
+
mode: {
|
|
33
53
|
type: String,
|
|
34
|
-
|
|
54
|
+
// basic | angle
|
|
55
|
+
value: 'basic',
|
|
56
|
+
},
|
|
57
|
+
round: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
value: true,
|
|
35
60
|
},
|
|
36
61
|
},
|
|
37
|
-
data: { transformLeft: '', transformRight: '' },
|
|
38
62
|
methods: {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
63
|
+
renderAll: function (canvas, ctx, progress, ops) {
|
|
64
|
+
if (ops === void 0) { ops = {
|
|
65
|
+
lineCap: 'round',
|
|
66
|
+
}; }
|
|
67
|
+
var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
68
|
+
var lineWidth = canvas.lineWidth; // 进度条宽度
|
|
69
|
+
var startAngle = Math.PI; // 起始角度（3点钟方向）
|
|
70
|
+
var endAngle = 4 * Math.PI; // 结束角度（360度）
|
|
71
|
+
// 绘制环形进度条的函数
|
|
72
|
+
function drawProgressBar(progress, color) {
|
|
73
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
74
|
+
// 绘制灰色背景
|
|
75
|
+
ctx.beginPath();
|
|
76
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
77
|
+
// 填充颜色
|
|
78
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
79
|
+
ctx.fill(); // 填充路径
|
|
80
|
+
ctx.setLineWidth(lineWidth);
|
|
81
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
82
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
83
|
+
ctx.stroke();
|
|
84
|
+
// 绘制进度条
|
|
85
|
+
var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
86
|
+
ctx.beginPath();
|
|
87
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
88
|
+
ctx.setLineWidth(lineWidth);
|
|
89
|
+
if (canvas.fillColorStops) {
|
|
90
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
91
|
+
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
92
|
+
for (var stop_1 in canvas.fillColorStops) {
|
|
93
|
+
// 添加渐变色
|
|
94
|
+
gradient.addColorStop(percentToDecimal(stop_1), canvas.fillColorStops[stop_1]);
|
|
95
|
+
}
|
|
96
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
100
|
+
}
|
|
101
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
102
|
+
ctx.stroke();
|
|
103
|
+
ctx.draw();
|
|
104
|
+
}
|
|
105
|
+
// 示例：绘制不同的进度条
|
|
106
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
107
|
+
},
|
|
108
|
+
renderHalf: function (canvas, ctx, progress, ops) {
|
|
109
|
+
if (ops === void 0) { ops = {
|
|
110
|
+
lineCap: 'round',
|
|
111
|
+
}; }
|
|
112
|
+
var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
113
|
+
var lineWidth = canvas.lineWidth; // 进度条宽度
|
|
114
|
+
var startAngle = 1 * Math.PI; // 起始角度（3点钟方向）
|
|
115
|
+
var endAngle = 2 * Math.PI; // 结束角度（360度）
|
|
116
|
+
// 绘制环形进度条的函数
|
|
117
|
+
function drawProgressBar(progress, color) {
|
|
118
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
119
|
+
// 绘制灰色背景
|
|
120
|
+
ctx.beginPath();
|
|
121
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
122
|
+
// 填充颜色
|
|
123
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
124
|
+
ctx.fill(); // 填充路径
|
|
125
|
+
ctx.setLineWidth(lineWidth);
|
|
126
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
127
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
128
|
+
ctx.stroke();
|
|
129
|
+
// 绘制进度条
|
|
130
|
+
var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
131
|
+
ctx.beginPath();
|
|
132
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
133
|
+
ctx.setLineWidth(lineWidth);
|
|
134
|
+
if (canvas.fillColorStops) {
|
|
135
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
136
|
+
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
137
|
+
for (var stop_2 in canvas.fillColorStops) {
|
|
138
|
+
// 添加渐变色
|
|
139
|
+
gradient.addColorStop(percentToDecimal(stop_2), canvas.fillColorStops[stop_2]);
|
|
140
|
+
}
|
|
141
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
145
|
+
}
|
|
146
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
147
|
+
ctx.stroke();
|
|
148
|
+
ctx.draw();
|
|
149
|
+
}
|
|
150
|
+
// 示例：绘制不同的进度条
|
|
151
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
152
|
+
},
|
|
153
|
+
parseSize: function () {
|
|
154
|
+
if (typeof this.data.size === 'number')
|
|
155
|
+
return this.data.size;
|
|
156
|
+
if (typeof this.data.size === 'string') {
|
|
157
|
+
var res = this.data.size.match(/\d+/);
|
|
158
|
+
if (res) {
|
|
159
|
+
return res[0];
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
return this.data.size;
|
|
163
|
+
},
|
|
164
|
+
renderHalf2: function (canvas, ctx, progress, ops) {
|
|
165
|
+
if (ops === void 0) { ops = {
|
|
166
|
+
lineCap: 'round',
|
|
167
|
+
}; }
|
|
168
|
+
var radius = ((canvas.width - canvas.lineWidth) * 0.9) / 2; // 圆形半径
|
|
169
|
+
var lineWidth = canvas.lineWidth; // 进度条宽度
|
|
170
|
+
var startAngle = 0.8 * Math.PI; // 起始角度（3点钟方向）
|
|
171
|
+
var endAngle = 2.2 * Math.PI; // 结束角度（360度）
|
|
172
|
+
// 绘制环形进度条的函数
|
|
173
|
+
function drawProgressBar(progress, color) {
|
|
174
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
|
|
175
|
+
// 绘制灰色背景
|
|
176
|
+
ctx.beginPath();
|
|
177
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
|
|
178
|
+
// 填充颜色
|
|
179
|
+
ctx.setFillStyle(canvas.maskColor); // 你想填充的颜色
|
|
180
|
+
ctx.fill(); // 填充路径
|
|
181
|
+
ctx.setLineWidth(lineWidth);
|
|
182
|
+
ctx.setStrokeStyle(canvas.trackColor); // 灰色背景
|
|
183
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
184
|
+
ctx.stroke();
|
|
185
|
+
// 绘制进度条
|
|
186
|
+
var progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
|
|
187
|
+
ctx.beginPath();
|
|
188
|
+
ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, startAngle + progressAngle);
|
|
189
|
+
ctx.setLineWidth(lineWidth);
|
|
190
|
+
if (canvas.fillColorStops) {
|
|
191
|
+
// 创建线性渐变（起点x,y 到 终点x,y）
|
|
192
|
+
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
193
|
+
for (var stop_3 in canvas.fillColorStops) {
|
|
194
|
+
// 添加渐变色
|
|
195
|
+
gradient.addColorStop(percentToDecimal(stop_3), canvas.fillColorStops[stop_3]);
|
|
196
|
+
}
|
|
197
|
+
ctx.setStrokeStyle(gradient); // 自定义颜色
|
|
198
|
+
}
|
|
199
|
+
else {
|
|
200
|
+
ctx.setStrokeStyle(color); // 自定义颜色
|
|
201
|
+
}
|
|
202
|
+
ctx.setLineCap(ops.lineCap); // 设置圆角效果
|
|
203
|
+
ctx.stroke();
|
|
204
|
+
ctx.draw();
|
|
205
|
+
}
|
|
206
|
+
// 示例：绘制不同的进度条
|
|
207
|
+
drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
|
|
208
|
+
},
|
|
209
|
+
render: function (val) {
|
|
210
|
+
// @ts-ignore
|
|
211
|
+
var context = ty.createCanvasContext(this.data.canvasId);
|
|
212
|
+
var sizeVal = this.parseSize();
|
|
213
|
+
var params = {
|
|
214
|
+
width: sizeVal,
|
|
215
|
+
height: sizeVal,
|
|
216
|
+
lineWidth: this.data.trackWidth,
|
|
217
|
+
trackColor: this.data.trackColor,
|
|
218
|
+
fillColor: this.data.fillColor,
|
|
219
|
+
fillColorStops: this.data.fillColorStops,
|
|
220
|
+
maskColor: this.data.maskColor,
|
|
221
|
+
};
|
|
222
|
+
if (this.data.mode === 'basic') {
|
|
223
|
+
this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
224
|
+
}
|
|
225
|
+
if (this.data.mode === 'angle') {
|
|
226
|
+
this.renderHalf(params, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
227
|
+
}
|
|
228
|
+
if (this.data.mode === 'angle2') {
|
|
229
|
+
this.renderHalf2(params, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
|
|
230
|
+
}
|
|
46
231
|
},
|
|
47
232
|
},
|
|
48
233
|
});
|
package/lib/circle/index.wxml
CHANGED
|
@@ -1,13 +1 @@
|
|
|
1
|
-
<
|
|
2
|
-
<view class="smart-progress-circle-box smart-progress-circle-box-left">
|
|
3
|
-
<view class="smart-progress-circle-bar smart-progress-circle-bar-left" style="transform:{{transformLeft}};background:{{trackColor}};">
|
|
4
|
-
</view>
|
|
5
|
-
</view>
|
|
6
|
-
<view class="smart-progress-circle-box smart-progress-circle-box-right">
|
|
7
|
-
<view class="smart-progress-circle-bar smart-progress-circle-bar-right" style="transform:{{transformRight}};background:{{trackColor}};">
|
|
8
|
-
</view>
|
|
9
|
-
</view>
|
|
10
|
-
<view class="smart-progress-circle-content" style="background:{{maskColor}};">
|
|
11
|
-
<slot></slot>
|
|
12
|
-
</view>
|
|
13
|
-
</view>
|
|
1
|
+
<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
|
package/lib/circle/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss'
|
|
1
|
+
@import '../common/index.wxss';
|
package/lib/dialog/index.js
CHANGED
|
@@ -100,6 +100,9 @@ var dialog_1 = require("./dialog");
|
|
|
100
100
|
mounted: function () {
|
|
101
101
|
if (!this.id)
|
|
102
102
|
return;
|
|
103
|
+
if (dialog_1.contextRef.value["#".concat(this.id)]) {
|
|
104
|
+
console.error("Dialog component #".concat(this.id, " repeated!"));
|
|
105
|
+
}
|
|
103
106
|
dialog_1.contextRef.value["#".concat(this.id)] = (0, utils_1.getCurrentPage)();
|
|
104
107
|
},
|
|
105
108
|
destroyed: function () {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var component_1 = require("../../common/component");
|
|
7
|
+
var Sun_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Sun"));
|
|
8
|
+
(0, component_1.SmartComponent)({
|
|
9
|
+
data: {
|
|
10
|
+
sunMaxFill: Sun_1.default,
|
|
11
|
+
show1: false,
|
|
12
|
+
show: false,
|
|
13
|
+
},
|
|
14
|
+
methods: {
|
|
15
|
+
onShow1: function (event) {
|
|
16
|
+
this.setData({
|
|
17
|
+
show1: event.detail,
|
|
18
|
+
});
|
|
19
|
+
},
|
|
20
|
+
showPopup: function () {
|
|
21
|
+
this.setData({ show: true });
|
|
22
|
+
},
|
|
23
|
+
onClose: function () {
|
|
24
|
+
this.setData({ show: false });
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
/* eslint-disable prefer-destructuring */
|
|
15
|
+
var component_1 = require("../common/component");
|
|
16
|
+
var transition_1 = require("../mixins/transition");
|
|
17
|
+
var IconSrc = function (deg) {
|
|
18
|
+
return "<svg style=\"transform: rotate(".concat(deg, ")\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"none\" version=\"1.1\" width=\"18.00000052453666\" height=\"6.000001573609978\" viewBox=\"0 0 18.00000052453666 6.000001573609978\"><g transform=\"matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)\"><path d=\"M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z\" fill-rule=\"evenodd\" fill=\"#FFFFFF\" fill-opacity=\"1\"/></g></svg>");
|
|
19
|
+
};
|
|
20
|
+
function createSvgIcon(svg) {
|
|
21
|
+
return "data:image/svg+xml,".concat(encodeURIComponent("<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">".concat(svg)));
|
|
22
|
+
}
|
|
23
|
+
(0, component_1.SmartComponent)({
|
|
24
|
+
classes: [
|
|
25
|
+
'enter-class',
|
|
26
|
+
'enter-active-class',
|
|
27
|
+
'enter-to-class',
|
|
28
|
+
'leave-class',
|
|
29
|
+
'leave-active-class',
|
|
30
|
+
'leave-to-class',
|
|
31
|
+
'close-icon-class',
|
|
32
|
+
],
|
|
33
|
+
mixins: [(0, transition_1.transition)(false)],
|
|
34
|
+
props: {
|
|
35
|
+
// `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
|
|
36
|
+
placement: {
|
|
37
|
+
type: String,
|
|
38
|
+
value: 'right',
|
|
39
|
+
},
|
|
40
|
+
show: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
observer: function (value) {
|
|
43
|
+
if (value !== this.data.currentShow) {
|
|
44
|
+
this.setData({
|
|
45
|
+
currentShow: value,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
customStyle: {
|
|
51
|
+
type: String,
|
|
52
|
+
value: '',
|
|
53
|
+
},
|
|
54
|
+
zIndex: {
|
|
55
|
+
type: Number,
|
|
56
|
+
value: 101,
|
|
57
|
+
},
|
|
58
|
+
duration: {
|
|
59
|
+
type: Number,
|
|
60
|
+
value: 2000,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
data: { currentShow: false },
|
|
64
|
+
mounted: function () { },
|
|
65
|
+
created: function () { },
|
|
66
|
+
methods: {
|
|
67
|
+
getButtonPosition: function () {
|
|
68
|
+
var placement = this.data.placement;
|
|
69
|
+
var params = {
|
|
70
|
+
// left: rect.left,
|
|
71
|
+
// top: rect.top,
|
|
72
|
+
transform: '',
|
|
73
|
+
iconTransform: '',
|
|
74
|
+
iconPos: '',
|
|
75
|
+
iconPosVal: 0,
|
|
76
|
+
iconSrc: createSvgIcon(IconSrc('0deg')),
|
|
77
|
+
iconWidth: '18px',
|
|
78
|
+
iconHeight: '6px',
|
|
79
|
+
iconStyle: '',
|
|
80
|
+
};
|
|
81
|
+
if (placement.startsWith('left')) {
|
|
82
|
+
var iconAlignPos = '';
|
|
83
|
+
var transform = 'translate(-100%,-50%)';
|
|
84
|
+
if (placement === 'leftTop') {
|
|
85
|
+
iconAlignPos = 'top: calc(0% + 16px)';
|
|
86
|
+
transform = 'translate(-100%, 0)';
|
|
87
|
+
params.top = '0px';
|
|
88
|
+
params.left = '-8px';
|
|
89
|
+
}
|
|
90
|
+
else if (placement === 'leftBottom') {
|
|
91
|
+
iconAlignPos = 'bottom: calc(0% - 6px)';
|
|
92
|
+
transform = 'translate(-100%, -100%)';
|
|
93
|
+
params.left = '-9px';
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
transform = 'translate(-100%, -50%)';
|
|
97
|
+
params.left = '-9px';
|
|
98
|
+
params.top = '50%';
|
|
99
|
+
iconAlignPos = 'top: 50%';
|
|
100
|
+
}
|
|
101
|
+
params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc('270deg')), iconStyle: "right:8px;transform:translate(100%, -50%);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos) });
|
|
102
|
+
}
|
|
103
|
+
if (placement.startsWith('top')) {
|
|
104
|
+
var iconAlignPos = '';
|
|
105
|
+
var transform = 'translate(-50%, -100%)';
|
|
106
|
+
if (placement === 'topLeft') {
|
|
107
|
+
iconAlignPos = 'left: calc(0% + 16px);';
|
|
108
|
+
transform = 'translate(calc(0% - 16px), -100%)';
|
|
109
|
+
params.top = '-12px';
|
|
110
|
+
params.left = '16px';
|
|
111
|
+
}
|
|
112
|
+
else if (placement === 'topRight') {
|
|
113
|
+
iconAlignPos = 'left: calc(100% - 16px);';
|
|
114
|
+
transform = 'translate(0, -100%)';
|
|
115
|
+
params.top = '-12px';
|
|
116
|
+
params.right = '2px';
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
iconAlignPos = 'left: 50%';
|
|
120
|
+
transform = 'translate(-50%, -100%)';
|
|
121
|
+
params.top = '-12px';
|
|
122
|
+
params.left = '50%';
|
|
123
|
+
}
|
|
124
|
+
params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc('0deg')), iconStyle: "bottom:0px;transform:translate(-50%, 100%);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
|
|
125
|
+
}
|
|
126
|
+
if (placement.startsWith('right')) {
|
|
127
|
+
var iconAlignPos = '';
|
|
128
|
+
var transform = 'translateY(-50%)';
|
|
129
|
+
if (placement === 'rightTop') {
|
|
130
|
+
iconAlignPos = 'top: calc(0% + 16px)';
|
|
131
|
+
transform = "translate(0%,0)";
|
|
132
|
+
params.left = 'calc(100% + 8px)';
|
|
133
|
+
params.top = '2px';
|
|
134
|
+
}
|
|
135
|
+
else if (placement === 'rightBottom') {
|
|
136
|
+
iconAlignPos = 'top: calc(100% - 12px)';
|
|
137
|
+
transform = "translate(0%,0)";
|
|
138
|
+
params.left = 'calc(100% + 8px)';
|
|
139
|
+
params.bottom = '2px';
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
iconAlignPos = 'top: 50%';
|
|
143
|
+
transform = "translate(0%, -50%)";
|
|
144
|
+
params.left = 'calc(100% + 8px)';
|
|
145
|
+
params.top = '50%';
|
|
146
|
+
}
|
|
147
|
+
params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc('90deg')), iconStyle: "left:-10px;transform:translate(0%, -50%);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos, ";") });
|
|
148
|
+
}
|
|
149
|
+
if (placement.startsWith('bottom')) {
|
|
150
|
+
var iconAlignPos = '';
|
|
151
|
+
var transform = 'translateX(-50%)';
|
|
152
|
+
if (placement === 'bottomLeft') {
|
|
153
|
+
iconAlignPos = 'left: calc(0% + 16px);';
|
|
154
|
+
transform = 'translate(calc(0% - 16px), 100%)';
|
|
155
|
+
params.bottom = '-10px';
|
|
156
|
+
params.left = '18px';
|
|
157
|
+
}
|
|
158
|
+
else if (placement === 'bottomRight') {
|
|
159
|
+
iconAlignPos = 'left: calc(100% - 16px);';
|
|
160
|
+
transform = 'translate(0, 100%)';
|
|
161
|
+
params.bottom = '-10px';
|
|
162
|
+
params.right = '2px';
|
|
163
|
+
}
|
|
164
|
+
else {
|
|
165
|
+
iconAlignPos = 'left: 50%';
|
|
166
|
+
transform = 'translate(-50%, 100%)';
|
|
167
|
+
params.bottom = '-10px';
|
|
168
|
+
params.left = '50%';
|
|
169
|
+
}
|
|
170
|
+
params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc('180deg')), iconStyle: "top:0px;transform:translate(-50%, -100%);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
|
|
171
|
+
}
|
|
172
|
+
this.setData(params);
|
|
173
|
+
},
|
|
174
|
+
onClick: function () {
|
|
175
|
+
var _this = this;
|
|
176
|
+
this.getButtonPosition();
|
|
177
|
+
this.setData({
|
|
178
|
+
currentShow: true,
|
|
179
|
+
});
|
|
180
|
+
this.$emit('showchange', true);
|
|
181
|
+
if (this.data.duration) {
|
|
182
|
+
setTimeout(function () {
|
|
183
|
+
_this.onClose();
|
|
184
|
+
}, this.data.duration);
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
onClose: function () {
|
|
188
|
+
this.setData({
|
|
189
|
+
currentShow: false,
|
|
190
|
+
});
|
|
191
|
+
this.$emit('showchange', false);
|
|
192
|
+
this.$emit('close', false);
|
|
193
|
+
},
|
|
194
|
+
},
|
|
195
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<view class="smart-popover">
|
|
2
|
+
|
|
3
|
+
<smart-overlay
|
|
4
|
+
show="{{ currentShow }}"
|
|
5
|
+
z-index="{{ zIndex }}"
|
|
6
|
+
bind:click="onClose"
|
|
7
|
+
transition="{{ transition }}"
|
|
8
|
+
close-on-click-overlay
|
|
9
|
+
bind:close="onClose"
|
|
10
|
+
z-index="{{zIndex}}"
|
|
11
|
+
>
|
|
12
|
+
|
|
13
|
+
</smart-overlay>
|
|
14
|
+
|
|
15
|
+
<view class="smart-popover-button" id="{{popoverId}}" catch:tap="onClick">
|
|
16
|
+
<slot />
|
|
17
|
+
<smart-transition show="{{currentShow}}">
|
|
18
|
+
<view class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}">
|
|
19
|
+
<slot name="overlay" />
|
|
20
|
+
<view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
|
|
21
|
+
</view>
|
|
22
|
+
</smart-transition>
|
|
23
|
+
</view>
|
|
24
|
+
|
|
25
|
+
</view>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,#fff);border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
|
package/lib/slider/index.js
CHANGED
|
@@ -19,6 +19,7 @@ var DRAG_STATUS = {
|
|
|
19
19
|
disabled: Boolean,
|
|
20
20
|
useButtonSlot: Boolean,
|
|
21
21
|
activeColor: String,
|
|
22
|
+
inActiveColor: String,
|
|
22
23
|
inactiveColor: String,
|
|
23
24
|
max: {
|
|
24
25
|
type: Number,
|
|
@@ -151,7 +152,7 @@ var DRAG_STATUS = {
|
|
|
151
152
|
var vertical = this.data.vertical;
|
|
152
153
|
var mainAxis = vertical ? 'height' : 'width';
|
|
153
154
|
this.setData({
|
|
154
|
-
wrapperStyle: "\n background: ".concat(this.data.inactiveColor || '', ";\n ").concat(vertical ? 'width' : 'height', ": ").concat((0, utils_1.addUnit)(this.data.barHeight) || '', ";\n "),
|
|
155
|
+
wrapperStyle: "\n background: ".concat(this.data.inactiveColor || this.data.inActiveColor || '', ";\n ").concat(vertical ? 'width' : 'height', ": ").concat((0, utils_1.addUnit)(this.data.barHeight) || '', ";\n "),
|
|
155
156
|
barStyle: "\n ".concat(mainAxis, ": ").concat(this.calcMainAxis(), ";\n left: ").concat(vertical ? 0 : this.calcOffset(), ";\n top: ").concat(vertical ? this.calcOffset() : 0, ";\n ").concat(drag ? 'transition: none;' : '', "\n "),
|
|
156
157
|
});
|
|
157
158
|
if (drag) {
|
package/lib/toast/index.js
CHANGED
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
/*
|
|
4
|
-
* @Author: mjh
|
|
5
|
-
* @Date: 2025-02-14 16:33:01
|
|
6
|
-
* @LastEditors: mjh
|
|
7
|
-
* @LastEditTime: 2025-02-18 10:12:49
|
|
8
|
-
* @Description:
|
|
9
|
-
*/
|
|
10
3
|
var icons_1 = require("./icons");
|
|
11
4
|
var component_1 = require("../common/component");
|
|
12
5
|
var toast_1 = require("./toast");
|
|
@@ -45,6 +38,9 @@ var utils_1 = require("../common/utils");
|
|
|
45
38
|
mounted: function () {
|
|
46
39
|
if (!this.id)
|
|
47
40
|
return;
|
|
41
|
+
if (toast_1.contextRef.value["#".concat(this.id)]) {
|
|
42
|
+
console.error("Toast component #".concat(this.id, " repeated!"));
|
|
43
|
+
}
|
|
48
44
|
toast_1.contextRef.value["#".concat(this.id)] = (0, utils_1.getCurrentPage)();
|
|
49
45
|
},
|
|
50
46
|
destroyed: function () {
|