@lazhus/kg-ui 0.9.3 → 0.9.4
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/custom-elements.json +10 -2
- package/dist/components/kg-tabs.js +12 -6
- package/package.json +1 -1
- package/types/components/kg-tabs.d.ts +3 -0
- package/types/index.d.ts +1 -0
package/custom-elements.json
CHANGED
|
@@ -5690,13 +5690,13 @@
|
|
|
5690
5690
|
"text": "object"
|
|
5691
5691
|
},
|
|
5692
5692
|
"static": true,
|
|
5693
|
-
"default": "{ activeTab: { type: String, reflect: true }, vertical: { type: Boolean, reflect: true } }"
|
|
5693
|
+
"default": "{ activeTab: { type: String, reflect: true }, vertical: { type: Boolean, reflect: true }, fullWidth: { type: Boolean, reflect: true, attribute: 'full-width' } }"
|
|
5694
5694
|
},
|
|
5695
5695
|
{
|
|
5696
5696
|
"kind": "field",
|
|
5697
5697
|
"name": "styles",
|
|
5698
5698
|
"static": true,
|
|
5699
|
-
"default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem;
|
|
5699
|
+
"default": "css` :host { display: flex; flex-direction: column; width: 100%; font-family: inherit; } :host([vertical]) { flex-direction: row; } .tabs-header { display: flex; border-bottom: 2px solid var(--kg-border); gap: 0.5rem; padding: 0 0.5rem; position: relative; z-index: 1; } :host([vertical]) .tabs-header { flex-direction: column; border-bottom: none; border-right: 2px solid var(--kg-border); padding: 0.5rem 0 0.5rem 0.5rem; gap: 0.25rem; min-width: 180px; } .tab-trigger { padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kg-text-muted); cursor: pointer; position: relative; white-space: nowrap; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border: none; outline: none; border-radius: 8px 8px 0 0; } :host([full-width]) .tab-trigger { flex: 1; min-width: 0; text-align: center; } :host([vertical]) .tab-trigger { padding: 0.75rem 1rem; text-align: left; border-radius: 8px 0 0 8px; margin-bottom: 0; margin-right: 0px; } .tab-trigger:hover { color: var(--kg-primary); background: rgba(65, 171, 52, 0.05); } .tab-trigger.active { color: var(--kg-primary); background: rgba(65, 171, 52, 0.08); z-index: 2; } /* Standard Underline */ .tab-trigger::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--kg-primary); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px 2px 0 0; } :host([vertical]) .tab-trigger::after { bottom: 0; left: auto; right: -2px; width: 2px; height: 100%; transform: scaleY(0); border-radius: 2px 0 0 2px; } .tab-trigger.active::after { transform: scaleX(1); } :host([vertical]) .tab-trigger.active::after { transform: scaleY(1); } .tabs-content { padding: 1.5rem 0; flex: 1; } :host([vertical]) .tabs-content { padding: 0 1.5rem; } `"
|
|
5700
5700
|
},
|
|
5701
5701
|
{
|
|
5702
5702
|
"kind": "method",
|
|
@@ -5743,6 +5743,14 @@
|
|
|
5743
5743
|
"text": "boolean"
|
|
5744
5744
|
},
|
|
5745
5745
|
"default": "false"
|
|
5746
|
+
},
|
|
5747
|
+
{
|
|
5748
|
+
"kind": "field",
|
|
5749
|
+
"name": "fullWidth",
|
|
5750
|
+
"type": {
|
|
5751
|
+
"text": "boolean"
|
|
5752
|
+
},
|
|
5753
|
+
"default": "false"
|
|
5746
5754
|
}
|
|
5747
5755
|
],
|
|
5748
5756
|
"events": [
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a)(e,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as i}from"lit";class o extends r{constructor(){super(),this.activeTab="",this.vertical=!1}firstUpdated(){if(this._updatePanels(),!this.activeTab){const t=this.querySelector("kg-tab-panel");t&&(this.activeTab=t.value)}}updated(t){t.has("activeTab")&&this._updatePanels()}_handleTabClick(t){this.activeTab=t,this.dispatchEvent(new CustomEvent("kg-tab-change",{detail:{value:t},bubbles:!0,composed:!0}))}_updatePanels(){Array.from(this.querySelectorAll("kg-tab-panel")).forEach(t=>{t.active=t.value===this.activeTab}),this.requestUpdate()}render(){const t=Array.from(this.querySelectorAll("kg-tab-panel"));return i`
|
|
1
|
+
var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a)(e,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as i}from"lit";class o extends r{constructor(){super(),this.activeTab="",this.vertical=!1,this.fullWidth=!1}firstUpdated(){if(this._updatePanels(),!this.activeTab){const t=this.querySelector("kg-tab-panel");t&&(this.activeTab=t.value)}}updated(t){t.has("activeTab")&&this._updatePanels()}_handleTabClick(t){this.activeTab=t,this.dispatchEvent(new CustomEvent("kg-tab-change",{detail:{value:t},bubbles:!0,composed:!0}))}_updatePanels(){Array.from(this.querySelectorAll("kg-tab-panel")).forEach(t=>{t.active=t.value===this.activeTab}),this.requestUpdate()}render(){const t=Array.from(this.querySelectorAll("kg-tab-panel"));return i`
|
|
2
2
|
<div class="tabs-header">
|
|
3
3
|
${t.map(t=>i`
|
|
4
4
|
<button
|
|
@@ -12,7 +12,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
12
12
|
<div class="tabs-content">
|
|
13
13
|
<slot @slotchange="${this._updatePanels}"></slot>
|
|
14
14
|
</div>
|
|
15
|
-
`}}e(o,"properties",{activeTab:{type:String,reflect:!0},vertical:{type:Boolean,reflect:!0}}),e(o,"styles",a`
|
|
15
|
+
`}}e(o,"properties",{activeTab:{type:String,reflect:!0},vertical:{type:Boolean,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"}}),e(o,"styles",a`
|
|
16
16
|
:host {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
@@ -29,8 +29,8 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
29
29
|
border-bottom: 2px solid var(--kg-border);
|
|
30
30
|
gap: 0.5rem;
|
|
31
31
|
padding: 0 0.5rem;
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
position: relative;
|
|
33
|
+
z-index: 1;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
:host([vertical]) .tabs-header {
|
|
@@ -55,7 +55,12 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
55
55
|
border: none;
|
|
56
56
|
outline: none;
|
|
57
57
|
border-radius: 8px 8px 0 0;
|
|
58
|
-
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([full-width]) .tab-trigger {
|
|
61
|
+
flex: 1;
|
|
62
|
+
min-width: 0;
|
|
63
|
+
text-align: center;
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
:host([vertical]) .tab-trigger {
|
|
@@ -63,7 +68,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
63
68
|
text-align: left;
|
|
64
69
|
border-radius: 8px 0 0 8px;
|
|
65
70
|
margin-bottom: 0;
|
|
66
|
-
margin-right:
|
|
71
|
+
margin-right: 0px;
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
.tab-trigger:hover {
|
|
@@ -74,6 +79,7 @@ var t=Object.defineProperty,e=(e,r,a)=>((e,r,a)=>r in e?t(e,r,{enumerable:!0,con
|
|
|
74
79
|
.tab-trigger.active {
|
|
75
80
|
color: var(--kg-primary);
|
|
76
81
|
background: rgba(65, 171, 52, 0.08);
|
|
82
|
+
z-index: 2;
|
|
77
83
|
}
|
|
78
84
|
|
|
79
85
|
/* Standard Underline */
|
package/package.json
CHANGED
|
@@ -6,6 +6,8 @@ export class kgtabs extends LitElement {
|
|
|
6
6
|
activeTab: string;
|
|
7
7
|
/** */
|
|
8
8
|
vertical: boolean;
|
|
9
|
+
/** */
|
|
10
|
+
fullWidth: boolean;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
declare global {
|
|
@@ -18,6 +20,7 @@ declare global {
|
|
|
18
20
|
'kg-tabs': {
|
|
19
21
|
activeTab?: string;
|
|
20
22
|
vertical?: boolean;
|
|
23
|
+
fullWidth?: boolean;
|
|
21
24
|
onKgTabChange?: (e: any) => void;
|
|
22
25
|
[key: string]: any;
|
|
23
26
|
};
|