@lazhus/kg-ui 0.10.11 → 0.10.12
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 +140 -2
- package/dist/components/kg-datagrid.js +122 -50
- package/dist/components/kg-tooltip.js +95 -0
- package/dist/index.js +1 -1
- package/dist/react/KgTooltip.js +1 -0
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
- package/types/components/kg-datagrid.d.ts +6 -0
- package/types/components/kg-tooltip.d.ts +31 -0
- package/types/index.d.ts +11 -0
- package/types/react/KgTooltip.d.ts +6 -0
- package/types/react/index.d.ts +1 -0
package/custom-elements.json
CHANGED
|
@@ -1520,13 +1520,13 @@
|
|
|
1520
1520
|
"text": "object"
|
|
1521
1521
|
},
|
|
1522
1522
|
"static": true,
|
|
1523
|
-
"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 }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // 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' } }"
|
|
1523
|
+
"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 }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // 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' }, // Sticky Header stickyHeader: { type: Boolean, reflect: true, attribute: 'sticky-header' }, maxHeight: { type: String, attribute: 'max-height' } }"
|
|
1524
1524
|
},
|
|
1525
1525
|
{
|
|
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; } `"
|
|
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-surface, 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-surface, var(--kg-bg, #ffffff)); box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12); } :host([hover]) tbody tr:hover td.sticky-col, :host([hover]) tbody tr:hover td.sticky-checkbox { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } tbody tr.selected td.sticky-col, tbody tr.selected td.sticky-checkbox { background-color: var(--datagrid-selected-bg) !important; } tbody tr.row-danger td.sticky-col, tbody tr.row-danger td.sticky-checkbox { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; } `"
|
|
1530
1530
|
},
|
|
1531
1531
|
{
|
|
1532
1532
|
"kind": "method",
|
|
@@ -1660,6 +1660,31 @@
|
|
|
1660
1660
|
"kind": "method",
|
|
1661
1661
|
"name": "_getHeaderRows"
|
|
1662
1662
|
},
|
|
1663
|
+
{
|
|
1664
|
+
"kind": "method",
|
|
1665
|
+
"name": "_hasStickyColumn"
|
|
1666
|
+
},
|
|
1667
|
+
{
|
|
1668
|
+
"kind": "method",
|
|
1669
|
+
"name": "_isStickyCol",
|
|
1670
|
+
"parameters": [
|
|
1671
|
+
{
|
|
1672
|
+
"name": "col"
|
|
1673
|
+
}
|
|
1674
|
+
]
|
|
1675
|
+
},
|
|
1676
|
+
{
|
|
1677
|
+
"kind": "method",
|
|
1678
|
+
"name": "_getStickyLeft",
|
|
1679
|
+
"parameters": [
|
|
1680
|
+
{
|
|
1681
|
+
"name": "col"
|
|
1682
|
+
},
|
|
1683
|
+
{
|
|
1684
|
+
"name": "colIndex"
|
|
1685
|
+
}
|
|
1686
|
+
]
|
|
1687
|
+
},
|
|
1663
1688
|
{
|
|
1664
1689
|
"kind": "method",
|
|
1665
1690
|
"name": "render"
|
|
@@ -1792,6 +1817,22 @@
|
|
|
1792
1817
|
},
|
|
1793
1818
|
"default": "1"
|
|
1794
1819
|
},
|
|
1820
|
+
{
|
|
1821
|
+
"kind": "field",
|
|
1822
|
+
"name": "stickyHeader",
|
|
1823
|
+
"type": {
|
|
1824
|
+
"text": "boolean"
|
|
1825
|
+
},
|
|
1826
|
+
"default": "false"
|
|
1827
|
+
},
|
|
1828
|
+
{
|
|
1829
|
+
"kind": "field",
|
|
1830
|
+
"name": "maxHeight",
|
|
1831
|
+
"type": {
|
|
1832
|
+
"text": "string"
|
|
1833
|
+
},
|
|
1834
|
+
"default": "''"
|
|
1835
|
+
},
|
|
1795
1836
|
{
|
|
1796
1837
|
"kind": "field",
|
|
1797
1838
|
"name": "rowClassName",
|
|
@@ -6814,6 +6855,103 @@
|
|
|
6814
6855
|
}
|
|
6815
6856
|
]
|
|
6816
6857
|
},
|
|
6858
|
+
{
|
|
6859
|
+
"kind": "javascript-module",
|
|
6860
|
+
"path": "src/components/kg-tooltip.js",
|
|
6861
|
+
"declarations": [
|
|
6862
|
+
{
|
|
6863
|
+
"kind": "class",
|
|
6864
|
+
"description": "",
|
|
6865
|
+
"name": "kgtooltip",
|
|
6866
|
+
"members": [
|
|
6867
|
+
{
|
|
6868
|
+
"kind": "field",
|
|
6869
|
+
"name": "properties",
|
|
6870
|
+
"type": {
|
|
6871
|
+
"text": "object"
|
|
6872
|
+
},
|
|
6873
|
+
"static": true,
|
|
6874
|
+
"default": "{ content: { type: String }, position: { type: String, reflect: true }, // top, bottom, left, right trigger: { type: String, reflect: true }, // hover, click visible: { type: Boolean, reflect: true }, }"
|
|
6875
|
+
},
|
|
6876
|
+
{
|
|
6877
|
+
"kind": "field",
|
|
6878
|
+
"name": "styles",
|
|
6879
|
+
"static": true,
|
|
6880
|
+
"default": "css` :host { display: inline-block; position: relative; } .tooltip-trigger { display: inline-block; cursor: pointer; } .tooltip-content { position: absolute; background: #333; color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: none; } /* Position Styles */ .top { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); margin-bottom: 8px; } .bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); margin-top: 8px; } .left { top: 50%; right: 100%; transform: translateY(-50%) translateX(-8px); margin-right: 8px; } .right { top: 50%; left: 100%; transform: translateY(-50%) translateX(8px); margin-left: 8px; } /* Arrow */ .tooltip-content::after { content: ''; position: absolute; border: 5px solid transparent; } .top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #333; } .bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #333; } .left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #333; } .right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #333; } /* Visibility Logic */ :host([trigger=\"hover\"]:hover) .tooltip-content, :host([visible]) .tooltip-content { opacity: 1; visibility: visible; } /* Transform Adjustment for Visible State */ :host([trigger=\"hover\"]:hover) .tooltip-content.top, :host([visible]) .tooltip-content.top { transform: translateX(-50%) translateY(-4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.bottom, :host([visible]) .tooltip-content.bottom { transform: translateX(-50%) translateY(4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.left, :host([visible]) .tooltip-content.left { transform: translateY(-50%) translateX(-4px); } :host([trigger=\"hover\"]:hover) .tooltip-content.right, :host([visible]) .tooltip-content.right { transform: translateY(-50%) translateX(4px); } `"
|
|
6881
|
+
},
|
|
6882
|
+
{
|
|
6883
|
+
"kind": "method",
|
|
6884
|
+
"name": "_show"
|
|
6885
|
+
},
|
|
6886
|
+
{
|
|
6887
|
+
"kind": "method",
|
|
6888
|
+
"name": "_hide"
|
|
6889
|
+
},
|
|
6890
|
+
{
|
|
6891
|
+
"kind": "method",
|
|
6892
|
+
"name": "_handleOutsideClick",
|
|
6893
|
+
"parameters": [
|
|
6894
|
+
{
|
|
6895
|
+
"name": "e"
|
|
6896
|
+
}
|
|
6897
|
+
]
|
|
6898
|
+
},
|
|
6899
|
+
{
|
|
6900
|
+
"kind": "method",
|
|
6901
|
+
"name": "render"
|
|
6902
|
+
},
|
|
6903
|
+
{
|
|
6904
|
+
"kind": "field",
|
|
6905
|
+
"name": "position",
|
|
6906
|
+
"type": {
|
|
6907
|
+
"text": "string"
|
|
6908
|
+
},
|
|
6909
|
+
"default": "'top'"
|
|
6910
|
+
},
|
|
6911
|
+
{
|
|
6912
|
+
"kind": "field",
|
|
6913
|
+
"name": "trigger",
|
|
6914
|
+
"type": {
|
|
6915
|
+
"text": "string"
|
|
6916
|
+
},
|
|
6917
|
+
"default": "'hover'"
|
|
6918
|
+
},
|
|
6919
|
+
{
|
|
6920
|
+
"kind": "field",
|
|
6921
|
+
"name": "visible",
|
|
6922
|
+
"type": {
|
|
6923
|
+
"text": "boolean"
|
|
6924
|
+
},
|
|
6925
|
+
"default": "false"
|
|
6926
|
+
}
|
|
6927
|
+
],
|
|
6928
|
+
"superclass": {
|
|
6929
|
+
"name": "LitElement",
|
|
6930
|
+
"package": "lit"
|
|
6931
|
+
},
|
|
6932
|
+
"tagName": "kg-tooltip",
|
|
6933
|
+
"customElement": true
|
|
6934
|
+
}
|
|
6935
|
+
],
|
|
6936
|
+
"exports": [
|
|
6937
|
+
{
|
|
6938
|
+
"kind": "js",
|
|
6939
|
+
"name": "kgtooltip",
|
|
6940
|
+
"declaration": {
|
|
6941
|
+
"name": "kgtooltip",
|
|
6942
|
+
"module": "src/components/kg-tooltip.js"
|
|
6943
|
+
}
|
|
6944
|
+
},
|
|
6945
|
+
{
|
|
6946
|
+
"kind": "custom-element-definition",
|
|
6947
|
+
"name": "kg-tooltip",
|
|
6948
|
+
"declaration": {
|
|
6949
|
+
"name": "kgtooltip",
|
|
6950
|
+
"module": "src/components/kg-tooltip.js"
|
|
6951
|
+
}
|
|
6952
|
+
}
|
|
6953
|
+
]
|
|
6954
|
+
},
|
|
6817
6955
|
{
|
|
6818
6956
|
"kind": "javascript-module",
|
|
6819
6957
|
"path": "src/components/kg-tree.js",
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var
|
|
1
|
+
var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[i]=r)(e,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as s}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class o extends i{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 i;i="change"===e.type&&void 0!==e.detail&&void 0!==e.detail.checked?e.detail.checked:!this._isSelected(t),this.selectedRows=i?[...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 i=this.rowClassName(t);i&&e.push(i)}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 i=t[this._sortColumn],r=e[this._sortColumn];return i<r?"asc"===this._sortDirection?-1:1:i>r?"asc"===this._sortDirection?1:-1:0}),this.pagination){const e=Number(this.pageSize)||10,i=((Number(this.currentPage)||1)-1)*e,r=i+e;return{data:t.slice(i,r),total:t.length}}return{data:t,total:t.length}}_changePage(t){const e=Number(t);if(e<1)return;const i=Number(this.pageSize)||10,r=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(e>Math.max(1,Math.ceil(r/i)))return;this.currentPage=e;const a={page:e,pageSize:i};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 i={pageSize:e,page:1},r={page:1,pageSize:e};this.dispatchEvent(new CustomEvent("page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:r,bubbles:!0,composed:!0}))}_renderCellContent(t,e){if(!t.render)return e[t.field];const i=t.render(e);return"string"==typeof i?s(i):i}_renderHeaderContent(t){if(t.headerRender){const e=t.headerRender(t);return"string"==typeof e?s(e):e}return t.label}_getMaxDepth(t){if(!t||0===t.length)return 1;let e=0;const i=(t,r)=>{e=Math.max(e,r),t.forEach(t=>{t.children&&t.children.length>0&&i(t.children,r+1)})};return i(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=[],i=t=>{t.forEach(t=>{t.children&&t.children.length>0?i(t.children):e.push(t)})};return i(t),e}_getHeaderRows(){const t=this._getMaxDepth(this.columns),e=Array.from({length:t},()=>[]),i=(r,a)=>{r.forEach(r=>{const s=!r.children||0===r.children.length,o=this._getLeafCount(r),n=s?t-a:1;e[a].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,a+1)})};return i(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 i=0;this.selectable&&(i+=48);const r=this._getLeafColumns();for(let a=0;a<e;a++)this._isStickyCol(r[a])&&(i+=parseInt(r[a].width,10)||150);return`${i}px`}render(){const{data:t,total:e}=this._getProcessedData(),i=Number(this.pageSize)||10,r=Number(this.currentPage)||1,s=Number(e)||0,o=this.pagination?Math.max(1,Math.ceil(s/i)):1,n=this._getNormalizedPageSizeOptions(),l=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,c="single"===this.selectionMode,d=this._getHeaderRows(),h=d.length,g=this._getLeafColumns(),p=this._hasStickyColumn(),b=(()=>{const t=[],e=r-2,i=r+2+1;for(let r=1;r<=o;r++)(1===r||r===o||r>=e&&r<i)&&t.push(r);return t})();return a`
|
|
2
2
|
<div class="wrapper">
|
|
3
|
-
<div class="table-container">
|
|
3
|
+
<div class="table-container" style="${this.maxHeight?`max-height: ${this.maxHeight};`:""}">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
${
|
|
6
|
+
${d.map((t,e)=>a`
|
|
7
7
|
<tr>
|
|
8
|
-
${0===
|
|
9
|
-
<th class="checkbox-cell" rowspan="${h}">
|
|
10
|
-
${
|
|
8
|
+
${0===e&&this.selectable?a`
|
|
9
|
+
<th class="checkbox-cell ${p?"sticky-checkbox":""}" rowspan="${h}">
|
|
10
|
+
${c?"":a`
|
|
11
11
|
<kg-checkbox
|
|
12
12
|
.checked="${l}"
|
|
13
13
|
@change="${this._handleSelectAll}"
|
|
@@ -16,92 +16,92 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
16
16
|
</th>
|
|
17
17
|
`:""}
|
|
18
18
|
|
|
19
|
-
${
|
|
19
|
+
${t.map((t,e)=>{const i=this._isStickyCol(t),r=this._getStickyLeft(t,e);let s=t.width?`width: ${t.width}; min-width: ${t.width}; max-width: ${t.width};`:"";return r&&(s+=` left: ${r};`),a`
|
|
20
20
|
<th
|
|
21
|
-
colspan="${
|
|
22
|
-
rowspan="${
|
|
23
|
-
class="${
|
|
24
|
-
style="${
|
|
25
|
-
@click="${()=>
|
|
21
|
+
colspan="${t.colspan}"
|
|
22
|
+
rowspan="${t.rowspan}"
|
|
23
|
+
class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${i?"sticky-col":""}"
|
|
24
|
+
style="${s}"
|
|
25
|
+
@click="${()=>t.children?null:this._handleSort(t)}"
|
|
26
26
|
>
|
|
27
|
-
${this._renderHeaderContent(
|
|
28
|
-
${!
|
|
27
|
+
${this._renderHeaderContent(t)}
|
|
28
|
+
${!t.sortable&&!this.sortable||t.children?"":a`
|
|
29
29
|
<span class="sort-icon">
|
|
30
|
-
${this._sortColumn===
|
|
30
|
+
${this._sortColumn===t.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
|
|
31
31
|
</span>
|
|
32
32
|
`}
|
|
33
33
|
</th>
|
|
34
|
-
`)}
|
|
34
|
+
`})}
|
|
35
35
|
</tr>
|
|
36
36
|
`)}
|
|
37
37
|
</thead>
|
|
38
38
|
<tbody>
|
|
39
|
-
${this.loading?
|
|
40
|
-
${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>
|
|
39
|
+
${this.loading?a`
|
|
40
|
+
${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>a`
|
|
41
41
|
<tr>
|
|
42
|
-
${this.selectable?
|
|
43
|
-
<td class="checkbox-cell">
|
|
42
|
+
${this.selectable?a`
|
|
43
|
+
<td class="checkbox-cell ${p?"sticky-checkbox":""}">
|
|
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(()=>s`
|
|
48
|
-
<td>
|
|
47
|
+
${g.map((t,e)=>{const i=this._isStickyCol(t),r=this._getStickyLeft(t,e);let s="";return r&&(s+=`left: ${r};`),a`
|
|
48
|
+
<td class="${i?"sticky-col":""}" style="${s}">
|
|
49
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
50
50
|
</td>
|
|
51
|
-
`)}
|
|
51
|
+
`})}
|
|
52
52
|
</tr>
|
|
53
53
|
`)}
|
|
54
|
-
`:0===
|
|
54
|
+
`:0===t.length?a`
|
|
55
55
|
<tr>
|
|
56
56
|
<td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
|
|
57
57
|
Veri bulunamadı.
|
|
58
58
|
</td>
|
|
59
59
|
</tr>
|
|
60
|
-
`:
|
|
60
|
+
`:t.map(t=>a`
|
|
61
61
|
<tr
|
|
62
|
-
class="${this._rowClasses(
|
|
63
|
-
@click="${
|
|
62
|
+
class="${this._rowClasses(t)}"
|
|
63
|
+
@click="${e=>this._handleRowSelect(t,e)}"
|
|
64
64
|
>
|
|
65
|
-
${this.selectable?
|
|
66
|
-
<td class="checkbox-cell">
|
|
67
|
-
${
|
|
65
|
+
${this.selectable?a`
|
|
66
|
+
<td class="checkbox-cell ${p?"sticky-checkbox":""}">
|
|
67
|
+
${c?a`
|
|
68
68
|
<kg-radio
|
|
69
|
-
.checked="${this._isSelected(
|
|
69
|
+
.checked="${this._isSelected(t)}"
|
|
70
70
|
style="pointer-events: none;"
|
|
71
71
|
></kg-radio>
|
|
72
|
-
`:
|
|
72
|
+
`:a`
|
|
73
73
|
<kg-checkbox
|
|
74
|
-
.checked="${this._isSelected(
|
|
75
|
-
@change="${
|
|
76
|
-
@click="${
|
|
74
|
+
.checked="${this._isSelected(t)}"
|
|
75
|
+
@change="${e=>this._handleRowSelect(t,e)}"
|
|
76
|
+
@click="${t=>t.stopPropagation()}"
|
|
77
77
|
></kg-checkbox>
|
|
78
78
|
`}
|
|
79
79
|
</td>
|
|
80
80
|
`:""}
|
|
81
81
|
|
|
82
|
-
${g.map(
|
|
83
|
-
<td class="${
|
|
84
|
-
${this._renderCellContent(t
|
|
82
|
+
${g.map((e,i)=>{const r=this._isStickyCol(e),s=this._getStickyLeft(e,i);let o="";return s&&(o+=`left: ${s};`),a`
|
|
83
|
+
<td class="${e.align?`align-${e.align}`:""} ${r?"sticky-col":""}" style="${o}">
|
|
84
|
+
${this._renderCellContent(e,t)}
|
|
85
85
|
</td>
|
|
86
|
-
`)}
|
|
86
|
+
`})}
|
|
87
87
|
</tr>
|
|
88
88
|
`)}
|
|
89
89
|
</tbody>
|
|
90
90
|
</table>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
|
-
${this.pagination&&
|
|
93
|
+
${this.pagination&&s>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>${s}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,s)}</strong> arası gösteriliyor
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
100
|
<div class="page-size-selector">
|
|
101
101
|
<span>Sayfa başına:</span>
|
|
102
102
|
<select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
|
|
103
|
-
${n.map(
|
|
104
|
-
<option value="${
|
|
103
|
+
${n.map(t=>a`
|
|
104
|
+
<option value="${t}" ?selected="${i===t}">${t}</option>
|
|
105
105
|
`)}
|
|
106
106
|
</select>
|
|
107
107
|
</div>
|
|
@@ -133,16 +133,16 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
133
133
|
</kg-button>
|
|
134
134
|
|
|
135
135
|
<!-- Page Numbers -->
|
|
136
|
-
${
|
|
137
|
-
${
|
|
136
|
+
${b.map((t,e)=>a`
|
|
137
|
+
${e>0&&t-b[e-1]>1?a`<span class="pagination-info">...</span>`:""}
|
|
138
138
|
<kg-button
|
|
139
|
-
@click="${()=>this._changePage(
|
|
140
|
-
color="${this.currentPage===
|
|
141
|
-
?text="${this.currentPage!==
|
|
139
|
+
@click="${()=>this._changePage(t)}"
|
|
140
|
+
color="${this.currentPage===t?"primary":"secondary"}"
|
|
141
|
+
?text="${this.currentPage!==t}"
|
|
142
142
|
size="medium"
|
|
143
143
|
square
|
|
144
144
|
>
|
|
145
|
-
${
|
|
145
|
+
${t}
|
|
146
146
|
</kg-button>
|
|
147
147
|
`)}
|
|
148
148
|
|
|
@@ -173,7 +173,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
173
173
|
</div>
|
|
174
174
|
`:""}
|
|
175
175
|
</div>
|
|
176
|
-
`}}
|
|
176
|
+
`}}e(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},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(o,"styles",r`
|
|
177
177
|
:host {
|
|
178
178
|
display: block;
|
|
179
179
|
width: 100%;
|
|
@@ -350,5 +350,77 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
350
350
|
cursor: pointer;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
|
+
/* Sticky Header & Sticky Columns */
|
|
354
|
+
:host([sticky-header]) .table-container {
|
|
355
|
+
overflow: auto;
|
|
356
|
+
max-height: var(--datagrid-max-height, 70vh);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
:host([sticky-header]) thead th {
|
|
360
|
+
position: sticky;
|
|
361
|
+
top: 0;
|
|
362
|
+
z-index: 10;
|
|
363
|
+
background-color: var(--datagrid-header-bg);
|
|
364
|
+
box-shadow: inset 0 -1px 0 var(--datagrid-border);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
th.sticky-col,
|
|
368
|
+
td.sticky-col,
|
|
369
|
+
th.sticky-checkbox,
|
|
370
|
+
td.sticky-checkbox {
|
|
371
|
+
position: sticky;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
th.sticky-checkbox {
|
|
375
|
+
left: 0;
|
|
376
|
+
z-index: 15;
|
|
377
|
+
background-color: var(--datagrid-header-bg);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
:host([sticky-header]) th.sticky-checkbox {
|
|
381
|
+
top: 0;
|
|
382
|
+
left: 0;
|
|
383
|
+
z-index: 25;
|
|
384
|
+
background-color: var(--datagrid-header-bg);
|
|
385
|
+
box-shadow: inset 0 -1px 0 var(--datagrid-border);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
td.sticky-checkbox {
|
|
389
|
+
left: 0;
|
|
390
|
+
z-index: 8;
|
|
391
|
+
background-color: var(--kg-surface, var(--kg-bg, #ffffff));
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
th.sticky-col {
|
|
395
|
+
z-index: 12;
|
|
396
|
+
background-color: var(--datagrid-header-bg);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
:host([sticky-header]) th.sticky-col {
|
|
400
|
+
top: 0;
|
|
401
|
+
z-index: 20;
|
|
402
|
+
background-color: var(--datagrid-header-bg);
|
|
403
|
+
box-shadow: inset 0 -1px 0 var(--datagrid-border), 2px 0 5px -2px rgba(0, 0, 0, 0.12);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
td.sticky-col {
|
|
407
|
+
z-index: 5;
|
|
408
|
+
background-color: var(--kg-surface, var(--kg-bg, #ffffff));
|
|
409
|
+
box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
:host([hover]) tbody tr:hover td.sticky-col,
|
|
413
|
+
:host([hover]) tbody tr:hover td.sticky-checkbox {
|
|
414
|
+
background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04));
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
tbody tr.selected td.sticky-col,
|
|
418
|
+
tbody tr.selected td.sticky-checkbox {
|
|
419
|
+
background-color: var(--datagrid-selected-bg) !important;
|
|
420
|
+
}
|
|
353
421
|
|
|
422
|
+
tbody tr.row-danger td.sticky-col,
|
|
423
|
+
tbody tr.row-danger td.sticky-checkbox {
|
|
424
|
+
background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
|
|
425
|
+
}
|
|
354
426
|
`),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",o);export{o as kgdatagrid};
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
var t=Object.defineProperty,o=(o,e,i)=>((o,e,i)=>e in o?t(o,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[e]=i)(o,"symbol"!=typeof e?e+"":e,i);import{LitElement as e,css as i,html as r}from"lit";class n extends e{constructor(){super(),this.position="top",this.trigger="hover",this.visible=!1}_show(){"click"===this.trigger&&(this.visible=!this.visible)}_hide(){this.trigger}connectedCallback(){super.connectedCallback(),"click"===this.trigger&&document.addEventListener("click",this._handleOutsideClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick.bind(this))}_handleOutsideClick(t){this.visible&&!this.contains(t.target)&&(this.visible=!1)}render(){return r`
|
|
2
|
+
<div class="tooltip-trigger"
|
|
3
|
+
@click="${this._show}"
|
|
4
|
+
role="tooltip"
|
|
5
|
+
aria-haspopup="true">
|
|
6
|
+
<slot></slot>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="tooltip-content ${this.position}">
|
|
9
|
+
${this.content||r`<slot name="content"></slot>`}
|
|
10
|
+
</div>
|
|
11
|
+
`}}o(n,"properties",{content:{type:String},position:{type:String,reflect:!0},trigger:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}),o(n,"styles",i`
|
|
12
|
+
:host {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
position: relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.tooltip-trigger {
|
|
18
|
+
display: inline-block;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.tooltip-content {
|
|
23
|
+
position: absolute;
|
|
24
|
+
background: #333;
|
|
25
|
+
color: white;
|
|
26
|
+
padding: 0.5rem 0.75rem;
|
|
27
|
+
border-radius: 6px;
|
|
28
|
+
font-size: 0.85rem;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
z-index: 1000;
|
|
31
|
+
opacity: 0;
|
|
32
|
+
visibility: hidden;
|
|
33
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
34
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Position Styles */
|
|
39
|
+
.top {
|
|
40
|
+
bottom: 100%;
|
|
41
|
+
left: 50%;
|
|
42
|
+
transform: translateX(-50%) translateY(-8px);
|
|
43
|
+
margin-bottom: 8px;
|
|
44
|
+
}
|
|
45
|
+
.bottom {
|
|
46
|
+
top: 100%;
|
|
47
|
+
left: 50%;
|
|
48
|
+
transform: translateX(-50%) translateY(8px);
|
|
49
|
+
margin-top: 8px;
|
|
50
|
+
}
|
|
51
|
+
.left {
|
|
52
|
+
top: 50%;
|
|
53
|
+
right: 100%;
|
|
54
|
+
transform: translateY(-50%) translateX(-8px);
|
|
55
|
+
margin-right: 8px;
|
|
56
|
+
}
|
|
57
|
+
.right {
|
|
58
|
+
top: 50%;
|
|
59
|
+
left: 100%;
|
|
60
|
+
transform: translateY(-50%) translateX(8px);
|
|
61
|
+
margin-left: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Arrow */
|
|
65
|
+
.tooltip-content::after {
|
|
66
|
+
content: '';
|
|
67
|
+
position: absolute;
|
|
68
|
+
border: 5px solid transparent;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #333; }
|
|
72
|
+
.bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #333; }
|
|
73
|
+
.left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #333; }
|
|
74
|
+
.right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #333; }
|
|
75
|
+
|
|
76
|
+
/* Visibility Logic */
|
|
77
|
+
:host([trigger="hover"]:hover) .tooltip-content,
|
|
78
|
+
:host([visible]) .tooltip-content {
|
|
79
|
+
opacity: 1;
|
|
80
|
+
visibility: visible;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Transform Adjustment for Visible State */
|
|
84
|
+
:host([trigger="hover"]:hover) .tooltip-content.top,
|
|
85
|
+
:host([visible]) .tooltip-content.top { transform: translateX(-50%) translateY(-4px); }
|
|
86
|
+
|
|
87
|
+
:host([trigger="hover"]:hover) .tooltip-content.bottom,
|
|
88
|
+
:host([visible]) .tooltip-content.bottom { transform: translateX(-50%) translateY(4px); }
|
|
89
|
+
|
|
90
|
+
:host([trigger="hover"]:hover) .tooltip-content.left,
|
|
91
|
+
:host([visible]) .tooltip-content.left { transform: translateY(-50%) translateX(-4px); }
|
|
92
|
+
|
|
93
|
+
:host([trigger="hover"]:hover) .tooltip-content.right,
|
|
94
|
+
:host([visible]) .tooltip-content.right { transform: translateY(-50%) translateX(4px); }
|
|
95
|
+
`),"undefined"==typeof customElements||customElements.get("kg-tooltip")||customElements.define("kg-tooltip",n);export{n as kgtooltip};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{kgaccordionitem as o}from"./components/kg-accordion-item.js";import{kgaccordion as m}from"./components/kg-accordion.js";import{kgbutton as r}from"./components/kg-button.js";import{kgcard as t}from"./components/kg-card.js";import{kgcheckbox as
|
|
1
|
+
import{kgaccordionitem as o}from"./components/kg-accordion-item.js";import{kgaccordion as m}from"./components/kg-accordion.js";import{kgbutton as r}from"./components/kg-button.js";import{kgcard as t}from"./components/kg-card.js";import{kgcheckbox as p}from"./components/kg-checkbox.js";import{kgcolorpicker as s}from"./components/kg-colorpicker.js";import{kgcolumn as n}from"./components/kg-column.js";import{kgdatepicker as e}from"./components/kg-datepicker.js";import{kgdivider as i}from"./components/kg-divider.js";import{kgdrawer as c}from"./components/kg-drawer.js";import{kgfileupload as g}from"./components/kg-file-upload.js";import{kggrid as k}from"./components/kg-grid.js";import{kgdatagrid as f}from"./components/kg-datagrid.js";import{kginput as j}from"./components/kg-input.js";import{kgmodal as a}from"./components/kg-modal.js";import{kgradiogroup as d}from"./components/kg-radio-group.js";import{kgradio as l}from"./components/kg-radio.js";import{kgrow as b}from"./components/kg-row.js";import{kgselect as u}from"./components/kg-select.js";import{kgskeleton as x}from"./components/kg-skeleton.js";import{kgslider as w}from"./components/kg-slider.js";import{kgstepper as h}from"./components/kg-stepper.js";import{kgswitch as v}from"./components/kg-switch.js";import{kgtabpanel as q}from"./components/kg-tab-panel.js";import{kgtabs as y}from"./components/kg-tabs.js";import{kgtext as z}from"./components/kg-text.js";import{kgtextarea as A}from"./components/kg-textarea.js";import{kgtoast as B,toast as C}from"./components/kg-toast.js";import{kgimage as D}from"./components/kg-image.js";import{kgprogress as E}from"./components/kg-progress.js";import{kgspinner as F}from"./components/kg-spinner.js";import{kgloader as G,loader as H}from"./components/kg-loader.js";import{kgavatar as I}from"./components/kg-avatar.js";import{kgtag as J}from"./components/kg-tag.js";import{kgbreadcrumbitem as K,kgbreadcrumbs as L}from"./components/kg-breadcrumbs.js";import{kglink as M}from"./components/kg-link.js";import{kgtree as N,kgtreeitem as O}from"./components/kg-tree.js";import{kglist as P,kglistitem as Q}from"./components/kg-list.js";import{kgtooltip as R}from"./components/kg-tooltip.js";export{m as kgaccordion,o as kgaccordionitem,I as kgavatar,K as kgbreadcrumbitem,L as kgbreadcrumbs,r as kgbutton,t as kgcard,p as kgcheckbox,s as kgcolorpicker,n as kgcolumn,f as kgdatagrid,e as kgdatepicker,i as kgdivider,c as kgdrawer,g as kgfileupload,k as kggrid,D as kgimage,j as kginput,M as kglink,P as kglist,Q as kglistitem,G as kgloader,a as kgmodal,E as kgprogress,l as kgradio,d as kgradiogroup,b as kgrow,u as kgselect,x as kgskeleton,w as kgslider,F as kgspinner,h as kgstepper,v as kgswitch,q as kgtabpanel,y as kgtabs,J as kgtag,z as kgtext,A as kgtextarea,B as kgtoast,R as kgtooltip,N as kgtree,O as kgtreeitem,H as loader,C as toast};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"react";import{o}from"../chunks/create-component-jQ1kjF1Z.js";import{kgtooltip as t}from"../components/kg-tooltip.js";"undefined"==typeof customElements||customElements.get("kg-tooltip")||customElements.define("kg-tooltip",t);const n=o({tagName:"kg-tooltip",elementClass:t,react:e,events:{onClick:"click",onKeyDown:"keydown",onKeyUp:"keyup"}});export{n as KgTooltip};
|
package/dist/react/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{KgAccordion as r}from"./KgAccordion.js";import{KgAccordionItem as o}from"./KgAccordionItem.js";import{KgAvatar as m}from"./KgAvatar.js";import{KgBreadcrumbItem as t}from"./KgBreadcrumbItem.js";import{KgBreadcrumbs as i}from"./KgBreadcrumbs.js";import{KgButton as p}from"./KgButton.js";import{KgCard as s}from"./KgCard.js";import{KgCheckbox as g}from"./KgCheckbox.js";import{KgColorPicker as f}from"./KgColorPicker.js";import{KgColumn as j}from"./KgColumn.js";import{KgDataGrid as K}from"./KgDataGrid.js";import{KgDatePicker as e}from"./KgDatePicker.js";import{KgDivider as a}from"./KgDivider.js";import{KgDrawer as d}from"./KgDrawer.js";import{KgFileUpload as c}from"./KgFileUpload.js";import{KgGrid as
|
|
1
|
+
import{KgAccordion as r}from"./KgAccordion.js";import{KgAccordionItem as o}from"./KgAccordionItem.js";import{KgAvatar as m}from"./KgAvatar.js";import{KgBreadcrumbItem as t}from"./KgBreadcrumbItem.js";import{KgBreadcrumbs as i}from"./KgBreadcrumbs.js";import{KgButton as p}from"./KgButton.js";import{KgCard as s}from"./KgCard.js";import{KgCheckbox as g}from"./KgCheckbox.js";import{KgColorPicker as f}from"./KgColorPicker.js";import{KgColumn as j}from"./KgColumn.js";import{KgDataGrid as K}from"./KgDataGrid.js";import{KgDatePicker as e}from"./KgDatePicker.js";import{KgDivider as a}from"./KgDivider.js";import{KgDrawer as d}from"./KgDrawer.js";import{KgFileUpload as c}from"./KgFileUpload.js";import{KgGrid as l}from"./KgGrid.js";import{KgImage as n}from"./KgImage.js";import{KgInput as T}from"./KgInput.js";import{KgLink as u}from"./KgLink.js";import{KgList as I}from"./KgList.js";import{KgListItem as S}from"./KgListItem.js";import{KgLoader as b}from"./KgLoader.js";import{KgModal as k}from"./KgModal.js";import{KgProgress as x}from"./KgProgress.js";import{KgRadio as C}from"./KgRadio.js";import{KgRadioGroup as D}from"./KgRadioGroup.js";import{KgRow as L}from"./KgRow.js";import{KgSelect as P}from"./KgSelect.js";import{KgSkeleton as w}from"./KgSkeleton.js";import{KgSlider as A}from"./KgSlider.js";import{KgSpinner as B}from"./KgSpinner.js";import{KgStepper as G}from"./KgStepper.js";import{KgSwitch as R}from"./KgSwitch.js";import{KgTabPanel as h}from"./KgTabPanel.js";import{KgTabs as v}from"./KgTabs.js";import{KgTag as F}from"./KgTag.js";import{KgText as M}from"./KgText.js";import{KgTextarea as U}from"./KgTextarea.js";import{KgToast as q}from"./KgToast.js";import{KgTooltip as y}from"./KgTooltip.js";import{KgTree as z}from"./KgTree.js";import{KgTreeItem as E}from"./KgTreeItem.js";export{r as KgAccordion,o as KgAccordionItem,m as KgAvatar,t as KgBreadcrumbItem,i as KgBreadcrumbs,p as KgButton,s as KgCard,g as KgCheckbox,f as KgColorPicker,j as KgColumn,K as KgDataGrid,e as KgDatePicker,a as KgDivider,d as KgDrawer,c as KgFileUpload,l as KgGrid,n as KgImage,T as KgInput,u as KgLink,I as KgList,S as KgListItem,b as KgLoader,k as KgModal,x as KgProgress,C as KgRadio,D as KgRadioGroup,L as KgRow,P as KgSelect,w as KgSkeleton,A as KgSlider,B as KgSpinner,G as KgStepper,R as KgSwitch,h as KgTabPanel,v as KgTabs,F as KgTag,M as KgText,U as KgTextarea,q as KgToast,y as KgTooltip,z as KgTree,E as KgTreeItem};
|
package/package.json
CHANGED
|
@@ -35,6 +35,10 @@ export class kgdatagrid extends LitElement {
|
|
|
35
35
|
/** */
|
|
36
36
|
currentPage: number;
|
|
37
37
|
/** */
|
|
38
|
+
stickyHeader: boolean;
|
|
39
|
+
/** */
|
|
40
|
+
maxHeight: string;
|
|
41
|
+
/** */
|
|
38
42
|
rowClassName: ((row: any) => string) | null;
|
|
39
43
|
}
|
|
40
44
|
|
|
@@ -62,6 +66,8 @@ declare global {
|
|
|
62
66
|
total?: number;
|
|
63
67
|
serverSide?: boolean;
|
|
64
68
|
currentPage?: number;
|
|
69
|
+
stickyHeader?: boolean;
|
|
70
|
+
maxHeight?: string;
|
|
65
71
|
rowClassName?: ((row: any) => string) | null;
|
|
66
72
|
onSelectionChange?: (e: any) => void;
|
|
67
73
|
onSort?: (e: any) => void;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/** @customElement kg-tooltip */
|
|
4
|
+
export class kgtooltip extends LitElement {
|
|
5
|
+
/** */
|
|
6
|
+
position: string;
|
|
7
|
+
/** */
|
|
8
|
+
trigger: string;
|
|
9
|
+
/** */
|
|
10
|
+
visible: boolean;
|
|
11
|
+
/** Generated from static properties */
|
|
12
|
+
content: string;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
declare global {
|
|
16
|
+
interface HTMLElementTagNameMap {
|
|
17
|
+
'kg-tooltip': kgtooltip;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
namespace JSX {
|
|
21
|
+
interface IntrinsicElements {
|
|
22
|
+
'kg-tooltip': {
|
|
23
|
+
position?: string;
|
|
24
|
+
trigger?: string;
|
|
25
|
+
visible?: boolean;
|
|
26
|
+
content?: string;
|
|
27
|
+
[key: string]: any;
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
package/types/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export { kgtag } from './components/kg-tag';
|
|
|
39
39
|
export { kgtext } from './components/kg-text';
|
|
40
40
|
export { kgtextarea } from './components/kg-textarea';
|
|
41
41
|
export { kgtoast } from './components/kg-toast';
|
|
42
|
+
export { kgtooltip } from './components/kg-tooltip';
|
|
42
43
|
export { kgtree } from './components/kg-tree';
|
|
43
44
|
export { kgtreeitem } from './components/kg-tree';
|
|
44
45
|
|
|
@@ -83,6 +84,7 @@ declare global {
|
|
|
83
84
|
'kg-text': kgtext;
|
|
84
85
|
'kg-textarea': kgtextarea;
|
|
85
86
|
'kg-toast': kgtoast;
|
|
87
|
+
'kg-tooltip': kgtooltip;
|
|
86
88
|
'kg-tree': kgtree;
|
|
87
89
|
'kg-tree-item': kgtreeitem;
|
|
88
90
|
}
|
|
@@ -206,6 +208,8 @@ declare global {
|
|
|
206
208
|
total?: number;
|
|
207
209
|
serverSide?: boolean;
|
|
208
210
|
currentPage?: number;
|
|
211
|
+
stickyHeader?: boolean;
|
|
212
|
+
maxHeight?: string;
|
|
209
213
|
rowClassName?: ((row: any) => string) | null;
|
|
210
214
|
onSelectionChange?: (e: any) => void;
|
|
211
215
|
onSort?: (e: any) => void;
|
|
@@ -502,6 +506,13 @@ declare global {
|
|
|
502
506
|
onKgClose?: (e: any) => void;
|
|
503
507
|
[key: string]: any;
|
|
504
508
|
};
|
|
509
|
+
'kg-tooltip': {
|
|
510
|
+
position?: string;
|
|
511
|
+
trigger?: string;
|
|
512
|
+
visible?: boolean;
|
|
513
|
+
content?: string;
|
|
514
|
+
[key: string]: any;
|
|
515
|
+
};
|
|
505
516
|
'kg-tree': {
|
|
506
517
|
|
|
507
518
|
[key: string]: any;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { kgtooltip } from '../components/kg-tooltip';
|
|
3
|
+
|
|
4
|
+
export const KgTooltip: React.ForwardRefExoticComponent<Partial<Omit<kgtooltip, keyof HTMLElement>> & React.HTMLAttributes<kgtooltip> & React.RefAttributes<kgtooltip> & {
|
|
5
|
+
[key: string]: any;
|
|
6
|
+
}>;
|
package/types/react/index.d.ts
CHANGED
|
@@ -37,5 +37,6 @@ export { KgTag } from './KgTag';
|
|
|
37
37
|
export { KgText } from './KgText';
|
|
38
38
|
export { KgTextarea } from './KgTextarea';
|
|
39
39
|
export { KgToast } from './KgToast';
|
|
40
|
+
export { KgTooltip } from './KgTooltip';
|
|
40
41
|
export { KgTree } from './KgTree';
|
|
41
42
|
export { KgTreeItem } from './KgTreeItem';
|