@stonecrop/atable 0.11.10 → 0.12.1

package/src/components/ATableColumnFilter.vue

@@ -1,26 +1,26 @@
 <template>
 	<div class="column-filter">
 		<input
-			v-if="(column.filterType || 'text') === 'text'"
+			v-if="resolvedFilterType === 'text'"
 			v-model="filterValue"
 			type="text"
 			class="filter-input"
 			@input="updateFilter(filterValue)" />
 
 		<input
-			v-else-if="column.filterType === 'number'"
+			v-else-if="resolvedFilterType === 'number'"
 			v-model="filterValue"
 			type="number"
 			class="filter-input"
 			@input="updateFilter(filterValue)" />
 
-		<label v-else-if="column.filterType === 'checkbox'" class="checkbox-filter">
+		<label v-else-if="resolvedFilterType === 'checkbox'" class="checkbox-filter">
 			<input v-model="filterValue" type="checkbox" class="filter-checkbox" @change="updateFilter(filterValue)" />
 			<span>{{ column.label }}</span>
 		</label>
 
 		<select
-			v-else-if="column.filterType === 'select'"
+			v-else-if="resolvedFilterType === 'select'"
 			v-model="filterValue"
 			class="filter-select"
 			@change="updateFilter(filterValue)">
@@ -31,13 +31,13 @@
 		</select>
 
 		<input
-			v-else-if="column.filterType === 'date'"
+			v-else-if="resolvedFilterType === 'date'"
 			v-model="filterValue"
 			type="date"
 			class="filter-input"
 			@change="updateFilter(filterValue)" />
 
-		<div v-else-if="column.filterType === 'dateRange'" class="date-range-filter">
+		<div v-else-if="resolvedFilterType === 'dateRange'" class="date-range-filter">
 			<input
 				v-model="dateFilter.startValue"
 				type="date"
@@ -53,7 +53,7 @@
 
 		<component
 			:is="column.filterComponent"
-			v-else-if="column.filterType === 'component' && column.filterComponent"
+			v-else-if="resolvedFilterType === 'component' && column.filterComponent"
 			:value="filterValue"
 			:column="column"
 			:col-index="colIndex"
@@ -81,6 +81,28 @@ const dateFilter = reactive({
 	endValue: '',
 })
 
+const resolvedFilterType = computed(() => {
+	if (column.filterType) return column.filterType
+	switch (column.fieldtype) {
+		case 'Check':
+			return 'checkbox'
+		case 'Date':
+			return 'date'
+		case 'Datetime':
+			return 'dateRange'
+		case 'Select':
+			return 'select'
+		case 'Int':
+		case 'Float':
+		case 'Currency':
+		case 'Decimal':
+		case 'Quantity':
+			return 'number'
+		default:
+			return 'text'
+	}
+})
+
 const getSelectOptions = (column: TableColumn): any[] => {
 	if (column.filterOptions) return column.filterOptions
 
@@ -105,7 +127,7 @@ const hasActiveFilter = computed(() => {
 
 // Filter actions
 const updateFilter = (value: any) => {
-	if (!value && column.filterType !== 'checkbox') {
+	if (!value && resolvedFilterType.value !== 'checkbox') {
 		store.clearFilter(colIndex)
 		filterValue.value = ''
 	} else {

package/src/index.ts

@@ -13,6 +13,7 @@ import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
 export type { FilterState, FilterStateRecord } from './stores/table'
 export type * from './types'
+export { schemaToColumns } from './schemaToColumns'
 
 // Icon exports
 export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon, actionIcons } from './icons'

package/src/schemaToColumns.ts

@@ -0,0 +1,24 @@
+import type { ColumnSchema } from '@stonecrop/schema'
+
+import type { TableColumn } from './types'
+
+/**
+ * Convert an array of doctype field descriptors into ATable column definitions.
+ *
+ * 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
+ *
+ * `fieldname` is renamed to `name`; `hidden` is stripped. All other `ColumnSchema` properties
+ * spread through automatically.
+ *
+ * @public
+ */
+export function schemaToColumns(schema: ColumnSchema[]): TableColumn[] {
+	return schema
+		.filter(f => !f.hidden && f.fieldtype)
+		.map(({ fieldname, hidden: _hidden, ...rest }) => ({
+			name: fieldname,
+			...rest,
+		}))
+}

package/src/stores/table.ts

@@ -425,7 +425,16 @@ export const createTableStore = (initData: {
 			const format = column.format
 
 			if (!format) {
-				return value
+				switch (column.fieldtype) {
+					case 'Check':
+						return value ? '✓' : '✗'
+					case 'Date':
+						return value != null ? new Date(value as string).toLocaleDateString() : value
+					case 'Datetime':
+						return value != null ? new Date(value as string).toLocaleString() : value
+					default:
+						return value
+				}
 			}
 
 			if (typeof format === 'function') {

package/src/types/index.ts

@@ -1,191 +1,54 @@
 import { useElementBounding } from '@vueuse/core'
 import type { Ref, ShallowRef } from 'vue'
 
+import type { ColumnSchema } from '@stonecrop/schema'
+
 import { createTableStore } from '../stores/table'
 
 /**
- * Table column definition.
+ * Runtime column definition for ATable.
+ *
+ * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `fieldtype`, `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`).
+ *
+ * Schema-based callers should author columns as `ColumnSchema[]` (using `fieldname`) and
+ * pass them via ATable's `:schema` prop — `TableColumn` is the internal runtime type and
+ * callers working from a doctype schema never need to construct it directly.
  * @public
  */
-export interface TableColumn {
-	/**
-	 * The key of the column. This is used to identify the column in the table.
-	 */
+export interface TableColumn extends Omit<ColumnSchema, 'fieldname' | 'hidden' | 'format' | 'modalComponent'> {
+	/** Runtime column key. Corresponds to `fieldname` in `ColumnSchema`; populated by `schemaToColumns`. */
 	name: string
 
 	/**
-	 * The alignment of the column. Possible values:
-	 * - `left` - left aligned
-	 * - `center` - center aligned
-	 * - `right` - right aligned
-	 * - `start` - aligned to the start of the column
-	 * - `end` - aligned to the end of the column
-	 *
-	 * @defaultValue 'center'
-	 */
-	align?: CanvasTextAlign
-
-	/**
-	 * Control whether cells for the column is editable.
-	 *
-	 * @defaultValue false
-	 */
-	edit?: boolean
-
-	/**
-	 * The label of the column. This is displayed in the table header.
-	 *
-	 * @defaultValue If no label is provided, a character will be assigned alphabetically,
-	 * starting from 'A' for the first column, 'B' for the second column, and so on.
-	 */
-	label?: string
-
-	/**
-	 * The semantic field type of the column. Uses the same StonecropFieldType enum as forms.
-	 * Common values: 'Data', 'Text', 'Int', 'Float', 'Date', 'Select', 'Link', 'Check', etc.
-	 *
-	 * @public
-	 */
-	fieldtype?: string
-
-	/**
-	 * The width of the column. This can be a number (in pixels) or a string (in CSS units).
-	 *
-	 * @defaultValue '40ch'
-	 */
-	width?: string
-
-	/**
-	 * Control whether the column should be pinned to the table.
-	 *
-	 * @defaultValue false
-	 */
-	pinned?: boolean
-
-	/**
-	 * Control whether the column can be resized by the user.
-	 *
-	 * @defaultValue false
-	 */
-	resizable?: boolean
-
-	/**
-	 * Control whether the column should be sortable.
-	 *
-	 * @defaultValue true
-	 */
-	sortable?: boolean
-
-	/**
-	 * Control whether the column should be filterable and define filter configuration.
-	 *
-	 * @defaultValue true
-	 */
-	filterable?: boolean
-
-	/**
-	 * The type of filter for the column.
-	 *
-	 * @defaultValue 'text'
+	 * Widens `ColumnSchema.format` (string-only) to also accept a live function at runtime.
+	 * Serialized string functions are deserialized by the table store's `getFormattedValue`.
 	 */
-	filterType?: 'text' | 'select' | 'number' | 'date' | 'dateRange' | 'checkbox' | 'component'
-
-	/**
-	 * Options for select-type filters.
-	 */
-	filterOptions?: any[]
-
-	/**
-	 * Custom component for filtering.
-	 */
-	filterComponent?: string
-
-	/**
-	 * The component to use to render the cell for the column. If not provided, the table will
-	 * render the default `<td>` element.
-	 */
-	cellComponent?: string
-
-	/**
-	 * Additional properties to pass to the table's cell component.
-	 *
-	 * Only applicable if the `cellComponent` property is set for the column.
-	 */
-	cellComponentProps?: Record<string, any>
+	format?: string | ((value: any, context: CellContext) => string)
 
 	/**
-	 * The component to use for the modal. If a function is provided, it will be called with the cell context.
-	 * The following properties are available on the cell context:
-	 * - `row` - the row object
-	 * - `column` - the column object
-	 * - `table` - the table object
-	 *
-	 * The function should return the name of the component to use for the modal.
-	 *
-	 * Additionally, the following properties will be automatically passed to the modal component:
-	 * - `colIndex` - the column index of the current cell
-	 * - `rowIndex` - the row index of the current cell
-	 * - `store` - the table data store
+	 * Widens `ColumnSchema.modalComponent` (string-only) to also accept a factory function.
+	 * When a function is provided it receives the cell context and returns the component name.
+	 * The cell context exposes:
+	 * - `row` — the row object for the current cell
+	 * - `column` — the column object for the current cell
+	 * - `table` — the table object
 	 */
-
 	modalComponent?: string | ((context: CellContext) => string)
 
 	/**
-	 * Additional properties to pass to the modal component.
-	 *
-	 * Only applicable if the `modalComponent` property is set for the column.
-	 */
-	modalComponentExtraProps?: Record<string, any>
-
-	/**
-	 * The format function to use to format the value of the cell. This can either be a normal or stringified
-	 * function that takes the value and the cell context and returns a string.
-	 */
-	format?: string | ((value: any, context: CellContext) => string)
-
-	/**
-	 * The masking function to use to apply an input mask to the cell. This will accept an input value and
-	 * return the masked value.
+	 * Input mask applied to the cell value before display. Accepts a live function only —
+	 * masks cannot be serialized to JSON so they are absent from `ColumnSchema`.
 	 */
 	mask?: (value: any) => any
 
 	/**
-	 * Whether the column is a Gantt column.
-	 *
-	 * Only applicable for Gantt tables.
-	 *
-	 * @defaultValue false
-	 */
-	isGantt?: boolean
-
-	/**
-	 * The component to use to render the Gantt bar for the column.
-	 *
-	 * Only applicable for Gantt tables.
-	 *
-	 * @defaultValue 'AGanttCell'
-	 */
-	ganttComponent?: string
-
-	/**
-	 * The colspan of the Gantt bar for the column. This determines how many columns
-	 * the Gantt bar should span across.
-	 *
-	 * Only applicable for Gantt tables.
-	 *
-	 * @defaultValue The number of columns in the table, excluding any pinned columns.
+	 * Runtime Gantt column index (excluding pinned columns). Set automatically during
+	 * Gantt table rendering.
 	 */
-	colspan?: number
-
-	/**
-	 * The original column index for the Gantt bar, excluding any pinned columns.
-	 * This is evaluated automatically while rendering the table.
-	 *
-	 * Only applicable for Gantt tables.
-	 *
-	 * @defaultValue 0
-	 */
-	originalIndex?: number
+	readonly originalIndex?: number
 }
 
 /**
@@ -541,39 +404,38 @@ export interface GanttOptions {
  * Gantt table drag event definition.
  * @public
  */
-export type GanttDragEvent =
+export type GanttDragEvent = {
+	rowIndex: number
+	colIndex: number
+	delta: number
+} & (
+	| {
+			type: 'bar'
+			oldStart: number
+			oldEnd: number
+			newStart: number
+			newEnd: number
+			colspan: number
+	  }
+	| {
+			type: 'resize'
+			edge: 'start'
+			oldStart: number
+			newStart: number
+			end: number
+			oldColspan: number
+			newColspan: number
+	  }
 	| {
-			rowIndex: number
-			colIndex: number
-			delta: number
-	  } & (
-			| {
-					type: 'bar'
-					oldStart: number
-					oldEnd: number
-					newStart: number
-					newEnd: number
-					colspan: number
-			  }
-			| {
-					type: 'resize'
-					edge: 'start'
-					oldStart: number
-					newStart: number
-					end: number
-					oldColspan: number
-					newColspan: number
-			  }
-			| {
-					type: 'resize'
-					edge: 'end'
-					oldEnd: number
-					newEnd: number
-					start: number
-					oldColspan: number
-					newColspan: number
-			  }
-	  )
+			type: 'resize'
+			edge: 'end'
+			oldEnd: number
+			newEnd: number
+			start: number
+			oldColspan: number
+			newColspan: number
+	  }
+)
 
 /**
  * Table modal definition.