Merge pull request #5678 from pat270/nested-table

feat(@clayui/css): Tables adds table-nested-rows
liferay · Sep 28, 2023 · b1cf8c4 · b1cf8c4
2 parents 31e0c8e + e430fda
commit b1cf8c4
Show file tree

Hide file tree

Showing 7 changed files with 401 additions and 0 deletions.
diff --git a/clayui.com/static/js/docs-site.js b/clayui.com/static/js/docs-site.js
@@ -25,6 +25,7 @@ if (!Element.prototype.closest) {
 		var t = event.target;
 
 		var a = t.tagName === 'a' || t.tagName === 'button' ? t : t.closest('a') || t.closest('button');
+		var column = t.closest('.autofit-col-toggle') || false;
 
 		if (a) {
 			if (a.getAttribute('href') === '#1') {
@@ -37,6 +38,14 @@ if (!Element.prototype.closest) {
 				document.querySelector('body').classList.toggle(a.getAttribute('data-toggle'));
 			}
 		}
+
+		if (column) {
+			var button = column.querySelector('.component-action');
+
+			button.classList.toggle('show');
+
+			document.querySelector(button.dataset.target).classList.toggle('show');
+		}
 	});
 })();
 

diff --git a/packages/clay-css/src/scss/cadmin/components/_tables.scss b/packages/clay-css/src/scss/cadmin/components/_tables.scss
@@ -418,6 +418,20 @@ caption {
 	}
 }
 
+// .table-nested-rows
+
+.table-nested-rows {
+	@include clay-table-variant($cadmin-c-table-nested-rows);
+
+	.component-action.show .collapse-icon-closed {
+		display: none;
+	}
+
+	.component-action:not(.show) .collapse-icon-open {
+		display: none;
+	}
+}
+
 // Show Quick Action
 
 .show-quick-actions-on-hover {

diff --git a/packages/clay-css/src/scss/cadmin/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/variables/_tables.scss
@@ -403,6 +403,14 @@ $cadmin-c-table: map-deep-merge(
 				padding-right: 0,
 			),
 		),
+		component-drag: (
+			font-size: 14px,
+			height: 16px,
+			width: 16px,
+			focus: (
+				box-shadow: $cadmin-component-focus-inset-box-shadow,
+			),
+		),
 		custom-control: (
 			margin-bottom: 0,
 		),
@@ -468,6 +476,43 @@ $cadmin-c-table-sm: map-deep-merge(
 	$cadmin-c-table-sm
 );
 
+// .table-nested-rows
+
+$cadmin-c-table-nested-rows: () !default;
+$cadmin-c-table-nested-rows: map-deep-merge(
+	(
+		table-column-start: (
+			padding-left: 20px,
+		),
+		table-column-end: (
+			padding-right: 20px,
+		),
+		autofit-col: (
+			padding-left: 2px,
+			padding-right: 2px,
+			min-width: 28px,
+		),
+		autofit-col-checkbox: (
+			padding-right: 10px,
+		),
+		autofit-col-icon: (
+			padding-right: 10px,
+		),
+		component-drag: (
+			left: 2px,
+			position: absolute,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		component-toggle: (
+			font-size: 14px,
+			height: 24px,
+			width: 24px,
+		),
+	),
+	$cadmin-c-table-nested-rows
+);
+
 // Table Dark Variant
 
 $cadmin-table-dark-bg: $cadmin-gray-800 !default;

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -454,6 +454,20 @@ caption {
 	}
 }
 
+// .table-nested-rows
+
+.table-nested-rows {
+	@include clay-table-variant($c-table-nested-rows);
+
+	.component-action.show .collapse-icon-closed {
+		display: none;
+	}
+
+	.component-action:not(.show) .collapse-icon-open {
+		display: none;
+	}
+}
+
 // Show Quick Action
 
 .show-quick-actions-on-hover {

diff --git a/packages/clay-css/src/scss/mixins/_tables.scss b/packages/clay-css/src/scss/mixins/_tables.scss
@@ -366,6 +366,30 @@
 				}
 			}
 
+			.autofit-col-checkbox {
+				@include clay-css(map-get($map, autofit-col-checkbox));
+			}
+
+			.autofit-col-icon {
+				@include clay-css(map-get($map, autofit-col-icon));
+			}
+
+			.autofit-col-toggle {
+				@include clay-css(map-get($map, autofit-col-toggle));
+			}
+
+			.component-action {
+				@include clay-link(map-get($map, component-action));
+			}
+
+			.component-drag {
+				@include clay-link(map-get($map, component-drag));
+			}
+
+			.component-toggle {
+				@include clay-link(map-get($map, component-toggle));
+			}
+
 			.custom-control,
 			.form-check {
 				@include clay-custom-control-variant(

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -358,6 +358,14 @@ $c-table: map-deep-merge(
 				padding-right: 0,
 			),
 		),
+		component-drag: (
+			font-size: 0.875rem,
+			height: 1rem,
+			width: 1rem,
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
+			),
+		),
 		custom-control: (
 			margin-bottom: 0,
 		),
@@ -442,6 +450,43 @@ $c-table-sm: map-deep-merge(
 	$c-table-sm
 );
 
+// .table-nested-rows
+
+$c-table-nested-rows: () !default;
+$c-table-nested-rows: map-deep-merge(
+	(
+		table-column-start: (
+			padding-left: 1.25rem,
+		),
+		table-column-end: (
+			padding-right: 1.25rem,
+		),
+		autofit-col: (
+			padding-left: 0.125rem,
+			padding-right: 0.125rem,
+			min-width: 1.75rem,
+		),
+		autofit-col-checkbox: (
+			padding-right: 0.625rem,
+		),
+		autofit-col-icon: (
+			padding-right: 0.625rem,
+		),
+		component-drag: (
+			left: 2px,
+			position: absolute,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		component-toggle: (
+			font-size: 0.875rem,
+			height: 1.5rem,
+			width: 1.5rem,
+		),
+	),
+	$c-table-nested-rows
+);
+
 // Table Dark Variant
 
 $table-dark-bg: $gray-800 !default;