forked from thomasbertet/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSelectionControlsView.vue
executable file
·150 lines (145 loc) · 4.77 KB
/
SelectionControlsView.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template lang="pug">
component-view(v-bind:doc="doc")
</template>
<script>
export default {
data () {
return {
test: [],
test2: false,
doc: {
title: 'Selection controls',
component: 'selectioncontrols',
edit: 'SelectionControlsView',
desc: 'Selection control components allow a user to select options. These components <strong>must</strong> be used with the <code>v-model</code> prop as they do not maintain their own state.',
examples: [
{ header: "Checkboxes - Boolean", file: "selection-controls/1", desc: '' },
{ header: "Checkboxes - Array", file: "selection-controls/2", desc: '' },
{ header: "Checkboxes - States", file: "selection-controls/3", desc: '' },
{ header: "Checkboxes - Colors", file: "selection-controls/4", desc: 'Checkboxes can be colored by using any of the builtin colors and contextual names using the color prop.' },
{ header: "Radios - Default", file: "selection-controls/5", desc: '' },
{ header: "Radios - States", file: "selection-controls/6", desc: '' },
{ header: "Radios - Colors", file: "selection-controls/7", desc: 'Radios can be colored by using any of the builtin colors and contextual names using the color prop.' },
{ header: "Switches - Boolean", file: "selection-controls/8", desc: '' },
{ header: "Switches - Array", file: "selection-controls/9", desc: '' },
{ header: "Switches - States", file: "selection-controls/10", desc: '' },
{ header: "Switches - Colors", file: "selection-controls/11", desc: 'Switches can be colored by using any of the builtin colors and contextual names using the color prop.' },
],
props: {
'v-checkbox': {
shared: ['colorable', 'input'],
params: [
[
'input-value',
'Array, Boolean, String',
'-',
'Sets possible input values'
],
[
'true-value',
'String',
'-',
'Sets value for truthy state'
],
[
'false-value',
'String',
'-',
'Sets value for falsy state'
],
[
'indeterminate',
'Boolean',
'False',
'Sets an indeterminate state for the checkbox'
],
],
model: {
type: '*',
default: 'None',
description: 'Current input value'
}
},
'v-radio': {
shared: ['colorable', 'input'],
params: [
[
'input-value',
'String, Number',
'-',
'Sets the radio current input value'
]
],
model: {
type: '*',
default: 'None',
description: 'Current radio value'
}
},
'v-switch': {
shared: ['colorable', 'input'],
params: [
[
'input-value',
'Array, Boolean, String',
'-',
'Sets possible input values'
],
[
'true-value',
'String',
'-',
'Sets value for truthy state'
],
[
'false-value',
'String',
'-',
'Sets value for falsy state'
],
],
model: {
type: '*',
default: 'None',
description: 'Current switch value'
}
}
},
slots: {
'v-checkbox': {
shared: ['label']
},
'v-radio': {
shared: ['label']
},
'v-switch': {
shared: ['label']
}
},
events: {
'v-radio': {
params: [
['change', 'String, Number', 'Input value changed.']
]
},
}
}
}
},
}
</script>
<style lang="stylus">
#selection-controls-view
.component-example
table
tr
border-bottom: none !important
height: 75px
&:hover
background: transparent !important
td, th
text-align: center
td
.input-group
justify-content: center
</style>