@nuralyui/table 0.0.3 → 0.0.7
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/bundle.js +2351 -0
- package/package.json +16 -2
- package/react.js +2 -2
- package/react.js.map +1 -1
- package/table.component.d.ts +112 -12
- package/table.component.js +285 -136
- package/table.component.js.map +1 -1
- package/table.style.js +676 -2
- package/table.style.js.map +1 -1
- package/table.types.d.ts +60 -4
- package/table.types.js +0 -23
- package/table.types.js.map +1 -1
- package/components/hy-table-actions.d.ts +0 -10
- package/components/hy-table-actions.d.ts.map +0 -1
- package/components/hy-table-actions.js +0 -39
- package/components/hy-table-actions.js.map +0 -1
- package/components/hy-table-content.d.ts +0 -25
- package/components/hy-table-content.d.ts.map +0 -1
- package/components/hy-table-content.js +0 -168
- package/components/hy-table-content.js.map +0 -1
- package/components/hy-table-filter.d.ts +0 -11
- package/components/hy-table-filter.d.ts.map +0 -1
- package/components/hy-table-filter.js +0 -59
- package/components/hy-table-filter.js.map +0 -1
- package/components/hy-table-pagination.d.ts +0 -21
- package/components/hy-table-pagination.d.ts.map +0 -1
- package/components/hy-table-pagination.js +0 -111
- package/components/hy-table-pagination.js.map +0 -1
- package/components/table-actions.style.d.ts +0 -2
- package/components/table-actions.style.d.ts.map +0 -1
- package/components/table-actions.style.js +0 -31
- package/components/table-actions.style.js.map +0 -1
- package/components/table-actions.variables.d.ts +0 -2
- package/components/table-actions.variables.d.ts.map +0 -1
- package/components/table-actions.variables.js +0 -13
- package/components/table-actions.variables.js.map +0 -1
- package/components/table-content.style.d.ts +0 -2
- package/components/table-content.style.d.ts.map +0 -1
- package/components/table-content.style.js +0 -77
- package/components/table-content.style.js.map +0 -1
- package/components/table-content.variables.d.ts +0 -2
- package/components/table-content.variables.d.ts.map +0 -1
- package/components/table-content.variables.js +0 -29
- package/components/table-content.variables.js.map +0 -1
- package/components/table-filter.style.d.ts +0 -2
- package/components/table-filter.style.d.ts.map +0 -1
- package/components/table-filter.style.js +0 -39
- package/components/table-filter.style.js.map +0 -1
- package/components/table-filter.variables.d.ts +0 -2
- package/components/table-filter.variables.d.ts.map +0 -1
- package/components/table-filter.variables.js +0 -17
- package/components/table-filter.variables.js.map +0 -1
- package/components/table-pagination.style.d.ts +0 -2
- package/components/table-pagination.style.d.ts.map +0 -1
- package/components/table-pagination.style.js +0 -102
- package/components/table-pagination.style.js.map +0 -1
- package/components/table-pagination.variables.d.ts +0 -2
- package/components/table-pagination.variables.d.ts.map +0 -1
- package/components/table-pagination.variables.js +0 -17
- package/components/table-pagination.variables.js.map +0 -1
- package/demo/table-demo.d.ts +0 -17
- package/demo/table-demo.d.ts.map +0 -1
- package/demo/table-demo.js +0 -166
- package/demo/table-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/table.component.d.ts.map +0 -1
- package/table.style.d.ts.map +0 -1
- package/table.types.d.ts.map +0 -1
- package/test/hy-table-actions_test.d.ts +0 -2
- package/test/hy-table-actions_test.d.ts.map +0 -1
- package/test/hy-table-actions_test.js +0 -32
- package/test/hy-table-actions_test.js.map +0 -1
- package/test/hy-table-content_test.d.ts +0 -2
- package/test/hy-table-content_test.d.ts.map +0 -1
- package/test/hy-table-content_test.js +0 -168
- package/test/hy-table-content_test.js.map +0 -1
- package/test/hy-table-filter_test.d.ts +0 -2
- package/test/hy-table-filter_test.d.ts.map +0 -1
- package/test/hy-table-filter_test.js +0 -80
- package/test/hy-table-filter_test.js.map +0 -1
- package/test/hy-table-pagination_test.d.ts +0 -2
- package/test/hy-table-pagination_test.d.ts.map +0 -1
- package/test/hy-table-pagination_test.js +0 -114
- package/test/hy-table-pagination_test.js.map +0 -1
- package/test/hy-table_test.d.ts +0 -2
- package/test/hy-table_test.d.ts.map +0 -1
- package/test/hy-table_test.js +0 -145
- package/test/hy-table_test.js.map +0 -1
package/table.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe,GAAG,CAAA;;;;;;;;;;;CAWjB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default css`\n :host {\n display: block;\n width: 100%;\n font-family: Arial, sans-serif;\n }\n .filter-container {\n display: flex;\n justify-content: end;\n width: 100%;\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6qBjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n width: 100%;\n font-family: var(--nuraly-font-family, Arial, sans-serif);\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n }\n\n /* Filter Container Styles */\n .filter-container {\n display: flex;\n justify-content: flex-end;\n width: 100%;\n padding: var(--nuraly-spacing-2, 0.5rem) 0;\n position: relative;\n margin-bottom: 5px;\n }\n\n .filter-container input {\n padding: 5px;\n padding-left: 30px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--nuraly-table-filter-background, #ffffff);\n color: var(--nuraly-table-filter-text, #000000);\n }\n\n .filter-container input:focus {\n outline-style: none;\n border: 1px solid var(--nuraly-table-filter-border, #1890ff);\n }\n\n .filter-container .icon-container {\n height: 25px;\n width: 35px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .filter-container .search-icon {\n position: absolute;\n left: 10px;\n top: 25%;\n }\n\n /* Actions Bar Styles */\n .actions-container {\n background-color: var(--nuraly-table-action-color, #0f62fe);\n padding: 10px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n color: var(--nuraly-table-background, #ffffff);\n }\n\n /* Fixed Header Styles */\n .table-content-wrapper.fixed-header {\n overflow-y: auto;\n overflow-x: auto;\n }\n\n .table-content-wrapper.fixed-header table {\n border-collapse: separate;\n border-spacing: 0;\n }\n\n .table-content-wrapper.fixed-header thead {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n .table-content-wrapper.fixed-header thead th {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-table-header-background, #fafafa);\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .table-content-wrapper.fixed-header thead tr {\n box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n .actions-container button {\n cursor: pointer;\n border: none;\n color: var(--nuraly-table-background, #ffffff);\n background-color: var(--nuraly-table-action-color, #0f62fe);\n }\n\n .actions-container[data-size='small'] {\n padding: 5px;\n }\n\n .actions-container[data-size='large'] {\n padding: 15px;\n }\n\n /* Table Content Wrapper Styles */\n .table-content-wrapper {\n display: block;\n overflow: auto;\n }\n\n input[type='checkbox'][data-indeterminate='true']::after {\n width: 13px;\n height: 13px;\n background-color: var(--nuraly-table-checkbox-checked, #161616);\n color: var(--nuraly-table-background, #ffffff);\n display: flex;\n justify-content: center;\n align-items: center;\n content: '-';\n }\n\n /* Table Styles */\n table {\n width: 100%;\n border-spacing: 0px;\n color: var(--nuraly-table-text-color);\n }\n\n td {\n text-align: center;\n border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n padding: 10px;\n }\n\n th {\n cursor: pointer;\n padding: 10px;\n }\n\n th span {\n display: flex;\n justify-content: center;\n gap: 10px;\n }\n\n nr-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n --nuraly-icon-color: var(--nuraly-table-text-color);\n }\n\n tbody tr {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n thead tr {\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n tbody tr:has(input:checked) {\n background-color: var(--nuraly-table-row-selected-background, #e6f7ff);\n }\n\n input,\n .expand-icon {\n cursor: pointer;\n accent-color: var(--nuraly-table-checkbox-checked, #1890ff);\n }\n\n /* Size Variants for Table Content */\n :host([size='small']) td,\n :host([size='small']) th {\n padding: 5px;\n }\n\n :host([size='large']) td,\n :host([size='large']) th {\n padding: 15px;\n }\n\n /* Pagination Styles */\n .pagination-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--nuraly-pagination-background-color);\n color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .left-content {\n display: flex;\n align-items: center;\n }\n\n .pagination-container .left-content .items-details {\n border-left: var(--nuraly-pagination-borders);\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n }\n\n .pagination-container .left-content .select-details label {\n font-size: var(--nuraly-font-size-input, 14px);\n color: var(--nuraly-table-pagination-text, #000000);\n white-space: nowrap;\n }\n\n .pagination-container .left-content .select-details nr-select {\n min-width: 60px;\n max-width: 80px;\n --select-border-color: var(--nuraly-table-border-color, #d9d9d9);\n --select-background: var(--nuraly-table-pagination-background, #fafafa);\n --select-text-color: var(--nuraly-table-pagination-text, #000000);\n }\n\n .pagination-container .right-content {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .icon-container {\n display: flex;\n align-items: center;\n border-left: var(--nuraly-pagination-borders);\n }\n\n .pagination-container .right-content .page-details {\n padding: 10px;\n }\n\n .pagination-container .icon-container .left-arrow,\n .pagination-container .icon-container .right-arrow {\n padding: 10px;\n --nuraly-icon-color: var(--nuraly-pagination-text-color);\n }\n\n .pagination-container .icon-container .left-arrow {\n border-right: var(--nuraly-pagination-borders);\n }\n\n .pagination-container nr-icon[data-enabled='false'] {\n cursor: not-allowed;\n }\n\n .pagination-container nr-icon[data-enabled='true'] {\n cursor: pointer;\n }\n\n /* Size Variants for Pagination */\n .pagination-container[data-size='small'] .left-content .items-details {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .left-content .items-details {\n padding: 15px;\n }\n\n .pagination-container[data-size='small'] .left-content .select-details {\n padding: 5px;\n gap: 6px;\n }\n\n .pagination-container[data-size='large'] .left-content .select-details {\n padding: 15px;\n gap: 10px;\n }\n\n .pagination-container[data-size='small'] .right-content .page-details {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .right-content .page-details {\n padding: 15px;\n }\n\n .pagination-container[data-size='small'] .icon-container .left-arrow,\n .pagination-container[data-size='small'] .icon-container .right-arrow {\n padding: 5px;\n }\n\n .pagination-container[data-size='large'] .icon-container .left-arrow,\n .pagination-container[data-size='large'] .icon-container .right-arrow {\n padding: 15px;\n }\n\n /* Column Filter Styles */\n th .th-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n position: relative;\n }\n\n th .th-text {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n th .filter-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .filter-trigger {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n }\n\n .filter-trigger:hover {\n background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));\n }\n\n .filter-icon {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .filter-icon.has-filter {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .filter-indicator {\n position: absolute;\n top: -2px;\n right: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n .column-filter-dropdown {\n position: absolute;\n top: calc(100% + 4px);\n right: 0;\n background: var(--nuraly-table-background, #ffffff);\n border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n z-index: 100;\n min-width: 200px;\n padding: 8px;\n }\n\n .column-filter-content {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .column-filter-input {\n padding: 8px;\n border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);\n border-radius: 4px;\n font-size: 14px;\n width: 100%;\n box-sizing: border-box;\n }\n\n .column-filter-input:focus {\n outline: none;\n border-color: var(--nuraly-table-filter-active, #1890ff);\n box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n }\n\n .column-filter-clear {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--nuraly-table-text-color, #000);\n align-self: flex-end;\n }\n\n .column-filter-clear:hover {\n color: var(--nuraly-table-filter-active, #1890ff);\n }\n\n /* Fixed Columns Styles */\n th.fixed-column,\n td.fixed-column {\n position: sticky;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Fixed columns in header - highest priority */\n thead th.fixed-column {\n z-index: 20;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* When table has fixed header, fixed columns in header need even higher z-index */\n .table-content-wrapper.fixed-header thead th.fixed-column {\n z-index: 25;\n background-color: var(--nuraly-table-header-background, #fafafa);\n }\n\n /* Fixed columns in body */\n tbody td.fixed-column {\n z-index: 8;\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n /* Ensure fixed columns in tbody have proper background */\n tbody tr td.fixed-column {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n tbody tr:hover td.fixed-column {\n background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n }\n\n th.fixed-column-left,\n td.fixed-column-left {\n left: 0;\n border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n th.fixed-column-right,\n td.fixed-column-right {\n right: 0;\n border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n }\n\n /* Shadow effect for fixed columns */\n th.fixed-column-left::after,\n td.fixed-column-left::after {\n content: '';\n position: absolute;\n top: 0;\n right: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-left::after,\n .table-content-wrapper.has-scroll td.fixed-column-left::after {\n box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n th.fixed-column-right::before,\n td.fixed-column-right::before {\n content: '';\n position: absolute;\n top: 0;\n left: -10px;\n bottom: 0;\n width: 10px;\n pointer-events: none;\n transition: box-shadow 0.3s;\n box-shadow: none;\n }\n\n .table-content-wrapper.has-scroll th.fixed-column-right::before,\n .table-content-wrapper.has-scroll td.fixed-column-right::before {\n box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);\n }\n\n /* ============================================ */\n /* Loading State Styles */\n /* ============================================ */\n \n /* Skeleton Loading Rows */\n .skeleton-row {\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n .skeleton-cell {\n padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .skeleton-cell.selection-skeleton {\n width: 48px;\n text-align: center;\n }\n\n .skeleton-checkbox {\n width: 16px;\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 2px;\n margin: 0 auto;\n }\n\n .skeleton-content {\n height: 16px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 4px;\n width: 80%;\n }\n\n @keyframes skeleton-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n\n @keyframes skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.6;\n }\n }\n\n /* Spinner Loading */\n .loading-row {\n background-color: var(--nuraly-table-row-background, #ffffff);\n }\n\n .loading-cell {\n padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .loading-spinner-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--nuraly-spacing-4, 1rem);\n }\n\n .loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid var(--nuraly-table-border-color, #f0f0f0);\n border-top-color: var(--nuraly-color-primary, #1890ff);\n border-radius: 50%;\n animation: spinner-rotate 0.8s linear infinite;\n }\n\n @keyframes spinner-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n }\n\n /* Empty State Styles */\n .empty-row {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-row:hover {\n background: var(--nuraly-table-row-bg-color, #ffffff);\n }\n\n .empty-cell {\n padding: 64px 24px;\n text-align: center;\n border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n }\n\n .empty-icon {\n width: 64px;\n height: 64px;\n color: var(--nuraly-color-text-quaternary, #bfbfbf);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .empty-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .empty-icon nr-icon {\n font-size: 64px;\n }\n\n .empty-text {\n margin: 0;\n color: var(--nuraly-color-text-secondary, #666666);\n font-size: 14px;\n line-height: 1.5;\n }\n\n /* Expansion Row Styles */\n .expand-icon {\n text-align: center;\n vertical-align: middle;\n transition: transform 0.3s ease;\n outline: none;\n }\n\n .expand-icon:hover {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n }\n\n .expand-icon:focus {\n background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);\n }\n\n .expand-icon nr-icon {\n transition: transform 0.3s ease;\n }\n\n .expand-icon.expanded nr-icon {\n transform: rotate(180deg);\n }\n\n .expansion-row {\n transition: all 0.3s ease;\n }\n\n .expansion-row.collapsed {\n opacity: 0;\n height: 0;\n overflow: hidden;\n }\n\n .expansion-row.expanded {\n opacity: 1;\n animation: slideDown 0.3s ease;\n }\n\n .expansion-content {\n padding: 16px;\n background-color: var(--nuraly-color-fill-quaternary, #fafafa);\n border-top: 1px solid var(--nuraly-color-border, #d9d9d9);\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n`;\n\n"]}
|
package/table.types.d.ts
CHANGED
|
@@ -1,29 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Column filter types
|
|
3
|
+
*/
|
|
4
|
+
export declare const enum FilterType {
|
|
5
|
+
Text = "text",
|
|
6
|
+
Select = "select",
|
|
7
|
+
Number = "number",
|
|
8
|
+
Date = "date"
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Column filter configuration
|
|
12
|
+
*/
|
|
13
|
+
export interface ColumnFilter {
|
|
14
|
+
type: FilterType;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
options?: Array<{
|
|
17
|
+
label: string;
|
|
18
|
+
value: string | number;
|
|
19
|
+
}>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Active filter state for a column
|
|
23
|
+
*/
|
|
24
|
+
export interface ActiveColumnFilter {
|
|
25
|
+
columnKey: string;
|
|
26
|
+
value: string | number | null;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Table header configuration
|
|
30
|
+
*/
|
|
1
31
|
export interface IHeader {
|
|
2
32
|
name: string;
|
|
3
33
|
key: string;
|
|
34
|
+
filterable?: boolean;
|
|
35
|
+
filterConfig?: ColumnFilter;
|
|
36
|
+
fixed?: 'left' | 'right';
|
|
37
|
+
width?: number | string;
|
|
4
38
|
}
|
|
5
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Selection mode for table rows
|
|
41
|
+
*/
|
|
42
|
+
export declare const enum SelectionMode {
|
|
6
43
|
Single = "single",
|
|
7
44
|
Multiple = "multiple"
|
|
8
45
|
}
|
|
9
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Table size variants
|
|
48
|
+
*/
|
|
49
|
+
export declare const enum Sizes {
|
|
10
50
|
Small = "small",
|
|
11
51
|
Normal = "normal",
|
|
12
52
|
Large = "large"
|
|
13
53
|
}
|
|
14
|
-
|
|
54
|
+
/**
|
|
55
|
+
* Sort order states
|
|
56
|
+
*/
|
|
57
|
+
export declare const enum SortOrder {
|
|
15
58
|
Default = "default",
|
|
16
59
|
Ascending = "ascending",
|
|
17
60
|
Descending = "descending"
|
|
18
61
|
}
|
|
19
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Sort direction values
|
|
64
|
+
*/
|
|
65
|
+
export declare const enum SortValue {
|
|
20
66
|
Default = 0,
|
|
21
67
|
Ascending = 1,
|
|
22
68
|
Descending = -1
|
|
23
69
|
}
|
|
70
|
+
/**
|
|
71
|
+
* Sort attribute configuration
|
|
72
|
+
*/
|
|
24
73
|
export interface SortAttribute {
|
|
25
74
|
index: number;
|
|
26
75
|
order: SortOrder;
|
|
27
76
|
}
|
|
77
|
+
/**
|
|
78
|
+
* Expansion content render function
|
|
79
|
+
* @param row - The row data
|
|
80
|
+
* @param index - The row index
|
|
81
|
+
* @returns Template result for the expanded content
|
|
82
|
+
*/
|
|
83
|
+
export declare type ExpansionContentRenderer = (row: any, index: number) => any;
|
|
28
84
|
export declare const EMPTY_STRING = "";
|
|
29
85
|
//# sourceMappingURL=table.types.d.ts.map
|
package/table.types.js
CHANGED
|
@@ -1,25 +1,2 @@
|
|
|
1
|
-
export var SelectionMode;
|
|
2
|
-
(function (SelectionMode) {
|
|
3
|
-
SelectionMode["Single"] = "single";
|
|
4
|
-
SelectionMode["Multiple"] = "multiple";
|
|
5
|
-
})(SelectionMode || (SelectionMode = {}));
|
|
6
|
-
export var Sizes;
|
|
7
|
-
(function (Sizes) {
|
|
8
|
-
Sizes["Small"] = "small";
|
|
9
|
-
Sizes["Normal"] = "normal";
|
|
10
|
-
Sizes["Large"] = "large";
|
|
11
|
-
})(Sizes || (Sizes = {}));
|
|
12
|
-
export var SortOrder;
|
|
13
|
-
(function (SortOrder) {
|
|
14
|
-
SortOrder["Default"] = "default";
|
|
15
|
-
SortOrder["Ascending"] = "ascending";
|
|
16
|
-
SortOrder["Descending"] = "descending";
|
|
17
|
-
})(SortOrder || (SortOrder = {}));
|
|
18
|
-
export var SortValue;
|
|
19
|
-
(function (SortValue) {
|
|
20
|
-
SortValue[SortValue["Default"] = 0] = "Default";
|
|
21
|
-
SortValue[SortValue["Ascending"] = 1] = "Ascending";
|
|
22
|
-
SortValue[SortValue["Descending"] = -1] = "Descending";
|
|
23
|
-
})(SortValue || (SortValue = {}));
|
|
24
1
|
export const EMPTY_STRING = '';
|
|
25
2
|
//# sourceMappingURL=table.types.js.map
|
package/table.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"AA0FA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Column filter types\n */\nexport const enum FilterType {\n Text = 'text',\n Select = 'select',\n Number = 'number',\n Date = 'date',\n}\n\n/**\n * Column filter configuration\n */\nexport interface ColumnFilter {\n type: FilterType;\n placeholder?: string;\n options?: Array<{ label: string; value: string | number }>;\n}\n\n/**\n * Active filter state for a column\n */\nexport interface ActiveColumnFilter {\n columnKey: string;\n value: string | number | null;\n}\n\n/**\n * Table header configuration\n */\nexport interface IHeader {\n name: string;\n key: string;\n filterable?: boolean;\n filterConfig?: ColumnFilter;\n fixed?: 'left' | 'right';\n width?: number | string;\n}\n\n/**\n * Selection mode for table rows\n */\nexport const enum SelectionMode {\n Single = 'single',\n Multiple = 'multiple',\n}\n\n/**\n * Table size variants\n */\nexport const enum Sizes {\n Small = 'small',\n Normal = 'normal',\n Large = 'large',\n}\n\n/**\n * Sort order states\n */\nexport const enum SortOrder {\n Default = 'default',\n Ascending = 'ascending',\n Descending = 'descending',\n}\n\n/**\n * Sort direction values\n */\nexport const enum SortValue {\n Default = 0,\n Ascending = 1,\n Descending = -1,\n}\n\n/**\n * Sort attribute configuration\n */\nexport interface SortAttribute {\n index: number;\n order: SortOrder;\n}\n\n/**\n * Expansion content render function\n * @param row - The row data\n * @param index - The row index\n * @returns Template result for the expanded content\n */\nexport type ExpansionContentRenderer = (row: any, index: number) => any;\n\nexport const EMPTY_STRING = '';\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { Sizes } from '../table.types.js';
|
|
3
|
-
export declare class HyTableActions extends LitElement {
|
|
4
|
-
selectedItems: number;
|
|
5
|
-
size: Sizes;
|
|
6
|
-
_onCancelSelection(): void;
|
|
7
|
-
render(): import("lit").TemplateResult<1>;
|
|
8
|
-
static styles: import("lit").CSSResult[];
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=hy-table-actions.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,qBACa,cAAe,SAAQ,UAAU;IAChC,aAAa,EAAG,MAAM,CAAC;IACK,IAAI,EAAE,KAAK,CAAgB;IAEnE,kBAAkB;IAGT,MAAM;IAQf,OAAgB,MAAM,4BAAU;CACjC"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { LitElement, html } from 'lit';
|
|
8
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import { styles } from './table-actions.style.js';
|
|
10
|
-
import { Sizes } from '../table.types.js';
|
|
11
|
-
let HyTableActions = class HyTableActions extends LitElement {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
this.size = Sizes.Normal;
|
|
15
|
-
}
|
|
16
|
-
_onCancelSelection() {
|
|
17
|
-
this.dispatchEvent(new CustomEvent('cancel-selection'));
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
return html `
|
|
21
|
-
<div class="actions-container">
|
|
22
|
-
<span>${this.selectedItems} selected</span>
|
|
23
|
-
<button @click=${this._onCancelSelection}>Cancel</button>
|
|
24
|
-
</div>
|
|
25
|
-
`;
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
HyTableActions.styles = styles;
|
|
29
|
-
__decorate([
|
|
30
|
-
property()
|
|
31
|
-
], HyTableActions.prototype, "selectedItems", void 0);
|
|
32
|
-
__decorate([
|
|
33
|
-
property({ type: Sizes, reflect: true })
|
|
34
|
-
], HyTableActions.prototype, "size", void 0);
|
|
35
|
-
HyTableActions = __decorate([
|
|
36
|
-
customElement('hy-table-actions')
|
|
37
|
-
], HyTableActions);
|
|
38
|
-
export { HyTableActions };
|
|
39
|
-
//# sourceMappingURL=hy-table-actions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-actions.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-actions.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGxC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAE0C,SAAI,GAAU,KAAK,CAAC,MAAM,CAAC;IAcrE,CAAC;IAZC,kBAAkB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1D,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,aAAa;yBACT,IAAI,CAAC,kBAAkB;;KAE3C,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,qBAAM,GAAG,MAAO,CAAA;AAdpB;IAAX,QAAQ,EAAE;qDAAwB;AACK;IAAvC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAA4B;AAFxD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAgB1B;SAhBY,cAAc","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './table-actions.style.js';\nimport {Sizes} from '../table.types.js';\n\n@customElement('hy-table-actions')\nexport class HyTableActions extends LitElement {\n @property() selectedItems!: number;\n @property({type: Sizes, reflect: true}) size: Sizes = Sizes.Normal;\n\n _onCancelSelection() {\n this.dispatchEvent(new CustomEvent('cancel-selection'));\n }\n override render() {\n return html`\n <div class=\"actions-container\">\n <span>${this.selectedItems} selected</span>\n <button @click=${this._onCancelSelection}>Cancel</button>\n </div>\n `;\n }\n static override styles = styles;\n}\n"]}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValueMap } from 'lit';
|
|
2
|
-
import { SelectionMode, Sizes, SortAttribute } from '../table.types.js';
|
|
3
|
-
export declare class HyTableContent extends LitElement {
|
|
4
|
-
headers: [];
|
|
5
|
-
rows: [];
|
|
6
|
-
size: Sizes;
|
|
7
|
-
expandable: string | undefined;
|
|
8
|
-
selectionMode: SelectionMode | undefined;
|
|
9
|
-
selectedItems: boolean[];
|
|
10
|
-
currentPage: number;
|
|
11
|
-
itemPerPage: number;
|
|
12
|
-
sortAttribute: SortAttribute;
|
|
13
|
-
expand: boolean[];
|
|
14
|
-
globalCheck: HTMLInputElement;
|
|
15
|
-
willUpdate(changedProperties: Map<string, this>): void;
|
|
16
|
-
updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void;
|
|
17
|
-
_showExpandedContent(index: number): void;
|
|
18
|
-
_onCheckAll(): void;
|
|
19
|
-
_onCheckOne(checkOneEvent: Event, index: number): void;
|
|
20
|
-
_onSelectOne(index: number): void;
|
|
21
|
-
_onUpdateSortOrder(index: number): void;
|
|
22
|
-
render(): import("lit").TemplateResult<1>;
|
|
23
|
-
static styles: import("lit").CSSResult[];
|
|
24
|
-
}
|
|
25
|
-
//# sourceMappingURL=hy-table-content.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-content.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAU,aAAa,EAAE,KAAK,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAE1F,qBACa,cAAe,SAAQ,UAAU;IACnB,OAAO,EAAG,EAAE,CAAC;IACb,IAAI,EAAG,EAAE,CAAC;IACK,IAAI,EAAG,KAAK,CAAC;IAC3B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,OAAO,EAAE,CAAM;IAC9B,WAAW,EAAG,MAAM,CAAC;IACrB,WAAW,EAAG,MAAM,CAAC;IACrB,aAAa,EAAG,aAAa,CAAC;IACjC,MAAM,EAAE,OAAO,EAAE,CAAM;IAEhC,WAAW,EAAG,gBAAgB,CAAC;IAEtB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC;IAK/C,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAe9F,oBAAoB,CAAC,KAAK,EAAE,MAAM;IAKlC,WAAW;IAUX,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;IAK/C,YAAY,CAAC,KAAK,EAAE,MAAM;IAI1B,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAIvB,MAAM;IAmFf,OAAgB,MAAM,4BAAU;CACjC"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
9
|
-
import { styles } from './table-content.style.js';
|
|
10
|
-
import { repeat } from 'lit/directives/repeat.js';
|
|
11
|
-
import { choose } from 'lit/directives/choose.js';
|
|
12
|
-
import { SelectionMode, Sizes, SortOrder } from '../table.types.js';
|
|
13
|
-
let HyTableContent = class HyTableContent extends LitElement {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.selectedItems = [];
|
|
17
|
-
this.expand = [];
|
|
18
|
-
}
|
|
19
|
-
willUpdate(changedProperties) {
|
|
20
|
-
if (changedProperties.has('rows')) {
|
|
21
|
-
this.expand = Array(this.rows.length).fill(false);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
updated(_changedProperties) {
|
|
25
|
-
if (this.globalCheck && _changedProperties.has('selectedItems')) {
|
|
26
|
-
if (this.selectedItems.every((isSelected) => isSelected)) {
|
|
27
|
-
this.globalCheck.checked = true;
|
|
28
|
-
this.globalCheck.setAttribute('data-indeterminate', 'false');
|
|
29
|
-
}
|
|
30
|
-
else if (this.selectedItems.some((isSelected) => isSelected)) {
|
|
31
|
-
this.globalCheck.checked = false;
|
|
32
|
-
this.globalCheck.setAttribute('data-indeterminate', 'true');
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
this.globalCheck.checked = false;
|
|
36
|
-
this.globalCheck.setAttribute('data-indeterminate', 'false');
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
_showExpandedContent(index) {
|
|
41
|
-
this.expand[index] = !this.expand[index];
|
|
42
|
-
this.requestUpdate();
|
|
43
|
-
}
|
|
44
|
-
_onCheckAll() {
|
|
45
|
-
this.dispatchEvent(new CustomEvent('check-all', {
|
|
46
|
-
detail: { isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected) },
|
|
47
|
-
composed: true,
|
|
48
|
-
bubbles: true,
|
|
49
|
-
}));
|
|
50
|
-
}
|
|
51
|
-
_onCheckOne(checkOneEvent, index) {
|
|
52
|
-
const checked = checkOneEvent.target.checked;
|
|
53
|
-
this.dispatchEvent(new CustomEvent('check-one', { detail: { value: checked, index }, composed: true, bubbles: true }));
|
|
54
|
-
}
|
|
55
|
-
_onSelectOne(index) {
|
|
56
|
-
this.dispatchEvent(new CustomEvent('select-one', { detail: { index } }));
|
|
57
|
-
}
|
|
58
|
-
_onUpdateSortOrder(index) {
|
|
59
|
-
this.dispatchEvent(new CustomEvent('update-sort', { detail: { index }, bubbles: true, composed: true }));
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
return html ` <table>
|
|
63
|
-
<tr>
|
|
64
|
-
${this.expandable || this.selectionMode
|
|
65
|
-
? html `<th>
|
|
66
|
-
${this.selectionMode == SelectionMode.Multiple
|
|
67
|
-
? html `<input id="global-check" type="checkbox" @change=${this._onCheckAll} />`
|
|
68
|
-
: nothing}
|
|
69
|
-
</th>`
|
|
70
|
-
: nothing}
|
|
71
|
-
${repeat(this.headers, (header, index) => html `
|
|
72
|
-
${this.expandable != header.key
|
|
73
|
-
? html `<th @click=${() => this._onUpdateSortOrder(index)}>
|
|
74
|
-
<span
|
|
75
|
-
>${header.name}${index == this.sortAttribute.index
|
|
76
|
-
? choose(this.sortAttribute.order, [
|
|
77
|
-
[SortOrder.Default, () => html `<hy-icon name="arrows-v"></hy-icon>`],
|
|
78
|
-
[SortOrder.Ascending, () => html `<hy-icon name="long-arrow-up"></hy-icon>`],
|
|
79
|
-
[SortOrder.Descending, () => html `<hy-icon name="long-arrow-down"></hy-icon>`],
|
|
80
|
-
])
|
|
81
|
-
: html `<hy-icon name="arrows-v"></hy-icon>`}
|
|
82
|
-
</span>
|
|
83
|
-
</th>`
|
|
84
|
-
: nothing}
|
|
85
|
-
`)}
|
|
86
|
-
</tr>
|
|
87
|
-
${repeat(this.rows, (row, index) => html `
|
|
88
|
-
<tr>
|
|
89
|
-
${this.expandable && !this.selectionMode
|
|
90
|
-
? html `
|
|
91
|
-
<td @click=${() => this._showExpandedContent(index)} class="expand-icon">
|
|
92
|
-
<hy-icon name="${this.expand[index] ? 'angle-up' : 'angle-down'}"></hy-icon>
|
|
93
|
-
</td>
|
|
94
|
-
`
|
|
95
|
-
: this.selectionMode
|
|
96
|
-
? choose(this.selectionMode, [
|
|
97
|
-
[
|
|
98
|
-
SelectionMode.Multiple,
|
|
99
|
-
() => html `<td>
|
|
100
|
-
<input
|
|
101
|
-
type="checkbox"
|
|
102
|
-
@change=${(checkOneEvent) => this._onCheckOne(checkOneEvent, index)}
|
|
103
|
-
.checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
|
|
104
|
-
/>
|
|
105
|
-
</td> `,
|
|
106
|
-
],
|
|
107
|
-
[
|
|
108
|
-
SelectionMode.Single,
|
|
109
|
-
() => html ` <td>
|
|
110
|
-
<input
|
|
111
|
-
type="radio"
|
|
112
|
-
name="item"
|
|
113
|
-
@change=${() => this._onSelectOne(index)}
|
|
114
|
-
.checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
|
|
115
|
-
/>
|
|
116
|
-
</td>`,
|
|
117
|
-
],
|
|
118
|
-
])
|
|
119
|
-
: nothing}
|
|
120
|
-
${repeat(this.headers, (header) => html ` ${this.expandable != header.key ? html `<td>${row[header.key]}</td>` : nothing} `)}
|
|
121
|
-
|
|
122
|
-
<tr style="display:${this.expand[index] ? 'table-row' : 'none'};">
|
|
123
|
-
<td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable]}</td>
|
|
124
|
-
</tr>
|
|
125
|
-
</tr>
|
|
126
|
-
`)}
|
|
127
|
-
</table>`;
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
HyTableContent.styles = styles;
|
|
131
|
-
__decorate([
|
|
132
|
-
property({ type: Array })
|
|
133
|
-
], HyTableContent.prototype, "headers", void 0);
|
|
134
|
-
__decorate([
|
|
135
|
-
property({ type: Array })
|
|
136
|
-
], HyTableContent.prototype, "rows", void 0);
|
|
137
|
-
__decorate([
|
|
138
|
-
property({ type: Sizes, reflect: true })
|
|
139
|
-
], HyTableContent.prototype, "size", void 0);
|
|
140
|
-
__decorate([
|
|
141
|
-
property({ type: String })
|
|
142
|
-
], HyTableContent.prototype, "expandable", void 0);
|
|
143
|
-
__decorate([
|
|
144
|
-
property()
|
|
145
|
-
], HyTableContent.prototype, "selectionMode", void 0);
|
|
146
|
-
__decorate([
|
|
147
|
-
property()
|
|
148
|
-
], HyTableContent.prototype, "selectedItems", void 0);
|
|
149
|
-
__decorate([
|
|
150
|
-
property()
|
|
151
|
-
], HyTableContent.prototype, "currentPage", void 0);
|
|
152
|
-
__decorate([
|
|
153
|
-
property()
|
|
154
|
-
], HyTableContent.prototype, "itemPerPage", void 0);
|
|
155
|
-
__decorate([
|
|
156
|
-
property()
|
|
157
|
-
], HyTableContent.prototype, "sortAttribute", void 0);
|
|
158
|
-
__decorate([
|
|
159
|
-
state()
|
|
160
|
-
], HyTableContent.prototype, "expand", void 0);
|
|
161
|
-
__decorate([
|
|
162
|
-
query('#global-check')
|
|
163
|
-
], HyTableContent.prototype, "globalCheck", void 0);
|
|
164
|
-
HyTableContent = __decorate([
|
|
165
|
-
customElement('hy-table-content')
|
|
166
|
-
], HyTableContent);
|
|
167
|
-
export { HyTableContent };
|
|
168
|
-
//# sourceMappingURL=hy-table-content.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-content.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './table-content.style.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport {IHeader, SelectionMode, Sizes, SortAttribute, SortOrder} from '../table.types.js';\n\n@customElement('hy-table-content')\nexport class HyTableContent extends LitElement {\n @property({type: Array}) headers!: [];\n @property({type: Array}) rows!: [];\n @property({type: Sizes, reflect: true}) size!: Sizes;\n @property({type: String}) expandable: string | undefined;\n @property() selectionMode: SelectionMode | undefined;\n @property() selectedItems: boolean[] = [];\n @property() currentPage!: number;\n @property() itemPerPage!: number;\n @property() sortAttribute!: SortAttribute;\n @state() expand: boolean[] = [];\n @query('#global-check')\n globalCheck!: HTMLInputElement;\n\n override willUpdate(changedProperties: Map<string, this>) {\n if (changedProperties.has('rows')) {\n this.expand = Array(this.rows.length).fill(false);\n }\n }\n override updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {\n if (this.globalCheck && _changedProperties.has('selectedItems')) {\n if (this.selectedItems.every((isSelected) => isSelected)) {\n this.globalCheck.checked = true;\n this.globalCheck.setAttribute('data-indeterminate', 'false');\n } else if (this.selectedItems.some((isSelected) => isSelected)) {\n this.globalCheck.checked = false;\n this.globalCheck.setAttribute('data-indeterminate', 'true');\n } else {\n this.globalCheck.checked = false;\n this.globalCheck.setAttribute('data-indeterminate', 'false');\n }\n }\n }\n\n _showExpandedContent(index: number) {\n this.expand[index] = !this.expand[index];\n this.requestUpdate();\n }\n\n _onCheckAll() {\n this.dispatchEvent(\n new CustomEvent('check-all', {\n detail: {isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected)},\n composed: true,\n bubbles: true,\n })\n );\n }\n\n _onCheckOne(checkOneEvent: Event, index: number) {\n const checked = (checkOneEvent.target as HTMLInputElement).checked;\n this.dispatchEvent(new CustomEvent('check-one', {detail: {value: checked, index}, composed: true, bubbles: true}));\n }\n\n _onSelectOne(index: number) {\n this.dispatchEvent(new CustomEvent('select-one', {detail: {index}}));\n }\n\n _onUpdateSortOrder(index: number) {\n this.dispatchEvent(new CustomEvent('update-sort', {detail: {index}, bubbles: true, composed: true}));\n }\n\n override render() {\n return html` <table>\n <tr>\n ${this.expandable || this.selectionMode\n ? html`<th>\n ${this.selectionMode == SelectionMode.Multiple\n ? html`<input id=\"global-check\" type=\"checkbox\" @change=${this._onCheckAll} />`\n : nothing}\n </th>`\n : nothing}\n ${repeat(\n this.headers,\n (header: IHeader, index) =>\n html`\n ${this.expandable != header.key\n ? html`<th @click=${() => this._onUpdateSortOrder(index)}>\n <span\n >${header.name}${index == this.sortAttribute.index\n ? choose(this.sortAttribute.order, [\n [SortOrder.Default, () => html`<hy-icon name=\"arrows-v\"></hy-icon>`],\n [SortOrder.Ascending, () => html`<hy-icon name=\"long-arrow-up\"></hy-icon>`],\n [SortOrder.Descending, () => html`<hy-icon name=\"long-arrow-down\"></hy-icon>`],\n ])\n : html`<hy-icon name=\"arrows-v\"></hy-icon>`}\n </span>\n </th>`\n : nothing}\n `\n )}\n </tr>\n ${repeat(\n this.rows,\n (row, index) => html`\n <tr>\n ${\n this.expandable && !this.selectionMode\n ? html`\n <td @click=${() => this._showExpandedContent(index)} class=\"expand-icon\">\n <hy-icon name=\"${this.expand[index] ? 'angle-up' : 'angle-down'}\"></hy-icon>\n </td>\n `\n : this.selectionMode\n ? choose(this.selectionMode, [\n [\n SelectionMode.Multiple,\n () =>\n html`<td>\n <input\n type=\"checkbox\"\n @change=${(checkOneEvent: Event) => this._onCheckOne(checkOneEvent, index)}\n .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n />\n </td> `,\n ],\n [\n SelectionMode.Single,\n () => html` <td>\n <input\n type=\"radio\"\n name=\"item\"\n @change=${() => this._onSelectOne(index)}\n .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n />\n </td>`,\n ],\n ])\n : nothing\n }\n ${repeat(\n this.headers,\n (header: IHeader) =>\n html` ${this.expandable != header.key ? html`<td>${row[header.key]}</td>` : nothing} `\n )}\n\n <tr style=\"display:${this.expand[index] ? 'table-row' : 'none'};\">\n <td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable!]}</td>\n </tr>\n </tr>\n `\n )}\n </table>`;\n }\n\n static override styles = styles;\n}\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
export declare class HyTableFilter extends LitElement {
|
|
3
|
-
showInput: boolean;
|
|
4
|
-
value: string;
|
|
5
|
-
updated(): void;
|
|
6
|
-
_handleInput(): void;
|
|
7
|
-
_onChange(inputChangeEvent: Event): void;
|
|
8
|
-
render(): import("lit").TemplateResult<1>;
|
|
9
|
-
static styles: import("lit").CSSResult[];
|
|
10
|
-
}
|
|
11
|
-
//# sourceMappingURL=hy-table-filter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAK9C,qBACa,aAAc,SAAQ,UAAU;IAE3C,SAAS,UAAS;IAGlB,KAAK,SAAgB;IAEZ,OAAO;IAMhB,YAAY;IAIZ,SAAS,CAAC,gBAAgB,EAAE,KAAK;IAIxB,MAAM;IAiBf,OAAgB,MAAM,4BAAU;CACjC"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
|
-
import { styles } from './table-filter.style.js';
|
|
10
|
-
import { EMPTY_STRING } from '../table.types.js';
|
|
11
|
-
let HyTableFilter = class HyTableFilter extends LitElement {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
this.showInput = false;
|
|
15
|
-
this.value = EMPTY_STRING;
|
|
16
|
-
}
|
|
17
|
-
updated() {
|
|
18
|
-
var _a, _b;
|
|
19
|
-
if (this.showInput) {
|
|
20
|
-
(_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
_handleInput() {
|
|
24
|
-
this.showInput = !this.showInput;
|
|
25
|
-
}
|
|
26
|
-
_onChange(inputChangeEvent) {
|
|
27
|
-
this.value = inputChangeEvent.target.value;
|
|
28
|
-
this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true, composed: true }));
|
|
29
|
-
}
|
|
30
|
-
render() {
|
|
31
|
-
return html `
|
|
32
|
-
<div class="filter-container">
|
|
33
|
-
${this.showInput
|
|
34
|
-
? html ` <hy-icon name="search" class="search-icon"></hy-icon>
|
|
35
|
-
<input
|
|
36
|
-
type="text"
|
|
37
|
-
placeholder="search"
|
|
38
|
-
@blur=${!this.value.trim() ? this._handleInput : nothing}
|
|
39
|
-
@input=${this._onChange}
|
|
40
|
-
/>`
|
|
41
|
-
: html `<div class="icon-container" @click=${this._handleInput}>
|
|
42
|
-
<hy-icon name="search"></hy-icon>
|
|
43
|
-
</div> `}
|
|
44
|
-
</div>
|
|
45
|
-
`;
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
HyTableFilter.styles = styles;
|
|
49
|
-
__decorate([
|
|
50
|
-
property({ reflect: true, type: Boolean })
|
|
51
|
-
], HyTableFilter.prototype, "showInput", void 0);
|
|
52
|
-
__decorate([
|
|
53
|
-
state()
|
|
54
|
-
], HyTableFilter.prototype, "value", void 0);
|
|
55
|
-
HyTableFilter = __decorate([
|
|
56
|
-
customElement('hy-table-filter')
|
|
57
|
-
], HyTableFilter);
|
|
58
|
-
export { HyTableFilter };
|
|
59
|
-
//# sourceMappingURL=hy-table-filter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-filter.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG/C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAEE,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,YAAY,CAAC;IAkCvB,CAAC;IAhCU,OAAO;;QACd,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClD;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,SAAS,CAAC,gBAAuB;QAC/B,IAAI,CAAC,KAAK,GAAI,gBAAgB,CAAC,MAA2B,CAAC,KAAK,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;wBAIQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;yBAC/C,IAAI,CAAC,SAAS;iBACtB;YACP,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,YAAY;;oBAEnD;;KAEf,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,oBAAM,GAAG,MAAO,CAAA;AApChC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACvB;AAGlB;IADC,KAAK,EAAE;4CACa;AALV,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuCzB;SAvCY,aAAa","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './table-filter.style.js';\nimport {EMPTY_STRING} from '../table.types.js';\n\n@customElement('hy-table-filter')\nexport class HyTableFilter extends LitElement {\n @property({reflect: true, type: Boolean})\n showInput = false;\n\n @state()\n value = EMPTY_STRING;\n\n override updated() {\n if (this.showInput) {\n this.shadowRoot?.querySelector('input')?.focus();\n }\n }\n\n _handleInput() {\n this.showInput = !this.showInput;\n }\n\n _onChange(inputChangeEvent: Event) {\n this.value = (inputChangeEvent.target as HTMLInputElement).value;\n this.dispatchEvent(new CustomEvent('value-change', {detail: {value: this.value}, bubbles: true, composed: true}));\n }\n override render() {\n return html`\n <div class=\"filter-container\">\n ${this.showInput\n ? html` <hy-icon name=\"search\" class=\"search-icon\"></hy-icon>\n <input\n type=\"text\"\n placeholder=\"search\"\n @blur=${!this.value.trim() ? this._handleInput : nothing}\n @input=${this._onChange}\n />`\n : html`<div class=\"icon-container\" @click=${this._handleInput}>\n <hy-icon name=\"search\"></hy-icon>\n </div> `}\n </div>\n `;\n }\n static override styles = styles;\n}\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValueMap } from 'lit';
|
|
2
|
-
import { Sizes } from '../table.types.js';
|
|
3
|
-
export declare class HyTablePagination extends LitElement {
|
|
4
|
-
numberOfItems: number;
|
|
5
|
-
itemPerPage: number[];
|
|
6
|
-
selectedItemPerPage: number;
|
|
7
|
-
currentPage: number;
|
|
8
|
-
size: Sizes;
|
|
9
|
-
numberOfPages: number;
|
|
10
|
-
fromItem: number;
|
|
11
|
-
toItem: number;
|
|
12
|
-
enableNext: boolean;
|
|
13
|
-
enablePrevious: boolean;
|
|
14
|
-
willUpdate(_changedProperties: PropertyValueMap<this>): void;
|
|
15
|
-
_handleItemPerPageChange(itemPerPageEvent: Event): void;
|
|
16
|
-
_nextPage(): void;
|
|
17
|
-
_previousPage(): void;
|
|
18
|
-
render(): import("lit").TemplateResult<1>;
|
|
19
|
-
static styles: import("lit").CSSResult[];
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=hy-table-pagination.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hy-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,aAAa,EAAG,MAAM,CAAC;IAEvB,WAAW,EAAG,MAAM,EAAE,CAAC;IAEvB,mBAAmB,EAAG,MAAM,CAAC;IAE7B,WAAW,EAAG,MAAM,CAAC;IACmB,IAAI,EAAG,KAAK,CAAC;IAGrD,aAAa,EAAG,MAAM,CAAC;IAEvB,QAAQ,EAAG,MAAM,CAAC;IAElB,MAAM,EAAG,MAAM,CAAC;IAEhB,UAAU,UAAQ;IAElB,cAAc,UAAQ;IAEb,UAAU,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAYrE,wBAAwB,CAAC,gBAAgB,EAAE,KAAK;IAKhD,SAAS;IAIT,aAAa;IAKJ,MAAM;IAkCf,OAAgB,MAAM,4BAAU;CACjC"}
|