js-kompo-utils 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/VlTutorialStepBuilder.vue +30 -9
  2. package/package.json +1 -1
  3. package/tutorials/modules/Bubble.js +31 -6
package/components/VlTutorialStepBuilder.vue CHANGED
@@ -77,30 +77,41 @@
77
77
  <template v-if="step.position === 'custom'">
78
78
  <div class="sb-row">
79
79
  <label class="sb-lbl">Left</label>
80
- <input v-model="step.bubbleLeft" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
80
+ <input :value="step.bubbleLeft || ''" @input="setStepProp('bubbleLeft', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
81
81
  </div>
82
82
  <div class="sb-row">
83
83
  <label class="sb-lbl">Top</label>
84
- <input v-model="step.bubbleTop" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
84
+ <input :value="step.bubbleTop || ''" @input="setStepProp('bubbleTop', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
85
85
  </div>
86
86
  </template>
87
87
  <div class="sb-row">
88
- <label class="sb-lbl">Align</label>
88
+ <label class="sb-lbl">Avatar Pos</label>
89
89
  <select v-model="step.align" @change="previewNow()" class="sb-input">
90
90
  <option value="left">Left</option>
91
91
  <option value="center">Center</option>
92
92
  <option value="right">Right</option>
93
+ <option value="custom">Custom (manual)</option>
93
94
  </select>
94
95
  </div>
96
+ <template v-if="step.align === 'custom'">
97
+ <div class="sb-row">
98
+ <label class="sb-lbl">Left</label>
99
+ <input :value="step.avatarLeft || ''" @input="setStepProp('avatarLeft', $event.target.value)" class="sb-input" placeholder="e.g. 30%, 200px">
100
+ </div>
101
+ <div class="sb-row">
102
+ <label class="sb-lbl">Top</label>
103
+ <input :value="step.avatarTop || ''" @input="setStepProp('avatarTop', $event.target.value)" class="sb-input" placeholder="e.g. 60%, 400px">
104
+ </div>
105
+ </template>
95
106
  <!-- Avatar size override -->
96
107
  <div class="sb-row">
97
108
  <label class="sb-lbl">Avatar Size</label>
98
- <input v-model="step.avatarSize" @input="applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
109
+ <input :value="step.avatarSize || ''" @input="setStepProp('avatarSize', $event.target.value); applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
99
110
  </div>
100
111
  <label class="sb-check"><input type="checkbox" v-model="chatMode" @change="previewNow()"> Chat Mode</label>
101
112
  <div class="sb-row sb-row--pick">
102
113
  <label class="sb-lbl">Target</label>
103
- <input v-model="step.positionTarget" class="sb-input" placeholder="CSS selector">
114
+ <input :value="step.positionTarget || ''" @input="setStepProp('positionTarget', $event.target.value)" class="sb-input" placeholder="CSS selector">
104
115
  <button class="sb-pick" @click="pick('positionTarget')">Pick</button>
105
116
  </div>
106
117
  </div>
@@ -172,7 +183,7 @@
172
183
  <div v-show="cards.scroll" class="sb-card-body">
173
184
  <div class="sb-row sb-row--pick">
174
185
  <label class="sb-lbl">Scroll To</label>
175
- <input v-model="step.scrollTo" class="sb-input">
186
+ <input :value="step.scrollTo || ''" @input="setStepProp('scrollTo', $event.target.value)" class="sb-input">
176
187
  <button class="sb-pick" @click="pickField('scrollTo')">Pick</button>
177
188
  </div>
178
189
  </div>
@@ -208,12 +219,12 @@
208
219
  <div v-show="cards.actions" class="sb-card-body">
209
220
  <div class="sb-row sb-row--pick">
210
221
  <label class="sb-lbl">Silent Click</label>
211
- <input v-model="step.silentClick" class="sb-input">
222
+ <input :value="step.silentClick || ''" @input="setStepProp('silentClick', $event.target.value)" class="sb-input">
212
223
  <button class="sb-pick" @click="pickField('silentClick')">Pick</button>
213
224
  </div>
214
225
  <div class="sb-row">
215
226
  <label class="sb-lbl">Redirect</label>
216
- <input v-model="step.redirect" class="sb-input" placeholder="/url">
227
+ <input :value="step.redirect || ''" @input="setStepProp('redirect', $event.target.value)" class="sb-input" placeholder="/url">
217
228
  </div>
218
229
  </div>
219
230
  </div>
@@ -246,7 +257,7 @@
246
257
  <div v-show="cards.conditions" class="sb-card-body">
247
258
  <div class="sb-row">
248
259
  <label class="sb-lbl">Show If</label>
249
- <input v-model="step.showIf" class="sb-input" placeholder="CSS selector">
260
+ <input :value="step.showIf || ''" @input="setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="CSS selector">
250
261
  </div>
251
262
  </div>
252
263
  </div>
@@ -482,6 +493,16 @@ export default {
482
493
  this.previewNow();
483
494
  },
484
495
 
496
+ // --- Reactive step property setter (Vue 2 needs $set for new keys) ---
497
+ setStepProp(key, value) {
498
+ if (value) {
499
+ this.$set(this.step, key, value);
500
+ } else {
501
+ this.$delete(this.step, key);
502
+ }
503
+ this.previewNow();
504
+ },
505
+
485
506
  // --- Generic field pick ---
486
507
  async pickField(prop) {
487
508
  const sel = await pickElement();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "js-kompo-utils",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "",
5
5
  "main": "app.js",
6
6
  "scripts": {
package/tutorials/modules/Bubble.js CHANGED
@@ -432,16 +432,41 @@ export class Bubble {
432
432
 
433
433
  if (!this.el) return;
434
434
 
435
- // Move avatar to the align position (left/center/right of screen)
435
+ // Position avatar: preset align or custom left/top
436
436
  if (container) {
437
- const alignMap = { left: 'flex-start', center: 'center', right: 'flex-end' };
438
- container.style.justifyContent = alignMap[align] || 'center';
437
+ if (align === 'custom') {
438
+ // Custom avatar position — absolute coordinates
439
+ container.style.justifyContent = '';
440
+ container.style.alignItems = '';
441
+ if (container.firstElementChild) {
442
+ const wrapper = container.firstElementChild;
443
+ wrapper.style.position = 'fixed';
444
+ wrapper.style.left = step.avatarLeft || '50%';
445
+ wrapper.style.top = step.avatarTop || '50%';
446
+ wrapper.style.alignSelf = '';
447
+ }
448
+ } else {
449
+ const alignMap = { left: 'flex-start', center: 'center', right: 'flex-end' };
450
+ container.style.justifyContent = alignMap[align] || 'center';
451
+ // Reset custom positioning on wrapper
452
+ if (container.firstElementChild) {
453
+ const wrapper = container.firstElementChild;
454
+ wrapper.style.position = '';
455
+ wrapper.style.left = '';
456
+ wrapper.style.top = '';
457
+ }
458
+ }
439
459
  }
440
460
 
441
461
  // Apply per-step avatar size override
442
- if (step.avatarSize && img) {
443
- img.style.height = step.avatarSize;
444
- img.style.maxHeight = step.avatarSize;
462
+ if (img) {
463
+ if (step.avatarSize) {
464
+ img.style.height = step.avatarSize;
465
+ img.style.maxHeight = step.avatarSize;
466
+ } else {
467
+ img.style.height = config.avatarHeight || '';
468
+ img.style.maxHeight = config.avatarMaxHeight || '';
469
+ }
445
470
  }
446
471
 
447
472
  // Custom position mode: manual left/top values, no floating-ui