@stonecrop/aform 0.2.16 → 0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "uuid": "^9.0.0",
     "vue": "^3.4.23",
-    "@stonecrop/themes": "0.2.16",
-    "@stonecrop/utilities": "0.2.16"
+    "@stonecrop/utilities": "0.2.17",
+    "@stonecrop/themes": "0.2.17"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
@@ -42,23 +42,23 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.5.0",
-    "@vitest/ui": "^1.5.0",
-    "@vue/test-utils": "^2.3.2",
+    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "@vue/test-utils": "^2.4.6",
     "cypress": "^12.11.0",
-    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
+    "eslint": "^8.40.0",
     "histoire": "^0.17.17",
-    "jsdom": "^22.0.0",
+    "jsdom": "^24.0.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.9",
-    "vitest": "^1.5.0",
+    "vitest": "^1.6.0",
     "vue-router": "^4",
-    "@stonecrop/atable": "0.2.16"
+    "@stonecrop/atable": "0.2.17"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.16"
+    "@stonecrop/atable": "0.2.17"
   },
   "publishConfig": {
     "access": "public"

package/src/components/form/ADate.vue

@@ -18,13 +18,14 @@ import { ref } from 'vue'
 
 withDefaults(
 	defineProps<{
-		label: string
+		label?: string
 		required?: boolean
 		readonly?: boolean
 		uuid?: string
 		validation?: Record<string, any>
 	}>(),
 	{
+		label: 'Date',
 		validation: () => ({ errorMessage: '&nbsp;' }),
 	}
 )
@@ -34,7 +35,12 @@ const dateRef = ref<HTMLInputElement | null>(null)
 
 const showPicker = () => {
 	if (dateRef.value) {
-		dateRef.value.showPicker()
+		if ('showPicker' in HTMLInputElement.prototype) {
+			// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+			// TODO: re-check browser support and compatibility; figure out alternative ways
+			// to spawn the native datepicker and eventually replace with ADatepicker
+			dateRef.value.showPicker()
+		}
 	}
 }
 </script>

package/src/components/form/ADatePicker.vue

@@ -2,9 +2,9 @@
 	<div class="adatepicker" tabindex="0" ref="adatepicker">
 		<table>
 			<tr>
-				<td @click="previousMonth" :tabindex="-1">&lt;</td>
+				<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
 				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
-				<td @click="nextMonth" :tabindex="-1">&gt;</td>
+				<td id="next-month-btn" @click="nextMonth" :tabindex="-1">&gt;</td>
 			</tr>
 			<tr class="days-header">
 				<td>M</td>
@@ -18,6 +18,7 @@
 			<tr v-for="rowNo in numberOfRows" :key="rowNo">
 				<td
 					v-for="colNo in numberOfColumns"
+					ref="celldate"
 					:key="getCurrentCell(rowNo, colNo)"
 					:contenteditable="false"
 					:spellcheck="false"

package/src/components/form/ADropdown.vue

@@ -10,6 +10,7 @@
 				@keydown.down="onArrowDown"
 				@keydown.up="onArrowUp"
 				@keydown.enter="onEnter" />
+
 			<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
 				<li class="loading autocomplete-result" v-if="isLoading">Loading results...</li>
 				<li
@@ -27,111 +28,95 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-	name: 'ADropdown',
-	props: {
-		modelValue: {
-			type: String,
-			required: false,
-			default: '',
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		value: String,
-		items: {
-			type: Array,
-			required: false,
-			default: () => [],
-		},
-		isAsync: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'filterChanged'],
-	data() {
-		return {
-			results: [],
-			search: this.modelValue,
-			isLoading: false,
-			arrowCounter: 0,
-			isOpen: false,
-		}
-	},
-	watch: {
-		items: function (value, oldValue) {
-			this.isLoading = false
-			this.results = value
-		},
-	},
-	mounted() {
-		document.addEventListener('click', this.handleClickOutside)
-		this.filterResults()
-	},
-	destroyed() {
-		document.removeEventListener('click', this.handleClickOutside)
-	},
-	methods: {
-		setResult(result) {
-			this.search = result
-			this.closeResults()
-		},
-		filterResults() {
-			this.results = this.items.filter(item => {
-				return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1
-			})
-		},
-		onChange() {
-			this.isOpen = true
-			if (this.isAsync) {
-				this.isLoading = true
-				this.$emit('filterChanged', this.search)
-			} else {
-				this.filterResults()
-			}
-		},
-		handleClickOutside(event) {
-			if (!this.$el.contains(event.target)) {
-				this.closeResults()
-				this.arrowCounter = 0
-			}
-		},
-		closeResults() {
-			this.isOpen = false
-
-			if (!this.items.includes(this.search)) {
-				this.search = ''
-			}
-
-			this.$emit('update:modelValue', this.search)
-		},
-		onArrowDown() {
-			if (this.arrowCounter < this.results.length) {
-				this.arrowCounter = this.arrowCounter + 1
-			}
-		},
-		onArrowUp() {
-			if (this.arrowCounter > 0) {
-				this.arrowCounter = this.arrowCounter - 1
-			}
-		},
-		onEnter() {
-			this.search = this.results[this.arrowCounter]
-			this.closeResults()
-			this.arrowCounter = 0
-		},
-		openWithSearch() {
-			this.search = ''
-			this.onChange()
-			this.$refs.mopInput.focus()
-		},
-	},
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+	label: string
+	items?: string[]
+	isAsync?: boolean
+}>()
+
+const emit = defineEmits(['filterChanged'])
+
+const results = ref(props.items)
+const search = defineModel<string>()
+const isLoading = ref(false)
+const arrowCounter = ref(0)
+const isOpen = ref(false)
+const mopInput = ref(null)
+
+onMounted(() => {
+	document.addEventListener('click', handleClickOutside)
+	filterResults()
+})
+
+onUnmounted(() => {
+	document.removeEventListener('click', handleClickOutside)
 })
+
+const setResult = result => {
+	search.value = result
+	closeResults()
+}
+
+const filterResults = () => {
+	if (!search.value) {
+		results.value = props.items
+	} else {
+		results.value = props.items.filter(item => {
+			return item.toLowerCase().indexOf(search.value.toLowerCase()) > -1
+		})
+	}
+}
+
+const onChange = () => {
+	isOpen.value = true
+	if (props.isAsync) {
+		isLoading.value = true
+		emit('filterChanged', search.value)
+	} else {
+		filterResults()
+	}
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+	closeResults()
+	arrowCounter.value = 0
+}
+
+const closeResults = () => {
+	isOpen.value = false
+
+	// TODO: (test) when would this occur? how should this be tested?
+	if (!props.items.includes(search.value)) {
+		search.value = ''
+	}
+}
+
+const onArrowDown = () => {
+	if (arrowCounter.value < results.value.length) {
+		arrowCounter.value = arrowCounter.value + 1
+	}
+}
+
+const onArrowUp = () => {
+	if (arrowCounter.value > 0) {
+		arrowCounter.value = arrowCounter.value - 1
+	}
+}
+
+const onEnter = () => {
+	search.value = results.value[arrowCounter.value]
+	closeResults()
+	arrowCounter.value = 0
+}
+
+// const openWithSearch = () => {
+// 	search.value = ''
+// 	onChange()
+// 	mopInput.value.focus()
+// }
 </script>
 
 <style>

package/src/components/form/AFieldset.vue

@@ -25,8 +25,8 @@ const props = defineProps<{
 }>()
 
 const formData = ref(props.data || [])
-let collapsed = ref(false)
-let collapsible = ref(props.collapsible)
+const collapsed = ref(false)
+const collapsible = ref(props.collapsible)
 
 const formSchema = ref(props.schema)
 function toggleCollapse(event: Event) {

package/src/components/form/ATextInput.vue

@@ -12,66 +12,34 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType, ref, computed } from 'vue'
+<script setup lang="ts">
+import { inject, ref } from 'vue'
 
 import { FormSchema } from 'types'
-import { useStringMask } from '@/directives/mask'
+import { useStringMask as vMask } from '@/directives/mask'
 
-// TODO: when moving to composition API, figure out how to provide mask
-// as a custom directive
-export default defineComponent({
-	name: 'ATextInput',
-	props: {
-		schema: {
-			type: Object as PropType<FormSchema>,
-			required: true,
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		modelValue: {
-			type: null as unknown as PropType<string | number>,
-		},
-		mask: {
-			type: String,
-		},
-		required: {
-			type: Boolean,
-		},
-		readonly: {
-			type: Boolean,
-		},
-		uuid: {
-			type: String,
-		},
-		validation: {
-			type: Object,
-			default: () => ({ errorMessage: '&nbsp;' }),
-		},
-	},
-	setup(props, context) {
-		const maskFilled = ref(false)
+withDefaults(
+	defineProps<{
+		schema: FormSchema
+		label: string
+		mask?: string
+		required?: boolean
+		readonly?: boolean
+		uuid?: string
+		validation?: { errorMessage: string }
+	}>(),
+	{
+		validation: () => ({ errorMessage: '&nbsp;' }),
+	}
+)
 
-		// TODO: (state) replace with state management
-		const locale = inject<string>('locale', '')
+// TODO: setup maskFilled as a computed property
+const maskFilled = ref(true)
 
-		const inputText = computed({
-			get() {
-				return props.modelValue
-			},
-			set(newValue) {
-				context.emit('update:modelValue', newValue)
-			},
-		})
+// TODO: (state) replace with state management
+// const locale = inject<string>('locale', '')
 
-		return { inputText, locale, maskFilled }
-	},
-	directives: {
-		mask: useStringMask,
-	},
-})
+const inputText = defineModel<number | string>()
 </script>
 
 <style scoped>

package/src/components/utilities/Login.vue

@@ -17,6 +17,7 @@
 								name="email"
 								placeholder="name@example.com"
 								type="email"
+								v-model="email"
 								auto-capitalize="none"
 								auto-complete="email"
 								auto-correct="off"
@@ -25,11 +26,17 @@
 
 						<div class="login-form-password login-form-element">
 							<label id="login-password" for="password" class="login-label">Password</label>
-							<input id="password" class="login-field" name="password" type="password" :disabled="isLoading" />
+							<input
+								id="password"
+								class="login-field"
+								name="password"
+								type="password"
+								v-model="password"
+								:disabled="isLoading" />
 						</div>
 
-						<button class="btn" :disabled="isLoading">
-							<span v-if="isLoading" class="material-symbols-outlined loading-icon"> progress_activity </span>
+						<button class="btn" @click="onSubmit" :disabled="isLoading || !email || !password">
+							<span v-if="isLoading" class="material-symbols-outlined loading-icon">progress_activity</span>
 							<span id="login-form-button">Login</span>
 						</button>
 					</div>
@@ -57,13 +64,28 @@ withDefaults(
 	}
 )
 
+const emit = defineEmits(['loginFailed', 'loginSuccess'])
+
+const email = ref('')
+const password = ref('')
+
 const isLoading = ref(false)
+const loginFailed = ref(false)
 
 function onSubmit(event: Event) {
 	event.preventDefault()
 	isLoading.value = true
 
-	// TODO: handle submit logic
+	// TODO: handle submit logic, handle failure
+
+	if (loginFailed.value) {
+		isLoading.value = false
+		emit('loginFailed')
+		return
+	}
+
+	isLoading.value = false
+	emit('loginSuccess')
 }
 </script>
 

package/src/directives/mask.ts

@@ -1,5 +1,5 @@
 import type { FormSchema } from 'types'
-import { DirectiveBinding } from 'vue'
+import type { DirectiveBinding } from 'vue'
 
 const NAMED_MASKS = {
 	date: '##/##/####',
@@ -35,7 +35,7 @@ function getMask(binding: DirectiveBinding<string>) {
 	} else {
 		// TODO: (state) handle using state management
 		const schema: FormSchema = binding.instance['schema']
-		const fieldType: string | undefined = schema.fieldtype?.toLowerCase()
+		const fieldType: string | undefined = schema?.fieldtype?.toLowerCase()
 		if (fieldType && NAMED_MASKS[fieldType]) {
 			mask = NAMED_MASKS[fieldType]
 		}