@lazhus/kg-ui 0.9.2 → 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
CHANGED
|
@@ -1407,13 +1407,13 @@
|
|
|
1407
1407
|
"text": "object"
|
|
1408
1408
|
},
|
|
1409
1409
|
"static": true,
|
|
1410
|
-
"default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean }, bordered: { type: Boolean }, hover: { type: Boolean }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
|
|
1410
|
+
"default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
|
|
1411
1411
|
},
|
|
1412
1412
|
{
|
|
1413
1413
|
"kind": "field",
|
|
1414
1414
|
"name": "styles",
|
|
1415
1415
|
"static": true,
|
|
1416
|
-
"default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted);
|
|
1416
|
+
"default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
|
|
1417
1417
|
},
|
|
1418
1418
|
{
|
|
1419
1419
|
"kind": "method",
|
|
@@ -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": [
|
|
@@ -169,7 +169,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
169
169
|
</div>
|
|
170
170
|
`:""}
|
|
171
171
|
</div>
|
|
172
|
-
`}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean},bordered:{type:Boolean},hover:{type:Boolean},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",s`
|
|
172
|
+
`}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",s`
|
|
173
173
|
:host {
|
|
174
174
|
display: block;
|
|
175
175
|
width: 100%;
|
|
@@ -211,11 +211,8 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
211
211
|
padding: 12px 16px;
|
|
212
212
|
font-weight: 600;
|
|
213
213
|
color: var(--kg-text-muted);
|
|
214
|
-
white-space: nowrap;
|
|
215
214
|
user-select: none;
|
|
216
215
|
transition: background 0.2s;
|
|
217
|
-
overflow: hidden;
|
|
218
|
-
text-overflow: ellipsis;
|
|
219
216
|
}
|
|
220
217
|
|
|
221
218
|
th.sortable {
|
|
@@ -231,9 +228,6 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
231
228
|
padding: 12px 16px;
|
|
232
229
|
border-bottom: 1px solid var(--datagrid-border);
|
|
233
230
|
transition: background 0.2s;
|
|
234
|
-
overflow: hidden;
|
|
235
|
-
text-overflow: ellipsis;
|
|
236
|
-
white-space: nowrap;
|
|
237
231
|
}
|
|
238
232
|
|
|
239
233
|
tr:last-child td {
|
|
@@ -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
|
};
|