@lazhus/kg-ui 0.10.12 → 0.10.14
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 +6 -6
- package/dist/components/kg-avatar.js +5 -5
- package/dist/components/kg-breadcrumbs.js +2 -2
- package/dist/components/kg-datagrid.js +47 -25
- package/dist/components/kg-tag.js +5 -5
- package/dist/components/kg-toast.js +5 -5
- package/dist/kg-ui.css +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
"kind": "field",
|
|
203
203
|
"name": "styles",
|
|
204
204
|
"static": true,
|
|
205
|
-
"default": "css` :host { display: inline-block; vertical-align: middle; position: relative; line-height: 0; } .avatar-wrapper { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, #eee); color: var(--kg-text-muted, #666); font-weight: 700; overflow: hidden; user-select: none; transition: all 0.2s ease; position: relative; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } .initials { text-transform: uppercase; } /* Shapes */ .circle { border-radius: 50%; } .square { border-radius: 0; } .rounded { border-radius: var(--kg-radius-md, 8px); } /* Sizes */ .tiny { width: 24px; height: 24px; font-size: 0.7rem; } .small { width: 32px; height: 32px; font-size: 0.85rem; } .medium { width: 48px; height: 48px; font-size: 1.1rem; } .large { width: 64px; height: 64px; font-size: 1.5rem; } .huge { width: 96px; height: 96px; font-size: 2.2rem; } .massive { width: 128px; height: 128px; font-size: 3rem; } /* Status Badge */ .status-badge { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: 50%; border: 2px solid var(--kg-bg, white); z-index: 1; } .online { background-color: #
|
|
205
|
+
"default": "css` :host { display: inline-block; vertical-align: middle; position: relative; line-height: 0; } .avatar-wrapper { display: flex; align-items: center; justify-content: center; background: var(--kg-bg-secondary, #eee); color: var(--kg-text-muted, #666); font-weight: 700; overflow: hidden; user-select: none; transition: all 0.2s ease; position: relative; } .avatar-img { width: 100%; height: 100%; object-fit: cover; } .initials { text-transform: uppercase; } /* Shapes */ .circle { border-radius: 50%; } .square { border-radius: 0; } .rounded { border-radius: var(--kg-radius-md, 8px); } /* Sizes */ .tiny { width: 24px; height: 24px; font-size: 0.7rem; } .small { width: 32px; height: 32px; font-size: 0.85rem; } .medium { width: 48px; height: 48px; font-size: 1.1rem; } .large { width: 64px; height: 64px; font-size: 1.5rem; } .huge { width: 96px; height: 96px; font-size: 2.2rem; } .massive { width: 128px; height: 128px; font-size: 3rem; } /* Status Badge */ .status-badge { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: 50%; border: 2px solid var(--kg-bg, white); z-index: 1; } .online { background-color: var(--kg-primary, #3fae26); } .offline { background-color: #9e9e9e; } .away { background-color: #fbb140; } .busy { background-color: #db2828; } .numeric-badge { position: absolute; top: -4px; right: -4px; background: #db2828; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 2px solid var(--kg-bg, white); font-weight: bold; line-height: 1; z-index: 2; } /* Semantic Colors for Avatar Background */ .primary { background-color: var(--kg-primary); color: white; } .secondary { background-color: var(--kg-secondary); color: white; } .tertiary { background-color: var(--kg-tertiary); color: white; } .error { background-color: #db2828; color: white; } .success { background-color: var(--kg-primary, #3fae26); color: white; } .warning { background-color: #fbb140; color: white; } .info { background-color: #1367FF; color: white; } /* Custom Color Helper */ .custom-color { background-color: var(--avatar-bg); color: white; } `"
|
|
206
206
|
},
|
|
207
207
|
{
|
|
208
208
|
"kind": "method",
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
"kind": "field",
|
|
287
287
|
"name": "styles",
|
|
288
288
|
"static": true,
|
|
289
|
-
"default": "css` :host { display: block; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--kg-text-muted, #666); } ::slotted(a), ::slotted(span) { display: flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.2s; } ::slotted(a:hover) { color: var(--kg-primary, #
|
|
289
|
+
"default": "css` :host { display: block; } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--kg-text-muted, #666); } ::slotted(a), ::slotted(span) { display: flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; transition: color 0.2s; } ::slotted(a:hover) { color: var(--kg-primary, #3fae26); } ::slotted(.active) { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { display: flex; align-items: center; user-select: none; font-size: 0.8em; opacity: 0.5; } `"
|
|
290
290
|
},
|
|
291
291
|
{
|
|
292
292
|
"kind": "method",
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
"kind": "field",
|
|
336
336
|
"name": "styles",
|
|
337
337
|
"static": true,
|
|
338
|
-
"default": "css` :host { display: inline-flex; align-items: center; gap: 0.5rem; } .item { color: var(--kg-text-muted, #666); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .item:hover { color: var(--kg-primary, #
|
|
338
|
+
"default": "css` :host { display: inline-flex; align-items: center; gap: 0.5rem; } .item { color: var(--kg-text-muted, #666); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .item:hover { color: var(--kg-primary, #3fae26); } .item.active { color: var(--kg-text, #1a1a1a); font-weight: 600; pointer-events: none; } .separator { color: var(--kg-text-muted, #999); opacity: 0.6; font-size: 0.85em; user-select: none; margin: 0 2px; } :host(:last-child) .separator { display: none; } `"
|
|
339
339
|
},
|
|
340
340
|
{
|
|
341
341
|
"kind": "method",
|
|
@@ -1526,7 +1526,7 @@
|
|
|
1526
1526
|
"kind": "field",
|
|
1527
1527
|
"name": "styles",
|
|
1528
1528
|
"static": true,
|
|
1529
|
-
"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; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !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; } /* Sticky Header & Sticky Columns */ :host([sticky-header]) .table-container { overflow: auto; max-height: var(--datagrid-max-height, 70vh); } :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 10; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } th.sticky-col, td.sticky-col, th.sticky-checkbox, td.sticky-checkbox { position: sticky; } th.sticky-checkbox { left: 0; z-index: 15; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-checkbox { top: 0; left: 0; z-index: 25; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } td.sticky-checkbox { left: 0; z-index: 8; background-color: var(--kg-
|
|
1529
|
+
"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; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !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; } /* Sticky Header & Sticky Columns */ :host([sticky-header]) .table-container { overflow: auto; max-height: var(--datagrid-max-height, 70vh); } :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 10; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } th.sticky-col, td.sticky-col, th.sticky-checkbox, td.sticky-checkbox { position: sticky; } th.sticky-checkbox { left: 0; z-index: 15; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-checkbox { top: 0; left: 0; z-index: 25; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } td.sticky-checkbox { left: 0; z-index: 8; background-color: var(--kg-bg, #ffffff); } th.sticky-col { z-index: 12; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-col { top: 0; z-index: 20; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border), 2px 0 5px -2px rgba(0, 0, 0, 0.12); } td.sticky-col { z-index: 5; background-color: var(--kg-bg, #ffffff); box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12); } /* Striped rows */ :host([striped]) tbody tr:nth-child(even) td.sticky-col, :host([striped]) tbody tr:nth-child(even) td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); } /* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */ :host([hover]) tbody tr:hover td.sticky-col, :host([hover]) tbody tr:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)); } :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col, :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc)); } /* Selected rows */ tbody tr.selected td.sticky-col, tbody tr.selected td.sticky-checkbox, :host([hover]) tbody tr.selected:hover td.sticky-col, :host([hover]) tbody tr.selected:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff) !important; background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important; } /* Row danger */ tbody tr.row-danger td.sticky-col, tbody tr.row-danger td.sticky-checkbox, :host([hover]) tbody tr.row-danger:hover td.sticky-col, :host([hover]) tbody tr.row-danger:hover td.sticky-checkbox { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; background-image: none !important; } `"
|
|
1530
1530
|
},
|
|
1531
1531
|
{
|
|
1532
1532
|
"kind": "method",
|
|
@@ -6278,7 +6278,7 @@
|
|
|
6278
6278
|
"kind": "field",
|
|
6279
6279
|
"name": "styles",
|
|
6280
6280
|
"static": true,
|
|
6281
|
-
"default": "css` :host { display: inline-flex; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.8em; border-radius: var(--kg-radius-sm, 4px); font-size: 0.85rem; font-weight: 600; line-height: 1; gap: 0.4em; background: var(--kg-bg-secondary, #eee); color: var(--kg-text, #333); border: 1px solid transparent; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pill { border-radius: 100px; } /* Sizes */ .mini { font-size: 0.65rem; padding: 0.2em 0.5em; } .tiny { font-size: 0.75rem; padding: 0.22em 0.6em; } .small { font-size: 0.8rem; padding: 0.25em 0.7em; } .medium { font-size: 0.9rem; padding: 0.3em 0.85em; } .large { font-size: 1rem; padding: 0.35em 1em; } /* Colors */ .primary { background: var(--kg-primary); color: white; } .secondary { background: var(--kg-secondary); color: white; } .tertiary { background: var(--kg-tertiary); color: white; } .error { background: #DB2828; color: white; } .success { background: #
|
|
6281
|
+
"default": "css` :host { display: inline-flex; } .tag { display: inline-flex; align-items: center; justify-content: center; padding: 0.25em 0.8em; border-radius: var(--kg-radius-sm, 4px); font-size: 0.85rem; font-weight: 600; line-height: 1; gap: 0.4em; background: var(--kg-bg-secondary, #eee); color: var(--kg-text, #333); border: 1px solid transparent; user-select: none; transition: all 0.2s ease; white-space: nowrap; } .pill { border-radius: 100px; } /* Sizes */ .mini { font-size: 0.65rem; padding: 0.2em 0.5em; } .tiny { font-size: 0.75rem; padding: 0.22em 0.6em; } .small { font-size: 0.8rem; padding: 0.25em 0.7em; } .medium { font-size: 0.9rem; padding: 0.3em 0.85em; } .large { font-size: 1rem; padding: 0.35em 1em; } /* Colors */ .primary { background: var(--kg-primary); color: white; } .secondary { background: var(--kg-secondary); color: white; } .tertiary { background: var(--kg-tertiary); color: white; } .error { background: #DB2828; color: white; } .success { background: var(--kg-primary, #3fae26); color: white; } .warning { background: #FBB140; color: white; } /* Basic (Outlined) */ .basic { background: transparent; border-color: currentColor; color: var(--kg-text-muted); } .basic.primary { color: var(--kg-primary); } .basic.secondary { color: var(--kg-secondary); } .basic.tertiary { color: var(--kg-tertiary); } .basic.error { color: #DB2828; } .basic.success { color: var(--kg-primary, #3fae26); } .close-icon { cursor: pointer; opacity: 0.7; display: flex; align-items: center; margin-right: -0.3em; font-size: 1.1em; } .close-icon:hover { opacity: 1; } /* Custom Colors */ .custom-color { background: var(--kg-tag-color); color: white; } .basic.custom-color { background: transparent; border-color: var(--kg-tag-color); color: var(--kg-tag-color); } `"
|
|
6282
6282
|
},
|
|
6283
6283
|
{
|
|
6284
6284
|
"kind": "method",
|
|
@@ -6761,7 +6761,7 @@
|
|
|
6761
6761
|
"kind": "field",
|
|
6762
6762
|
"name": "styles",
|
|
6763
6763
|
"static": true,
|
|
6764
|
-
"default": "css` :host { --toast-accent: var(--kg-secondary); display: block; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(-20px) scale(0.95); } :host([visible]) { opacity: 1; transform: translateY(0) scale(1); } .toast-container { pointer-events: auto; min-width: 260px; max-width: 320px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; position: relative; border-left: 5px solid var(--toast-accent); transition: all 0.3s ease; } .toast-header { font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; padding-right: 1.5rem; color: var(--toast-text-color, var(--kg-text)); } .toast-message { font-size: 0.85rem; line-height: 1.4; color: var(--toast-text-color, var(--kg-text)); opacity: 0.85; } .close-btn { position: absolute; top: 0.4rem; right: 0.4rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; font-size: 0.8rem; transition: all 0.2s; border-radius: 50%; color: var(--toast-text-color, var(--kg-text)); } .close-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } /* Glassmorphic Vibrant Colors */ :host([color=\"primary\"]) { --toast-accent: var(--kg-primary); --toast-bg: rgba(65, 171, 52, 0.15); --toast-text-color: #
|
|
6764
|
+
"default": "css` :host { --toast-accent: var(--kg-secondary); display: block; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; transform: translateY(-20px) scale(0.95); } :host([visible]) { opacity: 1; transform: translateY(0) scale(1); } .toast-container { pointer-events: auto; min-width: 260px; max-width: 320px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; position: relative; border-left: 5px solid var(--toast-accent); transition: all 0.3s ease; } .toast-header { font-weight: 700; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; padding-right: 1.5rem; color: var(--toast-text-color, var(--kg-text)); } .toast-message { font-size: 0.85rem; line-height: 1.4; color: var(--toast-text-color, var(--kg-text)); opacity: 0.85; } .close-btn { position: absolute; top: 0.4rem; right: 0.4rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; font-size: 0.8rem; transition: all 0.2s; border-radius: 50%; color: var(--toast-text-color, var(--kg-text)); } .close-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); } /* Glassmorphic Vibrant Colors */ :host([color=\"primary\"]) { --toast-accent: var(--kg-primary); --toast-bg: rgba(65, 171, 52, 0.15); --toast-text-color: var(--kg-primary-active, #2a7319); } :host([color=\"secondary\"]) { --toast-accent: var(--kg-secondary); --toast-bg: rgba(19, 103, 255, 0.12); --toast-text-color: #0d46ad; } :host([color=\"tertiary\"]) { --toast-accent: var(--kg-tertiary); --toast-bg: rgba(251, 177, 64, 0.18); --toast-text-color: #8c5a00; } :host([color=\"error\"]) { --toast-accent: #DB2828; --toast-bg: rgba(219, 40, 40, 0.12); --toast-text-color: #b21e1e; } .toast-container { background-color: var(--toast-bg); } /* Dark Mode Text Adjustments */ :host-context([data-theme='dark']) { --toast-text-color: white; } :host-context([data-theme='dark']) :host([color=\"primary\"]) { --toast-bg: rgba(65, 171, 52, 0.25); } :host-context([data-theme='dark']) :host([color=\"secondary\"]) { --toast-bg: rgba(19, 103, 255, 0.2); } :host-context([data-theme='dark']) :host([color=\"tertiary\"]) { --toast-bg: rgba(251, 177, 64, 0.3); } :host-context([data-theme='dark']) :host([color=\"error\"]) { --toast-bg: rgba(219, 40, 40, 0.25); } /* Dark Mode Adjustment */ :host-context([data-theme='dark']) .toast-container { box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset; } `"
|
|
6765
6765
|
},
|
|
6766
6766
|
{
|
|
6767
6767
|
"kind": "method",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var e=Object.defineProperty,
|
|
2
|
-
<div class="${
|
|
1
|
+
var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i)(r,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as o}from"lit";class a extends t{constructor(){super(),this.size="medium",this.shape="circle",this.alt="Avatar"}getInitials(){if(!this.name)return"";const e=this.name.split(" ");return e.length>1?(e[0][0]+e[e.length-1][0]).toUpperCase():e[0][0].toUpperCase()}render(){const e=["primary","secondary","tertiary","error","success","warning","info"].includes(this.color),r=this.color&&!e,t=["avatar-wrapper",this.size,this.shape,this.color&&e?this.color:"",r?"custom-color":""].join(" "),i=r?`--avatar-bg: ${this.color};`:"";return o`
|
|
2
|
+
<div class="${t}" style="${i}" title="${this.name||this.alt}">
|
|
3
3
|
${this.src?o`<img class="avatar-img" src="${this.src}" alt="${this.alt}" @error=${()=>this.src=""} />`:o`<span class="initials">${this.getInitials()}</span>`}
|
|
4
4
|
</div>
|
|
5
5
|
${this.status?o`<div class="status-badge ${this.status} ${this.shape}"></div>`:""}
|
|
6
6
|
${this.badge?o`<div class="numeric-badge">${this.badge}</div>`:""}
|
|
7
|
-
`}}
|
|
7
|
+
`}}r(a,"properties",{src:{type:String},alt:{type:String},name:{type:String},size:{type:String},shape:{type:String},status:{type:String},badge:{type:String},color:{type:String}}),r(a,"styles",i`
|
|
8
8
|
:host {
|
|
9
9
|
display: inline-block;
|
|
10
10
|
vertical-align: middle;
|
|
@@ -60,7 +60,7 @@ var e=Object.defineProperty,t=(t,r,i)=>((t,r,i)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
60
60
|
z-index: 1;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.online { background-color: #
|
|
63
|
+
.online { background-color: var(--kg-primary, #3fae26); }
|
|
64
64
|
.offline { background-color: #9e9e9e; }
|
|
65
65
|
.away { background-color: #fbb140; }
|
|
66
66
|
.busy { background-color: #db2828; }
|
|
@@ -85,7 +85,7 @@ var e=Object.defineProperty,t=(t,r,i)=>((t,r,i)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
85
85
|
.secondary { background-color: var(--kg-secondary); color: white; }
|
|
86
86
|
.tertiary { background-color: var(--kg-tertiary); color: white; }
|
|
87
87
|
.error { background-color: #db2828; color: white; }
|
|
88
|
-
.success { background-color: #
|
|
88
|
+
.success { background-color: var(--kg-primary, #3fae26); color: white; }
|
|
89
89
|
.warning { background-color: #fbb140; color: white; }
|
|
90
90
|
.info { background-color: #1367FF; color: white; }
|
|
91
91
|
|
|
@@ -29,7 +29,7 @@ var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
::slotted(a:hover) {
|
|
32
|
-
color: var(--kg-primary, #
|
|
32
|
+
color: var(--kg-primary, #3fae26);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
::slotted(.active) {
|
|
@@ -71,7 +71,7 @@ var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,con
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
.item:hover {
|
|
74
|
-
color: var(--kg-primary, #
|
|
74
|
+
color: var(--kg-primary, #3fae26);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.item.active {
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=(e,i
|
|
1
|
+
var t=Object.defineProperty,e=(e,r,i)=>((e,r,i)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i)(e,"symbol"!=typeof r?r+"":r,i);import{LitElement as r,css as i,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class s extends r{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this.stickyHeader=!1,this.maxHeight="",this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(t){if(!this.selectable||"single"===this.selectionMode)return;const e=t.detail.checked;this.selectedRows=e?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(t,e){if(this.selectable)if(e.stopPropagation(),"single"===this.selectionMode)this._isSelected(t)||(this.selectedRows=[t],this._emitSelectionChange());else{let r;r="change"===e.type&&void 0!==e.detail&&void 0!==e.detail.checked?e.detail.checked:!this._isSelected(t),this.selectedRows=r?[...this.selectedRows,t]:this.selectedRows.filter(e=>e!==t),this._emitSelectionChange()}}_isSelected(t){return this.selectedRows.includes(t)}_rowClasses(t){const e=[];if(this._isSelected(t)&&e.push("selected"),"function"==typeof this.rowClassName){const r=this.rowClassName(t);r&&e.push(r)}return e.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(t){(t.sortable||this.sortable)&&(this._sortColumn===t.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=t.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let t=this.pageSizeOptions;if("string"==typeof t)try{t=JSON.parse(t)}catch(e){t=t.split(",").map(t=>Number(t.trim()))}return Array.isArray(t)&&0!==t.length||(t=[10,20,50,100]),t.map(t=>Number(t))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let t=[...this.data||[]];if(this._sortColumn&&t.sort((t,e)=>{const r=t[this._sortColumn],i=e[this._sortColumn];return r<i?"asc"===this._sortDirection?-1:1:r>i?"asc"===this._sortDirection?1:-1:0}),this.pagination){const e=Number(this.pageSize)||10,r=((Number(this.currentPage)||1)-1)*e,i=r+e;return{data:t.slice(r,i),total:t.length}}return{data:t,total:t.length}}_changePage(t){const e=Number(t);if(e<1)return;const r=Number(this.pageSize)||10,i=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(e>Math.max(1,Math.ceil(i/r)))return;this.currentPage=e;const a={page:e,pageSize:r};this.dispatchEvent(new CustomEvent("page-change",{detail:a,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:a,bubbles:!0,composed:!0}))}_handlePageSizeChange(t){const e=parseInt(t.target.value,10)||10;this.pageSize=e,this.currentPage=1,this.requestUpdate();const r={pageSize:e,page:1},i={page:1,pageSize:e};this.dispatchEvent(new CustomEvent("page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:i,bubbles:!0,composed:!0}))}_renderCellContent(t,e){if(!t.render)return e[t.field];const r=t.render(e);return"string"==typeof r?o(r):r}_renderHeaderContent(t){if(t.headerRender){const e=t.headerRender(t);return"string"==typeof e?o(e):e}return t.label}_getMaxDepth(t){if(!t||0===t.length)return 1;let e=0;const r=(t,i)=>{e=Math.max(e,i),t.forEach(t=>{t.children&&t.children.length>0&&r(t.children,i+1)})};return r(t,1),e}_getLeafCount(t){return t.children&&0!==t.children.length?t.children.reduce((t,e)=>t+this._getLeafCount(e),0):1}_getLeafColumns(t=this.columns){if(!t)return[];const e=[],r=t=>{t.forEach(t=>{t.children&&t.children.length>0?r(t.children):e.push(t)})};return r(t),e}_getHeaderRows(){const t=this._getMaxDepth(this.columns),e=Array.from({length:t},()=>[]),r=(i,a)=>{i.forEach(i=>{const o=!i.children||0===i.children.length,s=this._getLeafCount(i),n=o?t-a:1;e[a].push({...i,colspan:s,rowspan:n}),i.children&&r(i.children,a+1)})};return r(this.columns,0),e}_hasStickyColumn(){return this._getLeafColumns().some(t=>this._isStickyCol(t))}_isStickyCol(t){return Boolean(t&&(t.sticky||"left"===t.fixed))}_getStickyLeft(t,e){if(!this._isStickyCol(t))return null;let r=0;this.selectable&&(r+=48);const i=this._getLeafColumns();for(let a=0;a<e;a++)this._isStickyCol(i[a])&&(r+=parseInt(i[a].width,10)||150);return`${r}px`}render(){const{data:t,total:e}=this._getProcessedData(),r=Number(this.pageSize)||10,i=Number(this.currentPage)||1,o=Number(e)||0,s=this.pagination?Math.max(1,Math.ceil(o/r)):1,n=this._getNormalizedPageSizeOptions(),d=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,c="single"===this.selectionMode,l=this._getHeaderRows(),h=l.length,g=this._getLeafColumns(),p=this._hasStickyColumn(),b=(()=>{const t=[],e=i-2,r=i+2+1;for(let i=1;i<=s;i++)(1===i||i===s||i>=e&&i<r)&&t.push(i);return t})();return a`
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<div class="table-container" style="${this.maxHeight?`max-height: ${this.maxHeight};`:""}">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
${
|
|
6
|
+
${l.map((t,e)=>a`
|
|
7
7
|
<tr>
|
|
8
8
|
${0===e&&this.selectable?a`
|
|
9
9
|
<th class="checkbox-cell ${p?"sticky-checkbox":""}" rowspan="${h}">
|
|
10
10
|
${c?"":a`
|
|
11
11
|
<kg-checkbox
|
|
12
|
-
.checked="${
|
|
12
|
+
.checked="${d}"
|
|
13
13
|
@change="${this._handleSelectAll}"
|
|
14
14
|
></kg-checkbox>
|
|
15
15
|
`}
|
|
16
16
|
</th>
|
|
17
17
|
`:""}
|
|
18
18
|
|
|
19
|
-
${t.map((t,e)=>{const
|
|
19
|
+
${t.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o=t.width?`width: ${t.width}; min-width: ${t.width}; max-width: ${t.width};`:"";return i&&(o+=` left: ${i};`),a`
|
|
20
20
|
<th
|
|
21
21
|
colspan="${t.colspan}"
|
|
22
22
|
rowspan="${t.rowspan}"
|
|
23
|
-
class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${
|
|
24
|
-
style="${
|
|
23
|
+
class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${r?"sticky-col":""}"
|
|
24
|
+
style="${o}"
|
|
25
25
|
@click="${()=>t.children?null:this._handleSort(t)}"
|
|
26
26
|
>
|
|
27
27
|
${this._renderHeaderContent(t)}
|
|
@@ -44,8 +44,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
44
44
|
<kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
|
|
45
45
|
</td>
|
|
46
46
|
`:""}
|
|
47
|
-
${g.map((t,e)=>{const
|
|
48
|
-
<td class="${
|
|
47
|
+
${g.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o="";return i&&(o+=`left: ${i};`),a`
|
|
48
|
+
<td class="${r?"sticky-col":""}" style="${o}">
|
|
49
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
50
50
|
</td>
|
|
51
51
|
`})}
|
|
@@ -79,8 +79,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
79
79
|
</td>
|
|
80
80
|
`:""}
|
|
81
81
|
|
|
82
|
-
${g.map((e,
|
|
83
|
-
<td class="${e.align?`align-${e.align}`:""} ${
|
|
82
|
+
${g.map((e,r)=>{const i=this._isStickyCol(e),o=this._getStickyLeft(e,r);let s="";return o&&(s+=`left: ${o};`),a`
|
|
83
|
+
<td class="${e.align?`align-${e.align}`:""} ${i?"sticky-col":""}" style="${s}">
|
|
84
84
|
${this._renderCellContent(e,t)}
|
|
85
85
|
</td>
|
|
86
86
|
`})}
|
|
@@ -90,18 +90,18 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
90
90
|
</table>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
|
-
${this.pagination&&
|
|
93
|
+
${this.pagination&&o>0?a`
|
|
94
94
|
<div class="pagination-footer">
|
|
95
95
|
<div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
|
|
96
96
|
<div class="pagination-info">
|
|
97
|
-
Toplam <strong>${
|
|
97
|
+
Toplam <strong>${o}</strong> kayıttan <strong>${(i-1)*r+1} - ${Math.min(i*r,o)}</strong> arası gösteriliyor
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
100
|
<div class="page-size-selector">
|
|
101
101
|
<span>Sayfa başına:</span>
|
|
102
|
-
<select class="page-size-select" .value="${String(
|
|
102
|
+
<select class="page-size-select" .value="${String(r)}" @change="${this._handlePageSizeChange}">
|
|
103
103
|
${n.map(t=>a`
|
|
104
|
-
<option value="${t}" ?selected="${
|
|
104
|
+
<option value="${t}" ?selected="${r===t}">${t}</option>
|
|
105
105
|
`)}
|
|
106
106
|
</select>
|
|
107
107
|
</div>
|
|
@@ -148,7 +148,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
148
148
|
|
|
149
149
|
<!-- Next Page -->
|
|
150
150
|
<kg-button
|
|
151
|
-
?disabled="${this.currentPage===
|
|
151
|
+
?disabled="${this.currentPage===s}"
|
|
152
152
|
@click="${()=>this._changePage(this.currentPage+1)}"
|
|
153
153
|
text
|
|
154
154
|
color="secondary"
|
|
@@ -160,8 +160,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
160
160
|
|
|
161
161
|
<!-- Last Page -->
|
|
162
162
|
<kg-button
|
|
163
|
-
?disabled="${this.currentPage===
|
|
164
|
-
@click="${()=>this._changePage(
|
|
163
|
+
?disabled="${this.currentPage===s}"
|
|
164
|
+
@click="${()=>this._changePage(s)}"
|
|
165
165
|
text
|
|
166
166
|
color="secondary"
|
|
167
167
|
size="medium"
|
|
@@ -173,7 +173,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
173
173
|
</div>
|
|
174
174
|
`:""}
|
|
175
175
|
</div>
|
|
176
|
-
`}}e(
|
|
176
|
+
`}}e(s,"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},rowClassName:{attribute:!1},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"},stickyHeader:{type:Boolean,reflect:!0,attribute:"sticky-header"},maxHeight:{type:String,attribute:"max-height"}}),e(s,"styles",i`
|
|
177
177
|
:host {
|
|
178
178
|
display: block;
|
|
179
179
|
width: 100%;
|
|
@@ -388,7 +388,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
388
388
|
td.sticky-checkbox {
|
|
389
389
|
left: 0;
|
|
390
390
|
z-index: 8;
|
|
391
|
-
background-color: var(--kg-
|
|
391
|
+
background-color: var(--kg-bg, #ffffff);
|
|
392
392
|
}
|
|
393
393
|
|
|
394
394
|
th.sticky-col {
|
|
@@ -405,22 +405,44 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
405
405
|
|
|
406
406
|
td.sticky-col {
|
|
407
407
|
z-index: 5;
|
|
408
|
-
background-color: var(--kg-
|
|
408
|
+
background-color: var(--kg-bg, #ffffff);
|
|
409
409
|
box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
|
|
410
410
|
}
|
|
411
411
|
|
|
412
|
+
/* Striped rows */
|
|
413
|
+
:host([striped]) tbody tr:nth-child(even) td.sticky-col,
|
|
414
|
+
:host([striped]) tbody tr:nth-child(even) td.sticky-checkbox {
|
|
415
|
+
background-color: var(--kg-surface, #f8fafc);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */
|
|
412
419
|
:host([hover]) tbody tr:hover td.sticky-col,
|
|
413
420
|
:host([hover]) tbody tr:hover td.sticky-checkbox {
|
|
414
|
-
background-color: var(--
|
|
421
|
+
background-color: var(--kg-bg, #ffffff);
|
|
422
|
+
background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff));
|
|
415
423
|
}
|
|
416
424
|
|
|
425
|
+
:host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col,
|
|
426
|
+
:host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox {
|
|
427
|
+
background-color: var(--kg-surface, #f8fafc);
|
|
428
|
+
background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc));
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Selected rows */
|
|
417
432
|
tbody tr.selected td.sticky-col,
|
|
418
|
-
tbody tr.selected td.sticky-checkbox
|
|
419
|
-
|
|
433
|
+
tbody tr.selected td.sticky-checkbox,
|
|
434
|
+
:host([hover]) tbody tr.selected:hover td.sticky-col,
|
|
435
|
+
:host([hover]) tbody tr.selected:hover td.sticky-checkbox {
|
|
436
|
+
background-color: var(--kg-bg, #ffffff) !important;
|
|
437
|
+
background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important;
|
|
420
438
|
}
|
|
421
439
|
|
|
440
|
+
/* Row danger */
|
|
422
441
|
tbody tr.row-danger td.sticky-col,
|
|
423
|
-
tbody tr.row-danger td.sticky-checkbox
|
|
442
|
+
tbody tr.row-danger td.sticky-checkbox,
|
|
443
|
+
:host([hover]) tbody tr.row-danger:hover td.sticky-col,
|
|
444
|
+
:host([hover]) tbody tr.row-danger:hover td.sticky-checkbox {
|
|
424
445
|
background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
|
|
446
|
+
background-image: none !important;
|
|
425
447
|
}
|
|
426
|
-
`),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",
|
|
448
|
+
`),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);export{s as kgdatagrid};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var e=Object.defineProperty,
|
|
2
|
-
<div class="${
|
|
1
|
+
var e=Object.defineProperty,r=(r,o,t)=>((r,o,t)=>o in r?e(r,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[o]=t)(r,"symbol"!=typeof o?o+"":o,t);import{LitElement as o,css as t,html as s}from"lit";class i extends o{constructor(){super(),this.size="medium",this.color=""}_handleClose(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("kg-close",{bubbles:!0,composed:!0}))}render(){const e=["primary","secondary","tertiary","error","success","warning"].includes(this.color),r=this.color&&!e,o=["tag",this.size,this.color&&e?this.color:"",r?"custom-color":"",this.pill?"pill":"",this.basic?"basic":""].join(" "),t=r?`--kg-tag-color: ${this.color};`:"";return s`
|
|
2
|
+
<div class="${o}" style="${t}">
|
|
3
3
|
<slot name="left"></slot>
|
|
4
4
|
<slot></slot>
|
|
5
5
|
<slot name="right"></slot>
|
|
@@ -7,7 +7,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
7
7
|
<span class="close-icon" @click="${this._handleClose}">✕</span>
|
|
8
8
|
`:""}
|
|
9
9
|
</div>
|
|
10
|
-
`}}
|
|
10
|
+
`}}r(i,"properties",{color:{type:String},size:{type:String},pill:{type:Boolean},basic:{type:Boolean},closable:{type:Boolean}}),r(i,"styles",t`
|
|
11
11
|
:host {
|
|
12
12
|
display: inline-flex;
|
|
13
13
|
}
|
|
@@ -44,7 +44,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
44
44
|
.secondary { background: var(--kg-secondary); color: white; }
|
|
45
45
|
.tertiary { background: var(--kg-tertiary); color: white; }
|
|
46
46
|
.error { background: #DB2828; color: white; }
|
|
47
|
-
.success { background: #
|
|
47
|
+
.success { background: var(--kg-primary, #3fae26); color: white; }
|
|
48
48
|
.warning { background: #FBB140; color: white; }
|
|
49
49
|
|
|
50
50
|
/* Basic (Outlined) */
|
|
@@ -57,7 +57,7 @@ var e=Object.defineProperty,o=(o,r,t)=>((o,r,t)=>r in o?e(o,r,{enumerable:!0,con
|
|
|
57
57
|
.basic.secondary { color: var(--kg-secondary); }
|
|
58
58
|
.basic.tertiary { color: var(--kg-tertiary); }
|
|
59
59
|
.basic.error { color: #DB2828; }
|
|
60
|
-
.basic.success { color: #
|
|
60
|
+
.basic.success { color: var(--kg-primary, #3fae26); }
|
|
61
61
|
|
|
62
62
|
.close-icon {
|
|
63
63
|
cursor: pointer;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=(e,o,
|
|
1
|
+
var t=Object.defineProperty,e=(e,o,r)=>((e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r)(e,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as s}from"lit";import"lit/directives/class-map.js";class a extends o{constructor(){super(),this.duration=3e3,this.visible=!1,this.color="secondary",this._timerId=null}connectedCallback(){super.connectedCallback(),this.duration>0&&(this._timerId=setTimeout(()=>this.close(),this.duration))}disconnectedCallback(){super.disconnectedCallback(),this._timerId&&clearTimeout(this._timerId)}close(){this._timerId&&(clearTimeout(this._timerId),this._timerId=null),this.visible=!1,this.dispatchEvent(new CustomEvent("kg-close",{bubbles:!0,composed:!0}))}render(){return s`
|
|
2
2
|
<div class="toast-container">
|
|
3
3
|
<div class="close-btn" @click=${t=>{t.stopPropagation(),this.close()}} title="Close">✕</div>
|
|
4
4
|
<div class="toast-header">
|
|
5
5
|
<span>${this.title}</span>
|
|
6
6
|
</div>
|
|
7
|
-
${this.message?
|
|
7
|
+
${this.message?s`<div class="toast-message">${this.message}</div>`:""}
|
|
8
8
|
</div>
|
|
9
|
-
`}}e(a,"properties",{color:{type:String,reflect:!0},title:{type:String},message:{type:String},duration:{type:Number},visible:{type:Boolean,reflect:!0}}),e(a,"styles",
|
|
9
|
+
`}}e(a,"properties",{color:{type:String,reflect:!0},title:{type:String},message:{type:String},duration:{type:Number},visible:{type:Boolean,reflect:!0}}),e(a,"styles",r`
|
|
10
10
|
:host {
|
|
11
11
|
--toast-accent: var(--kg-secondary);
|
|
12
12
|
display: block;
|
|
@@ -81,7 +81,7 @@ var t=Object.defineProperty,e=(e,o,s)=>((e,o,s)=>o in e?t(e,o,{enumerable:!0,con
|
|
|
81
81
|
:host([color="primary"]) {
|
|
82
82
|
--toast-accent: var(--kg-primary);
|
|
83
83
|
--toast-bg: rgba(65, 171, 52, 0.15);
|
|
84
|
-
--toast-text-color: #
|
|
84
|
+
--toast-text-color: var(--kg-primary-active, #2a7319);
|
|
85
85
|
}
|
|
86
86
|
:host([color="secondary"]) {
|
|
87
87
|
--toast-accent: var(--kg-secondary);
|
|
@@ -116,4 +116,4 @@ var t=Object.defineProperty,e=(e,o,s)=>((e,o,s)=>o in e?t(e,o,{enumerable:!0,con
|
|
|
116
116
|
:host-context([data-theme='dark']) .toast-container {
|
|
117
117
|
box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
|
|
118
118
|
}
|
|
119
|
-
`),"undefined"==typeof customElements||customElements.get("kg-toast")||customElements.define("kg-toast",a);const i={show(t){const e=t.position||"top-right";let o=document.querySelector(`.kg-toast-container.${e}`);if(!o){o=document.createElement("div"),o.className=`kg-toast-container ${e}`;const t=e.includes("top"),
|
|
119
|
+
`),"undefined"==typeof customElements||customElements.get("kg-toast")||customElements.define("kg-toast",a);const i={show(t){const e=t.position||"top-right";let o=document.querySelector(`.kg-toast-container.${e}`);if(!o){o=document.createElement("div"),o.className=`kg-toast-container ${e}`;const t=e.includes("top"),r=e.includes("bottom"),s=e.includes("left");let a=`\n position: fixed;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n pointer-events: none;\n width: 340px;\n gap: 12px;\n padding: 1rem;\n ${t?"top: 0.5rem;":"bottom: 0.5rem;"}\n ${r?"flex-direction: column-reverse;":""}\n `;a+=e.includes("middle")||e.includes("center")?"\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n ":s?"left: 1.5rem;":"right: 1.5rem;",o.setAttribute("style",a),document.body.appendChild(o)}const r=document.createElement("kg-toast");r.title=t.title||"Notification",r.message=t.message||"",r.color=t.color||"secondary",r.duration=void 0!==t.duration?t.duration:4e3,o.appendChild(r),requestAnimationFrame(()=>{requestAnimationFrame(()=>{r.visible=!0})}),r.addEventListener("kg-close",()=>{setTimeout(()=>{r.parentNode===o&&r.remove(),0===o.children.length&&o.remove()},400)})},success(t,e){this.show({title:t,message:e,color:"primary"})},error(t,e){this.show({title:t,message:e,color:"error"})},info(t,e){this.show({title:t,message:e,color:"secondary"})},warning(t,e){this.show({title:t,message:e,color:"tertiary"})}};export{a as kgtoast,i as toast};
|
package/dist/kg-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #
|
|
1
|
+
@import"https://fonts.cdnfonts.com/css/century-gothic";:root{--kg-primary: #3fae26;--kg-primary-hover: #349020;--kg-primary-active: #2a7319;--kg-secondary: #6c757d;--kg-secondary-hover: #5a6268;--kg-secondary-active: #545b62;--kg-tertiary: #fbb140;--kg-tertiary-hover: #e59e36;--kg-tertiary-active: #cf8c2d;--kg-space-xs: .25rem;--kg-space-sm: .5rem;--kg-space-md: 1rem;--kg-space-lg: 1.5rem;--kg-space-xl: 2rem;--kg-radius-sm: 4px;--kg-radius-md: 8px;--kg-radius-lg: 12px;--kg-bg: #ffffff;--kg-text: #1a1a1b;--kg-text-muted: #64748b;--kg-surface: #f8fafc;--kg-border: #e2e8f0;--kg-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--kg-header-gradient: linear-gradient(to right, #1a1a1b, #64748b);--kg-form-height: 38px;--datagrid-hover-bg: rgba(0, 0, 0, .04)}[data-theme=dark]{--kg-bg: #0a0a0c;--kg-text: #f8fafc;--kg-text-muted: #94a3b8;--kg-surface: #16161a;--kg-border: #2d2d34;--kg-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);--kg-header-gradient: linear-gradient(to right, #fff, #94a3b8);--datagrid-hover-bg: rgba(255, 255, 255, .12)}*{box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body,h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}body{font-family:Century Gothic,Apple Gothic,CenturyGothic,sans-serif;background-color:var(--kg-bg);color:var(--kg-text);line-height:1.5;-webkit-font-smoothing:antialiased;padding:1rem;height:100vh;overflow:hidden}#app{max-width:1400px;margin:0 auto;height:100%;display:flex;flex-direction:column}.doc-layout{display:grid;grid-template-columns:260px 1fr;gap:3rem;flex:1;min-height:0;overflow:hidden}@media(max-width:1024px){.doc-layout{grid-template-columns:1fr;height:auto;overflow:visible;gap:1rem}.sidebar{display:none!important}#mobile-menu-btn{display:flex!important}body{height:auto;overflow:auto}#app{height:auto}.header-container{padding:1rem 0}}.sidebar{height:100%;padding:1.5rem 0;display:flex;flex-direction:column;min-height:0}.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;flex:1}.main-content{overflow-y:auto;height:100%;padding:1rem 0 4rem}.doc-section{margin-bottom:4rem}.code-block{background:#1e1e1e;color:#d4d4d4;padding:1.5rem;border-radius:var(--kg-radius-md);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;line-height:1.6;white-space:pre;overflow-x:auto;margin:0;border:1px solid var(--kg-border)}.code-block code{font-family:inherit;color:inherit}.example-preview{padding:2rem;border:1px solid var(--kg-border);border-bottom:none;border-radius:var(--kg-radius-md) var(--kg-radius-md) 0 0;background:var(--kg-bg);display:flex!important;flex-direction:row!important;gap:1rem!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important}.example-code{margin:0;border-radius:0 0 var(--kg-radius-md) var(--kg-radius-md)}.header-container{display:flex;justify-content:space-between;align-items:center;padding-bottom:2rem;border-bottom:1px solid var(--kg-border)}h2{font-size:1.75rem;margin-bottom:1.5rem;color:var(--kg-text)}h3{font-size:1.25rem;margin-bottom:1rem;color:var(--kg-text-muted);text-transform:uppercase;letter-spacing:.05em}
|