js-kompo-utils 1.0.7 → 1.0.8

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.8",
   "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

@@ -228,11 +228,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;
+                }
             }
         }