feat: add layer components

Author: timothejoubert

components/atoms/VTransitionExpand/Default.stories.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+    <NuxtStory>
+        <VTransitionExpand />
+    </NuxtStory>
+</template>
+
+<style lang="scss" module></style>

components/atoms/VTransitionExpand/VTransitionExpand.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// @see https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
+
+function callDoneCallback(element: Element, done: () => void) {
+    const animation = element
+        .getAnimations()
+        .filter((animation) => (animation as CSSTransition).transitionProperty === 'height')[0]
+
+    if (animation) animation.finished.then(done)
+    else done()
+}
+
+function onEnter(element: Element, done: () => void) {
+    ;(element as HTMLElement).style.width = getComputedStyle(element).width
+    ;(element as HTMLElement).style.position = 'absolute'
+    ;(element as HTMLElement).style.visibility = 'hidden'
+    ;(element as HTMLElement).style.height = 'auto'
+
+    const height = getComputedStyle(element).height
+
+    ;(element as HTMLElement).style.width = ''
+    ;(element as HTMLElement).style.position = ''
+    ;(element as HTMLElement).style.visibility = ''
+    ;(element as HTMLElement).style.height = '0'
+
+    // Force repaint to make sure the
+    // animation is triggered correctly.
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(element).height
+
+    requestAnimationFrame(() => {
+        ;(element as HTMLElement).style.height = height
+
+        callDoneCallback(element, done)
+    })
+}
+
+function onAfterEnter(element: Element) {
+    ;(element as HTMLElement).style.height = 'auto'
+}
+
+function onLeave(element: Element, done: () => void) {
+    ;(element as HTMLElement).style.height = getComputedStyle(element).height
+
+    // Force repaint to make sure the
+    // animation is triggered correctly.
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(element).height
+
+    requestAnimationFrame(() => {
+        ;(element as HTMLElement).style.height = '0'
+
+        callDoneCallback(element, done)
+    })
+}
+</script>
+
+<template>
+    <Transition name="expand" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave">
+        <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
+        <slot />
+    </Transition>
+</template>

components/molecules/VRoadizBlockFactory/Default.stories.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const blocks = [
+    {
+        '@id': 'walker-id',
+        '@type': 'RoadizWalker',
+        item: {
+            '@id': 'item-id',
+            '@type': 'ContentBlock',
+        },
+        children: [],
+    },
+]
+</script>
+
+<template>
+    <NuxtStory>
+        <VRoadizBlockFactory :blocks="blocks" />
+    </NuxtStory>
+</template>
+
+<style lang="scss" module></style>

components/molecules/VRoadizBlockFactory/VRoadizBlockFactory.ts

@@ -0,0 +1,37 @@
+import type { FunctionalComponent, VNodeChild } from 'vue'
+import { h, resolveDynamicComponent, resolveComponent } from 'vue'
+import type { RoadizWalker } from '@roadiz/types'
+
+export interface RoadizBlockFactoryProps {
+    prefix?: string
+    blocks: RoadizWalker[]
+    [key: string]: unknown
+}
+
+const isComponent = (component: string): boolean => {
+    return typeof resolveDynamicComponent(component) !== 'string'
+}
+
+const RoadizBlockFactory: FunctionalComponent<RoadizBlockFactoryProps> = ({ blocks, prefix }, context): VNodeChild => {
+    const blocksWithComponent = blocks.filter((block) => {
+        const componentName = prefix
+            ? prefix + block.item['@type'].replace(/NS([a-zA-Z]+)/g, '$1')
+            : block.item['@type'].replace(/NS([a-zA-Z]+)/g, '$1')
+
+        return isComponent(componentName)
+    })
+    return blocksWithComponent.map((block, index, blocks) => {
+        const componentName = prefix
+            ? prefix + block.item['@type'].replace(/NS([a-zA-Z]+)/g, '$1')
+            : block.item['@type'].replace(/NS([a-zA-Z]+)/g, '$1')
+
+        return h(resolveComponent(componentName), {
+            walker: block,
+            index,
+            numBlocks: blocks.length,
+            ...context.attrs,
+        })
+    })
+}
+
+export default RoadizBlockFactory

components/molecules/VRoadizPreview/Default.stories.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+useRoadizPreview({
+    isActive: true,
+    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE1MTYyMzkwMjIsInVzZXJuYW1lIjoiam9obi5kb2VAcmV6by16ZXJvLmNvbSJ9.cmDGzWvhOG2pczkEb9Bk6IgsUp7-fz-l_QCT6O2xwis',
+})
+</script>
+
+<template>
+    <NuxtStory>
+        <VRoadizPreview />
+    </NuxtStory>
+</template>

components/molecules/VRoadizPreview/VRoadizPreview.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const { token, reset: resetPreview } = useRoadizPreview()
+
+const jwt = computed(() => {
+    let decodedBase64
+
+    if (!token.value) {
+        return null
+    }
+
+    const base64Url = token.value.split('.')[1]
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+
+    if (typeof window !== 'undefined' && typeof window.atob !== 'undefined') {
+        decodedBase64 = window.atob(base64)
+    } else {
+        decodedBase64 = Buffer.from(base64, 'base64').toString()
+    }
+
+    const jsonPayload = decodeURIComponent(
+        decodedBase64
+            .split('')
+            .map((c) => {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+            })
+            .join(''),
+    )
+
+    return JSON.parse(jsonPayload)
+})
+
+const remainingTime = computed(() => {
+    return new Date((jwt.value?.exp || 0) * 1000)
+})
+
+const router = useRouter()
+const route = useRoute()
+function stopPreview() {
+    resetPreview()
+
+    router.push({ path: route.path, query: { ...route.query, _preview: undefined, token: undefined } })
+}
+</script>
+
+<template>
+    <div v-if="jwt" :class="$style.root">
+        <div :class="$style.user">Previewing as: {{ jwt.username }}</div>
+        <div>Expire at: {{ remainingTime }}</div>
+        <button :class="$style.button" @click.prevent="stopPreview">Stop previewing</button>
+    </div>
+</template>
+
+<style lang="scss" module>
+.root {
+    position: fixed;
+    z-index: 9999;
+    right: 0;
+    bottom: 0;
+    display: block;
+    max-width: 48ch;
+    padding: 1em 1.5em 0.75em;
+    border-radius: 3px 3px 0 0;
+    background: #ffa600;
+    font-size: 10px;
+    line-height: 16px;
+    opacity: 0.4;
+}
+
+.user {
+    font-weight: bold;
+}
+
+.button {
+    font-weight: bold;
+}
+</style>