Merge remote-tracking branch 'upstream/development' into fix-undo-sto…

…necrop

aform/CHANGELOG.json

@@ -1,6 +1,60 @@
 {
   "name": "@stonecrop/aform",
   "entries": [
+    {
+      "version": "0.3.8",
+      "tag": "@stonecrop/aform_v0.3.8",
+      "date": "Thu, 09 Jan 2025 11:21:58 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "add strict null checks to improve logic"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.7",
+      "tag": "@stonecrop/aform_v0.3.7",
+      "date": "Fri, 03 Jan 2025 06:27:07 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.6",
+      "tag": "@stonecrop/aform_v0.3.6",
+      "date": "Fri, 27 Dec 2024 09:24:01 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.5",
+      "tag": "@stonecrop/aform_v0.3.5",
+      "date": "Tue, 24 Dec 2024 11:42:53 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "fix broken table stories"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.4",
+      "tag": "@stonecrop/aform_v0.3.4",
+      "date": "Wed, 18 Dec 2024 09:54:31 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.3.3",
+      "tag": "@stonecrop/aform_v0.3.3",
+      "date": "Tue, 17 Dec 2024 13:42:30 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "small style update to Adate"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.2",
       "tag": "@stonecrop/aform_v0.3.2",

aform/CHANGELOG.md

@@ -1,6 +1,42 @@
 # Change Log - @stonecrop/aform
 
-This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jan 2025 11:21:58 GMT and should not be manually modified.
+
+## 0.3.8
+Thu, 09 Jan 2025 11:21:58 GMT
+
+### Patches
+
+- add strict null checks to improve logic
+
+## 0.3.7
+Fri, 03 Jan 2025 06:27:07 GMT
+
+_Version update only_
+
+## 0.3.6
+Fri, 27 Dec 2024 09:24:01 GMT
+
+_Version update only_
+
+## 0.3.5
+Tue, 24 Dec 2024 11:42:53 GMT
+
+### Patches
+
+- fix broken table stories
+
+## 0.3.4
+Wed, 18 Dec 2024 09:54:31 GMT
+
+_Version update only_
+
+## 0.3.3
+Tue, 17 Dec 2024 13:42:30 GMT
+
+### Updates
+
+- small style update to Adate
 
 ## 0.3.2
 Tue, 17 Dec 2024 10:07:54 GMT

aform/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/aform",
-	"version": "0.3.2",
+	"version": "0.3.8",
 	"license": "MIT",
 	"type": "module",
 	"author": {

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,
@@ -47,6 +48,8 @@ const showPicker = () => {
 <style scoped>
 div {
 	min-width: 40ch;
+	width: 100%;
+	box-sizing: border-box;
 	border: 1px solid transparent;
 	padding: 0rem;
 	margin: 0rem;
@@ -55,6 +58,7 @@ div {
 
 input {
 	width: calc(100% - 1ch);
+	box-sizing: border-box;
 	outline: 1px solid transparent;
 	border: 1px solid var(--sc-input-border-color);
 	padding: 1ch 0.5ch 0.5ch 1ch;
@@ -72,12 +76,14 @@ label {
 	margin: 0rem;
 	border: 1px solid transparent;
 	margin-bottom: 0.25rem;
+	box-sizing: border-box;
 }
 
 p {
 	width: 100%;
 	color: red;
 	font-size: 85%;
+	box-sizing: border-box;
 }
 
 label {
@@ -87,6 +93,7 @@ label {
 	background: white;
 	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
 	padding: 0 0.25ch 0 0.25ch;
+	box-sizing: border-box;
 }
 
 input:focus {

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
 
@@ -30,12 +43,12 @@ function getMask(binding: DirectiveBinding<string>) {
 		if (maskFn) {
 			// TODO: (state) replace with state management;
 			// pass the entire form/table data to the function
-			const locale = binding.instance['locale']
+			const locale = binding.instance?.['locale']
 			mask = maskFn(locale)
 		}
 	} 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
@@ -94,7 +127,7 @@ export function useStringMask(el: HTMLInputElement, binding: DirectiveBinding<st
 		// most likely fixed with state management;
 		// a better way could be to emit back to instance;
 
-		if (binding.instance['maskFilled']) {
+		if (binding.instance?.['maskFilled']) {
 			binding.instance['maskFilled'] = !replacement.includes(maskToken)
 		}
 

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 {