@stonecrop/desktop 0.11.9 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/desktop",
-  "version": "0.11.9",
+  "version": "0.12.0",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -32,10 +32,11 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@stonecrop/aform": "0.11.9",
-    "@stonecrop/stonecrop": "0.11.9",
-    "@stonecrop/atable": "0.11.9",
-    "@stonecrop/themes": "0.11.9"
+    "@stonecrop/aform": "0.12.0",
+    "@stonecrop/atable": "0.12.0",
+    "@stonecrop/schema": "0.12.0",
+    "@stonecrop/themes": "0.12.0",
+    "@stonecrop/stonecrop": "0.12.0"
   },
   "peerDependencies": {
     "vue": "^3.5.33"

package/src/components/ActionSet.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{ collapsed: !isOpen }" class="action-set">
 		<div class="action-menu-icon">
-			<div id="cross" @click="onClick" :class="{ rotated: isOpen }">×</div>
+			<div id="cross" :class="{ rotated: isOpen }" @click="onClick">×</div>
 		</div>
 		<div style="margin-right: 30px"></div>
 		<div v-for="(el, index) in elements" :key="el.label" class="action-element">
@@ -16,7 +16,7 @@
 			</div>
 			<div v-if="el.type == 'dropdown'">
 				<div class="dropdown-header">
-					<div @click="toggleDropdown(index)" class="cross" :class="{ rotated: dropdownOpen[index] }">×</div>
+					<div class="cross" :class="{ rotated: dropdownOpen[index] }" @click="toggleDropdown(index)">×</div>
 					<button class="button-default dropdown-title" @click="toggleDropdown(index)">
 						{{ el.label }}
 					</button>

package/src/components/Desktop.vue

@@ -32,7 +32,8 @@
 
 <script setup lang="ts">
 import { useStonecrop } from '@stonecrop/stonecrop'
-import { AForm, type SchemaTypes, type TableColumn, type TableConfig } from '@stonecrop/aform'
+import { AForm, type SchemaTypes } from '@stonecrop/aform'
+import type { ColumnSchema } from '@stonecrop/schema'
 import { computed, onMounted, provide, ref, unref, watch } from 'vue'
 
 import ActionSet from './ActionSet.vue'
@@ -161,7 +162,7 @@ const currentDoctype = computed(() => {
 
 	// For named routes, use params.doctype
 	if (route.value.params.doctype) {
-		return route.value.params.doctype as string
+		return route.value.params.doctype.toString()
 	}
 
 	// For catch-all routes that haven't been registered yet, extract from path
@@ -185,7 +186,7 @@ const routeDoctype = computed(() => {
 
 	// For named routes, use params.doctype
 	if (route.value.params.doctype) {
-		return route.value.params.doctype as string
+		return route.value.params.doctype.toString()
 	}
 
 	// For catch-all routes, extract from path
@@ -203,7 +204,7 @@ const currentRecordId = computed(() => {
 
 	// For named routes, use params.recordId
 	if (route.value.params.recordId) {
-		return route.value.params.recordId as string
+		return route.value.params.recordId.toString()
 	}
 
 	// For catch-all routes that haven't been registered yet, extract from path
@@ -495,11 +496,11 @@ const getDoctypesSchema = (): SchemaTypes[] => {
 					edit: false,
 					width: '20ch',
 				},
-			] as TableColumn[],
+			],
 			config: {
 				view: 'list',
 				fullWidth: true,
-			} as TableConfig,
+			},
 			rows,
 		},
 	]
@@ -509,23 +510,21 @@ const getRecordsSchema = (): SchemaTypes[] => {
 	if (!currentDoctype.value) return []
 	if (!stonecrop.value) return []
 
-	const records = getRecords()
-	const columns = getColumns()
-	const idField = props.recordIdField || 'id'
+	const registry = stonecrop.value.registry
+	const doctype = registry.registry[currentDoctype.value]
 
-	// If no columns are available, let the template fallback handle the loading state
-	if (columns.length === 0) {
-		return []
-	}
+	if (!doctype) return []
+
+	const schema = registry.resolveSchema(doctype)
 
-	// Ensure the ID column is first so click handler can reliably find it
-	const idColumn = columns.find(c => c.fieldname === idField)
-	const otherColumns = columns.filter(c => c.fieldname !== idField)
-	const orderedColumns = idColumn ? [idColumn, ...otherColumns] : columns
+	// If no schema is available, let the template fallback handle the loading state
+	if (schema.length === 0) return []
+
+	const records = getRecords()
+	const idField = props.recordIdField || 'id'
 
-	const rows = records.map((record: any) => ({
+	const rows = records.map(record => ({
 		...record,
-		// Use the canonical ID field for navigation
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 		id: record[idField] || record.id || '',
 		actions: 'Edit | Delete',
@@ -535,28 +534,12 @@ const getRecordsSchema = (): SchemaTypes[] => {
 		{
 			fieldname: 'records_table',
 			component: 'ATable',
-			columns: [
-				...orderedColumns.map(col => ({
-					label: col.label,
-					name: col.fieldname,
-					fieldtype: col.fieldtype,
-					align: 'left',
-					edit: false,
-					width: '20ch',
-				})),
-				{
-					label: 'Actions',
-					name: 'actions',
-					fieldtype: 'Data',
-					align: 'center',
-					edit: false,
-					width: '20ch',
-				},
-			] as TableColumn[],
+			kind: 'table',
+			schema: [...(schema as ColumnSchema[]), { fieldname: 'actions', label: 'Actions', fieldtype: 'Data' }],
 			config: {
 				view: 'list',
 				fullWidth: true,
-			} as TableConfig,
+			},
 			rows,
 		},
 	]
@@ -597,28 +580,6 @@ const getRecords = () => {
 	return []
 }
 
-const getColumns = () => {
-	if (!stonecrop.value || !currentDoctype.value) return []
-
-	try {
-		const registry = stonecrop.value.registry
-		const doctype = registry.registry[currentDoctype.value]
-
-		if (doctype?.schema) {
-			const schemaArray = 'toArray' in doctype.schema ? doctype.schema.toArray() : doctype.schema
-			return schemaArray.map(field => ({
-				fieldname: field.fieldname,
-				label: ('label' in field && field.label) || field.fieldname,
-				fieldtype: ('fieldtype' in field && field.fieldtype) || 'Data',
-			}))
-		}
-	} catch {
-		// Error getting schema - return empty array
-	}
-
-	return []
-}
-
 // Schema for different views - defined here after all helper functions are available
 const currentViewSchema = computed(() => {
 	switch (currentView.value) {