@stonecrop/aform 0.31.0 → 0.32.0

package/src/components/form/ADropdown.vue

@@ -1,222 +0,0 @@
-<template>
-	<div class="aform_form-element">
-		<template v-if="mode === 'display'">
-			<span v-if="badgeDescriptor" class="aform_display-value" :style="displayAccentStyle">{{
-				badgeDescriptor.label
-			}}</span>
-			<span v-else class="aform_display-value">{{ search ?? '' }}</span>
-			<label class="aform_field-label">{{ label }}</label>
-		</template>
-		<template v-else>
-			<div v-on-click-outside="onClickOutside" class="autocomplete" :class="{ isOpen: dropdown.open }">
-				<input
-					v-model="search"
-					type="text"
-					class="aform_input-field"
-					:disabled="mode === 'read'"
-					:style="inputAccentStyle"
-					@input="filter"
-					@focus="openDropdown"
-					@keydown.down="selectNextResult"
-					@keydown.up="selectPrevResult"
-					@keydown.enter="setCurrentResult"
-					@keydown.esc="onClickOutside"
-					@keydown.tab="onClickOutside" />
-
-				<ul v-show="dropdown.open" id="autocomplete-results" class="autocomplete-results">
-					<li v-if="dropdown.loading" class="loading autocomplete-result">Loading results...</li>
-					<li
-						v-for="(result, i) in dropdown.results"
-						v-else
-						:key="result"
-						class="autocomplete-result"
-						:class="{ 'is-active': i === dropdown.activeItemIndex }"
-						@click.stop="setResult(result)">
-						{{ result }}
-					</li>
-				</ul>
-				<label class="aform_field-label">{{ label }}</label>
-			</div>
-			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { FieldOptions } from '@stonecrop/schema'
-import { selectChoices } from '@stonecrop/schema'
-import { vOnClickOutside } from '@vueuse/components'
-import { computed, reactive, ref, watch } from 'vue'
-
-import type { ComponentProps } from '../../types'
-import type { BadgeFormatFn } from '../../utils/badge'
-import { badgeInputAccentStyle, resolveFieldBadge } from '../../utils/badge'
-import { deserializeFunction } from '../../utils/deserialize'
-
-const {
-	label,
-	options = [],
-	format,
-	isAsync = false,
-	filterFunction = undefined,
-	mode,
-	errors,
-	validation = { errorMessage: '' },
-} = defineProps<
-	ComponentProps & {
-		options?: FieldOptions
-		format?: string
-		isAsync?: boolean
-		filterFunction?: (search: string) => string[] | Promise<string[]>
-	}
->()
-
-const choiceList = computed(() => selectChoices(options))
-
-// Compile the serialized formatter once per `format` string, not once per keystroke:
-// badgeDescriptor re-evaluates on every input event and deserializeFunction runs the
-// Function constructor.
-const formatFn = computed(() => (format ? deserializeFunction<BadgeFormatFn>(format) : undefined))
-
-const badgeDescriptor = computed(() => resolveFieldBadge(search.value, options, formatFn.value))
-
-const inputAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value))
-
-const displayAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value))
-
-const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
-const search = defineModel<string>()
-
-const committedValue = ref(search.value ?? '')
-
-const dropdown = reactive({
-	activeItemIndex: null as number | null,
-	open: false,
-	loading: false,
-	results: [] as string[],
-})
-
-watch(
-	choiceList,
-	choices => {
-		dropdown.results = choices
-	},
-	{ immediate: true }
-)
-
-const onClickOutside = () => closeDropdown()
-
-const filter = async () => {
-	dropdown.open = true
-	dropdown.activeItemIndex = null
-	if (filterFunction) {
-		if (isAsync) dropdown.loading = true
-		try {
-			const filteredResults = await filterFunction(search.value || '')
-			dropdown.results = filteredResults || []
-		} catch {
-			dropdown.results = []
-		} finally {
-			if (isAsync) dropdown.loading = false
-		}
-	} else {
-		filterResults()
-	}
-}
-
-const setResult = (result: string) => {
-	search.value = result
-	committedValue.value = result
-	closeDropdown(result)
-}
-
-const openDropdown = () => {
-	const idx = choiceList.value.indexOf(search.value ?? '')
-	dropdown.activeItemIndex = isAsync ? null : idx >= 0 ? idx : null
-	dropdown.open = true
-	dropdown.results = isAsync ? [] : choiceList.value
-}
-
-const closeDropdown = (result?: string) => {
-	dropdown.activeItemIndex = null
-	dropdown.open = false
-	if (!choiceList.value.includes(result || search.value || '')) {
-		search.value = committedValue.value
-	}
-}
-
-const filterResults = () => {
-	if (!search.value) {
-		dropdown.results = choiceList.value
-	} else {
-		dropdown.results = choiceList.value.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
-	}
-}
-
-const selectNextResult = () => {
-	const resultsLength = dropdown.results?.length || 0
-	if (dropdown.activeItemIndex != null) {
-		const currentIndex = isNaN(dropdown.activeItemIndex) ? 0 : dropdown.activeItemIndex
-		dropdown.activeItemIndex = (currentIndex + 1) % resultsLength
-	} else {
-		dropdown.activeItemIndex = 0
-	}
-}
-
-const selectPrevResult = () => {
-	const resultsLength = dropdown.results?.length || 0
-	if (dropdown.activeItemIndex != null) {
-		const currentIndex = isNaN(dropdown.activeItemIndex) ? 0 : dropdown.activeItemIndex
-		if (currentIndex === 0) {
-			dropdown.activeItemIndex = null
-		} else {
-			dropdown.activeItemIndex = currentIndex - 1
-		}
-	} else {
-		dropdown.activeItemIndex = resultsLength - 1
-	}
-}
-
-const setCurrentResult = () => {
-	if (dropdown.results) {
-		const currentIndex = dropdown.activeItemIndex || 0
-		const result = dropdown.results[currentIndex]
-		setResult(result)
-	}
-	dropdown.activeItemIndex = 0
-}
-</script>
-
-<style scoped>
-.autocomplete {
-	position: relative;
-}
-
-.autocomplete-results {
-	position: absolute;
-	left: 0;
-	right: 0;
-	z-index: 100;
-	padding: 0;
-	margin: 0;
-	color: var(--sc-input-active-border-color);
-	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0;
-	border-top: none;
-	background-color: var(--sc-input-field-background);
-	list-style: none;
-}
-
-.autocomplete-result {
-	text-align: left;
-	padding: 4px 6px;
-	cursor: pointer;
-	border-bottom: 0.5px solid lightgray;
-}
-
-.autocomplete-result.is-active,
-.autocomplete-result:hover {
-	background-color: var(--sc-row-color-zebra-light);
-	color: var(--sc-input-active-border-color);
-}
-</style>

package/src/components/form/ADuration.vue

@@ -1,124 +0,0 @@
-<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; source?: 'init' | 'user' }) => {
-	// Both time widgets announce their starting values as they mount, which ADateSelection turns
-	// into a range. That is not a range the user picked: acting on it wrote a 0ms duration into the
-	// model, and lit the summary strip, on first render.
-	if (data.source === 'init') return
-
-	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);
-}
-
-.aduration__value {
-	color: var(--sc-cell-text-color);
-}
-
-.aduration__ms {
-	color: var(--sc-gray-50);
-	font-size: 0.85em;
-}
-
-.aduration__footer {
-	margin-top: 8px;
-}
-</style>

package/src/components/form/AFieldset.vue

@@ -1,72 +0,0 @@
-<template>
-	<fieldset>
-		<legend v-if="label || collapsible" @click="toggleCollapse" @submit="toggleCollapse">
-			{{ label }}
-			<CollapseButton v-if="collapsible" :collapsed="collapsed" />
-		</legend>
-		<slot :collapsed="collapsed">
-			<AForm v-show="!collapsed" v-model:data="formData" :schema="formSchema" :mode="mode" />
-		</slot>
-	</fieldset>
-</template>
-
-<script setup lang="ts">
-import type { InteractionMode } from '@stonecrop/schema'
-import { ref } from 'vue'
-
-import AForm from '../AForm.vue'
-import CollapseButton from '../base/CollapseButton.vue'
-import type { ResolvedField } from '../../types'
-
-const {
-	schema,
-	label = undefined,
-	collapsible,
-	data = {},
-	mode = 'edit',
-} = defineProps<{
-	schema: ResolvedField[]
-	label?: string
-	collapsible?: boolean
-	data?: Record<string, any>
-	/** Rendering mode forwarded to the inner AForm */
-	mode?: InteractionMode
-}>()
-
-const collapsed = ref(false)
-const formData = ref(data || [])
-const formSchema = ref(schema)
-
-const toggleCollapse = (event: Event) => {
-	event.preventDefault()
-	if (collapsible) {
-		collapsed.value = !collapsed.value
-	}
-}
-
-defineExpose({ collapsed })
-</script>
-
-<style scoped>
-fieldset {
-	max-width: 100%;
-	width: 100%;
-	margin-right: 2ch;
-	border: 1px solid transparent;
-	border-bottom: 1px solid var(--sc-gray-50);
-}
-
-legend {
-	width: 100%;
-	height: 1.15rem;
-	border: 1px solid transparent;
-	padding-bottom: 0.5rem;
-	font-size: 110%;
-	font-weight: 600;
-	user-select: none;
-}
-
-.collapse-button {
-	float: right;
-}
-</style>

package/src/components/form/AFileAttach.vue

@@ -1,97 +0,0 @@
-<template>
-	<div class="aform_form-element aform_file-attach aform__grid--full">
-		<template v-if="mode === 'display'">
-			<template v-if="files">
-				<div class="aform_file-attach-feedback">
-					<p>
-						<b>{{ fileLengthText }}</b>
-					</p>
-					<li v-for="file of files" :key="file.name">{{ file.name }}</li>
-				</div>
-			</template>
-			<span v-else class="aform_display-value">No file selected</span>
-		</template>
-		<template v-else>
-			<template v-if="files">
-				<div class="aform_file-attach-feedback">
-					<p>
-						You have selected: <b>{{ fileLengthText }}</b>
-					</p>
-					<li v-for="file of files" :key="file.name">
-						{{ file.name }}
-					</li>
-				</div>
-			</template>
-			<button type="button" class="aform_form-btn" :disabled="mode === 'read'" @click="open()">
-				{{ label }}
-			</button>
-			<button type="button" :disabled="!files || mode === 'read'" class="aform_form-btn" @click="reset()">Reset</button>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useFileDialog } from '@vueuse/core'
-import { computed } from 'vue'
-
-import type { ComponentProps } from '../../types'
-
-const { label, mode } = defineProps<ComponentProps>()
-const { files, open, reset, onChange } = useFileDialog()
-
-const fileLengthText = computed(() => {
-	const count = files.value?.length ?? 0
-	return `${count} ${count === 1 ? 'file' : 'files'}`
-})
-
-onChange(changedFiles => changedFiles)
-</script>
-
-<style scoped>
-.aform_file-attach {
-	padding: 1rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 1rem;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	border: 1px dashed var(--sc-input-border-color);
-	width: 100%;
-}
-
-@media screen and (max-width: 400px) {
-	.aform_file-attach > .aform_form-btn {
-		width: 100%;
-	}
-}
-
-.aform_file-attach-feedback {
-	color: var(--sc-input-label-color);
-	width: 100%;
-	padding: 0.5rem;
-	text-align: center;
-	align-self: center;
-
-	& > li {
-		list-style: none;
-		font-style: italic;
-	}
-	& > p {
-		margin-top: 0;
-	}
-}
-
-.aform_form-btn {
-	padding: 0.5rem 2rem;
-	width: auto;
-	border: 1px solid var(--sc-input-border-color);
-	color: var(--sc-input-label-color);
-	cursor: pointer;
-	background-color: white;
-}
-
-.aform_form-btn:disabled {
-	background-color: var(--sc-gray-5);
-}
-</style>