@stonecrop/aform 0.31.0 → 0.32.0

package/src/components/form/ATextInput.vue

@@ -1,40 +0,0 @@
-<template>
-	<div class="aform_form-element">
-		<template v-if="mode === 'display'">
-			<span class="aform_display-value">{{ inputText ?? '' }}</span>
-			<label class="aform_field-label">{{ label }}</label>
-		</template>
-		<template v-else>
-			<input
-				:id="uuid"
-				v-model="inputText"
-				v-mask="mask"
-				class="aform_input-field"
-				:disabled="mode === 'read'"
-				:maxlength="mask ? (maskFilled ? mask.length : undefined) : undefined"
-				:required="required" />
-			<label class="aform_field-label" :for="uuid">{{ label }} </label>
-			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { /* inject, */ computed, ref } from 'vue'
-
-import { useStringMask as vMask } from '../../directives/mask'
-import { ComponentProps } from '../../types'
-
-const { label, mask, required, mode, uuid, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
-
-// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
-const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
-
-// TODO: setup maskFilled as a computed property
-const maskFilled = ref(true)
-
-// TODO: (state) replace with state management
-// const locale = inject<string>('locale', '')
-
-const inputText = defineModel<number | string>()
-</script>

package/src/components/form/ATextboxInput.vue

@@ -1,66 +0,0 @@
-<template>
-	<div class="aform_form-element">
-		<template v-if="mode === 'display'">
-			<span class="aform_display-value aform_textbox-display">{{ inputText ?? '' }}</span>
-			<label class="aform_field-label">{{ label }}</label>
-		</template>
-		<template v-else>
-			<textarea
-				:id="uuid"
-				v-model="inputText"
-				class="aform_input-field aform_textbox"
-				:placeholder="placeholder"
-				:rows="rows"
-				:maxlength="maxlength"
-				:disabled="mode === 'read'"
-				:required="required"></textarea>
-			<label class="aform_field-label" :for="uuid">{{ label }}</label>
-			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { ComponentProps } from '../../types'
-
-const {
-	label,
-	required,
-	mode,
-	uuid,
-	errors,
-	placeholder = '',
-	rows = 4,
-	maxlength,
-	validation = { errorMessage: '' },
-} = defineProps<
-	ComponentProps & {
-		/** Placeholder shown when the field is empty */
-		placeholder?: string
-		/** Visible number of text lines (maps to the textarea `rows` attribute) */
-		rows?: number
-		/** Maximum number of characters the field will accept */
-		maxlength?: number
-	}
->()
-
-// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
-const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
-
-const inputText = defineModel<string | null>()
-</script>
-
-<style scoped>
-.aform_textbox {
-	resize: vertical;
-	line-height: 1.5;
-	min-height: 4rem;
-	font-family: inherit;
-}
-
-.aform_textbox-display {
-	white-space: pre-wrap;
-}
-</style>

package/src/components/utilities/Login.vue

@@ -1,189 +0,0 @@
-<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 aform_form-element">
-							<label id="login-email" for="email" class="aform_field-label">Email</label>
-							<input
-								id="email"
-								v-model="email"
-								class="aform_input-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 aform_form-element">
-							<label id="login-password" for="password" class="aform_field-label">Password</label>
-							<input
-								id="password"
-								v-model="password"
-								class="aform_input-field"
-								name="password"
-								type="password"
-								:disabled="isLoading" />
-						</div>
-
-						<button class="btn" :disabled="isLoading || !email || !password" @click="onSubmit">
-							<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'
-
-const { headerTitle = 'Login', headerSubtitle = 'Enter your email and password to login' } = defineProps<{
-	headerTitle?: string
-	headerSubtitle?: string
-}>()
-
-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, handle failure
-
-	if (loginFailed.value) {
-		isLoading.value = false
-		emit('loginFailed')
-		return
-	}
-
-	isLoading.value = false
-	emit('loginSuccess')
-}
-</script>
-
-<style scoped>
-.login-container {
-	width: 100%;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	font-family: var(--sc-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-element {
-	display: grid;
-	margin: 0.5rem 0;
-	position: relative;
-}
-.login-field {
-	padding: 0.5rem 0.25rem 0.25rem 0.5rem;
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
-
-	&:focus {
-		border: 1px solid black;
-	}
-}
-
-.btn {
-	background-color: var(--sc-btn-color);
-	color: var(--sc-btn-label-color);
-	border: 1px solid var(--sc-btn-border);
-	margin: 0.5rem 0;
-	padding: 0.25rem;
-	position: relative;
-	cursor: pointer;
-
-	&:hover {
-		background-color: var(--sc-btn-hover);
-	}
-
-	&:disabled {
-		background-color: var(--sc-input-field-disabled-background);
-	}
-}
-.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);
-	}
-}
-</style>

package/src/directives/mask.ts

@@ -1,122 +0,0 @@
-import type { DirectiveBinding } from 'vue'
-
-import { deserializeFunction } from '../utils/deserialize'
-
-/**
- * Extracts a mask function from a stringified function
- * @param mask - Mask string
- * @returns Mask function, or undefined if the string is not a valid function expression
- */
-function extractMaskFn(mask: string): ((locale: any) => string) | undefined {
-	try {
-		return deserializeFunction<(locale: any) => string>(mask)
-	} catch {
-		return undefined
-	}
-}
-
-/**
- * Gets the mask for a given directive binding
- * @param binding - Binding object from directive hook
- * @returns Mask string
- */
-function getMask(binding: DirectiveBinding<string>) {
-	const mask = binding.value
-	if (!mask) return undefined
-
-	const maskFn = extractMaskFn(mask)
-	if (maskFn) {
-		// TODO: (state) replace with state management;
-		// pass the entire form/table data to the function
-		// Vue directive reads arbitrary fields off host component instance; type is unknown at this layer.
-		// oxlint-disable-next-line typescript/no-unsafe-type-assertion
-		const instance = binding.instance as Record<string, unknown> | null | undefined
-		// oxlint-disable-next-line typescript/no-unsafe-type-assertion
-		const locale = instance?.['locale'] as string | undefined
-		return maskFn(locale)
-	}
-
-	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 = '#'
-	}
-
-	let unmaskedInput = input
-	const maskChars = [maskToken, '/', '-', '(', ')', ' ']
-
-	for (const char of maskChars) {
-		unmaskedInput = unmaskedInput.replaceAll(char, '')
-	}
-
-	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 = '#'
-	}
-
-	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)
-}
-
-/**
- * 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
-
-	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;
-
-		// Vue directive reads/writes arbitrary fields on host component instance.
-		// oxlint-disable-next-line typescript/no-unsafe-type-assertion
-		const instance = binding.instance as Record<string, unknown> | null | undefined
-		if (instance?.['maskFilled']) {
-			instance['maskFilled'] = !replacement.includes(maskToken)
-		}
-
-		el.value = replacement
-	} else {
-		el.value = mask
-	}
-}

package/src/index.ts

@@ -1,92 +0,0 @@
-export type * from '@stonecrop/atable/types'
-export { deserializeFunction } from './utils/deserialize'
-export { badgeInputAccentStyle, resolveFieldBadge } from './utils/badge'
-export { resolvedFieldsToColumns } from './utils/columns'
-export type { BadgeFormatContext, BadgeFormatFn } from './utils/badge'
-import { install as installATable } from '@stonecrop/atable'
-import type { App } from 'vue'
-
-import ACheckbox from './components/form/ACheckbox.vue'
-import ACurrencyInput from './components/form/ACurrencyInput.vue'
-import ADate from './components/form/ADate.vue'
-import ADropdown from './components/form/ADropdown.vue'
-import ASegmentedControl from './components/form/ASegmentedControl.vue'
-import ABadge from './components/form/ABadge.vue'
-import ADatePicker from './components/form/ADatePicker.vue'
-import ADateTime from './components/form/ADateTime.vue'
-import ADateTimeInput from './components/form/ADateTimeInput.vue'
-import ADateSelection from './components/form/ADateSelection.vue'
-import ADuration from './components/form/ADuration.vue'
-import ADateRange from './components/form/ADateRange.vue'
-import AFieldset from './components/form/AFieldset.vue'
-import AFileAttach from './components/form/AFileAttach.vue'
-import AForm from './components/AForm.vue'
-import AFormLink from './components/form/AFormLink.vue'
-import ANumericInput from './components/form/ANumericInput.vue'
-import AQuantityInput from './components/form/AQuantityInput.vue'
-import ATextInput from './components/form/ATextInput.vue'
-import ATextboxInput from './components/form/ATextboxInput.vue'
-import Login from './components/utilities/Login.vue'
-import AFormLoading from './components/AFormLoading.vue'
-import ExpandButton from './components/base/ExpandButton.vue'
-
-export type * from './types'
-
-/**
- * Install all AForm components
- * @param app - Vue app instance
- * @public
- */
-function install(app: App /* options */) {
-	app.use(installATable) // Install ATable components for use within AForm
-
-	app.component('ACheckbox', ACheckbox)
-	app.component('ACurrencyInput', ACurrencyInput)
-	app.component('ADate', ADate)
-	app.component('ADropdown', ADropdown)
-	app.component('ASegmentedControl', ASegmentedControl)
-	app.component('ABadge', ABadge)
-	app.component('ADatePicker', ADatePicker)
-	app.component('ADateTime', ADateTime)
-	app.component('ADateTimeInput', ADateTimeInput)
-	app.component('ADateRange', ADateRange)
-	app.component('ADateSelection', ADateSelection)
-	app.component('AFieldset', AFieldset)
-	app.component('AFileAttach', AFileAttach)
-	app.component('AForm', AForm)
-	app.component('AFormLink', AFormLink)
-	app.component('ANumericInput', ANumericInput)
-	app.component('AQuantityInput', AQuantityInput)
-	app.component('ATextInput', ATextInput)
-	app.component('ATextboxInput', ATextboxInput)
-	app.component('ADuration', ADuration)
-	app.component('AFormLoading', AFormLoading)
-	app.component('ExpandButton', ExpandButton)
-}
-
-export {
-	ACheckbox,
-	ACurrencyInput,
-	ADate,
-	ADropdown,
-	ASegmentedControl,
-	ABadge,
-	ADatePicker,
-	ADateRange,
-	ADateSelection,
-	ADuration,
-	ADateTime,
-	ADateTimeInput,
-	AFieldset,
-	AFileAttach,
-	AForm,
-	AFormLink,
-	ANumericInput,
-	AQuantityInput,
-	ATextInput,
-	ATextboxInput,
-	Login,
-	AFormLoading,
-	ExpandButton,
-	install,
-}

package/src/shims-vue.d.ts

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