@stonecrop/aform 0.30.0 → 0.32.0

package/src/components/form/ADateSelection.vue

@@ -1,174 +0,0 @@
-<!-- This serves as a wrapper component for ADatePicker and ADateTimeInput in one component -->
-
-<template>
-	<div class="adate-selection">
-		<ADatePicker v-if="showDate" :select-range="selectRange" @get-date="handleDate" />
-
-		<ADateTimeInput
-			v-if="showTime"
-			:allow-military-time="allowMilitaryTime"
-			:default-hours="defaultHours"
-			:default-minutes="defaultMinutes"
-			:default-seconds="defaultSeconds"
-			:default-meridiem="defaultMeridiem"
-			:use-seconds="useSeconds"
-			@get-time="handleStartTime" />
-
-		<template v-if="selectRange && showTime && showEndTime">
-			<div class="adate-selection__end-label">End time</div>
-			<ADateTimeInput
-				:allow-military-time="allowMilitaryTime"
-				:default-hours="defaultHours"
-				:default-minutes="defaultMinutes"
-				:default-seconds="defaultSeconds"
-				:default-meridiem="defaultMeridiem"
-				:use-seconds="useSeconds"
-				@get-time="handleEndTime" />
-		</template>
-
-		<p v-if="!showTime && !showDate" class="empty">empty</p>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { provide, ref } from 'vue'
-import ADatePicker from './ADatePicker.vue'
-import ADateTimeInput from './ADateTimeInput.vue'
-
-const {
-	showDate = true,
-	showTime = true,
-	selectRange = true,
-	showEndTime = false,
-	allowMilitaryTime = false,
-	defaultHours = 12,
-	defaultMinutes = 0,
-	defaultSeconds = 0,
-	defaultMeridiem = 'AM',
-	useSeconds = true,
-} = defineProps<{
-	showDate?: boolean
-	showTime?: boolean
-	selectRange?: boolean
-	showEndTime?: boolean
-	allowMilitaryTime?: boolean
-	defaultHours?: number
-	defaultMinutes?: number
-	defaultSeconds?: number
-	defaultMeridiem?: string
-	useSeconds?: boolean
-}>()
-
-// `source` is forwarded from ADateTimeInput, which declares it on every `get-time`. It is
-// optional here only because a host or a test may emit these events by hand, and doing so always
-// means a user action — `'init'` is the one case that has to be marked, because it is the widget
-// announcing its start value as it mounts rather than anything the user did.
-const emit = defineEmits<{
-	'get-date': [{ selected: Date; start?: Date | null; end?: Date | null }]
-	'get-time': [{ hours: number; minutes: number; seconds: number; meridiem: string; source?: 'init' | 'user' }]
-	'get-range': [{ start: Date; end: Date; source?: 'init' | 'user' }]
-}>()
-
-provide('select-range', selectRange)
-
-const today = new Date()
-const pickerStart = ref<Date>(today)
-const pickerEnd = ref<Date>(today)
-const startTimeMs = ref<number>(0)
-const endTimeMs = ref<number>(0)
-
-const mergeDateTime = (date: Date, timeMs: number): Date => {
-	const d = new Date(date)
-	d.setHours(0, 0, 0, 0)
-	return new Date(d.getTime() + timeMs)
-}
-
-const timePayloadToMs = (payload: {
-	hours: number
-	minutes: number
-	seconds: number
-	meridiem: string
-	militaryTime?: number
-}): number => {
-	let h: number
-	if (payload.militaryTime !== undefined) {
-		h = payload.militaryTime
-	} else {
-		const hrs = payload.hours % 12
-		h = payload.meridiem === 'PM' ? hrs + 12 : hrs
-	}
-	return (h * 3600 + payload.minutes * 60 + (payload.seconds ?? 0)) * 1000
-}
-
-const tryEmitRange = (source: 'init' | 'user') => {
-	if (!selectRange || !showTime || !showEndTime) return
-	emit('get-range', {
-		start: mergeDateTime(pickerStart.value, startTimeMs.value),
-		end: mergeDateTime(pickerEnd.value, endTimeMs.value),
-		source,
-	})
-}
-
-const handleDate = (data: { start: Date | null; end: Date | null; selected: Date }) => {
-	emit('get-date', data)
-	if (selectRange) {
-		pickerStart.value = data.start ?? data.selected
-		pickerEnd.value = data.end ?? data.selected
-		// Picking a day on the calendar is unambiguously a user action.
-		tryEmitRange('user')
-	}
-}
-
-const handleStartTime = (data: {
-	hours: number
-	minutes: number
-	seconds: number
-	meridiem: string
-	militaryTime?: number
-	source?: 'init' | 'user'
-}) => {
-	startTimeMs.value = timePayloadToMs(data)
-	if (showEndTime) {
-		tryEmitRange(data.source ?? 'user')
-	} else {
-		emit('get-time', data)
-	}
-}
-
-const handleEndTime = (data: {
-	hours: number
-	minutes: number
-	seconds: number
-	meridiem: string
-	militaryTime?: number
-	source?: 'init' | 'user'
-}) => {
-	endTimeMs.value = timePayloadToMs(data)
-	tryEmitRange(data.source ?? 'user')
-}
-</script>
-
-<style scoped>
-.adate-selection {
-	display: inline-block;
-	border: 1px solid var(--sc-gray-80);
-	padding: 10px;
-	background: var(--sc-form-background);
-}
-
-.adate-selection__end-label {
-	font-size: 0.8em;
-	font-weight: bold;
-	color: var(--sc-input-active-label-color);
-	margin-top: 8px;
-	margin-bottom: 2px;
-	padding-left: 2px;
-}
-
-.empty {
-	color: #ccc;
-	padding: 10px;
-	text-align: center;
-	border: 1px solid #ccc;
-}
-</style>

package/src/components/form/ADateTime.vue

@@ -1,149 +0,0 @@
-<template>
-	<div class="aform_form-element">
-		<template v-if="mode === 'display'">
-			<span class="aform_display-value">{{ displayValue }}</span>
-			<label class="aform_field-label">{{ label }}</label>
-		</template>
-
-		<template v-else>
-			<input
-				:id="uuid"
-				class="aform_input-field"
-				type="text"
-				:value="datetimeDisplay"
-				placeholder="Select date and time"
-				:disabled="mode === 'read'"
-				readonly
-				@click="openPicker" />
-			<label class="aform_field-label" :for="uuid">{{ label }}</label>
-
-			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-
-			<ADateSelection
-				v-if="showPicker"
-				ref="pickerRef"
-				class="adatetime-picker"
-				:select-range="false"
-				:show-date="true"
-				:show-time="true"
-				:default-hours="pickerDefaults.hours"
-				:default-minutes="pickerDefaults.minutes"
-				:default-seconds="pickerDefaults.seconds"
-				:default-meridiem="pickerDefaults.meridiem"
-				:allow-military-time="allowMilitaryTime"
-				:use-seconds="useSeconds"
-				@get-date="handleDate"
-				@get-time="handleTime" />
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-import ADateSelection from './ADateSelection.vue'
-import type { ComponentProps } from '../../types'
-
-const {
-	label = 'Date & Time',
-	mode,
-	uuid,
-	errors,
-	validation = { errorMessage: '' },
-	allowMilitaryTime = false,
-	useSeconds = true,
-} = defineProps<
-	ComponentProps & {
-		allowMilitaryTime?: boolean
-		useSeconds?: boolean
-	}
->()
-
-const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
-
-const modelValue = defineModel<string | Date>()
-
-const currentDateTime = ref<Date>(modelValue.value ? new Date(modelValue.value) : new Date())
-
-const showPicker = ref(false)
-const pickerRef = ref(null)
-onClickOutside(pickerRef, () => (showPicker.value = false))
-
-const openPicker = () => {
-	if (mode !== 'read') showPicker.value = true
-}
-
-const displayValue = computed(() => {
-	if (!modelValue.value) return ''
-	return currentDateTime.value.toLocaleString()
-})
-
-const datetimeDisplay = computed(() => displayValue.value)
-
-const pickerDefaults = computed(() => {
-	const d = currentDateTime.value
-	const hours24 = d.getHours()
-	const meridiem = hours24 >= 12 ? 'PM' : 'AM'
-	const hours12 = hours24 % 12 || 12
-	return {
-		hours: allowMilitaryTime ? hours24 : hours12,
-		minutes: d.getMinutes(),
-		seconds: d.getSeconds(),
-		meridiem,
-	}
-})
-
-const emitModel = () => {
-	modelValue.value = currentDateTime.value.toISOString()
-}
-
-const handleDate = (data: { selected: Date }) => {
-	const next = new Date(currentDateTime.value)
-	next.setFullYear(data.selected.getFullYear(), data.selected.getMonth(), data.selected.getDate())
-	currentDateTime.value = next
-	emitModel()
-}
-
-const handleTime = (data: {
-	hours: number
-	minutes: number
-	seconds: number
-	meridiem: string
-	militaryTime?: number
-	source?: 'init' | 'user'
-}) => {
-	// The widget announces its own starting value as it mounts, and those defaults come from
-	// `pickerDefaults` — i.e. straight back out of this component. Writing that echo to the model
-	// meant one click on an empty field silently filled it with the current date and time.
-	if (data.source === 'init') return
-
-	const next = new Date(currentDateTime.value)
-	const hours = data.militaryTime ?? data.hours
-	next.setHours(hours, data.minutes, useSeconds ? data.seconds : 0, 0)
-	currentDateTime.value = next
-	emitModel()
-	// Deliberately does NOT close the picker. `get-time` is the widget's current value, not a
-	// commit — it fires on every blur, arrow key and meridiem change — so closing here shut the
-	// picker as soon as the user tabbed out of the hours field. Dismissal is the click-outside
-	// handler above; closing on `get-date` instead would strand the time half of a datetime.
-}
-
-watch(
-	() => modelValue.value,
-	newValue => {
-		if (newValue) {
-			currentDateTime.value = new Date(newValue)
-		}
-	}
-)
-</script>
-
-<style scoped>
-.adatetime-picker {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	z-index: 1000;
-	margin-top: 0.25rem;
-}
-</style>

package/src/components/form/ADateTimeInput.vue

@@ -1,299 +0,0 @@
-<template>
-	<div class="adate_time">
-		<div class="adate_time_fields">
-			<input
-				v-model="timeData.hours"
-				type="text"
-				inputmode="numeric"
-				@paste="pasteInput($event, true)"
-				@focus="focusInput"
-				@blur="confirmTime"
-				@keydown.enter.prevent="confirmTime"
-				@keydown.up.prevent="tick('hours')"
-				@keydown.down.prevent="tick('hours', -1)" />
-			<span class="colon">:</span>
-			<input
-				v-model="timeData.minutes"
-				type="text"
-				inputmode="numeric"
-				@paste="pasteInput"
-				@focus="focusInput"
-				@blur="confirmTime"
-				@keydown.enter.prevent="confirmTime"
-				@keydown.up.prevent="tick('minutes')"
-				@keydown.down.prevent="tick('minutes', -1)" />
-			<span v-if="useSeconds" class="colon">:</span>
-			<input
-				v-if="useSeconds"
-				v-model="timeData.seconds"
-				type="text"
-				inputmode="numeric"
-				@paste="pasteInput"
-				@focus="focusInput"
-				@blur="confirmTime"
-				@keydown.enter.prevent="confirmTime"
-				@keydown.up.prevent="tick('seconds')"
-				@keydown.down.prevent="tick('seconds', -1)" />
-			<select
-				v-if="!allowMilitaryTime"
-				ref="meridiem-selector"
-				v-model="meridiem"
-				class="aform-select meridiem-selector"
-				@change="confirmTime">
-				<option value="AM">AM</option>
-				<option value="PM">PM</option>
-			</select>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, useTemplateRef, watch, onMounted } from 'vue'
-
-const {
-	allowMilitaryTime = false,
-	defaultHours = 12,
-	defaultMinutes = 0,
-	defaultSeconds = 0,
-	defaultMeridiem = 'AM',
-	useSeconds = true,
-} = defineProps<{
-	allowMilitaryTime?: boolean
-	defaultHours?: number
-	defaultMinutes?: number
-	defaultSeconds?: number
-	defaultMeridiem?: string
-	useSeconds?: boolean
-}>()
-
-// `get-time` carries the widget's CURRENT VALUE, not a commit: it fires once as the widget
-// mounts and again on every blur, Enter, arrow key and meridiem change — five times during one
-// ordinary edit. `source` is what lets a parent tell the start-up announcement apart from a real
-// user edit; without it a parent has nothing to key on and must guess from the value alone.
-const emit = defineEmits<{
-	'get-time': [
-		{
-			hours: number
-			minutes: number
-			seconds: number
-			meridiem: string
-			militaryTime: number
-			source: 'init' | 'user'
-		},
-	]
-}>()
-
-const meridiemSelector = useTemplateRef<HTMLSelectElement>('meridiem-selector')
-
-const timeData = reactive({
-	hours: String(defaultHours).padStart(2, '0'),
-	minutes: String(defaultMinutes).padStart(2, '0'),
-	seconds: String(defaultSeconds).padStart(2, '0'),
-})
-
-const meridiem = ref(defaultMeridiem == 'AM' ? 'AM' : 'PM')
-
-onMounted(() => {
-	emitTime('init')
-})
-
-const confirmTime = () => {
-	const maxHours = allowMilitaryTime ? 23 : 12
-	const minHours = allowMilitaryTime ? 0 : 1
-	let hours = Number(timeData.hours)
-	let minutes = Number(timeData.minutes)
-	let seconds = Number(timeData.seconds)
-
-	if (isNaN(hours) || timeData.hours === '' || hours > maxHours) hours = maxHours
-	if (!allowMilitaryTime && hours < minHours) hours = minHours
-	if (isNaN(minutes) || timeData.minutes === '' || minutes > 59) minutes = 59
-	if (isNaN(seconds) || timeData.seconds === '' || seconds > 59) seconds = 59
-
-	timeData.hours = String(hours).padStart(2, '0')
-	timeData.minutes = String(minutes).padStart(2, '0')
-	timeData.seconds = String(seconds).padStart(2, '0')
-
-	emitTime('user')
-}
-
-const emitTime = (source: 'init' | 'user') => {
-	const hours = Number(timeData.hours)
-	const minutes = Number(timeData.minutes)
-	const seconds = Number(timeData.seconds)
-	emit('get-time', {
-		hours,
-		minutes,
-		seconds,
-		source,
-		meridiem: meridiem.value,
-		militaryTime: allowMilitaryTime ? hours : meridiem.value === 'PM' ? (hours === 12 ? 12 : hours + 12) : hours % 12,
-	})
-}
-
-const focusInput = (event: FocusEvent) => {
-	const target = event.target
-	if (target instanceof HTMLInputElement) {
-		target.select()
-	}
-}
-
-const tick = (target: 'hours' | 'minutes' | 'seconds', amount = 1) => {
-	const maxHours = allowMilitaryTime ? 23 : 12
-	const minHours = allowMilitaryTime ? 0 : 1
-
-	if (target == 'hours') {
-		const oldHours = Number(timeData.hours)
-		timeData.hours = String(oldHours + amount)
-		if ((oldHours == 11 && Number(timeData.hours) == 12) || (oldHours == 12 && Number(timeData.hours) == 11)) {
-			changeMeridiem()
-		}
-	} else if (target == 'minutes') {
-		timeData.minutes = String(Number(timeData.minutes) + amount)
-	} else if (target == 'seconds') {
-		timeData.seconds = String(Number(timeData.seconds) + amount)
-	}
-
-	const prevHours = Number(timeData.hours)
-
-	if (Number(timeData.seconds) < 0) timeData.minutes = String(Number(timeData.minutes) - 1)
-	else if (Number(timeData.seconds) > 59) timeData.minutes = String(Number(timeData.minutes) + 1)
-
-	if (Number(timeData.minutes) < 0) timeData.hours = String(prevHours - 1)
-	else if (Number(timeData.minutes) > 59) timeData.hours = String(prevHours + 1)
-
-	const newRawHours = Number(timeData.hours)
-	if (!allowMilitaryTime && newRawHours !== prevHours) {
-		if ((prevHours === 11 && newRawHours === 12) || (prevHours === 12 && newRawHours === 11)) {
-			changeMeridiem()
-		}
-	}
-
-	timeData.hours = String(formatTime(Number(timeData.hours), minHours, maxHours)).padStart(2, '0')
-	timeData.minutes = String(formatTime(Number(timeData.minutes), 0, 59)).padStart(2, '0')
-	timeData.seconds = String(formatTime(Number(timeData.seconds), 0, 59)).padStart(2, '0')
-}
-
-watch(
-	() => timeData.hours,
-	(newVal, oldVal) => {
-		timeData.hours = Number(newVal) > 99 ? oldVal : newVal
-	}
-)
-watch(
-	() => timeData.minutes,
-	(newVal, oldVal) => {
-		timeData.minutes = Number(newVal) > 99 ? oldVal : newVal
-	}
-)
-watch(
-	() => timeData.seconds,
-	(newVal, oldVal) => {
-		timeData.seconds = Number(newVal) > 99 ? oldVal : newVal
-	}
-)
-
-const formatTime = (target: number, min: number, max: number): number => {
-	if (target > max) return min
-	else if (target < min) return max
-	return target
-}
-
-const changeMeridiem = () => {
-	meridiem.value = meridiem.value == 'PM' ? 'AM' : 'PM'
-	emitTime('user')
-}
-
-const pasteInput = (event: ClipboardEvent, pasteAllFields = false) => {
-	event.stopPropagation()
-	event.preventDefault()
-
-	const clipboardData = event.clipboardData
-	if (!clipboardData) return
-	let pastedData: string = clipboardData.getData('Text')
-
-	pastedData = pastedData.replace(/[^0-9]/g, '')
-
-	if (pasteAllFields) {
-		if (pastedData.length % 2 != 0) pastedData = '0' + pastedData
-		if (pastedData.length < 3) pastedData += '00'
-		if (pastedData.length < 5) pastedData += '00'
-
-		const timeUnits = pastedData.match(/(..?)/g)
-		if (!timeUnits || timeUnits.length < 3) return
-
-		timeData.seconds = timeUnits[2]
-		timeData.minutes = timeUnits[1]
-		timeData.hours = timeUnits[0]
-		confirmTime()
-		if (!allowMilitaryTime) meridiemSelector.value?.focus()
-	} else {
-		if (pastedData.length > 2) pastedData = pastedData.slice(0, 2)
-		const target = event.target
-		if (target instanceof HTMLInputElement) {
-			target.value = pastedData
-			target.dispatchEvent(new Event('input'))
-		}
-	}
-}
-</script>
-
-<style scoped>
-.adate_time {
-	width: auto;
-	padding: 10px;
-	box-sizing: border-box;
-	font-size: 1rem;
-	background: var(--sc-gray-10);
-}
-.adate_time_fields {
-	display: flex;
-	align-items: stretch;
-	gap: 5px;
-	justify-content: flex-start;
-}
-.adate_time_fields > input {
-	min-width: 30px;
-	padding: 2px;
-	text-align: center;
-	display: inline-block;
-	flex-basis: 0;
-}
-.meridiem-selector {
-	cursor: pointer;
-	display: inline-block;
-	flex-basis: 0;
-	padding: 5px;
-	user-select: none;
-}
-.meridiem-selector:focus {
-	outline: 2px solid black;
-	outline-offset: -2px;
-}
-.adate_time_segment {
-	display: flex;
-	flex-direction: column;
-	width: 40px;
-}
-.colon {
-	display: flex;
-	align-items: normal;
-}
-.aform_form-btn {
-	cursor: pointer;
-}
-.aform-select {
-	border-radius: 0px;
-	border: 1px solid rgb(118, 118, 118);
-	font-size: 1rem;
-	padding: 0rem;
-	margin: 0;
-	border-radius: 0;
-	box-sizing: border-box;
-	min-height: auto;
-	position: relative;
-	color: var(--sc-cell-text-color);
-}
-.meridiem-selector {
-	margin-left: 6px;
-}
-</style>