@stonecrop/atable 0.13.14 → 0.14.0

package/src/icons/index.ts

@@ -12,6 +12,12 @@ import InsertBelowIcon from './stonecrop-ui-icon-insert-below.svg?raw'
 import MoveIcon from './stonecrop-ui-icon-move.svg?raw'
 import OpenIcon from './stonecrop-ui-icon-open.svg?raw'
 
+// Directional move icons are inline (no dedicated SVG asset): simple up/down chevrons.
+const MoveUpIcon =
+	'<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 13V3.5M4.5 7 8 3.5 11.5 7" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+const MoveDownIcon =
+	'<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 3v9.5M4.5 9 8 12.5 11.5 9" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+
 export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon, OpenIcon }
 
 /**
@@ -26,5 +32,7 @@ export const actionIcons: Record<string, string> = {
 	insertAbove: InsertAboveIcon,
 	insertBelow: InsertBelowIcon,
 	move: MoveIcon,
+	moveUp: MoveUpIcon,
+	moveDown: MoveDownIcon,
 	open: OpenIcon,
 }

package/src/index.ts

@@ -1,7 +1,6 @@
 import { App } from 'vue'
 
 import ACell from './components/ACell.vue'
-import AExpansionRow from './components/AExpansionRow.vue'
 import AGanttCell from './components/AGanttCell.vue'
 import ARow from './components/ARow.vue'
 import ARowActions from './components/ARowActions.vue'
@@ -34,7 +33,6 @@ export {
  */
 function install(app: App /* options */) {
 	app.component('ACell', ACell)
-	app.component('AExpansionRow', AExpansionRow)
 	app.component('AGanttCell', AGanttCell)
 	app.component('ARow', ARow)
 	app.component('ARowActions', ARowActions)
@@ -47,7 +45,6 @@ function install(app: App /* options */) {
 
 export {
 	ACell,
-	AExpansionRow,
 	AGanttCell,
 	ARow,
 	ARowActions,

package/src/schemaToColumns.ts

@@ -7,12 +7,12 @@ import type { TableColumn } from './types'
  *
  * Fields are excluded when:
  * - `hidden: true` — field should not be visible in any view
- * - no `fieldtype` — non-scalar entry (nested table or fieldset), has no column equivalent
+ * - no `component` — non-scalar entry (nested table or fieldset), no column equivalent
  *
  * `fieldname` is renamed to `name`; `hidden` is stripped. All other `ColumnSchema` properties
  * spread through automatically.
  *
- * For `fieldtype: 'Link'` fields without an explicit `cellComponent`:
+ * For link fields (those carrying `doctype`) without an explicit `cellComponent`:
  * - `linkDoctype` is set from the field's `doctype` property (used by ACell's async resolver).
  * - A synchronous `format` function is added (unless the field already has one) that handles
  *   both bare ID strings and pre-resolved `{ id, displayText }` objects.
@@ -21,16 +21,14 @@ import type { TableColumn } from './types'
  */
 export function schemaToColumns(schema: ColumnSchema[]): TableColumn[] {
 	return schema
-		.filter(f => !f.hidden && f.fieldtype)
+		.filter(f => !f.hidden && f.component)
 		.map(({ fieldname, hidden: _hidden, ...rest }) => {
 			const col: TableColumn = Object.assign({ name: fieldname }, rest)
 
-			// Link fields: store the linked doctype for async resolution by ACell,
-			// and add a sync format that handles pre-resolved AFormLinkValue objects.
-			if (rest.fieldtype === 'Link' && !rest.cellComponent) {
-				const fields = rest as Record<string, unknown>
-				const linkedDoctype = typeof fields.doctype === 'string' ? fields.doctype : undefined
-				if (linkedDoctype) col.linkDoctype = linkedDoctype
+			// Link fields: store the linked doctype for async resolution by ACell, and add a sync
+			// format that handles pre-resolved AFormLinkValue objects.
+			if (rest.doctype && !rest.cellComponent) {
+				col.linkDoctype = rest.doctype
 
 				if (!rest.format) {
 					col.format = (v: any): string => {

package/src/stores/table.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { componentCategory } from '@stonecrop/schema'
 import { type CSSProperties, computed, ref } from 'vue'
 
 import type {
@@ -127,7 +128,12 @@ function applyFilter(cellValue: any, filter: FilterState, column: TableColumn):
 	}
 }
 
-function getIndent(colIndex: number, indentLevel?: number): string {
+/**
+ * Compute the CSS indentation for a tree-table cell. Pure helper (captures no store state);
+ * imported directly by cell components rather than exposed on the store's public return.
+ * @internal
+ */
+export function getIndent(colIndex: number, indentLevel?: number): string {
 	if (indentLevel && colIndex === 0 && indentLevel > 0) {
 		return `${indentLevel}ch`
 	} else {
@@ -509,16 +515,13 @@ export const createTableStore = (initData: {
 			const format = column.format
 
 			if (!format) {
-				switch (column.fieldtype) {
-					case 'Check':
-						return value ? '✓' : '✗'
-					case 'Date':
-						return value != null ? new Date(String(value)).toLocaleDateString() : value
-					case 'Datetime':
-						return value != null ? new Date(String(value)).toLocaleString() : value
-					default:
-						return value
-				}
+				// Default cell formatting comes from the component's category; anything without an
+				// opinion (including an unknown component) renders the raw value.
+				const category = componentCategory(column.component)
+				if (category === 'boolean') return value ? '✓' : '✗'
+				if (category === 'date') return value != null ? new Date(String(value)).toLocaleDateString() : value
+				if (category === 'datetime') return value != null ? new Date(String(value)).toLocaleString() : value
+				return value
 			}
 
 			if (typeof format === 'function') {
@@ -922,7 +925,6 @@ export const createTableStore = (initData: {
 			getFormattedValue,
 			getHandlesForBar,
 			getHeaderCellStyle,
-			getIndent,
 			getRowExpandSymbol,
 			insertRowAbove,
 			insertRowBelow,

package/src/types/index.ts

@@ -8,7 +8,7 @@ import { createTableStore } from '../stores/table'
 /**
  * Runtime column definition for ATable.
  *
- * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `fieldtype`, `width`,
+ * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `component`, `width`,
  * `pinned`, filter config, cell/modal component names, etc.) are inherited. The overrides
  * below widen three properties for runtime use (live functions, broader alignment values)
  * and add two runtime-only additions (`mask`, `originalIndex`).
@@ -45,7 +45,7 @@ export interface TableColumn extends Omit<ColumnSchema, 'fieldname' | 'hidden' |
 	mask?: (value: any) => any
 
 	/**
-	 * For `fieldtype: 'Link'` columns: the target doctype slug used by the `linkResolver`
+	 * For link columns (those carrying `doctype`): the target doctype slug used by the `linkResolver`
 	 * to look up display text for bare ID values. Set automatically by `schemaToColumns`
 	 * from the field's `doctype` property.
 	 */
@@ -83,7 +83,8 @@ export interface CellContext {
  * Row action type identifiers.
  * @public
  */
-export type RowActionType = 'open' | 'add' | 'delete' | 'duplicate' | 'insertAbove' | 'insertBelow' | 'move'
+export type RowActionType =
+	'open' | 'add' | 'delete' | 'duplicate' | 'insertAbove' | 'insertBelow' | 'move' | 'moveUp' | 'moveDown'
 
 /**
  * Options for configuring individual row actions.
@@ -115,6 +116,16 @@ export interface RowActionOptions {
 	 * @returns void or false to prevent default behavior
 	 */
 	handler?: (rowIndex: number, store: ReturnType<typeof createTableStore>) => void | boolean
+
+	/**
+	 * Per-row predicate to disable this action for specific rows (e.g. a lock-aware delete, or
+	 * move-up on the first row). Returns true to render the action disabled. Evaluated reactively
+	 * against the store, so it updates as rows change.
+	 *
+	 * @param rowIndex - The index of the row
+	 * @param store - The table store instance
+	 */
+	disabled?: (rowIndex: number, store: ReturnType<typeof createTableStore>) => boolean
 }
 
 /**
@@ -163,6 +174,8 @@ export interface RowActionsConfig {
 		insertAbove?: boolean | RowActionOptions
 		insertBelow?: boolean | RowActionOptions
 		move?: boolean | RowActionOptions
+		moveUp?: boolean | RowActionOptions
+		moveDown?: boolean | RowActionOptions
 	}
 }
 

package/src/components/AExpansionRow.vue

@@ -1,105 +0,0 @@
-<template>
-	<tr v-bind="$attrs" ref="rowEl" :tabindex="tabIndex" class="expandable-row">
-		<td :tabIndex="-1" class="row-index" @click="store.toggleRowExpand(rowIndex)">
-			{{ rowExpandSymbol }}
-		</td>
-		<slot name="row" />
-	</tr>
-	<tr v-if="store.display[rowIndex].expanded" ref="rowExpanded" :tabindex="tabIndex" class="expanded-row">
-		<td :tabIndex="-1" :colspan="store.columns.length + 1" class="expanded-row-content">
-			<slot name="content" />
-		</td>
-	</tr>
-</template>
-
-<script setup lang="ts">
-import { defaultKeypressHandlers, type KeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-import { computed, useTemplateRef } from 'vue'
-
-import { createTableStore } from '../stores/table'
-
-const {
-	rowIndex,
-	store,
-	tabIndex = -1,
-	addNavigation = defaultKeypressHandlers,
-} = defineProps<{
-	rowIndex: number
-	store: ReturnType<typeof createTableStore>
-	tabIndex?: number
-	addNavigation?: boolean | KeypressHandlers
-}>()
-
-const rowRef = useTemplateRef<HTMLTableRowElement>('rowEl')
-// const expandedRowRef = useTemplateRef<HTMLDivElement>('rowExpanded')
-
-const rowExpandSymbol = computed(() => {
-	return store.display[rowIndex].expanded ? '▼' : '►'
-})
-
-if (addNavigation) {
-	const handlers: KeypressHandlers = {
-		'keydown.control.g': (event: KeyboardEvent) => {
-			event.stopPropagation()
-			event.preventDefault()
-			store.toggleRowExpand(rowIndex)
-		},
-	}
-
-	if (typeof addNavigation === 'object') {
-		Object.assign(handlers, addNavigation)
-	}
-
-	useKeyboardNav([
-		{
-			selectors: rowRef,
-			handlers: handlers,
-		},
-	])
-}
-</script>
-
-<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);
-}
-
-.expandable-row > td:first-child {
-	border-left: 4px solid var(--sc-row-border-color);
-}
-
-.expanded-row {
-	border-left: 2px solid var(--sc-row-border-color);
-}
-
-.expandable-row:last-child {
-	border-bottom: 1px solid var(--sc-row-border-color);
-}
-
-.expanded-row-content {
-	border-top: 1px solid var(--sc-row-border-color);
-	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>