Skip to content

Commit 8237faf

Browse files
CITguyCITguy
authored
Merge pull request #307 from rackerlabs/surf-1298-demo-dropdown-icons
docs(*): limit available icons in demos
2 parents 90a70b8 + 005dd10 commit 8237faf

File tree

5 files changed

+150
-82
lines changed

5 files changed

+150
-82
lines changed

‎docs/components/files/file-input-demo.js‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
import Util from '../../_util';
2+
13
(function () {
4+
const ICONS = [ 'upload', 'paperclip' ];
5+
26
const VARIANTS = [
37
{ label: 'Primary', val: 'hxPrimary' },
48
{ label: 'Secondary', val: '', default: true },
@@ -9,14 +13,41 @@
913
new Vue({
1014
el: '#vue-fileInputDemo',
1115
data: {
16+
icon: ICONS[0],
17+
icons: ICONS,
18+
isMultiple: false,
19+
label: 'Upload File',
1220
variant: VARIANTS[1],
1321
variants: VARIANTS,
14-
icon: 'upload',
15-
label: 'Upload File',
1622
},
1723
computed: {
18-
classes: function () {
19-
return this.variant.val;
24+
attrClass: function () {
25+
if (this.variant.val !== '') {
26+
return `class="${this.variant.val}"`;
27+
} else {
28+
return '';
29+
}
30+
},
31+
attrIcon: function () {
32+
return `icon="${this.icon}"`;
33+
},
34+
attrLabel: function () {
35+
if (this.label !== '') {
36+
return `label="${this.label}"`;
37+
} else {
38+
return '';
39+
}
40+
},
41+
snippet: function () {
42+
return Util.snippet(`
43+
<hx-file-input
44+
${this.attrClass}
45+
${this.attrIcon}
46+
${this.attrLabel}
47+
>
48+
<input ${this.isMultiple ? 'multiple ' : ''}type="file" />
49+
</hx-file-input>
50+
`);
2051
},
2152
},
2253
});

‎docs/components/files/file-tile-demo.js‎

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,47 @@
1-
if (document.getElementById('vue-fileTileDemo')) {
2-
new Vue({
3-
el: '#vue-fileTileDemo',
4-
data: {
5-
details: '1.3mb',
6-
href: 'path/to/unicorns.gzip',
7-
icon: 'mime-archive',
8-
name: 'unicorns.gzip',
9-
progress: 42,
10-
state: 'downloadable',
11-
},
12-
methods: {
13-
onEvent: function (evt) {
14-
evt.preventDefault();
15-
alert(`Event: "${evt.type}"`);
1+
(function () {
2+
const ICONS = [
3+
'',
4+
'key',
5+
'mime-archive',
6+
'mime-audio',
7+
'mime-code',
8+
'mime-data',
9+
'mime-image',
10+
'mime-system',
11+
'mime-text',
12+
'mime-video',
13+
'paperclip',
14+
];
15+
16+
if (document.getElementById('vue-fileTileDemo')) {
17+
new Vue({
18+
el: '#vue-fileTileDemo',
19+
data: {
20+
details: '1.3mb',
21+
href: 'path/to/id_rsa.pub',
22+
icon: ICONS[1],
23+
icons: ICONS,
24+
name: 'id_rsa.pub',
25+
progress: 42,
26+
state: 'downloadable',
1627
},
17-
},
18-
computed: {
19-
isDownloadable: function () {
20-
return this.state === 'downloadable';
28+
methods: {
29+
onEvent: function (evt) {
30+
evt.preventDefault();
31+
alert(`Event: "${evt.type}"`);
32+
},
2133
},
22-
isLoading: function () {
23-
return this.state === 'loading';
34+
computed: {
35+
isDownloadable: function () {
36+
return this.state === 'downloadable';
37+
},
38+
isLoading: function () {
39+
return this.state === 'loading';
40+
},
41+
isInvalid: function () {
42+
return this.state === 'invalid' ;
43+
},
2444
},
25-
isInvalid: function () {
26-
return this.state === 'invalid' ;
27-
},
28-
},
29-
});
30-
}
45+
});
46+
}
47+
})();

‎docs/components/files/index.html‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,44 +29,41 @@ <h2 id="file-selector">File Selector</h2>
2929
<em class="hxSubBody" v-if="_variant.default">(default)</em>
3030
</label>
3131
</fieldset>
32-
<p>
33-
<label for="inputIcon">Icon</label>
34-
<input id="inputIcon" class="hxTextCtrl" v-model="icon" />
35-
</p>
32+
<fieldset>
33+
<legend>Icon</legend>
34+
<label v-for="_icon in icons">
35+
<input
36+
:value="_icon"
37+
name="icon"
38+
type="radio"
39+
v-model="icon"
40+
/>
41+
<span v-text="_icon"></span>
42+
</label>
43+
</fieldset>
3644
<p>
3745
<label for="inputLabel">Label</label>
3846
<input id="inputLabel" class="hxTextCtrl" v-model="label" />
3947
</p>
48+
<fieldset>
49+
<legend>Options</legend>
50+
<label>
51+
<input type="checkbox" v-model="isMultiple">
52+
Multiple
53+
</label>
54+
</fieldset>
4055
</form>
4156
</header>
4257
<div>
4358
<hx-file-input
44-
:class="classes"
59+
:class="variant.val"
4560
:icon="icon"
4661
:label="label">
47-
<input type="file" />
62+
<input type="file" :multiple="isMultiple" />
4863
</hx-file-input>
4964
</div>
5065
<footer>
51-
<template v-if="classes === ''">
52-
{% code 'html' %}{% raw %}
53-
<hx-file-input
54-
icon="{{icon}}"
55-
label="{{label}}">
56-
<input type="file" />
57-
</hx-file-input>{% endraw %}
58-
{% endcode %}
59-
</template>
60-
<template v-else>
61-
{% code 'html' %}{% raw %}
62-
<hx-file-input
63-
class="{{classes}}"
64-
icon="{{icon}}"
65-
label="{{label}}">
66-
<input type="file" />
67-
</hx-file-input>{% endraw %}
68-
{% endcode %}
69-
</template>
66+
<pre><code v-text="snippet"></code></pre>
7067
</footer>
7168
</div>
7269
</section>
@@ -93,8 +90,11 @@ <h2 id="file-tile">File Tile</h2>
9390
</label>
9491
</fieldset>
9592
<p>
96-
<label for="txtIcon">Icon</label>
97-
<input id="txtIcon" class="hxTextCtrl" v-model="icon" />
93+
<label for="selIcon">Icon</label>
94+
<select id="selIcon" v-model="icon">
95+
<option v-for="_icon in icons" :value="_icon" v-text="_icon">
96+
</option>
97+
</select>
9898
</p>
9999
<p>
100100
<label for="txtName">Name</label>

‎docs/components/icons/icon-demo.js‎

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,46 @@
11
import Util from '../../_util';
22

3-
if (document.getElementById('vue-fileIconDemo')) {
4-
new Vue({
5-
el: '#vue-fileIconDemo',
6-
data: {
7-
ext: 'gzip',
8-
type: 'mime-archive',
9-
},
10-
computed: {
11-
attrType: function () {
12-
if (this.type.trim() !== '') {
13-
return `type="${this.type}"`;
14-
}
15-
return '';
3+
(function () {
4+
const TYPES = [
5+
'',
6+
'key',
7+
'mime-archive',
8+
'mime-audio',
9+
'mime-code',
10+
'mime-data',
11+
'mime-image',
12+
'mime-system',
13+
'mime-text',
14+
'mime-video',
15+
'paperclip',
16+
];
17+
18+
if (document.getElementById('vue-fileIconDemo')) {
19+
new Vue({
20+
el: '#vue-fileIconDemo',
21+
data: {
22+
ext: 'pub',
23+
type: TYPES[1],
24+
types: TYPES,
1625
},
17-
snippet: function () {
18-
return Util.snippet(`
19-
<hx-file-icon ${this.attrType}>
20-
${this.ext}
21-
</hx-file-icon>
22-
`);
26+
computed: {
27+
attrType: function () {
28+
if (this.type.trim() !== '') {
29+
return `type="${this.type}"`;
30+
}
31+
return '';
32+
},
33+
snippet: function () {
34+
return Util.snippet(`
35+
<hx-file-icon ${this.attrType}>
36+
${this.ext}
37+
</hx-file-icon>
38+
`);
39+
},
2340
},
24-
},
25-
});
26-
}
41+
});
42+
}
43+
})();
2744

2845
if (document.getElementById('vue-availableIcons')) {
2946
const Icons = {

‎docs/components/icons/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,11 @@ <h2 id="file-icons">File Icon</h2>
3535
<header>
3636
<form class="beta-hxForm">
3737
<p>
38-
<label for="txtType">Type</label>
39-
<input id="txtType" class="hxTextCtrl" v-model="type" />
38+
<label for="selType">Type</label>
39+
<select id="selType" v-model="type">
40+
<option v-for="_type in types" :value="_type" v-text="_type">
41+
</option>
42+
</select>
4043
</p>
4144
<p>
4245
<label for="txtExt">File Extension</label>

0 commit comments

Comments
 (0)