@stonecrop/aform 0.2.5

package/src/components/form/ACheckbox.vue

@@ -0,0 +1,123 @@
+<template>
+	<div>
+		<label id="checkbox-container">
+			<input v-model="checkbox" type="checkbox" :id="uuid" class="checkbox" :readonly="readOnly" :required="required" />
+			<span id="custom-checkbox">{{ checkbox }}</span>
+		</label>
+		<label :for="uuid" id="checkbox-label">{{ label }}</label>
+		<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, InputHTMLAttributes } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		label?: string
+		value?: InputHTMLAttributes['checked']
+		required?: boolean
+		readOnly?: boolean
+		uuid?: string
+		validation?: Record<string, any>
+	}>(),
+	{
+		validation: () => ({ errorMessage: '&nbsp;' }),
+	}
+)
+
+const emit = defineEmits<{
+	(e: 'update:value', value: InputHTMLAttributes['checked']): void
+}>()
+
+const checkbox = computed({
+	get() {
+		return props.value
+	},
+	set(value) {
+		emit('update:value', value)
+	},
+})
+</script>
+
+<style scoped>
+div {
+	display: inline-block;
+	min-width: 40ch;
+	border: 1px solid transparent;
+	padding: 0rem;
+	margin: 0rem;
+	margin-right: 1ch;
+}
+
+p,
+label {
+	color: var(--input-label-color);
+	display: block;
+	min-height: 1.15rem;
+	padding: 0rem;
+	margin: 0rem;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+}
+
+p {
+	width: 100%;
+	color: red;
+	font-size: 85%;
+}
+
+.checkbox {
+	visibility: hidden;
+}
+
+.checkbox + #custom-checkbox:after {
+	content: '⬡';
+	padding: 1ch 0 0.5ch 0;
+	font-size: 120%;
+	cursor: pointer;
+	position: relative;
+	left: -18px;
+}
+
+.checkbox:checked + #custom-checkbox:after {
+	content: '⬣';
+	padding: 1ch 0 0.5ch 0;
+	font-size: 120%;
+	cursor: pointer;
+	position: relative;
+	left: -18px;
+}
+
+#custom-checkbox {
+	display: inline-block;
+}
+
+#checkbox-container {
+	display: inline-block;
+	min-width: calc(100% - 1ch);
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	padding: 1ch 0.5ch 0.5ch 1ch;
+	margin: calc(1.15rem / 2) 0 0 0;
+	height: 1.15rem;
+	border-radius: 0.25rem;
+}
+
+#checkbox-container:hover {
+	border: 1px solid var(--input-active-border-color);
+}
+
+#checkbox-container:hover + label {
+	color: var(--input-active-label-color);
+}
+
+#checkbox-label {
+	z-index: 2;
+	font-size: 80%;
+	position: absolute;
+	background: white;
+	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
+	padding: 0 0.25ch 0 0.25ch;
+}
+</style>

package/src/components/form/AComboBox.vue

@@ -0,0 +1,13 @@
+<template>
+	<ATableModal :event="event" :cellData="cellData" class="amodal">
+		<div>
+			<input type="text" />
+			<input type="text" />
+			<input type="text" />
+		</div>
+	</ATableModal>
+</template>
+
+<script setup lang="ts">
+defineProps(['event', 'cellData', 'tableID'])
+</script>

package/src/components/form/ADate.vue

@@ -0,0 +1,277 @@
+<template>
+	<div
+		v-if="!readonly"
+		:event="event"
+		:colIndex="colIndex"
+		:rowIndex="rowIndex"
+		:tableid="tableid"
+		class="adate"
+		tabindex="0"
+		ref="adatepicker">
+		<table>
+			<tr>
+				<td @click="previousMonth" :tabindex="-1">&lt;</td>
+				<th colspan="5">{{ monthAndYear }}</th>
+				<td @click="nextMonth" :tabindex="-1">&gt;</td>
+			</tr>
+			<tr v-for="rowNo in numberOfRows" :key="rowNo">
+				<!-- TODO: (style) remove inline styling and replace with theme package -->
+				<td
+					v-for="colNo in numberOfColumns"
+					:key="(rowNo - 1) * numberOfColumns + colNo"
+					:contenteditable="false"
+					:spellcheck="false"
+					:tabindex="0"
+					:style="{
+						border: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
+							? '2px solid var(--focus-cell-outline)'
+							: 'none',
+						borderBottomColor: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
+							? 'var(--focus-cell-outline)'
+							: 'none',
+					}"
+					@click.prevent.stop="selectDate($event, (rowNo - 1) * numberOfColumns + colNo)"
+					:class="{
+						todaysdate: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
+						selecteddate: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
+					}">
+					{{ new Date(currentDates[(rowNo - 1) * numberOfColumns + colNo]).getDate() }}
+				</td>
+			</tr>
+		</table>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+
+import { TableDataStore } from '@stonecrop/atable'
+import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+
+const props = defineProps<{
+	colIndex?: number
+	rowIndex?: number
+	tableid?: string
+	event?: Event
+	indent?: number
+	readonly?: boolean
+}>()
+
+const tableData = inject<TableDataStore>(props.tableid)
+
+const numberOfRows = 6
+const numberOfColumns = 7
+const todaysDate = new Date()
+
+const selectedDate = ref<Date>()
+const currentMonth = ref<number>()
+const currentYear = ref<number>()
+const currentDates = ref<number[]>([])
+// const width = ref('')
+
+onMounted(async () => {
+	let cellDate = tableData.cellData<string | number | Date>(props.colIndex, props.rowIndex)
+	if (cellDate) {
+		if (!(cellDate instanceof Date)) {
+			cellDate = new Date(cellDate)
+		}
+
+		selectedDate.value = cellDate
+		currentMonth.value = selectedDate.value.getMonth()
+		currentYear.value = selectedDate.value.getFullYear()
+	} else {
+		currentMonth.value = todaysDate.getMonth()
+		currentYear.value = todaysDate.getFullYear()
+	}
+
+	renderMonth()
+	await nextTick()
+
+	const $selectedDate = document.getElementsByClassName('selecteddate')
+	if ($selectedDate.length > 0) {
+		;($selectedDate[0] as HTMLElement).focus()
+	} else {
+		const $todaysDate = document.getElementsByClassName('todaysdate')
+		if ($todaysDate.length > 0) {
+			;($todaysDate[0] as HTMLElement).focus()
+		}
+	}
+})
+
+watch([currentMonth, currentYear], () => {
+	renderMonth()
+})
+
+const renderMonth = () => {
+	currentDates.value = []
+	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
+	const monthStartWeekday = firstOfMonth.getDay()
+	const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday)
+	for (let dayIndex of Array(43).keys()) {
+		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
+	}
+}
+
+const previousYear = () => {
+	currentYear.value -= 1
+}
+
+const nextYear = () => {
+	currentYear.value += 1
+}
+
+const previousMonth = () => {
+	if (currentMonth.value == 0) {
+		currentMonth.value = 11
+		previousYear()
+	} else {
+		currentMonth.value -= 1
+	}
+}
+
+const nextMonth = () => {
+	if (currentMonth.value == 11) {
+		currentMonth.value = 0
+		nextYear()
+	} else {
+		currentMonth.value += 1
+	}
+}
+
+const isTodaysDate = (day: string | number | Date) => {
+	if (currentMonth.value !== todaysDate.getMonth()) {
+		return
+	}
+	return todaysDate.toDateString() === new Date(day).toDateString()
+}
+
+const isSelectedDate = (day: string | number | Date) => {
+	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
+}
+
+const selectDate = (event: Event, currentIndex: number) => {
+	selectedDate.value = new Date(currentDates.value[currentIndex])
+	updateData()
+	// TODO: (typing) figure out a way to close datepicker
+	// context.refs.adatepicker.destroy()
+}
+
+const updateData = () => {
+	// TODO: check proper date format to feed back (assuming number for now)
+	tableData.setCellData(props.rowIndex, props.colIndex, selectedDate.value.getTime())
+}
+
+// const dayWidth = computed(() => {
+// 	const widthValue = Number(width.value.replace('px', ''))
+// 	return `${widthValue / (numberOfColumns - 1)}px`
+// })
+
+const monthAndYear = computed(() => {
+	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
+		year: 'numeric',
+		month: 'long',
+	})
+})
+
+// setup keyboard navigation
+useKeyboardNav([
+	{
+		parent: 'table.adate',
+		selectors: 'td',
+		handlers: {
+			...defaultKeypressHandlers,
+			...{
+				'keydown.pageup': previousMonth,
+				'keydown.shift.pageup': previousYear,
+				'keydown.pagedown': nextMonth,
+				'keydown.shift.pagedown': nextYear,
+			},
+		},
+	},
+])
+</script>
+
+<style scoped>
+@import '@/theme/aform.css';
+
+.adate {
+	border: 2px solid var(--focus-cell-outline);
+	position: absolute;
+	z-index: 100;
+	font-size: var(--table-font-size);
+	display: inline-table;
+	background-color: var(--row-color-zebra-light);
+	color: var(--cell-text-color);
+	outline: none;
+	width: calc(100% - 4px);
+}
+
+.adate tr {
+	height: 1.15rem;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.adate td {
+	border: 2px solid transparent;
+	min-width: 2.25ch; /* this doesn't zoom correctly */
+}
+
+.adate td:hover {
+	border: 2px solid var(--focus-cell-outline);
+}
+
+.adate td {
+	border: 1px;
+	border-style: solid;
+	border-color: var(--cell-border-color);
+	border-radius: 0px;
+	box-sizing: border-box;
+	margin: 0px;
+	outline: none;
+	box-shadow: none;
+	color: var(--cell-text-color);
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-left: 0.5ch;
+	padding-right: 0.5ch;
+}
+
+.adate td:focus,
+.adate td:focus-within {
+	background-color: var(--focus-cell-background);
+	outline-width: 2px;
+	outline-style: solid;
+	outline-color: var(--focus-cell-outline);
+	box-shadow: none;
+	overflow: hidden;
+	min-height: 1.15em;
+	max-height: 1.15em;
+	overflow: hidden;
+}
+
+button {
+	background-color: var(--row-color-zebra-light);
+	border: none;
+	padding: 0px;
+	margin: 0px;
+	color: var(--cell-text-color);
+	outline: none;
+	font-size: var(--table-font-size);
+}
+
+.dateheader {
+	font-weight: 700;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.adate .todaysdate {
+	border-bottom-color: var(--focus-cell-outline);
+}
+
+.adate .selecteddate {
+	border: 2px solid var(--focus-cell-outline);
+}
+</style>

package/src/components/form/ADropdown.vue

@@ -0,0 +1,206 @@
+<template>
+	<div class="autocomplete" :class="{ isOpen: isOpen }">
+		<div class="input-wrapper">
+			<input
+				ref="mopInput"
+				type="text"
+				@input="onChange"
+				@focus="onChange"
+				v-model="search"
+				@keydown.down="onArrowDown"
+				@keydown.up="onArrowUp"
+				@keydown.enter="onEnter" />
+			<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
+				<li class="loading autocomplete-result" v-if="isLoading">Loading results...</li>
+				<li
+					v-else
+					v-for="(result, i) in results"
+					:key="i"
+					@click="setResult(result)"
+					class="autocomplete-result"
+					:class="{ 'is-active': i === arrowCounter }">
+					{{ result }}
+				</li>
+			</ul>
+			<label>{{ label }}</label>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+	name: 'ADropdown',
+	props: {
+		modelValue: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		value: String,
+		items: {
+			type: Array,
+			required: false,
+			default: () => [],
+		},
+		isAsync: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue', 'filterChanged'],
+	data() {
+		return {
+			results: [],
+			search: this.modelValue,
+			isLoading: false,
+			arrowCounter: 0,
+			isOpen: false,
+		}
+	},
+	watch: {
+		items: function (value, oldValue) {
+			this.isLoading = false
+			this.results = value
+		},
+	},
+	mounted() {
+		document.addEventListener('click', this.handleClickOutside)
+		this.filterResults()
+	},
+	destroyed() {
+		document.removeEventListener('click', this.handleClickOutside)
+	},
+	methods: {
+		setResult(result) {
+			this.search = result
+			this.closeResults()
+		},
+		filterResults() {
+			this.results = this.items.filter(item => {
+				return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1
+			})
+		},
+		onChange() {
+			this.isOpen = true
+			if (this.isAsync) {
+				this.isLoading = true
+				this.$emit('filterChanged', this.search)
+			} else {
+				this.filterResults()
+			}
+		},
+		handleClickOutside(event) {
+			if (!this.$el.contains(event.target)) {
+				this.closeResults()
+				this.arrowCounter = 0
+			}
+		},
+		closeResults() {
+			this.isOpen = false
+
+			if (!this.items.includes(this.search)) {
+				this.search = ''
+			}
+
+			this.$emit('update:modelValue', this.search)
+		},
+		onArrowDown() {
+			if (this.arrowCounter < this.results.length) {
+				this.arrowCounter = this.arrowCounter + 1
+			}
+		},
+		onArrowUp() {
+			if (this.arrowCounter > 0) {
+				this.arrowCounter = this.arrowCounter - 1
+			}
+		},
+		onEnter() {
+			this.search = this.results[this.arrowCounter]
+			this.closeResults()
+			this.arrowCounter = 0
+		},
+		openWithSearch() {
+			this.search = ''
+			this.onChange()
+			this.$refs.mopInput.focus()
+		},
+	},
+})
+</script>
+
+<style>
+/* variables taken from here: https://github.com/frappe/frappe/blob/version-13/frappe/public/scss/common/awesomeplete.scss */
+.autocomplete {
+	position: relative;
+}
+
+.input-wrapper {
+	min-width: 40ch;
+	border: 1px solid transparent;
+	padding: 0rem;
+	margin: 0rem;
+	margin-right: 1ch;
+}
+
+input {
+	width: calc(100% - 1ch);
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	padding: 1ch 0.5ch 0.5ch 1ch;
+	margin: calc(1.15rem / 2) 0 0 0;
+	min-height: 1.15rem;
+	border-radius: 0.25rem;
+}
+
+input:focus {
+	border: 1px solid var(--input-active-border-color);
+	border-radius: 0.25rem 0.25rem 0 0;
+	border-bottom: none;
+}
+
+label {
+	display: block;
+	min-height: 1.15rem;
+	padding: 0rem;
+	margin: 0rem;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+	z-index: 2;
+	font-size: 80%;
+	position: absolute;
+	background: white;
+	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
+	padding: 0 0.25ch 0 0.25ch;
+}
+
+.autocomplete-results {
+	position: absolute;
+	width: calc(100% - 1ch + 1.5px);
+	z-index: 1;
+	padding: 0;
+	margin: 0;
+	color: #000000;
+	border: 1px solid var(--input-active-border-color);
+	border-radius: 0 0 0.25rem 0.25rem;
+	border-top: none;
+}
+
+.autocomplete-result {
+	list-style: none;
+	text-align: left;
+	padding: 4px 6px;
+	cursor: pointer;
+}
+
+.autocomplete-result.is-active,
+.autocomplete-result:hover {
+	background-color: var(--row-color-zebra-light);
+	color: #000000;
+}
+</style>

package/src/components/form/AFieldset.vue

@@ -0,0 +1,63 @@
+<template>
+	<fieldset>
+		<legend @click="toggleCollapse" @submit="toggleCollapse">
+			{{ label }}
+			<CollapseButton v-if="collapsible" :collapsed="collapsed" />
+		</legend>
+		<slot :collapsed="collapsed">
+			<AForm v-show="!collapsed" v-model="formSchema" :data="formData" />
+		</slot>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import CollapseButton from '@/components/base/CollapseButton.vue'
+import AForm from '@/components/AForm.vue'
+import { SchemaTypes } from 'types/index'
+
+const props = defineProps<{
+	schema: SchemaTypes[]
+	label: string
+	collapsible?: boolean
+	data?: any
+}>()
+
+const formData = ref(props.data || [])
+let collapsed = ref(false)
+let collapsible = ref(props.collapsible)
+
+const formSchema = ref(props.schema)
+function toggleCollapse(event: Event) {
+	event.preventDefault()
+	if (!collapsible.value) {
+		return
+	}
+	collapsed.value = !collapsed.value
+}
+</script>
+
+<style scoped>
+fieldset {
+	max-width: 100%;
+	width: 100%;
+	margin-right: 2ch;
+	border: 1px solid transparent;
+	border-bottom: 1px solid var(--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>