origam 0.1.0

package/dist/src/components/SliderField/FoxySliderFieldThumb.vue

@@ -0,0 +1,375 @@
+<template>
+	<div
+			:aria-orientation="direction"
+			:aria-readonly="!!readonly"
+			:aria-valuemax="max"
+			:aria-valuemin="min"
+			:aria-valuenow="modelValue"
+			:class="sliderFieldThumbClasses"
+			:style="sliderFieldThumbStyles"
+			:tabindex="isDisabled ? -1 : 0"
+			role="slider"
+			@keydown="!isReadonly ? handleKeydown : undefined"
+	>
+		<div
+				:class="sliderFieldThumbSurfaceClasses"
+				:style="sliderFieldThumbSurfaceStyles"
+		/>
+
+		<div
+				v-ripple="rippleProps"
+				:style="sliderFieldThumbRippleStyles"
+				class="foxy-slider-field-thumb__ripple"
+		/>
+
+		<foxy-translate-scale origin="bottom center">
+			<div
+					v-show="showLabel"
+					class="foxy-slider-field-thumb__label-container"
+			>
+				<div class="foxy-slider-field-thumb__label">
+					<slot
+							name="default"
+							v-bind="{ modelValue: props.modelValue }"
+					>
+						<span>{{ label }}</span>
+					</slot>
+				</div>
+			</div>
+		</foxy-translate-scale>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyTranslateScale } from '@foxy/components'
+
+	import { useBorder, useElevation, useProps, useRounded, useTextColor } from '@foxy/composables'
+
+	import { FOXY_SLIDER_FIELD_KEY } from '@foxy/consts'
+
+	import { vRipple } from '@foxy/directives'
+
+	import { KEYBOARD_VALUES } from '@foxy/enums'
+
+	import type { ISliderFieldThumbProps } from "@foxy/interfaces"
+
+	import { clamp, convertToUnit, int } from '@foxy/utils'
+
+	import { computed, inject, StyleValue } from 'vue'
+
+	const props = withDefaults(defineProps<ISliderFieldThumbProps>(), {
+		ripple: true,
+		size: 20,
+		min: 0,
+		max: 100,
+		modelValue: 0,
+		position: 0
+	})
+
+	const emits = defineEmits(['update:modelValue'])
+
+	const {filterProps} = useProps<ISliderFieldThumbProps>(props)
+
+	const slider = inject(FOXY_SLIDER_FIELD_KEY)
+
+	if (!slider) throw new Error('[Foxy] -slider-thumb must be used inside -slider')
+
+	const {
+		step,
+		error,
+		color: sliderColor,
+		elevation: sliderElevation,
+		rounded: sliderRounded,
+		border: sliderBorder,
+		ripple: sliderRipple,
+		disabled,
+		readonly,
+		isReversed,
+		isVertical,
+		mousePressed,
+		decimals,
+		indexFromEnd
+	} = slider
+
+	const isDisabled = computed(() => {
+		return props.disabled ?? disabled.value
+	})
+	const isReadonly = computed(() => {
+		return props.readonly ?? readonly.value
+	})
+	const color = computed(() => {
+		return error || isDisabled.value ? undefined : sliderColor.value ?? props.color
+	})
+	const size = computed(() => {
+		if (typeof props?.size === 'number') {
+			return int(props.size)
+		}
+
+		return 20
+	})
+	const positionPercentage = computed(() => {
+		return convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%')
+	})
+
+	const elevationProps = computed(() => {
+		return !isDisabled.value ? props.elevation ?? sliderElevation.value : undefined
+	})
+	const roundedProps = computed(() => {
+		return props.rounded ?? sliderRounded.value
+	})
+	const borderProps = computed(() => {
+		return props.border ?? sliderBorder.value
+	})
+	const rippleProps = computed(() => {
+		return !isDisabled.value && !isReadonly.value ? [(props.ripple || sliderRipple), null, [
+			'circle', 'center']] : undefined
+	})
+
+	const {elevationClasses} = useElevation(elevationProps)
+	const {borderClasses, borderStyles} = useBorder(borderProps)
+	const {roundedClasses, roundedStyles} = useRounded(roundedProps)
+
+	const {textColorStyles} = useTextColor(color)
+
+	const relevantKeys = [KEYBOARD_VALUES.PAGEUP, KEYBOARD_VALUES.PAGEDOWN, KEYBOARD_VALUES.END, KEYBOARD_VALUES.HOME, KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP]
+
+	const multipliers = computed(() => {
+		if (step.value) return [1, 2, 3]
+		else return [1, 5, 10]
+	})
+
+	const parseKeydown = (e: KeyboardEvent, value: number) => {
+		if (!relevantKeys.includes(e.key as typeof relevantKeys[number])) return
+
+		e.preventDefault()
+
+		const _step = step.value || 0.1
+		const steps = (props.max - props.min) / _step
+		const keyValue = [KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP]
+		if (keyValue.includes(e.key as typeof keyValue[number])) {
+			const increase = isVertical.value
+					? [KEYBOARD_VALUES.RIGHT, isReversed.value ? KEYBOARD_VALUES.DOWN : KEYBOARD_VALUES.UP]
+					: [KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.UP]
+			const direction = increase.includes(e.key as typeof increase[number]) ? 1 : -1
+			const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)
+
+			value = value + (direction * _step * multipliers.value[multiplier])
+		} else if (e.key === KEYBOARD_VALUES.HOME) {
+			value = props.min
+		} else if (e.key === KEYBOARD_VALUES.END) {
+			value = props.max
+		} else {
+			const direction = e.key === KEYBOARD_VALUES.PAGEDOWN ? 1 : -1
+			value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))
+		}
+
+		return clamp(value, props.min, props.max)
+	}
+	const handleKeydown = (e: KeyboardEvent) => {
+		const newValue = parseKeydown(e, props.modelValue)
+
+		if (newValue !== null && newValue !== undefined) {
+			emits('update:modelValue', newValue)
+		}
+	}
+
+	const showLabel = computed(() => {
+		return (props.label && props.focused) || props.label === 'always'
+	})
+	const label = computed(() => {
+		return props.modelValue.toFixed(step.value ? decimals.value : 1)
+	})
+
+	// CLASS & STYLES
+
+	const sliderFieldThumbStyles = computed(() => {
+		return [
+			{
+				'--foxy-slider-field-thumb---position': positionPercentage.value,
+				'--foxy-slider-field-thumb---size': convertToUnit(size.value)
+			},
+			props.style
+		] as StyleValue
+	})
+	const sliderFieldThumbClasses = computed(() => {
+		return [
+			'foxy-slider-field-thumb',
+			{
+				'foxy-slider-field-thumb--focused': props.focused,
+				'foxy-slider-field-thumb--pressed': props.focused && mousePressed.value
+			},
+			props.class
+		]
+	})
+	const sliderFieldThumbSurfaceStyles = computed(() => {
+		return [
+			borderStyles.value,
+			roundedStyles.value,
+			textColorStyles.value,
+			props.style
+		] as StyleValue
+	})
+	const sliderFieldThumbSurfaceClasses = computed(() => {
+		return [
+			'foxy-slider-field-thumb__surface',
+			elevationClasses.value,
+			borderClasses.value,
+			roundedClasses.value
+		]
+	})
+	const sliderFieldThumbRippleStyles = computed(() => {
+		return [
+			textColorStyles.value,
+			props.style
+		] as StyleValue
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-slider-field-thumb {
+		$this: &;
+
+		touch-action: none;
+		color: rgba(66, 66, 66, 1);
+		outline: none;
+		position: absolute;
+		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+
+		&__label {
+			background: rgba(66, 66, 66, 0.7);
+			color: rgba(66, 66, 66, 1);
+
+			&:before {
+				color: rgba(66, 66, 66, 0.7);
+			}
+		}
+
+		&__surface {
+			cursor: pointer;
+			width: var(--foxy-slider-field-thumb---size, 20);
+			height: var(--foxy-slider-field-thumb---size, 20);
+			border-radius: 50%;
+			user-select: none;
+			background-color: currentColor;
+
+			@media (forced-colors: active) {
+				background-color: highlight;
+			}
+
+			&:before {
+				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+				content: "";
+				color: inherit;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				background: currentColor;
+				position: absolute;
+				pointer-events: none;
+				opacity: 0;
+			}
+
+			&:after {
+				content: "";
+				width: 42px;
+				height: 42px;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		&__label-container {
+			position: absolute;
+			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
+		}
+
+		&__label {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 0.75rem;
+			min-width: 35px;
+			height: 25px;
+			border-radius: 4px;
+			padding: 6px;
+			position: absolute;
+			user-select: none;
+			transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
+
+			&:before {
+				content: "";
+				width: 0;
+				height: 0;
+				position: absolute;
+			}
+		}
+
+		&__ripple {
+			position: absolute;
+			left: calc(var(--foxy-slider-field-thumb---size, 20) / -2);
+			top: calc(var(--foxy-range-slider-thumb---size, 20) / -2);
+			width: calc(var(--foxy-range-slider-thumb---size, 20) * 2);
+			height: calc(var(--foxy-range-slider-thumb---size, 20) * 2);
+			background: inherit;
+		}
+
+		&--focused {
+			#{$this}__surface {
+				&:before {
+					transform: scale(2);
+					opacity: 0.12;
+				}
+			}
+		}
+
+		&--pressed {
+			transition: none;
+
+			#{$this}__surface {
+				&:before {
+					opacity: 0.12;
+				}
+			}
+		}
+
+		@media (hover: hover) {
+			&:hover {
+				#{$this}__surface {
+					&:before {
+						transform: scale(2);
+					}
+				}
+
+				&:not(#{$this}--focused) {
+					#{$this}__surface {
+						&:before {
+							opacity: 0.04;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
+
+<style>
+	:root {
+
+	}
+</style>

package/dist/src/components/SliderField/FoxySliderFieldTrack.vue

@@ -0,0 +1,316 @@
+<template>
+	<div
+			:class="sliderFieldTrackClasses"
+			:style="sliderFieldTrackStyles"
+	>
+		<div
+				:class="sliderFieldTrackBgClasses"
+				:style="sliderFieldTrackBgStyles"
+		/>
+
+		<div
+				:class="sliderFieldTrackFillClasses"
+				:style="sliderFieldTrackFillStyles"
+		/>
+
+		<div
+				v-if="showTicks"
+				:class="sliderFieldTrackTicksClasses"
+		>
+			<template
+					v-for="(tick, index) in ticks"
+					:key="index"
+			>
+				<div
+						:class="sliderFieldTickClasses(tick)"
+						:style="sliderFieldTickStyles(tick)"
+				>
+					<div
+							v-if="tick.label || slots.item || slots[`item.${index}`]"
+							class="foxy-slider-field-track__tick-label"
+					>
+						<slot
+								name="item"
+								v-bind="{ tick, index }"
+						>
+							<slot
+									:name="`item.${index}`"
+									v-bind="{ tick, index }"
+							>
+								{{ tick.label }}
+							</slot>
+						</slot>
+					</div>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { useBackgroundColor, useProps, useRounded } from '@foxy/composables'
+
+	import { FOXY_SLIDER_FIELD_KEY } from '@foxy/consts'
+
+	import type { ISliderFieldTrackProps } from "@foxy/interfaces"
+
+	import type { TTick } from '@foxy/types'
+
+	import { convertToUnit, int } from '@foxy/utils'
+
+	import { computed, inject, StyleValue, useSlots } from 'vue'
+
+	const props = withDefaults(defineProps<ISliderFieldTrackProps>(), {
+		start: 0,
+		stop: 100,
+		size: 4
+	})
+
+	const {filterProps} = useProps<ISliderFieldTrackProps>(props)
+
+	const slider = inject(FOXY_SLIDER_FIELD_KEY)
+
+	if (!slider) throw new Error('[Foxy] -slider-track must be inside -slider')
+
+	const slots = useSlots()
+
+	const {
+		color: sliderColor,
+		bgColor: sliderBgColor,
+		error,
+		disabled,
+		rounded: sliderRounded,
+		showTicks: sliderShowTicks,
+		tickSize: sliderTickSize,
+		parsedTicks,
+		min,
+		max,
+		isVertical,
+		indexFromEnd
+	} = slider
+
+	const isDisabled = computed(() => {
+		return props.disabled ?? disabled.value
+	})
+	const color = computed(() => {
+		return error.value || isDisabled.value ? undefined : sliderColor.value ? sliderColor.value : props.color
+	})
+	const bgColor = computed(() => {
+		return error.value || isDisabled.value ? undefined : sliderBgColor.value ? sliderBgColor.value : props.bgColor
+	})
+	const size = computed(() => {
+		if (typeof props?.size === 'number') {
+			return int(props.size)
+		}
+
+		return 4
+	})
+
+	const showTicks = computed(() => {
+		return !!sliderShowTicks.value
+	})
+
+	const roundedProps = computed(() => {
+		return props.rounded ?? sliderRounded.value
+	})
+
+	const {roundedClasses, roundedStyles} = useRounded(roundedProps)
+	const {backgroundColorStyles: trackFillColorStyles} = useBackgroundColor(bgColor)
+	const {backgroundColorStyles} = useBackgroundColor(color)
+
+	const startDir = computed(() => `inset-${isVertical.value ? 'block' : 'inline'}-${indexFromEnd.value ? 'end' : 'start'}`)
+	const endDir = computed(() => isVertical.value ? 'height' : 'width')
+
+	const backgroundStyles = computed(() => {
+		return {
+			[startDir.value]: '0%',
+			[endDir.value]: '100%'
+		}
+	})
+	const trackFillWidth = computed(() => {
+		return props.stop - props.start
+	})
+
+	const trackFillStyles = computed(() => {
+		return {
+			[startDir.value]: convertToUnit(props.start, '%'),
+			[endDir.value]: convertToUnit(trackFillWidth.value, '%')
+		}
+	})
+
+	const ticks = computed(() => {
+		return isVertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value
+	})
+
+	const sliderFieldTickStyles = (tick: TTick) => {
+		const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined
+
+		return [
+			{
+				'--foxy-slider-field-track__tick---size': convertToUnit(sliderTickSize.value),
+				[startDir.value]: directionValue
+			},
+			props.style
+		] as StyleValue
+	}
+	const sliderFieldTickClasses = (tick: TTick) => {
+		return [
+			'foxy-slider-field-track__tick',
+			{
+				'foxy-slider-field-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
+				'foxy-slider-field-track__tick--first': tick.value === min.value,
+				'foxy-slider-field-track__tick--last': tick.value === max.value
+			}
+		]
+	}
+
+	// CLASS & STYLES
+
+	const sliderFieldTrackStyles = computed(() => {
+		return [
+			{
+				'--foxy-slider-field-track---size': convertToUnit(size.value)
+			},
+			roundedStyles.value,
+			props.style
+		] as StyleValue
+	})
+	const sliderFieldTrackClasses = computed(() => {
+		return [
+			'foxy-slider-field-track',
+			roundedClasses.value,
+			props.class
+		]
+	})
+	const sliderFieldTrackBgStyles = computed(() => {
+		return [
+			backgroundStyles.value,
+			backgroundColorStyles.value
+		] as StyleValue
+	})
+	const sliderFieldTrackBgClasses = computed(() => {
+		return [
+			'foxy-slider-field-track__background',
+			{
+				'foxy-slider-field-track__background--opacity': !!color.value
+			}
+		]
+	})
+	const sliderFieldTrackFillStyles = computed(() => {
+		return [
+			trackFillStyles.value,
+			trackFillColorStyles.value
+		] as StyleValue
+	})
+	const sliderFieldTrackFillClasses = computed(() => {
+		return [
+			'foxy-slider-field-track__fill'
+		]
+	})
+	const sliderFieldTrackTicksClasses = computed(() => {
+		return [
+			'foxy-slider-field-track__ticks',
+			{
+				'foxy-slider-field-track__ticks--always-show': sliderShowTicks.value === 'always'
+			}
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-slider-field-track {
+		$this: &;
+
+		border-radius: 9999px;
+
+		@media (forced-colors: active) {
+			border: thin solid buttontext;
+		}
+
+		&__background,
+		&__fill {
+			position: absolute;
+			border-radius: inherit;
+			transition: var(--foxy-slider-field__track---transition, 0.3s cubic-bezier(0.25, 0.8, 0.5, 1));
+
+			@media (forced-colors: active) {
+				background-color: highlight;
+			}
+		}
+
+		&__background {
+			background-color: rgb(148, 148, 148);
+		}
+
+		&__fill {
+			background-color: rgba(84, 84, 84, 1);
+		}
+
+		&__ticks {
+			height: 100%;
+			width: 100%;
+			position: relative;
+
+			#{$this}--always-show {
+				#{$this}__tick {
+					opacity: 1;
+				}
+			}
+		}
+
+		&__tick {
+			background-color: rgba(66, 66, 66, 1);
+			position: absolute;
+			opacity: 0;
+			transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
+			border-radius: 2px;
+			width: var(--foxy-slider-field-track__tick---size, 2);
+			height: var(--foxy-slider-field-track__tick---size, 2);
+			transform: translate(calc(var(--foxy-slider-field-track__tick---size, 2) / -2), calc(var(--foxy-slider-field-track__tick---size, 2) / -2));
+
+			&--filled {
+				background-color: rgba(238, 238, 238, 1);
+			}
+
+			&--first {
+				#{$this}__tick-label {
+					transform: none;
+				}
+			}
+
+			&--last {
+				#{$this}__tick-label {
+					transform: translateX(-100%);
+				}
+			}
+		}
+
+		&__tick-label {
+			position: absolute;
+			user-select: none;
+			white-space: nowrap;
+		}
+
+		&__background--opacity {
+			opacity: 0.38;
+		}
+	}
+</style>
+
+<style>
+	:root {
+
+	}
+</style>

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FoxySliderField", {
+  enumerable: true,
+  get: function () {
+    return _FoxySliderField.default;
+  }
+});
+Object.defineProperty(exports, "FoxySliderFieldThumb", {
+  enumerable: true,
+  get: function () {
+    return _FoxySliderFieldThumb.default;
+  }
+});
+Object.defineProperty(exports, "FoxySliderFieldTrack", {
+  enumerable: true,
+  get: function () {
+    return _FoxySliderFieldTrack.default;
+  }
+});
+var _FoxySliderField = _interopRequireDefault(require("./FoxySliderField.vue"));
+var _FoxySliderFieldTrack = _interopRequireDefault(require("./FoxySliderFieldTrack.vue"));
+var _FoxySliderFieldThumb = _interopRequireDefault(require("./FoxySliderFieldThumb.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -0,0 +1,3 @@
+export { default as FoxySliderField } from './FoxySliderField.vue';
+export { default as FoxySliderFieldTrack } from './FoxySliderFieldTrack.vue';
+export { default as FoxySliderFieldThumb } from './FoxySliderFieldThumb.vue';

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

@@ -0,0 +1,3 @@
+export { default as FoxySliderField } from "./FoxySliderField.vue";
+export { default as FoxySliderFieldTrack } from "./FoxySliderFieldTrack.vue";
+export { default as FoxySliderFieldThumb } from "./FoxySliderFieldThumb.vue";