v99 - 7к

public/data/cf9f551f-e733-4934-a682-535575cb7c70.json

@@ -1 +1 @@
-{"cacheVersion":98,"page":{"id":"cf9f551f-e733-4934-a682-535575cb7c70","paths":{"en":"promo","default":"promo"},"cmsDataSetPath":null,"workflows":[]},"sections":{"4a2188f6-d98c-4150-9ba7-5918c72f3421":{"uid":"4a2188f6-d98c-4150-9ba7-5918c72f3421","linkId":"416695e7-e54e-4897-9f9a-befeb223f1b0","_state":{"style":{"default":{}}},"content":{"default":{"wwObjects":[],"_ww-layout_alignItems":"flex-start","_ww-layout_flexDirection":"column"}},"sectionBaseId":"99586bd3-2b15-4d6b-a025-6a50d07ca845","sectionTitle":"Section"}},"wwObjects":{},"collections":[],"variables":[],"workflows":[],"formulas":[],"libraryComponents":[]}
+{"cacheVersion":99,"page":{"id":"cf9f551f-e733-4934-a682-535575cb7c70","paths":{"en":"promo","default":"promo"},"cmsDataSetPath":null,"workflows":[]},"sections":{"4a2188f6-d98c-4150-9ba7-5918c72f3421":{"uid":"4a2188f6-d98c-4150-9ba7-5918c72f3421","linkId":"416695e7-e54e-4897-9f9a-befeb223f1b0","_state":{"style":{"default":{}}},"content":{"default":{"wwObjects":[],"_ww-layout_alignItems":"flex-start","_ww-layout_flexDirection":"column"}},"sectionBaseId":"99586bd3-2b15-4d6b-a025-6a50d07ca845","sectionTitle":"Section"}},"wwObjects":{},"collections":[],"variables":[],"workflows":[],"formulas":[],"libraryComponents":[]}

public/manifest.json

@@ -1 +1 @@
-{"name":"Образовательная платформа Meetguru","short_name":"Образовательная платформа Meetguru","icons":[{"src":"images/48-favicon.png?_wwcv=98","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=98","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=98","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=98","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=98","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=98","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=98","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=98","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=98","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=98","type":"image/png","sizes":"512x512"}],"start_url":"/","display":"fullscreen","scope":"/","background_color":"#FFFFFF","theme_color":"#FFFFFF"}
+{"name":"Образовательная платформа Meetguru","short_name":"Образовательная платформа Meetguru","icons":[{"src":"images/48-favicon.png?_wwcv=99","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=99","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=99","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=99","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=99","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=99","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=99","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=99","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=99","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=99","type":"image/png","sizes":"512x512"}],"start_url":"/","display":"fullscreen","scope":"/","background_color":"#FFFFFF","theme_color":"#FFFFFF"}

public/serviceworker.js

@@ -1,4 +1,4 @@
-const version = 98;
+const version = 99;
 self.addEventListener('install', event => {
     // eslint-disable-next-line no-console
     console.log(`Service worker v${version} installed`);

src/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/AI.md

@@ -0,0 +1,10 @@
+---
+name: ww-popup
+description: The `ww-popup` is used as a base for popups.
+keywords: popup
+---
+
+#### ww-popup
+
+***Purpose:***
+   The `ww-popup` is used as a base for popups.

src/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/package.json

@@ -0,0 +1 @@
+{"name":"ww-button","repository":{"type":"git","url":"https://github.com/weweb-assets/ww-dialog-root"},"version":"3.2.0","license":"MIT","scripts":{"build":"weweb build","serve":"weweb serve","create-config":"weweb config"},"devDependencies":{"@vue/eslint-config-prettier":"^6.0.0","eslint":"^7.7.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-vue":"7.0.0-beta.4","prettier":"^2.1.2","vue":"^3.5.12"}}

src/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/src/composables/useDialogStyle.js

@@ -0,0 +1,124 @@
+export function useDialogStyle() {
+    function getTransitionName(animation, slideInDirection) {
+        switch (animation) {
+            case 'fade':
+                return 'fade-transition';
+            case 'slide-in':
+                switch (slideInDirection) {
+                    default:
+                        return 'slide-in-left-transition';
+                    case 'left':
+                        return 'slide-in-left-transition';
+                    case 'right':
+                        return 'slide-in-right-transition';
+                    case 'top':
+                        return 'slide-in-top-transition';
+                    case 'bottom':
+                        return 'slide-in-bottom-transition';
+                }
+            case 'zoom':
+                return 'zoom-transition';
+            default:
+                return '';
+        }
+    }
+
+    function getModalStyle(side, align, customPositionX, customPositionY) {
+        const style = {
+            position: 'fixed',
+        };
+
+        switch (side) {
+            case 'left':
+                style.left = 0;
+                style['--align-items'] = 'flex-start';
+                break;
+            case 'right':
+                style.right = 0;
+                style['--align-items'] = 'flex-end';
+                break;
+            case 'custom':
+                style.left = customPositionX;
+                style['--align-items'] = 'flex-start';
+                break;
+            default:
+                style.left = '50%';
+                style['--translate-x'] = '-50%';
+                style['--align-items'] = 'center';
+                break;
+        }
+
+        switch (align) {
+            case 'top':
+                style.top = 0;
+                style['--justify-content'] = 'flex-start';
+                break;
+            case 'bottom':
+                style.bottom = 0;
+                style['--justify-content'] = 'flex-end';
+                break;
+            case 'custom':
+                style.top = customPositionY;
+                style['--justify-content'] = 'flex-start';
+                break;
+            default:
+                style.top = '50%';
+                style['--translate-y'] = '-50%';
+                style['--justify-content'] = 'center';
+                break;
+        }
+
+        return style;
+    }
+
+    function getSheetStyle(side) {
+        const style = {
+            position: 'fixed',
+        };
+
+        switch (side) {
+            case 'left':
+                Object.assign(style, {
+                    height: '100dvh',
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                });
+                break;
+            case 'right':
+                Object.assign(style, {
+                    height: '100dvh',
+                    top: 0,
+                    bottom: 0,
+                    right: 0,
+                });
+                break;
+            case 'top':
+                Object.assign(style, {
+                    width: '100dvw',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    '--content-flow': 'column',
+                });
+                break;
+            case 'bottom':
+                Object.assign(style, {
+                    width: '100dvw',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    '--content-flow': 'column',
+                });
+                break;
+        }
+
+        return style;
+    }
+
+    return {
+        getModalStyle,
+        getSheetStyle,
+        getTransitionName,
+    };
+}

src/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/src/wwElement.vue

@@ -0,0 +1,312 @@
+<template>
+    <div
+        class="ww-dialog"
+        :style="!content.overlay && dialogStyle"
+        :class="[
+            {
+                overlay: content.overlay,
+                'no-overlay': !content.overlay,
+                transform: !content.overlay,
+                '-modal': content.type === 'modal',
+                '-editing': isEditing,
+            },
+            !content.overlay && animationClasses,
+        ]"
+        @click.self="onRootClick"
+    >
+        <template v-if="!content.overlay">
+            <div v-if="content.clickOutsideCloses" @click="onCloseInterceptorClick" class="interceptor"></div>
+        </template>
+
+        <wwLayout
+            path="children"
+            class="content"
+            role="dialog"
+            :style="content.overlay && dialogStyle"
+            :class="[
+                { transform: content.overlay, '-modal': content.type === 'modal' },
+                content.overlay && animationClasses,
+            ]"
+        ></wwLayout>
+    </div>
+</template>
+
+<script>
+import { computed, onBeforeUnmount, watchEffect, inject, unref } from 'vue';
+import { useDialogStyle } from './composables/useDialogStyle';
+
+export default {
+    props: {
+        content: { type: Object, required: true },
+        uid: { type: String, required: true },
+    },
+    setup(props, { emit }) {
+        const isEditing = computed(() => {
+            // eslint-disable-next-line no-unreachable
+            return false;
+        });
+
+        const { getModalStyle, getSheetStyle } = useDialogStyle();
+
+        // TODO: will not work with several instances
+        watchEffect(() => {
+            if (props.content.preventScroll && !isEditing.value) {
+                wwLib.getFrontDocument().documentElement.classList.add('ww-dialog-open');
+            } else {
+                wwLib.getFrontDocument().documentElement.classList.remove('ww-dialog-open');
+            }
+        });
+
+        const animationDuration = computed(() => {
+            return props.content.animationDuration + 'ms';
+        });
+        const animationEasing = computed(() => {
+            return props.content.animationEasing;
+        });
+
+        const dialogStyle = computed(() => {
+            let style = {};
+            switch (props.content.type) {
+                case 'modal':
+                    style = getModalStyle(
+                        props.content.sideModal,
+                        props.content.align,
+                        props.content.customPositionX,
+                        props.content.customPositionY
+                    );
+                    break;
+                case 'sheet':
+                    style = getSheetStyle(props.content.sideSheet);
+                    break;
+            }
+            return style;
+        });
+
+        const localContext = inject('_wwLocalContext', null);
+
+        function onEscapeKeyDown(event) {
+            if (isEditing.value) return;
+            if (event.key !== 'Escape') return;
+            if (!props.content.escClose) return;
+            unref(localContext)?.methods?.popup?.close.method();
+        }
+
+        watchEffect(() => {
+            if (props.content.escClose) {
+                wwLib.getFrontDocument().addEventListener('keydown', onEscapeKeyDown);
+            } else {
+                wwLib.getFrontDocument().removeEventListener('keydown', onEscapeKeyDown);
+            }
+        });
+
+        onBeforeUnmount(() => {
+            wwLib.getFrontDocument().removeEventListener('keydown', onEscapeKeyDown);
+            wwLib.getFrontDocument().documentElement.classList.remove('ww-dialog-open');
+        });
+
+        return {
+            dialogStyle,
+            animationClasses: computed(() => {
+                return {
+                    'fade-animation': props.content.animation === 'fade',
+                    'zoomin-animation': props.content.animation === 'zoom',
+                    'slideDown-animation':
+                        props.content.animation === 'slide-in' && props.content.slideInDirection === 'bottom',
+                    'slideUp-animation':
+                        props.content.animation === 'slide-in' && props.content.slideInDirection === 'top',
+                    'slideLeft-animation':
+                        props.content.animation === 'slide-in' && props.content.slideInDirection === 'left',
+                    'slideRight-animation':
+                        props.content.animation === 'slide-in' && props.content.slideInDirection === 'right',
+                };
+            }),
+            animationDuration,
+            animationEasing,
+            onRootClick: () => {
+                if (isEditing.value) {
+                    return;
+                }
+                if (props.content.overlay && props.content.overlayClickCloses) {
+                    unref(localContext)?.methods?.popup?.close.method();
+                }
+            },
+            onCloseInterceptorClick: event => {
+                if (isEditing.value) {
+                    return;
+                }
+                event.stopPropagation();
+                if (props.content.clickOutsideCloses) {
+                    unref(localContext)?.methods?.popup?.close.method();
+                }
+            },
+            onInterceptorClick: event => {
+                if (isEditing.value) {
+                    return;
+                }
+                if (props.content.preventInteractionsOutside) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+            },
+            isEditing,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.no-overlay {
+    display: flex;
+    flex-direction: var(--content-flow, row);
+    &.-modal {
+        flex-direction: column;
+        width: 100%;
+        height: 100dvh;
+    }
+    pointer-events: none !important;
+    .content > * {
+        pointer-events: initial;
+    }
+    &:not(.-editing) {
+        .interceptor {
+            pointer-events: initial;
+        }
+    }
+}
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw !important;
+    height: 100dvh !important;
+    --ww-overlay-background-color: v-bind(content.overlayBackgroundColor);
+    background-color: var(--ww-overlay-background-color, rgba(0, 0, 0, 0.5)) !important;
+}
+.interceptor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw !important;
+    height: 100dvh !important;
+}
+
+.content {
+    display: flex;
+    flex-direction: var(--content-flow, row);
+    pointer-events: none;
+    > * {
+        pointer-events: initial;
+    }
+    &.-modal {
+        flex-direction: column;
+        align-items: var(--align-items);
+        justify-content: var(--justify-content);
+        width: 100%;
+        height: 100dvh;
+    }
+}
+
+.ww-dialog {
+    isolation: isolate;
+}
+
+.fade-animation {
+    animation: fadeIn v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity;
+}
+.zoomin-animation {
+    animation: zoomIn v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity, transform;
+}
+.slideDown-animation {
+    animation: slideDown v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity, transform;
+}
+.slideUp-animation {
+    animation: slideUp v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity, transform;
+}
+.slideLeft-animation {
+    animation: slideLeft v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity, transform;
+}
+.slideRight-animation {
+    animation: slideRight v-bind(animationDuration) v-bind(animationEasing);
+    will-change: opacity, transform;
+}
+
+.transform {
+    --translate-x: 0px;
+    --translate-y: 0px;
+    transform: translate(var(--translate-x), var(--translate-y));
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: translate(var(--translate-x), var(--translate-y)) scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: translate(var(--translate-x), var(--translate-y)) scale(1);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translate(var(--translate-x), calc(var(--translate-y) - 30px));
+    }
+    to {
+        opacity: 1;
+        transform: translate(var(--translate-x), calc(var(--translate-y)));
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translate(var(--translate-x), calc(var(--translate-y) + 30px));
+    }
+    to {
+        opacity: 1;
+        transform: translate(var(--translate-x), calc(var(--translate-y)));
+    }
+}
+
+@keyframes slideLeft {
+    from {
+        opacity: 0;
+        transform: translate(calc(var(--translate-x) - 30px), var(--translate-y));
+    }
+    to {
+        opacity: 1;
+        transform: translate(var(--translate-x), calc(var(--translate-y)));
+    }
+}
+@keyframes slideRight {
+    from {
+        opacity: 0;
+        transform: translate(calc(var(--translate-x) + 30px), var(--translate-y));
+    }
+    to {
+        opacity: 1;
+        transform: translate(var(--translate-x), calc(var(--translate-y)));
+    }
+}
+</style>
+
+<style>
+.ww-dialog-open {
+    overflow: hidden !important;
+}
+</style>

src/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/ww-config.js

@@ -0,0 +1,291 @@
+export default {
+    editor: {
+        label: {
+            en: 'Base Popup',
+            fr: 'Base Popup',
+        },
+        icon: 'popup',
+        excludedSections: [
+            'sizing',
+            'spacing',
+            'positioning',
+            'background',
+            'styling',
+            'advanced-style',
+            'customCss',
+            'animation',
+        ],
+    },
+    options: {
+        displayAllowedValues: ['flex'],
+        ignoredStyleProperties: ['position', 'overflow', 'background'],
+    },
+    properties: {
+        type: {
+            label: {
+                en: 'Type',
+                fr: 'Type',
+            },
+            type: 'TextSelect',
+            section: 'style',
+            options: {
+                options: [
+                    { value: 'modal', label: { en: 'Modal', fr: 'Modal' } },
+                    { value: 'sheet', label: { en: 'Sheet', fr: 'Sheet' } },
+                ],
+            },
+            bindable: true,
+            defaultValue: 'modal',
+            propertyHelp: {
+                tooltip:
+                    'If set to "none", the dialog will be unpositioned. If set to "modal", the dialog will be displayed as a modal which can be placed in various positions. If set to "sheet", the dialog will be displayed as a full width or height element on a side of the screen.',
+            },
+        },
+        sideModal: {
+            label: {
+                en: 'Side',
+                fr: 'Positionnement',
+            },
+            type: 'TextSelect',
+            section: 'style',
+            options: {
+                options: [
+                    { value: 'left', label: { en: 'Left', fr: 'Gauche' } },
+                    { value: 'center', label: { en: 'Center', fr: 'Centre' } },
+                    { value: 'right', label: { en: 'Right', fr: 'Droite' } },
+                    { value: 'custom', label: { en: 'Custom', fr: 'Personnalisé' } },
+                ],
+            },
+            defaultValue: 'center',
+            hidden: content => content.type !== 'modal',
+            bindable: true,
+        },
+        customPositionX: {
+            hidden: content => content.sideModal !== 'custom' || content.type !== 'modal',
+            label: {
+                en: 'Horizontal',
+                fr: 'Horizontal',
+            },
+            type: 'Length',
+            options: {
+                unitChoices: [
+                    { value: '%', label: '%', min: 0, max: 100 },
+                    { value: 'px', label: 'px', min: 0, max: 1000 },
+                ],
+            },
+            defaultValue: '0%',
+            bindable: true,
+        },
+        sideSheet: {
+            label: {
+                en: 'Side',
+                fr: 'Positionnement',
+            },
+            type: 'TextSelect',
+            section: 'style',
+            options: {
+                options: [
+                    { value: 'left', label: { en: 'Left', fr: 'Gauche' } },
+                    { value: 'top', label: { en: 'Top', fr: 'Haut' } },
+                    { value: 'right', label: { en: 'Right', fr: 'Droite' } },
+                    { value: 'bottom', label: { en: 'Bottom', fr: 'Bas' } },
+                ],
+            },
+            hidden: content => content.type !== 'sheet',
+            defaultValue: 'top',
+            bindable: true,
+        },
+        align: {
+            hidden: content => content.type !== 'modal',
+            label: {
+                en: 'Align',
+                fr: 'Alignement',
+            },
+            type: 'TextSelect',
+            section: 'style',
+            options: {
+                options: [
+                    { value: 'top', label: { en: 'Top', fr: 'Haut' } },
+                    { value: 'center', label: { en: 'Center', fr: 'Centre' } },
+                    { value: 'bottom', label: { en: 'Bottom', fr: 'Bas' } },
+                    { value: 'custom', label: { en: 'Custom', fr: 'Personnalisé' } },
+                ],
+            },
+            defaultValue: 'center',
+            bindable: true,
+        },
+        customPositionY: {
+            hidden: content => content.align !== 'custom' || content.type !== 'modal',
+            label: {
+                en: 'Vertical',
+                fr: 'Vertical',
+            },
+            type: 'Length',
+            options: {
+                unitChoices: [
+                    { value: '%', label: '%', min: 0, max: 100 },
+                    { value: 'px', label: 'px', min: 0, max: 1000 },
+                ],
+            },
+            defaultValue: '0%',
+            bindable: true,
+        },
+        animation: {
+            label: {
+                en: 'Animation',
+                fr: 'Animation',
+            },
+            section: 'style',
+            type: 'TextSelect',
+            options: {
+                options: [
+                    { value: null, label: { en: 'None', fr: 'Aucune' } },
+                    { value: 'fade', label: { en: 'Fade', fr: 'Fondu' } },
+                    { value: 'slide-in', label: { en: 'Slide in', fr: 'Diapositive' } },
+                    { value: 'zoom', label: { en: 'Zoom', fr: 'Zoom' } },
+                ],
+            },
+            defaultValue: null,
+            bindable: true,
+        },
+        slideInDirection: {
+            hidden: content => content.animation !== 'slide-in' || content.animation === null,
+            label: {
+                en: 'Direction',
+                fr: 'Direction',
+            },
+            type: 'TextSelect',
+            section: 'style',
+            options: {
+                options: [
+                    { value: 'top', label: { en: 'Top', fr: 'Haut' } },
+                    { value: 'left', label: { en: 'Left', fr: 'Gauche' } },
+                    { value: 'bottom', label: { en: 'Bottom', fr: 'Bas' } },
+                    { value: 'right', label: { en: 'Right', fr: 'Droite' } },
+                ],
+            },
+            defaultValue: 'top',
+            bindable: true,
+        },
+        animationDuration: {
+            label: {
+                en: 'Animation duration (ms)',
+                fr: "Durée de l'animation (ms)",
+            },
+            section: 'style',
+            type: 'Number',
+            defaultValue: 300,
+            options: {
+                min: 0,
+                max: 10000,
+            },
+            bindable: true,
+            hidden: content => content.animation === null,
+        },
+        animationEasing: {
+            label: {
+                en: 'Animation easing',
+                fr: 'Animation easing',
+            },
+            section: 'style',
+            type: 'TextSelect',
+            options: {
+                options: [
+                    { value: 'linear', label: { en: 'Linear', fr: 'Linéaire' } },
+                    { value: 'ease', label: { en: 'Ease', fr: 'Acceleration' } },
+                    { value: 'ease-in', label: { en: 'Ease in', fr: 'Acceleration progressive' } },
+                    { value: 'ease-out', label: { en: 'Ease out', fr: 'Deceleration' } },
+                    { value: 'ease-in-out', label: { en: 'Ease in out', fr: 'Acceleration et déclinaison' } },
+                ],
+            },
+            defaultValue: 'linear',
+            bindable: true,
+            hidden: content => content.animation === null,
+        },
+
+        preventScroll: {
+            label: {
+                en: 'Prevent Scrolling',
+                fr: 'Désactiver le scroll',
+            },
+            type: 'OnOff',
+            defaultValue: true,
+            bindable: true,
+            propertyHelp: {
+                tooltip: 'Whether users can scroll the page when the dialog is open.',
+            },
+        },
+        escClose: {
+            label: {
+                en: 'Escape key to close',
+                fr: 'La touche échap pour fermer',
+            },
+            type: 'OnOff',
+
+            defaultValue: false,
+            bindable: true,
+            propertyHelp: {
+                tooltip: 'Whether the dialog should be closed when the escape key is pressed.',
+            },
+        },
+        overlay: {
+            label: {
+                en: 'Overlay',
+                fr: 'Overlay',
+            },
+            type: 'OnOff',
+
+            defaultValue: true,
+            bindable: true,
+            propertyHelp: {
+                tooltip: 'Whether you want to display an overlay behind your dialog.',
+            },
+        },
+        clickOutsideCloses: {
+            label: {
+                en: 'Click outside to close',
+                fr: 'Fermeture au clic',
+            },
+            type: 'OnOff',
+            defaultValue: false,
+            bindable: true,
+            propertyHelp: {
+                tooltip: 'Whether the dialog should be closed when the user clicks outside the dialog.',
+            },
+            hidden: content => content.overlay,
+        },
+        overlayClickCloses: {
+            type: 'OnOff',
+            label: {
+                en: 'Overlay click closes',
+                fr: 'Fermeture au clic',
+            },
+
+            defaultValue: true,
+            bindable: true,
+            propertyHelp: {
+                tooltip: 'You can prevent the dialog from closing when the user clicks the overlay.',
+            },
+            hidden: content => !content.overlay,
+        },
+        overlayBackgroundColor: {
+            label: {
+                en: 'Overlay background color',
+                fr: "Couleur de fond de l'overlay",
+            },
+            type: 'Color',
+            defaultValue: 'rgba(0, 0, 0, 0.5)',
+            bindable: true,
+            responsive: true,
+            classes: true,
+            hidden: content => !content.overlay,
+            options: {
+                nullable: true,
+            },
+        },
+        children: {
+            defaultValue: [],
+            hidden: true,
+        },
+    },
+};

src/pages/16089944-2b20-4dd4-a9a1-f5142bd80c4e.js

@@ -14,6 +14,7 @@ import element_9256b033_f4e8_4ab4_adce_dac3a940d7f5 from '@/components/elements/
 import element_9ecb2cfc_cef7_4be8_b736_3e17a3b7e9ff from '@/components/elements/element-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff/src/wwElement.vue';
 import element_a823467c_bdc7_4cec_a38c_71875c4c214a from '@/components/elements/element-a823467c-bdc7-4cec-a38c-71875c4c214a/src/wwElement.vue';
 import element_b783dc65_d528_4f74_8c14_e27c934c39b1 from '@/components/elements/element-b783dc65-d528-4f74-8c14-e27c934c39b1/src/wwElement.vue';
+import element_c6c0c00e_49fd_4cb9_bd78_5bc09945721e from '@/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/src/wwElement.vue';
 import element_d7904e9d_fc9a_4d80_9e32_728e097879ad from '@/components/elements/element-d7904e9d-fc9a-4d80-9e32-728e097879ad/src/wwElement.vue';
 import element_deb10a01_5eef_4aa1_9017_1b51c2ad6fd0 from '@/components/elements/element-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0/src/wwElement.vue';
 
@@ -30,6 +31,7 @@ app.component('wwobject-9256b033-f4e8-4ab4-adce-dac3a940d7f5', element_9256b033_
 app.component('wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff', element_9ecb2cfc_cef7_4be8_b736_3e17a3b7e9ff);
 app.component('wwobject-a823467c-bdc7-4cec-a38c-71875c4c214a', element_a823467c_bdc7_4cec_a38c_71875c4c214a);
 app.component('wwobject-b783dc65-d528-4f74-8c14-e27c934c39b1', element_b783dc65_d528_4f74_8c14_e27c934c39b1);
+app.component('wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e', element_c6c0c00e_49fd_4cb9_bd78_5bc09945721e);
 app.component('wwobject-d7904e9d-fc9a-4d80-9e32-728e097879ad', element_d7904e9d_fc9a_4d80_9e32_728e097879ad);
 app.component('wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0', element_deb10a01_5eef_4aa1_9017_1b51c2ad6fd0);
 

src/pages/6ff5d3f0-8211-4a41-9774-a6e6a9d8e55d.js

@@ -11,6 +11,7 @@ import element_83d890fb_84f9_4386_b459_fb4be89a8e15 from '@/components/elements/
 import element_9256b033_f4e8_4ab4_adce_dac3a940d7f5 from '@/components/elements/element-9256b033-f4e8-4ab4-adce-dac3a940d7f5/src/wwElement.vue';
 import element_9ecb2cfc_cef7_4be8_b736_3e17a3b7e9ff from '@/components/elements/element-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff/src/wwElement.vue';
 import element_b783dc65_d528_4f74_8c14_e27c934c39b1 from '@/components/elements/element-b783dc65-d528-4f74-8c14-e27c934c39b1/src/wwElement.vue';
+import element_c6c0c00e_49fd_4cb9_bd78_5bc09945721e from '@/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/src/wwElement.vue';
 import element_d7904e9d_fc9a_4d80_9e32_728e097879ad from '@/components/elements/element-d7904e9d-fc9a-4d80-9e32-728e097879ad/src/wwElement.vue';
 import element_deb10a01_5eef_4aa1_9017_1b51c2ad6fd0 from '@/components/elements/element-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0/src/wwElement.vue';
 
@@ -24,6 +25,7 @@ app.component('wwobject-83d890fb-84f9-4386-b459-fb4be89a8e15', element_83d890fb_
 app.component('wwobject-9256b033-f4e8-4ab4-adce-dac3a940d7f5', element_9256b033_f4e8_4ab4_adce_dac3a940d7f5);
 app.component('wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff', element_9ecb2cfc_cef7_4be8_b736_3e17a3b7e9ff);
 app.component('wwobject-b783dc65-d528-4f74-8c14-e27c934c39b1', element_b783dc65_d528_4f74_8c14_e27c934c39b1);
+app.component('wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e', element_c6c0c00e_49fd_4cb9_bd78_5bc09945721e);
 app.component('wwobject-d7904e9d-fc9a-4d80-9e32-728e097879ad', element_d7904e9d_fc9a_4d80_9e32_728e097879ad);
 app.component('wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0', element_deb10a01_5eef_4aa1_9017_1b51c2ad6fd0);
 

src/pinia/componentBases.js

@@ -34,6 +34,7 @@ import wwobject1be951afde7143e6ad1ee9b36de15529 from '@/components/elements/elem
 import wwobject9ecb2cfccef74be8b7363e17a3b7e9ff from '@/components/elements/element-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff/ww-config.js';
 import wwobjecta823467cbdc74ceca38c71875c4c214a from '@/components/elements/element-a823467c-bdc7-4cec-a38c-71875c4c214a/ww-config.js';
 import wwobject9ae1fce82e314bfda4d20450235bdfd5 from '@/components/elements/element-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5/ww-config.js';
+import wwobjectc6c0c00e49fd4cb9bd785bc09945721e from '@/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/ww-config.js';
 import wwobjectdeb10a015eef4aa190171b51c2ad6fd0 from '@/components/elements/element-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0/ww-config.js';
 /* wwFront:end */
 
@@ -73,6 +74,7 @@ export const useComponentBasesStore = defineStore('componentBases', () => {
 'wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff': getInheritedConfiguration({ ...wwobject9ecb2cfccef74be8b7363e17a3b7e9ff, name: 'wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff' }),
 'wwobject-a823467c-bdc7-4cec-a38c-71875c4c214a': getInheritedConfiguration({ ...wwobjecta823467cbdc74ceca38c71875c4c214a, name: 'wwobject-a823467c-bdc7-4cec-a38c-71875c4c214a' }),
 'wwobject-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5': getInheritedConfiguration({ ...wwobject9ae1fce82e314bfda4d20450235bdfd5, name: 'wwobject-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5' }),
+'wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e': getInheritedConfiguration({ ...wwobjectc6c0c00e49fd4cb9bd785bc09945721e, name: 'wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e' }),
 'wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0': getInheritedConfiguration({ ...wwobjectdeb10a015eef4aa190171b51c2ad6fd0, name: 'wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0' })};
     /* wwFront:end */
  

template.html

@@ -12,20 +12,20 @@
 
         <link rel="icon" type="image/x-icon" href="favicon.ico?_wwcv={{cacheVersion}}" />
 
-        <link rel="manifest" href="manifest.json?_wwcv=98" />
+        <link rel="manifest" href="manifest.json?_wwcv=99" />
         <meta name="theme-color" content="" />
-        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=98">
+        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=99">
-<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=98">
+<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=99">
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link href="/fonts/Phosphor/font.css?_wwcv=98" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<link href="/fonts/Phosphor/font.css?_wwcv=99" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <style>:root{ --ww-default-font-family: 'Raleway', sans-serif }</style>
         <style>