Skip to content

Commit 58d24e0

Browse files
author
Ryan A. Johnson
committed
chore(merge): sync with master 
2 parents 0e6e4c6 + 5f76b41 commit 58d24e0

File tree

29 files changed

+588
-439
lines changed

29 files changed

+588
-439
lines changed

‎docs/_data/nav.json5‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@
9494
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
9595
{ label: '<hx-pill>', path: 'hx-pill' },
9696
{ label: '<hx-popover>', path: 'hx-popover' },
97+
{ label: '<hx-popover-body>', path: 'hx-popover-body' },
98+
{ label: '<hx-popover-foot>', path: 'hx-popover-foot' },
99+
{ label: '<hx-popover-head>', path: 'hx-popover-head' },
97100
{ label: '<hx-progress>', path: 'hx-progress' },
98101
{ label: '<hx-reveal>', path: 'hx-reveal' },
99102
{ label: '<hx-search>', path: 'hx-search' },

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Util from '../../_util';
2+
13
(function () {
24
const ICONS = [
35
'',
@@ -23,6 +25,7 @@
2325
icons: ICONS,
2426
name: 'id_rsa.pub',
2527
progress: 42,
28+
readonly: false,
2629
state: 'downloadable',
2730
},
2831
methods: {
@@ -41,6 +44,18 @@
4144
isInvalid: function () {
4245
return this.state === 'invalid' ;
4346
},
47+
downloadableSnippet: function () {
48+
return Util.snippet(`
49+
<hx-file-input
50+
details="${this.details}"
51+
href="${this.href}"
52+
icon="${this.icon}"
53+
name="${this.name}"
54+
${this.readonly ? 'readonly' : ''}
55+
>
56+
</hx-file-input>
57+
`);
58+
},
4459
},
4560
});
4661
}

‎docs/components/files/index.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,13 @@ <h2 id="file-tile">File Tile</h2>
159159
<label for="txtDetails">Details</label>
160160
<input id="txtDetails" class="hxTextCtrl" v-model="details" />
161161
</p>
162+
<fieldset>
163+
<legend>Options</legend>
164+
<label>
165+
<input type="checkbox" v-model="readonly" />
166+
Readonly
167+
</label>
168+
</fieldset>
162169
</template>
163170
<p v-if="isLoading">
164171
<label for="rngProgress">Progress</label>
@@ -174,20 +181,14 @@ <h2 id="file-tile">File Tile</h2>
174181
:href="href"
175182
:icon="icon"
176183
:name="name"
184+
:readonly="readonly"
177185
@cancel="onEvent"
178186
@delete="onEvent"
179187
></hx-file-tile>
180188
</div>
181189

182190
<footer>
183-
{% code 'html' %}{% raw %}
184-
<hx-file-tile
185-
details="{{details}}"
186-
href="{{href}}"
187-
icon="{{icon}}"
188-
name="{{name}}">
189-
</hx-file-tile>{% endraw %}
190-
{% endcode %}
191+
<pre><code v-text="downloadableSnippet"></code></pre>
191192
</footer>
192193
</template>
193194

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,18 @@ <h3>Downloadable with Custom Name</h3>
131131
<small>href defined</small>
132132
</div>
133133

134+
<div class="hxCol">
135+
<h3>Visually Truncated, Downloadable and Readonly</h3>
136+
<hx-file-tile
137+
details="50B"
138+
href="files/easteregg.txt"
139+
icon="mime-text"
140+
name="SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.txt"
141+
readonly
142+
></hx-file-tile>
143+
<small>visually truncated with many characters, downloadable and readonly</small>
144+
</div>
145+
134146
<!-- TODO: immitate hovering over <a> in Shadow DOM -->
135147
<!-- TODO: immitate hovering over <button id="hxDismiss"> in Shadow DOM -->
136148
</div>
@@ -159,6 +171,26 @@ <h2>Loading State</h2>
159171
></hx-file-tile>
160172
</div>
161173
{% endfor %}
174+
175+
<div class="hxCol">
176+
<small>[progress="100" and readonly]</small>
177+
<hx-file-tile
178+
icon="mime-system"
179+
name="win32.exe"
180+
progress="100"
181+
readonly
182+
></hx-file-tile>
183+
</div>
184+
185+
<div class="hxCol">
186+
<small>[progress="100", visually truncated and readonly]</small>
187+
<hx-file-tile
188+
icon="mime-system"
189+
name="win32supercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.exe"
190+
progress="100"
191+
readonly
192+
></hx-file-tile>
193+
</div>
162194
</div>
163195
</section>
164196

@@ -173,6 +205,16 @@ <h3>Error</h3>
173205
name="theinternet.tgz"
174206
></hx-file-tile>
175207
</div>
208+
209+
<div class="hxCol">
210+
<h3>Error, Visually Truncated and Readonly</h3>
211+
<hx-file-tile
212+
icon="mime-archive"
213+
invalid
214+
name="SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious.tgz"
215+
readonly
216+
></hx-file-tile>
217+
</div>
176218
</div>
177219
</section>
178220

‎docs/components/loaders/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h2 id="busy">Busy</h2>
2929
</p>
3030
<p>
3131
<button class="hxBtn hxPrimary">
32-
Loading
32+
<span>Loading</span>
3333
<hx-busy :paused="isPaused"></hx-busy>
3434
</button>
3535
</p>
@@ -41,7 +41,7 @@ <h2 id="busy">Busy</h2>
4141
<hx-busy paused></hx-busy>
4242

4343
<button class="hxBtn hxPrimary">
44-
Loading
44+
<span>Loading</span>
4545
<hx-busy paused></hx-busy>
4646
</button>
4747
{% endcode %}
@@ -51,7 +51,7 @@ <h2 id="busy">Busy</h2>
5151
<hx-busy></hx-busy>
5252

5353
<button class="hxBtn hxPrimary">
54-
Loading
54+
<span>Loading</span>
5555
<hx-busy></hx-busy>
5656
</button>
5757
{% endcode %}

‎docs/components/popovers/index.html‎

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
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>
710
elements/hx-popover: <hx-popover>
8-
api/module-HelixUI_Utils_Position_Offset.html: API - Positioning
911
---
1012
{% extends 'component.njk' %}
1113
{% block content %}
@@ -25,54 +27,45 @@ <h2 id="basic-popover">Basic Popover</h2>
2527
</form>
2628
</header>
2729

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>
30+
<div>
31+
<button data-popover="myPopover" class="hxBtn">Toggle</button>
3532

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

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

49-
<footer>
46+
<hx-popover-foot>
5047
<button class="hxBtn hxPrimary">Submit</button>
5148
<button class="hxBtn">Cancel</button>
52-
</footer>
49+
</hx-popover-foot>
5350
</hx-popover>
5451
</div>
5552

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

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

72-
<footer>
65+
<hx-popover-foot>
7366
<button class="hxBtn hxPrimary">Submit</button>
7467
<button class="hxBtn">Cancel</button>
75-
</footer>
68+
</hx-popover-foot>
7669
</hx-popover>{% endraw %}
7770
{% endcode %}
7871
</footer>

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,23 @@
11
if (document.getElementById('vue-popoverDemo')) {
22
const POSITIONS = [
3-
{ label: 'Top Start', value: 'top-start' },
43
{ label: 'Top Left', value: 'top-left' },
54
{ label: 'Top', value: 'top' },
65
{ label: 'Top Right', value: 'top-right' },
7-
{ label: 'Top End', value: 'top-end' },
8-
{ label: 'Right Start', value: 'right-start' },
96
{ label: 'Right Top', value: 'right-top' },
107
{ label: 'Right', value: 'right' },
118
{ label: 'Right Bottom', value: 'right-bottom' },
12-
{ label: 'Right End', value: 'right-end' },
13-
{ label: 'Bottom End', value: 'bottom-end' },
149
{ label: 'Bottom Right', value: 'bottom-right' },
1510
{ label: 'Bottom', value: 'bottom' },
1611
{ label: 'Bottom Left', value: 'bottom-left' },
17-
{ label: 'Bottom Start', value: 'bottom-start' },
18-
{ label: 'Left End', value: 'left-end' },
1912
{ label: 'Left Bottom', value: 'left-bottom' },
2013
{ label: 'Left', value: 'left' },
2114
{ label: 'Left Top', value: 'left-top' },
22-
{ label: 'Left Start', value: 'left-start' },
2315
];
2416

2517
new Vue({
2618
el: '#vue-popoverDemo',
2719
data: {
28-
position: POSITIONS[11],
20+
position: POSITIONS[6],
2921
positions: POSITIONS,
3022
},
3123
});

0 commit comments

Comments
 (0)