@stonecrop/aform 0.2.5 → 0.2.7

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "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/themes": "0.2.7",
+    "@stonecrop/utilities": "0.2.7"
   },
   "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",
+    "@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",
     "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",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9",
+    "vitest": "^1.5.0",
     "vue-router": "^4",
-    "@stonecrop/atable": "0.2.5"
+    "@stonecrop/atable": "0.2.7"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.5"
+    "@stonecrop/atable": "0.2.7"
+  },
+  "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/components/utilities/Login.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="login-container">
+		<div>
+			<div class="account-container">
+				<div class="account-header">
+					<h1 id="account-title">{{ headerTitle }}</h1>
+					<p id="account-subtitle">{{ headerSubtitle }}</p>
+				</div>
+
+				<form @submit="onSubmit">
+					<div class="login-form-container">
+						<div class="login-form-email login-form-element">
+							<label id="login-email" for="email" class="login-label">Email</label>
+							<input
+								id="email"
+								class="login-field"
+								name="email"
+								placeholder="name@example.com"
+								type="email"
+								auto-capitalize="none"
+								auto-complete="email"
+								auto-correct="off"
+								:disabled="isLoading" />
+						</div>
+
+						<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" />
+						</div>
+
+						<button class="btn" :disabled="isLoading">
+							<span v-if="isLoading" class="material-symbols-outlined loading-icon"> progress_activity </span>
+							<span id="login-form-button">Login</span>
+						</button>
+					</div>
+				</form>
+
+				<button class="btn">
+					<span id="forgot-password-button">Forgot password?</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+withDefaults(
+	defineProps<{
+		headerTitle?: string
+		headerSubtitle?: string
+	}>(),
+	{
+		headerTitle: 'Login',
+		headerSubtitle: 'Enter your email and password to login',
+	}
+)
+
+const isLoading = ref(false)
+
+function onSubmit(event: Event) {
+	event.preventDefault()
+	isLoading.value = true
+
+	// TODO: handle submit logic
+}
+</script>
+
+<style>
+@import url('../../theme/login.css');
+</style>

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/login.css

@@ -0,0 +1,132 @@
+@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('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+:root {
+	/* BTNS */
+	--btn-color: white;
+	--btn-border: #cccccc;
+	--btn-hover: #f2f2f2;
+	--btn-label-color: black;
+}
+
+.login-container {
+	width: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-family: var(--font-family);
+}
+
+.account-container {
+	width: 100%;
+	margin-left: auto;
+	margin-top: 0.5rem;
+	margin-right: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.account-header {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	margin-top: 0.5rem;
+}
+
+#account-title {
+	font-size: 1.5rem;
+	line-height: 2rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	margin: 0;
+}
+
+#account-subtitle {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	margin: 1rem;
+}
+
+.login-form-container {
+	display: grid;
+	gap: 0.5rem;
+}
+
+.login-form-email,
+.login-form-password {
+	display: grid;
+	gap: 0.25rem;
+}
+.login-form-element {
+	margin: 0.5rem 0;
+}
+.login-field {
+	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	border-radius: 0.25rem;
+
+	&:focus {
+		border: 1px solid black;
+	}
+}
+.login-label {
+	position: absolute;
+	padding: 0;
+	background: white;
+	white-space: nowrap;
+	border-width: 0;
+	font-size: 0.7rem;
+	margin-left: 0.5rem;
+	margin-top: -0.7rem;
+	padding: 0.3rem;
+}
+
+#login-form-button {
+	margin-right: 0.5rem;
+	height: 1rem;
+	width: 1rem;
+}
+.btn {
+	background-color: var(--btn-color);
+	color: var(--btn-label-color);
+	border: 1px solid var(--btn-border);
+	margin: 0.5rem 0;
+	padding: 0.25rem;
+	position: relative;
+
+	&:hover {
+		background-color: var(--btn-hover);
+	}
+	&:disabled {
+		background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
+		color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
+	}
+}
+.disabled {
+	opacity: 0.5;
+}
+.loading-icon {
+	animation: spin 1s linear infinite forwards;
+	display: inline-block;
+	margin-right: 0.2rem;
+	line-height: 0;
+	font-size: 1rem;
+	position: relative;
+	top: 0.2rem;
+}
+
+/* ANIMATION */
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}

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;
+}