js-kompo-utils 1.0.9 → 1.0.11

package/components/VlDropdown.vue

@@ -0,0 +1,265 @@
+<template>
+    <div
+        :tabindex="0"
+        v-bind="$_attributes"
+        @mouseenter="onRootMouseEnter"
+        @mouseleave="onRootMouseLeave"
+        @keyup.space="toggleForceOpen"
+        ref="dropdownRoot"
+    >
+
+        <component
+            v-bind="$_togglerAttributes"
+            v-turbo-click="component.turbo"
+            @click="checkClickable">
+
+            <span class="flex items-center" v-html="$_fullLabel" />
+
+        </component>
+
+        <div class="vlDropdownMenu"
+            :class="menuClass"
+            :style="menuPositionStyle"
+            ref="dropdownMenu"
+            @mouseenter="onMenuMouseEnter"
+            @mouseleave="onMenuMouseLeave">
+            <component
+                v-for="(col,index) in elements"
+                :key="index"
+                v-on="{ ...col.on, click: () => $emit('click', col)}"
+                v-bind="$_defaultLayoutAttributes(col)"
+            />
+        </div>
+
+    </div>
+</template>
+
+<script>
+import MenuItem from 'vue-kompo/js/menu/mixins/MenuItem'
+import HasSubmenu from 'vue-kompo/js/menu/mixins/HasSubmenu'
+
+export default {
+    mixins: [MenuItem, HasSubmenu],
+    data(){
+        return {
+            open: false,
+            forcedOpen: false,
+            isHoveringRoot: false,
+            isHoveringMenu: false,
+            menuTop: -9999,
+            menuLeft: -9999,
+            menuRight: null,
+        }
+    },
+    watch:{
+        'vkompo.elements': function () {
+            this.elements = { ...this.vkompo.elements }
+        },
+        'vkompo.label': function () {
+            this.component = { ...this.component, label: this.vkompo.label }
+        },
+        shouldShowMenu(visible) {
+            if (visible) {
+                this.updatePosition()
+            }
+            if (!visible && this.openOnClick) {
+                this.open = false
+            }
+        }
+    },
+    computed: {
+        shouldShowMenu() {
+            if (this.forcedOpen) return true
+            const hovering = this.isHoveringRoot || this.isHoveringMenu
+            if (this.openOnClick) return this.open && hovering
+            return hovering
+        },
+        dropdownPosition() {
+            return this.$_config('dropdownPosition') || ''
+        },
+        isRightAligned() {
+            return this.dropdownPosition.includes('Right')
+        },
+        isUpward() {
+            return this.dropdownPosition.includes('Up')
+        },
+        menuPositionStyle() {
+            const style = {
+                position: 'fixed',
+                top: this.menuTop + 'px',
+                bottom: 'auto',
+                zIndex: 9999,
+                transition: 'transform 0.2s ease-in-out, opacity 0.2s ease-in-out',
+                transformOrigin: (this.isUpward ? 'bottom' : 'top') + ' ' + (this.isRightAligned ? 'right' : 'left'),
+            }
+
+            if (this.menuRight !== null) {
+                style.left = 'auto'
+                style.right = this.menuRight + 'px'
+            } else {
+                style.left = this.menuLeft + 'px'
+                style.right = 'auto'
+            }
+
+            if (this.shouldShowMenu) {
+                style.transform = 'scale(1)'
+                style.opacity = '1'
+                style.pointerEvents = 'auto'
+            } else {
+                style.transform = 'scale(0)'
+                style.opacity = '0'
+                style.pointerEvents = 'none'
+            }
+
+            return style
+        },
+        $_customClassArray(){
+            return [
+                this.$_config('active'),
+                this.forcedOpen ? 'vlForcedOpen' : '',
+            ]
+        },
+        togglerClass(){
+            return this.$_classString([
+                'vlDropdownToggler',
+                'vlTogglerClosed',
+                this.$_config('togglerClass'),
+            ])
+        },
+        menuClass(){
+            return this.$_classString([
+                'vlMenuClosed',
+                this.$_config('menuNoBorder') ? 'vlNoBorder' : '',
+                this.dropdownPosition,
+            ])
+        },
+        openOnClick(){
+            return this.$_config('openOnClick')
+        }
+    },
+    mounted() {
+        this.teleportMenu()
+        this.setupListeners()
+    },
+    beforeDestroy() {
+        this.cleanupMenu()
+        this.removeListeners()
+    },
+    methods:{
+        teleportMenu() {
+            const menu = this.$refs.dropdownMenu
+            const root = this.$refs.dropdownRoot
+            if (!menu) return
+
+            // Transfer scroll styles from root before teleporting
+            if (root && root.classList.contains('dropdown-with-scroll')) {
+                const maxHeight = getComputedStyle(root).getPropertyValue('--dropdown-max-height').trim()
+                if (maxHeight) {
+                    menu.style.maxHeight = maxHeight
+                    menu.style.overflowY = 'auto'
+                    menu.classList.add('mini-scroll')
+                }
+            }
+
+            document.body.appendChild(menu)
+        },
+        cleanupMenu() {
+            const menu = this.$refs.dropdownMenu
+            if (menu && menu.parentNode === document.body) {
+                document.body.removeChild(menu)
+            }
+            if (this._closeTimeout) {
+                clearTimeout(this._closeTimeout)
+            }
+        },
+        setupListeners() {
+            this._scrollHandler = () => {
+                if (this.shouldShowMenu) {
+                    requestAnimationFrame(() => this.updatePosition())
+                }
+            }
+            this._resizeHandler = () => {
+                if (this.shouldShowMenu) {
+                    this.updatePosition()
+                }
+            }
+            window.addEventListener('scroll', this._scrollHandler, true)
+            window.addEventListener('resize', this._resizeHandler, { passive: true })
+        },
+        removeListeners() {
+            if (this._scrollHandler) {
+                window.removeEventListener('scroll', this._scrollHandler, true)
+            }
+            if (this._resizeHandler) {
+                window.removeEventListener('resize', this._resizeHandler)
+            }
+        },
+        updatePosition() {
+            const root = this.$refs.dropdownRoot
+            const menu = this.$refs.dropdownMenu
+            if (!root) return
+
+            const rect = root.getBoundingClientRect()
+
+            if (this.isUpward) {
+                const menuHeight = menu ? menu.offsetHeight : 0
+                this.menuTop = rect.top - menuHeight
+            } else {
+                this.menuTop = rect.bottom
+            }
+
+            if (this.isRightAligned) {
+                this.menuRight = window.innerWidth - rect.right
+                this.menuLeft = -9999
+            } else {
+                this.menuLeft = rect.left
+                this.menuRight = null
+            }
+        },
+        onRootMouseEnter() {
+            this.isHoveringRoot = true
+            this.clearCloseTimeout()
+        },
+        onRootMouseLeave() {
+            this.isHoveringRoot = false
+            this.scheduleClose()
+        },
+        onMenuMouseEnter() {
+            this.isHoveringMenu = true
+            this.clearCloseTimeout()
+        },
+        onMenuMouseLeave() {
+            this.isHoveringMenu = false
+            this.scheduleClose()
+        },
+        clearCloseTimeout() {
+            if (this._closeTimeout) {
+                clearTimeout(this._closeTimeout)
+                this._closeTimeout = null
+            }
+        },
+        scheduleClose() {
+            this.clearCloseTimeout()
+            this._closeTimeout = setTimeout(() => {
+                if (!this.isHoveringRoot && !this.isHoveringMenu) {
+                    if (this.openOnClick) {
+                        this.open = false
+                    }
+                }
+            }, 80)
+        },
+        checkClickable(){
+            if(this.openOnClick){
+                this.open = true
+            }
+
+            this.forcedOpen = false
+
+            this.$_clickAction()
+        },
+        toggleForceOpen(){
+            this.forcedOpen = !this.forcedOpen
+        }
+    }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "main": "app.js",
   "scripts": {

package/tutorials/modules/Bubble.js

@@ -32,7 +32,7 @@ export class Bubble {
         this.closeBtn = document.createElement('button');
         this.closeBtn.className = 'tutorial-close-btn';
         this.closeBtn.setAttribute('aria-label', 'Close tutorial');
-        this.closeBtn.textContent = '\u00D7';
+        this.closeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/></svg>';
         this.el.appendChild(this.closeBtn);
 
         this.arrowEl = document.createElement('div');

package/tutorials/tutorial.scss

@@ -216,25 +216,25 @@
 // === Close button (top-right of bubble) ===
 .tutorial-close-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 28px;
-    height: 28px;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
     border: none;
     border-radius: 50%;
-    background: rgba(0, 0, 0, 0.06);
-    color: #999;
-    font-size: 18px;
+    background: none;
+    color: #aaa;
+    font-size: 20px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s, color 0.15s;
-    z-index: 1;
+    transition: color 0.15s;
+    z-index: 2;
+    padding: 0;
 
     &:hover {
-        background: rgba(0, 0, 0, 0.12);
         color: #333;
     }
 }