feat: number input use zag

apps/frontend/package.json

@@ -98,5 +98,9 @@
 		"xlsx": "^0.18.5",
 		"zod": "^3.22.4"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@zag-js/number-input": "^0.38.1",
+		"@zag-js/types": "^0.38.1"
+	}
 }

apps/frontend/src/lib/cell/CellEditors/base-editor.ts

@@ -6,8 +6,8 @@ import { toast } from 'svelte-sonner'
 
 export type SaveCallback = (value: any, preventFocus: boolean) => void
 
-export abstract class BaseEditor<T extends BaseField> implements Edition.EditorBase {
-	element?: HTMLInputElement | null | undefined
+export abstract class BaseEditor<E extends Element, T extends BaseField> implements Edition.EditorBase {
+	element?: E | null | undefined
 	editCell?: Edition.EditCell | undefined
 
 	constructor(
@@ -19,15 +19,19 @@ export abstract class BaseEditor<T extends BaseField> implements Edition.EditorB
 		return this.column.field as T
 	}
 
+	// TODO: describe type
 	onChange<V = unknown>(value: V) {
+		// TODO: better check updates
+		if (value === this.editCell?.model[this.editCell.prop]) {
+			return
+		}
+
 		if (this.field.required && isEmpty(value)) {
-			this.element?.blur()
 			return
 		}
 
 		const result = this.field.valueSchema.safeParse(value)
 		if (result.success) {
-			this.element?.blur()
 			this.saveCallback(result.data, false)
 		} else {
 			toast.warning(result.error.flatten((i) => i.message).formErrors.join('\n'))

apps/frontend/src/lib/cell/CellEditors/date-editor.ts

@@ -1,13 +1,11 @@
-import type { Edition, RevoGrid } from '@revolist/revogrid/dist/types/interfaces'
+import type { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'
 import type { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime'
 import type { DateField } from '@undb/core'
 import delay from 'delay'
 import htm from 'htm'
 import { BaseEditor } from './base-editor'
 
-export type SaveCallback = (value: Edition.SaveData, preventFocus: boolean) => void
-
-export class DateEditor extends BaseEditor<DateField> {
+export class DateEditor extends BaseEditor<HTMLInputElement, DateField> {
 	private initElement() {
 		const element = this.element
 		if (!element) return

apps/frontend/src/lib/cell/CellEditors/email-editor.ts

@@ -5,7 +5,7 @@ import delay from 'delay'
 import htm from 'htm'
 import { BaseEditor } from './base-editor'
 
-export class EmailEditor extends BaseEditor<EmailField> {
+export class EmailEditor extends BaseEditor<HTMLInputElement, EmailField> {
 	public element: HTMLInputElement | null = null
 	public editCell: Edition.EditCell | undefined = undefined
 

apps/frontend/src/lib/cell/CellEditors/normalizer.ts

@@ -0,0 +1,3 @@
+import { createNormalizer } from '@zag-js/types'
+
+export const normalizer = createNormalizer((v) => v)

apps/frontend/src/lib/cell/CellEditors/number-editor.ts

@@ -1,24 +1,40 @@
 import type { Edition, RevoGrid } from '@revolist/revogrid/dist/types/interfaces'
 import type { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime'
 import type { CurrencyField, NumberField } from '@undb/core'
+import * as numberInput from '@zag-js/number-input'
 import delay from 'delay'
 import htm from 'htm'
-import { BaseEditor } from './base-editor'
+import { BaseEditor, type SaveCallback } from './base-editor'
+import { normalizer } from './normalizer'
 
-export class NumberEditor extends BaseEditor<NumberField | CurrencyField> {
+export class NumberEditor extends BaseEditor<HTMLDivElement, NumberField | CurrencyField> {
 	public element: HTMLInputElement | null = null
 	public editCell: Edition.EditCell | undefined = undefined
+	private api: numberInput.Api | null = null
 
-	private initElement() {
-		const element = this.element
-		if (!element) return
+	constructor(
+		public column: RevoGrid.ColumnRegular,
+		protected saveCallback: SaveCallback,
+	) {
+		super(column, saveCallback)
+
+		const service = numberInput.machine({
+			id: this.column.prop as string,
+		})
+		const machine = service.start()
+
+		const api = numberInput.connect(machine.state, machine.send, normalizer)
 
-		element.focus()
+		this.api = api
+	}
 
+	private initElement() {
 		const editCell = this.editCell
 		if (!editCell) return
 
-		element.value = editCell.model[editCell.prop] as string
+		const value = editCell.model[editCell.prop] as string
+		this.api?.setValue(Number(value))
+		this.api?.focus()
 	}
 
 	async componentDidRender() {
@@ -28,12 +44,17 @@ export class NumberEditor extends BaseEditor<NumberField | CurrencyField> {
 
 	render(createComponent: RevoGrid.HyperFunc<VNode>) {
 		const html = htm.bind(createComponent)
+		const api = this.api
+
 		return html`
-			<input
-				type="number"
-				onblur=${(e: Event) => this.onChange(Number((e.target as HTMLInputElement).value))}
-				class="border-2 border-primary-300 rounded-none text-gray-900 text-sm focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
-			/>
+			<div class="flex items-center" ...${api?.rootProps}>
+				<input
+					type="number"
+					...${api?.inputProps}
+					onchange=${(e: Event) => this.onChange(Number((e.target as HTMLInputElement).value))}
+					class="border-2 border-primary-300 rounded-none text-gray-900 text-sm focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
+				/>
+			</div>
 		`
 	}
 }

apps/frontend/src/lib/cell/CellEditors/string-editor.ts

@@ -5,7 +5,7 @@ import delay from 'delay'
 import htm from 'htm'
 import { BaseEditor } from './base-editor'
 
-export class StringEditor extends BaseEditor<StringField> {
+export class StringEditor extends BaseEditor<HTMLInputElement, StringField> {
 	private initElement() {
 		const element = this.element
 		if (!element) return