@stonecrop/atable 0.4.2 → 0.4.4

package/dist/index.js

@@ -3,6 +3,8 @@ import AExpansionRow from './components/AExpansionRow.vue';
 import ARow from './components/ARow.vue';
 import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
+import ATableLoading from './components/ATableLoading.vue';
+import ATableLoadingBar from './components/ATableLoadingBar.vue';
 import ATableModal from './components/ATableModal.vue';
 export { createTableStore } from './stores/table';
 /**
@@ -16,6 +18,8 @@ function install(app /* options */) {
     app.component('ARow', ARow);
     app.component('ATable', ATable);
     app.component('ATableHeader', ATableHeader);
+    app.component('ATableLoading', ATableLoading);
+    app.component('ATableLoadingBar', ATableLoadingBar);
     app.component('ATableModal', ATableModal);
 }
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal };
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };

package/dist/src/index.d.ts

@@ -4,6 +4,8 @@ import AExpansionRow from './components/AExpansionRow.vue';
 import ARow from './components/ARow.vue';
 import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
+import ATableLoading from './components/ATableLoading.vue';
+import ATableLoadingBar from './components/ATableLoadingBar.vue';
 import ATableModal from './components/ATableModal.vue';
 export { createTableStore } from './stores/table';
 export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, TableModalProps, TableRow, } from './types';
@@ -13,5 +15,5 @@ export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, T
  * @public
  */
 declare function install(app: App): void;
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal };
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAOxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QASxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^12.0.0",
     "pinia": "^2.3.0",
     "vue": "^3.5.11",
-    "@stonecrop/themes": "0.4.2",
-    "@stonecrop/utilities": "0.4.2"
+    "@stonecrop/themes": "0.4.4",
+    "@stonecrop/utilities": "0.4.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.2",

package/src/components/ACell.vue

@@ -13,7 +13,7 @@
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
-		:class="pinned ? 'sticky-column' : ''">
+		:class="cellClasses">
 		<component
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
@@ -38,6 +38,7 @@ const {
 	store,
 	addNavigation = true,
 	tabIndex = 0,
+	pinned = false,
 } = defineProps<{
 	colIndex: number
 	rowIndex: number
@@ -72,12 +73,18 @@ const cellStyle = computed((): CSSProperties => {
 	return {
 		textAlign,
 		width: cellWidth,
-		backgroundColor: !cellModified.value ? 'inherit' : 'var(--sc-cell-changed-color)',
 		fontWeight: !cellModified.value ? 'inherit' : 'bold',
 		paddingLeft: store.getIndent(colIndex, store.display[rowIndex]?.indent),
 	}
 })
 
+const cellClasses = computed(() => {
+	return {
+		'sticky-column': pinned,
+		'cell-modified': cellModified.value,
+	}
+})
+
 const showModal = () => {
 	const { left, bottom, width, height } = useElementBounding(cellRef)
 
@@ -211,4 +218,11 @@ const updateCellData = (payload: Event) => {
 	text-wrap: nowrap;
 	box-sizing: border-box;
 }
+.cell-modified {
+	font-weight: bold;
+	font-style: italic;
+}
+.cell-modified-highlight {
+	background-color: var(--sc-cell-changed-color);
+}
 </style>

package/src/components/AExpansionRow.vue

@@ -94,3 +94,10 @@ if (addNavigation) {
 	padding: 1.5rem;
 }
 </style>
+<style scoped>
+.expandable-row.changed-row-gradient: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%);
+	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
+}
+</style>

package/src/components/ARow.vue

@@ -1,5 +1,5 @@
 <template>
-	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="table-row">
+	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="atable-row">
 		<!-- render numbered/tree view index; skip render for uncounted lists -->
 		<slot name="index" v-if="store.config.view !== 'uncounted'">
 			<td
@@ -69,7 +69,7 @@ if (addNavigation) {
 <style>
 @import url('@stonecrop/themes/default.css');
 
-.table-row {
+.atable-row {
 	border-top: 1px solid var(--sc-row-border-color);
 	display: flex;
 	background-color: white;
@@ -104,4 +104,18 @@ if (addNavigation) {
 	padding-top: var(--sc-atable-row-padding);
 	padding-bottom: var(--sc-atable-row-padding);
 }
+/* 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,
+.atable-row:has(td.cell-modified) > td.sticky-index,
+.atable-row:has(td.cell-modified) > th.sticky-index {
+	background: var(--sc-cell-changed-color);
+}
+</style>
+<style scoped>
+.atable-row.changed-row-gradient: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%);
+	background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
+}
 </style>

package/src/components/ATableLoading.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="aloading">
+		<h2 class="aloading-header">
+			<slot></slot>
+		</h2>
+		<div class="aloading-bar"></div>
+	</div>
+</template>
+
+<style scoped>
+.aloading {
+	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;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	align-items: center;
+	box-sizing: border-box;
+	background: var(--sc-focus-cell-background);
+	overflow: hidden;
+	position: relative;
+}
+.aloading-bar {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: -100%;
+	top: 0;
+	background: linear-gradient(
+		90deg,
+		rgba(var(--sc-table-loading-color), 0) 0%,
+		rgba(var(--sc-table-loading-color), 1) 50%,
+		rgba(var(--sc-table-loading-color), 0) 100%
+	);
+	animation: gradient infinite 2s;
+	z-index: 0;
+}
+.aloading-header {
+	color: var(--sc-cell-text-color);
+	font-family: var(--sc-atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--sc-table-font-size);
+	padding: 0;
+	margin: 0;
+	font-weight: normal;
+	z-index: 1;
+}
+.aloading-header::after {
+	content: '...';
+	animation: ellipse 2s;
+	animation-iteration-count: infinite;
+}
+
+@keyframes gradient {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
+@keyframes ellipse {
+	0% {
+		content: '';
+	}
+	20% {
+		content: '';
+	}
+	40% {
+		content: '.';
+	}
+	60% {
+		content: '..';
+	}
+	80% {
+		content: '...';
+	}
+}
+</style>

package/src/components/ATableLoadingBar.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="aloading">
+		<h2 class="aloading-header">
+			<slot></slot>
+		</h2>
+		<div class="aloading-bar"></div>
+	</div>
+</template>
+
+<style scoped>
+.aloading {
+	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;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	align-items: center;
+	box-sizing: border-box;
+	background: var(--sc-focus-cell-background);
+	overflow: hidden;
+	position: relative;
+}
+.aloading-bar {
+	width: 50%;
+	height: 3px;
+	position: absolute;
+	left: -100%;
+	bottom: 0;
+	background: var(--sc-row-border-color);
+	animation: bar-left infinite 2s;
+	z-index: 0;
+}
+.aloading-header {
+	color: var(--sc-cell-text-color);
+	font-family: var(--sc-atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--sc-table-font-size);
+	padding: 0;
+	margin: 0;
+	font-weight: normal;
+	z-index: 1;
+}
+.aloading-header::after {
+	content: '...';
+	animation: ellipse 2s;
+	animation-iteration-count: infinite;
+}
+
+@keyframes bar-left {
+	0% {
+		left: -50%;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
+@keyframes ellipse {
+	0% {
+		content: '';
+	}
+	20% {
+		content: '';
+	}
+	40% {
+		content: '.';
+	}
+	60% {
+		content: '..';
+	}
+	80% {
+		content: '...';
+	}
+}
+</style>

package/src/index.ts

@@ -5,6 +5,8 @@ import AExpansionRow from './components/AExpansionRow.vue'
 import ARow from './components/ARow.vue'
 import ATable from './components/ATable.vue'
 import ATableHeader from './components/ATableHeader.vue'
+import ATableLoading from './components/ATableLoading.vue'
+import ATableLoadingBar from './components/ATableLoadingBar.vue'
 import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
 export type {
@@ -28,7 +30,9 @@ function install(app: App /* options */) {
 	app.component('ARow', ARow)
 	app.component('ATable', ATable)
 	app.component('ATableHeader', ATableHeader)
+	app.component('ATableLoading', ATableLoading)
+	app.component('ATableLoadingBar', ATableLoadingBar)
 	app.component('ATableModal', ATableModal)
 }
 
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal }
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal }