origam 0.1.0

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

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

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

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

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

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

package/dist/src/components/SelectionControl/FoxySelectionControl.vue

@@ -0,0 +1,322 @@
+<template>
+	<div
+			:class="selectionControlClasses"
+			:style="selectionControlStyles"
+			v-bind="rootAttrs"
+	>
+		<div
+				:style="textColorStyles"
+				class="foxy-selection-control__wrapper"
+		>
+			<slot
+					name="default"
+					v-bind="{ model, textColorStyles, backgroundColorStyles, icon, props: { onFocus: handleFocus, onBlur: handleBlur, id } }"
+			/>
+
+			<div
+					v-ripple="rippleProp"
+					class="foxy-selection-control__input"
+			>
+				<slot
+						name="input"
+						v-bind="{ model, textColorStyles, backgroundColorStyles, icon, props: { ...inputAttrs, disabled: props.disabled, label: props.label, name: props.name, type: props.type, value: trueValue, onFocus: handleFocus, onBlur: handleBlur, id, onInput: handleInput } }"
+				>
+					<template v-if="icon">
+						<foxy-icon
+								key="icon"
+								:icon="icon"
+						/>
+					</template>
+
+					<input
+							:id="id"
+							ref="inputRef"
+							:aria-checked="props.type === 'checkbox' ? model : undefined"
+							:aria-disabled="props.disabled"
+							:aria-label="props.label"
+							:checked="model"
+							:disabled="props.disabled"
+							:name="props.name"
+							:type="props.type"
+							:value="trueValue"
+							v-bind="inputAttrs"
+							@blur="handleBlur"
+							@focus="handleFocus"
+							@input="handleInput"
+					/>
+				</slot>
+			</div>
+		</div>
+
+		<div class="foxy-selection-control__label">
+			<slot name="label">
+				<foxy-label
+						:for="id"
+						:required="required"
+						:text="label"
+						@click="handleClickLabel"
+				/>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyIcon, FoxyLabel } from '@foxy/components'
+
+	import { useProps, useSelectionControl } from '@foxy/composables'
+
+	import { vRipple } from '@foxy/directives'
+
+	import type { ISelectionControlProps } from "@foxy/interfaces"
+
+	import { filterInputAttrs, forwardRefs, getUid, matchesSelector } from '@foxy/utils'
+
+	import { computed, nextTick, ref, shallowRef, StyleValue, useAttrs } from 'vue'
+
+	const props = withDefaults(defineProps<ISelectionControlProps>(), {})
+
+	const emits = defineEmits(['update:modelValue', 'click:label'])
+
+	const {filterProps} = useProps<ISelectionControlProps>(props)
+
+	const inputRef = ref<HTMLInputElement>()
+
+	const attrs = useAttrs()
+
+	const {
+		group,
+		densityClasses,
+		icon,
+		model,
+		textColorStyles,
+		backgroundColorStyles,
+		trueValue
+	} = useSelectionControl(props)
+
+	const uid = getUid()
+	const isFocused = shallowRef(false)
+	const isFocusVisible = shallowRef(false)
+	const id = computed(() => props.id || `input-${uid}`)
+	const isInteractive = computed(() => {
+		return !props.disabled && !props.readonly
+	})
+
+	group?.onForceUpdate(() => {
+		if (inputRef.value) {
+			inputRef.value.checked = model.value
+		}
+	})
+
+	const handleFocus = (e: FocusEvent) => {
+		if (!isInteractive.value) return
+
+		isFocused.value = true
+		if (matchesSelector(e.target as HTMLElement, ':focus-visible') !== false) {
+			isFocusVisible.value = true
+		}
+	}
+	const handleBlur = () => {
+		isFocused.value = false
+		isFocusVisible.value = false
+	}
+	const handleClickLabel = (e: Event) => {
+		emits('click:label', e)
+	}
+	const handleInput = (e: Event) => {
+		if (!isInteractive.value) return
+
+		if (props.readonly && group) {
+			nextTick(() => group.forceUpdate())
+		}
+		model.value = (e.target as HTMLInputElement).checked
+	}
+
+	const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
+
+	const rippleProp = computed(() => {
+		if (props.ripple) {
+			return [!props.disabled && !props.readonly, null, ['center', 'circle']]
+		}
+
+		return [false, null, ['center', 'circle']]
+	})
+
+	// CLASS & STYLES
+
+	const selectionControlStyles = computed(() => {
+		return [
+			textColorStyles.value,
+			backgroundColorStyles.value,
+			props.style
+		] as StyleValue
+	})
+	const selectionControlClasses = computed(() => {
+		return [
+			'foxy-selection-control',
+			{
+				'foxy-selection-control--dirty': model.value,
+				'foxy-selection-control--disabled': props.disabled,
+				'foxy-selection-control--error': props.error,
+				'foxy-selection-control--focused': isFocused.value,
+				'foxy-selection-control--focus-visible': isFocusVisible.value,
+				'foxy-selection-control--inline': props.inline
+			},
+			densityClasses.value,
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose(forwardRefs({filterProps}, inputRef))
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-selection-control {
+		$this: &;
+
+		align-items: center;
+		contain: layout;
+		display: flex;
+		flex: 1 0;
+		grid-area: control;
+		position: relative;
+		user-select: none;
+
+		.foxy-label {
+			white-space: normal;
+			word-break: break-word;
+			height: 100%;
+		}
+
+		&__wrapper {
+			width: calc(40px + 1.5 * var(--foxy-selection-control--density));
+			height: calc(40px + 1.5 * var(--foxy-selection-control--density));
+			display: inline-flex;
+			align-items: center;
+			position: relative;
+			justify-content: center;
+			flex: none;
+		}
+
+		&__input {
+			width: calc(40px + 1.5 * var(--foxy-selection-control--density));
+			height: calc(40px + 1.5 * var(--foxy-selection-control--density));
+			align-items: center;
+			display: flex;
+			flex: none;
+			justify-content: center;
+			position: relative;
+			border-radius: 50%;
+
+			> .foxy-icon {
+				opacity: 0.7;
+			}
+
+			:deep(input) {
+				cursor: pointer;
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				opacity: 0;
+			}
+
+			&:before {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 100%;
+				background-color: currentColor;
+				opacity: 0;
+				pointer-events: none;
+			}
+
+			&:hover {
+				&:before {
+					opacity: 0.04;
+				}
+			}
+		}
+
+		&--disabled,
+		&--dirty,
+		&--error {
+			#{$this}__input {
+				> .foxy-icon {
+					opacity: 1;
+				}
+			}
+		}
+
+		&--error,
+		&--disabled {
+			.foxy-label {
+				opacity: 1;
+			}
+		}
+
+		&--disabled {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+
+		&--error {
+			:not(#{$this}--disabled) {
+				.foxy-label {
+					color: rgba(255, 0, 0, 1);
+				}
+
+				#{$this}__input {
+					> .foxy-icon {
+						color: rgba(255, 0, 0, 1);
+					}
+				}
+			}
+		}
+
+		&--inline {
+			display: inline-flex;
+			flex: 0 0 auto;
+			min-width: 0;
+			max-width: 100%;
+
+			.foxy-label {
+				width: auto;
+			}
+		}
+
+		&--focus-visible {
+			#{$this}__input {
+				&:before {
+					opacity: calc(0.12 * 1);
+				}
+			}
+		}
+
+		&--density-default {
+			--foxy-selection-control--density: 0px;
+		}
+
+		&--density-compact {
+			--foxy-selection-control--density: -8px;
+		}
+	}
+</style>
+
+<style>
+	:root {
+
+	}
+</style>

package/dist/src/components/SelectionControl/FoxySelectionControlGroup.cy.cjs

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

package/dist/src/components/SelectionControl/FoxySelectionControlGroup.cy.d.ts

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

package/dist/src/components/SelectionControl/FoxySelectionControlGroup.cy.js

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

package/dist/src/components/SelectionControl/FoxySelectionControlGroup.vue

@@ -0,0 +1,100 @@
+<template>
+	<div
+			:id="name"
+			:class="selectionControlGroupClasses"
+			:style="selectionControlGroupStyles"
+	>
+		<slot
+				name="default"
+				v-bind="{items}"
+		>
+			<template
+					v-for="(item, index) in items"
+					:key="index"
+			>
+				<slot
+						:name="`item.${index}`"
+						v-bind="{item}"
+				>
+					<slot
+							name="item"
+							v-bind="{item}"
+					/>
+				</slot>
+			</template>
+		</slot>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { useProps, useVModel } from '@foxy/composables'
+
+	import { FOXY_SELECTION_CONTROL_GROUP_KEY } from '@foxy/consts'
+
+	import { DENSITY } from '@foxy/enums'
+
+	import type { ISelectionControlGroupProps } from "@foxy/interfaces"
+
+	import { getUid } from '@foxy/utils'
+
+	import { computed, onScopeDispose, provide, StyleValue } from 'vue'
+
+	const props = withDefaults(defineProps<ISelectionControlGroupProps>(), {
+		tag: 'div',
+		density: DENSITY.DEFAULT,
+		items: () => []
+	})
+
+	defineEmits(['update:modelValue'])
+
+	const {filterProps} = useProps<ISelectionControlGroupProps>(props)
+
+	const modelValue = useVModel(props, 'modelValue')
+	const uid = getUid()
+	const id = computed(() => {
+		return props.id || `foxy-selection-control-group-${uid}`
+	})
+	const name = computed(() => {
+		return props.name || id.value
+	})
+
+	const updateHandlers = new Set<() => void>()
+
+	provide(FOXY_SELECTION_CONTROL_GROUP_KEY, {
+		modelValue,
+		forceUpdate: () => {
+			updateHandlers.forEach(fn => fn())
+		},
+		onForceUpdate: (cb) => {
+			updateHandlers.add(cb)
+
+			onScopeDispose(() => {
+				updateHandlers.delete(cb)
+			})
+		}
+	})
+
+	// CLASS & STYLES
+
+	const selectionControlGroupStyles = computed(() => {
+		return [
+			props.style
+		] as StyleValue
+	})
+	const selectionControlGroupClasses = computed(() => {
+		return [
+			'foxy-selection-control-group',
+			{'foxy-selection-control-group--inline': props.inline},
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>

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

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

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

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

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

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

package/dist/src/components/Sheet/FoxySheet.cy.cjs

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

package/dist/src/components/Sheet/FoxySheet.cy.d.ts

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

package/dist/src/components/Sheet/FoxySheet.cy.js

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

package/dist/src/components/Sheet/FoxySheet.vue

@@ -0,0 +1,192 @@
+<template>
+	<component
+			:is="tag"
+			:class="sheetClasses"
+			:style="sheetStyles"
+	>
+		<slot name="default"/>
+	</component>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import {
+		useBorder,
+		useBothColor,
+		useDimension,
+		useElevation,
+		useLocation,
+		useMargin,
+		usePadding,
+		usePosition,
+		useProps,
+		useRounded
+	} from '@foxy/composables'
+
+	import type { ISheetProps } from "@foxy/interfaces"
+
+	import { computed, StyleValue, toRef } from 'vue'
+
+	const props = withDefaults(defineProps<ISheetProps>(), {tag: 'div'})
+
+	const {filterProps} = useProps<ISheetProps>(props)
+
+	const {colorStyles} = useBothColor(toRef(props, 'bgColor'), toRef(props, 'color'))
+	const {borderClasses, borderStyles} = useBorder(props)
+	const {dimensionStyles} = useDimension(props)
+	const {elevationClasses} = useElevation(props)
+	const {locationStyles} = useLocation(props)
+	const {positionClasses} = usePosition(props)
+	const {roundedClasses, roundedStyles} = useRounded(props)
+	const {paddingClasses, paddingStyles} = usePadding(props)
+	const {marginClasses, marginStyles} = useMargin(props)
+
+	// CLASS & STYLES
+
+	const sheetStyles = computed(() => {
+		return [
+			dimensionStyles.value,
+			locationStyles.value,
+			roundedStyles.value,
+			borderStyles.value,
+			paddingStyles.value,
+			marginStyles.value,
+			colorStyles.value,
+			props.style
+		] as StyleValue
+	})
+	const sheetClasses = computed(() => {
+		return [
+			'foxy-sheet',
+			elevationClasses.value,
+			positionClasses.value,
+			borderClasses.value,
+			paddingClasses.value,
+			marginClasses.value,
+			roundedClasses.value,
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-sheet {
+		position: var(--foxy-sheet---position);
+		display: var(--foxy-sheet---display);
+		box-sizing: var(--foxy-sheet---box-sizing);
+
+		border-color: var(--foxy-sheet---border-color);
+		border-style: var(--foxy-sheet---border-style);
+		border-width: var(--foxy-sheet---border-width);
+		border-radius: var(--foxy-sheet---border-radius);
+
+		width: var(--foxy-sheet---width);
+		max-width: var(--foxy-sheet---max-width);
+		min-width: var(--foxy-sheet---min-width);
+		height: var(--foxy-sheet---height);
+		max-height: var(--foxy-sheet---max-height);
+		min-height: var(--foxy-sheet---min-height);
+
+		padding-block-start: var(--foxy-sheet---padding-block-start);
+		padding-block-end: var(--foxy-sheet---padding-block-end);
+		padding-inline-start: var(--foxy-sheet---padding-inline-start);
+		padding-inline-end: var(--foxy-sheet---padding-inline-end);
+
+		margin-block-start: var(--foxy-sheet---margin-block-start);
+		margin-block-end: var(--foxy-sheet---margin-block-end);
+		margin-inline-start: var(--foxy-sheet---margin-inline-start);
+		margin-inline-end: var(--foxy-sheet---margin-inline-end);
+
+		background: var(--foxy-sheet---background);
+		box-shadow: var(--foxy-sheet---box-shadow);
+		color: var(--foxy-sheet---color);
+
+		&--border {
+			border-width: var(--foxy-sheet--border---border-width);
+			box-shadow: var(--foxy-sheet--border---box-shadow);
+		}
+
+		&--rounded {
+			border-radius: var(--foxy-sheet--rounded---border-radius);
+		}
+
+		&--absolute {
+			--foxy-sheet---position: absolute;
+		}
+
+		&--fixed {
+			--foxy-sheet---position: fixed;
+		}
+
+		&--relative {
+			--foxy-sheet---position: relative;
+		}
+
+		&--sticky {
+			--foxy-sheet---position: sticky;
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--foxy-sheet---position: relative;
+		--foxy-sheet---display: block;
+		--foxy-sheet---box-sizing: border-box;
+
+		--foxy-sheet---border-top-width: 0;
+		--foxy-sheet---border-left-width: 0;
+		--foxy-sheet---border-bottom-width: 0;
+		--foxy-sheet---border-right-width: 0;
+		--foxy-sheet---border-width: var(--foxy-sheet---border-top-width) var(--foxy-sheet---border-left-width) var(--foxy-sheet---border-bottom-width) var(--foxy-sheet---border-right-width);
+		--foxy-sheet---border-color: rgba(0, 0, 0, 0.87);
+		--foxy-sheet---border-style: solid;
+
+		--foxy-sheet---border-start-start-radius: 0;
+		--foxy-sheet---border-start-end-radius: 0;
+		--foxy-sheet---border-end-start-radius: 0;
+		--foxy-sheet---border-end-end-radius: 0;
+		--foxy-sheet---border-radius: var(--foxy-sheet---border-start-start-radius) var(--foxy-sheet---border-start-end-radius) var(--foxy-sheet---border-end-start-radius) var(--foxy-sheet---border-end-end-radius);
+
+		--foxy-sheet---color: rgba(0, 0, 0, 0.87);
+		--foxy-sheet---box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+		--foxy-sheet---background: rgb(255, 255, 255);
+
+		--foxy-sheet---width: 100%;
+		--foxy-sheet---max-width: 100%;
+		--foxy-sheet---min-width: 0;
+		--foxy-sheet---height: 100%;
+		--foxy-sheet---max-height: 100%;
+		--foxy-sheet---min-height: 0;
+
+		--foxy-sheet---padding-block-start: 0;
+		--foxy-sheet---padding-block-end: 0;
+		--foxy-sheet---padding-inline-start: 0;
+		--foxy-sheet---padding-inline-end: 0;
+
+		--foxy-sheet---margin-block-start: 0;
+		--foxy-sheet---margin-block-end: 0;
+		--foxy-sheet---margin-inline-end: 0;
+		--foxy-sheet---margin-inline-start: 0;
+
+		--foxy-sheet--border---border-top-width: thin;
+		--foxy-sheet--border---border-left-width: thin;
+		--foxy-sheet--border---border-bottom-width: thin;
+		--foxy-sheet--border---border-right-width: thin;
+		--foxy-sheet--border---border-width: var(--foxy-sheet---border-top-width) var(--foxy-sheet---border-left-width) var(--foxy-sheet---border-bottom-width) var(--foxy-sheet---border-right-width);
+		--foxy-sheet--border---box-shadow: none;
+
+		--foxy-sheet--rounded---border-radius: 4px;
+	}
+</style>