@lazhus/kg-ui 0.10.10 → 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 +158 -2
- package/dist/components/kg-datagrid.js +122 -44
- 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 +9 -0
- package/types/components/kg-tooltip.d.ts +31 -0
- package/types/index.d.ts +12 -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 }, // 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; } /* 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",
|
|
@@ -1558,6 +1558,16 @@
|
|
|
1558
1558
|
}
|
|
1559
1559
|
]
|
|
1560
1560
|
},
|
|
1561
|
+
{
|
|
1562
|
+
"kind": "method",
|
|
1563
|
+
"name": "_rowClasses",
|
|
1564
|
+
"parameters": [
|
|
1565
|
+
{
|
|
1566
|
+
"name": "row"
|
|
1567
|
+
}
|
|
1568
|
+
],
|
|
1569
|
+
"description": "Builds the class list for a body row: the built-in `selected` state plus\nany custom class names returned by the consumer's `rowClassName(row)`."
|
|
1570
|
+
},
|
|
1561
1571
|
{
|
|
1562
1572
|
"kind": "method",
|
|
1563
1573
|
"name": "_emitSelectionChange"
|
|
@@ -1650,6 +1660,31 @@
|
|
|
1650
1660
|
"kind": "method",
|
|
1651
1661
|
"name": "_getHeaderRows"
|
|
1652
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
|
+
},
|
|
1653
1688
|
{
|
|
1654
1689
|
"kind": "method",
|
|
1655
1690
|
"name": "render"
|
|
@@ -1782,6 +1817,30 @@
|
|
|
1782
1817
|
},
|
|
1783
1818
|
"default": "1"
|
|
1784
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
|
+
},
|
|
1836
|
+
{
|
|
1837
|
+
"kind": "field",
|
|
1838
|
+
"name": "rowClassName",
|
|
1839
|
+
"type": {
|
|
1840
|
+
"text": "((row: any) => string) | null"
|
|
1841
|
+
},
|
|
1842
|
+
"default": "null"
|
|
1843
|
+
},
|
|
1785
1844
|
{
|
|
1786
1845
|
"kind": "field",
|
|
1787
1846
|
"name": "_sortColumn",
|
|
@@ -6796,6 +6855,103 @@
|
|
|
6796
6855
|
}
|
|
6797
6856
|
]
|
|
6798
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
|
+
},
|
|
6799
6955
|
{
|
|
6800
6956
|
"kind": "javascript-module",
|
|
6801
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,22 +16,22 @@ 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>
|
|
@@ -40,50 +40,50 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
40
40
|
${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>a`
|
|
41
41
|
<tr>
|
|
42
42
|
${this.selectable?a`
|
|
43
|
-
<td class="checkbox-cell">
|
|
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(()=>a`
|
|
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
|
-
`:
|
|
61
|
-
<tr
|
|
62
|
-
class="${this.
|
|
63
|
-
@click="${
|
|
60
|
+
`:t.map(t=>a`
|
|
61
|
+
<tr
|
|
62
|
+
class="${this._rowClasses(t)}"
|
|
63
|
+
@click="${e=>this._handleRowSelect(t,e)}"
|
|
64
64
|
>
|
|
65
65
|
${this.selectable?a`
|
|
66
|
-
<td class="checkbox-cell">
|
|
67
|
-
${
|
|
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>
|
|
@@ -100,8 +100,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
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%;
|
|
@@ -272,6 +272,12 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
272
272
|
background-color: var(--datagrid-selected-bg) !important;
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
+
/* Row status highlights (opt-in via the rowClassName property).
|
|
276
|
+
Uses !important so it wins over the striped/hover modifiers. */
|
|
277
|
+
tbody tr.row-danger {
|
|
278
|
+
background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
275
281
|
/* Alignment */
|
|
276
282
|
.align-left { text-align: left; }
|
|
277
283
|
.align-center { text-align: center; }
|
|
@@ -344,5 +350,77 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
344
350
|
cursor: pointer;
|
|
345
351
|
}
|
|
346
352
|
|
|
353
|
+
/* Sticky Header & Sticky Columns */
|
|
354
|
+
:host([sticky-header]) .table-container {
|
|
355
|
+
overflow: auto;
|
|
356
|
+
max-height: var(--datagrid-max-height, 70vh);
|
|
357
|
+
}
|
|
347
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
|
+
}
|
|
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
|
+
}
|
|
348
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
|
@@ -34,6 +34,12 @@ export class kgdatagrid extends LitElement {
|
|
|
34
34
|
serverSide: boolean;
|
|
35
35
|
/** */
|
|
36
36
|
currentPage: number;
|
|
37
|
+
/** */
|
|
38
|
+
stickyHeader: boolean;
|
|
39
|
+
/** */
|
|
40
|
+
maxHeight: string;
|
|
41
|
+
/** */
|
|
42
|
+
rowClassName: ((row: any) => string) | null;
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
declare global {
|
|
@@ -60,6 +66,9 @@ declare global {
|
|
|
60
66
|
total?: number;
|
|
61
67
|
serverSide?: boolean;
|
|
62
68
|
currentPage?: number;
|
|
69
|
+
stickyHeader?: boolean;
|
|
70
|
+
maxHeight?: string;
|
|
71
|
+
rowClassName?: ((row: any) => string) | null;
|
|
63
72
|
onSelectionChange?: (e: any) => void;
|
|
64
73
|
onSort?: (e: any) => void;
|
|
65
74
|
onPageChange?: (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,9 @@ declare global {
|
|
|
206
208
|
total?: number;
|
|
207
209
|
serverSide?: boolean;
|
|
208
210
|
currentPage?: number;
|
|
211
|
+
stickyHeader?: boolean;
|
|
212
|
+
maxHeight?: string;
|
|
213
|
+
rowClassName?: ((row: any) => string) | null;
|
|
209
214
|
onSelectionChange?: (e: any) => void;
|
|
210
215
|
onSort?: (e: any) => void;
|
|
211
216
|
onPageChange?: (e: any) => void;
|
|
@@ -501,6 +506,13 @@ declare global {
|
|
|
501
506
|
onKgClose?: (e: any) => void;
|
|
502
507
|
[key: string]: any;
|
|
503
508
|
};
|
|
509
|
+
'kg-tooltip': {
|
|
510
|
+
position?: string;
|
|
511
|
+
trigger?: string;
|
|
512
|
+
visible?: boolean;
|
|
513
|
+
content?: string;
|
|
514
|
+
[key: string]: any;
|
|
515
|
+
};
|
|
504
516
|
'kg-tree': {
|
|
505
517
|
|
|
506
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';
|