origam 0.1.0

package/dist/src/components/Overlay/FoxyOverlay.vue

@@ -0,0 +1,354 @@
+<template>
+	<slot
+			name="activator"
+			v-bind="activatorProps"
+	/>
+	<template v-if="isMounted && hasContent">
+		<teleport
+				:disabled="!teleportTarget"
+				:to="teleportTarget"
+		>
+			<div
+					ref="root"
+					:class="overlayClasses"
+					:style="overlayStyles"
+					v-bind="{ ...scopeId, ...$attrs }"
+			>
+				<foxy-overlay-scrim
+						ref="scrimEl"
+						:active="isActive && !!scrim"
+						:scrim="scrim"
+						v-bind="{...scrimEvents, ...scrimColor}"
+				/>
+				<foxy-transition
+						:target="target"
+						:transition="transition"
+						appear
+						persisted
+						@after-leave="handleAfterLeave"
+				>
+					<div
+							v-show="isActive"
+							ref="contentEl"
+							v-click-outside="{ handler: handleClickOutside, closeConditional, include: () => [activatorEl] }"
+							:class="overlayContentClasses"
+							:style="overlayContentStyles"
+							v-bind="{ ...contentEvents, ...contentProps }"
+					>
+						<slot
+								name="default"
+								v-bind="{isActive}"
+						/>
+					</div>
+				</foxy-transition>
+			</div>
+		</Teleport>
+	</template>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyFade, FoxyOverlayScrim, FoxyTransition } from '@foxy/components'
+
+	import {
+		useActivator,
+		useBackButton,
+		useBackgroundColor,
+		useDimension,
+		useHydration,
+		useLazy,
+		useLocationStrategies,
+		useProps,
+		useRouter,
+		useRtl,
+		useScopeId,
+		useScrollStrategies,
+		useStack,
+		useTeleport,
+		useToggleScope,
+		useVModel
+	} from '@foxy/composables'
+
+	import { IN_BROWSER } from '@foxy/consts'
+
+	import { vClickOutside } from '@foxy/directives'
+
+	import { BLOCK, EASING, KEYBOARD_VALUES, LOCATION_STRATEGIES, SCROLL_STRATEGIES } from '@foxy/enums'
+
+	import type { IOverlayProps } from '@foxy/interfaces'
+
+	import type { TFoxyOverlayScrim, TTransitionProps } from "@foxy/types"
+
+	import { animate, convertToUnit, getScrollParent } from '@foxy/utils'
+
+	import { computed, mergeProps, onBeforeUnmount, ref, StyleValue, toRef, watch } from 'vue'
+
+	const props = withDefaults(defineProps<IOverlayProps>(), {
+		scrim: true,
+		zIndex: 2000,
+		closeOnBack: true,
+		locationStrategy: LOCATION_STRATEGIES.STATIC,
+		location: BLOCK.BOTTOM,
+		origin: 'auto',
+		scrollStrategy: SCROLL_STRATEGIES.BLOCK,
+		transition: () => ({component: FoxyFade}) as unknown as TTransitionProps
+	})
+
+	const emits = defineEmits(['click:outside', 'update:modelValue', 'afterEnter', 'afterLeave', 'keydown'])
+
+	const {filterProps} = useProps<IOverlayProps>(props)
+
+	const model = useVModel(props, 'modelValue')
+	const isActive = computed({
+		get: () => model.value,
+		set: v => {
+			if (!(v && props.disabled)) model.value = v
+		}
+	})
+	const {teleportTarget} = useTeleport(computed(() => props.attach || props.contained))
+	const {hasContent, onAfterLeave} = useLazy(props, isActive)
+	const {globalTop, localTop, stackStyles} = useStack(isActive, toRef(props, 'zIndex'), props.disableGlobalStack)
+	const {
+		activatorEl,
+		activatorRef,
+		target,
+		targetEl,
+		targetRef,
+		activatorEvents,
+		contentEvents,
+		scrimEvents
+	} = useActivator(props, {isActive, isTop: localTop})
+	const {dimensionStyles} = useDimension(props)
+	const isMounted = useHydration()
+	const {scopeId} = useScopeId()
+	const {rtlClasses} = useRtl()
+
+	watch(() => props.disabled, (v) => {
+		if (v) isActive.value = false
+	})
+
+	const root = ref<HTMLElement>()
+	const contentEl = ref<HTMLElement>()
+	const scrimEl = ref<TFoxyOverlayScrim>()
+	const {contentStyles, updateLocation} = useLocationStrategies(props, {
+		contentEl,
+		target,
+		isActive
+	})
+	const overlayContentStyles = computed(() => {
+		return [
+			dimensionStyles.value,
+			contentStyles.value
+		]
+	})
+	const overlayContentClasses = computed(() => {
+		return [
+			'foxy-overlay__content',
+			props.contentClass
+		]
+	})
+	useScrollStrategies(props, {
+		root,
+		contentEl,
+		targetEl,
+		isActive,
+		updateLocation
+	})
+
+	// CLICK OUTSIDE
+
+	const handleClickOutside = (e: MouseEvent) => {
+		emits('click:outside', e)
+
+		if (!props.persistent) isActive.value = false
+		else animateClick()
+	}
+
+	const closeConditional = () => {
+		return isActive.value && globalTop.value
+	}
+
+	// KEYDOWN EVENT
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key === KEYBOARD_VALUES.ESC && globalTop.value) {
+			if (!props.persistent) {
+				isActive.value = false
+				if (contentEl.value?.contains(document.activeElement)) {
+					activatorEl.value?.focus()
+				}
+			} else animateClick()
+		}
+	}
+
+	if (IN_BROWSER) {
+		watch(isActive, val => {
+			if (val) {
+				window.addEventListener('keydown', handleKeydown)
+			} else {
+				window.removeEventListener('keydown', handleKeydown)
+			}
+		}, {immediate: true})
+	}
+
+	onBeforeUnmount(() => {
+		if (!IN_BROWSER) return
+
+		window.removeEventListener('keydown', handleKeydown)
+	})
+
+	// LEAVING
+
+	const router = useRouter()
+	useToggleScope(() => props.closeOnBack, () => {
+		useBackButton(router, (next) => {
+			if (globalTop.value && isActive.value) {
+				next(false)
+				if (!props.persistent) isActive.value = false
+				else animateClick()
+			} else {
+				next()
+			}
+		})
+	})
+
+	const top = ref<number>()
+	watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, (val) => {
+		if (val) {
+			const scrollParent = getScrollParent(root.value)
+			if (scrollParent && scrollParent !== document.scrollingElement) {
+				top.value = scrollParent.scrollTop
+			}
+		}
+	})
+
+	// Add a quick "bounce" animation to the content
+	const animateClick = () => {
+		if (props.noClickAnimation) return
+
+		if (contentEl.value) {
+			animate(contentEl.value, [
+				{transformOrigin: 'center'},
+				{transform: 'scale(1.03)'},
+				{transformOrigin: 'center'}
+			], {
+				duration: 150,
+				easing: EASING.STANDARD
+			})
+		}
+	}
+
+	const handleAfterLeave = () => {
+		onAfterLeave()
+		emits('afterLeave')
+	}
+
+	// SCRIM
+
+	const scrimColor = useBackgroundColor(computed(() => {
+		return typeof props.scrim === 'string' ? props.scrim : null
+	}))
+
+	// ACTIVATOR
+
+	const activatorProps = computed(() => {
+		return {
+			isActive: isActive.value,
+			props: mergeProps({ref: activatorRef, targetRef}, activatorEvents.value, props.activatorProps)
+		}
+	})
+
+	// CLASS & STYLES
+
+	const overlayStyles = computed(() => {
+		return [
+			stackStyles.value,
+			{top: convertToUnit(top.value)},
+			props.style
+		] as StyleValue
+	})
+	const overlayClasses = computed(() => {
+		return [
+			'foxy-overlay',
+			{
+				'foxy-overlay--absolute': props.absolute || props.contained,
+				'foxy-overlay--active': isActive.value,
+				'foxy-overlay--contained': props.contained
+			},
+			rtlClasses.value,
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		activatorEl,
+		scrimEl,
+		target,
+		animateClick,
+		contentEl,
+		globalTop,
+		localTop,
+		updateLocation,
+		filterProps
+	})
+
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-overlay {
+		$this: &;
+
+		border-radius: inherit;
+		display: flex;
+		left: 0;
+		pointer-events: none;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+
+		&__content {
+			outline: none;
+			position: absolute;
+			pointer-events: auto;
+			contain: layout;
+		}
+
+		&__scrim {
+			pointer-events: auto;
+			background: rgb(255, 255, 255);
+			border-radius: inherit;
+			bottom: 0;
+			left: 0;
+			opacity: 0.32;
+			position: fixed;
+			right: 0;
+			top: 0;
+		}
+
+		&--absolute {
+			position: absolute;
+		}
+
+		&--contained {
+			#{$this}__scrim {
+				position: absolute;
+			}
+		}
+
+		&--scroll-blocked {
+			padding-inline-end: 0px;
+		}
+	}
+</style>
+
+<style>
+
+</style>

package/dist/src/components/Overlay/FoxyOverlayScrim.vue

@@ -0,0 +1,68 @@
+<template>
+	<foxy-transition :transition="transition">
+		<div
+				v-if="active"
+				:class="scrimClasses"
+				:style="scrimStyles"
+				v-bind="$attrs"
+				@click="handleClick"
+				@mouseenter="handleMouseenter"
+				@mouseleave="handleMouseleave"
+		/>
+	</foxy-transition>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyFade, FoxyTransition } from '@foxy/components'
+	import { useBackgroundColor, useProps } from '@foxy/composables'
+	import type { IOverlayScrimProps } from '@foxy/interfaces'
+	import type { TTransitionProps } from "@foxy/types"
+
+	import { computed, StyleValue } from 'vue'
+
+	const props = withDefaults(defineProps<IOverlayScrimProps>(), {
+		transition: () => ({component: FoxyFade}) as unknown as TTransitionProps
+	})
+
+	const emits = defineEmits(['click', 'mouseenter', 'mouseleave'])
+
+	const {filterProps} = useProps<IOverlayScrimProps>(props)
+
+	const {backgroundColorStyles} = useBackgroundColor(computed(() => {
+		return typeof props.scrim === 'string' ? props.scrim : null
+	}))
+
+	const handleClick = (e: Event) => {
+		emits('click', e)
+	}
+	const handleMouseenter = (e: MouseEvent) => {
+		emits('mouseenter', e)
+	}
+	const handleMouseleave = (e: MouseEvent) => {
+		emits('mouseleave', e)
+	}
+
+	// CLASS & STYLES
+
+	const scrimStyles = computed(() => {
+		return [
+			backgroundColorStyles.value,
+			props.style
+		] as StyleValue
+	})
+	const scrimClasses = computed(() => {
+		return [
+			'foxy-scrim',
+			props.class
+		]
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>

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

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

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

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

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

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

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

@@ -0,0 +1,263 @@
+<template>
+	<div class="foxy-css-box">
+		<div class="foxy-css-box__wrapper">
+			<div class="foxy-css-box__header">
+				<foxy-title
+						class="foxy-css-box__title"
+						tag="h3"
+				>CSS box
+				</foxy-title>
+			</div>
+
+			<div class="foxy-css-box__content">
+				<div class="foxy-css-box__box foxy-css-box__box--margin">
+					<foxy-label
+							class="foxy-css-box__label"
+							color="#2c2c2c"
+							text="Margin"
+					/>
+
+					<input
+							v-model="margin.top"
+							class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--top"
+							placeholder="-"
+							type="number"
+					/>
+					<input
+							v-model="margin.right"
+							class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--right"
+							placeholder="-"
+							type="number"
+					/>
+					<input
+							v-model="margin.bottom"
+							class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--bottom"
+							placeholder="-"
+							type="number"
+					/>
+					<input
+							v-model="margin.left"
+							class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--left"
+							placeholder="-"
+							type="number"
+					/>
+
+					<div class="foxy-css-box__box foxy-css-box__box--border">
+						<foxy-label
+								class="foxy-css-box__label"
+								color="#2c2c2c"
+								text="Border"
+						/>
+
+						<input
+								v-model="border.top"
+								class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--top"
+								placeholder="-"
+								type="number"
+						/>
+						<input
+								v-model="border.right"
+								class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--right"
+								placeholder="-"
+								type="number"
+						/>
+						<input
+								v-model="border.bottom"
+								class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--bottom"
+								placeholder="-"
+								type="number"
+						/>
+						<input
+								v-model="border.left"
+								class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--left"
+								placeholder="-"
+								type="number"
+						/>
+
+						<div class="foxy-css-box__box foxy-css-box__box--padding">
+							<foxy-label
+									class="foxy-css-box__label"
+									color="#2c2c2c"
+									text="Padding"
+							/>
+
+							<input
+									v-model="padding.top"
+									class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--top"
+									placeholder="-"
+									type="number"
+							/>
+							<input
+									v-model="padding.right"
+									class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--right"
+									placeholder="-"
+									type="number"
+							/>
+							<input
+									v-model="padding.bottom"
+									class="foxy-css-box__input foxy-css-box__input--block foxy-css-box__input--bottom"
+									placeholder="-"
+									type="number"
+							/>
+							<input
+									v-model="padding.left"
+									class="foxy-css-box__input foxy-css-box__input--inline foxy-css-box__input--left"
+									placeholder="-"
+									type="number"
+							/>
+
+							<div class="foxy-css-box__text"/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script
+		lang="ts"
+		setup
+>
+	import { FoxyLabel, FoxyTitle } from '@foxy/components'
+	import { useProps } from "@foxy/composables"
+
+	import type { ICssBoxProps } from '@foxy/interfaces'
+
+	import { shallowRef, watch } from 'vue'
+
+	// TODO - WIP
+
+	const props = withDefaults(defineProps<ICssBoxProps>(), {})
+
+	defineEmits(['update:padding', 'update:margin', 'update:border'])
+
+	const {filterProps} = useProps<ICssBoxProps>(props)
+
+	const margin = shallowRef({
+		top: '',
+		right: '',
+		bottom: '',
+		left: ''
+	})
+	const border = shallowRef({
+		top: '',
+		right: '',
+		bottom: '',
+		left: ''
+	})
+	const padding = shallowRef({
+		top: '',
+		right: '',
+		bottom: '',
+		left: ''
+	})
+
+	watch(() => props, () => {
+
+	})
+
+	// EXPOSE
+
+	defineExpose({
+		filterProps
+	})
+</script>
+
+<style
+		lang="scss"
+		scoped
+>
+	.foxy-css-box {
+		&__box {
+			padding: 44px;
+			position: relative;
+
+			&--margin {
+				background-color: #ffffff;
+				border: 1px dashed #bababa;
+				margin: 1px;
+			}
+
+			&--border {
+				background-color: #f6f6f6;
+				border: 1px dashed #d7d7d7;
+			}
+
+			&--padding {
+				background-color: #ebebeb;
+				border: 1px dashed #bababa;
+			}
+		}
+
+		&__label {
+			font-size: 9px;
+			line-height: 9px;
+
+			position: absolute;
+			top: 6px;
+			left: 5px;
+
+			margin: 0;
+			padding: 0;
+		}
+
+		&__input {
+			font-size: 11px;
+			line-height: 11px;
+			text-align: center;
+
+			position: absolute;
+
+			padding: 3px 0;
+			margin: 0;
+
+			height: 24px;
+			width: 34px;
+
+			border: 1px solid #bdbdbd;
+
+			&--block {
+				left: 50%;
+				transform: translateX(-50%);
+			}
+
+			&--inline {
+				top: 50%;
+				transform: translateY(-50%);
+			}
+
+			&--top {
+				top: 6px;
+
+			}
+
+			&--right {
+				right: 4px;
+			}
+
+			&--bottom {
+				bottom: 6px;
+			}
+
+			&--left {
+				left: 6px;
+			}
+		}
+
+		&__text {
+			text-align: center;
+			font-size: 10px;
+			line-height: 11px;
+			border: 1px solid #bababa;
+			height: 50px;
+			background-color: #8c8c8c;
+		}
+	}
+</style>
+
+<style>
+	:root {
+
+	}
+</style>