Skip to content

Commit 30b9692

Browse files
ly525ly525
committed
feat(PropTypes): upgrade PropTypes from object to function; #!zh: 升级 PropTypes: 更新为函数, 便于后期扩展
1 parent c661274 commit 30b9692

16 files changed

+142
-217
lines changed

‎front-end/h5/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@luban-h5/lbc-button": "^0.0.3",
1818
"@luban-h5/lbp-slide": "^0.0.7",
1919
"@luban-h5/lbs-text-align": "^0.0.3",
20-
"@luban-h5/plugin-common-props": "^0.0.2",
20+
"@luban-h5/plugin-common-props": "^0.1.3",
2121
"animate.css": "^3.7.2",
2222
"ant-design-vue": "^1.3.14",
2323
"core-js": "^2.6.5",

‎front-end/h5/src/components/core/editor/edit-panel/props.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default {
7474
const data = {
7575
// style: { width: '100%' },
7676
props: {
77-
...item.prop || {},
77+
...item.props || {},
7878
// https://vuejs.org/v2/guide/render-function.html#v-model
7979

8080
// #!zh:不设置默认值的原因（下一行的代码，注释的代码）：

‎front-end/h5/src/components/plugins/lbp-background.js

+5-30
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
* @Author: ly525
33
* @Date: 2019-11-24 18:51:58
44
* @LastEditors: ly525
5-
* @LastEditTime: 2020-04-23 23:17:55
5+
* @LastEditTime: 2020-05-17 21:02:47
66
* @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-background.js
77
* @Github: https://github.com/ly525/luban-h5
88
* @Description: luban-h5 background image/color component/plugin
99
* @Copyright 2018 - 2019 luban-h5. All Rights Reserved
1010
*/
11+
import PropTypes from '@luban-h5/plugin-common-props'
12+
1113
export default {
1214
name: 'lbp-background',
1315
render () {
@@ -39,34 +41,7 @@ export default {
3941
)
4042
},
4143
props: {
42-
imgSrc: {
43-
type: String,
44-
default: '',
45-
editor: {
46-
type: 'lbs-image-gallery',
47-
label: '图片',
48-
prop: {
49-
type: 'textarea'
50-
}
51-
}
52-
},
53-
backgroundColor: {
54-
type: String,
55-
// Q: 为什么 transparent 无效？
56-
// A: 注意，根据 MDN 文档，颜色选择器的 value 只能是：# + 6个16进制字符串
57-
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value
58-
// The value of an <input> element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format.
59-
60-
default: 'rgba(255, 255, 255, 0.2)',
61-
editor: {
62-
type: 'el-color-picker',
63-
label: '背景颜色',
64-
prop: {
65-
size: 'mini',
66-
showAlpha: true
67-
},
68-
require: true
69-
}
70-
}
44+
imgSrc: PropTypes.image(),
45+
backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' })
7146
}
7247
}

‎front-end/h5/src/components/plugins/lbp-bg-music.js

+17-24
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,34 @@
11
/*
22
* @Author: ly525
33
* @Date: 2020-01-03 23:43:34
4-
* @LastEditors : ly525
5-
* @LastEditTime : 2020-01-04 13:27:58
4+
* @LastEditors: ly525
5+
* @LastEditTime: 2020-05-17 20:58:32
66
* @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-bg-music.js
77
* @Github: https://github.com/ly525/luban-h5
88
* @Description: Do not edit
99
* @Copyright 2018 - 2019 luban-h5. All Rights Reserved
1010
*/
11+
import PropTypes from '@luban-h5/plugin-common-props'
1112
import './styles/bg-music.scss'
1213

1314
export default {
1415
name: 'lbp-bg-music',
1516
props: {
16-
disabled: {
17-
type: Boolean,
18-
default: true
19-
},
20-
autoplay: {
21-
type: Boolean,
22-
default: true,
23-
editor: {
24-
type: 'a-switch',
25-
label: '自动播放'
17+
disabled: PropTypes.boolean({
18+
defaultValue: true,
19+
label: 'disabled'
20+
}),
21+
autoplay: PropTypes.boolean({
22+
defaultValue: true,
23+
label: '自动播放'
24+
}),
25+
src: PropTypes.string({
26+
label: '音乐URL',
27+
defaultValue: 'http://go.163.com/2018/0209/mengniu/audio/bgm.mp3',
28+
props: {
29+
type: 'textarea'
2630
}
27-
},
28-
src: {
29-
type: String,
30-
default: 'http://go.163.com/2018/0209/mengniu/audio/bgm.mp3',
31-
editor: {
32-
type: 'a-input',
33-
label: '音乐URL',
34-
prop: {
35-
type: 'textarea'
36-
}
37-
}
38-
}
31+
})
3932
},
4033
data: () => ({
4134
isPlaying: true

‎front-end/h5/src/components/plugins/lbp-button.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// https://github.com/luban-h5-components/plugin-common-props
2-
import commonProps from '@luban-h5/plugin-common-props'
2+
import PropTypes from '@luban-h5/plugin-common-props'
33

44
export default {
55
render () {
@@ -33,16 +33,15 @@ export default {
3333
},
3434
name: 'lbp-button',
3535
props: {
36-
text: commonProps.text(),
37-
vertical: commonProps.vertical,
38-
backgroundColor: commonProps.backgroundColor,
39-
color: commonProps.color,
40-
fontSize: commonProps.fontSize,
41-
lineHeight: commonProps.lineHeight,
42-
borderWidth: commonProps.borderWidth,
43-
borderRadius: commonProps.borderRadius,
44-
borderColor: commonProps.borderColor,
45-
textAlign: commonProps.textAlign()
46-
36+
text: PropTypes.string(),
37+
vertical: PropTypes.boolean(),
38+
backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
39+
color: PropTypes.color(),
40+
fontSize: PropTypes.number({ label: '字号(px)' }),
41+
lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 }),
42+
borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
43+
borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 4 }),
44+
borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
45+
textAlign: PropTypes.textAlign()
4746
}
4847
}

‎front-end/h5/src/components/plugins/lbp-form-button.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// https://github.com/luban-h5-components/plugin-common-props
2-
import commonProps from '@luban-h5/plugin-common-props'
2+
import PropTypes from '@luban-h5/plugin-common-props'
33

44
export default {
55
render () {
@@ -36,16 +36,16 @@ export default {
3636
},
3737
name: 'lbp-form-button',
3838
props: {
39-
text: commonProps.text(),
40-
vertical: commonProps.vertical,
41-
backgroundColor: commonProps.backgroundColor,
42-
color: commonProps.color,
43-
fontSize: commonProps.fontSize,
44-
lineHeight: commonProps.lineHeight,
45-
borderWidth: commonProps.borderWidth,
46-
borderRadius: commonProps.borderRadius,
47-
borderColor: commonProps.borderColor,
48-
textAlign: commonProps.textAlign(),
39+
text: PropTypes.string({ defaultValue: '提交' }),
40+
vertical: PropTypes.boolean(),
41+
backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
42+
color: PropTypes.color(),
43+
fontSize: PropTypes.number({ label: '字号(px)' }),
44+
lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 }),
45+
borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
46+
borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 4 }),
47+
borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
48+
textAlign: PropTypes.textAlign(),
4949
disabled: {
5050
type: Boolean,
5151
default: false

‎front-end/h5/src/components/plugins/lbp-form-checkbox-group.js

+11-19
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PropTypes from '@luban-h5/plugin-common-props'
12
import LbpFormRadio from './lbp-form-radio.js'
23

34
function getDefaultItems () {
@@ -26,32 +27,23 @@ export default {
2627
LbpFormRadio
2728
},
2829
props: {
29-
aliasName: {
30-
type: String,
31-
default: `标题演示`,
32-
editor: {
33-
type: 'a-input',
34-
label: '填写标题',
35-
require: true
36-
}
37-
},
38-
items: {
39-
type: Array,
40-
default: () => getDefaultItems(),
41-
editor: {
42-
type: 'lbs-prop-text-enum-editor',
43-
label: '选项列表',
44-
require: true
45-
}
46-
},
30+
aliasName: PropTypes.string({
31+
defaultValue: '标题演示',
32+
label: '填写标题'
33+
}),
34+
items: PropTypes.textOptions({
35+
label: '选项列表',
36+
defaultValue: () => getDefaultItems()
37+
}),
38+
// TODO 抽离 radio-group 至 common-props
4739
type: {
4840
type: String,
4941
default: 'checkbox',
5042
editor: {
5143
type: 'a-radio-group',
5244
label: '选择模式',
5345
require: true,
54-
prop: {
46+
props: {
5547
options: [
5648
{ label: '单选', value: 'radio' },
5749
{ label: '多选', value: 'checkbox' }

‎front-end/h5/src/components/plugins/lbp-form-input.js

+13-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// https://github.com/luban-h5-components/plugin-common-props
2-
import commonProps from '@luban-h5/plugin-common-props'
2+
import PropTypes from '@luban-h5/plugin-common-props'
33

44
export default {
55
name: 'lbp-form-input',
@@ -26,12 +26,6 @@ export default {
2626
/>
2727
},
2828
props: {
29-
name: {
30-
type: String,
31-
default () {
32-
return 'name'
33-
}
34-
},
3529
type: {
3630
type: String,
3731
default: 'text',
@@ -40,20 +34,18 @@ export default {
4034
label: '类型'
4135
}
4236
},
43-
disabled: {
44-
type: Boolean,
45-
default: false
46-
},
47-
// type: commonProps.type,
48-
placeholder: commonProps.placeholder('姓名'),
49-
fontSize: commonProps.fontSize,
50-
color: commonProps.color,
51-
backgroundColor: commonProps.backgroundColor,
52-
borderColor: commonProps.borderColor,
53-
borderWidth: commonProps.borderWidth,
54-
borderRadius: commonProps.borderRadius,
55-
lineHeight: commonProps.lineHeight,
56-
textAlign: commonProps.textAlign({ defaultValue: 'left' })
37+
name: PropTypes.string({ defaultValue: 'name', label: 'name' }),
38+
disabled: PropTypes.boolean({ label: 'disabled' }),
39+
fontSize: PropTypes.number({ label: '字号(px)' }),
40+
placeholder: PropTypes.string({ defaultValue: '提示信息', label: '提示信息' }),
41+
color: PropTypes.color(),
42+
backgroundColor: PropTypes.color({ label: '背景色', defaultValue: 'rgba(255, 255, 255, 0.2)' }),
43+
borderWidth: PropTypes.number({ label: '边框宽度(px)', defaultValue: 1 }),
44+
borderRadius: PropTypes.number({ label: '圆角(px)', defaultValue: 0 }),
45+
borderColor: PropTypes.color({ label: '边框颜色', defaultValue: '#ced4da' }),
46+
textAlign: PropTypes.textAlign({ defaultValue: 'left' }),
47+
vertical: PropTypes.boolean(),
48+
lineHeight: PropTypes.number({ label: '行高(px)', defaultValue: 1 })
5749
},
5850
componentsForPropsEditor: {
5951
'lbs-select-input-type': {

‎front-end/h5/src/components/plugins/lbp-form-radio-group.js

+12-21
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
* @Author: ly525
33
* @Date: 2019-11-23 12:35:43
44
* @LastEditors: ly525
5-
* @LastEditTime: 2019-11-23 19:50:57
6-
* @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio-group.js
5+
* @LastEditTime: 2020-05-17 23:17:23
6+
* @FilePath: /h5/src/components/plugins/lbp-form-radio-group.js
77
* @Github: https://github.com/ly525/luban-h5
88
* @Description: 表单单选组组件 #!en: radio group component
99
* @Copyright 2018 - 2019 luban-h5. All Rights Reserved
1010
*/
1111

12+
import PropTypes from '@luban-h5/plugin-common-props'
1213
import LbpFormRadio from './lbp-form-radio.js'
1314

1415
function getDefaultItems () {
@@ -34,32 +35,22 @@ function getDefaultItems () {
3435
export default {
3536
name: 'lbp-form-radio-group',
3637
props: {
37-
aliasName: {
38-
type: String,
39-
default: `标题演示`,
40-
editor: {
41-
type: 'a-input',
42-
label: '填写标题',
43-
require: true
44-
}
45-
},
46-
items: {
47-
type: Array,
48-
default: () => getDefaultItems(),
49-
editor: {
50-
type: 'lbs-prop-text-enum-editor',
51-
label: '选项列表',
52-
require: true
53-
}
54-
},
38+
aliasName: PropTypes.string({
39+
defaultValue: `标题演示`,
40+
label: '填写标题'
41+
}),
42+
items: PropTypes.textOptions({
43+
label: '选项列表',
44+
defaultValue: () => getDefaultItems()
45+
}),
5546
type: {
5647
type: String,
5748
default: 'radio',
5849
editor: {
5950
type: 'a-radio-group',
6051
label: '选择模式',
6152
require: true,
62-
prop: {
53+
props: {
6354
options: [
6455
{ label: '单选', value: 'radio' },
6556
{ label: '多选', value: 'checkbox' }

‎front-end/h5/src/components/plugins/lbp-form-radio.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
1+
/*
2+
* @Author: ly525
3+
* @Date: 2020-05-17 19:54:20
4+
* @LastEditors: ly525
5+
* @LastEditTime: 2020-05-17 19:55:02
6+
* @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-form-radio.js
7+
* @Github: https://github.com/ly525/luban-h5
8+
* @Description: Do not edit
9+
* @Copyright 2018 - 2019 luban-h5. All Rights Reserved
10+
*/
111
import './styles/radio.scss'
212
// https://github.com/luban-h5-components/plugin-common-props
3-
import commonProps from '@luban-h5/plugin-common-props'
413
import { genUUID } from '../../utils/element.js'
514

615
export default {
716
name: 'lbp-form-radio',
817
props: {
9-
...commonProps,
1018
value: {
1119
type: [String, Number],
1220
default: '选项值'

0 commit comments

Comments
 (0)