@stonecrop/atable 0.2.55 → 0.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.55",
+  "version": "0.2.57",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -37,8 +37,8 @@
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^11.1.0",
     "vue": "^3.5.6",
-    "@stonecrop/themes": "0.2.55",
-    "@stonecrop/utilities": "0.2.55"
+    "@stonecrop/themes": "0.2.57",
+    "@stonecrop/utilities": "0.2.57"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",

package/src/components/ACell.vue

@@ -14,7 +14,7 @@
 		@input="updateCellData"
 		@click="showModal"
 		@mousedown="showModal"
-		class="atable__cell"
+		class="atable-cell"
 		:class="pinned ? 'sticky-column' : ''">
 		<component
 			v-if="column.cellComponent"
@@ -204,4 +204,41 @@ const getIndent = (colIndex: number, indentLevel?: number) => {
 
 <style>
 @import url('@stonecrop/themes/default.css');
+
+.atable-cell {
+	border-radius: 0px;
+	box-sizing: border-box;
+	margin: 0px;
+	outline: none;
+	box-shadow: none;
+	color: var(--sc-cell-text-color);
+	overflow: hidden;
+	padding-left: 0.5ch !important;
+	padding-right: 0.5ch;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	border-spacing: 0px;
+	border-collapse: collapse;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	order: 1;
+	white-space: nowrap;
+	max-width: 40ch;
+}
+.atable-cell a {
+	color: var(--sc-cell-text-color);
+	text-decoration: none;
+}
+.atable-cell:focus,
+.atable-cell:focus-within {
+	background-color: var(--sc-focus-cell-background);
+	outline-width: var(--sc-atable-cell-border-width);
+	outline-style: solid;
+	outline-offset: calc(var(--sc-atable-cell-border-width) * -1);
+	outline-color: var(--sc-focus-cell-outline);
+	box-shadow: none;
+	overflow: hidden;
+	text-wrap: nowrap;
+	box-sizing: border-box;
+}
 </style>

package/src/components/AExpansionRow.vue

@@ -62,4 +62,32 @@ if (addNavigation) {
 
 <style>
 @import url('@stonecrop/themes/default.css');
+
+.row-index {
+	color: var(--sc-header-text-color);
+	font-weight: bold;
+	text-align: center;
+	user-select: none;
+	width: 2ch;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.expandable-row {
+	border-top: 1px solid var(--sc-row-border-color);
+	height: var(--sc-atable-row-height);
+	border-left: 4px solid var(--sc-row-border-color);
+	display: flex;
+}
+
+.expanded-row {
+	border-bottom: 1px solid var(--sc-row-border-color);
+	border-top: 1px solid var(--sc-row-border-color);
+}
+
+.expanded-row-content {
+	border-bottom: 1px solid var(--sc-row-border-color);
+	border-top: 1px solid var(--sc-row-border-color);
+	padding: 1.5rem;
+}
 </style>

package/src/components/ARow.vue

@@ -88,4 +88,34 @@ if (addNavigation) {
 
 <style>
 @import url('@stonecrop/themes/default.css');
+
+.table-row {
+	border-top: 1px solid var(--sc-row-border-color);
+	display: flex;
+	background-color: white;
+}
+.list-index {
+	color: var(--sc-header-text-color);
+	font-weight: bold;
+	padding-left: var(--sc-atable-row-padding);
+	padding-right: 0.5em;
+	text-align: left;
+	user-select: none;
+	width: 7ch;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	box-sizing: border-box;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+}
+.tree-index {
+	color: var(--sc-header-text-color);
+	font-weight: bold;
+	text-align: center;
+	user-select: none;
+	width: 2ch;
+	box-sizing: border-box;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+}
 </style>

package/src/components/ATable.vue

@@ -223,6 +223,60 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 })
 </script>
 
+<style>
+.sticky-index {
+	position: sticky;
+	left: 0px;
+	z-index: 1;
+	order: 0;
+}
+
+.sticky-column,
+th.sticky-column,
+td.sticky-column,
+th.sticky-index,
+td.sticky-index {
+	position: sticky;
+	z-index: 1;
+	order: 0;
+	background: white;
+}
+
+.sticky-column-edge,
+.atable th.sticky-column-edge {
+	border-right: 1px solid var(--sc-row-border-color);
+	border-right-width: 1px;
+}
+</style>
+
 <style scoped>
 @import url('@stonecrop/themes/default.css');
+.atable {
+	font-family: var(--sc-atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--sc-table-font-size);
+	border-collapse: collapse;
+	box-sizing: border-box;
+	table-layout: auto;
+	width: auto;
+}
+.atable th {
+	border-width: 0px;
+	border-style: solid;
+	border-radius: 0px;
+	padding-left: 0.5ch;
+	padding-right: 0.5ch;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	color: var(--sc-gray-60);
+	height: var(--sc-atable-row-height);
+	font-weight: 300;
+	letter-spacing: 0.05rem;
+	order: 1;
+	box-sizing: border-box;
+}
+.atable th:focus {
+	outline: none;
+}
 </style>

package/src/components/ATableHeader.vue

@@ -1,7 +1,15 @@
 <template>
 	<thead id="resizable" v-if="columns.length">
 		<tr class="atable-header-row" tabindex="-1">
-			<th v-if="tableData.zeroColumn" id="header-index" :class="hasPinnedColumns ? 'sticky-index' : ''" />
+			<th
+				v-if="tableData.zeroColumn"
+				id="header-index"
+				:class="[
+					hasPinnedColumns ? 'sticky-index' : '',
+					tableData.config.view === 'tree' ? 'tree-index' : '',
+					tableData.config.view === 'list-expansion' ? 'list-expansion-index' : '',
+				]"
+				class="list-index" />
 			<th
 				v-for="(column, colKey) in columns"
 				:key="column.name"
@@ -35,4 +43,30 @@ const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({
 
 <style>
 @import url('@stonecrop/themes/default.css');
+
+.atable-header-row {
+	display: flex;
+}
+.atable-header-row th {
+	padding-left: 0.5ch !important;
+	font-weight: 700;
+	padding-top: var(--sc-atable-row-padding);
+	padding-bottom: var(--sc-atable-row-padding);
+	box-sizing: border-box;
+	color: var(--sc-header-text-color);
+}
+#header-index {
+	padding-left: var(--sc-atable-row-padding);
+	box-sizing: border-box;
+}
+.tree-index {
+	padding-right: 0;
+}
+th {
+	order: 1;
+}
+.list-expansion-index {
+	width: 2ch;
+	margin-left: 5px;
+}
 </style>

package/src/components/ATableModal.vue

@@ -32,4 +32,10 @@ const handleInput = (event: Event) => {
 
 <style>
 @import url('@stonecrop/themes/default.css');
+
+.amodal {
+	position: fixed;
+	background-color: var(--sc-row-color-zebra-dark);
+	z-index: 100;
+}
 </style>