徐烜 / bsth-ebus-h5_editor · Commits

Commit f809cdf8fdfa1fd7d1a1460c9ec1139713c16680

Authored by ly525
1 parent 509ba6e9

refactor: merge props config to props

Inline Side-by-side
Showing 12 changed files with 243 additions and 688 deletions
front-end/h5/src/components/plugins/common/editor-config-for-configurable-props.js deleted 100644 → 0
  View file @509ba6e
1 -export default {  
2 - text: {  
3 - type: 'a-input',  
4 - label: '按钮文字',  
5 - require: true,  
6 - defaultPropValue: '按钮'  
7 - },  
8 - fontSize: {  
9 - type: 'a-input-number',  
10 - label: '字号(px)',  
11 - require: true,  
12 - prop: {  
13 - step: 1,  
14 - min: 12,  
15 - max: 144  
16 - },  
17 - defaultPropValue: 14  
18 - },  
19 - color: {  
20 - type: 'a-input',  
21 - label: '文字颜色',  
22 - // !#zh 为编辑组件指定 prop  
23 - prop: {  
24 - type: 'color'  
25 - },  
26 - require: true,  
27 - defaultPropValue: 'black'  
28 - },  
29 - backgroundColor: {  
30 - type: 'a-input', // lbs-color-picker  
31 - label: '背景颜色',  
32 - prop: {  
33 - type: 'color'  
34 - },  
35 - require: true,  
36 - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?  
37 - },  
38 - borderColor: {  
39 - type: 'a-input', // lbs-color-picker  
40 - label: '边框颜色',  
41 - prop: {  
42 - type: 'color'  
43 - },  
44 - require: true,  
45 - defaultPropValue: '#eeeeee'  
46 - },  
47 - borderWidth: {  
48 - type: 'a-input-number',  
49 - label: '边框宽度(px)',  
50 - require: true,  
51 - prop: {  
52 - step: 1,  
53 - min: 1,  
54 - max: 10  
55 - },  
56 - defaultPropValue: 1  
57 - },  
58 - borderRadius: {  
59 - type: 'a-input-number',  
60 - label: '圆角(px)',  
61 - require: true,  
62 - prop: {  
63 - step: 0.1,  
64 - min: 0,  
65 - max: 10  
66 - },  
67 - defaultPropValue: 0  
68 - },  
69 - lineHeight: {  
70 - type: 'a-input-number',  
71 - label: '行高',  
72 - require: true,  
73 - prop: {  
74 - step: 0.1,  
75 - min: 0.1,  
76 - max: 10  
77 - },  
78 - defaultPropValue: 1  
79 - }  
80 -}  
front-end/h5/src/components/plugins/common/props.js
  View file @f809cdf
1 export default { 1 export default {
2 - text: { 2 + text: ({ defaultValue = '按钮', label = '按钮文字' } = {}) => ({
3 type: String, 3 type: String,
4 - default: '按钮'  
5 - }, 4 + default: defaultValue,
  5 + editor: {
  6 + type: 'a-input',
  7 + label,
  8 + require: true
  9 + }
  10 + }),
6 type: { 11 type: {
7 type: String, 12 type: String,
8 - default: 'radio' 13 + default: 'text'
9 }, 14 },
10 - // placeholder: {  
11 - // type: String,  
12 - // default: '请填写提示文字',  
13 - // editor: {  
14 - // type: 'a-input',  
15 - // label: '提示文字',  
16 - // require: true  
17 - // }  
18 - // }, 15 + placeholder: ({ defaultValue = '请填写提示文字' } = {}) => ({
  16 + type: String,
  17 + default: defaultValue,
  18 + editor: {
  19 + type: 'a-input',
  20 + label: '提示文字',
  21 + require: true
  22 + }
  23 + }),
19 required: { 24 required: {
20 type: Boolean, 25 type: Boolean,
21 default: false 26 default: false
@@ -117,13 +122,13 @@ export default { @@ -117,13 +122,13 @@ export default {
117 require: true 122 require: true
118 } 123 }
119 }, 124 },
120 - textAlign: { 125 + textAlign: ({ defaultValue = 'center' } = {}) => ({
121 type: String, 126 type: String,
122 - default: 'center', 127 + default: defaultValue,
123 editor: { 128 editor: {
124 type: 'lbs-text-align', 129 type: 'lbs-text-align',
125 label: '文字对齐', 130 label: '文字对齐',
126 require: true 131 require: true
127 } 132 }
128 - } 133 + })
129 } 134 }
front-end/h5/src/components/plugins/lbp-button.js
  View file @f809cdf
@@ -33,15 +33,7 @@ export default { @@ -33,15 +33,7 @@ export default {
33 }, 33 },
34 name: 'lbp-button', 34 name: 'lbp-button',
35 props: { 35 props: {
36 - text: {  
37 - type: String,  
38 - default: '按钮',  
39 - editor: {  
40 - type: 'a-input',  
41 - label: '按钮文字',  
42 - require: true  
43 - }  
44 - }, 36 + text: commonProps.text(),
45 vertical: commonProps.vertical, 37 vertical: commonProps.vertical,
46 backgroundColor: commonProps.backgroundColor, 38 backgroundColor: commonProps.backgroundColor,
47 color: commonProps.color, 39 color: commonProps.color,
@@ -50,7 +42,7 @@ export default { @@ -50,7 +42,7 @@ export default {
50 borderWidth: commonProps.borderWidth, 42 borderWidth: commonProps.borderWidth,
51 borderRadius: commonProps.borderRadius, 43 borderRadius: commonProps.borderRadius,
52 borderColor: commonProps.borderColor, 44 borderColor: commonProps.borderColor,
53 - textAlign: commonProps.textAlign 45 + textAlign: commonProps.textAlign()
54 46
55 }, 47 },
56 editorConfig: { 48 editorConfig: {
front-end/h5/src/components/plugins/lbp-form-button.js
  View file @f809cdf
1 import LbpTextAlign from '@luban-h5/lbs-text-align' 1 import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +import commonProps from './common/props.js'
2 3
3 export default { 4 export default {
4 render () { 5 render () {
@@ -35,62 +36,16 @@ export default { @@ -35,62 +36,16 @@ export default {
35 }, 36 },
36 name: 'lbp-form-button', 37 name: 'lbp-form-button',
37 props: { 38 props: {
38 - text: {  
39 - type: String,  
40 - default: '按钮'  
41 - },  
42 - type: {  
43 - type: String,  
44 - default: 'text'  
45 - },  
46 - placeholder: {  
47 - type: String,  
48 - default: '请填写提示文字'  
49 - },  
50 - required: {  
51 - type: Boolean,  
52 - default: false  
53 - },  
54 - disabled: {  
55 - type: Boolean,  
56 - default: false  
57 - },  
58 - backgroundColor: {  
59 - type: String,  
60 - default: 'transparent'  
61 - },  
62 - color: {  
63 - type: String,  
64 - default: 'black'  
65 - },  
66 - fontSize: {  
67 - type: Number,  
68 - default: 14  
69 - },  
70 - lineHeight: {  
71 - type: Number,  
72 - default: 1  
73 - },  
74 - borderWidth: {  
75 - type: Number,  
76 - default: 1  
77 - },  
78 - borderRadius: {  
79 - type: Number,  
80 - default: 0  
81 - },  
82 - borderColor: {  
83 - type: String,  
84 - default: '#ced4da'  
85 - },  
86 - textAlign: {  
87 - type: String,  
88 - default: 'center'  
89 - }  
90 - // pageMode: {  
91 - // type: String,  
92 - // default: 'edit'  
93 - // } 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()
94 }, 49 },
95 methods: { 50 methods: {
96 handleClick () { 51 handleClick () {
@@ -118,114 +73,6 @@ export default { @@ -118,114 +73,6 @@ export default {
118 } 73 }
119 }, 74 },
120 editorConfig: { 75 editorConfig: {
121 - propsConfig: {  
122 - text: {  
123 - type: 'a-input',  
124 - label: '按钮文字',  
125 - require: true,  
126 - defaultPropValue: '按钮'  
127 - },  
128 - fontSize: {  
129 - type: 'a-input-number',  
130 - label: '字号(px)',  
131 - require: true,  
132 - prop: {  
133 - step: 1,  
134 - min: 12,  
135 - max: 144  
136 - },  
137 - defaultPropValue: 14  
138 - },  
139 - color: {  
140 - type: 'a-input',  
141 - label: '文字颜色',  
142 - // !#zh 为编辑组件指定 prop  
143 - prop: {  
144 - type: 'color'  
145 - },  
146 - require: true,  
147 - defaultPropValue: 'black'  
148 - },  
149 - backgroundColor: {  
150 - type: 'a-input', // lbs-color-picker  
151 - label: '背景颜色',  
152 - prop: {  
153 - type: 'color'  
154 - },  
155 - require: true,  
156 - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?  
157 - },  
158 - borderColor: {  
159 - type: 'a-input', // lbs-color-picker  
160 - label: '边框颜色',  
161 - prop: {  
162 - type: 'color'  
163 - },  
164 - require: true,  
165 - defaultPropValue: '#eeeeee'  
166 - },  
167 - borderWidth: {  
168 - type: 'a-input-number',  
169 - label: '边框宽度(px)',  
170 - require: true,  
171 - prop: {  
172 - step: 1,  
173 - min: 1,  
174 - max: 10  
175 - },  
176 - defaultPropValue: 1  
177 - },  
178 - borderRadius: {  
179 - type: 'a-input-number',  
180 - label: '圆角(px)',  
181 - require: true,  
182 - prop: {  
183 - step: 0.1,  
184 - min: 0,  
185 - max: 10  
186 - },  
187 - defaultPropValue: 0  
188 - },  
189 - lineHeight: {  
190 - type: 'a-input-number',  
191 - label: '行高',  
192 - require: true,  
193 - prop: {  
194 - step: 0.1,  
195 - min: 0.1,  
196 - max: 10  
197 - },  
198 - defaultPropValue: 1  
199 - },  
200 - textAlign: {  
201 - /**  
202 - * #!en: you can also config type like below:  
203 - * #!zh: 可以直接这样写：  
204 - textAlign: {  
205 - type: component(component definition json/自定义的组件，比如下面的 components[''lbs-text-align'])  
206 - }  
207 -  
208 - * more explanation  
209 - textAlign: {  
210 - type: {  
211 - render() {},  
212 - props: {},  
213 - methods: {},  
214 - }  
215 - }  
216 - * #!en: reference: how to judge the tag is custom component or a HTML element in React or Vue?  
217 - * !#zh:  
218 - * 思路来源：  
219 - * React 中 深入JSX 中，如何判断 h(tag) 中的 tag 是自定义组件还是普通 HTML 元素呢？React 是判断该 tag 是否为 function 来实现的  
220 - * Vue 中的自定义组件 是一个普通的 JSON 对象，最后自定义组件被转换成了函数，输入是 JSON 输出是 函数，可以看看 Vue 中 createElement 也就是 h 的实现·  
221 - * 参见：http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/  
222 - */  
223 - type: 'lbs-text-align',  
224 - label: '文字对齐',  
225 - require: true,  
226 - defaultPropValue: 'center'  
227 - }  
228 - },  
229 components: { 76 components: {
230 'lbs-text-align': LbpTextAlign, 77 'lbs-text-align': LbpTextAlign,
231 'lbs-select-input-type': { 78 'lbs-select-input-type': {
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
  View file @f809cdf
@@ -21,15 +21,38 @@ export default { @@ -21,15 +21,38 @@ export default {
21 props: { 21 props: {
22 aliasName: { 22 aliasName: {
23 type: String, 23 type: String,
24 - default: `标题演示-${genUUID().slice(0, 6)}` 24 + default: `标题演示-${genUUID().slice(0, 6)}`,
  25 + editor: {
  26 + type: 'a-input',
  27 + label: '填写标题',
  28 + require: true
  29 + }
25 }, 30 },
26 items: { 31 items: {
27 type: Array, 32 type: Array,
28 - default: () => defaultItems 33 + default: () => defaultItems,
  34 + editor: {
  35 + type: 'lbs-form-radio-items-editor',
  36 + label: '选项列表',
  37 + require: true,
  38 + defaultPropValue: defaultItems
  39 + }
29 }, 40 },
30 type: { 41 type: {
31 type: String, 42 type: String,
32 - default: 'checkbox' 43 + default: 'checkbox',
  44 + editor: {
  45 + type: 'a-radio-group',
  46 + label: '选择模式',
  47 + require: true,
  48 + prop: {
  49 + options: [
  50 + { label: '单选', value: 'radio' },
  51 + { label: '多选', value: 'checkbox' }
  52 + ],
  53 + name: 'mode'
  54 + }
  55 + }
33 } 56 }
34 }, 57 },
35 data () { 58 data () {
@@ -54,33 +77,6 @@ export default { @@ -54,33 +77,6 @@ export default {
54 } 77 }
55 }, 78 },
56 editorConfig: { 79 editorConfig: {
57 - propsConfig: {  
58 - items: {  
59 - type: 'lbs-form-radio-items-editor',  
60 - label: '选项列表',  
61 - require: true,  
62 - defaultPropValue: defaultItems  
63 - },  
64 - aliasName: {  
65 - type: 'a-input',  
66 - label: '填写标题',  
67 - require: true,  
68 - defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`  
69 - },  
70 - type: {  
71 - type: 'a-radio-group',  
72 - label: '选择模式',  
73 - require: true,  
74 - prop: {  
75 - options: [  
76 - { label: '单选', value: 'radio' },  
77 - { label: '多选', value: 'checkbox' }  
78 - ],  
79 - name: 'mode'  
80 - },  
81 - defaultPropValue: 'checkbox'  
82 - }  
83 - },  
84 components: { 80 components: {
85 'lbs-form-radio-items-editor': { 81 'lbs-form-radio-items-editor': {
86 render () { 82 render () {
front-end/h5/src/components/plugins/lbp-form-input.js
  View file @f809cdf
1 import LbpTextAlign from '@luban-h5/lbs-text-align' 1 import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +import commonProps from './common/props.js'
2 3
3 export default { 4 export default {
4 name: 'lbp-form-input', 5 name: 'lbp-form-input',
@@ -33,145 +34,29 @@ export default { @@ -33,145 +34,29 @@ export default {
33 }, 34 },
34 type: { 35 type: {
35 type: String, 36 type: String,
36 - default: 'text'  
37 - },  
38 - placeholder: {  
39 - type: String,  
40 - default: '姓名'  
41 - },  
42 - required: {  
43 - type: Boolean,  
44 - default: false 37 + default: 'text',
  38 + editor: {
  39 + type: 'lbs-select-input-type',
  40 + label: '类型',
  41 + defaultPropValue: 'text'
  42 + }
45 }, 43 },
46 disabled: { 44 disabled: {
47 type: Boolean, 45 type: Boolean,
48 default: false 46 default: false
49 }, 47 },
50 - backgroundColor: {  
51 - type: String,  
52 - default: 'transparent'  
53 - },  
54 - color: {  
55 - type: String,  
56 - default: 'black'  
57 - },  
58 - fontSize: {  
59 - type: Number,  
60 - default: 14  
61 - },  
62 - lineHeight: {  
63 - type: Number,  
64 - default: 1  
65 - },  
66 - borderWidth: {  
67 - type: Number,  
68 - default: 1  
69 - },  
70 - borderRadius: {  
71 - type: Number,  
72 - default: 0  
73 - },  
74 - borderColor: {  
75 - type: String,  
76 - default: '#ced4da'  
77 - },  
78 - textAlign: {  
79 - type: String,  
80 - default: 'left'  
81 - } 48 + // type: commonProps.type,
  49 + placeholder: commonProps.placeholder('姓名'),
  50 + fontSize: commonProps.fontSize,
  51 + color: commonProps.color,
  52 + backgroundColor: commonProps.backgroundColor,
  53 + borderColor: commonProps.borderColor,
  54 + borderWidth: commonProps.borderWidth,
  55 + borderRadius: commonProps.borderRadius,
  56 + lineHeight: commonProps.lineHeight,
  57 + textAlign: commonProps.textAlign({ defaultValue: 'left' })
82 }, 58 },
83 editorConfig: { 59 editorConfig: {
84 - propsConfig: {  
85 - type: {  
86 - type: 'lbs-select-input-type',  
87 - label: '类型',  
88 - defaultPropValue: 'text'  
89 - },  
90 - placeholder: {  
91 - type: 'a-input',  
92 - label: '提示文字',  
93 - require: true,  
94 - defaultPropValue: '姓名'  
95 - },  
96 - fontSize: {  
97 - type: 'a-input-number',  
98 - label: '字号(px)',  
99 - require: true,  
100 - prop: {  
101 - step: 1,  
102 - min: 12,  
103 - max: 144  
104 - },  
105 - defaultPropValue: 14  
106 - },  
107 - color: {  
108 - type: 'a-input',  
109 - label: '文字颜色',  
110 - // !#zh 为编辑组件指定 prop  
111 - prop: {  
112 - type: 'color'  
113 - },  
114 - require: true,  
115 - defaultPropValue: 'black'  
116 - },  
117 - backgroundColor: {  
118 - type: 'a-input', // lbs-color-picker  
119 - label: '背景颜色',  
120 - prop: {  
121 - type: 'color'  
122 - },  
123 - require: true,  
124 - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?  
125 - },  
126 - borderColor: {  
127 - type: 'a-input', // lbs-color-picker  
128 - label: '边框颜色',  
129 - prop: {  
130 - type: 'color'  
131 - },  
132 - require: true,  
133 - defaultPropValue: '#eeeeee'  
134 - },  
135 - borderWidth: {  
136 - type: 'a-input-number',  
137 - label: '边框宽度(px)',  
138 - require: true,  
139 - prop: {  
140 - step: 1,  
141 - min: 1,  
142 - max: 10  
143 - },  
144 - defaultPropValue: 1  
145 - },  
146 - borderRadius: {  
147 - type: 'a-input-number',  
148 - label: '圆角(px)',  
149 - require: true,  
150 - prop: {  
151 - step: 0.1,  
152 - min: 0,  
153 - max: 10  
154 - },  
155 - defaultPropValue: 0  
156 - },  
157 - lineHeight: {  
158 - type: 'a-input-number',  
159 - label: '行高',  
160 - require: true,  
161 - prop: {  
162 - step: 0.1,  
163 - min: 0.1,  
164 - max: 10  
165 - },  
166 - defaultPropValue: 1  
167 - },  
168 - textAlign: {  
169 - type: 'lbs-text-align',  
170 - label: '文字对齐',  
171 - require: true,  
172 - defaultPropValue: 'left'  
173 - }  
174 - },  
175 components: { 60 components: {
176 'lbs-text-align': LbpTextAlign, 61 'lbs-text-align': LbpTextAlign,
177 'lbs-select-input-type': { 62 'lbs-select-input-type': {
front-end/h5/src/components/plugins/lbp-form-radio-group.js
  View file @f809cdf
@@ -18,15 +18,38 @@ export default { @@ -18,15 +18,38 @@ export default {
18 props: { 18 props: {
19 aliasName: { 19 aliasName: {
20 type: String, 20 type: String,
21 - default: `标题演示-${genUUID().slice(0, 6)}` 21 + default: `标题演示-${genUUID().slice(0, 6)}`,
  22 + editor: {
  23 + type: 'a-input',
  24 + label: '填写标题',
  25 + require: true
  26 + }
22 }, 27 },
23 items: { 28 items: {
24 type: Array, 29 type: Array,
25 - default: () => defaultItems 30 + default: () => defaultItems,
  31 + editor: {
  32 + type: 'lbs-form-radio-items-editor',
  33 + label: '选项列表',
  34 + require: true,
  35 + defaultPropValue: defaultItems
  36 + }
26 }, 37 },
27 type: { 38 type: {
28 type: String, 39 type: String,
29 - default: 'radio' 40 + default: 'radio',
  41 + editor: {
  42 + type: 'a-radio-group',
  43 + label: '选择模式',
  44 + require: true,
  45 + prop: {
  46 + options: [
  47 + { label: '单选', value: 'radio' },
  48 + { label: '多选', value: 'checkbox' }
  49 + ],
  50 + name: 'mode'
  51 + }
  52 + }
30 } 53 }
31 }, 54 },
32 data () { 55 data () {
@@ -51,33 +74,6 @@ export default { @@ -51,33 +74,6 @@ export default {
51 } 74 }
52 }, 75 },
53 editorConfig: { 76 editorConfig: {
54 - propsConfig: {  
55 - items: {  
56 - type: 'lbs-form-radio-items-editor',  
57 - label: '选项列表',  
58 - require: true,  
59 - defaultPropValue: defaultItems  
60 - },  
61 - aliasName: {  
62 - type: 'a-input',  
63 - label: '填写标题',  
64 - require: true,  
65 - defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`  
66 - },  
67 - type: {  
68 - type: 'a-radio-group',  
69 - label: '选择模式',  
70 - require: true,  
71 - prop: {  
72 - options: [  
73 - { label: '单选', value: 'radio' },  
74 - { label: '多选', value: 'checkbox' }  
75 - ],  
76 - name: 'mode'  
77 - },  
78 - defaultPropValue: 'radio'  
79 - }  
80 - },  
81 components: { 77 components: {
82 'lbs-form-radio-items-editor': { 78 'lbs-form-radio-items-editor': {
83 render () { 79 render () {
front-end/h5/src/components/plugins/lbp-form-radio.js
  View file @f809cdf
1 import './styles/radio.scss' 1 import './styles/radio.scss'
2 import commonProps from './common/props.js' 2 import commonProps from './common/props.js'
3 -import editorConfigForProps from './common/editor-config-for-configurable-props.js'  
4 import { genUUID } from '../../utils/element.js' 3 import { genUUID } from '../../utils/element.js'
5 4
6 export default { 5 export default {
@@ -36,11 +35,6 @@ export default { @@ -36,11 +35,6 @@ export default {
36 default: () => {} 35 default: () => {}
37 } 36 }
38 }, 37 },
39 - editorConfig: {  
40 - propsConfig: {  
41 - ...editorConfigForProps  
42 - }  
43 - },  
44 methods: { 38 methods: {
45 handleChange (e) { 39 handleChange (e) {
46 if (this.disabled) return 40 if (this.disabled) return
@@ -49,42 +43,14 @@ export default { @@ -49,42 +43,14 @@ export default {
49 }, 43 },
50 render () { 44 render () {
51 const { 45 const {
52 - // color,  
53 - // textAlign,  
54 - // backgroundColor,  
55 - // fontSize,  
56 - // lineHeight,  
57 - // borderColor,  
58 - // borderRadius,  
59 - // borderWidth,  
60 aliasName, 46 aliasName,
61 - // id,  
62 type, 47 type,
63 - // readOnly, // ?  
64 disabled, 48 disabled,
65 - // tabIndex, // ?  
66 checked, 49 checked,
67 - // autoFocus,  
68 value 50 value
69 - // vertical  
70 } = this 51 } = this
71 52
72 const uuid = +new Date() + genUUID() 53 const uuid = +new Date() + genUUID()
73 -  
74 - // const style = {  
75 - // color,  
76 - // textAlign,  
77 - // backgroundColor,  
78 - // fontSize: fontSize,  
79 - // lineHeight: lineHeight + 'em',  
80 - // borderColor,  
81 - // borderRadius: borderRadius + 'px',  
82 - // borderWidth: borderWidth + 'px',  
83 - // textDecoration: 'none',  
84 - // display: vertical ? 'block' : 'inline-block'  
85 - // }  
86 -  
87 - // const checkedClass = checked && 'is-checked'  
88 return ( 54 return (
89 <div class={['lbp-' + this.type + '-wrapper', 'lbp-rc-wrapper']}> 55 <div class={['lbp-' + this.type + '-wrapper', 'lbp-rc-wrapper']}>
90 <span class="tag">{value}</span> 56 <span class="tag">{value}</span>
@@ -92,56 +58,24 @@ export default { @@ -92,56 +58,24 @@ export default {
92 class={['lbp-' + this.type, 'lbp-rc-input']} 58 class={['lbp-' + this.type, 'lbp-rc-input']}
93 name={aliasName} 59 name={aliasName}
94 id={uuid} 60 id={uuid}
95 - // id={id}  
96 type={type} 61 type={type}
97 ref="input" 62 ref="input"
98 value={value} 63 value={value}
99 disabled={disabled} 64 disabled={disabled}
100 checked={!!checked} 65 checked={!!checked}
101 onChange={this.handleChange} 66 onChange={this.handleChange}
102 - // readOnly={readOnly}  
103 - // tabIndex={tabIndex}  
104 - // className={`${prefixCls}-input`}  
105 - // onClick={this.onClick}  
106 - // onFocus={this.onFocus}  
107 - // onBlur={this.onBlur}  
108 - // onInput={this.onInput}  
109 - // autoFocus={autoFocus}  
110 - // data-type="lbp-form-input"  
111 - // {...globalProps} 67 + // readOnly={readOnly}
  68 + // tabIndex={tabIndex}
  69 + // className={`${prefixCls}-input`}
  70 + // onClick={this.onClick}
  71 + // onFocus={this.onFocus}
  72 + // onBlur={this.onBlur}
  73 + // onInput={this.onInput}
  74 + // autoFocus={autoFocus}
  75 + // data-type="lbp-form-input"
112 /> 76 />
113 - {/* <input type="checkbox" id="checkbox-1-1" class="lbp-checkbox" /> */}  
114 - {/* <label for="checkbox-1-1"></label> */}  
115 <label for={uuid}></label> 77 <label for={uuid}></label>
116 </div> 78 </div>
117 - // <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">  
118 - // <span class={'lbp-radio__input ' + checkedClass}>  
119 - // <span class="lbp-radio__inner"></span>  
120 - // {checked + ''}  
121 - // <input  
122 - // class="lbp-radio__original"  
123 - // name={aliasName}  
124 - // id={id}  
125 - // type={type}  
126 - // ref="input"  
127 - // value={value}  
128 - // disabled={disabled}  
129 - // checked={!!checked}  
130 - // onChange={this.handleChange}  
131 - // // readOnly={readOnly}  
132 - // // tabIndex={tabIndex}  
133 - // // className={`${prefixCls}-input`}  
134 - // // onClick={this.onClick}  
135 - // // onFocus={this.onFocus}  
136 - // // onBlur={this.onBlur}  
137 - // // onInput={this.onInput}  
138 - // // autoFocus={autoFocus}  
139 - // // data-type="lbp-form-input"  
140 - // // {...globalProps}  
141 - // />  
142 - // <span class="lbp-radio__label"><slot>{value}</slot></span>  
143 - // </span>  
144 - // </label>  
145 ) 79 )
146 } 80 }
147 } 81 }
front-end/h5/src/components/plugins/lbp-picture.js
  View file @f809cdf
@@ -8,15 +8,8 @@ export default { @@ -8,15 +8,8 @@ export default {
8 props: { 8 props: {
9 imgSrc: { 9 imgSrc: {
10 type: String, 10 type: String,
11 - default: placeholderImg  
12 - }  
13 - },  
14 - data: () => ({  
15 - placeholderImg  
16 - }),  
17 - editorConfig: {  
18 - propsConfig: {  
19 - imgSrc: { 11 + default: placeholderImg,
  12 + editor: {
20 type: 'image-gallery', 13 type: 'image-gallery',
21 label: '图片url', 14 label: '图片url',
22 prop: { 15 prop: {
@@ -24,7 +17,12 @@ export default { @@ -24,7 +17,12 @@ export default {
24 }, 17 },
25 defaultPropValue: '' 18 defaultPropValue: ''
26 } 19 }
27 - }, 20 + }
  21 + },
  22 + data: () => ({
  23 + placeholderImg
  24 + }),
  25 + editorConfig: {
28 components: { 26 components: {
29 'image-gallery': ImageGallery 27 'image-gallery': ImageGallery
30 } 28 }
front-end/h5/src/components/plugins/lbp-slide.js
  View file @f809cdf
@@ -24,11 +24,23 @@ export default { @@ -24,11 +24,23 @@ export default {
24 props: { 24 props: {
25 interval: { 25 interval: {
26 type: Number, 26 type: Number,
27 - default: 4000 27 + default: 4000,
  28 + editor: {
  29 + type: 'a-input-number',
  30 + label: '间隔时间',
  31 + require: true,
  32 + defaultPropValue: 4000
  33 + }
28 }, 34 },
29 dataSource: { 35 dataSource: {
30 type: Object, 36 type: Object,
31 - default: () => getDefaultDataSource() 37 + default: () => getDefaultDataSource(),
  38 + editor: {
  39 + type: 'lbs-slide-items-editor',
  40 + label: '图片列表',
  41 + require: true,
  42 + defaultPropValue: getDefaultDataSource()
  43 + }
32 }, 44 },
33 editorMode: { 45 editorMode: {
34 type: String, 46 type: String,
@@ -40,20 +52,6 @@ export default { @@ -40,20 +52,6 @@ export default {
40 } 52 }
41 }, 53 },
42 editorConfig: { 54 editorConfig: {
43 - propsConfig: {  
44 - interval: {  
45 - type: 'a-input-number',  
46 - label: '间隔时间',  
47 - require: true,  
48 - defaultPropValue: 4000  
49 - },  
50 - dataSource: {  
51 - type: 'lbs-slide-items-editor',  
52 - label: '图片列表',  
53 - require: true,  
54 - defaultPropValue: getDefaultDataSource()  
55 - }  
56 - },  
57 components: { 55 components: {
58 'lbs-slide-items-editor': { 56 'lbs-slide-items-editor': {
59 render () { 57 render () {
front-end/h5/src/components/plugins/lbp-video.js
  View file @f809cdf
@@ -7,7 +7,18 @@ export default { @@ -7,7 +7,18 @@ export default {
7 props: { 7 props: {
8 src: { 8 src: {
9 type: String, 9 type: String,
10 - default: `` 10 + default: ``,
  11 + editor: {
  12 + type: 'a-input',
  13 + label: '视频url',
  14 + prop: {
  15 + type: 'textarea'
  16 + },
  17 + extra: (h) => {
  18 + return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>
  19 + },
  20 + defaultPropValue: ''
  21 + }
11 }, 22 },
12 disabled: { 23 disabled: {
13 type: Boolean, 24 type: Boolean,
@@ -42,19 +53,6 @@ export default { @@ -42,19 +53,6 @@ export default {
42 ) 53 )
43 }, 54 },
44 editorConfig: { 55 editorConfig: {
45 - propsConfig: {  
46 - src: {  
47 - type: 'a-input',  
48 - label: '视频url',  
49 - prop: {  
50 - type: 'textarea'  
51 - },  
52 - extra: (h) => {  
53 - return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>  
54 - },  
55 - defaultPropValue: ''  
56 - }  
57 - },  
58 components: { 56 components: {
59 } 57 }
60 } 58 }
front-end/h5/src/mixins/load-plugins.js
  View file @f809cdf
1 import Vue from 'vue' 1 import Vue from 'vue'
2 // import LbpButton from '@luban-h5/lbc-button' 2 // import LbpButton from '@luban-h5/lbc-button'
3 import LbpButton from '../components/plugins/lbp-button' 3 import LbpButton from '../components/plugins/lbp-button'
4 -// import LbpPicture from '../components/plugins/lbp-picture'  
5 -// import LbpVideo from '../components/plugins/lbp-video' 4 +import LbpPicture from '../components/plugins/lbp-picture'
  5 +import LbpVideo from '../components/plugins/lbp-video'
6 import LbpText from '../components/plugins/lbp-text' 6 import LbpText from '../components/plugins/lbp-text'
7 -// import LbpFormInput from '../components/plugins/lbp-form-input'  
8 -// import LbpFormButton from '../components/plugins/lbp-form-button'  
9 -// import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'  
10 -// import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group' 7 +import LbpFormInput from '../components/plugins/lbp-form-input'
  8 +import LbpFormButton from '../components/plugins/lbp-form-button'
  9 +import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
  10 +import LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
11 import LbpBackground from '../components/plugins/lbp-background' 11 import LbpBackground from '../components/plugins/lbp-background'
12 -// import LbpSlide from '../components/plugins/lbp-slide' 12 +import LbpSlide from '../components/plugins/lbp-slide'
13 13
14 export const pluginsList = [ 14 export const pluginsList = [
15 - // {  
16 - // title: '图片',  
17 - // i18nTitle: {  
18 - // 'en-US': 'Picture',  
19 - // 'zh-CN': '图片'  
20 - // },  
21 - // icon: 'photo',  
22 - // component: LbpPicture,  
23 - // visible: true,  
24 - // name: LbpPicture.name  
25 - // }, 15 + {
  16 + title: '图片',
  17 + i18nTitle: {
  18 + 'en-US': 'Picture',
  19 + 'zh-CN': '图片'
  20 + },
  21 + icon: 'photo',
  22 + component: LbpPicture,
  23 + visible: true,
  24 + name: LbpPicture.name
  25 + },
26 { 26 {
27 i18nTitle: { 27 i18nTitle: {
28 'en-US': 'Text', 28 'en-US': 'Text',
@@ -45,99 +45,85 @@ export const pluginsList = [ @@ -45,99 +45,85 @@ export const pluginsList = [
45 visible: true, 45 visible: true,
46 name: LbpButton.name 46 name: LbpButton.name
47 }, 47 },
48 - // {  
49 - // i18nTitle: {  
50 - // 'en-US': 'Carousel',  
51 - // 'zh-CN': '轮播图'  
52 - // },  
53 - // title: '轮播图',  
54 - // icon: 'photo',  
55 - // component: LbpSlide,  
56 - // visible: true,  
57 - // name: LbpSlide.name  
58 - // // disabled: true  
59 - // },  
60 - // {  
61 - // i18nTitle: {  
62 - // 'en-US': 'Map',  
63 - // 'zh-CN': '地图'  
64 - // },  
65 - // title: '地图',  
66 - // icon: 'map-o',  
67 - // component: LbpFormRadioGroup,  
68 - // visible: true,  
69 - // name: LbpFormRadioGroup.name,  
70 - // disabled: true  
71 - // },  
72 - // {  
73 - // i18nTitle: {  
74 - // 'en-US': 'Video',  
75 - // 'zh-CN': '视频'  
76 - // },  
77 - // title: '视频',  
78 - // icon: 'file-video-o',  
79 - // component: LbpVideo,  
80 - // visible: true,  
81 - // name: LbpVideo.name  
82 - // },  
83 - // // {  
84 - // // title: '视频',  
85 - // // icon: 'play-circle-o',  
86 - // // component: LbpVideo,  
87 - // // visible: true,  
88 - // // name: LbpVideo.name  
89 - // // },  
90 - // {  
91 - // i18nTitle: {  
92 - // 'en-US': 'Form Input',  
93 - // 'zh-CN': '表单输入'  
94 - // },  
95 - // title: '表单输入',  
96 - // icon: 'pencil-square-o',  
97 - // component: LbpFormInput,  
98 - // visible: true,  
99 - // name: LbpFormInput.name  
100 - // },  
101 - // {  
102 - // i18nTitle: {  
103 - // 'en-US': 'Form Submit',  
104 - // 'zh-CN': '表单提交'  
105 - // },  
106 - // title: '表单提交',  
107 - // icon: 'hand-pointer-o',  
108 - // component: LbpFormButton,  
109 - // visible: true,  
110 - // name: LbpFormButton.name  
111 - // },  
112 - // // {  
113 - // // title: '表单单选',  
114 - // // icon: 'hand-pointer-o',  
115 - // // component: LbpFormRadio,  
116 - // // visible: true,  
117 - // // name: LbpFormRadio.name  
118 - // // },  
119 - // {  
120 - // i18nTitle: {  
121 - // 'en-US': 'Form Checkbox',  
122 - // 'zh-CN': '表单多选'  
123 - // },  
124 - // title: '表单多选',  
125 - // icon: 'check-square-o',  
126 - // component: LbpFormCheckboxGroup,  
127 - // visible: true,  
128 - // name: LbpFormCheckboxGroup.name  
129 - // },  
130 - // {  
131 - // i18nTitle: {  
132 - // 'en-US': 'Form Radio',  
133 - // 'zh-CN': '表单单选'  
134 - // },  
135 - // title: '表单单选',  
136 - // icon: 'dot-circle-o',  
137 - // component: LbpFormRadioGroup,  
138 - // visible: true,  
139 - // name: LbpFormRadioGroup.name  
140 - // }, 48 + {
  49 + i18nTitle: {
  50 + 'en-US': 'Carousel',
  51 + 'zh-CN': '轮播图'
  52 + },
  53 + title: '轮播图',
  54 + icon: 'photo',
  55 + component: LbpSlide,
  56 + visible: true,
  57 + name: LbpSlide.name
  58 + // disabled: true
  59 + },
  60 + {
  61 + i18nTitle: {
  62 + 'en-US': 'Map',
  63 + 'zh-CN': '地图'
  64 + },
  65 + title: '地图',
  66 + icon: 'map-o',
  67 + component: LbpFormRadioGroup,
  68 + visible: true,
  69 + name: LbpFormRadioGroup.name,
  70 + disabled: true
  71 + },
  72 + {
  73 + i18nTitle: {
  74 + 'en-US': 'Video',
  75 + 'zh-CN': '视频'
  76 + },
  77 + title: '视频',
  78 + icon: 'file-video-o',
  79 + component: LbpVideo,
  80 + visible: true,
  81 + name: LbpVideo.name
  82 + },
  83 + {
  84 + i18nTitle: {
  85 + 'en-US': 'Form Input',
  86 + 'zh-CN': '表单输入'
  87 + },
  88 + title: '表单输入',
  89 + icon: 'pencil-square-o',
  90 + component: LbpFormInput,
  91 + visible: true,
  92 + name: LbpFormInput.name
  93 + },
  94 + {
  95 + i18nTitle: {
  96 + 'en-US': 'Form Submit',
  97 + 'zh-CN': '表单提交'
  98 + },
  99 + title: '表单提交',
  100 + icon: 'hand-pointer-o',
  101 + component: LbpFormButton,
  102 + visible: true,
  103 + name: LbpFormButton.name
  104 + },
  105 + {
  106 + i18nTitle: {
  107 + 'en-US': 'Form Checkbox',
  108 + 'zh-CN': '表单多选'
  109 + },
  110 + title: '表单多选',
  111 + icon: 'check-square-o',
  112 + component: LbpFormCheckboxGroup,
  113 + visible: true,
  114 + name: LbpFormCheckboxGroup.name
  115 + },
  116 + {
  117 + i18nTitle: {
  118 + 'en-US': 'Form Radio',
  119 + 'zh-CN': '表单单选'
  120 + },
  121 + title: '表单单选',
  122 + icon: 'dot-circle-o',
  123 + component: LbpFormRadioGroup,
  124 + visible: true,
  125 + name: LbpFormRadioGroup.name
  126 + },
141 { 127 {
142 i18nTitle: { 128 i18nTitle: {
143 'en-US': 'Background', 129 'en-US': 'Background',