js-kompo-utils 1.0.0 → 1.0.2

package/components/VlTutorialStepBuilder.vue

@@ -77,30 +77,41 @@
                     <template v-if="step.position === 'custom'">
                         <div class="sb-row">
                             <label class="sb-lbl">Left</label>
-                            <input v-model="step.bubbleLeft" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
+                            <input :value="step.bubbleLeft || ''" @input="setStepProp('bubbleLeft', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
                         </div>
                         <div class="sb-row">
                             <label class="sb-lbl">Top</label>
-                            <input v-model="step.bubbleTop" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
+                            <input :value="step.bubbleTop || ''" @input="setStepProp('bubbleTop', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
                         </div>
                     </template>
                     <div class="sb-row">
-                        <label class="sb-lbl">Align</label>
+                        <label class="sb-lbl">Avatar Pos</label>
                         <select v-model="step.align" @change="previewNow()" class="sb-input">
                             <option value="left">Left</option>
                             <option value="center">Center</option>
                             <option value="right">Right</option>
+                            <option value="custom">Custom (manual)</option>
                         </select>
                     </div>
+                    <template v-if="step.align === 'custom'">
+                        <div class="sb-row">
+                            <label class="sb-lbl">Left</label>
+                            <input :value="step.avatarLeft || ''" @input="setStepProp('avatarLeft', $event.target.value)" class="sb-input" placeholder="e.g. 30%, 200px">
+                        </div>
+                        <div class="sb-row">
+                            <label class="sb-lbl">Top</label>
+                            <input :value="step.avatarTop || ''" @input="setStepProp('avatarTop', $event.target.value)" class="sb-input" placeholder="e.g. 60%, 400px">
+                        </div>
+                    </template>
                     <!-- Avatar size override -->
                     <div class="sb-row">
                         <label class="sb-lbl">Avatar Size</label>
-                        <input v-model="step.avatarSize" @input="applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
+                        <input :value="step.avatarSize || ''" @input="setStepProp('avatarSize', $event.target.value); applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
                     </div>
                     <label class="sb-check"><input type="checkbox" v-model="chatMode" @change="previewNow()"> Chat Mode</label>
                     <div class="sb-row sb-row--pick">
                         <label class="sb-lbl">Target</label>
-                        <input v-model="step.positionTarget" class="sb-input" placeholder="CSS selector">
+                        <input :value="step.positionTarget || ''" @input="setStepProp('positionTarget', $event.target.value)" class="sb-input" placeholder="CSS selector">
                         <button class="sb-pick" @click="pick('positionTarget')">Pick</button>
                     </div>
                 </div>
@@ -172,7 +183,7 @@
                 <div v-show="cards.scroll" class="sb-card-body">
                     <div class="sb-row sb-row--pick">
                         <label class="sb-lbl">Scroll To</label>
-                        <input v-model="step.scrollTo" class="sb-input">
+                        <input :value="step.scrollTo || ''" @input="setStepProp('scrollTo', $event.target.value)" class="sb-input">
                         <button class="sb-pick" @click="pickField('scrollTo')">Pick</button>
                     </div>
                 </div>
@@ -208,12 +219,12 @@
                 <div v-show="cards.actions" class="sb-card-body">
                     <div class="sb-row sb-row--pick">
                         <label class="sb-lbl">Silent Click</label>
-                        <input v-model="step.silentClick" class="sb-input">
+                        <input :value="step.silentClick || ''" @input="setStepProp('silentClick', $event.target.value)" class="sb-input">
                         <button class="sb-pick" @click="pickField('silentClick')">Pick</button>
                     </div>
                     <div class="sb-row">
                         <label class="sb-lbl">Redirect</label>
-                        <input v-model="step.redirect" class="sb-input" placeholder="/url">
+                        <input :value="step.redirect || ''" @input="setStepProp('redirect', $event.target.value)" class="sb-input" placeholder="/url">
                     </div>
                 </div>
             </div>
@@ -246,7 +257,7 @@
                 <div v-show="cards.conditions" class="sb-card-body">
                     <div class="sb-row">
                         <label class="sb-lbl">Show If</label>
-                        <input v-model="step.showIf" class="sb-input" placeholder="CSS selector">
+                        <input :value="step.showIf || ''" @input="setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="CSS selector">
                     </div>
                 </div>
             </div>
@@ -482,6 +493,16 @@ export default {
             this.previewNow();
         },
 
+        // --- Reactive step property setter (Vue 2 needs $set for new keys) ---
+        setStepProp(key, value) {
+            if (value) {
+                this.$set(this.step, key, value);
+            } else {
+                this.$delete(this.step, key);
+            }
+            this.previewNow();
+        },
+
         // --- Generic field pick ---
         async pickField(prop) {
             const sel = await pickElement();

package/components/getAllDefaultComponents.js

@@ -1,12 +1,14 @@
 export function getAllDefaultComponents() {
     const defaultComponents = {};
-    
-    const files = require.context('.', true, /\.vue$/i)
-    
-    files.keys().map(file => {
-        const componentName = file.match(/\.\/(.*)\.vue/)[1];
-        defaultComponents[componentName] = files(file).default;
+
+    const files = require.context('.', false, /\.vue$/i)
+
+    files.keys().forEach(file => {
+        const match = file.match(/^\.\/([\w-]+)\.vue$/);
+        if (match) {
+            defaultComponents[match[1]] = files(file).default;
+        }
     });
-    
+
     return defaultComponents;
 }

package/package.json

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

package/tutorials/modules/Bubble.js

@@ -432,16 +432,41 @@ export class Bubble {
 
         if (!this.el) return;
 
-        // Move avatar to the align position (left/center/right of screen)
+        // Position avatar: preset align or custom left/top
         if (container) {
-            const alignMap = { left: 'flex-start', center: 'center', right: 'flex-end' };
-            container.style.justifyContent = alignMap[align] || 'center';
+            if (align === 'custom') {
+                // Custom avatar position — absolute coordinates
+                container.style.justifyContent = '';
+                container.style.alignItems = '';
+                if (container.firstElementChild) {
+                    const wrapper = container.firstElementChild;
+                    wrapper.style.position = 'fixed';
+                    wrapper.style.left = step.avatarLeft || '50%';
+                    wrapper.style.top = step.avatarTop || '50%';
+                    wrapper.style.alignSelf = '';
+                }
+            } else {
+                const alignMap = { left: 'flex-start', center: 'center', right: 'flex-end' };
+                container.style.justifyContent = alignMap[align] || 'center';
+                // Reset custom positioning on wrapper
+                if (container.firstElementChild) {
+                    const wrapper = container.firstElementChild;
+                    wrapper.style.position = '';
+                    wrapper.style.left = '';
+                    wrapper.style.top = '';
+                }
+            }
         }
 
         // Apply per-step avatar size override
-        if (step.avatarSize && img) {
-            img.style.height = step.avatarSize;
-            img.style.maxHeight = step.avatarSize;
+        if (img) {
+            if (step.avatarSize) {
+                img.style.height = step.avatarSize;
+                img.style.maxHeight = step.avatarSize;
+            } else {
+                img.style.height = config.avatarHeight || '';
+                img.style.maxHeight = config.avatarMaxHeight || '';
+            }
         }
 
         // Custom position mode: manual left/top values, no floating-ui