Skip to content

Commit d1fc3bf

Browse files
author
Ryan A. Johnson
committed
Merge branch 'master' into docs-to-master
Sync `docs` with `master`
2 parents c12a351 + f34d9ab commit d1fc3bf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1066
-350
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
7676
{ label: '<hx-disclosure>', path: 'hx-disclosure' },
7777
{ label: '<hx-div>', path: 'hx-div' },
78+
{ label: '<hx-drop-zone>', path: 'hx-drop-zone' },
7879
{ label: '<hx-error>', path: 'hx-error' },
7980
{ label: '<hx-file-icon>', path: 'hx-file-icon' },
8081
{ label: '<hx-file-input>', path: 'hx-file-input' },
@@ -92,9 +93,6 @@
9293
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
9394
{ label: '<hx-pill>', path: 'hx-pill' },
9495
{ label: '<hx-popover>', path: 'hx-popover' },
95-
{ label: '<hx-popover-body>', path: 'hx-popover-body' },
96-
{ label: '<hx-popover-foot>', path: 'hx-popover-foot' },
97-
{ label: '<hx-popover-head>', path: 'hx-popover-head' },
9896
{ label: '<hx-progress>', path: 'hx-progress' },
9997
{ label: '<hx-reveal>', path: 'hx-reveal' },
10098
{ label: '<hx-search>', path: 'hx-search' },

‎docs/components/files/drop-zone-demo.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
if (document.getElementById('vue-dropZoneDemo')) {
2+
new Vue({
3+
el: '#vue-dropZoneDemo',
4+
methods: {
5+
onDrop: function (evt) {
6+
if (evt.dataTransfer.items) {
7+
// Use DataTransferItemList interface to access the file(s)
8+
Array.from(evt.dataTransfer.items).forEach(item => {
9+
// If dropped items aren't files, reject them
10+
if (item.kind === 'file') {
11+
let file = item.getAsFile();
12+
alert('File Drop Successful! ' + file.name);
13+
}
14+
});
15+
} else {
16+
// TODO: find solution, unsure how to pull file info in IE11
17+
alert('We detected a file drop!');
18+
}
19+
},
20+
},
21+
});
22+
}

‎docs/components/files/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,64 @@
22
title: Files
33
minver: 0.12.0
44
also:
5+
components/files/test-drop-zones.html: Testing - Drop Zones
56
components/files/test-file-selectors.html: Testing - File Selectors
67
components/files/test-file-tiles.html: Testing - File Tiles
78
components/Icons: Icons
9+
elements/hx-drop-zone: <hx-drop-zone>
810
elements/hx-file-input: <hx-file-input>
911
elements/hx-file-tile: <hx-file-tile>
1012
---
1113
{% extends 'component.njk' %}
1214
{% block content %}
15+
<section>
16+
<h2 id="drop-zone">Drop Zone</h2>
17+
<p class="hxSubBody">Added: v0.14.0</p>
18+
<p>
19+
A container that provides a visual overlay when dragging a file, marking
20+
the boundaries of where a user can drop.
21+
</p>
22+
<p class="hxSubdued hxSubBody">
23+
<hx-icon type="info-circle"></hx-icon>
24+
The drop zone ignores any padding applied to it.
25+
</p>
26+
<div class="example" id="vue-dropZoneDemo">
27+
<div>
28+
<hx-drop-zone @drop.prevent="onDrop">
29+
<div class="hxFence">
30+
<hx-file-icon type="paperclip"></hx-file-icon>
31+
<p>
32+
Drop files here or
33+
<hx-file-input
34+
class="hxTertiary"
35+
label="browse your files">
36+
<input type="file" />
37+
</hx-file-input>.
38+
</p>
39+
</div>
40+
</hx-drop-zone>
41+
</div>
42+
43+
<footer>
44+
{% code 'html' %}
45+
<hx-drop-zone>
46+
<div class="hxFence">
47+
<hx-file-icon type="paperclip"></hx-file-icon>
48+
<p>
49+
Drop files here or
50+
<hx-file-input
51+
class="hxTertiary"
52+
label="browse your files">
53+
<input type="file" />
54+
</hx-file-input>.
55+
</p>
56+
</div>
57+
</hx-drop-zone>
58+
{% endcode %}
59+
</footer>
60+
</div>
61+
</section>
62+
1363
<section>
1464
<h2 id="file-selector">File Selector</h2>
1565
<p class="hxSubBody">Added: v0.13.0</p>

‎docs/components/files/test-drop-zones.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Testing - Drop Zones
3+
---
4+
{% extends 'test.njk' %}
5+
{% block content %}
6+
<section>
7+
<nav class="hxBreadcrumb">
8+
<a href="components/files">Files</a>
9+
<hx-icon class="delimiter" type="angle-right"></hx-icon>
10+
<a href="#">{{page.title}}</a>
11+
</nav>
12+
</section>
13+
14+
<section>
15+
<h2>Invisible Drop Zone</h2>
16+
<hx-drop-zone>
17+
<p>Invisible Drop Zone</p>
18+
</hx-drop-zone>
19+
</section>
20+
21+
<section>
22+
<h2>Visible Drop Zone (file not over element)</h2>
23+
<hx-drop-zone drag="away">
24+
<p>Visible Drop Zone (file not over element)</p>
25+
</hx-drop-zone>
26+
</section>
27+
28+
<section>
29+
<h2>Visible Drop Zone (file over element)</h2>
30+
<hx-drop-zone drag="over">
31+
<p>Visible Drop Zone (file over element)</p>
32+
</hx-drop-zone>
33+
</section>
34+
35+
<section>
36+
<h2>Drop Zone with Child Fence</h2>
37+
<hx-drop-zone>
38+
<div class="hxFence hxBox hxMd">
39+
<p>Invisible Drop Zone</p>
40+
</div>
41+
</hx-drop-zone>
42+
</section>
43+
44+
<section>
45+
<h2>Visible Drop Zone with Child Fence (file not over element)</h2>
46+
<hx-drop-zone drag="away">
47+
<div class="hxFence hxBox hxMd">
48+
<p>Visible Drop Zone (file not over element)</p>
49+
</div>
50+
</hx-drop-zone>
51+
</section>
52+
53+
<section>
54+
<h2>Visible Drop Zone with Child Fence (file over element)</h2>
55+
<hx-drop-zone drag="over">
56+
<div class="hxFence hxBox hxMd">
57+
<p>Visible Drop Zone (file over element)</p>
58+
</div>
59+
</hx-drop-zone>
60+
</section>
61+
{% endblock %}

‎docs/components/files/test-file-selectors.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ <h3>Tertiary with Label</h3>
7979
</section>
8080

8181
<section>
82-
<h3>Tertiary without Icon</h3>
82+
<h3>Tertiary with Icon-Only</h3>
8383
<hx-file-input
8484
class="hxTertiary"
8585
icon="paperclip">

‎docs/components/files/test-file-tiles.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,14 +99,25 @@ <h3>Logically Truncated</h3>
9999
</div>
100100

101101
<div class="hxCol">
102-
<h3>Visually Truncated</h3>
102+
<h3>Visually Truncated no Spaces</h3>
103103
<hx-file-tile
104104
details="3Kb"
105105
href="files/easteregg.txt"
106106
icon="paperclip"
107107
name="visually-truncated-filename-really-really-really-really-really-long-final-02.pptx"
108108
></hx-file-tile>
109-
<small>many characters, center truncation applied</small>
109+
<small>many characters without spaces, center truncation applied</small>
110+
</div>
111+
112+
<div class="hxCol">
113+
<h3>Visually Truncated with Spaces</h3>
114+
<hx-file-tile
115+
details="3Kb"
116+
href="files/easteregg.txt"
117+
icon="paperclip"
118+
name="visually truncated filename with spaces that is really-really-really-really-really-long-final-02.pptx"
119+
></hx-file-tile>
120+
<small>many characters with spaces, center truncation applied</small>
110121
</div>
111122

112123
<div class="hxCol">

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ import Util from '../../_util';
2424
types: TYPES,
2525
},
2626
computed: {
27+
attrExtension: function () {
28+
if (this.ext.trim() !== '') {
29+
return `extension="${this.ext}"`;
30+
}
31+
return '';
32+
},
2733
attrType: function () {
2834
if (this.type.trim() !== '') {
2935
return `type="${this.type}"`;
@@ -32,8 +38,9 @@ import Util from '../../_util';
3238
},
3339
snippet: function () {
3440
return Util.snippet(`
35-
<hx-file-icon ${this.attrType}>
36-
${this.ext}
41+
<hx-file-icon
42+
${this.attrExtension}
43+
${this.attrType}>
3744
</hx-file-icon>
3845
`);
3946
},

‎docs/components/icons/index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,15 @@ <h2 id="file-icons">File Icon</h2>
4949
</header>
5050

5151
<div class="demo">
52-
<hx-file-icon
52+
<hx-file-icon
53+
v-if="ext !== ''"
54+
:extension="ext"
55+
:type="type"
56+
></hx-file-icon>
57+
58+
<hx-file-icon
59+
v-else
5360
:type="type"
54-
v-text="ext"
5561
></hx-file-icon>
5662
</div>
5763

‎docs/components/popovers/index.html‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
also:
55
components/buttons: Buttons
66
components/popovers/test.html: Testing - Popovers
7-
elements/hx-popover-body: <hx-popover-body>
8-
elements/hx-popover-foot: <hx-popover-foot>
9-
elements/hx-popover-head: <hx-popover-head>
107
elements/hx-popover: <hx-popover>
8+
api/module-HelixUI_Utils_Position_Offset.html: API - Positioning
119
---
1210
{% extends 'component.njk' %}
1311
{% block content %}
@@ -27,45 +25,54 @@ <h2 id="basic-popover">Basic Popover</h2>
2725
</form>
2826
</header>
2927

30-
<div>
31-
<button data-popover="myPopover" class="hxBtn">Toggle</button>
28+
<div
29+
v-for="_position in positions"
30+
v-if="_position.value === position.value"
31+
>
32+
<hx-disclosure aria-controls="demoPopover" class="hxBtn">
33+
Toggle
34+
</hx-disclosure>
3235

33-
<hx-popover id="myPopover"
36+
<hx-popover
37+
id="demoPopover"
38+
:key="position.label"
3439
:position="position.value"
35-
v-for="_position in positions"
36-
v-if="_position.value === position.value">
37-
38-
<hx-popover-head>
40+
>
41+
<header>
3942
Popover Header
40-
</hx-popover-head>
43+
</header>
4144

42-
<hx-popover-body>
43-
<p>This is my popover body</p>
44-
</hx-popover-body>
45+
<hx-div>
46+
<p>This is my popover body.</p>
47+
</hx-div>
4548

46-
<hx-popover-foot>
49+
<footer>
4750
<button class="hxBtn hxPrimary">Submit</button>
4851
<button class="hxBtn">Cancel</button>
49-
</hx-popover-foot>
52+
</footer>
5053
</hx-popover>
5154
</div>
5255

5356
<footer>
5457
{% code 'html' %}{% raw %}
55-
<button data-popover="myPopover" class="hxBtn">Toggle</button>
56-
<hx-popover id="myPopover" position="{{ position.value }}">
57-
<hx-popover-head>
58+
<hx-disclosure aria-controls="demoPopover" class="hxBtn">
59+
Toggle
60+
</hx-disclosure>
61+
<hx-popover id="demoPopover" position="{{ position.value }}">
62+
<header>
5863
Popover Header
59-
</hx-popover-head>
64+
</header>
6065

61-
<hx-popover-body>
62-
<p>This is my popover body</p>
63-
</hx-popover-body>
66+
<hx-div>
67+
<p>
68+
This is my popover body.
69+
</p>
70+
</hx-div>
6471

65-
<hx-popover-foot>
72+
<footer>
6673
<button class="hxBtn hxPrimary">Submit</button>
6774
<button class="hxBtn">Cancel</button>
68-
</hx-popover-foot>
75+
</footer>
6976
</hx-popover>{% endraw %}
7077
{% endcode %}
7178
</footer>

‎docs/components/popovers/popover-demo.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11
if (document.getElementById('vue-popoverDemo')) {
22
const POSITIONS = [
3+
{ label: 'Top Start', value: 'top-start' },
34
{ label: 'Top Left', value: 'top-left' },
45
{ label: 'Top', value: 'top' },
56
{ label: 'Top Right', value: 'top-right' },
7+
{ label: 'Top End', value: 'top-end' },
8+
{ label: 'Right Start', value: 'right-start' },
69
{ label: 'Right Top', value: 'right-top' },
710
{ label: 'Right', value: 'right' },
811
{ label: 'Right Bottom', value: 'right-bottom' },
12+
{ label: 'Right End', value: 'right-end' },
13+
{ label: 'Bottom End', value: 'bottom-end' },
914
{ label: 'Bottom Right', value: 'bottom-right' },
1015
{ label: 'Bottom', value: 'bottom' },
1116
{ label: 'Bottom Left', value: 'bottom-left' },
17+
{ label: 'Bottom Start', value: 'bottom-start' },
18+
{ label: 'Left End', value: 'left-end' },
1219
{ label: 'Left Bottom', value: 'left-bottom' },
1320
{ label: 'Left', value: 'left' },
1421
{ label: 'Left Top', value: 'left-top' },
22+
{ label: 'Left Start', value: 'left-start' },
1523
];
1624

1725
new Vue({
1826
el: '#vue-popoverDemo',
1927
data: {
20-
position: POSITIONS[6],
28+
position: POSITIONS[11],
2129
positions: POSITIONS,
2230
},
2331
});

0 commit comments

Comments
 (0)