Skip to content

Commit 1daae5c

Browse files
jyouncejyounce
committed
chore(merge): continuous
2 parents aa4b6ec + 89dbab1 commit 1daae5c

File tree

7 files changed

+122
-6
lines changed

7 files changed

+122
-6
lines changed

‎src/client/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
},
3838
"flat": true,
3939
"dependencies": {
40-
"@rapid-build-ui/rb-base": "^0.0.8"
40+
"@rapid-build-ui/rb-base": "^0.0.8",
41+
"@rapid-build-ui/rb-button": "^0.0.15",
42+
"@rapid-build-ui/rb-popover": "^0.0.15"
4143
}
4244
}

‎src/client/scripts/rb-toggle.js‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,61 @@
22
* RB-TOGGLE
33
***********/
44
import { RbBase, props, html } from '../../rb-base/scripts/rb-base.js';
5+
import Converter from '../../rb-base/scripts/public/props/converters.js';
6+
import Type from '../../rb-base/scripts/public/services/type.js';
7+
import View from '../../rb-base/scripts/public/view/directives.js';
58
import template from '../views/rb-toggle.html';
9+
import '../../rb-button/scripts/rb-button.js';
10+
import '../../rb-popover/scripts/rb-popover.js';
611

712
export class RbToggle extends RbBase() {
13+
/* Lifecycle
14+
************/
15+
viewReady() { // :void
16+
super.viewReady && super.viewReady();
17+
Object.assign(this.rb.elms, {
18+
rbButton: this.shadowRoot.querySelector('rb-button')
19+
});
20+
this.rb.events.add(this.rb.elms.rbButton, 'click', this._toggleAction);
21+
}
22+
823
/* Properties
924
*************/
1025
static get props() {
1126
return {
12-
kind: props.string
27+
kind: props.string,
28+
caption: props.string,
29+
inline: props.boolean,
30+
action: Object.assign({}, props.string, {
31+
deserialize(val) {
32+
if (!val) return;
33+
return new Function(`return ${val}`)();
34+
}
35+
}),
36+
disabled: Object.assign({}, props.boolean, {
37+
deserialize: Converter.valueless
38+
}),
39+
open: Object.assign({}, props.boolean, {
40+
deserialize: Converter.valueless
41+
})
1342
};
1443
}
1544

45+
/* Helpers
46+
**********/
47+
_toggle() { // :void
48+
this.open = !this.open;
49+
}
50+
51+
/* Event Handlers
52+
*****************/
53+
async _toggleAction(evt) { // :void
54+
if (this.disabled) return;
55+
if (!Type.is.function(this.action)) return this._toggle();
56+
const result = await this.action();
57+
this._toggle();
58+
}
59+
1660
/* Template
1761
***********/
1862
render({ props, state }) { // :string

‎src/client/styles/layout/common.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*********
2+
* COMMON
3+
*********/
4+
.rb-toggle {
5+
&.open .content {
6+
7+
}
8+
&.closed .content {
9+
display: none;
10+
}
11+
12+
rb-button {
13+
margin-bottom: 10px;
14+
}
15+
}

‎src/client/styles/layout/host.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*******
2+
* HOST
3+
*******/
4+
:host {
5+
contain: content;
6+
display: block;
7+
margin-bottom: 1rem;
8+
}
9+
:host([hidden]) {
10+
display: none;
11+
}

‎src/client/styles/rb-toggle.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
******************/
44
@import 'sass/functions.scss';
55

6-
/* The Component
7-
****************/
8-
6+
/* Layout
7+
*********/
8+
@import 'layout/host.scss';
9+
@import 'layout/common.scss';

‎src/client/views/rb-toggle.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1-
rb-toggle
1+
<div
2+
class="
3+
rb-toggle
4+
${props.kind}
5+
${props.inline ? 'inline' : ''}
6+
${props.open ? 'open' : 'closed'}
7+
${props.caption ? 'with-caption' : 'no-caption'}
8+
">
9+
<rb-button
10+
text
11+
icon-source="solid"
12+
icon-valign="text-top"
13+
?disabled="${props.disabled}"
14+
kind="${View.ifDefined(props.kind || undefined)}"
15+
icon-kind="caret-${props.open ? 'down' : 'right'}">
16+
${props.caption}
17+
</rb-button>
18+
<div class="content">
19+
<slot></slot>
20+
</div>
21+
</div>
222

323
<link rel="stylesheet" href="../styles/rb-toggle.css">

‎src/client/yarn.lock‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,29 @@
1010
lit-html "^1.0.0"
1111
skatejs "^5.2.4"
1212

13+
"@rapid-build-ui/rb-button@^0.0.15":
14+
version "0.0.15"
15+
resolved "https://registry.yarnpkg.com/@rapid-build-ui/rb-button/-/rb-button-0.0.15.tgz#fa725786dd355809b4ef7677d7aaf1c71efbdbc5"
16+
integrity sha512-7WsfxEsIY14AvjMyr/djvY+qaxnvdNllRdMlTSWWGgI7FnwCjX69k0cz4Rtk1Xnmtvd18IXV6O+2T4eScxBbPA==
17+
dependencies:
18+
"@rapid-build-ui/rb-base" "^0.0.8"
19+
"@rapid-build-ui/rb-icon" "^0.0.13"
20+
21+
"@rapid-build-ui/rb-icon@^0.0.13":
22+
version "0.0.13"
23+
resolved "https://registry.yarnpkg.com/@rapid-build-ui/rb-icon/-/rb-icon-0.0.13.tgz#4c327ba8aaa9b69fbe23b346b44ddf1ebda49af4"
24+
integrity sha512-MZW7xoTU1ryQX+bH5dKfvSE1G0hXRGR2RYVWlrBWfVYUKPMERDdZTMUH4WeQcuTAUi/c4hTdjipPju/SyDC8kg==
25+
dependencies:
26+
"@rapid-build-ui/rb-base" "^0.0.8"
27+
28+
"@rapid-build-ui/rb-popover@^0.0.15":
29+
version "0.0.15"
30+
resolved "https://registry.yarnpkg.com/@rapid-build-ui/rb-popover/-/rb-popover-0.0.15.tgz#bd7bc439247ca8a95f15d1024ad49f3d7a6d9503"
31+
integrity sha512-epu9cMBnXqEvZLuWilf/tLVftLAq70CeY/J0xhRg0tzhVZfeC2vLOA+65xIdx31pTf0fI+tfndS9PG/3uYqudw==
32+
dependencies:
33+
"@rapid-build-ui/rb-base" "^0.0.8"
34+
"@rapid-build-ui/rb-button" "^0.0.15"
35+
1336
lit-html@^1.0.0:
1437
version "1.0.0"
1538
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"

0 commit comments

Comments
 (0)