kempo-ui 0.0.62 → 0.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/Main.js
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={leftPanelWidth:{type:String,state:!0},rightPanelWidth:{type:String,state:!0}};constructor(){super(),this.leftPanelWidth="0px",this.rightPanelWidth="0px",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const t=document.querySelector('k-side-panel:not([side="right"])');t&&(this.leftPanelWidth=t.collapsed?"3.5rem":"16rem");const e=document.querySelector('k-side-panel[side="right"]');e&&(this.rightPanelWidth=e.collapsed?"3.5rem":"16rem")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(t){"right"===t.detail.side?this.rightPanelWidth=t.detail.width:this.leftPanelWidth=t.detail.width}render(){return html`
|
|
2
2
|
<main>
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</main>
|
|
5
5
|
`}static styles=css`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
|
-
margin-left: var(--panel-width, 0px);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
:host([panel-side="right"]) {
|
|
12
|
-
margin-left: 0;
|
|
13
|
-
margin-right: var(--panel-width, 0px);
|
|
14
|
-
transition: margin-right var(--animation_ms, 256ms);
|
|
8
|
+
margin-left: var(--left-panel-width, 0px);
|
|
9
|
+
margin-right: var(--right-panel-width, 0px);
|
|
10
|
+
transition: margin-left var(--animation_ms, 256ms), margin-right var(--animation_ms, 256ms);
|
|
15
11
|
}
|
|
16
12
|
main {
|
|
17
13
|
max-width: var(--container_width, 90rem);
|
|
@@ -21,4 +17,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
|
|
|
21
17
|
padding-left: var(--spacer);
|
|
22
18
|
padding-right: var(--spacer);
|
|
23
19
|
}
|
|
24
|
-
`;updated(){super.updated(),this.style.setProperty("--panel-width",this.
|
|
20
|
+
`;updated(){super.updated(),this.style.setProperty("--left-panel-width",this.leftPanelWidth),this.style.setProperty("--right-panel-width",this.rightPanelWidth)}}window.customElements.define("k-main",Main);
|
|
@@ -2,7 +2,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
2
2
|
<div id="header">
|
|
3
3
|
<slot name="logo"></slot>
|
|
4
4
|
<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
|
|
5
|
-
<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
|
|
5
|
+
<k-icon name="arrow-line" direction="${(()=>"right"===this.side?this.collapsed?"left":"right":this.collapsed?"right":"left")()}"></k-icon>
|
|
6
6
|
</button>
|
|
7
7
|
</div>
|
|
8
8
|
<div id="content">
|
|
@@ -13,7 +13,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
13
13
|
--bg: var(--c_bg);
|
|
14
14
|
--width-expanded: 16rem;
|
|
15
15
|
--transition-duration: var(--animation_ms, 256ms);
|
|
16
|
-
display:
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
17
18
|
position: fixed;
|
|
18
19
|
top: 0;
|
|
19
20
|
left: 0;
|
|
@@ -40,11 +41,10 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
40
41
|
gap: var(--spacer_h);
|
|
41
42
|
padding: var(--spacer_h);
|
|
42
43
|
border-bottom: 1px solid var(--c_border);
|
|
44
|
+
flex-shrink: 0;
|
|
43
45
|
}
|
|
44
46
|
::slotted([slot="logo"]) {
|
|
45
47
|
margin-right: auto;
|
|
46
|
-
}
|
|
47
|
-
::slotted([slot="logo"]) {
|
|
48
48
|
flex: 1;
|
|
49
49
|
min-width: 0;
|
|
50
50
|
opacity: 1;
|
|
@@ -70,7 +70,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
70
70
|
background: var(--c_bg_hover);
|
|
71
71
|
}
|
|
72
72
|
#content {
|
|
73
|
-
|
|
73
|
+
flex: 1;
|
|
74
|
+
min-height: 0;
|
|
74
75
|
overflow-y: auto;
|
|
75
76
|
overflow-x: hidden;
|
|
76
77
|
display: flex;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<body>
|
|
24
24
|
<!-- Left Side Panel -->
|
|
25
25
|
<k-side-panel>
|
|
26
|
-
<h3 slot="logo">Kempo</h3>
|
|
26
|
+
<h3 slot="logo" class="m0">Kempo</h3>
|
|
27
27
|
<k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
|
|
28
28
|
<k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
|
|
29
29
|
<k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
<!-- Right Side Panel -->
|
|
39
39
|
<k-side-panel side="right">
|
|
40
|
-
<h3 slot="logo">Tools</h3>
|
|
40
|
+
<h3 slot="logo" class="m0">Tools</h3>
|
|
41
41
|
<k-side-panel-item icon="notification" href="#">Notifications</k-side-panel-item>
|
|
42
42
|
<k-side-panel-item icon="chat" href="#">Messages</k-side-panel-item>
|
|
43
43
|
<k-side-panel-label>Recent</k-side-panel-label>
|
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={
|
|
1
|
+
import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={leftPanelWidth:{type:String,state:!0},rightPanelWidth:{type:String,state:!0}};constructor(){super(),this.leftPanelWidth="0px",this.rightPanelWidth="0px",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const t=document.querySelector('k-side-panel:not([side="right"])');t&&(this.leftPanelWidth=t.collapsed?"3.5rem":"16rem");const e=document.querySelector('k-side-panel[side="right"]');e&&(this.rightPanelWidth=e.collapsed?"3.5rem":"16rem")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(t){"right"===t.detail.side?this.rightPanelWidth=t.detail.width:this.leftPanelWidth=t.detail.width}render(){return html`
|
|
2
2
|
<main>
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</main>
|
|
5
5
|
`}static styles=css`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
|
-
margin-left: var(--panel-width, 0px);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
:host([panel-side="right"]) {
|
|
12
|
-
margin-left: 0;
|
|
13
|
-
margin-right: var(--panel-width, 0px);
|
|
14
|
-
transition: margin-right var(--animation_ms, 256ms);
|
|
8
|
+
margin-left: var(--left-panel-width, 0px);
|
|
9
|
+
margin-right: var(--right-panel-width, 0px);
|
|
10
|
+
transition: margin-left var(--animation_ms, 256ms), margin-right var(--animation_ms, 256ms);
|
|
15
11
|
}
|
|
16
12
|
main {
|
|
17
13
|
max-width: var(--container_width, 90rem);
|
|
@@ -21,4 +17,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
|
|
|
21
17
|
padding-left: var(--spacer);
|
|
22
18
|
padding-right: var(--spacer);
|
|
23
19
|
}
|
|
24
|
-
`;updated(){super.updated(),this.style.setProperty("--panel-width",this.
|
|
20
|
+
`;updated(){super.updated(),this.style.setProperty("--left-panel-width",this.leftPanelWidth),this.style.setProperty("--right-panel-width",this.rightPanelWidth)}}window.customElements.define("k-main",Main);
|
|
@@ -2,7 +2,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
2
2
|
<div id="header">
|
|
3
3
|
<slot name="logo"></slot>
|
|
4
4
|
<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
|
|
5
|
-
<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
|
|
5
|
+
<k-icon name="arrow-line" direction="${(()=>"right"===this.side?this.collapsed?"left":"right":this.collapsed?"right":"left")()}"></k-icon>
|
|
6
6
|
</button>
|
|
7
7
|
</div>
|
|
8
8
|
<div id="content">
|
|
@@ -13,7 +13,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
13
13
|
--bg: var(--c_bg);
|
|
14
14
|
--width-expanded: 16rem;
|
|
15
15
|
--transition-duration: var(--animation_ms, 256ms);
|
|
16
|
-
display:
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
17
18
|
position: fixed;
|
|
18
19
|
top: 0;
|
|
19
20
|
left: 0;
|
|
@@ -40,11 +41,10 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
40
41
|
gap: var(--spacer_h);
|
|
41
42
|
padding: var(--spacer_h);
|
|
42
43
|
border-bottom: 1px solid var(--c_border);
|
|
44
|
+
flex-shrink: 0;
|
|
43
45
|
}
|
|
44
46
|
::slotted([slot="logo"]) {
|
|
45
47
|
margin-right: auto;
|
|
46
|
-
}
|
|
47
|
-
::slotted([slot="logo"]) {
|
|
48
48
|
flex: 1;
|
|
49
49
|
min-width: 0;
|
|
50
50
|
opacity: 1;
|
|
@@ -70,7 +70,8 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from".
|
|
|
70
70
|
background: var(--c_bg_hover);
|
|
71
71
|
}
|
|
72
72
|
#content {
|
|
73
|
-
|
|
73
|
+
flex: 1;
|
|
74
|
+
min-height: 0;
|
|
74
75
|
overflow-y: auto;
|
|
75
76
|
overflow-x: hidden;
|
|
76
77
|
display: flex;
|
package/package.json
CHANGED