@zywave/zui-table 4.4.0-pre.2 → 4.4.0-pre.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/zui-table.fouc.css +1 -1
- package/dist/custom-elements.json +23 -12
- package/dist/zui-table-cell-css.js +1 -1
- package/dist/zui-table-cell-css.js.map +1 -1
- package/dist/zui-table-cell.d.ts +3 -0
- package/dist/zui-table-cell.js +3 -0
- package/dist/zui-table-cell.js.map +1 -1
- package/dist/zui-table-css.js +1 -1
- package/dist/zui-table-css.js.map +1 -1
- package/dist/zui-table-row-css.js +1 -1
- package/dist/zui-table-row-css.js.map +1 -1
- package/dist/zui-table.d.ts +5 -2
- package/dist/zui-table.js +5 -2
- package/dist/zui-table.js.map +1 -1
- package/docs/customelement-manifest-element.html +19 -1
- package/package.json +2 -2
- package/src/css/zui-table.fouc.scss +52 -3
- package/src/zui-table-cell-css.js +1 -1
- package/src/zui-table-cell.scss +20 -19
- package/src/zui-table-cell.ts +3 -0
- package/src/zui-table-css.js +1 -1
- package/src/zui-table-row-css.js +1 -1
- package/src/zui-table-row.scss +24 -24
- package/src/zui-table.scss +28 -26
- package/src/zui-table.ts +5 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){zui-table:not(:defined){box-shadow:0 1px 3px rgba(0,0,0,.29)}}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table[no-results]:not(:defined) [slot=no-results-message]{box-shadow:none}}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table[loading]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[loading]:not(:defined) zui-table-row:not([header]){visibility:hidden}zui-table[loading]:not(:defined) zui-spinner{position:absolute;top:50%;left:50%}zui-table[loading]:not(:defined) *,zui-table[loading]:not(:defined) *::before,zui-table[loading]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;align-items:center}@media(min-width: 45em){zui-table-topbar:not(:defined){flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}}zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:0}}zui-table-topbar:not(:defined) zui-search{--zui-search-border-color: var(--zui-gray-50);flex:1;flex-basis:100%;order:1}@media(min-width: 30em){zui-table-topbar:not(:defined) zui-search{flex-basis:auto;order:0}}@media(min-width: 45em){zui-table-topbar:not(:defined) zui-search{flex:0;margin-right:auto}}zui-table-topbar:not(:defined) [slot=counter]{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=counter]{width:auto;order:0;margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]{width:100%;margin-bottom:1.25rem}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]{width:auto;margin-left:.625rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]{margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:1.25rem;margin-left:1.25rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0;margin-left:.625rem}}zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:0}}@media(max-width: 30em){zui-table-topbar:not(:defined) [slot=action]+[slot=action]{margin-top:.625rem}}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:auto;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table-row:not(:defined){display:flex;padding:0;box-shadow:none}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:flex}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
|
|
1
|
+
zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){zui-table:not(:defined){box-shadow:0 1px 3px rgba(0,0,0,.29)}}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[mode=fixed-sizing]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}@media(width > 45em){zui-table[mode=fixed-sizing]:not(:defined){position:relative;max-width:var(--zui-table-max-width, none);max-height:calc(var(--zui-table-max-height, none) + 6.375rem);overflow:hidden}zui-table[mode=fixed-sizing]:not(:defined):has(>zui-table-row[summary],>:not(zui-table-footer)){max-height:calc(var(--zui-table-max-height, none) + 10.125rem)}zui-table[mode=fixed-sizing]:not(:defined):has(>zui-table-row[summary]+zui-table-footer){max-height:calc(var(--zui-table-max-height, none) + 14.5rem)}zui-table[mode=fixed-sizing]:not(:defined) zui-table-topbar{position:sticky;top:0;left:0;z-index:1}zui-table[mode=fixed-sizing]:not(:defined) zui-table-row[header]{position:sticky;top:3.875rem;z-index:1}zui-table[mode=fixed-sizing]:not(:defined) zui-table-row[summary]{position:sticky;bottom:0;left:0}zui-table[mode=fixed-sizing]:not(:defined) zui-table-row[summary]:has(+zui-table-footer){bottom:4.375rem}zui-table[mode=fixed-sizing]:not(:defined) zui-table-footer{position:sticky;bottom:0;left:0}}zui-table[mode=fixed-sizing]:not(:defined) *,zui-table[mode=fixed-sizing]:not(:defined) *::before,zui-table[mode=fixed-sizing]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table[no-results]:not(:defined) [slot=no-results-message]{box-shadow:none}}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table[loading]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[loading]:not(:defined) zui-table-row:not([header]){visibility:hidden}zui-table[loading]:not(:defined) zui-spinner{position:absolute;top:50%;left:50%}zui-table[loading]:not(:defined) *,zui-table[loading]:not(:defined) *::before,zui-table[loading]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;align-items:center}@media(min-width: 45em){zui-table-topbar:not(:defined){flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}}zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:0}}zui-table-topbar:not(:defined) zui-search{--zui-search-border-color: var(--zui-gray-50);flex:1;flex-basis:100%;order:1}@media(min-width: 30em){zui-table-topbar:not(:defined) zui-search{flex-basis:auto;order:0}}@media(min-width: 45em){zui-table-topbar:not(:defined) zui-search{flex:0;margin-right:auto}}zui-table-topbar:not(:defined) [slot=counter]{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=counter]{width:auto;order:0;margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]{width:100%;margin-bottom:1.25rem}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]{width:auto;margin-left:.625rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]{margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:1.25rem;margin-left:1.25rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0;margin-left:.625rem}}zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:0}}@media(max-width: 30em){zui-table-topbar:not(:defined) [slot=action]+[slot=action]{margin-top:.625rem}}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table-row:not(:defined){padding:0;box-shadow:none}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:grid}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;grid-template-columns:1fr;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
|
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
94
|
"kind": "method",
|
|
95
|
-
"name": "click"
|
|
95
|
+
"name": "click",
|
|
96
|
+
"description": "Handles click event on sortable header cells"
|
|
96
97
|
},
|
|
97
98
|
{
|
|
98
99
|
"kind": "method",
|
|
@@ -469,24 +470,34 @@
|
|
|
469
470
|
"default": "repeat(auto-fit, minmax(0, 1fr))"
|
|
470
471
|
},
|
|
471
472
|
{
|
|
472
|
-
"description": "Override the table
|
|
473
|
-
"name": "--zui-table-
|
|
474
|
-
"default": "
|
|
473
|
+
"description": "Override the margin between the table and footer of the table",
|
|
474
|
+
"name": "--zui-table-footer-margin",
|
|
475
|
+
"default": "10px"
|
|
475
476
|
},
|
|
476
477
|
{
|
|
477
|
-
"description": "
|
|
478
|
-
"name": "--zui-table-
|
|
479
|
-
"default": "
|
|
478
|
+
"description": "Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.",
|
|
479
|
+
"name": "--zui-table-max-height",
|
|
480
|
+
"default": "none"
|
|
480
481
|
},
|
|
481
482
|
{
|
|
482
|
-
"description": "
|
|
483
|
-
"name": "--zui-table-
|
|
484
|
-
"default": "
|
|
483
|
+
"description": "Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.",
|
|
484
|
+
"name": "--zui-table-max-width",
|
|
485
|
+
"default": "none"
|
|
485
486
|
},
|
|
486
487
|
{
|
|
487
488
|
"description": "Override the minimum height of the table body when in a loading state",
|
|
488
489
|
"name": "--zui-table-loading-min-height",
|
|
489
490
|
"default": "20rem"
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"description": "Override the table summary background color",
|
|
494
|
+
"name": "--zui-table-summary-background-color",
|
|
495
|
+
"default": "var(--zui-gray-600)"
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
"description": "Override the the table summary text color",
|
|
499
|
+
"name": "--zui-table-summary-text-color",
|
|
500
|
+
"default": "#fff"
|
|
490
501
|
}
|
|
491
502
|
],
|
|
492
503
|
"slots": [
|
|
@@ -519,7 +530,7 @@
|
|
|
519
530
|
"kind": "field",
|
|
520
531
|
"name": "mode",
|
|
521
532
|
"type": {
|
|
522
|
-
"text": "
|
|
533
|
+
"text": "'default' | 'fixed-sizing'"
|
|
523
534
|
},
|
|
524
535
|
"default": "'default'",
|
|
525
536
|
"description": "Ability to modify the table's layout behavior. The supported values are:\n- `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n- `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.",
|
|
@@ -621,7 +632,7 @@
|
|
|
621
632
|
{
|
|
622
633
|
"name": "mode",
|
|
623
634
|
"type": {
|
|
624
|
-
"text": "
|
|
635
|
+
"text": "'default' | 'fixed-sizing'"
|
|
625
636
|
},
|
|
626
637
|
"default": "'default'",
|
|
627
638
|
"description": "Ability to modify the table's layout behavior. The supported values are:\n- `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n- `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.",
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}
|
|
2
|
+
export const style = css `:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;
|
|
3
3
|
//# sourceMappingURL=zui-table-cell-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,m/BAAm/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}
|
|
1
|
+
{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,m/BAAm/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;\n"]}
|
package/dist/zui-table-cell.d.ts
CHANGED
|
@@ -34,6 +34,9 @@ export declare class ZuiTableCellElement extends ZuiTableBaseElement {
|
|
|
34
34
|
private _isAllowedSort;
|
|
35
35
|
static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
|
|
36
36
|
render(): import("lit-html").TemplateResult<1>;
|
|
37
|
+
/**
|
|
38
|
+
* Handles click event on sortable header cells
|
|
39
|
+
*/
|
|
37
40
|
click(): void;
|
|
38
41
|
}
|
|
39
42
|
export type ZuiTableSortDirection = null | 'ascending' | 'descending';
|
package/dist/zui-table-cell.js
CHANGED
|
@@ -77,6 +77,9 @@ export class ZuiTableCellElement extends ZuiTableBaseElement {
|
|
|
77
77
|
${this.sortable ? html `<zui-icon icon="zui-sort"></zui-icon>` : nothing}
|
|
78
78
|
</div>`;
|
|
79
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* Handles click event on sortable header cells
|
|
82
|
+
*/
|
|
80
83
|
click() {
|
|
81
84
|
super.click();
|
|
82
85
|
this.#onSortableClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,mBAAoB,SAAQ,mBAAmB;IAA5D;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAmCf;;WAEG;QAEK,mBAAc,GAAG,KAAK,CAAC;QAE/B,UAAK,GAA0B,IAAI,CAAC;QACpC,cAAS,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n */\nexport class ZuiTableCellElement extends ZuiTableBaseElement {\n /**\n * Set to decrease table cell padding to accommodate action button(s)\n */\n @property({ type: Boolean, reflect: true })\n action = false;\n\n /**\n * Current sort direction of the sortable cell\n * @type {null | \"ascending\" | \"descending\"}\n */\n @property({ type: String, reflect: true })\n get sort(): ZuiTableSortDirection {\n return this.#sort;\n }\n\n set sort(val: ZuiTableSortDirection) {\n const acceptableVals = ['ascending', 'descending', null];\n if (acceptableVals.includes(val)) {\n const oldVal = this.#sort;\n this.#sort = val;\n this.requestUpdate('sort', oldVal);\n this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));\n }\n }\n\n /**\n * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set\n */\n @property({ type: Boolean, reflect: true })\n get sortable() {\n return this._isAllowedSort && this.#sortable;\n }\n\n set sortable(val: boolean) {\n const oldVal = this.#sortable;\n this.#sortable = val;\n this.requestUpdate('sortable', oldVal);\n }\n\n /**\n * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY\n */\n @state()\n private _isAllowedSort = false;\n\n #sort: ZuiTableSortDirection = null;\n #sortable = false;\n\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n if (this.sortable) {\n import('@zywave/zui-icons');\n }\n const styles = { 'is-selectable': this.sortable };\n return html`<div @click=\"${this.#onSortableClick}\" class=\"${classMap(styles)}\">\n <slot></slot>\n ${this.sortable ? html`<zui-icon icon=\"zui-sort\"></zui-icon>` : nothing}\n </div>`;\n }\n\n /**\n * Handles click event on sortable header cells\n */\n click() {\n super.click();\n\n this.#onSortableClick();\n }\n\n #onSortableClick() {\n if (this.sortable) {\n switch (this.sort) {\n case 'ascending':\n this.sort = 'descending';\n break;\n case 'descending':\n this.sort = null;\n break;\n case null:\n default:\n this.sort = 'ascending';\n break;\n }\n }\n }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\nexport type ZuiTableSortDirection = null | 'ascending' | 'descending';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-cell': ZuiTableCellElement;\n }\n}\n"]}
|
package/dist/zui-table-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css
|
|
2
|
+
export const style = css `@supports(scrollbar-width: thin){:host([mode=fixed-sizing]) .table{scrollbar-color:var(--zui-gray-400) rgba(0,0,0,0);scrollbar-width:thin}}:host([mode=fixed-sizing]) .table::-webkit-scrollbar{width:7px;height:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:hover{background-color:var(--zui-gray-300)}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:active{background-color:var(--zui-gray-600)}:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):not([summary]):nth-child(even)){--zui-table-row-background: var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header],[summary])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) .table-wrapper{min-height:var(--zui-table-loading-min-height, 20rem)}:host([loading]) zui-spinner{position:absolute;top:calc(50% - var(--zui-spinner-size, 1.75rem)/2);left:calc(50% - var(--zui-spinner-size, 1.75rem)/2)}@media(width > 45em){:host([mode=fixed-sizing]){max-width:var(--zui-table-max-width, none)}:host([mode=fixed-sizing]) .table{max-height:var(--zui-table-max-height, none);overflow:auto}:host([mode=fixed-sizing]) ::slotted(zui-table-row[header]){position:sticky;top:0;z-index:1}}::slotted(zui-table-row:not([header],[summary])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header],[summary])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):has(+zui-table-row[summary])),::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}@media(min-width: 45em){.wrapper{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}.wrapper .table-wrapper{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.wrapper .table-wrapper{box-shadow:none}}.wrapper .table-wrapper .table{display:flex;flex-direction:column;flex:1}.wrapper .table-wrapper .table .body{position:relative;flex:1}`;
|
|
3
3
|
//# sourceMappingURL=zui-table-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,67EAA67E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`@supports(scrollbar-width: thin){:host([mode=fixed-sizing]) .table{scrollbar-color:var(--zui-gray-400) rgba(0,0,0,0);scrollbar-width:thin}}:host([mode=fixed-sizing]) .table::-webkit-scrollbar{width:7px;height:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:hover{background-color:var(--zui-gray-300)}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:active{background-color:var(--zui-gray-600)}:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):not([summary]):nth-child(even)){--zui-table-row-background: var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header],[summary])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) .table-wrapper{min-height:var(--zui-table-loading-min-height, 20rem)}:host([loading]) zui-spinner{position:absolute;top:calc(50% - var(--zui-spinner-size, 1.75rem)/2);left:calc(50% - var(--zui-spinner-size, 1.75rem)/2)}@media(width > 45em){:host([mode=fixed-sizing]){max-width:var(--zui-table-max-width, none)}:host([mode=fixed-sizing]) .table{max-height:var(--zui-table-max-height, none);overflow:auto}:host([mode=fixed-sizing]) ::slotted(zui-table-row[header]){position:sticky;top:0;z-index:1}}::slotted(zui-table-row:not([header],[summary])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header],[summary])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):has(+zui-table-row[summary])),::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}@media(min-width: 45em){.wrapper{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}.wrapper .table-wrapper{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.wrapper .table-wrapper{box-shadow:none}}.wrapper .table-wrapper .table{display:flex;flex-direction:column;flex:1}.wrapper .table-wrapper .table .body{position:relative;flex:1}`;\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host{contain:none;display:flex}:host(
|
|
2
|
+
export const style = css `:host{contain:none;display:flex}:host([header]){--zui-table-row-background: #fff;display:none}@media(min-width: 45em){:host([header]){display:flex}}:host([header]) div{border-bottom:.0625rem solid var(--zui-gray-200);box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}:host([summary]){--zui-table-columns-template: 1fr;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:rgba(0,0,0,0)}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}div{display:grid;flex:1;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:var(--zui-table-row-background, #fff)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:var(--zui-table-row-background, transparent);box-shadow:none}}`;
|
|
3
3
|
//# sourceMappingURL=zui-table-row-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,wkCAAwkC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:flex}:host([header]){--zui-table-row-background: #fff;display:none}@media(min-width: 45em){:host([header]){display:flex}}:host([header]) div{border-bottom:.0625rem solid var(--zui-gray-200);box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}:host([summary]){--zui-table-columns-template: 1fr;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:rgba(0,0,0,0)}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}div{display:grid;flex:1;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:var(--zui-table-row-background, #fff)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:var(--zui-table-row-background, transparent);box-shadow:none}}`;\n"]}
|
package/dist/zui-table.d.ts
CHANGED
|
@@ -14,10 +14,12 @@ type ZuiTableMode = 'default' | 'fixed-sizing';
|
|
|
14
14
|
*
|
|
15
15
|
* @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
|
|
16
16
|
* @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
|
|
17
|
-
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
18
|
-
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
19
17
|
* @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
|
|
18
|
+
* @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.
|
|
19
|
+
* @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.
|
|
20
20
|
* @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
|
|
21
|
+
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
22
|
+
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
21
23
|
*
|
|
22
24
|
* @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
|
|
23
25
|
*
|
|
@@ -33,6 +35,7 @@ export declare class ZuiTableElement extends ZuiTableBaseElement {
|
|
|
33
35
|
* Ability to modify the table's layout behavior. The supported values are:
|
|
34
36
|
* - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.
|
|
35
37
|
* - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.
|
|
38
|
+
* @type { 'default' | 'fixed-sizing' }
|
|
36
39
|
*/
|
|
37
40
|
mode: ZuiTableMode;
|
|
38
41
|
/**
|
package/dist/zui-table.js
CHANGED
|
@@ -22,10 +22,12 @@ import { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-sta
|
|
|
22
22
|
*
|
|
23
23
|
* @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
|
|
24
24
|
* @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
|
|
25
|
-
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
26
|
-
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
27
25
|
* @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
|
|
26
|
+
* @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.
|
|
27
|
+
* @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.
|
|
28
28
|
* @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
|
|
29
|
+
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
30
|
+
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
29
31
|
*
|
|
30
32
|
* @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
|
|
31
33
|
*
|
|
@@ -49,6 +51,7 @@ export class ZuiTableElement extends ZuiTableBaseElement {
|
|
|
49
51
|
* Ability to modify the table's layout behavior. The supported values are:
|
|
50
52
|
* - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.
|
|
51
53
|
* - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.
|
|
54
|
+
* @type { 'default' | 'fixed-sizing' }
|
|
52
55
|
*/
|
|
53
56
|
this.mode = 'default';
|
|
54
57
|
// TODO: add divided prop so all table cells will have 1px border
|
package/dist/zui-table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints.js';\nimport '@zywave/zui-spinner';\nimport { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-state.js';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\nimport type { PropertyValues } from 'lit';\n\ntype ZuiTableMode = 'default' | 'fixed-sizing';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n *\n * @cssState mobile - Applied when the table is rendered in mobile mode\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n /**\n * Set for alternating table row background colors\n */\n @property({ type: Boolean, reflect: true })\n banded = false;\n\n /**\n * Ability to modify the table's layout behavior. The supported values are:\n * - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n * - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.\n */\n @property({ reflect: true })\n mode: ZuiTableMode = 'default';\n\n // TODO: add divided prop so all table cells will have 1px border\n\n /**\n * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n noResults = false;\n\n /**\n * Set to show a loading spinner in the table\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @queryAssignedElements({ selector: 'zui-table-row' })\n private _rows: Array<ZuiTableRowElement>;\n\n #internals?: ElementInternals;\n #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n #sortLock = false;\n\n #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n constructor() {\n super();\n\n this.#internals = this.attachInternals?.();\n\n ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n if (this.contains(event.detail.element)) {\n this._associateElement(event.detail.element);\n }\n });\n\n this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n if (this.#sortLock) {\n return;\n }\n this.#sortLock = true;\n this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n setTimeout(() => (this.#sortLock = false), 0);\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n\n this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n const footer = this.querySelector('zui-table-footer:not([slot])');\n const header = this.querySelector('zui-table-row[header]:not([slot])');\n const topbar = this.querySelector('zui-table-topbar:not([slot])');\n const summary = this.querySelector('zui-table-row[summary]:not([slot])');\n footer?.setAttribute('slot', 'footer');\n header?.setAttribute('slot', 'header');\n topbar?.setAttribute('slot', 'topbar');\n summary?.setAttribute('slot', 'summary');\n\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n }\n\n render() {\n return html`<div class=\"wrapper\">\n <slot name=\"topbar\"></slot>\n <div class=\"table-wrapper\">\n <div class=\"table\" role=\"rowgroup\">\n <slot name=\"header\" @slotchange=\"${this.#onSlotChange}\"></slot>\n <div class=\"body\">\n <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n ${this.loading ? html`<zui-spinner active=\"\" part=\"loader\"></zui-spinner>` : html``}\n <div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>\n </div>\n </div>\n <slot name=\"summary\"></slot>\n </div>\n </div>\n <div><slot name=\"footer\"></slot></div>`;\n }\n\n #onSlotChange() {\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n this.requestUpdate();\n }\n\n #addRowHeadersToCells() {\n const headerRow = this.querySelector('zui-table-row[header]');\n\n if (headerRow) {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const cell = row.children[i];\n if (!cell.shadowRoot.querySelector('.header')) {\n const rowHeaderContainer = document.createElement('div');\n rowHeaderContainer.classList.add('header');\n const rowHeaderText = headerRow.children[i].textContent;\n rowHeaderContainer.innerText = rowHeaderText;\n cell.shadowRoot.prepend(rowHeaderContainer);\n }\n }\n }\n }\n\n updateCustomState(this.#internals, 'add', 'mobile');\n }\n\n #removeRowHeadersFromCells() {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const rowChildren = row.children[i].shadowRoot;\n const header = rowChildren.querySelector('.header');\n if (header) {\n rowChildren.removeChild(header);\n }\n }\n }\n\n // remove custom state --mobile from zui-table\n updateCustomState(this.#internals, 'delete', 'mobile');\n }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table': ZuiTableElement;\n }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
|
|
1
|
+
{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints.js';\nimport '@zywave/zui-spinner';\nimport { updateCustomState } from '@zywave/zui-base/dist/utils/update-custom-state.js';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\nimport type { PropertyValues } from 'lit';\n\ntype ZuiTableMode = 'default' | 'fixed-sizing';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n * @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.\n * @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.\n * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n *\n * @cssState mobile - Applied when the table is rendered in mobile mode\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n /**\n * Set for alternating table row background colors\n */\n @property({ type: Boolean, reflect: true })\n banded = false;\n\n /**\n * Ability to modify the table's layout behavior. The supported values are:\n * - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.\n * - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.\n * @type { 'default' | 'fixed-sizing' }\n */\n @property({ reflect: true })\n mode: ZuiTableMode = 'default';\n\n // TODO: add divided prop so all table cells will have 1px border\n\n /**\n * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n noResults = false;\n\n /**\n * Set to show a loading spinner in the table\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @queryAssignedElements({ selector: 'zui-table-row' })\n private _rows: Array<ZuiTableRowElement>;\n\n #internals?: ElementInternals;\n #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n #sortLock = false;\n\n #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n constructor() {\n super();\n\n this.#internals = this.attachInternals?.();\n\n ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n if (this.contains(event.detail.element)) {\n this._associateElement(event.detail.element);\n }\n });\n\n this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n if (this.#sortLock) {\n return;\n }\n this.#sortLock = true;\n this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n setTimeout(() => (this.#sortLock = false), 0);\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n\n this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n const footer = this.querySelector('zui-table-footer:not([slot])');\n const header = this.querySelector('zui-table-row[header]:not([slot])');\n const topbar = this.querySelector('zui-table-topbar:not([slot])');\n const summary = this.querySelector('zui-table-row[summary]:not([slot])');\n footer?.setAttribute('slot', 'footer');\n header?.setAttribute('slot', 'header');\n topbar?.setAttribute('slot', 'topbar');\n summary?.setAttribute('slot', 'summary');\n\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n }\n\n render() {\n return html`<div class=\"wrapper\">\n <slot name=\"topbar\"></slot>\n <div class=\"table-wrapper\">\n <div class=\"table\" role=\"rowgroup\">\n <slot name=\"header\" @slotchange=\"${this.#onSlotChange}\"></slot>\n <div class=\"body\">\n <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n ${this.loading ? html`<zui-spinner active=\"\" part=\"loader\"></zui-spinner>` : html``}\n <div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>\n </div>\n </div>\n <slot name=\"summary\"></slot>\n </div>\n </div>\n <div><slot name=\"footer\"></slot></div>`;\n }\n\n #onSlotChange() {\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n this.requestUpdate();\n }\n\n #addRowHeadersToCells() {\n const headerRow = this.querySelector('zui-table-row[header]');\n\n if (headerRow) {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const cell = row.children[i];\n if (!cell.shadowRoot.querySelector('.header')) {\n const rowHeaderContainer = document.createElement('div');\n rowHeaderContainer.classList.add('header');\n const rowHeaderText = headerRow.children[i].textContent;\n rowHeaderContainer.innerText = rowHeaderText;\n cell.shadowRoot.prepend(rowHeaderContainer);\n }\n }\n }\n }\n\n updateCustomState(this.#internals, 'add', 'mobile');\n }\n\n #removeRowHeadersFromCells() {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const rowChildren = row.children[i].shadowRoot;\n const header = rowChildren.querySelector('.header');\n if (header) {\n rowChildren.removeChild(header);\n }\n }\n }\n\n // remove custom state --mobile from zui-table\n updateCustomState(this.#internals, 'delete', 'mobile');\n }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table': ZuiTableElement;\n }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
|
|
@@ -6,7 +6,25 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<meta name="description" content="ZUI Web Component Skeleton" />
|
|
8
8
|
<title>zui-table CEM Demo</title>
|
|
9
|
-
<script
|
|
9
|
+
<script type="importmap">{
|
|
10
|
+
"imports": {
|
|
11
|
+
"lit": "../../../../node_modules/lit/index.js",
|
|
12
|
+
"lit/": "../../../../node_modules/lit/",
|
|
13
|
+
"@lit-labs/ssr-dom-shim": "../../../../node_modules/@lit-labs/ssr-dom-shim/index.js",
|
|
14
|
+
"@lit/reactive-element": "../../../../node_modules/@lit/reactive-element/reactive-element.js",
|
|
15
|
+
"@lit/reactive-element/": "../../../../node_modules/@lit/reactive-element/",
|
|
16
|
+
"lit-element/": "../../../../node_modules/lit-element/",
|
|
17
|
+
"lit-html": "../../../../node_modules/lit-html/lit-html.js",
|
|
18
|
+
"lit-html/": "../../../../node_modules/lit-html/",
|
|
19
|
+
"tslib": "../../../../node_modules/tslib/tslib.es6.js",
|
|
20
|
+
"tslib/": "../../../../node_modules/tslib/"
|
|
21
|
+
}
|
|
22
|
+
}</script>
|
|
23
|
+
<script type="module" src="https://cdn.zywave.com/es-module-shims@latest/dist/es-module-shims.js"></script>
|
|
24
|
+
<script>
|
|
25
|
+
globalThis.esmsInitOptions = { polyfillEnable: ['css-modules', 'json-modules'] };
|
|
26
|
+
</script>
|
|
27
|
+
<script src="https://cdn.zywave.com/@zywave/customelement-manifest-element@latest/index.js" type="module"></script>
|
|
10
28
|
<link rel="stylesheet" href="../../../../node_modules/@zywave/zui-base-styles/dist/zui-base-styles.css" />
|
|
11
29
|
<style>
|
|
12
30
|
body {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-table",
|
|
3
|
-
"version": "4.4.0-pre.
|
|
3
|
+
"version": "4.4.0-pre.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@zywave/zui-button": "^4.1.9-pre.2"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "8c2ebec76cfa46748574daa022461047705ade32"
|
|
33
33
|
}
|
|
@@ -30,6 +30,54 @@ zui-table[banded] {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
zui-table[mode='fixed-sizing'] {
|
|
34
|
+
@include undefined-element {
|
|
35
|
+
@media (width > $bp-xs) {
|
|
36
|
+
position: relative;
|
|
37
|
+
max-width: var(--zui-table-max-width, none);
|
|
38
|
+
max-height: calc(var(--zui-table-max-height, none) + #{rem(102)});
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
|
|
41
|
+
&:has(> zui-table-row[summary], > :not(zui-table-footer)) {
|
|
42
|
+
max-height: calc(var(--zui-table-max-height, none) + #{rem(162)});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:has(> zui-table-row[summary] + zui-table-footer) {
|
|
46
|
+
max-height: calc(var(--zui-table-max-height, none) + #{rem(232)});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
zui-table-topbar {
|
|
50
|
+
position: sticky;
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
z-index: 1;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
zui-table-row[header] {
|
|
57
|
+
position: sticky;
|
|
58
|
+
top: rem(62);
|
|
59
|
+
z-index: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
zui-table-row[summary] {
|
|
63
|
+
position: sticky;
|
|
64
|
+
bottom: 0;
|
|
65
|
+
left: 0;
|
|
66
|
+
|
|
67
|
+
&:has(+ zui-table-footer) {
|
|
68
|
+
bottom: rem(70);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
zui-table-footer {
|
|
73
|
+
position: sticky;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
33
81
|
zui-table[no-results] {
|
|
34
82
|
@include undefined-element {
|
|
35
83
|
[slot='no-results-message'] {
|
|
@@ -164,13 +212,13 @@ zui-table-topbar {
|
|
|
164
212
|
zui-table-row {
|
|
165
213
|
@include undefined-element {
|
|
166
214
|
display: grid;
|
|
167
|
-
grid-template-columns: auto;
|
|
215
|
+
grid-template-columns: var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));
|
|
168
216
|
padding: rem(10) 0;
|
|
169
217
|
background-color: #fff;
|
|
170
218
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
|
|
171
219
|
|
|
172
220
|
@media (min-width: $bp-xs) {
|
|
173
|
-
display: flex;
|
|
221
|
+
// display: flex;
|
|
174
222
|
padding: 0;
|
|
175
223
|
box-shadow: none;
|
|
176
224
|
}
|
|
@@ -184,7 +232,7 @@ zui-table-row[header] {
|
|
|
184
232
|
border-bottom: 1px solid var(--zui-gray-200);
|
|
185
233
|
|
|
186
234
|
@media (min-width: $bp-xs) {
|
|
187
|
-
display:
|
|
235
|
+
display: grid;
|
|
188
236
|
}
|
|
189
237
|
|
|
190
238
|
zui-table-cell {
|
|
@@ -212,6 +260,7 @@ zui-table-row:not([header]):last-of-type {
|
|
|
212
260
|
|
|
213
261
|
zui-table-row[summary] {
|
|
214
262
|
@include undefined-element {
|
|
263
|
+
grid-template-columns: 1fr;
|
|
215
264
|
background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
|
|
216
265
|
|
|
217
266
|
zui-table-cell {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}
|
|
3
|
+
export const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;
|
package/src/zui-table-cell.scss
CHANGED
|
@@ -8,9 +8,22 @@
|
|
|
8
8
|
overflow-wrap: break-word;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
:host([sort='ascending']) {
|
|
12
|
+
zui-icon {
|
|
13
|
+
--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([sort='descending']) {
|
|
18
|
+
zui-icon {
|
|
19
|
+
--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
11
23
|
:host([action]) {
|
|
12
24
|
div {
|
|
13
25
|
display: flex;
|
|
26
|
+
|
|
14
27
|
@media (min-width: $bp-xs) {
|
|
15
28
|
--zui-table-cell-padding: #{rem(6)} #{rem(20)};
|
|
16
29
|
align-items: center;
|
|
@@ -22,33 +35,21 @@
|
|
|
22
35
|
}
|
|
23
36
|
}
|
|
24
37
|
|
|
25
|
-
:host([sort='ascending']) {
|
|
26
|
-
zui-icon {
|
|
27
|
-
--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([sort='descending']) {
|
|
32
|
-
zui-icon {
|
|
33
|
-
--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
38
|
div {
|
|
38
39
|
padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)});
|
|
39
40
|
|
|
40
41
|
@media (min-width: $bp-xs) {
|
|
41
42
|
padding: var(--zui-table-cell-padding, #{rem(13)} #{rem(20)});
|
|
42
43
|
}
|
|
43
|
-
}
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
&.header {
|
|
46
|
+
float: left;
|
|
47
|
+
width: 33.333%;
|
|
48
|
+
font-weight: 600;
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
+ div {
|
|
51
|
+
padding: var(--zui-table-cell-padding, #{rem(5)} #{rem(15)} #{rem(5)} 0);
|
|
52
|
+
}
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
package/src/zui-table-cell.ts
CHANGED
package/src/zui-table-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export const style = css
|
|
3
|
+
export const style = css`@supports(scrollbar-width: thin){:host([mode=fixed-sizing]) .table{scrollbar-color:var(--zui-gray-400) rgba(0,0,0,0);scrollbar-width:thin}}:host([mode=fixed-sizing]) .table::-webkit-scrollbar{width:7px;height:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:7px}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:hover{background-color:var(--zui-gray-300)}:host([mode=fixed-sizing]) .table::-webkit-scrollbar-thumb:active{background-color:var(--zui-gray-600)}:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):not([summary]):nth-child(even)){--zui-table-row-background: var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header],[summary])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) .table-wrapper{min-height:var(--zui-table-loading-min-height, 20rem)}:host([loading]) zui-spinner{position:absolute;top:calc(50% - var(--zui-spinner-size, 1.75rem)/2);left:calc(50% - var(--zui-spinner-size, 1.75rem)/2)}@media(width > 45em){:host([mode=fixed-sizing]){max-width:var(--zui-table-max-width, none)}:host([mode=fixed-sizing]) .table{max-height:var(--zui-table-max-height, none);overflow:auto}:host([mode=fixed-sizing]) ::slotted(zui-table-row[header]){position:sticky;top:0;z-index:1}}::slotted(zui-table-row:not([header],[summary])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header],[summary])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):has(+zui-table-row[summary])),::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}@media(min-width: 45em){.wrapper{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}.wrapper .table-wrapper{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.wrapper .table-wrapper{box-shadow:none}}.wrapper .table-wrapper .table{display:flex;flex-direction:column;flex:1}.wrapper .table-wrapper .table .body{position:relative;flex:1}`;
|
package/src/zui-table-row-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export const style = css`:host{contain:none;display:flex}:host(
|
|
3
|
+
export const style = css`:host{contain:none;display:flex}:host([header]){--zui-table-row-background: #fff;display:none}@media(min-width: 45em){:host([header]){display:flex}}:host([header]) div{border-bottom:.0625rem solid var(--zui-gray-200);box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}:host([summary]){--zui-table-columns-template: 1fr;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:rgba(0,0,0,0)}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}div{display:grid;flex:1;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:var(--zui-table-row-background, #fff)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:var(--zui-table-row-background, transparent);box-shadow:none}}`;
|
package/src/zui-table-row.scss
CHANGED
|
@@ -6,23 +6,16 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
:host(:last-of-type:not([summary])),
|
|
10
|
-
:host([summary]) {
|
|
11
|
-
div {
|
|
12
|
-
margin-bottom: 0;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
9
|
:host([header]) {
|
|
17
10
|
--zui-table-row-background: #fff;
|
|
18
11
|
display: none;
|
|
19
|
-
border-bottom: rem(1) solid var(--zui-gray-200);
|
|
20
12
|
|
|
21
13
|
@media (min-width: $bp-xs) {
|
|
22
|
-
display:
|
|
14
|
+
display: flex;
|
|
23
15
|
}
|
|
24
16
|
|
|
25
17
|
div {
|
|
18
|
+
border-bottom: rem(1) solid var(--zui-gray-200);
|
|
26
19
|
box-shadow: none;
|
|
27
20
|
}
|
|
28
21
|
|
|
@@ -33,6 +26,28 @@
|
|
|
33
26
|
}
|
|
34
27
|
}
|
|
35
28
|
|
|
29
|
+
:host([summary]) {
|
|
30
|
+
--zui-table-columns-template: 1fr;
|
|
31
|
+
background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
|
|
32
|
+
|
|
33
|
+
div {
|
|
34
|
+
margin-bottom: 0;
|
|
35
|
+
background-color: transparent;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
::slotted(zui-table-cell) {
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
color: var(--zui-table-summary-text-color, #fff);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host(:last-of-type:not([summary])),
|
|
45
|
+
:host([summary]) {
|
|
46
|
+
div {
|
|
47
|
+
margin-bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
36
51
|
div {
|
|
37
52
|
display: grid;
|
|
38
53
|
flex: 1;
|
|
@@ -48,18 +63,3 @@ div {
|
|
|
48
63
|
box-shadow: none;
|
|
49
64
|
}
|
|
50
65
|
}
|
|
51
|
-
|
|
52
|
-
:host([summary]) {
|
|
53
|
-
--zui-table-columns-template: 1fr;
|
|
54
|
-
background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
|
|
55
|
-
|
|
56
|
-
div {
|
|
57
|
-
margin-bottom: 0;
|
|
58
|
-
background-color: transparent;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
::slotted(zui-table-cell) {
|
|
62
|
-
font-weight: 600;
|
|
63
|
-
color: var(--zui-table-summary-text-color, #fff);
|
|
64
|
-
}
|
|
65
|
-
}
|
package/src/zui-table.scss
CHANGED
|
@@ -40,19 +40,23 @@
|
|
|
40
40
|
visibility: hidden;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
.table-wrapper {
|
|
44
|
+
min-height: var(--zui-table-loading-min-height, 20rem);
|
|
45
|
+
}
|
|
46
|
+
|
|
43
47
|
zui-spinner {
|
|
44
48
|
position: absolute;
|
|
45
49
|
top: calc(50% - (var(--zui-spinner-size, 1.75rem) / 2));
|
|
46
50
|
left: calc(50% - (var(--zui-spinner-size, 1.75rem) / 2));
|
|
47
51
|
}
|
|
52
|
+
}
|
|
48
53
|
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
:host([mode='fixed-sizing']) {
|
|
55
|
+
.table {
|
|
56
|
+
@extend %skinny-scrollbar;
|
|
51
57
|
}
|
|
52
|
-
}
|
|
53
58
|
|
|
54
|
-
@media (width > $bp-xs) {
|
|
55
|
-
:host([mode='fixed-sizing']) {
|
|
59
|
+
@media (width > $bp-xs) {
|
|
56
60
|
max-width: var(--zui-table-max-width, none);
|
|
57
61
|
|
|
58
62
|
.table {
|
|
@@ -63,8 +67,6 @@
|
|
|
63
67
|
::slotted(zui-table-row[header]) {
|
|
64
68
|
position: sticky;
|
|
65
69
|
top: 0;
|
|
66
|
-
left: 0;
|
|
67
|
-
width: fit-content;
|
|
68
70
|
z-index: 1;
|
|
69
71
|
}
|
|
70
72
|
}
|
|
@@ -88,26 +90,26 @@
|
|
|
88
90
|
background-color: #fff;
|
|
89
91
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
|
|
90
92
|
}
|
|
91
|
-
}
|
|
92
93
|
|
|
93
|
-
.table-wrapper {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
@media (min-width: $bp-xs) {
|
|
100
|
-
box-shadow: none;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
94
|
+
.table-wrapper {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
background: #fff;
|
|
98
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
|
|
103
99
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
flex: 1;
|
|
108
|
-
}
|
|
100
|
+
@media (min-width: $bp-xs) {
|
|
101
|
+
box-shadow: none;
|
|
102
|
+
}
|
|
109
103
|
|
|
110
|
-
.
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
.table {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
flex: 1;
|
|
108
|
+
|
|
109
|
+
.body {
|
|
110
|
+
position: relative;
|
|
111
|
+
flex: 1;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
113
115
|
}
|
package/src/zui-table.ts
CHANGED
|
@@ -22,10 +22,12 @@ type ZuiTableMode = 'default' | 'fixed-sizing';
|
|
|
22
22
|
*
|
|
23
23
|
* @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
|
|
24
24
|
* @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
|
|
25
|
-
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
26
|
-
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
27
25
|
* @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
|
|
26
|
+
* @cssprop [--zui-table-max-height=none] - Set the maximum height of the table when table `mode` is set to `fixed-sizing`. Required for vertical scrolling to work.
|
|
27
|
+
* @cssprop [--zui-table-max-width=none] - Set the maximum width of the table when table `mode` is set to `fixed-sizing`, but not required for horizontal scrolling to work.
|
|
28
28
|
* @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
|
|
29
|
+
* @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
|
|
30
|
+
* @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
|
|
29
31
|
*
|
|
30
32
|
* @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
|
|
31
33
|
*
|
|
@@ -42,6 +44,7 @@ export class ZuiTableElement extends ZuiTableBaseElement {
|
|
|
42
44
|
* Ability to modify the table's layout behavior. The supported values are:
|
|
43
45
|
* - `default` (default): Table width is determined by its content. Columns will expand to fit the content within them.
|
|
44
46
|
* - `fixed-sizing`: Opts-in to constrainig dimensions by the `--zui-table-max-width` and `--zui-table-max-height` CSS properties. This unlocks the ability to make a table vertically and horizontally scrollable within a container. The following CSS properties are required: `--zui-table-columns-template`. You should set at least one of the following: `--zui-table-max-width`, `--zui-table-max-height`.
|
|
47
|
+
* @type { 'default' | 'fixed-sizing' }
|
|
45
48
|
*/
|
|
46
49
|
@property({ reflect: true })
|
|
47
50
|
mode: ZuiTableMode = 'default';
|