Skip to content
This repository was archived by the owner on Feb 12, 2020. It is now read-only.

Commit 40fa020

Browse files
joshstoik1joshstoik1
committed
v-phone and v-gravatar directives
1 parent e7f69ed commit 40fa020

File tree

6 files changed

+737
-111
lines changed

6 files changed

+737
-111
lines changed

‎demo/assets/demo.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/assets/vue-blob-forms.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1" name="viewport">
77

8+
<link rel='shortcut icon' type='image/x-icon' href='assets/favicon.ico' />
89
<link rel="stylesheet" href="assets/demo.css" media="all">
910
</head>
1011
<body>
1112
<div class="wrapper" id="vue-app" v-cloak>
1213
<h1>vue-blob-forms</h1>
1314

14-
<form name="demo" v-blob-forms>
15+
<form name="demo" v-form>
1516
<table class="demo" cellspacing="0" cellpadding="0">
1617
<thead>
1718
<tr>
@@ -52,7 +53,7 @@ <h1>vue-blob-forms</h1>
5253
<label for="demo-emailField">Email</label>
5354
</td>
5455
<td>
55-
<input v-model.trim="fields.email" type="email" placeholder="user@domain.com" required name="emailField" id="demo-emailField" />
56+
<input v-gravatar v-model.trim="fields.email" type="email" placeholder="user@domain.com" required name="emailField" id="demo-emailField" />
5657
</td>
5758
<td>
5859
<span v-if="formTouched('demo', 'emailField')">Yes</span>
@@ -98,7 +99,7 @@ <h1>vue-blob-forms</h1>
9899
<label for="demo-telField">Tel</label>
99100
</td>
100101
<td>
101-
<input v-model.trim="fields.tel" type="tel" placeholder="(123) 456-7890" minlength="10" required name="telField" id="demo-telField" />
102+
<input v-model.trim="fields.tel" type="tel" placeholder="(123) 456-7890" minlength="10" required name="telField" id="demo-telField" v-phone />
102103
</td>
103104
<td>
104105
<span v-if="formTouched('demo', 'telField')">Yes</span>
@@ -217,6 +218,29 @@ <h1>vue-blob-forms</h1>
217218
<div class="error-message" v-if="formErrors('demo', 'multiselectField')">{{ formErrors('demo', 'multiselectField') }}</div>
218219
</td>
219220
</tr>
221+
<tr v-if="showingToggle">
222+
<td>
223+
<label for="demo-toggLefield">Toggled</label>
224+
</td>
225+
<td>
226+
<input v-model.trim="fields.toggle" type="text" maxlength="50" required name="toggLefield" id="demo-toggLefield" />
227+
</td>
228+
<td>
229+
<span v-if="formTouched('demo', 'toggLefield')">Yes</span>
230+
<span v-else class="fg-black-light">No</span>
231+
</td>
232+
<td>
233+
<span v-if="formChanged('demo', 'toggLefield')">Yes</span>
234+
<span v-else class="fg-black-light">No</span>
235+
</td>
236+
<td>
237+
<span v-if="formValid('demo', 'toggLefield')" class="fg-green">Yes</span>
238+
<span v-else class="fg-red">No</span>
239+
</td>
240+
<td>
241+
<div class="error-message" v-if="formErrors('demo', 'toggLefield')">{{ formErrors('demo', 'toggLefield') }}</div>
242+
</td>
243+
</tr>
220244
</tbody>
221245
<tfoot>
222246
<tr>
@@ -245,11 +269,16 @@ <h1>vue-blob-forms</h1>
245269
</table>
246270
</form>
247271

248-
<button v-on:click.prevent="validateForm('demo')">Check All</button>
272+
<div class="demo--actions">
273+
<button v-on:click.prevent="validateForm('demo')" class="fg-white bg-pink bg-purple-hover">Check All</button>
274+
<button v-on:click.prevent="showingToggle = !showingToggle" class="fg-white bg-blue bg-purple-hover">Toggle Field</button>
275+
</div>
249276
</div><!--#vue-app-->
250277

278+
<script src="assets/blob-phone.min.js"></script>
251279
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
252280
<script src="assets/vue-blob-forms.min.js"></script>
253281
<script src="assets/demo.min.js"></script>
282+
254283
</body>
255284
</html>

‎dist/vue-blob-forms.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/demo.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1+
/**
2+
* Demo: vue-blob-forms
3+
*
4+
* This is a quick little demonstration of different field types and
5+
* methods.
6+
*
7+
* @see https://blobfolio.com
8+
* @see https://github.com/Blobfolio/vue-blob-forms
9+
*/
110
(function(){
211

12+
// Set up Vue with some basic data.
313
var app = new Vue({
414
el: '#vue-app',
515
data: {
@@ -10,13 +20,15 @@ var app = new Vue({
1020
tel: '',
1121
text: '',
1222
textarea: '',
23+
toggled: '',
1324
select: '',
1425
multiselect: [],
1526
},
1627
dateMin: '2015-01-01',
1728
dateMax: '2018-01-01',
1829
numMin: 1,
1930
numMax: 10,
31+
showingToggle: false,
2032
},
2133
methods: {
2234
},

0 commit comments

Comments
 (0)