js-kompo-utils 1.0.6 → 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/orchestrator/KompoJsBuilder.js

@@ -350,8 +350,9 @@ export class KompoJsInitializer {
 
     bootBroadcastingIfRequired() {
         if (this.config.includeBroadcasting) {
-            const Echo = require("laravel-echo");
-            this.window.Pusher = require('pusher-js'); // We usually use pusher, but if user want can set another way
+            const EchoModule = require("laravel-echo");
+            const Echo = EchoModule.default || EchoModule;
+            this.window.Pusher = require('pusher-js');
 
             this.window.Echo = new Echo(this.config.echoBroadcasterConfig);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.6",
+  "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;
+                }
             }
         }