origam 0.2.0 → 0.3.2

package/dist/src/components/Transition/FoxyTransition.vue

@@ -1,51 +0,0 @@
-<template>
-	<component
-			:is="component"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { FoxyFade } from '@foxy/components'
-	import { useProps, useTransition } from '@foxy/composables'
-	import type { ITransitionComponentProps } from '@foxy/interfaces'
-	import type { TTransitionProps } from '@foxy/types'
-
-	import { omit } from '@foxy/utils'
-
-	import { computed, mergeProps, Transition, useAttrs } from 'vue'
-
-	const props = withDefaults(defineProps<ITransitionComponentProps>(), {
-		transition: () => ({component: FoxyFade}) as unknown as TTransitionProps
-	})
-
-	const {filterProps} = useProps<ITransitionComponentProps>(props)
-
-	const attrs = useAttrs()
-	const {isDisabled} = useTransition(props)
-
-	const component = computed(() => {
-		return typeof props.transition === 'object' && props.transition.component ? props.transition.component : Transition
-	})
-	const customProps = computed(() => {
-		return typeof props.transition === 'object' ? omit(props.transition, ['component']) : {}
-	})
-	const transitionProps = computed(() => {
-		return mergeProps(
-				typeof props.transition === 'string' ? {name: isDisabled.value ? '' : props.transition} : {...customProps.value},
-				{...attrs},
-				{disabled: isDisabled.value})
-	})
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-
-</script>

package/dist/src/components/Transition/FoxyTranslateBottom.vue

@@ -1,56 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useCssTransition, useProps } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--translate-bottom'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useCssTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--translate-bottom {
-		&-enter-active {
-			transition-duration: 225ms;
-			transition-timing-function: cubic-bezier(0.0, 0, 0.2, 1);
-		}
-
-		&-leave-active {
-			transition-duration: 125ms;
-			transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-		}
-
-		&-enter-active,
-		&-leave-active {
-			transition-property: transform, opacity;
-			pointer-events: none;
-		}
-
-		&-enter-from, &-leave-to {
-			transform: translateY(calc(50vh + 50%));
-		}
-	}
-</style>

package/dist/src/components/Transition/FoxyTranslatePicker.vue

@@ -1,76 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useCssTransition, useProps } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--translate-picker'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useCssTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--translate-picker {
-		&-enter-active {
-			transition-duration: 0.3s !important;
-			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-		}
-
-		&-leave-active {
-			transition-duration: 0.3s !important;
-			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-		}
-
-		&-move {
-			transition-duration: 0.3s !important;
-			transition-property: transform !important;
-			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-		}
-
-		&-enter-from,
-		&-leave-to {
-			opacity: 0;
-		}
-
-		&-leave-from,
-		&-leave-active,
-		&-leave-to {
-			position: absolute !important;
-		}
-
-		&-enter-active,
-		&-leave-active {
-			transition-property: transform, opacity !important;
-		}
-
-		&-enter-from {
-			transform: translate(100%, 0);
-		}
-
-		&-leave-to {
-			transform: translate(-100%, 0);
-		}
-	}
-</style>

package/dist/src/components/Transition/FoxyTranslateScale.vue

@@ -1,147 +0,0 @@
-<template>
-	<transition
-			:name="name"
-			v-bind="{...events, css: !hasTarget}"
-	>
-		<slot name="default"/>
-	</transition>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps } from "@foxy/composables"
-	import { EASING, TRANSITION_MODE } from '@foxy/enums'
-
-	import type { ITranslateScaleProps } from '@foxy/interfaces'
-
-	import { animate, getChildren, getDimensions } from '@foxy/utils'
-
-	import { computed } from 'vue'
-
-	const props = withDefaults(defineProps<ITranslateScaleProps>(), {
-		name: 'foxy-transition--transform-scale',
-		mode: TRANSITION_MODE.IN_OUT
-	})
-
-	const {filterProps} = useProps<ITranslateScaleProps>(props)
-
-	const hasTarget = computed(() => {
-		return !!props.target
-	})
-
-	const handleBeforeEnter = (el: Element) => {
-		(el as HTMLElement).style.pointerEvents = 'none'
-		;(el as HTMLElement).style.visibility = 'hidden'
-	}
-	const handleEnter = async (el: Element, done: () => void) => {
-		await new Promise(resolve => requestAnimationFrame(resolve))
-		await new Promise(resolve => requestAnimationFrame(resolve))
-		;(el as HTMLElement).style.visibility = ''
-
-		const {x, y, sx, sy, speed} = getDimensions(props.target!, el as HTMLElement)
-
-		const animation = animate(el, [
-			{transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0},
-			{}
-		], {
-			duration: 225 * speed,
-			easing: EASING.DECELERATE
-		})
-		getChildren(el)?.forEach((el) => {
-			animate(el, [
-				{opacity: 0},
-				{opacity: 0, offset: 0.33},
-				{}
-			], {
-				duration: 225 * 2 * speed,
-				easing: EASING.STANDARD
-			})
-		})
-		animation.finished.then(() => done())
-	}
-	const handleAfterEnter = (el: Element) => {
-		(el as HTMLElement).style.removeProperty('pointer-events')
-	}
-	const handleBeforeLeave = (el: Element) => {
-		(el as HTMLElement).style.pointerEvents = 'none'
-	}
-	const handleLeave = async (el: Element, done: () => void) => {
-		await new Promise(resolve => requestAnimationFrame(resolve))
-
-		const {x, y, sx, sy, speed} = getDimensions(props.target!, el as HTMLElement)
-
-		const animation = animate(el, [
-			{},
-			{transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`, opacity: 0}
-		], {
-			duration: 125 * speed,
-			easing: EASING.ACCELERATE
-		})
-		animation.finished.then(() => done())
-		getChildren(el)?.forEach(el => {
-			animate(el, [
-				{},
-				{opacity: 0, offset: 0.2},
-				{opacity: 0}
-			], {
-				duration: 125 * 2 * speed,
-				easing: EASING.STANDARD
-			})
-		})
-	}
-	const handleAfterLeave = (el: Element) => {
-		(el as HTMLElement).style.removeProperty('pointer-events')
-	}
-
-	const events = computed(() => {
-		if (hasTarget.value) {
-			return {
-				onBeforeEnter: handleBeforeEnter,
-				onEnter: handleEnter,
-				onAfterEnter: handleAfterEnter,
-				onBeforeLeave: handleBeforeLeave,
-				onLeave: handleLeave,
-				onAfterLeave: handleAfterLeave
-			}
-		}
-
-		return {}
-	})
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--transform-scale {
-		&-enter-active {
-			transition-duration: 225ms;
-			transition-timing-function: cubic-bezier(0.0, 0, 0.2, 1);
-		}
-
-		&-leave-active {
-			transition-duration: 125ms;
-			transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-		}
-
-		&-enter-active,
-		&-leave-active {
-			transition-property: transform, opacity;
-			pointer-events: none;
-		}
-
-		&-enter-from, &-leave-to {
-			transform: scale(0.9);
-			opacity: 0;
-		}
-
-		&-enter-to, &-leave-from {
-			opacity: 1;
-		}
-	}
-</style>

package/dist/src/components/Transition/FoxyWindowXReverseTranslate.vue

@@ -1,57 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps, useWindowTransition } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--window-x-reverse-translate'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useWindowTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--window-x-reverse-translate {
-		&-enter-active,
-		&-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		}
-
-		&-leave-from,
-		&-leave-to {
-			position: absolute !important;
-			top: 0;
-			width: 100%;
-		}
-
-		&-enter-from {
-			transform: translateX(-100%);
-		}
-
-		&-leave-to {
-			transform: translateX(100%);
-		}
-
-	}
-</style>

package/dist/src/components/Transition/FoxyWindowXTranslate.vue

@@ -1,57 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps, useWindowTransition } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--window-x-translate'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useWindowTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--window-x-translate {
-		&-enter-active,
-		&-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		}
-
-		&-leave-from,
-		&-leave-to {
-			position: absolute !important;
-			top: 0;
-			width: 100%;
-		}
-
-		&-enter-from {
-			transform: translateX(100%);
-		}
-
-		&-leave-to {
-			transform: translateX(-100%);
-		}
-
-	}
-</style>

package/dist/src/components/Transition/FoxyWindowYReverseTranslate.vue

@@ -1,56 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps, useWindowTransition } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--window-y-reverse-translate'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useWindowTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--window-y-reverse-translate {
-		&-enter-active,
-		&-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		}
-
-		&-leave-from,
-		&-leave-to {
-			position: absolute !important;
-			top: 0;
-			width: 100%;
-		}
-
-		&-enter-from {
-			transform: translateY(-100%);
-		}
-
-		&-leave-to {
-			transform: translateY(100%);
-		}
-	}
-</style>

package/dist/src/components/Transition/FoxyWindowYTranslate.vue

@@ -1,56 +0,0 @@
-<template>
-	<component
-			:is="tag"
-			:name="name"
-			v-bind="transitionProps"
-	>
-		<slot name="default"/>
-	</component>
-</template>
-
-<script
-		lang="ts"
-		setup
->
-	import { useProps, useWindowTransition } from '@foxy/composables'
-
-	import type { ITransitionProps } from '@foxy/interfaces'
-
-	const props = withDefaults(defineProps<ITransitionProps>(), {
-		name: 'foxy-transition--window-y-translate'
-	})
-
-	const {filterProps} = useProps<ITransitionProps>(props)
-
-	const {name, tag, transitionProps} = useWindowTransition(props)
-
-	// EXPOSE
-
-	defineExpose({
-		filterProps
-	})
-</script>
-
-<style lang="scss">
-	.foxy-transition--window-y-translate {
-		&-enter-active,
-		&-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-		}
-
-		&-leave-from,
-		&-leave-to {
-			position: absolute !important;
-			top: 0;
-			width: 100%;
-		}
-
-		&-enter-from {
-			transform: translateY(100%);
-		}
-
-		&-leave-to {
-			transform: translateY(-100%);
-		}
-	}
-</style>

package/dist/src/components/VirtualScroll/FoxyVirtualScroll.cy.cjs

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

package/dist/src/components/VirtualScroll/FoxyVirtualScroll.cy.js

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