Skip to content

Commit ed75ec3

Browse files
KeiwenKeiwen
committed
feat: VUE-2 EnhancedCheck vue3
move demo
1 parent 3e403ed commit ed75ec3

File tree

7 files changed

+307
-657
lines changed

7 files changed

+307
-657
lines changed

‎demo/Demo.vue

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
<template>
2+
<div class="container">
3+
4+
<fieldset>
5+
<h1>Simple checkbox</h1>
6+
7+
<div class="playWith">
8+
<h2>Play with it</h2>
9+
<enhanced-check :label="sc_label" :subClass="sc_subclass" v-model="sc_model"
10+
:disabled="sc_disabled" :rounded="sc_rounded" :animate="sc_animate">
11+
12+
</enhanced-check>
13+
<br/>
14+
Model: {{ sc_model }}
15+
16+
<hr/>
17+
18+
<label for="sc_label">Label:</label>
19+
<input type="text" v-model="sc_label" id="sc_label"/>
20+
21+
<label for="sc_model">Checked:</label>
22+
<input type="checkbox" v-model="sc_model" id="sc_model"/>
23+
24+
<label for="sc_disabled">Disabled:</label>
25+
<input type="checkbox" v-model="sc_disabled" id="sc_disabled"/>
26+
27+
<label for="sc_rounded">Rounded:</label>
28+
<input type="checkbox" v-model="sc_rounded" id="sc_rounded"/>
29+
30+
<label for="sc_animate">Transition:</label>
31+
<input type="checkbox" v-model="sc_animate" id="sc_animate"/>
32+
33+
<label for="sc_subclass">Style:</label>
34+
<select v-model="sc_subclass" id="sc_subclass">
35+
<option value="default">Default</option>
36+
<option value="primary">Primary</option>
37+
<option value="success">Success</option>
38+
<option value="warning">Warning</option>
39+
<option value="danger">Danger</option>
40+
</select>
41+
</div>
42+
43+
<div class="gallery">
44+
<h2>Gallery</h2>
45+
<div class="half">
46+
<enhanced-check label="Basic" :checked="true"></enhanced-check>
47+
<enhanced-check label="Primary" subClass="primary" :checked="true"></enhanced-check>
48+
<enhanced-check label="Warning" subClass="warning" :checked="true"></enhanced-check>
49+
<enhanced-check label="Danger" subClass="danger" :checked="true"></enhanced-check>
50+
<enhanced-check label="Success" subClass="success" :checked="true"></enhanced-check>
51+
</div>
52+
<div class="half">
53+
<enhanced-check label="Basic" :checked="true" :rounded="true"></enhanced-check>
54+
<enhanced-check label="Primary" subClass="primary" :checked="true" :rounded="true"></enhanced-check>
55+
<enhanced-check label="Warning" subClass="warning" :checked="true" :rounded="true"></enhanced-check>
56+
<enhanced-check label="Danger" subClass="danger" :checked="true" :rounded="true"></enhanced-check>
57+
<enhanced-check label="Success" subClass="success" :checked="true" :rounded="true"></enhanced-check>
58+
</div>
59+
</div>
60+
61+
</fieldset>
62+
63+
<br/><br/>
64+
65+
<fieldset>
66+
<h1>Combined warning checkboxes</h1>
67+
68+
<div class="playWith">
69+
<h2>Play with it</h2>
70+
71+
<enhanced-check-group :label="['First', 'Second', 'Third']" :subClass="gc_subclass" v-model="gc_model"
72+
:disabled="gc_disabled" :rounded="gc_rounded" :animate="gc_animate"
73+
:inline="gc_inline" :combine="gc_combine" :value="[gc_val1, gc_val2, gc_val3]">
74+
75+
</enhanced-check-group>
76+
<br/>
77+
Model: {{ gc_model }}
78+
79+
<hr/>
80+
81+
<label for="gc_val1">Value first:</label>
82+
<input type="text" v-model="gc_val1" id="gc_val1"/>
83+
84+
<label for="gc_val2">Value second:</label>
85+
<input type="text" v-model="gc_val2" id="gc_val2"/>
86+
87+
<label for="gc_val3">Value third:</label>
88+
<input type="text" v-model="gc_val3" id="gc_val3"/>
89+
90+
<label for="gc_disabled">Disabled:</label>
91+
<input type="checkbox" v-model="gc_disabled" id="gc_disabled"/>
92+
93+
<label for="gc_rounded">Rounded:</label>
94+
<input type="checkbox" v-model="gc_rounded" id="gc_rounded"/>
95+
96+
<label for="gc_animate">Transition:</label>
97+
<input type="checkbox" v-model="gc_animate" id="gc_animate"/>
98+
99+
<label for="gc_inline">Inline:</label>
100+
<input type="checkbox" v-model="gc_inline" id="gc_inline"/>
101+
102+
<label for="gc_combine">Combine:</label>
103+
<input type="checkbox" v-model="gc_combine" id="gc_combine"/>
104+
105+
<label for="gc_subclass">Style:</label>
106+
<select v-model="gc_subclass" id="gc_subclass">
107+
<option value="default">Default</option>
108+
<option value="primary">Primary</option>
109+
<option value="success">Success</option>
110+
<option value="warning">Warning</option>
111+
<option value="danger">Danger</option>
112+
</select>
113+
</div>
114+
115+
</fieldset>
116+
117+
<br/><br/>
118+
119+
<fieldset>
120+
<h1>Radio success buttons</h1>
121+
122+
<div class="playWith">
123+
<h2>Play with it</h2>
124+
125+
<enhanced-check-radio :label="['Element A', 'Element B', 'Element C']" :subClass="rc_subclass" v-model="rc_model"
126+
:disabled="rc_disabled" :rounded="rc_rounded" :animate="rc_animate"
127+
:inline="rc_inline" :value="[rc_val1, rc_val2, rc_val3]">
128+
129+
</enhanced-check-radio>
130+
<br/>
131+
Model: {{ rc_model }}
132+
133+
<hr/>
134+
135+
<label for="rc_model">Model:</label>
136+
<input type="text" v-model="rc_model" id="rc_model"/>
137+
138+
<label for="rc_val1">Value first:</label>
139+
<input type="text" v-model="rc_val1" id="rc_val1"/>
140+
141+
<label for="rc_val2">Value second:</label>
142+
<input type="text" v-model="rc_val2" id="rc_val2"/>
143+
144+
<label for="rc_val3">Value third:</label>
145+
<input type="text" v-model="rc_val3" id="rc_val3"/>
146+
147+
<label for="rc_disabled">Disabled:</label>
148+
<input type="checkbox" v-model="rc_disabled" id="rc_disabled"/>
149+
150+
<label for="rc_rounded">Rounded:</label>
151+
<input type="checkbox" v-model="rc_rounded" id="rc_rounded"/>
152+
153+
<label for="rc_animate">Transition:</label>
154+
<input type="checkbox" v-model="rc_animate" id="rc_animate"/>
155+
156+
<label for="rc_inline">Inline:</label>
157+
<input type="checkbox" v-model="rc_inline" id="rc_inline"/>
158+
159+
<label for="rc_subclass">Style:</label>
160+
<select v-model="rc_subclass" id="rc_subclass">
161+
<option value="default">Default</option>
162+
<option value="primary">Primary</option>
163+
<option value="success">Success</option>
164+
<option value="warning">Warning</option>
165+
<option value="danger">Danger</option>
166+
</select>
167+
</div>
168+
169+
</fieldset>
170+
171+
<br/><br/>
172+
173+
<fieldset>
174+
<h1>Checkbox toggle</h1>
175+
176+
<div class="playWith">
177+
<h2>Play with it</h2>
178+
179+
<enhanced-toggle :labelOn="tc_labelOn" :labelOff="tc_labelOff" :styleOn="tc_styleOn" :styleOff="tc_styleOff" v-model="tc_model"
180+
:disabled="tc_disabled" :rounded="tc_rounded">
181+
182+
</enhanced-toggle>
183+
<br/>
184+
Model: {{ tc_model }}
185+
186+
<hr/>
187+
188+
<label for="tc_labelOn">Label on:</label>
189+
<input type="text" v-model="tc_labelOn" id="tc_labelOn"/>
190+
191+
<label for="tc_labelOff">Label off:</label>
192+
<input type="text" v-model="tc_labelOff" id="tc_labelOff"/>
193+
194+
<label for="tc_model">Checked:</label>
195+
<input type="checkbox" v-model="tc_model" id="tc_model"/>
196+
197+
<label for="tc_disabled">Disabled:</label>
198+
<input type="checkbox" v-model="tc_disabled" id="tc_disabled"/>
199+
200+
<label for="tc_rounded">Rounded:</label>
201+
<input type="checkbox" v-model="tc_rounded" id="tc_rounded"/>
202+
203+
<label for="tc_styleOn">Style on:</label>
204+
<select v-model="tc_styleOn" id="tc_styleOn">
205+
<option value="default">Default</option>
206+
<option value="primary">Primary</option>
207+
<option value="success">Success</option>
208+
<option value="warning">Warning</option>
209+
<option value="danger">Danger</option>
210+
</select>
211+
212+
<label for="tc_styleOff">Style off:</label>
213+
<select v-model="tc_styleOff" id="tc_styleOff">
214+
<option value="default">Default</option>
215+
<option value="primary">Primary</option>
216+
<option value="success">Success</option>
217+
<option value="warning">Warning</option>
218+
<option value="danger">Danger</option>
219+
</select>
220+
</div>
221+
222+
<div class="gallery">
223+
<h2>Gallery</h2>
224+
<enhanced-toggle></enhanced-toggle>
225+
<enhanced-toggle styleOff="warning" styleOn="success"></enhanced-toggle>
226+
<enhanced-toggle :rounded="true" :checked="true"></enhanced-toggle>
227+
</div>
228+
229+
</fieldset>
230+
231+
</div>
232+
</template>
233+
234+
<script>
235+
import { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle } from '../src/index'
236+
237+
export default {
238+
components: { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle },
239+
data () {
240+
return {
241+
sc_model: false,
242+
sc_label: 'Simple',
243+
sc_disabled: false,
244+
sc_rounded: false,
245+
sc_animate: false,
246+
sc_subclass: 'primary',
247+
gc_model: ['Second', 'Third'],
248+
gc_val1: 'First',
249+
gc_val2: 'Second',
250+
gc_val3: 'Third',
251+
gc_disabled: false,
252+
gc_rounded: false,
253+
gc_animate: false,
254+
gc_inline: true,
255+
gc_combine: true,
256+
gc_subclass: 'warning',
257+
rc_model: 'B',
258+
rc_val1: 'A',
259+
rc_val2: 'B',
260+
rc_val3: 'C',
261+
rc_disabled: false,
262+
rc_rounded: true,
263+
rc_animate: true,
264+
rc_inline: false,
265+
rc_subclass: 'success',
266+
tc_model: false,
267+
tc_labelOn: 'Mandatory',
268+
tc_labelOff: 'Optional',
269+
tc_disabled: false,
270+
tc_rounded: true,
271+
tc_styleOn: 'success',
272+
tc_styleOff: 'danger'
273+
}
274+
}
275+
}
276+
</script>
277+
278+
<style>
279+
h1 {
280+
margin-top: 0;
281+
margin-bottom: 0;
282+
}
283+
284+
.container {
285+
margin-top: 20px;
286+
}
287+
288+
.playWith {
289+
width: 70%;
290+
float: left;
291+
}
292+
293+
.gallery {
294+
float: right;
295+
width: 20%;
296+
}
297+
298+
.half {
299+
width: 50%;
300+
float: left;
301+
}
302+
303+
</style>

‎demo/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import Demo from './Demo'
3+
4+
createApp(Demo).mount('#app')

‎docs/dist/build.js

Lines changed: 0 additions & 300 deletions
This file was deleted.

‎docs/index.html

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docs/main.js

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)