origam 0.1.0

package/dist/src/components/DatePicker/FoxyDatePickerYears.vue

@@ -0,0 +1,147 @@
+<template>
+	<div
+			:class="datePickerYearsClasses"
+			:style="datePickerYearsStyles"
+	>
+		<div class="foxy-date-picker-years__content">
+			<template v-for="(year, yearIndex) in years">
+				<slot
+						name="year"
+						v-bind="{year, index: yearIndex, props: btnProps(year, yearIndex)}"
+				>
+					<foxy-btn v-bind="btnProps(year, yearIndex)"/>
+				</slot>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyBtn } from "@foxy/components"
+	import { useDate, useProps, useVModel } from "@foxy/composables"
+
+	import type { IDatePickerYearsProps } from "@foxy/interfaces"
+	import { convertToUnit, createRange, int, templateRef } from "@foxy/utils"
+
+	import { computed, nextTick, onMounted, StyleValue, watchEffect } from "vue"
+
+	const props = withDefaults(defineProps<IDatePickerYearsProps>(), {})
+
+	const emits = defineEmits(['update:year'])
+
+	const {filterProps} = useProps<IDatePickerYearsProps>(props)
+
+	const adapter = useDate()
+	const model = useVModel(props, 'year', adapter.getYear(adapter.date()), (v) => {
+		return int(v || 0)
+	})
+
+	const years = computed(() => {
+		const year = adapter.getYear(adapter.date())
+
+		let min = year - 100
+		let max = year + 52
+
+		if (props.min) {
+			min = adapter.getYear(adapter.date(props.min))
+		}
+
+		if (props.max) {
+			max = adapter.getYear(adapter.date(props.max))
+		}
+
+		let date = adapter.startOfYear(adapter.date())
+
+		date = adapter.setYear(date, min)
+
+		return createRange(max - min + 1, min).map((i) => {
+			const text = adapter.format(date, 'year')
+			date = adapter.setYear(date, adapter.getYear(date) + 1)
+
+			return {
+				text,
+				value: i
+			}
+		})
+	})
+
+	watchEffect(() => {
+		model.value = model.value ?? adapter.getYear(adapter.date())
+	})
+
+	const yearRef = templateRef()
+
+	const btnProps = (year: { text: string, value: number }) => {
+		return {
+			ref: model.value === year.value ? yearRef : undefined,
+			active: model.value === year.value,
+			color: model.value === year.value ? props.color : undefined,
+			rounded: true,
+			text: year.text,
+			key: "year",
+			onClick: () => handleClick(year.value)
+		}
+	}
+	const handleClick = (year: number) => {
+		if (model.value === year) {
+			emits('update:year', model.value)
+			return
+		}
+
+		model.value = year
+	}
+
+	onMounted(async () => {
+		await nextTick()
+		yearRef.el?.scrollIntoView({block: 'center'})
+	})
+
+	// CLASS & STYLES
+
+	const datePickerYearsStyles = computed(() => {
+		return [
+			{
+				height: convertToUnit(props.height)
+			},
+			props.style
+		] as StyleValue
+	})
+	const datePickerYearsClasses = computed(() => {
+		return [
+			'foxy-date-picker-years',
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-date-picker-years {
+		height: 288px;
+		overflow-y: scroll;
+
+		&__content {
+			display: grid;
+			flex: 1 1;
+			justify-content: space-around;
+			grid-template-columns: repeat(3, 1fr);
+			gap: 8px 24px;
+			padding-inline: 32px;
+
+			:deep(.foxy-btn) {
+				padding-inline: 8px;
+			}
+		}
+	}
+</style>

package/dist/src/components/DatePicker/index.cjs

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FoxyDatePicker", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePicker.default;
+  }
+});
+Object.defineProperty(exports, "FoxyDatePickerControls", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerControls.default;
+  }
+});
+Object.defineProperty(exports, "FoxyDatePickerHeader", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerHeader.default;
+  }
+});
+Object.defineProperty(exports, "FoxyDatePickerMonth", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerMonth.default;
+  }
+});
+Object.defineProperty(exports, "FoxyDatePickerMonths", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerMonths.default;
+  }
+});
+Object.defineProperty(exports, "FoxyDatePickerYears", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerYears.default;
+  }
+});
+var _FoxyDatePicker = _interopRequireDefault(require("./FoxyDatePicker.vue"));
+var _FoxyDatePickerHeader = _interopRequireDefault(require("./FoxyDatePickerHeader.vue"));
+var _FoxyDatePickerControls = _interopRequireDefault(require("./FoxyDatePickerControls.vue"));
+var _FoxyDatePickerMonth = _interopRequireDefault(require("./FoxyDatePickerMonth.vue"));
+var _FoxyDatePickerMonths = _interopRequireDefault(require("./FoxyDatePickerMonths.vue"));
+var _FoxyDatePickerYears = _interopRequireDefault(require("./FoxyDatePickerYears.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/DatePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { default as FoxyDatePicker } from './FoxyDatePicker.vue';
+export { default as FoxyDatePickerHeader } from './FoxyDatePickerHeader.vue';
+export { default as FoxyDatePickerControls } from './FoxyDatePickerControls.vue';
+export { default as FoxyDatePickerMonth } from './FoxyDatePickerMonth.vue';
+export { default as FoxyDatePickerMonths } from './FoxyDatePickerMonths.vue';
+export { default as FoxyDatePickerYears } from './FoxyDatePickerYears.vue';

package/dist/src/components/DatePicker/index.js

@@ -0,0 +1,6 @@
+export { default as FoxyDatePicker } from "./FoxyDatePicker.vue";
+export { default as FoxyDatePickerHeader } from "./FoxyDatePickerHeader.vue";
+export { default as FoxyDatePickerControls } from "./FoxyDatePickerControls.vue";
+export { default as FoxyDatePickerMonth } from "./FoxyDatePickerMonth.vue";
+export { default as FoxyDatePickerMonths } from "./FoxyDatePickerMonths.vue";
+export { default as FoxyDatePickerYears } from "./FoxyDatePickerYears.vue";

package/dist/src/components/DatePickerField/FoxyDatePickerField.cy.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+var _vue = require("vue");
+var _FoxyDatePickerField = _interopRequireDefault(require("./FoxyDatePickerField.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe("<FoxyDatePickerField />", () => {
+  it("renders", () => {
+    cy.mount((0, _vue.h)(_FoxyDatePickerField.default), {});
+  });
+});

package/dist/src/components/DatePickerField/FoxyDatePickerField.cy.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DatePickerField/FoxyDatePickerField.cy.js

@@ -0,0 +1,7 @@
+import { h } from "vue";
+import FoxyDatePickerField from "./FoxyDatePickerField.vue";
+describe("<FoxyDatePickerField />", () => {
+  it("renders", () => {
+    cy.mount(h(FoxyDatePickerField), {});
+  });
+});

package/dist/src/components/DatePickerField/FoxyDatePickerField.vue

@@ -0,0 +1,436 @@
+<template>
+	<foxy-text-field
+			ref="foxyTextFieldRef"
+			v-model:focused="isFocused"
+			:aria-label="t(label)"
+			:class="datePickerFieldClasses"
+			:counter-value="counterValue"
+			:dirty="isDirty"
+			:placeholder="placeholder"
+			:style="datePickerFieldStyles"
+			:title="t(label)"
+			:validation-value="validationValue"
+			v-bind="{ ...textFieldProps }"
+			@blur="handleBlur"
+			@change="handleChange"
+			@click:clear="handleClear"
+			@mousedown:control="handleMousedownControl"
+	>
+		<template
+				v-if="slots.prepend"
+				#prepend
+		>
+			<slot name="prepend"/>
+		</template>
+
+		<template
+				v-if="slots.loader"
+				#loader
+		>
+			<slot name="loader"/>
+		</template>
+
+		<template
+				v-if="slots.prependInner"
+				#prependInner
+		>
+			<slot name="prependInner"/>
+		</template>
+
+		<template
+				v-if="slots.floatingLabel"
+				#floatingLabel
+		>
+			<slot name="floatingLabel"/>
+		</template>
+
+		<template
+				v-if="slots.label"
+				#label
+		>
+			<slot name="label"/>
+		</template>
+
+		<template
+				v-if="slots.prefix"
+				#prefix
+		>
+			<slot name="prefix"/>
+		</template>
+
+		<template #default>
+			<foxy-menu
+					ref="foxyMenuRef"
+					v-model="menu"
+					:close-on-content-click="false"
+					:disabled="menuDisabled"
+					:location="BLOCK.BOTTOM"
+					:open-on-click="false"
+					activator="parent"
+					content-class="foxy-date-picker-field__content"
+					v-bind="{ ...menuProps }"
+					@after-leave="handleAfterLeave"
+			>
+
+				<template #default>
+					<foxy-date-picker
+							ref="foxyDatePickerRef"
+							:model-value="model"
+							v-bind="{...datePickerProps}"
+							@update:model-value="handleSelectDate"
+					/>
+				</template>
+			</foxy-menu>
+
+			<template v-if="selectedValues">
+				<template v-if="isRange">
+					<span class="foxy-date-picker-field__selection-text">
+            <slot name="rangeSelection">
+              {{ t('foxy.datePickerRangeField.text', selectedValues[0], selectedValues[1]) }}
+            </slot>
+          </span>
+				</template>
+				<template v-else>
+					<template
+							v-for="(item, index) in selectedValues"
+							:key="index"
+					>
+						<div
+								:style="[textColorStyles]"
+								class="foxy-date-picker-field__selection-chips"
+						>
+							<template v-if="isMultiple">
+								<slot
+										name="chip"
+										v-bind="{ item, index, props: chipSlotProps(item) }"
+								>
+									<foxy-chip
+											key="chip"
+											ref="foxyChipsRef"
+											v-bind="chipSlotProps(item)"
+									>
+										<template #default>
+											<slot name="selection">
+												{{ item }}
+											</slot>
+										</template>
+									</foxy-chip>
+								</slot>
+							</template>
+							<template v-else>
+			          <span class="foxy-date-picker-field__selection-text">
+			            <slot name="selection">
+			              {{ item }}
+			            </slot>
+			          </span>
+							</template>
+						</div>
+					</template>
+				</template>
+			</template>
+		</template>
+
+		<template
+				v-if="slots.suffix"
+				#suffix
+		>
+			<slot name="suffix"/>
+		</template>
+
+		<template #appendInner>
+			<slot name="appendInner">
+				<foxy-avatar
+						v-if="appendInnerAvatar"
+						key="append-avatar"
+						:density="density"
+						:image="appendInnerAvatar"
+				/>
+				<foxy-icon
+						v-if="appendInnerIcon"
+						key="append-icon"
+						:density="density"
+						:icon="appendInnerIcon"
+				/>
+			</slot>
+		</template>
+
+		<template
+				v-if="slots.clear"
+				#clear
+		>
+			<slot name="clear"/>
+		</template>
+
+		<template
+				v-if="slots.append"
+				#append
+		>
+			<slot name="append"/>
+		</template>
+	</foxy-text-field>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import {
+		FoxyAvatar,
+		FoxyChip,
+		FoxyDatePicker,
+		FoxyIcon,
+		FoxyMenu,
+		FoxyTextField,
+		FoxyTranslateScale
+	} from "@foxy/components"
+
+	import { useDate, useLocale, useProps, useTextColor, useVModel } from "@foxy/composables"
+
+	import { FOXY_FORM_KEY } from "@foxy/consts"
+
+	import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "@foxy/enums"
+
+	import type { IDatePickerFieldProps } from "@foxy/interfaces"
+
+	import type { TFoxyDatePicker, TFoxyMenu, TFoxyTextField, TTransitionProps } from "@foxy/types"
+
+	import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "@foxy/utils"
+
+	import { computed, inject, nextTick, ref, shallowRef, StyleValue, toRef, useSlots, watch } from "vue"
+
+	const props = withDefaults(defineProps<IDatePickerFieldProps>(), {
+		type: TEXT_FIELD_TYPE.TEXT,
+		centerAffix: true,
+		direction: DIRECTION.HORIZONTAL,
+		density: DENSITY.DEFAULT,
+		border: true,
+		rounded: true,
+		modelValue: null,
+		appendInnerIcon: MDI_ICONS.CALENDAR_OUTLINE,
+		transition: () => ({component: FoxyTranslateScale}) as unknown as TTransitionProps,
+		closeText: 'foxy.close',
+		openText: 'foxy.open',
+		range: false,
+		closeOnSelect: true
+	})
+
+	const {filterProps} = useProps<IDatePickerFieldProps>(props)
+
+	const {t} = useLocale()
+
+	const foxyTextFieldRef = ref<TFoxyTextField>()
+	const foxyMenuRef = ref<TFoxyMenu>()
+	const foxyDatePickerRef = ref<TFoxyDatePicker>()
+
+	const slots = useSlots()
+
+	const model = useVModel(
+			props,
+			'modelValue',
+			[],
+			(v) => wrapInArray(v),
+			(v) => props.range || props.multiple ? v : v[0]
+	)
+
+	const adapter = useDate()
+
+	const handleSelectDate = (dates: string | Array<string>) => {
+		model.value = wrapInArray(dates)
+
+		nextTick(() => {
+			if (closeOnSelect.value) {
+				menu.value = false
+			}
+		})
+	}
+	const handleRemoveDate = (date: string) => {
+		const index = model.value.findIndex((selection) => selection === date)
+
+		const value = [...model.value]
+
+		value.splice(index, 1)
+		model.value = value
+	}
+
+	const {textColorStyles} = useTextColor(toRef(props, 'color'))
+
+	const menuState = useVModel(props, 'menu')
+	const menu = computed<boolean>({
+		get: () => menuState.value,
+		set: (v) => {
+			if (menuState.value && !v && foxyMenuRef.value?.openChildren) {
+				return
+			}
+
+			menuState.value = v
+		}
+	})
+
+	const selectedValues = computed(() => {
+		let selectedDates = [...model.value]
+
+		if (isRange.value) {
+			selectedDates = [model.value[0], model.value[model.value.length - 1]]
+		}
+
+		return selectedDates.map((selection) => {
+			return adapter.format(adapter.date(selection), 'keyboardDate')
+		})
+	})
+
+	const hasSelectedValues = computed(() => {
+		return !isEmpty(selectedValues.value)
+	})
+
+	const isMultiple = computed(() => {
+		return props.multiple && model.value.length > 1
+	})
+	const isRange = computed(() => {
+		return props.range && model.value.length > 1
+	})
+
+	const isFocused = shallowRef(false)
+	const form = inject(FOXY_FORM_KEY, null)
+
+	const menuDisabled = computed(() => {
+		return props.readonly || form?.isReadonly.value
+	})
+	const menuProps = computed(() => {
+		return {
+			...props.menuProps,
+			activatorProps: {
+				...(props.menuProps?.activatorProps || {}),
+				'aria-haspopup': 'datepickerbox' // Set aria-haspopup to 'listbox'
+			}
+		}
+	})
+
+	const handleClear = () => {
+		model.value = []
+
+		if (props.openOnClear) {
+			menu.value = true
+		}
+	}
+	const handleMousedownControl = () => {
+		if (menuDisabled.value) return
+
+		menu.value = !menu.value
+	}
+	const handleBlur = (e: FocusEvent) => {
+		if (!foxyDatePickerRef.value?.$el.contains(e.relatedTarget as HTMLElement)) {
+			menu.value = false
+		}
+
+		if (hasSelectedValues.value) {
+			isFocused.value = true
+		}
+	}
+	const handleChange = () => {
+		if (matchesSelector(foxyTextFieldRef.value, ':autofill') || matchesSelector(foxyTextFieldRef.value, ':-webkit-autofill')) {
+			// (e.target as HTMLInputElement).value
+			// TODO -  Select date
+		}
+	}
+	const handleAfterLeave = () => {
+		if (isFocused.value) {
+			foxyTextFieldRef.value?.focus()
+		}
+	}
+
+	const chipSlotProps = (item: string) => {
+		return {
+			closable: props.closableChips,
+			bgColor: 'rgba(168, 168, 168, 1)',
+			color: 'rgb(255, 255, 255)',
+			border: true,
+			rounded: true,
+			'onClick:close': (e: Event) => handleChipClose(e, item),
+			onKeydown: (e: KeyboardEvent) => handleChipKeydown(e, item),
+			onMousedown: (e: MouseEvent) => handleChipMousedown(e),
+			modelValue: true,
+			size: 'small',
+			...props.chipProps
+		}
+	}
+
+	const handleChipClose = (e: Event, item: string) => {
+		e.stopPropagation()
+		e.preventDefault()
+
+		handleRemoveDate(item)
+	}
+	const handleChipKeydown = (e: KeyboardEvent, item: string) => {
+		if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return
+
+		e.preventDefault()
+		e.stopPropagation()
+
+		handleChipClose(e, item)
+	}
+	const handleChipMousedown = (e: MouseEvent) => {
+		e.preventDefault()
+		e.stopPropagation()
+	}
+
+	const textFieldProps = computed(() => {
+		return foxyTextFieldRef.value?.filterProps(props, ['class', 'id', 'style', 'dirty', 'modelValue', 'placeholder', 'validationValue', 'focused'])
+	})
+
+	const datePickerProps = computed(() => {
+		return foxyDatePickerRef.value?.filterProps(props, ['class', 'id', 'style', 'modelValue'])
+	})
+
+	const isDirty = computed(() => {
+		return model.value.length > 0
+	})
+	const placeholder = computed(() => {
+		return isDirty.value || (!isFocused.value && props.label && !props.persistentPlaceholder) ? undefined : props.placeholder
+	})
+	const label = computed(() => {
+		return menu.value ? props.closeText : props.openText
+	})
+	const closeOnSelect = computed(() => {
+		return props.closeOnSelect && !(props.multiple || props.range)
+	})
+
+	watch(selectedValues, () => {
+		isFocused.value = hasSelectedValues.value
+	}, {
+		immediate: true,
+		deep: true
+	})
+
+	// CLASS & STYLES
+
+	const datePickerFieldStyles = computed(() => {
+		return [
+			props.style
+		] as StyleValue
+	})
+	const datePickerFieldClasses = computed(() => {
+		return [
+			'foxy-date-picker-field',
+			`foxy-date-picker-field--${props.range ? 'range' : 'single'}`,
+			{
+				'foxy-date-picker-field--active-menu': menu.value
+			},
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose(forwardRefs({
+		filterProps,
+		isFocused,
+		menu
+	}, foxyTextFieldRef))
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+
+</style>

package/dist/src/components/DatePickerField/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FoxyDatePickerField", {
+  enumerable: true,
+  get: function () {
+    return _FoxyDatePickerField.default;
+  }
+});
+var _FoxyDatePickerField = _interopRequireDefault(require("./FoxyDatePickerField.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/DatePickerField/index.d.ts

@@ -0,0 +1 @@
+export { default as FoxyDatePickerField } from './FoxyDatePickerField.vue';

package/dist/src/components/DatePickerField/index.js

@@ -0,0 +1 @@
+export { default as FoxyDatePickerField } from "./FoxyDatePickerField.vue";

package/dist/src/components/Dialog/FoxyDialog.cy.cjs

@@ -0,0 +1,10 @@
+"use strict";
+
+var _vue = require("vue");
+var _FoxyDialog = _interopRequireDefault(require("./FoxyDialog.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe("<FoxyDialog />", () => {
+  it("renders", () => {
+    cy.mount((0, _vue.h)(_FoxyDialog.default), {});
+  });
+});

package/dist/src/components/Dialog/FoxyDialog.cy.d.ts

@@ -0,0 +1 @@
+export {};