[aform] broken story elements + typing docs

aform/src/components/form/ACheckbox.vue

@@ -19,7 +19,14 @@ import { InputHTMLAttributes } from 'vue'
 
 import { ComponentProps } from '../../types'
 
-const { label, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 const checkbox = defineModel<InputHTMLAttributes['checked']>()
 </script>
 

aform/src/components/form/ADate.vue

@@ -19,6 +19,7 @@ import { useTemplateRef } from 'vue'
 import { ComponentProps } from '../../types'
 
 const {
+	schema, // don't remove to allow masking to work
 	label = 'Date',
 	required,
 	readonly,

aform/src/components/form/ADatePicker.vue

@@ -155,6 +155,8 @@ useKeyboardNav([
 		},
 	},
 ])
+
+defineExpose({ currentMonth, currentYear, selectedDate })
 </script>
 
 <style scoped>

aform/src/components/form/AFieldset.vue

@@ -34,6 +34,8 @@ const toggleCollapse = (event: Event) => {
 		collapsed.value = !collapsed.value
 	}
 }
+
+defineExpose({ collapsed })
 </script>
 
 <style scoped>

aform/src/components/form/ANumericInput.vue

@@ -15,6 +15,13 @@
 <script setup lang="ts">
 import { ComponentProps } from '../../types'
 
-const { label, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 const inputNumber = defineModel<number>()
 </script>

aform/src/components/form/ATextInput.vue

@@ -19,7 +19,15 @@ import { /* inject, */ ref } from 'vue'
 import { useStringMask as vMask } from '../../directives/mask'
 import { ComponentProps } from '../../types'
 
-const { label, mask, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	mask,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 
 // TODO: setup maskFilled as a computed property
 const maskFilled = ref(true)

aform/src/directives/mask.ts

@@ -2,6 +2,9 @@ import type { DirectiveBinding } from 'vue'
 
 import type { FormSchema } from '../types'
 
+/**
+ * Named masks for common input types
+ */
 const NAMED_MASKS = {
 	date: '##/##/####',
 	datetime: '####/##/## ##:##',
@@ -11,6 +14,11 @@ const NAMED_MASKS = {
 	card: '#### #### #### ####',
 }
 
+/**
+ * Extracts a mask function from a stringified function
+ * @param mask - Mask string
+ * @returns Mask function
+ */
 function extractMaskFn(mask: string): ((args: any) => string) | void {
 	try {
 		// eslint-disable-next-line @typescript-eslint/no-implied-eval
@@ -22,6 +30,11 @@ function extractMaskFn(mask: string): ((args: any) => string) | void {
 	}
 }
 
+/**
+ * Gets the mask for a given directive binding
+ * @param binding - Binding object from directive hook
+ * @returns Mask string
+ */
 function getMask(binding: DirectiveBinding<string>) {
 	let mask = binding.value
 
@@ -35,7 +48,7 @@ function getMask(binding: DirectiveBinding<string>) {
 		}
 	} else {
 		// TODO: (state) handle using state management
-		const schema: FormSchema = binding.instance['schema']
+		const schema = binding.instance['schema'] as FormSchema
 		const fieldType: string | undefined = schema?.fieldtype?.toLowerCase()
 		if (fieldType && NAMED_MASKS[fieldType]) {
 			mask = NAMED_MASKS[fieldType]
@@ -45,6 +58,12 @@ function getMask(binding: DirectiveBinding<string>) {
 	return mask
 }
 
+/**
+ * Unmasks the input string
+ * @param input - Input string
+ * @param maskToken - Mask token character
+ * @returns Unmasked input string
+ */
 function unmaskInput(input: string, maskToken?: string) {
 	if (!maskToken) {
 		maskToken = '#'
@@ -60,6 +79,13 @@ function unmaskInput(input: string, maskToken?: string) {
 	return unmaskedInput
 }
 
+/**
+ * Fills the mask with the input string
+ * @param input - Input string
+ * @param mask - Mask string
+ * @param maskToken - Mask token character
+ * @returns Masked input string
+ */
 function fillMask(input: string, mask: string, maskToken?: string) {
 	if (!maskToken) {
 		maskToken = '#'
@@ -78,6 +104,13 @@ function fillMask(input: string, mask: string, maskToken?: string) {
 	return replacement.slice(0, mask.length)
 }
 
+/**
+ * Applies a mask to an input element
+ * @param el - Input element
+ * @param binding - Binding object from directive hook
+ * @returns void
+ * @public
+ */
 export function useStringMask(el: HTMLInputElement, binding: DirectiveBinding<string>) {
 	const mask = getMask(binding)
 	if (!mask) return

aform/src/index.ts

@@ -1,5 +1,5 @@
 export type { CellContext, TableConfig, TableColumn, TableRow } from '@stonecrop/atable'
-import { App } from 'vue'
+import type { App } from 'vue'
 
 import ACheckbox from './components/form/ACheckbox.vue'
 import AComboBox from './components/form/AComboBox.vue'
@@ -12,9 +12,7 @@ import AForm from './components/AForm.vue'
 import ANumericInput from './components/form/ANumericInput.vue'
 import ATextInput from './components/form/ATextInput.vue'
 import Login from './components/utilities/Login.vue'
-export type { BasicSchema, FormSchema, TableSchema, FieldsetSchema, SchemaTypes } from './types'
-// import { ACurrency } from './components/form/ACurrency.vue'
-// import { AQuantity } from './components/form/AQuantity.vue'
+export type { BaseSchema, FieldsetSchema, FormSchema, SchemaTypes, TableSchema } from './types'
 
 /**
  * Install all AForm components
@@ -32,8 +30,6 @@ function install(app: App /* options */) {
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATextInput', ATextInput)
-	// app.component('ACurrency', ACurrency)
-	// app.component('AQuantity', AQuantity)
 }
 
 export {