js-kompo-utils 1.0.7 → 1.0.9

package/components/VlTutorialStepBuilder.vue

@@ -257,7 +257,7 @@
                 <div v-show="cards.conditions" class="sb-card-body">
                     <div class="sb-row">
                         <label class="sb-lbl">Show If</label>
-                        <input :value="step.showIf || ''" @input="setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="CSS selector">
+                        <input :value="step.showIf || ''" @input="setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="permission:X, role:X, selector:.css">
                     </div>
                 </div>
             </div>

package/package.json

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

package/tutorials/TutorialConfig.js

@@ -3,7 +3,7 @@
  */
 export class TutorialConfig {
     static DEFAULTS = {
-        avatar: '/images/tutorial-avatar.png',
+        avatar: '/images/tutorial-avatar.webp',
         cursorImage: null,
         cursorSize: 'clamp(32px, 8vw, 48px)',
         avatarHeight: 'clamp(200px, 50vh, 475px)',

package/tutorials/TutorialEngine.js

@@ -181,6 +181,10 @@ export class TutorialEngine {
     }
 
     _wireButtons() {
+        if (this.bubble.closeBtn) {
+            this.bubble.closeBtn.addEventListener('click', () => { this._close(); });
+        }
+
         if (this.bubble.actionBtn) {
             this.bubble.actionBtn.addEventListener('click', () => { this._advance(); });
         }
@@ -228,11 +232,17 @@ export class TutorialEngine {
         const devMode = this.config.get('devMode');
 
         if (step.showIf) {
-            const sel = typeof step.showIf === 'string' ? step.showIf : step.showIf.selector;
-            if (sel && !document.querySelector(sel)) {
-                const nextIdx = index + this._lastDirection;
-                if (nextIdx >= 0 && nextIdx < this.steps.length) this._showStep(nextIdx);
-                return;
+            const raw = typeof step.showIf === 'string' ? step.showIf : step.showIf.selector;
+            // Client-side: only evaluate "selector:.css-selector" conditions
+            // Server-side conditions (permission:, setting:, role:) are already
+            // filtered by TutorialProcessor before reaching the client
+            if (raw && raw.startsWith('selector:')) {
+                const sel = raw.slice('selector:'.length);
+                if (sel && !document.querySelector(sel)) {
+                    const nextIdx = index + this._lastDirection;
+                    if (nextIdx >= 0 && nextIdx < this.steps.length) this._showStep(nextIdx);
+                    return;
+                }
             }
         }
 

package/tutorials/modules/Bubble.js

@@ -29,6 +29,12 @@ export class Bubble {
         this.el.style.fontSize = config.bubbleFontSize;
         this.el.style.lineHeight = config.bubbleLineHeight;
 
+        this.closeBtn = document.createElement('button');
+        this.closeBtn.className = 'tutorial-close-btn';
+        this.closeBtn.setAttribute('aria-label', 'Close tutorial');
+        this.closeBtn.textContent = '\u00D7';
+        this.el.appendChild(this.closeBtn);
+
         this.arrowEl = document.createElement('div');
         this.arrowEl.className = 'tutorial-arrow';
         this.el.appendChild(this.arrowEl);
@@ -209,6 +215,7 @@ export class Bubble {
         this.actionBtn = null;
         this.backBtn = null;
         this.pauseBtn = null;
+        this.closeBtn = null;
     }
 
     // --- Private: mobile positioning (CSS flexbox, no @floating-ui) ---

package/tutorials/tutorial.scss

@@ -213,6 +213,32 @@
     }
 }
 
+// === Close button (top-right of bubble) ===
+.tutorial-close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.06);
+    color: #999;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+    z-index: 1;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.12);
+        color: #333;
+    }
+}
+
 .tutorial-text {
     margin: 0;
     max-height: clamp(150px, 40vh, 300px);