origam 0.2.0 → 0.3.0

package/dist/src/components/PageBuilder/FoxyEditWrapper.vue

@@ -1,80 +0,0 @@
-<template>
-	<div
-			:class="editWrapperClasses"
-			:style="editWrapperStyles"
-	>
-		<div class="foxy-edit-wrapper__wrapper">
-			<slot name="default"/>
-		</div>
-	</div>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps } from '@foxy/composables'
-	import type { IAutoPropComponentDefinition, IEditWrapperProps } from '@foxy/interfaces'
-	import { scanForAutoProps } from '@foxy/utils'
-
-	import { computed, ref, StyleValue, useSlots, watch } from 'vue'
-
-	// TODO - WIP
-
-	const props = withDefaults(defineProps<IEditWrapperProps>(), {slotName: 'default', autoDetectProps: true})
-
-	const {filterProps} = useProps<IEditWrapperProps>(props)
-
-	const slots = useSlots()
-
-	const vnodes = ref<Array<any>>([])
-
-	watch(() => props, () => {
-		if (typeof slots[props.slotName] !== "undefined") {
-			// @ts-expect-error TODO
-			vnodes.value = slots[props.slotName]()
-		}
-
-		if (slots[props.slotName] && props.autoDetectProps && vnodes) {
-			const _propsTypes: Array<IAutoPropComponentDefinition> = scanForAutoProps(vnodes.value)
-
-			console.log(_propsTypes)
-		}
-	}, {
-		immediate: true
-	})
-
-	// CLASS & STYLES
-
-	const editWrapperStyles = computed(() => {
-		return [
-			props.style
-		] as StyleValue
-	})
-	const editWrapperClasses = computed(() => {
-		return [
-			'foxy-edit-wrapper',
-			props.class
-		]
-	})
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-
-</script>
-
-<style
-		lang="scss"
-		scoped
->
-
-</style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/PageBuilder/FoxyPageBuilder.vue

@@ -1,45 +0,0 @@
-<template>
-	<foxy-layout
-			ref="pageBuilderRef"
-			:class="pageBuilderClasses"
-			:style="pageBuilderStyles"
-	>
-		<template #default>
-			<slot name="default"/>
-		</template>
-	</foxy-layout>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { FoxyLayout } from '@foxy/components'
-	import { useProps } from "@foxy/composables"
-
-	import type { ILayoutProps } from '@foxy/interfaces'
-
-	import { computed, StyleValue } from 'vue'
-
-	// TODO - WIP
-
-	const props = withDefaults(defineProps<ILayoutProps>(), {fullHeight: true})
-
-	const {filterProps} = useProps<ILayoutProps>(props)
-
-	// CLASSES & STYLES
-
-	const pageBuilderStyles = computed(() => {
-		return [props.style] as StyleValue
-	})
-	const pageBuilderClasses = computed(() => {
-		return ['foxy-page-builder', props.class]
-	})
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-
-</script>

package/dist/src/components/Pagination/FoxyPagination.cy.cjs

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

package/dist/src/components/Pagination/FoxyPagination.cy.js

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

package/dist/src/components/Pagination/FoxyPagination.vue

@@ -1,369 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			ref="resizeRef"
-			:aria-label="ariaLabel"
-			:class="paginationClasses"
-			:style="paginationStyles"
-			role="navigation"
-			@keydown="handleKeydown"
-	>
-		<ul class="foxy-pagination__list">
-			<template v-if="showFirstLastPage">
-				<li
-						key="first"
-						class="foxy-pagination__first"
-				>
-					<slot
-							name="first"
-							v-bind="{...controls.first}"
-					>
-						<foxy-btn v-bind="{...controls.first }"/>
-					</slot>
-				</li>
-			</template>
-
-			<li
-					key="prev"
-					class="foxy-pagination__prev"
-			>
-				<slot
-						name="prev"
-						v-bind="{...controls.prev}"
-				>
-					<foxy-btn v-bind="{...controls.prev }"/>
-				</slot>
-			</li>
-
-			<template
-					v-for="(item) in items"
-					:key="item.key"
-			>
-				<li
-						:class="{'foxy-pagination__item--is-active': item.isActive}"
-						class="foxy-pagination__item"
-				>
-					<slot :name="`item-${item.key}`">
-						<slot name="item">
-							<foxy-btn
-									:text="item.page.toString()"
-									v-bind="{ ...item.props }"
-							/>
-						</slot>
-					</slot>
-				</li>
-			</template>
-
-			<li
-					key="next"
-					class="foxy-pagination__next"
-			>
-				<slot
-						name="next"
-						v-bind="{...controls.next}"
-				>
-					<foxy-btn v-bind="{...controls.next }"/>
-				</slot>
-			</li>
-
-			<template v-if="showFirstLastPage">
-				<li
-						key="last"
-						class="foxy-pagination__last"
-				>
-					<slot
-							name="last"
-							v-bind="{...controls.last}"
-					>
-						<foxy-btn v-bind="{...controls.last }"/>
-					</slot>
-				</li>
-			</template>
-		</ul>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { FoxyBtn } from "@foxy/components"
-
-	import { useDisplay, useLocale, useProps, useRefs, useResizeObserver, useVModel } from "@foxy/composables"
-
-	import { KEYBOARD_VALUES, MDI_ICONS } from "@foxy/enums"
-
-	import type { IPaginationProps } from "@foxy/interfaces"
-
-	import { createRange, int } from "@foxy/utils"
-
-	import { ComponentPublicInstance, computed, nextTick, shallowRef, StyleValue } from "vue"
-
-	const props = withDefaults(defineProps<IPaginationProps>(), {
-		prevIcon: MDI_ICONS.CHEVRON_LEFT,
-		nextIcon: MDI_ICONS.CHEVRON_RIGHT,
-		firstIcon: MDI_ICONS.CHEVRON_DOUBLE_LEFT,
-		lastIcon: MDI_ICONS.CHEVRON_DOUBLE_RIGHT,
-		tag: 'div',
-		ellipsis: '...',
-		length: 1,
-		start: 1,
-		modelValue: 1, // TODO - Delete default value for modelValue
-		ariaLabel: 'foxy.pagination.ariaLabel.root',
-		pageAriaLabel: 'foxy.pagination.ariaLabel.page',
-		currentPageAriaLabel: 'foxy.pagination.ariaLabel.currentPage',
-		firstAriaLabel: 'foxy.pagination.ariaLabel.first',
-		previousAriaLabel: 'foxy.pagination.ariaLabel.previous',
-		nextAriaLabel: 'foxy.pagination.ariaLabel.next',
-		lastAriaLabel: 'foxy.pagination.ariaLabel.last'
-	})
-
-	const emits = defineEmits([
-		'update:modelValue',
-		'first',
-		'next',
-		'prev',
-		'last'
-	])
-
-	const {filterProps} = useProps<IPaginationProps>(props)
-
-	const {t} = useLocale()
-
-	const page = useVModel(props, 'modelValue', props.start)
-	const {width} = useDisplay()
-	const maxButtons = shallowRef(-1)
-
-	const {resizeRef} = useResizeObserver((entries: ResizeObserverEntry[]) => {
-		if (!entries.length) return
-
-		const {target, contentRect} = entries[0]
-
-		const firstItem = target.querySelector('.foxy-pagination__list > *') as HTMLElement
-
-		if (!firstItem) return
-
-		const totalWidth = contentRect.width
-		const itemWidth =
-				firstItem.offsetWidth +
-				parseFloat(getComputedStyle(firstItem).marginRight) * 2
-
-		maxButtons.value = getMax(totalWidth, itemWidth)
-	})
-	const {refs, updateRef} = useRefs<ComponentPublicInstance>()
-
-	const length = computed(() => {
-		return int(props.length)
-	})
-	const start = computed(() => {
-		return int(props.start)
-	})
-	const totalVisible = computed(() => {
-		if (props.totalVisible != null) {
-			return int(props.totalVisible)
-		}
-
-		if (maxButtons.value >= 0) {
-			return maxButtons.value
-		}
-
-		return getMax(width.value, 58)
-	})
-	const range = computed(() => {
-		if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return []
-
-		if (totalVisible.value <= 0) return []
-		else if (totalVisible.value === 1) return [page.value]
-
-		if (length.value <= totalVisible.value) {
-			return createRange(length.value, start.value)
-		}
-
-		const even = totalVisible.value % 2 === 0
-		const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2)
-		const left = even ? middle : middle + 1
-		const right = length.value - middle
-
-		if (left - page.value >= 0) {
-			return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value]
-		} else if (page.value - right >= (even ? 1 : 0)) {
-			const rangeLength = totalVisible.value - 1
-			const rangeStart = length.value - rangeLength + start.value
-			return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)]
-		} else {
-			const rangeLength = Math.max(1, totalVisible.value - 3)
-			const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value
-			return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value]
-		}
-	})
-	const items = computed(() => {
-		return range.value.map((item, index) => {
-			const ref = (e: any) => updateRef(e, index)
-
-			if (typeof item === 'string') {
-				return {
-					isActive: false,
-					key: `ellipsis-${index}`,
-					page: item,
-					props: {
-						ref,
-						ellipsis: true,
-						icon: true,
-						disabled: true
-					}
-				}
-			} else {
-				const isActive = item === page.value
-				return {
-					isActive,
-					key: item,
-					page: item,
-					props: {
-						ref,
-						ellipsis: false,
-						icon: true,
-						disabled: !!props.disabled || +props.length < 2,
-						color: isActive ? props.activeColor : props.color,
-						'aria-current': isActive,
-						'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
-						onClick: (e: Event) => setValue(e, item)
-					}
-				}
-			}
-		})
-	})
-	const controls = computed(() => {
-		const prevDisabled = !!props.disabled || page.value <= start.value
-		const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1
-
-		return {
-			first: {
-				icon: props.firstIcon,
-				onClick: (e: Event) => setValue(e, start.value, 'first'),
-				disabled: prevDisabled,
-				'aria-label': props.firstAriaLabel,
-				'aria-disabled': prevDisabled
-			},
-			prev: {
-				icon: props.prevIcon,
-				onClick: (e: Event) => setValue(e, page.value - 1, 'prev'),
-				disabled: prevDisabled,
-				'aria-label': props.previousAriaLabel,
-				'aria-disabled': prevDisabled
-			},
-			next: {
-				icon: props.nextIcon,
-				onClick: (e: Event) => setValue(e, page.value + 1, 'next'),
-				disabled: nextDisabled,
-				'aria-label': props.nextAriaLabel,
-				'aria-disabled': nextDisabled
-			},
-			last: {
-				icon: props.lastIcon,
-				onClick: (e: Event) => setValue(e, start.value + length.value - 1, 'last'),
-				disabled: nextDisabled,
-				'aria-label': props.lastAriaLabel,
-				'aria-disabled': nextDisabled
-			}
-		}
-	})
-
-	const getMax = (totalWidth: number, itemWidth: number) => {
-		const minButtons = props.showFirstLastPage ? 5 : 3
-		return Math.max(0, Math.floor(
-				// Round to two decimal places to avoid floating point errors
-				+((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)
-		))
-	}
-	const setValue = (e: Event, value: number, event?: any) => {
-		e.preventDefault()
-		page.value = value
-
-		if (event) {
-			emits(event, value)
-		}
-	}
-	const updateFocus = () => {
-		const currentIndex = page.value - start.value
-
-		refs.value[currentIndex]?.$el.focus()
-	}
-	const handleKeydown = (e: KeyboardEvent) => {
-		if (e.key === KEYBOARD_VALUES.LEFT && !props.disabled && page.value > +props.start) {
-			page.value = page.value - 1
-			nextTick(updateFocus)
-		} else if (e.key === KEYBOARD_VALUES.RIGHT && !props.disabled && page.value < start.value + length.value - 1) {
-			page.value = page.value + 1
-			nextTick(updateFocus)
-		}
-	}
-
-	// CLASS & STYLES
-
-	const paginationClasses = computed(() => {
-		return [
-			'foxy-pagination',
-			props.class
-		]
-	})
-	const paginationStyles = computed(() => {
-		return [
-			props.style
-		] as StyleValue
-	})
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style
-		lang="scss"
-		scoped
->
-	.foxy-pagination {
-
-		&__list {
-			display: inline-flex;
-			list-style-type: none;
-			justify-content: center;
-			width: 100%;
-		}
-
-		&__item {
-			&--is-active {
-				:deep(.foxy-btn__overlay) {
-					opacity: var(--foxy-pagination__item--is-active---border-opacity)
-				}
-			}
-		}
-
-		&__item,
-		&__first,
-		&__prev,
-		&__next,
-		&__last {
-			margin: .3rem;
-		}
-
-		:deep(.foxy-btn) {
-			border-radius: 4px;
-		}
-
-		:deep(.foxy-btn--rounded) {
-			border-radius: 50%;
-		}
-
-		:deep(.foxy-btn__overlay) {
-			transition: none;
-		}
-	}
-</style>
-
-<style>
-	:root {
-		--foxy-pagination__item--is-active---border-opacity: 0.12;
-	}
-</style>

package/dist/src/components/Parallax/FoxyParallax.cy.cjs

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

package/dist/src/components/Parallax/FoxyParallax.cy.js

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