Skip to content

Commit cdc3d2a

Browse files
dolymooddolymood
authored
Support Upload & Radio (#74)
* support radio component * support upload component * upgrade checkbox-group component
1 parent 35248d0 commit cdc3d2a

File tree

35 files changed

+2345
-47
lines changed

35 files changed

+2345
-47
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
build/*.js
22
config/*.js
3+
example/modules/*.js

‎.eslintrc.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
module.exports = {
2-
root: true,
3-
parser: 'babel-eslint',
4-
parserOptions: {
5-
sourceType: 'module'
6-
},
7-
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
8-
extends: 'standard',
9-
// required to lint *.vue files
10-
plugins: [
11-
'html'
12-
],
13-
// add your custom rules here
14-
'rules': {
15-
// allow paren-less arrow functions
16-
'arrow-parens': 0,
17-
// allow async-await
18-
'generator-star-spacing': 0,
19-
// allow debugger during development
20-
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
21-
'no-tabs': 0,
22-
'space-before-function-paren': 0
23-
}
2+
root: true,
3+
parser: 'babel-eslint',
4+
parserOptions: {
5+
sourceType: 'module'
6+
},
7+
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
8+
extends: 'standard',
9+
// required to lint *.vue files
10+
plugins: [
11+
'html'
12+
],
13+
// add your custom rules here
14+
'rules': {
15+
// allow paren-less arrow functions
16+
'arrow-parens': 0,
17+
// allow async-await
18+
'generator-star-spacing': 0,
19+
// allow debugger during development
20+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
21+
'no-tabs': 0,
22+
'space-before-function-paren': 0
23+
}
2424
}

‎document/common/config/menu.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"button": "Button",
2020
"checkbox": "Checkbox",
2121
"checkbox-group": "CheckboxGroup",
22+
"radio": "Radio",
2223
"loading": "Loading",
2324
"tip": "Tip"
2425
}
@@ -42,6 +43,12 @@
4243
"slide": "Slide",
4344
"index-list": "IndexList"
4445
}
46+
},
47+
"advanced": {
48+
"name": "Advanced",
49+
"subList": {
50+
"upload": "Upload"
51+
}
4552
}
4653
}
4754
},
@@ -74,6 +81,7 @@
7481
"button": "Button",
7582
"checkbox": "Checkbox",
7683
"checkbox-group": "CheckboxGroup",
84+
"radio": "Radio",
7785
"loading": "Loading",
7886
"tip": "Tip"
7987
}
@@ -97,6 +105,12 @@
97105
"slide": "Slide",
98106
"index-list": "IndexList"
99107
}
108+
},
109+
"advanced": {
110+
"name": "高级",
111+
"subList": {
112+
"upload": "Upload"
113+
}
100114
}
101115
}
102116
},

‎document/components/docs/en-US/checkbox-group.md‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,43 @@
2727

2828
The value of `checkList` is an array, which represents the set of the values of `label` in selected checkboxs.
2929

30+
- Set options
31+
32+
Set options to generate checkboxes.
33+
34+
```html
35+
<cube-checkbox-group v-model="checkList" :options="options" />
36+
```
37+
```js
38+
export default {
39+
data() {
40+
return {
41+
checkList: ['1', '4'],
42+
options: [
43+
{
44+
label: 'Option1',
45+
value: '1'
46+
},
47+
{
48+
label: 'Option2',
49+
value: '2'
50+
},
51+
{
52+
label: 'Option3',
53+
value: '3',
54+
disabled: true
55+
},
56+
{
57+
label: 'Option4',
58+
value: '4',
59+
disabled: true
60+
}
61+
]
62+
}
63+
}
64+
}
65+
```
66+
3067
- Horizontal order
3168

3269
You can set `horizontal` to change the style to horizontal order.
@@ -45,9 +82,14 @@
4582
| Attribute | Description | Type | Accepted Values | Default |
4683
| - | - | - | - | - |
4784
| horizontal | whether in horizontal order | Boolean | true/false | false |
85+
| options | array of checkbox options | Array | - | - |
4886

49-
### Events
87+
* `options` sub configuration
5088

51-
| Event Name | Description | Parameters |
89+
| Attribute | Description | Type |
5290
| - | - | - |
53-
| input | triggers when the selecting state in the group changes | the set of values of selected checkboxs, which type is Array |
91+
| label | label content | String |
92+
| value | checkbox item value | String/Number |
93+
| disabled | whether disabled | Boolean |
94+
95+
Note: each `options` item can be an string value, now both the`label` and `value` values are the string value.

‎document/components/docs/en-US/checkbox.md‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,5 @@
4949
| Attribute | Description | Type | Accepted Values | Default |
5050
| - | - | - | - | - |
5151
| disabled | whether disabled | Boolean | true/false | false |
52-
| position | position | String | left/right | left |
52+
| position | icon position | String | left/right | left |
5353
| label | if selected, then map the value to v-model | Boolean/String | - | '' |
54-
55-
### Events
56-
57-
| Event Name | Description | Parameters |
58-
| - | - | - |
59-
| input | triggers when the selecting state changes | the value of label if setted or boolean value which represents whether selected |
60-

‎document/components/docs/en-US/introduction.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ cube-ui is an elegant mobile component library based on Vue.js.
2727
- [Button](#/en-US/docs/button)
2828
- [Checkbox](#/en-US/docs/checkbox)
2929
- [CheckboxGroup](#/en-US/docs/checkbox-group)
30+
- [Radio](#/zh-CN/docs/radio)
3031
- [Loading](#/en-US/docs/loading)
3132
- [Tip](#/en-US/docs/tip)
3233

@@ -99,6 +100,10 @@ Pay attention that the name of the API is `$create` + `${component name}`. For e
99100

100101
Scroll Components are all implemented based on [better-scroll](https://github.com/ustbhuangyi/better-scroll) and `Scroll` Component is the encapsulation of better-scroll.
101102

103+
#### Advanced
104+
105+
- [Upload](#/en-US/docs/upload)
106+
102107
### Modules
103108

104109
cube-ui has some special modules besides components.

‎document/components/docs/en-US/radio.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
## Radio
2+
3+
Radio component. You could set the options and the position of the radio's icon.
4+
5+
### Example
6+
7+
- Basic usage
8+
9+
```html
10+
<cube-radio v-model="selected" :options="options" />
11+
```
12+
```js
13+
export default {
14+
data() {
15+
return {
16+
selected: '',
17+
options: ['Option1', 'Option2']
18+
}
19+
}
20+
}
21+
```
22+
23+
The value of `options` is an array. The default `selected` value is `''`, which means no option will be selected by defaut. If you clicked one radio option, the `selected` will be set as the value of this option.
24+
25+
- Configure the label, value, disabled state of options and the position of icon.
26+
27+
```html
28+
<cube-radio v-model="selected2" :options="options2" position="right" />
29+
```
30+
```js
31+
export default {
32+
data() {
33+
return {
34+
selected2: '3',
35+
options2: [
36+
{
37+
label: 'Option1',
38+
value: '1'
39+
},
40+
{
41+
label: 'Option2',
42+
value: '2'
43+
},
44+
{
45+
label: 'Option3',
46+
value: '3',
47+
disabled: true
48+
}
49+
]
50+
}
51+
}
52+
}
53+
```
54+
55+
The `options` value can be an array which has some object items. You can set `label` and `value` in each item, and use `disabled` to configure whether the radio item's state is disabled.
56+
57+
If the `position` is set as `'right'`, the radio's icon will be posited at the right of the label.
58+
59+
- Horizontal order
60+
61+
```html
62+
<cube-radio v-model="selected3" :options="options3" :horizontal="true" />
63+
```
64+
```js
65+
export default {
66+
data() {
67+
return {
68+
selected3: '3',
69+
options3: [
70+
{
71+
label: '1',
72+
value: '1'
73+
},
74+
{
75+
label: '2',
76+
value: '2'
77+
},
78+
{
79+
label: '3',
80+
value: '3',
81+
disabled: true
82+
}
83+
]
84+
}
85+
}
86+
}
87+
```
88+
89+
You can use `horizontal` to configure the style to horizontal layout.
90+
91+
### Props configuration
92+
93+
| Attribute | Description | Type | Accepted Values | Default |
94+
| - | - | - | - | - |
95+
| options | the array of radio options | Array | - | - |
96+
| position | icon position | String | left/right | left |
97+
| horizontal | whether use horizontal layout | Boolean | true/false | false |
98+
99+
* `options` sub configuration
100+
101+
| Attribute | Description | Type |
102+
| - | - | - |
103+
| label | the text of label | String |
104+
| value | the value of radio item | String/Number |
105+
| disabled | whether the item is disabled | Boolean |
106+
107+
Note: Each item of `options` can be an string, Which means both the `label` and `value` will be set as this string.

0 commit comments

Comments
 (0)