@stonecrop/aform 0.2.5 → 0.2.6

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "MIT",
   "type": "module",
+  "author": {
+    "name": "Tyler Matteson",
+    "email": "tyler@agritheory.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agritheory/stonecrop",
+    "directory": "aform"
+  },
+  "bugs": {
+    "url": "https://github.com/agritheory/stonecrop/issues"
+  },
   "exports": {
     ".": {
       "import": "./dist/aform.js",
@@ -12,45 +24,48 @@
   },
   "main": "dist/aform.js",
   "module": "dist/aform.js",
+  "umd": "dist/aform.umd.cjs",
   "types": "src/index",
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/*"
   ],
   "dependencies": {
     "uuid": "^9.0.0",
-    "vue": "^3.2.47",
-    "@stonecrop/themes": "0.2.5",
-    "@stonecrop/utilities": "0.2.5"
+    "vue": "^3.4.23",
+    "@stonecrop/utilities": "0.2.6",
+    "@stonecrop/themes": "0.2.6"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.17",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@vitest/ui": "^0.31.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vitest/ui": "^1.5.0",
     "@vue/test-utils": "^2.3.2",
     "cypress": "^12.11.0",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
-    "histoire": "^0.16.1",
+    "histoire": "^0.17.17",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "^0.31.0",
+    "vite": "^5.2.9",
+    "vitest": "^1.5.0",
     "vue-router": "^4",
-    "@stonecrop/atable": "0.2.5"
+    "@stonecrop/atable": "0.2.6"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.5"
+    "@stonecrop/atable": "0.2.6"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "engines": {
     "node": ">=20.11.0"
   },
-  "umd": "dist/aform.umd.cjs",
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",

package/src/components/form/ACheckbox.vue

@@ -10,12 +10,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, InputHTMLAttributes } from 'vue'
+import { InputHTMLAttributes } from 'vue'
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
 		label?: string
-		value?: InputHTMLAttributes['checked']
 		required?: boolean
 		readOnly?: boolean
 		uuid?: string
@@ -26,18 +25,7 @@ const props = withDefaults(
 	}
 )
 
-const emit = defineEmits<{
-	(e: 'update:value', value: InputHTMLAttributes['checked']): void
-}>()
-
-const checkbox = computed({
-	get() {
-		return props.value
-	},
-	set(value) {
-		emit('update:value', value)
-	},
-})
+const checkbox = defineModel<InputHTMLAttributes['checked']>()
 </script>
 
 <style scoped>

package/src/components/form/ANumericInput.vue

@@ -7,12 +7,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(
+withDefaults(
 	defineProps<{
 		label: string
-		modelValue: any
 		required?: boolean
 		readonly?: boolean
 		uuid?: string
@@ -22,15 +19,8 @@ const props = withDefaults(
 		validation: () => ({ errorMessage: '&nbsp;' }),
 	}
 )
-const emit = defineEmits(['update:modelValue'])
-const inputNumber = computed({
-	get: () => {
-		return props.modelValue
-	},
-	set: newValue => {
-		emit('update:modelValue', newValue)
-	},
-})
+
+const inputNumber = defineModel<number>()
 </script>
 
 <style scoped>

package/src/directives/mask.ts

@@ -0,0 +1,104 @@
+import type { FormSchema } from 'types'
+import { DirectiveBinding } from 'vue'
+
+const NAMED_MASKS = {
+	date: '##/##/####',
+	datetime: '####/##/## ##:##',
+	time: '##:##',
+	fulltime: '##:##:##',
+	phone: '(###) ### - ####',
+	card: '#### #### #### ####',
+}
+
+function extractMaskFn(mask: string): ((args: any) => string) | void {
+	try {
+		// eslint-disable-next-line @typescript-eslint/no-implied-eval
+		return Function(`"use strict";return (${mask})`)()
+	} catch (error) {
+		if (error instanceof ReferenceError) {
+			// assume mask is a string
+		}
+	}
+}
+
+function getMask(binding: DirectiveBinding<string>) {
+	let mask = binding.value
+
+	if (mask) {
+		const maskFn = extractMaskFn(mask)
+		if (maskFn) {
+			// TODO: (state) replace with state management;
+			// pass the entire form/table data to the function
+			const locale = binding.instance['locale']
+			mask = maskFn(locale)
+		}
+	} else {
+		// TODO: (state) handle using state management
+		const schema: FormSchema = binding.instance['schema']
+		const fieldType: string | undefined = schema.fieldtype?.toLowerCase()
+		if (fieldType && NAMED_MASKS[fieldType]) {
+			mask = NAMED_MASKS[fieldType]
+		}
+	}
+
+	return mask
+}
+
+function unmaskInput(input: string, maskToken?: string) {
+	if (!maskToken) {
+		maskToken = '#'
+	}
+
+	let unmaskedInput = input
+	const maskChars = [maskToken, '/', '-', '(', ')', ' ']
+
+	for (const char of maskChars) {
+		unmaskedInput = unmaskedInput.replaceAll(char, '')
+	}
+
+	return unmaskedInput
+}
+
+function fillMask(input: string, mask: string, maskToken?: string) {
+	if (!maskToken) {
+		maskToken = '#'
+	}
+
+	let replacement = mask
+	for (const inputChar of input) {
+		const replaceIndex = replacement.indexOf(maskToken)
+		if (replaceIndex !== -1) {
+			const prefix = replacement.substring(0, replaceIndex)
+			const suffix = replacement.substring(replaceIndex + 1)
+			replacement = prefix + inputChar + suffix
+		}
+	}
+
+	return replacement.slice(0, mask.length)
+}
+
+export function useStringMask(el: HTMLInputElement, binding: DirectiveBinding<string>) {
+	const mask = getMask(binding)
+	if (!mask) return
+
+	const maskToken = '#'
+	const inputText = el.value
+
+	// process input value with mask
+	const unmaskedInput = unmaskInput(inputText, maskToken)
+	if (unmaskedInput) {
+		const replacement = fillMask(unmaskedInput, mask, maskToken)
+
+		// TODO: (state) this is very opinionated;
+		// most likely fixed with state management;
+		// a better way could be to emit back to instance;
+
+		if (binding.instance['maskFilled']) {
+			binding.instance['maskFilled'] = !replacement.includes(maskToken)
+		}
+
+		el.value = replacement
+	} else {
+		el.value = mask
+	}
+}

package/src/histoire.setup.ts

@@ -0,0 +1,22 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+
+import ACheckbox from '@/components/form/ACheckbox.vue'
+import AFieldset from '@/components/form/AFieldset.vue'
+import AForm from '@/components/AForm.vue'
+import ANumericInput from '@/components/form/ANumericInput.vue'
+import ATextInput from '@/components/form/ATextInput.vue'
+
+import { ATable, ATableHeader, ATableModal } from '@stonecrop/atable'
+import '@stonecrop/atable/styles'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+	// TODO: (typing) add typing for ATable components
+	app.component('ACheckbox', ACheckbox)
+	app.component('AFieldset', AFieldset)
+	app.component('AForm', AForm)
+	app.component('ANumericInput', ANumericInput)
+	app.component('ATable', ATable)
+	app.component('ATableHeader', ATableHeader)
+	app.component('ATableModal', ATableModal)
+	app.component('ATextInput', ATextInput)
+})

package/src/index.ts

@@ -0,0 +1,27 @@
+import { App } from 'vue'
+
+import ACheckbox from '@/components/form/ACheckbox.vue'
+import AComboBox from '@/components/form/AComboBox.vue'
+import ADate from '@/components/form/ADate.vue'
+import ADropdown from '@/components/form/ADropdown.vue'
+import AFieldset from '@/components/form/AFieldset.vue'
+import AForm from '@/components/AForm.vue'
+import ANumericInput from '@/components/form/ANumericInput.vue'
+import ATextInput from '@/components/form/ATextInput.vue'
+// import { ACurrency } from '@/components/form/ACurrency.vue'
+// import { AQuantity } from '@/components/form/AQuantity.vue'
+
+function install(app: App /* options */) {
+	app.component('ACheckbox', ACheckbox)
+	app.component('ACombobox', AComboBox)
+	app.component('ADate', ADate)
+	app.component('ADropdown', ADropdown)
+	app.component('AFieldset', AFieldset)
+	app.component('AForm', AForm)
+	app.component('ANumericInput', ANumericInput)
+	app.component('ATextInput', ATextInput)
+	// app.component('ACurrency', ACurrency)
+	// app.component('AQuantity', AQuantity)
+}
+
+export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, install }

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { ComponentOptions } from 'vue'
+	const Component: ComponentOptions
+	export default Component
+}

package/src/theme/aform.css

@@ -0,0 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+@import url('@stonecrop/themes/default/default.css');
+@import url('custom_themes.css');
+
+:root {
+	font-family: var(--font-family);
+}
+
+.aform-primary-action {
+	font-size: 100%;
+	text-align: center;
+	min-height: 2em;
+	padding: 0.25rem 1rem 0.25rem 1rem;
+	border: 1px solid var(--primary-color);
+	color: var(--primary-text-color);
+	background-color: var(--primary-color);
+	outline: 2px solid var(--primary-text-color);
+	transition: outline-offset 200ms ease;
+	font-size: var(--font-size);
+	margin: 0.5ch;
+}
+
+.aform-primary-action:hover,
+.aform-primary-action:active {
+	outline: 2px solid var(--primary-text-color);
+	outline-offset: -4px;
+	transition: outline-offset 200ms ease;
+}

package/src/theme/custom_themes.css

@@ -0,0 +1,6 @@
+/*
+
+Import custom themes here, e.g.
+@import url('purple_theme.css');
+
+*/

package/src/theme/purple_theme.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+
+:root {
+	--primary-color: #645caa;
+}
+
+:root [data-theme='purple'] {
+	--row-color-zebra-light: #ebc7e8;
+}