@stonecrop/aform 0.13.2 → 0.13.4

package/src/components/form/ADateSelection.vue

@@ -0,0 +1,166 @@
+<!-- This serves as a wrapper component for ADatePicker and ADateTime in one component -->
+
+<template>
+	<div class="adate-selection">
+		<ADatePicker v-if="showDate" :select-range="selectRange" @get-date="handleDate" />
+
+		<ADateTime
+			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>
+			<ADateTime
+				: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 ADateTime from './ADateTime.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
+}>()
+
+const emit = defineEmits<{
+	'get-date': [{ selected: Date; start?: Date | null; end?: Date | null }]
+	'get-time': [{ hours: number; minutes: number; seconds: number; meridiem: string }]
+	'get-range': [{ start: Date; end: Date }]
+}>()
+
+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 = () => {
+	if (!selectRange || !showTime || !showEndTime) return
+	emit('get-range', {
+		start: mergeDateTime(pickerStart.value, startTimeMs.value),
+		end: mergeDateTime(pickerEnd.value, endTimeMs.value),
+	})
+}
+
+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
+		tryEmitRange()
+	}
+}
+
+const handleStartTime = (data: {
+	hours: number
+	minutes: number
+	seconds: number
+	meridiem: string
+	militaryTime?: number
+}) => {
+	startTimeMs.value = timePayloadToMs(data)
+	if (showEndTime) {
+		tryEmitRange()
+	} else {
+		emit('get-time', data)
+	}
+}
+
+const handleEndTime = (data: {
+	hours: number
+	minutes: number
+	seconds: number
+	meridiem: string
+	militaryTime?: number
+}) => {
+	endTimeMs.value = timePayloadToMs(data)
+	tryEmitRange()
+}
+</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, #555);
+	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

@@ -0,0 +1,285 @@
+<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
+}>()
+
+const emit = defineEmits<{
+	'get-time': [{ hours: number; minutes: number; seconds: number; meridiem: string; militaryTime: number }]
+}>()
+
+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()
+})
+
+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()
+}
+
+const emitTime = () => {
+	const hours = Number(timeData.hours)
+	const minutes = Number(timeData.minutes)
+	const seconds = Number(timeData.seconds)
+	emit('get-time', {
+		hours,
+		minutes,
+		seconds,
+		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()
+}
+
+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>

package/src/components/form/ADuration.vue

@@ -0,0 +1,119 @@
+<template>
+	<div class="aduration">
+		<template v-if="mode === 'display' || mode === 'read'">
+			<span class="aform_display-value">{{ displayValue }}</span>
+			<label>{{ label }}</label>
+		</template>
+
+		<template v-else>
+			<ADateSelection
+				ref="selectionRef"
+				:select-range="true"
+				:show-time="true"
+				:show-end-time="true"
+				:allow-military-time="allowMilitaryTime"
+				:use-seconds="useSeconds"
+				@get-range="handleRange" />
+			<div class="aduration__footer">
+				<label>{{ label }}</label>
+				<div v-if="startDatetime && endDatetime" class="aduration__summary">
+					<span class="aduration__label">Duration:</span>
+					<span class="aduration__value">{{ humanDuration }}</span>
+					<span class="aduration__ms">({{ modelValue ?? 0 }} ms)</span>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import ADateSelection from './ADateSelection.vue'
+
+const {
+	label = 'Duration',
+	mode = 'edit',
+	allowMilitaryTime = false,
+	useSeconds = false,
+} = defineProps<{
+	label?: string
+	mode?: string
+	allowMilitaryTime?: boolean
+	useSeconds?: boolean
+}>()
+
+const modelValue = defineModel<number>()
+
+const startDatetime = ref<Date | null>(null)
+const endDatetime = ref<Date | null>(null)
+
+const duration = computed<number>(() => {
+	if (!startDatetime.value || !endDatetime.value) return 0
+	const ms = endDatetime.value.getTime() - startDatetime.value.getTime()
+	return ms > 0 ? ms : 0
+})
+
+watch(duration, newMs => {
+	modelValue.value = newMs
+})
+
+const handleRange = (data: { start: Date; end: Date }) => {
+	startDatetime.value = data.start
+	endDatetime.value = data.end
+	modelValue.value = duration.value
+}
+
+const humanDuration = computed(() => {
+	const ms = duration.value
+	if (ms === 0) return '0s'
+	const s = Math.floor(ms / 1000) % 60
+	const m = Math.floor(ms / 60000) % 60
+	const h = Math.floor(ms / 3600000) % 24
+	const d = Math.floor(ms / 86400000)
+	return [d && `${d}d`, h && `${h}h`, m && `${m}m`, s && `${s}s`].filter(Boolean).join(' ') || '0s'
+})
+
+const displayValue = computed(() => {
+	const ms = modelValue.value
+	if (!ms) return '—'
+	const s = Math.floor(ms / 1000) % 60
+	const m = Math.floor(ms / 60000) % 60
+	const h = Math.floor(ms / 3600000) % 24
+	const d = Math.floor(ms / 86400000)
+	return [d && `${d}d`, h && `${h}h`, m && `${m}m`, s && `${s}s`].filter(Boolean).join(' ') || '0s'
+})
+</script>
+
+<style scoped>
+.aduration {
+	position: relative;
+	min-width: 40ch;
+	width: 100%;
+}
+
+.aduration__summary {
+	display: flex;
+	gap: 6px;
+	align-items: baseline;
+	margin-top: 6px;
+	font-size: 0.9em;
+}
+
+.aduration__label {
+	font-weight: bold;
+	color: var(--sc-input-active-label-color, #555);
+}
+
+.aduration__value {
+	color: var(--sc-cell-text-color, #000);
+}
+
+.aduration__ms {
+	color: var(--sc-gray-50, #888);
+	font-size: 0.85em;
+}
+
+.aduration__footer {
+	margin-top: 8px;
+}
+</style>

package/src/index.ts

@@ -8,6 +8,10 @@ import AComboBox from './components/form/AComboBox.vue'
 import ADate from './components/form/ADate.vue'
 import ADropdown from './components/form/ADropdown.vue'
 import ADatePicker from './components/form/ADatePicker.vue'
+import ADateTime from './components/form/ADateTime.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'
@@ -30,12 +34,16 @@ function install(app: App /* options */) {
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
 	app.component('ADatePicker', ADatePicker)
+	app.component('ADateTime', ADateTime)
+	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('ATextInput', ATextInput)
+	app.component('ADuration', ADuration)
 }
 
 export {
@@ -44,6 +52,10 @@ export {
 	ADate,
 	ADropdown,
 	ADatePicker,
+	ADateRange,
+	ADateSelection,
+	ADuration,
+	ADateTime,
 	AFieldset,
 	AFileAttach,
 	AForm,

package/src/types/index.ts

@@ -24,6 +24,9 @@ export type ComponentProps = {
 	 */
 	label?: string
 
+	// TODO: add docstring
+	selectRange?: boolean
+
 	/**
 	 * The mask to apply to inputs inside the component. Accepts either a plain
 	 * mask string (e.g. `"(###) ###-####"`) or a stringified arrow function that