v208 - sales

package.json

@@ -1 +1 @@
-{"name":"weweb-front","version":"4.0.0","private":true,"type":"module","scripts":{"serve":"vite","build":"vite build","postbuild":"node ./postbuild.js"},"dependencies":{"@vueuse/head":"2.0.0","axios":"1.12.2","html-escaper":"3.0.3","lodash":"4.17.21","pinia":"3.0.2","short-unique-id":"5.3.2","tiny-emitter":"2.1.0","uuid":"11.1.0","vue":"3.5.13","vue-cookie-next":"1.3.0","vue-meta":"2.4.0","vue-router":"4.5.1","vuex":"4.1.0","dayjs":"1.11.0","qs":"^6.14.0","@supabase/supabase-js":"2.50.3","@vueform/multiselect":"2.6.2","vue-ellipse-progress":"^2.1.1","diff":"^5.1.0","animejs":"^3.2.2","marked":"^14.1.2","medium-zoom":"^1.0.6","prismjs":"^1.23.0","@tiptap/extension-color":"2.8.0","@tiptap/extension-image":"2.8.0","@tiptap/extension-link":"2.8.0","@tiptap/extension-mathematics":"2.26.1","@tiptap/extension-mention":"2.8.0","@tiptap/extension-placeholder":"2.8.0","@tiptap/extension-table":"2.8.0","@tiptap/extension-table-cell":"2.8.0","@tiptap/extension-table-header":"2.8.0","@tiptap/extension-table-row":"2.8.0","@tiptap/extension-task-item":"2.8.0","@tiptap/extension-task-list":"2.8.0","@tiptap/extension-text-align":"2.8.0","@tiptap/extension-text-style":"2.8.0","@tiptap/extension-underline":"2.8.0","@tiptap/pm":"2.8.0","@tiptap/starter-kit":"2.8.0","@tiptap/suggestion":"2.8.0","@tiptap/vue-3":"2.8.0","katex":"^0.16.22","prosemirror-commands":"1.5.0","prosemirror-dropcursor":"1.5.0","prosemirror-gapcursor":"1.3.1","prosemirror-history":"1.3.0","prosemirror-keymap":"1.2.0","prosemirror-schema-list":"1.2.2","tiptap-markdown":"^0.8.10","@vueuse/core":"^13.0.0","@vuepic/vue-datepicker":"3.6.8","date-fns":"4.1.0","lodash-es":"^4.17.21"},"devDependencies":{"@vitejs/plugin-vue":"5.2.4","autoprefixer":"10.4.21","handlebars":"4.7.8","sass-embedded":"1.89.0","vite":"6.3.5","vite-plugin-node-polyfills":"0.23.0"},"browserslist":["last 3 years"]}
+{"name":"weweb-front","version":"4.0.0","private":true,"type":"module","scripts":{"serve":"vite","build":"vite build","postbuild":"node ./postbuild.js"},"dependencies":{"@vueuse/head":"2.0.0","axios":"1.12.2","html-escaper":"3.0.3","lodash":"4.17.21","pinia":"3.0.2","short-unique-id":"5.3.2","tiny-emitter":"2.1.0","uuid":"11.1.0","vue":"3.5.13","vue-cookie-next":"1.3.0","vue-meta":"2.4.0","vue-router":"4.5.1","vuex":"4.1.0","dayjs":"1.11.0","qs":"^6.14.0","@supabase/supabase-js":"2.50.3","@vueform/multiselect":"2.6.2","vue-ellipse-progress":"^2.1.1","diff":"^5.1.0","animejs":"^3.2.2","marked":"^14.1.2","medium-zoom":"^1.0.6","prismjs":"^1.23.0","@tiptap/extension-color":"2.8.0","@tiptap/extension-image":"2.8.0","@tiptap/extension-link":"2.8.0","@tiptap/extension-mathematics":"2.26.1","@tiptap/extension-mention":"2.8.0","@tiptap/extension-placeholder":"2.8.0","@tiptap/extension-table":"2.8.0","@tiptap/extension-table-cell":"2.8.0","@tiptap/extension-table-header":"2.8.0","@tiptap/extension-table-row":"2.8.0","@tiptap/extension-task-item":"2.8.0","@tiptap/extension-task-list":"2.8.0","@tiptap/extension-text-align":"2.8.0","@tiptap/extension-text-style":"2.8.0","@tiptap/extension-underline":"2.8.0","@tiptap/pm":"2.8.0","@tiptap/starter-kit":"2.8.0","@tiptap/suggestion":"2.8.0","@tiptap/vue-3":"2.8.0","katex":"^0.16.22","prosemirror-commands":"1.5.0","prosemirror-dropcursor":"1.5.0","prosemirror-gapcursor":"1.3.1","prosemirror-history":"1.3.0","prosemirror-keymap":"1.2.0","prosemirror-schema-list":"1.2.2","tiptap-markdown":"^0.8.10","@vueuse/core":"^13.0.0","@vuepic/vue-datepicker":"3.6.8","date-fns":"4.1.0","lodash-es":"^4.17.21"},"devDependencies":{"@vitejs/plugin-vue":"5.2.4","autoprefixer":"10.4.21","handlebars":"4.7.8","sass-embedded":"1.89.0","vite":"6.3.5","vite-plugin-node-polyfills":"0.23.0"},"overrides":{"rollup":"4.52.0"},"resolutions":{"rollup":"4.52.0"},"browserslist":["last 3 years"]}

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

@@ -1 +1 @@
-{"cacheVersion":207,"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":208,"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/icons/lucide/square-check.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="m9 12 2 2 4-4" />
+</svg>

public/manifest.json

@@ -1 +1 @@
-{"name":"Образовательная платформа Meetguru","short_name":"Образовательная платформа Meetguru","icons":[{"src":"images/48-favicon.png?_wwcv=207","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=207","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=207","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=207","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=207","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=207","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=207","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=207","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=207","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=207","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=208","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=208","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=208","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=208","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=208","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=208","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=208","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=208","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=208","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=208","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 = 207;
+const version = 208;
 self.addEventListener('install', event => {
     // eslint-disable-next-line no-console
     console.log(`Service worker v${version} installed`);

src/components/elements/element-14723a21-0178-4d92-a7e9-d1dfeaec29a7/src/wwElement.vue

@@ -1,243 +1,397 @@
 <template>
-    <div style="position: relative">
+  <div style="position: relative">
-        <div
+    <div
-            ref="dropdownElement"
+      ref="triggerElement"
-            @click="handleClick"
+      @click="handleClick"
-            @mouseenter="handleHoverIn"
+      @mouseenter="handleHoverIn"
-            @mouseleave="handleHoverOut"
+      @mouseleave="handleHoverOut"
-            @contextmenu.prevent="handleRightClick"
+      @contextmenu.prevent="handleRightClick"
-        >
+    >
-            <wwLayout class="layout content-layout" path="triggerLayout" />
+      <wwLayout class="layout content-layout" path="triggerLayout" />
-        </div>
-        <div :style="style" class="dropdown" ww-responsive="dropdown">
-            <div @mouseenter="handleHoverIn" @mouseleave="handleHoverOut">
-                <Transition :name="this.content.animated ? 'slide' : ''">
-                    <wwLayout
-                        v-if="isOpened || (this.content.forceDisplayEditor && this.isEditing)"
-                        path="dropdownLayout"
-                    />
-                </Transition>
-            </div>
-        </div>
     </div>
+    <teleport :to="appDiv" v-if="!delayedIsClosed">
+      <div
+        :style="style"
+        class="dropdown"
+        ww-responsive="dropdown"
+        ref="dropdownElement"
+      >
+        <div @mouseenter="handleHoverIn" @mouseleave="handleHoverOut">
+          <Transition :name="content.animated ? 'slide' : ''">
+            <wwLayout v-if="delayedIsOpen" path="dropdownLayout" />
+          </Transition>
+        </div>
+      </div>
+    </teleport>
+  </div>
 </template>
 
 <script>
+import {
+  ref,
+  useTemplateRef,
+  onUnmounted,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+} from "vue";
 export default {
-    props: {
+  props: {
-        content: { type: Object, required: true },
+    content: { type: Object, required: true },
-        wwFrontState: { type: Object, required: true },
+    wwFrontState: { type: Object, required: true },
-        wwEditorState: { type: Object, required: true },
-    },
-    data() {
-        return {
-            isOpened: false,
-            coordinates: { width: 0, height: 0 },
-            dropdownSize: 0,
-            isMouseInside: false,
-            timeoutId: 0,
-            resizeObserver: null,
-        };
-    },
-    computed: {
-        isEditing() {
 
-            // eslint-disable-next-line no-unreachable
+  },
-            return false;
+  data() {
-        },
+    return {
-        style() {
+      dropdownSize: 0,
-            const style = {};
+    };
-            const { position, alignment } = this.content;
+  },
-            const width = this.coordinates.width + "px";
+  setup(props) {
-            const height = this.coordinates.height + "px";
+    const appDiv = wwLib.getFrontDocument().querySelector("#app");
+    const isEditing = computed(() => {
 
-            const offsetX = this.content.offsetX !== undefined ? this.content.offsetX : "0px";
+      // eslint-disable-next-line no-unreachable
-            const offsetY = this.content.offsetY !== undefined ? this.content.offsetY : "0px";
+      return false;
+    });
+    const triggerElementRef = useTemplateRef("triggerElement");
+    const dropdownElementRef = useTemplateRef("dropdownElement");
 
-            const setStyles = (position) => {
+    const triggerBox = ref({});
-                if (position === "top" || position === "bottom") {
+    const synchronizeTriggerBox = () => {
-                    style[position] = `calc(${height} + ${offsetY})`;
+      if (!triggerElementRef?.value) return;
-                } else {
+      const box = triggerElementRef.value.getBoundingClientRect();
-                    style[position] = `calc(${width} + ${offsetX})`;
+      triggerBox.value = {
-                }
+        left: box.left,
-            };
+        right: box.right,
+        top: box.top,
+        bottom: box.bottom,
+        width: box.width,
+        height: box.height,
+      };
+    };
 
-            setStyles(this.getOppositeSide(position));
+    function onWindowClick(event) {
+      if (props.content.disabled) return;
+      if (
+        props.content.triggerType === "hover" &&
+        props.wwFrontState.screenSize === "default"
+      )
+        return;
+      if (
+        dropdownElementRef.value &&
+        dropdownElementRef.value.contains(event.target)
+      )
+        return;
+      if (
+        triggerElementRef.value &&
+        triggerElementRef.value.contains(event.target)
+      )
+        return;
+      isOpened.value = false;
+    }
 
-            if (this.content.animated) {
+    const isOpened = ref(false);
-                switch (position) {
+    const isDisplayed = computed(() => {
-                    case "top":
+      return (
-                        style["--slideOriginY"] = offsetY;
+        isOpened.value || (props.content.forceDisplayEditor && isEditing.value)
-                        break;
+      );
-                    case "bottom":
+    });
-                        style["--slideOriginY"] = `calc(-1 * ${offsetY})`;
+    const delayedIsOpen = ref(isDisplayed.value);
-                        style["--slideOriginX"] = "0px";
+    const delayedIsClosed = ref(!isDisplayed.value);
-                        break;
+    const timeoutId = ref(null);
-                    case "left":
-                        style["--slideOriginX"] = offsetX;
-                        style["--slideOriginY"] = "0px";
-                        break;
-                    case "right":
-                        style["--slideOriginX"] = `calc(-1 * ${offsetX})`;
-                        style["--slideOriginY"] = "0px";
-                        break;
-                }
-            }
 
-            switch (alignment) {
+    let resizeObserver = null;
-                case "start":
+    let scrollableParents = [];
-                    if (position === "top" || position === "bottom") {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = this.getOppositeSide(position) + " left";
-                        }
-                        style["left"] = offsetX;
-                        style["--slideOriginX"] = "-" + offsetX;
-                    } else {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = "top " + this.getOppositeSide(position);
-                        }
-                        style["top"] = offsetY;
-                    }
-                    break;
-                case "center":
-                    if (position === "top" || position === "bottom") {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = this.getOppositeSide(position) + " center";
-                        }
-                        style["transform"] = `translateX( calc(-50% + (${width} / 2) + ${offsetX}))`;
-                        style["--slideOriginX"] = `0px`;
-                    } else {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = "center " + this.getOppositeSide(position);
-                        }
-                        style["transform"] = `translateY( calc(-50% - (${height} / 2) + ${offsetY}))`;
-                        // style['top'] = `0`
-                        style["--slideOriginY"] = `calc(-0.5 * ((${width} / 2) + ${offsetX}))`;
-                    }
-                    break;
-                case "end":
-                    if (position === "top" || position === "bottom") {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = "center";
-                        }
-                        style["right"] = offsetX;
-                        style["--slideOriginX"] = offsetX;
-                    } else {
-                        if (this.content.animated) {
-                            style["--transformOrigin"] = "bottom " + this.getOppositeSide(position);
-                        }
-                        style["bottom"] = `calc(-1 * ${offsetY})`;
-                    }
-                    break;
-            }
 
-            style["z-index"] = this.content.dropdownZIndex || "unset";
+    function setScrollableParents(element) {
+      scrollableParents = [];
+      let p = element.parentNode;
+      while (p && p !== wwLib.getFrontDocument().body) {
+        const s = wwLib.getFrontWindow().getComputedStyle(p);
+        if (
+          /(auto|scroll|overlay)/.test(s.overflow + s.overflowY + s.overflowX)
+        )
+          scrollableParents.push(p);
+        p = p.parentNode;
+      }
+      scrollableParents.push(wwLib.getFrontWindow());
+    }
 
-            return style;
+    function startPositioningDropdown() {
-        },
+      synchronizeTriggerBox();
-    },
+      wwLib.getFrontDocument().addEventListener("click", onWindowClick);
-    beforeMount() {
+      resizeObserver = new ResizeObserver((entries) => {
-        wwLib.getFrontDocument().addEventListener("click", this.handleClickOutside);
+        const entry = entries[0];
-    },
+        triggerBox.value.width = entry.contentRect.width;
-    mounted() {
+        triggerBox.value.height = entry.contentRect.height;
-        const resizeObserver = new ResizeObserver(this.handleResize);
+      });
-        const containerElement = this.$refs.dropdownElement;
+      resizeObserver.observe(triggerElementRef.value);
-        resizeObserver.observe(containerElement);
+      setScrollableParents(triggerElementRef.value);
-    },
+      scrollableParents.forEach((p) => {
-    unmounted() {
+        p.addEventListener("scroll", synchronizeTriggerBox, { passive: true });
-        clearTimeout(this.timeoutId);
+        wwLib
-        if (this.resizeObserver) {
+          .getFrontWindow()
-            this.resizeObserver.disconnect();
+          .addEventListener("resize", synchronizeTriggerBox);
+      });
+    }
+
+    function stopPositioningDropdown() {
+      wwLib.getFrontDocument().removeEventListener("click", onWindowClick);
+      resizeObserver?.disconnect();
+      scrollableParents.forEach((p) => {
+        p.removeEventListener("scroll", synchronizeTriggerBox);
+        wwLib
+          .getFrontWindow()
+          .removeEventListener("resize", synchronizeTriggerBox);
+      });
+      scrollableParents = [];
+    }
+
+    watch(isDisplayed, (isDisplayed) => {
+      if (isDisplayed) {
+        startPositioningDropdown();
+        delayedIsClosed.value = false;
+        nextTick(() => {
+          delayedIsOpen.value = true;
+        });
+      } else {
+        stopPositioningDropdown();
+        delayedIsOpen.value = false;
+        nextTick(() => {
+          setTimeout(() => {
+            delayedIsClosed.value = true;
+          }, 250);
+        });
+      }
+    });
+
+    onMounted(() => {
+      if (isDisplayed.value) {
+        startPositioningDropdown();
+      }
+    });
+
+    onUnmounted(() => {
+      stopPositioningDropdown();
+      clearTimeout(timeoutId.value);
+    });
+
+    watch(
+      () => props.content.triggerType,
+      (newValue, oldValue) => {
+        if (newValue === oldValue) return;
+        isOpened.value = false;
+        clearTimeout(timeoutId.value);
+      }
+    );
+
+    return {
+      appDiv,
+      synchronizeTriggerBox,
+      triggerBox,
+      isOpened,
+      timeoutId,
+      isEditing,
+      isDisplayed,
+      delayedIsClosed,
+      delayedIsOpen,
+    };
+  },
+  computed: {
+    style() {
+      const style = {};
+      const position = this.content.position;
+      const alignment = this.content.alignment;
+
+      const offsetX =
+        this.content.offsetX !== undefined ? this.content.offsetX : "0px";
+      const offsetY =
+        this.content.offsetY !== undefined ? this.content.offsetY : "0px";
+
+      switch (position) {
+        case "top":
+          style[
+            "bottom"
+          ] = `calc(100% - ${this.triggerBox.bottom}px + ${this.triggerBox.height}px + ${offsetY})`;
+          break;
+        case "bottom":
+          style[
+            "top"
+          ] = `calc(${this.triggerBox.top}px + ${this.triggerBox.height}px + ${offsetY})`;
+          break;
+        case "left":
+          style[
+            "right"
+          ] = `calc(100% - ${this.triggerBox.right}px + ${this.triggerBox.width}px + ${offsetX})`;
+          break;
+        case "right":
+          style[
+            "left"
+          ] = `calc(${this.triggerBox.left}px + ${this.triggerBox.width}px + ${offsetX})`;
+          break;
+      }
+
+      if (this.content.animated) {
+        switch (position) {
+          case "top":
+            style["--slideOriginY"] = offsetY;
+            break;
+          case "bottom":
+            style["--slideOriginY"] = `calc(-1 * ${offsetY})`;
+            style["--slideOriginX"] = "0px";
+            break;
+          case "left":
+            style["--slideOriginX"] = offsetX;
+            style["--slideOriginY"] = "0px";
+            break;
+          case "right":
+            style["--slideOriginX"] = `calc(-1 * ${offsetX})`;
+            style["--slideOriginY"] = "0px";
+            break;
         }
-        wwLib.getFrontDocument().removeEventListener("click", this.handleClickOutside);
+      }
-    },
-    methods: {
-        handleClick() {
-            if (
-                this.content.triggerType === "click" ||
-                (this.wwFrontState.screenSize !== "default" && !this.isEditing)
-            ) {
-                if (!this.content.disabled) this.isOpened = !this.isOpened;
-            }
-        },
-        closeDropdown() {
-            this.isOpened = false;
-        },
-        handleClickOutside() {
-            if (
-                !this.isMouseInside &&
-                (this.content.triggerType === "click" ||
-                    this.content.triggerType === "right-click" ||
-                    this.wwFrontState.screenSize !== "default")
-            ) {
-                if (!this.content.disabled) this.isOpened = false;
-            }
-        },
-        handleHoverIn() {
-            if (this.content.triggerType === "hover" && this.wwFrontState.screenSize === "default" && !this.isEditing) {
-                clearTimeout(this.timeoutId);
-                if (!this.content.disabled) this.isOpened = true;
-            } else {
-                this.isMouseInside = true;
-            }
-        },
-        handleHoverOut() {
-            if (this.content.triggerType === "hover") {
-                this.timeoutId = setTimeout(() => {
-                    if (!this.content.disabled) this.isOpened = false;
-                }, 200);
-            } else {
-                this.isMouseInside = false;
-            }
-        },
-        handleRightClick() {
-            if (
-                this.content.triggerType === "right-click" ||
-                (this.wwFrontState.screenSize !== "default" && !this.isEditing)
-            ) {
-                if (!this.content.disabled) this.isOpened = !this.isOpened;
-            }
-        },
-        getOppositeSide(side) {
-            const transformations = {
-                top: "bottom",
-                bottom: "top",
-                left: "right",
-                right: "left",
-            };
 
-            return transformations[side];
+      switch (alignment) {
-        },
+        case "start":
-        handleResize(entries) {
+          if (position === "top" || position === "bottom") {
-            const entry = entries[0];
+            if (this.content.animated) {
-            this.coordinates.width = entry.contentRect.width;
+              style["--transformOrigin"] =
-            this.coordinates.height = entry.contentRect.height;
+                this.getOppositeSide(position) + " left";
-        },
+            }
+            style["left"] = `calc(${offsetX} + ${this.triggerBox.left}px)`;
+            style["--slideOriginX"] = "-" + offsetX;
+          } else {
+            if (this.content.animated) {
+              style["--transformOrigin"] =
+                "top " + this.getOppositeSide(position);
+            }
+            style["top"] = `calc(${this.triggerBox.top}px + ${offsetY})`;
+          }
+          break;
+        case "center":
+          if (position === "top" || position === "bottom") {
+            if (this.content.animated) {
+              style["--transformOrigin"] =
+                this.getOppositeSide(position) + " center";
+            }
+            style["left"] = `calc(${offsetX} + ${this.triggerBox.left}px)`;
+            style[
+              "transform"
+            ] = `translateX( calc(-50% + (${this.triggerBox.width}px / 2) + ${offsetX}))`;
+            style["--slideOriginX"] = `0px`;
+          } else {
+            if (this.content.animated) {
+              style["--transformOrigin"] =
+                "center " + this.getOppositeSide(position);
+            }
+            style["top"] = `calc(${this.triggerBox.top}px + ${offsetY})`;
+            style[
+              "transform"
+            ] = `translateY(calc(-50% + (${this.triggerBox.height}px / 2) + ${offsetY}))`;
+            style[
+              "--slideOriginY"
+            ] = `calc(-0.5 * ((${this.triggerBox.width}px / 2) + ${offsetX}))`;
+          }
+          break;
+        case "end":
+          if (position === "top" || position === "bottom") {
+            if (this.content.animated) {
+              style["--transformOrigin"] = "center";
+            }
+            style[
+              "right"
+            ] = `calc(100% - ${this.triggerBox.right}px + ${offsetX})`;
+            style["--slideOriginX"] = offsetX;
+          } else {
+            if (this.content.animated) {
+              style["--transformOrigin"] =
+                "bottom " + this.getOppositeSide(position);
+            }
+            style[
+              "bottom"
+            ] = `calc(100% - ${this.triggerBox.bottom}px + ${offsetY})`;
+          }
+          break;
+      }
+
+      style["z-index"] = this.content.dropdownZIndex || "unset";
+
+      return style;
     },
+  },
+  methods: {
+    handleClick() {
+      if (
+        this.content.triggerType === "click" ||
+        (this.wwFrontState.screenSize !== "default" && !this.isEditing)
+      ) {
+        if (!this.content.disabled) this.isOpened = !this.isOpened;
+      }
+    },
+    closeDropdown() {
+      this.isOpened = false;
+    },
+    handleHoverIn() {
+      if (
+        this.content.triggerType === "hover" &&
+        this.wwFrontState.screenSize === "default" &&
+        !this.isEditing
+      ) {
+        clearTimeout(this.timeoutId);
+        if (!this.content.disabled) this.isOpened = true;
+      }
+    },
+    handleHoverOut() {
+      if (this.content.triggerType === "hover") {
+        this.timeoutId = setTimeout(() => {
+          if (!this.content.disabled) this.isOpened = false;
+        }, 200);
+      }
+    },
+    handleRightClick() {
+      if (
+        this.content.triggerType === "right-click" ||
+        (this.wwFrontState.screenSize !== "default" && !this.isEditing)
+      ) {
+        if (!this.content.disabled) this.isOpened = !this.isOpened;
+      }
+    },
+    getOppositeSide(side) {
+      const transformations = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left",
+      };
+
+      return transformations[side];
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 :root {
-    --slideOriginX: 0px;
+  --slideOriginX: 0px;
-    --slideOriginY: 0px;
+  --slideOriginY: 0px;
-    --transformOrigin: top left;
+  --transformOrigin: top left;
 }
 
 .dropdown {
-    position: absolute;
+  position: fixed;
-    // transform: translateX(-50%)
 }
 
 .slide-enter-active,
 .slide-leave-active {
-    transition: all 0.2s ease;
+  transition: all 0.2s ease;
-    transform-origin: var(--transformOrigin);
+  transform-origin: var(--transformOrigin);
 }
 
 .slide-enter-from,
 .slide-leave-to {
-    opacity: 0;
+  opacity: 0;
-    transform: translate(var(--slideOriginX), var(--slideOriginY)) scale(0.1);
+  transform: translate(var(--slideOriginX), var(--slideOriginY)) scale(0.1);
 }
 </style>
+

src/components/elements/element-14723a21-0178-4d92-a7e9-d1dfeaec29a7/ww-config.js

@@ -23,6 +23,13 @@ export default {
           { value: "right-click", label: { en: "Right click" } }
         ],
       },
+      bindable: true,
+      classes: true,
+      states: true,
+      bindingValidation: {
+        type: 'string',
+        tooltip: 'A string that defines the trigger type of the dropdown. Possible values are click, hover, and right-click.',
+      }
     },
     position: {
       label: {
@@ -38,6 +45,14 @@ export default {
           { value: "left", label: { en: "Left" } },
         ],
       },
+      bindable: true,
+      classes: true,
+      states: true,
+      responsive: true,
+      bindingValidation: {
+        type: 'string',
+        tooltip: 'A string that defines the position of the dropdown. Possible values are top, right, bottom, and left.',
+      }
     },
     alignment: {
       label: { en: "Align" },
@@ -78,8 +93,14 @@ export default {
         }
       },
       defaultValue: "start",
+      bindable: true,
       classes: true,
       states: true,
+      responsive: true,
+      bindingValidation: {
+        type: 'string',
+        tooltip: 'A string that defines the alignment of the dropdown. Possible values are start, center, and end.',
+      }
     },
     offsetX: {
       type: "Length",

src/pinia/componentBases.js

@@ -20,7 +20,6 @@ import wwobject7179ba70c5d749a59828f85704fd1efc from '@/components/elements/elem
 import wwobject2dff59573bd846f9afa3a5c5bab91931 from '@/components/elements/element-2dff5957-3bd8-46f9-afa3-a5c5bab91931/ww-config.js';
 import wwobject3a7d637912d3438798ffb332bb492a63 from '@/components/elements/element-3a7d6379-12d3-4387-98ff-b332bb492a63/ww-config.js';
 import wwobjectb783dc65d5284f748c14e27c934c39b1 from '@/components/elements/element-b783dc65-d528-4f74-8c14-e27c934c39b1/ww-config.js';
-import wwobject14723a2101784d92a7e9d1dfeaec29a7 from '@/components/elements/element-14723a21-0178-4d92-a7e9-d1dfeaec29a7/ww-config.js';
 import wwobject53401515b6944c79a88dabeecb1de562 from '@/components/elements/element-53401515-b694-4c79-a88d-abeecb1de562/ww-config.js';
 import wwobject547a655e37cd49ff9c4fc6b917a0b680 from '@/components/elements/element-547a655e-37cd-49ff-9c4f-c6b917a0b680/ww-config.js';
 import wwobject6d692ca26cdc4805aa0c211102f335d0 from '@/components/elements/element-6d692ca2-6cdc-4805-aa0c-211102f335d0/ww-config.js';
@@ -33,6 +32,7 @@ import wwobjectdeb10a015eef4aa190171b51c2ad6fd0 from '@/components/elements/elem
 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 wwobjecteb4b02a3cbe647e98db5322da8047160 from '@/components/elements/element-eb4b02a3-cbe6-47e9-8db5-322da8047160/ww-config.js';
+import wwobject14723a2101784d92a7e9d1dfeaec29a7 from '@/components/elements/element-14723a21-0178-4d92-a7e9-d1dfeaec29a7/ww-config.js';
 import wwobject9896d6950c964a0fb587c25e879ece77 from '@/components/elements/element-9896d695-0c96-4a0f-b587-c25e879ece77/ww-config.js';
 import wwobjecta823467cbdc74ceca38c71875c4c214a from '@/components/elements/element-a823467c-bdc7-4cec-a38c-71875c4c214a/ww-config.js';
 import wwobject985570fcb3c04566800482ab3b30a11d from '@/components/elements/element-985570fc-b3c0-4566-8004-82ab3b30a11d/ww-config.js';
@@ -61,7 +61,6 @@ export const useComponentBasesStore = defineStore('componentBases', () => {
 'wwobject-2dff5957-3bd8-46f9-afa3-a5c5bab91931': getInheritedConfiguration({ ...wwobject2dff59573bd846f9afa3a5c5bab91931, name: 'wwobject-2dff5957-3bd8-46f9-afa3-a5c5bab91931' }),
 'wwobject-3a7d6379-12d3-4387-98ff-b332bb492a63': getInheritedConfiguration({ ...wwobject3a7d637912d3438798ffb332bb492a63, name: 'wwobject-3a7d6379-12d3-4387-98ff-b332bb492a63' }),
 'wwobject-b783dc65-d528-4f74-8c14-e27c934c39b1': getInheritedConfiguration({ ...wwobjectb783dc65d5284f748c14e27c934c39b1, name: 'wwobject-b783dc65-d528-4f74-8c14-e27c934c39b1' }),
-'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7': getInheritedConfiguration({ ...wwobject14723a2101784d92a7e9d1dfeaec29a7, name: 'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7' }),
 'wwobject-53401515-b694-4c79-a88d-abeecb1de562': getInheritedConfiguration({ ...wwobject53401515b6944c79a88dabeecb1de562, name: 'wwobject-53401515-b694-4c79-a88d-abeecb1de562' }),
 'wwobject-547a655e-37cd-49ff-9c4f-c6b917a0b680': getInheritedConfiguration({ ...wwobject547a655e37cd49ff9c4fc6b917a0b680, name: 'wwobject-547a655e-37cd-49ff-9c4f-c6b917a0b680' }),
 'wwobject-6d692ca2-6cdc-4805-aa0c-211102f335d0': getInheritedConfiguration({ ...wwobject6d692ca26cdc4805aa0c211102f335d0, name: 'wwobject-6d692ca2-6cdc-4805-aa0c-211102f335d0' }),
@@ -74,6 +73,7 @@ export const useComponentBasesStore = defineStore('componentBases', () => {
 '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-eb4b02a3-cbe6-47e9-8db5-322da8047160': getInheritedConfiguration({ ...wwobjecteb4b02a3cbe647e98db5322da8047160, name: 'wwobject-eb4b02a3-cbe6-47e9-8db5-322da8047160' }),
+'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7': getInheritedConfiguration({ ...wwobject14723a2101784d92a7e9d1dfeaec29a7, name: 'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7' }),
 'wwobject-9896d695-0c96-4a0f-b587-c25e879ece77': getInheritedConfiguration({ ...wwobject9896d6950c964a0fb587c25e879ece77, name: 'wwobject-9896d695-0c96-4a0f-b587-c25e879ece77' }),
 'wwobject-a823467c-bdc7-4cec-a38c-71875c4c214a': getInheritedConfiguration({ ...wwobjecta823467cbdc74ceca38c71875c4c214a, name: 'wwobject-a823467c-bdc7-4cec-a38c-71875c4c214a' }),
 'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d': getInheritedConfiguration({ ...wwobject985570fcb3c04566800482ab3b30a11d, name: 'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d' }),

src/wwLib/services/wwLang.js

@@ -3,7 +3,13 @@ export default {
     init(router) {
         if (!wwLib.wwWebsiteData.getInfo()) return;
         this.defaultLang = wwLib.wwWebsiteData.getInfo().langs.find(lang => lang.default)?.lang || 'en';
-        wwLib.$store.dispatch('front/setLang', router.resolve(window.location.pathname)?.meta?.lang?.lang);
+
+        const base = wwLib.useBaseTag() ? wwLib.getBaseTag() : '/';
+
+        wwLib.$store.dispatch(
+            'front/setLang',
+            router.resolve(window.location.pathname.replace(base, '/'))?.meta?.lang?.lang
+        );
     },
     /**
      * @PUBLIC_API

src/wwLib/services/wwWebsiteData.js

@@ -86,8 +86,11 @@ async function fetchData(pageId) {
 
     /* wwFront:start */
     try {
-        const lang = window.location.pathname.startsWith(`/${wwLib.wwLang.lang}/`) ? wwLib.wwLang.lang : '';
         const base = wwLib.useBaseTag() ? wwLib.getBaseTag() : '/';
+        const lang = window.location.pathname.replace(base, '/').startsWith(`/${wwLib.wwLang.lang}/`)
+            ? wwLib.wwLang.lang
+            : '';
+
         let url = `${base}data/${pageId.split('_')[0]}.json?wwlang=${lang}&_wwcv=${window.wwg_cacheVersion}`;
 
         const {

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=207" />
+        <link rel="manifest" href="manifest.json?_wwcv=208" />
         <meta name="theme-color" content="" />
-        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=207">
+        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=208">
-<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=207">
+<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=208">
         <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=207" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<link href="/fonts/Phosphor/font.css?_wwcv=208" 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>