@stonecrop/atable 0.34.0 → 0.36.0

package/dist/assets/index.css

@@ -1,5 +1,6 @@
 
 .atable-cell {
+	background-color: inherit;
 	border-radius: 0px;
 	box-sizing: border-box;
 	margin: 0px;
@@ -207,7 +208,7 @@
 	vertical-align: middle;
 	white-space: nowrap;
 	border-top: 1px solid var(--sc-row-border-color);
-	background: white;
+	background: inherit;
 	user-select: none;
 	position: relative;
 }
@@ -291,7 +292,7 @@
 	z-index: 100;
 	min-width: 10rem;
 	padding: 0.25rem 0;
-	background: white;
+	background: var(--sc-overlay-background);
 	border: 1px solid var(--sc-row-border-color);
 	border-left: 4px solid var(--sc-row-border-color);
 	border-radius: 0;
@@ -347,7 +348,23 @@
 }
 
 .atable-row {
-	background-color: white;
+	background-color: var(--sc-cell-background);
+}
+.atable--zebra tbody .atable-row:nth-child(odd) {
+	background-color: var(--sc-row-color-zebra-light);
+}
+.atable--zebra tbody .atable-row:nth-child(even) {
+	background-color: var(--sc-row-color-zebra-dark);
+}
+.atable--zebra tbody .atable-row:nth-child(odd) > td {
+	background-color: var(--sc-row-color-zebra-light);
+}
+.atable--zebra tbody .atable-row:nth-child(even) > td {
+	background-color: var(--sc-row-color-zebra-dark);
+}
+.atable--zebra tbody .atable-row > td:focus,
+.atable--zebra tbody .atable-row > td:focus-within {
+	background-color: var(--sc-focus-cell-background);
 }
 .atable-row-clickable {
 	cursor: pointer;
@@ -391,13 +408,24 @@
 	padding-top: var(--sc-atable-row-padding);
 	padding-bottom: var(--sc-atable-row-padding);
 }
-.atable-expanded-row {
-	border-left: 2px solid var(--sc-row-border-color);
+.expansion-index {
+	border-top: 1px solid var(--sc-row-border-color);
 }
 .atable-expanded-content {
+	box-sizing: border-box;
+	width: 100%;
 	border-top: 1px solid var(--sc-row-border-color);
+	border-right: 1px solid var(--sc-row-border-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
+	border-left: 4px solid var(--sc-row-border-color);
 	padding: 1.5rem;
 }
+.atable-expanded-content > * {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	box-sizing: border-box;
+}
 /* sticky cells in modified rows should be a solid color to properly hide non-sticky cells */
 .atable-row:has(td.cell-modified) > td.sticky-column,
 .atable-row:has(td.cell-modified) > th.sticky-column,
@@ -406,9 +434,9 @@
 	background: var(--sc-cell-changed-color);
 }
 
-.atable-row.changed-row-gradient[data-v-f159cfbe]:has(td.cell-modified) {
-	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);
-	--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);
+.atable-row.changed-row-gradient[data-v-e0056486]:has(td.cell-modified) {
+	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), var(--sc-gray-5) 20%);
+	--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), var(--sc-gray-5) 60%);
 	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
 }
 
@@ -450,29 +478,29 @@
 }
 }
 
-.column-filter[data-v-f9c23db9] {
+.column-filter[data-v-fc482b5d] {
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
 	width: 100%;
 }
-.filter-input[data-v-f9c23db9],
-.filter-select[data-v-f9c23db9] {
+.filter-input[data-v-fc482b5d],
+.filter-select[data-v-fc482b5d] {
 	background-color: var(--sc-form-background) !important;
 	padding: 0.15rem 0.2rem;
 	border: 1px solid var(--sc-form-border);
-	border-radius: 3px;
+	border-radius: var(--sc-border-radius);
 	font-size: 0.875rem;
 	color: var(--sc-cell-text-color);
 	width: 100%;
 	box-sizing: border-box;
 }
-.filter-input[data-v-f9c23db9]:focus,
-.filter-select[data-v-f9c23db9]:focus {
+.filter-input[data-v-fc482b5d]:focus,
+.filter-select[data-v-fc482b5d]:focus {
 	outline: none;
 	border-color: var(--sc-input-active-border-color);
 }
-.checkbox-filter[data-v-f9c23db9] {
+.checkbox-filter[data-v-fc482b5d] {
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
@@ -480,29 +508,29 @@
 	color: var(--sc-cell-text-color);
 	cursor: pointer;
 }
-.filter-checkbox[data-v-f9c23db9] {
+.filter-checkbox[data-v-fc482b5d] {
 	margin: 0;
 }
-.date-range-filter[data-v-f9c23db9] {
+.date-range-filter[data-v-fc482b5d] {
 	display: flex;
 	gap: 0.25rem;
 	align-items: center;
 	width: 100%;
 }
-.date-range-filter .filter-input[data-v-f9c23db9] {
+.date-range-filter .filter-input[data-v-fc482b5d] {
 	flex: 1;
 	min-width: 0;
 }
-.date-separator[data-v-f9c23db9] {
+.date-separator[data-v-fc482b5d] {
 	color: var(--sc-gray-50);
 	font-weight: 500;
 	padding: 0 0.25rem;
 	flex-shrink: 0;
 }
-.clear-btn[data-v-f9c23db9] {
+.clear-btn[data-v-fc482b5d] {
 	background: var(--sc-gray-10);
 	border: 1px solid var(--sc-form-border);
-	border-radius: 3px;
+	border-radius: var(--sc-border-radius);
 	color: var(--sc-gray-70);
 	cursor: pointer;
 	font-size: 1rem;
@@ -511,6 +539,10 @@
 	flex-shrink: 0;
 }
 
+.atable-header-row,
+.atable-filters-row {
+	background-color: var(--sc-cell-background);
+}
 .atable-header-row th {
 	padding-left: 0.5ch !important;
 	font-weight: 700;
@@ -551,7 +583,13 @@ th {
 
 .amodal {
 	position: absolute;
-	background-color: var(--sc-row-color-zebra-dark);
+	width: max-content;
+	max-width: 100%;
+	box-sizing: border-box;
+	margin-top: 0.25rem;
+	padding: 10px;
+	border: 1px solid var(--sc-input-border-color);
+	background: var(--sc-input-field-background);
 	z-index: 200;
 }
 
@@ -620,15 +658,16 @@ td.sticky-index {
 	position: sticky;
 	z-index: 100;
 	order: 0;
-	background: white;
+	background: inherit;
 }
 .sticky-column-edge,
 .atable th.sticky-column-edge {
 	border-right: 1px solid var(--sc-row-border-color);
 }
 
-.atable[data-v-53c8fbad] {
+.atable[data-v-a1149691] {
 	position: relative;
+	background: var(--sc-cell-background);
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -641,7 +680,7 @@ td.sticky-index {
 	height: 1px;
 	/* border-left:4px solid var(--sc-form-border); */
 }
-.atable th[data-v-53c8fbad] {
+.atable th[data-v-a1149691] {
 	border-width: 0px;
 	border-style: solid;
 	border-radius: 0px;
@@ -656,16 +695,15 @@ td.sticky-index {
 	order: 1;
 	box-sizing: border-box;
 }
-.atable th[data-v-53c8fbad]:focus {
+.atable th[data-v-a1149691]:focus {
 	outline: none;
 }
 
-.aloading[data-v-a930a25b] {
+.aloading[data-v-6353ec92] {
 	width: 100%;
 	border-top: 1px solid var(--sc-row-border-color);
 	border-bottom: 1px solid var(--sc-row-border-color);
 	display: flex;
-	background-color: white;
 	border-left: 4px solid var(--sc-row-border-color);
 	padding-left: 0.5ch !important;
 	padding-right: 0.5ch;
@@ -677,7 +715,7 @@ td.sticky-index {
 	overflow: hidden;
 	position: relative;
 }
-.aloading-bar[data-v-a930a25b] {
+.aloading-bar[data-v-6353ec92] {
 	width: 100%;
 	height: 100%;
 	position: absolute;
@@ -689,10 +727,10 @@ td.sticky-index {
 		rgba(var(--sc-table-loading-color), 1) 50%,
 		rgba(var(--sc-table-loading-color), 0) 100%
 	);
-	animation: gradient-a930a25b infinite 2s;
+	animation: gradient-6353ec92 infinite 2s;
 	z-index: 0;
 }
-.aloading-header[data-v-a930a25b] {
+.aloading-header[data-v-6353ec92] {
 	color: var(--sc-cell-text-color);
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
@@ -703,12 +741,12 @@ td.sticky-index {
 	font-weight: normal;
 	z-index: 1;
 }
-.aloading-header[data-v-a930a25b]::after {
+.aloading-header[data-v-6353ec92]::after {
 	content: '...';
-	animation: ellipse-a930a25b 2s;
+	animation: ellipse-6353ec92 2s;
 	animation-iteration-count: infinite;
 }
-@keyframes gradient-a930a25b {
+@keyframes gradient-6353ec92 {
 0% {
 		left: -100%;
 }
@@ -716,7 +754,7 @@ td.sticky-index {
 		left: 100%;
 }
 }
-@keyframes ellipse-a930a25b {
+@keyframes ellipse-6353ec92 {
 0% {
 		content: '';
 }
@@ -734,12 +772,11 @@ td.sticky-index {
 }
 }
 
-.aloading[data-v-e1165876] {
+.aloading[data-v-1daa5d43] {
 	width: 100%;
 	border-top: 1px solid var(--sc-row-border-color);
 	border-bottom: 1px solid var(--sc-row-border-color);
 	display: flex;
-	background-color: white;
 	border-left: 4px solid var(--sc-row-border-color);
 	padding-left: 0.5ch !important;
 	padding-right: 0.5ch;
@@ -751,17 +788,17 @@ td.sticky-index {
 	overflow: hidden;
 	position: relative;
 }
-.aloading-bar[data-v-e1165876] {
+.aloading-bar[data-v-1daa5d43] {
 	width: 50%;
 	height: 3px;
 	position: absolute;
 	left: -100%;
 	bottom: 0;
 	background: var(--sc-row-border-color);
-	animation: bar-left-e1165876 infinite 2s;
+	animation: bar-left-1daa5d43 infinite 2s;
 	z-index: 0;
 }
-.aloading-header[data-v-e1165876] {
+.aloading-header[data-v-1daa5d43] {
 	color: var(--sc-cell-text-color);
 	font-family: var(--sc-atable-font-family);
 	-webkit-font-smoothing: antialiased;
@@ -772,12 +809,12 @@ td.sticky-index {
 	font-weight: normal;
 	z-index: 1;
 }
-.aloading-header[data-v-e1165876]::after {
+.aloading-header[data-v-1daa5d43]::after {
 	content: '...';
-	animation: ellipse-e1165876 2s;
+	animation: ellipse-1daa5d43 2s;
 	animation-iteration-count: infinite;
 }
-@keyframes bar-left-e1165876 {
+@keyframes bar-left-1daa5d43 {
 0% {
 		left: -50%;
 }
@@ -785,7 +822,7 @@ td.sticky-index {
 		left: 100%;
 }
 }
-@keyframes ellipse-e1165876 {
+@keyframes ellipse-1daa5d43 {
 0% {
 		content: '';
 }