stellar-ui-v2 1.40.14 → 1.40.16
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 +8 -8
- package/components/ste-app-update/ste-app-update.vue +1 -1
- package/components/ste-index-list/README.md +6 -6
- package/components/ste-message-box/ste-message-box.js +72 -72
- package/components/ste-message-box/ste-message-box.vue +4 -20
- package/components/ste-popup/README.md +16 -16
- package/components/ste-popup/ste-popup.vue +392 -392
- package/components/ste-price/ste-price.vue +256 -256
- package/components/ste-rate/README.md +13 -13
- package/components/ste-search/ste-search.vue +590 -588
- package/components/ste-select/datetime.vue +106 -106
- package/components/ste-table-column/checkbox-icon.vue +65 -65
- package/components/ste-table-column/radio-icon.vue +110 -110
- package/components/ste-table-column/sub-table.vue +116 -116
- package/components/ste-tabs/props.js +212 -212
- package/components/ste-toast/ste-toast.js +69 -69
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
|
|
11
11
|
## ✨ 特性
|
|
12
12
|
|
|
13
|
-
- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
|
|
14
|
-
- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
|
|
15
|
-
- 📖 提供丰富的文档和组件示例.
|
|
13
|
+
- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
|
|
14
|
+
- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
|
|
15
|
+
- 📖 提供丰富的文档和组件示例.
|
|
16
16
|
- 🎨 支持修改 CSS 变量实现主题定制.
|
|
17
17
|
|
|
18
18
|
## 📱 预览
|
|
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
|
|
|
75
75
|
|
|
76
76
|
## 周边生态
|
|
77
77
|
|
|
78
|
-
| 项目 | 描述 |
|
|
79
|
-
| --- | --- |
|
|
80
|
-
|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建，打造的uni-app组件库 |
|
|
81
|
-
|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
|
|
82
|
-
|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
|
|
78
|
+
| 项目 | 描述 |
|
|
79
|
+
| --- | --- |
|
|
80
|
+
|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建，打造的uni-app组件库 |
|
|
81
|
+
|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
|
|
82
|
+
|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
|
|
83
83
|
|[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli) |stellar配套的脚手架 |
|
|
84
84
|
|
|
85
85
|
## 核心团队
|
|
@@ -111,12 +111,12 @@ methods: {
|
|
|
111
111
|
|
|
112
112
|
#### IndexList Props
|
|
113
113
|
|
|
114
|
-
| 属性名 | 说明 |类型 |默认值 |可选值 | 支持版本 |
|
|
115
|
-
| --- |--- | --- | --- | --- | --- |
|
|
116
|
-
| `active` | 当前激活的索引下标，支持sync双向绑定，默认值0 | `Number` | `0` | - | - |
|
|
117
|
-
| `height` | 高度，默认值100% | `String`/`Number` | `"100%"` | - | - |
|
|
118
|
-
| `sticky` | `title`是否粘性布局，自定义`title`插槽时不生效 | `Boolean` | `true` | - | - |
|
|
119
|
-
| `inactiveColor` | 右边锚点状态非激活时的颜色 | `String` | `#666666` | - | - |
|
|
114
|
+
| 属性名 | 说明 |类型 |默认值 |可选值 | 支持版本 |
|
|
115
|
+
| --- |--- | --- | --- | --- | --- |
|
|
116
|
+
| `active` | 当前激活的索引下标，支持sync双向绑定，默认值0 | `Number` | `0` | - | - |
|
|
117
|
+
| `height` | 高度，默认值100% | `String`/`Number` | `"100%"` | - | - |
|
|
118
|
+
| `sticky` | `title`是否粘性布局，自定义`title`插槽时不生效 | `Boolean` | `true` | - | - |
|
|
119
|
+
| `inactiveColor` | 右边锚点状态非激活时的颜色 | `String` | `#666666` | - | - |
|
|
120
120
|
| `activeColor` | 右边锚点状态激活时的颜色 | `String` | `#0090FF` | - | - |
|
|
121
121
|
|
|
122
122
|
#### IndexList Events
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import Vue from 'vue';
|
|
2
|
-
import Vuex from 'vuex';
|
|
3
|
-
|
|
4
|
-
Vue.use(Vuex);
|
|
5
|
-
const DEFAULT_KEY = '$steMsgBoxKey';
|
|
6
|
-
const DEFAULT_CONFIG = {
|
|
7
|
-
title: '',
|
|
8
|
-
content: '',
|
|
9
|
-
showCancel: true,
|
|
10
|
-
icon: '',
|
|
11
|
-
cancelText: '取消',
|
|
12
|
-
cancelColor: '#333333',
|
|
13
|
-
confirmText: '确认',
|
|
14
|
-
confirmColor: '',
|
|
15
|
-
editable: false,
|
|
16
|
-
placeholderText: '',
|
|
17
|
-
success: null,
|
|
18
|
-
fail: null,
|
|
19
|
-
complete: null,
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const store = new Vuex.Store({
|
|
23
|
-
state: {},
|
|
24
|
-
mutations: {
|
|
25
|
-
initializeState(state, key) {
|
|
26
|
-
if (!state[key]) {
|
|
27
|
-
Vue.set(state, key, {
|
|
28
|
-
selector: key,
|
|
29
|
-
openBegin: false,
|
|
30
|
-
...DEFAULT_CONFIG,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
setState(state, { key, params }) {
|
|
35
|
-
Object.assign(state[key], params);
|
|
36
|
-
},
|
|
37
|
-
resetState(state, key) {
|
|
38
|
-
Object.assign(state[key], {
|
|
39
|
-
openBegin: false,
|
|
40
|
-
});
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
function useSteMsgBox(key) {
|
|
46
|
-
key = key ?? DEFAULT_KEY;
|
|
47
|
-
store.commit('initializeState', key);
|
|
48
|
-
|
|
49
|
-
return {
|
|
50
|
-
showMsgBox(params) {
|
|
51
|
-
store.commit('setState', {
|
|
52
|
-
key,
|
|
53
|
-
params: {
|
|
54
|
-
...DEFAULT_CONFIG,
|
|
55
|
-
...params,
|
|
56
|
-
confirm: params.confirm ?? function () {},
|
|
57
|
-
cancel: params.cancel ?? function () {},
|
|
58
|
-
complete: params.complete ?? function () {},
|
|
59
|
-
openBegin: true,
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
},
|
|
63
|
-
hideMsgBox() {
|
|
64
|
-
store.commit('resetState', key);
|
|
65
|
-
},
|
|
66
|
-
$state: store.state[key],
|
|
67
|
-
$store: store,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export default useSteMsgBox;
|
|
72
|
-
export { DEFAULT_KEY };
|
|
1
|
+
import Vue from 'vue';
|
|
2
|
+
import Vuex from 'vuex';
|
|
3
|
+
|
|
4
|
+
Vue.use(Vuex);
|
|
5
|
+
const DEFAULT_KEY = '$steMsgBoxKey';
|
|
6
|
+
const DEFAULT_CONFIG = {
|
|
7
|
+
title: '',
|
|
8
|
+
content: '',
|
|
9
|
+
showCancel: true,
|
|
10
|
+
icon: '',
|
|
11
|
+
cancelText: '取消',
|
|
12
|
+
cancelColor: '#333333',
|
|
13
|
+
confirmText: '确认',
|
|
14
|
+
confirmColor: '',
|
|
15
|
+
editable: false,
|
|
16
|
+
placeholderText: '',
|
|
17
|
+
success: null,
|
|
18
|
+
fail: null,
|
|
19
|
+
complete: null,
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const store = new Vuex.Store({
|
|
23
|
+
state: {},
|
|
24
|
+
mutations: {
|
|
25
|
+
initializeState(state, key) {
|
|
26
|
+
if (!state[key]) {
|
|
27
|
+
Vue.set(state, key, {
|
|
28
|
+
selector: key,
|
|
29
|
+
openBegin: false,
|
|
30
|
+
...DEFAULT_CONFIG,
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
setState(state, { key, params }) {
|
|
35
|
+
Object.assign(state[key], params);
|
|
36
|
+
},
|
|
37
|
+
resetState(state, key) {
|
|
38
|
+
Object.assign(state[key], {
|
|
39
|
+
openBegin: false,
|
|
40
|
+
});
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
function useSteMsgBox(key) {
|
|
46
|
+
key = key ?? DEFAULT_KEY;
|
|
47
|
+
store.commit('initializeState', key);
|
|
48
|
+
|
|
49
|
+
return {
|
|
50
|
+
showMsgBox(params) {
|
|
51
|
+
store.commit('setState', {
|
|
52
|
+
key,
|
|
53
|
+
params: {
|
|
54
|
+
...DEFAULT_CONFIG,
|
|
55
|
+
...params,
|
|
56
|
+
confirm: params.confirm ?? function () {},
|
|
57
|
+
cancel: params.cancel ?? function () {},
|
|
58
|
+
complete: params.complete ?? function () {},
|
|
59
|
+
openBegin: true,
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
},
|
|
63
|
+
hideMsgBox() {
|
|
64
|
+
store.commit('resetState', key);
|
|
65
|
+
},
|
|
66
|
+
$state: store.state[key],
|
|
67
|
+
$store: store,
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default useSteMsgBox;
|
|
72
|
+
export { DEFAULT_KEY };
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view
|
|
3
|
-
class="ste-message-box-root"
|
|
4
|
-
:style="[cmpRootStyle]"
|
|
5
|
-
:class="[cmpRootClass]"
|
|
6
|
-
:animation="maskAnimationData"
|
|
7
|
-
v-if="show"
|
|
8
|
-
>
|
|
2
|
+
<view class="ste-message-box-root" :style="[cmpRootStyle]" :class="[cmpRootClass]" :animation="maskAnimationData" v-if="show">
|
|
9
3
|
<view class="ste-message-box-content" :animation="animationData">
|
|
10
4
|
<view class="content-box">
|
|
11
5
|
<view class="icon-box" v-if="icon">
|
|
@@ -19,13 +13,7 @@
|
|
|
19
13
|
<text class="placeholder-text" v-show="showInputPlaceholder">
|
|
20
14
|
{{ placeholderText }}
|
|
21
15
|
</text>
|
|
22
|
-
<input
|
|
23
|
-
:value="inputValue"
|
|
24
|
-
class="ste-message-box-input"
|
|
25
|
-
@input="handleInput"
|
|
26
|
-
@focus="handleInputFocus"
|
|
27
|
-
@blur="handleInputBlur"
|
|
28
|
-
/>
|
|
16
|
+
<input :value="inputValue" class="ste-message-box-input" @input="handleInput" @focus="handleInputFocus" @blur="handleInputBlur" />
|
|
29
17
|
</view>
|
|
30
18
|
</slot>
|
|
31
19
|
</view>
|
|
@@ -136,7 +124,7 @@ export default {
|
|
|
136
124
|
if (this.icon) {
|
|
137
125
|
classArr.push('icon-type');
|
|
138
126
|
}
|
|
139
|
-
if (!this.content && !this.$slots.default) {
|
|
127
|
+
if (!this.content && !this.$slots.default && !this.editable) {
|
|
140
128
|
classArr.push('no-content');
|
|
141
129
|
}
|
|
142
130
|
|
|
@@ -169,11 +157,7 @@ export default {
|
|
|
169
157
|
this.icon = $state.icon;
|
|
170
158
|
this.cancelText = $state.cancelText || this.cancelText;
|
|
171
159
|
this.confirmText = $state.confirmText || this.confirmText;
|
|
172
|
-
this.confirmColor = $state.confirmColor
|
|
173
|
-
? $state.confirmColor
|
|
174
|
-
: this.confirmColor
|
|
175
|
-
? this.confirmColor
|
|
176
|
-
: color.getColor().steThemeColor;
|
|
160
|
+
this.confirmColor = $state.confirmColor ? $state.confirmColor : this.confirmColor ? this.confirmColor : color.getColor().steThemeColor;
|
|
177
161
|
this.showCancel = $state.showCancel === false ? false : true;
|
|
178
162
|
this.cancelColor = $state.cancelColor || this.cancelColor;
|
|
179
163
|
this.editable = $state.editable === false ? false : true;
|
|
@@ -112,22 +112,22 @@ export default {
|
|
|
112
112
|
### API
|
|
113
113
|
#### 组件属性(Props)
|
|
114
114
|
|
|
115
|
-
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
|
|
116
|
-
| --- | --- | --- | --- | --- | --- |
|
|
117
|
-
| `show` | 是否显示弹出层,使用`sync`修饰符来双向绑定 | `Boolean` | `false` | - | - |
|
|
118
|
-
| `backGround` | 内容容器的背景色 | `String` | `#ffffff` | - | - |
|
|
119
|
-
| `showMask` | 是否显示遮罩 | `Boolean` | `true` | - | - |
|
|
120
|
-
| `isMaskClick` | 是否可以点击遮罩层关闭 | `Boolean` | `true` | - | - |
|
|
121
|
-
| `width` | 内容区宽度 | `Number/String` | `auto` | - | - |
|
|
122
|
-
| `height` | 内容区高度 | `Number/String` | `auto` | - | - |
|
|
123
|
-
| `position` | 弹出位置 | `String` | `center` | `top` `bottom` `left` `right` | - |
|
|
124
|
-
| `round` | 是否圆角 | `Boolean` | `false` | - | - |
|
|
125
|
-
| `showClose` | 是否右上角显示关闭图标 | `Boolean` | `true` | - | - |
|
|
126
|
-
| `offsetX` | 根据弹出位置，设置X轴偏移量，单位px | `Number/String` | `0` | - | - |
|
|
127
|
-
| `offsetY` | 根据弹出位置，设置Y轴偏移量，单位px | `Number/String` | `0` | - | - |
|
|
128
|
-
| `duration` | 动画持续时间 | `Number` | `200` | - | - |
|
|
129
|
-
| `zIndex` | 弹窗层级z-index | `Number` | `1000` | - | - |
|
|
130
|
-
| `keepContent` | 隐藏后是否不销毁弹窗内容元素 | `Boolean` | `true` | - | `v1.10.1` |
|
|
115
|
+
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 支持版本 |
|
|
116
|
+
| --- | --- | --- | --- | --- | --- |
|
|
117
|
+
| `show` | 是否显示弹出层,使用`sync`修饰符来双向绑定 | `Boolean` | `false` | - | - |
|
|
118
|
+
| `backGround` | 内容容器的背景色 | `String` | `#ffffff` | - | - |
|
|
119
|
+
| `showMask` | 是否显示遮罩 | `Boolean` | `true` | - | - |
|
|
120
|
+
| `isMaskClick` | 是否可以点击遮罩层关闭 | `Boolean` | `true` | - | - |
|
|
121
|
+
| `width` | 内容区宽度 | `Number/String` | `auto` | - | - |
|
|
122
|
+
| `height` | 内容区高度 | `Number/String` | `auto` | - | - |
|
|
123
|
+
| `position` | 弹出位置 | `String` | `center` | `top` `bottom` `left` `right` | - |
|
|
124
|
+
| `round` | 是否圆角 | `Boolean` | `false` | - | - |
|
|
125
|
+
| `showClose` | 是否右上角显示关闭图标 | `Boolean` | `true` | - | - |
|
|
126
|
+
| `offsetX` | 根据弹出位置，设置X轴偏移量，单位px | `Number/String` | `0` | - | - |
|
|
127
|
+
| `offsetY` | 根据弹出位置，设置Y轴偏移量，单位px | `Number/String` | `0` | - | - |
|
|
128
|
+
| `duration` | 动画持续时间 | `Number` | `200` | - | - |
|
|
129
|
+
| `zIndex` | 弹窗层级z-index | `Number` | `1000` | - | - |
|
|
130
|
+
| `keepContent` | 隐藏后是否不销毁弹窗内容元素 | `Boolean` | `true` | - | `v1.10.1` |
|
|
131
131
|
| `appendToBody`| 是否将弹窗挂载到body下（仅H5、APP有效） | `Boolean` | `false` | - | `v1.40.13`|
|
|
132
132
|
|
|
133
133
|
#### 组件事件(Events)
|