Skip to content

Commit

Permalink
Merge pull request #678 from lalithkarikelli/surf1971
Browse files Browse the repository at this point in the history 
fix(new working example for drawer): surf1971
  • Loading branch information
@100stacks
100stacks authored Apr 30, 2020
2 parents 24188ef + 0241dc8 commit 1dd7e1b
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 0 deletions.
125 changes: 125 additions & 0 deletions docs/components/drawer/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Drawer
minver: 0.17.0
also:
components/drawer/test.html: Testing - Drawer
elements/hx-drawer: <hx-drawer>
Expand Down Expand Up @@ -124,4 +125,128 @@ <h3 v-text="title"></h3>
</footer>
</div>
</section>

<section>
<header>
<h2 id="drawer-positionable-elements">Drawer with Positionable Child Elements</h2>
<p>
<hx-icon type="info-circle"></hx-icon>
Positionable elements (e.g., <code>&lt;hx-tooltip&gt;</code> and
<code>&lt;hx-popover&gt;</code>) need to be direct children of the
<code>&lt;hx-drawer&gt;</code> element, and placed in a named slot.
Positionable elements require the <code>[slot="fixed]</code> attribute.
</p>
</header>

<div class="example" id="vue-slottedDrawerDemo" >
<header>
<form class="beta-hxForm">
<hx-text-control>
<input
id="txtSlottedDrawerTitle"
type="text"
v-model="drawerTitle"
/>
<label for="txtSlottedDrawerTitle">
Title
</label>
</hx-text-control>
<fieldset>
<label>Options</label>

<hx-checkbox-control>
<input
id="chkHasSlottedPadding"
type="checkbox"
v-model="hasSlottedPadding"
/>
<label for="chkHasSlottedPadding">
<hx-checkbox></hx-checkbox>
Padded Content
</label>
</hx-checkbox-control>

<hx-checkbox-control>
<input
aria-describedby="helpLengthyBody"
id="chkSlottedLengthyBody"
type="checkbox"
v-model="hasSlottedLengthyContent"
/>
<label for="chkSlottedLengthyBody">
<hx-checkbox></hx-checkbox>
Lengthy Content
</label>
<p id="helpLengthyBody">(triggers scrolling)</p>
</hx-checkbox-control>
</fieldset>
</form>
</header>

<div>
<hx-disclosure aria-controls="drawer-with-slotted-positionable-element" class="hxBtn">
Drawer with Slotted Positionable Element
</hx-disclosure>

<hx-drawer id="drawer-with-slotted-positionable-element">
<header>
<h4 v-text="drawerTitle"></h4>
</header>
<hx-div :class="bodyClasses">
<template v-if="hasSlottedLengthyContent">
{{ utils.lorem(2) }}
</template>
<template v-else>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Gravida rutrum quisque non tellus. Sagittis vitae
et leo duis ut diam quam nulla. Diam vel quam elementum
pulvinar etiam non. Pulvinar sapien et ligula ullamcorper
malesuada proin libero nunc. Ultricies integer quis auctor
elit sed vulputate mi sit amet. Egestas dui id ornare arcu
odio ut. In iaculis nunc sed augue.
</p>

</template>
<p>
<hx-icon type="info-circle" id="info1"></hx-icon>
<hx-disclosure aria-controls="popover1" class="hxBtn">
Toggle Popover #1
</hx-disclosure>
</p>
</hx-div>

<footer>
<button class="hxBtn hxPrimary">Save Changes</button>
<button class="hxBtn">Cancel</button>
</footer>

<!-- slotted positionable children -->

<hx-tooltip slot="fixed" for="info1" position="left-middle">
<header>Tooltip #1</header>
<p>
<code>hx-drawer &gt; hx-tooltip[slot="fixed"]</code>
</p>
</hx-tooltip>

<hx-popover slot="fixed" id="popover1" position="left-middle">
<header>
Popover #1
</header>

<hx-div>
<p>This popover is a slotted child of hx-drawer.</p>
<p><code>hx-drawer &gt; hx-popover[slot="fixed"]</code></p>
</hx-div>
</hx-popover>
</hx-drawer>
</div>

<footer>
<pre><code v-text="snippet"></code></pre>
</footer>
</div>
</section>
{% endblock %}
63 changes: 63 additions & 0 deletions docs/components/drawer/slotted-drawer-demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Util from '../../_util';

if (document.getElementById('vue-slottedDrawerDemo')) {
new Vue({
el: '#vue-slottedDrawerDemo',
data: {
hasSlottedPadding: true,
hasSlottedLengthyContent: false,
drawerTitle: 'Drawer with Slotted Positionable Element',
},
computed: {
attrBodyClass: function () {
if (this.bodyClasses !== '') {
return `class="${this.bodyClasses}"`;
}
return '';
},
bodyClasses: function () {
return this.hasSlottedPadding ? 'hxMd' : '';
},
snippet: function () {
return Util.snippet(`
<hx-disclosure
aria-controls="drawer-with-slotted-positionable-element"
class="hxBtn"
>
Drawer with Slotted Positionable Element
</hx-disclosure>
<hx-drawer
id="drawer-with-slotted-positionable-element"
>
<header></header>
<hx-div ${this.attrBodyClass}>
...
</hx-div>
<hx-tooltip slot="fixed" for="info1" position="left-middle">
<header>Tooltip #1</header>
<p>
<code>hx-drawer &gt; hx-tooltip[slot="fixed"]</code>
</p>
</hx-tooltip>
<hx-popover slot="fixed" id="popover1" position="left-middle">
<header>
Popover #1
</header>
<hx-div>
<p>This popover is a slotted child of hx-drawer.</p>
<p><code>hx-drawer &gt; hx-popover[slot="fixed"]</code></p>
</hx-div>
</hx-popover>
<footer>
...
</footer>
</hx-drawer>
`);
},
},
});
}
1 change: 1 addition & 0 deletions docs/docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import './components/button/button-demo';
import './components/checkbox/checkbox-demo';
import './components/choice-tile/choice-tile-demo';
import './components/drawer/drawer-demo';
import './components/drawer/slotted-drawer-demo';
import './components/dropdown-select/select-demo';
import './components/email/email-control-demo';
import './components/file/drop-zone-demo';
Expand Down

0 comments on commit 1dd7e1b

Please sign in to comment.