js-kompo-utils 1.0.14 → 1.0.16

package/components/step-builder/cards/SbCursorCard.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.cursor }">
+        <div class="sb-card-head" @click="sb.toggle('cursor')">
+            <span>CURSOR</span>
+            <span class="sb-chevron">{{ sb.cards.cursor ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.cursor" class="sb-card-body">
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">From</label>
+                <input :value="sb.step.cursor && sb.step.cursor.from || ''" @input="setCursor('from', $event.target.value)" class="sb-input">
+                <button class="sb-pick" @click="pickCursor('from')">Pick</button>
+            </div>
+            <div v-if="sb.step.cursor && sb.step.cursor.fromAnchor" class="sb-row">
+                <span class="sb-badge">anchor: {{ sb.step.cursor.fromAnchor.x }}, {{ sb.step.cursor.fromAnchor.y }}</span>
+                <button class="sb-pick sb-pick--danger sb-btn-sm" @click="clearAnchor('fromAnchor')">&times;</button>
+            </div>
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">To</label>
+                <input :value="sb.step.cursor && sb.step.cursor.to || ''" @input="setCursor('to', $event.target.value)" class="sb-input">
+                <button class="sb-pick" @click="pickCursor('to')">Pick</button>
+            </div>
+            <div v-if="sb.step.cursor && sb.step.cursor.toAnchor" class="sb-row">
+                <span class="sb-badge">anchor: {{ sb.step.cursor.toAnchor.x }}, {{ sb.step.cursor.toAnchor.y }}</span>
+                <button class="sb-pick sb-pick--danger sb-btn-sm" @click="clearAnchor('toAnchor')">&times;</button>
+            </div>
+            <div class="sb-row">
+                <label class="sb-lbl">Duration</label>
+                <input type="number" :value="sb.step.cursor && sb.step.cursor.duration || 1.5" @input="setCursor('duration', parseFloat($event.target.value) || 1.5)" class="sb-input sb-input--num" step="0.1">
+            </div>
+            <div class="sb-row">
+                <label class="sb-check"><input type="checkbox" :checked="!!(sb.step.cursor && sb.step.cursor.click)" @change="setCursor('click', $event.target.checked)"> Click</label>
+                <label class="sb-check"><input type="checkbox" :checked="!!(sb.step.cursor && sb.step.cursor.loop)" @change="setCursor('loop', $event.target.checked)"> Loop</label>
+            </div>
+            <div v-if="sb.step.cursor" style="margin-top:8px">
+                <label class="sb-lbl">WAYPOINTS</label>
+                <div v-for="(wp, wi) in (sb.step.cursor.waypoints || [])" :key="wi" class="sb-wp-row">
+                    <div class="sb-row sb-row--pick" style="margin-bottom:4px">
+                        <input :value="wp.target" @input="setWaypoint(wi, 'target', $event.target.value)" class="sb-input" placeholder="selector">
+                        <button class="sb-pick" @click="pickWaypoint(wi)">Pick</button>
+                    </div>
+                    <div class="sb-row">
+                        <select :value="wp.action || 'path'" @change="setWaypoint(wi, 'action', $event.target.value)" class="sb-input sb-input--sm">
+                            <option value="path">Path</option>
+                            <option value="click">Click</option>
+                            <option value="hover">Hover</option>
+                        </select>
+                        <input type="number" :value="wp.pause || 0" @input="setWaypoint(wi, 'pause', parseFloat($event.target.value) || 0)" class="sb-input sb-input--num" step="0.1" placeholder="pause">
+                        <button class="sb-pick sb-pick--danger" @click="removeWaypoint(wi)">&times;</button>
+                    </div>
+                </div>
+                <button class="sb-btn sb-btn-sm sb-btn-green" @click="addWaypoint">+ Waypoint</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        ensureCursor() {
+            if (!this.sb.step.cursor) this.$set(this.sb.step, 'cursor', {});
+        },
+        setCursor(key, val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 cursor.' + key);
+            this.ensureCursor();
+            this.$set(this.sb.step.cursor, key, val);
+            if (!this.sb.step.cursor.from && !this.sb.step.cursor.to) {
+                this.$delete(this.sb.step, 'cursor');
+            }
+        },
+        async pickCursor(key) {
+            const { pickElement } = await import('../../../tutorials/step-builder/utils/element-picker.js');
+            const sel = await pickElement();
+            if (sel) this.setCursor(key, sel);
+        },
+        addWaypoint() {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 add waypoint');
+            this.ensureCursor();
+            if (!this.sb.step.cursor.waypoints) this.$set(this.sb.step.cursor, 'waypoints', []);
+            this.sb.step.cursor.waypoints.push({ target: '', action: 'path', pause: 0 });
+        },
+        removeWaypoint(wi) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 remove waypoint');
+            this.sb.step.cursor.waypoints.splice(wi, 1);
+            if (!this.sb.step.cursor.waypoints.length) this.$delete(this.sb.step.cursor, 'waypoints');
+        },
+        setWaypoint(wi, key, val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 waypoint.' + key);
+            this.$set(this.sb.step.cursor.waypoints[wi], key, val);
+        },
+        async pickWaypoint(wi) {
+            const { pickElement } = await import('../../../tutorials/step-builder/utils/element-picker.js');
+            const sel = await pickElement();
+            if (sel) this.setWaypoint(wi, 'target', sel);
+        },
+        clearAnchor(key) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 clear ' + key);
+            this.$delete(this.sb.step.cursor, key);
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbGlobalOptsCard.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.globalOpts }">
+        <div class="sb-card-head" @click="sb.toggle('globalOpts')">
+            <span>GLOBAL OPTIONS</span><span class="sb-chevron">{{ sb.cards.globalOpts ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.globalOpts" class="sb-card-body">
+            <label class="sb-lbl">Highlight Color</label>
+            <div class="sb-row">
+                <input type="color" :value="opt('highlightColor', '#ffd700')" @input="setOpt('highlightColor', $event.target.value)" class="sb-color-input">
+                <input :value="opt('highlightColor', '#ffd700')" @input="setOpt('highlightColor', $event.target.value)" class="sb-input" style="flex:1">
+                <button class="sb-pick" @click="resetOpt('highlightColor')" title="Reset">&#8634;</button>
+            </div>
+            <label class="sb-lbl">Border Radius (px)</label>
+            <div class="sb-row">
+                <input type="number" :value="opt('highlightBorderRadius', 8)" @input="setOpt('highlightBorderRadius', parseInt($event.target.value) || 8)" class="sb-input sb-input--num">
+                <button class="sb-pick" @click="resetOpt('highlightBorderRadius')" title="Reset">&#8634;</button>
+            </div>
+            <label class="sb-lbl" style="margin-top:8px">Bubble Max Width</label>
+            <input :value="opt('bubbleMaxWidth', 'clamp(260px, 85vw, 550px)')" @input="setOpt('bubbleMaxWidth', $event.target.value)" class="sb-input">
+            <label class="sb-lbl">Bubble Min Width</label>
+            <input :value="opt('bubbleMinWidth', 'clamp(200px, 70vw, 350px)')" @input="setOpt('bubbleMinWidth', $event.target.value)" class="sb-input">
+            <label class="sb-lbl">Bubble Font Size</label>
+            <input :value="opt('bubbleFontSize', 'clamp(14px, 3.5vw, 16px)')" @input="setOpt('bubbleFontSize', $event.target.value)" class="sb-input">
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        opt(key, fallback) { return this.sb.engine?.config?.get(key) ?? fallback; },
+        setOpt(key, value) { if (this.sb.engine?.config) { this.sb.engine.config.set(key, value); this.sb.previewNow(); } },
+        resetOpt(key) {
+            if (!this.sb.engine?.config) return;
+            this.sb.engine.config.set(key, this.sb.engine.config.constructor.DEFAULTS[key]);
+            this.sb.previewNow();
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbHighlightCard.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.highlight }">
+        <div class="sb-card-head" @click="sb.toggle('highlight')">
+            <span>HIGHLIGHT</span><span class="sb-chevron">{{ sb.cards.highlight ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.highlight" class="sb-card-body">
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">Elements</label>
+                <input :value="highlightElements" @input="setHighlightElements($event.target.value)" class="sb-input" placeholder="sel1, sel2">
+                <button class="sb-pick" @click="pickHighlight">Pick</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    computed: {
+        highlightElements() {
+            return this.sb.step.highlight?.groups?.flatMap(g => g.elements || g)?.join(', ') || '';
+        },
+    },
+    methods: {
+        setHighlightElements(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 highlight');
+            if (!val) { this.$delete(this.sb.step, 'highlight'); return; }
+            const elements = val.split(',').map(s => s.trim()).filter(Boolean);
+            this.$set(this.sb.step, 'highlight', { groups: [{ elements }] });
+        },
+        async pickHighlight() {
+            const { pickElement } = await import('../../../tutorials/step-builder/utils/element-picker.js');
+            const sel = await pickElement();
+            if (sel) {
+                const current = this.highlightElements;
+                this.setHighlightElements(current ? current + ', ' + sel : sel);
+            }
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbHoverCard.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.hover }">
+        <div class="sb-card-head" @click="sb.toggle('hover')">
+            <span>HOVER</span><span class="sb-chevron">{{ sb.cards.hover ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.hover" class="sb-card-body">
+            <div class="sb-row sb-row--pick">
+                <input :value="hoverDisplay" @input="setHover($event.target.value)" class="sb-input" placeholder="CSS selector">
+                <button class="sb-pick" @click="sb.pickField('hover')">Pick</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    computed: {
+        hoverDisplay() {
+            const h = this.sb.step.hover;
+            return Array.isArray(h) ? h.join(', ') : (h || '');
+        },
+    },
+    methods: {
+        setHover(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 hover');
+            if (!val) { this.$delete(this.sb.step, 'hover'); return; }
+            const parts = val.split(',').map(s => s.trim()).filter(Boolean);
+            this.$set(this.sb.step, 'hover', parts.length === 1 ? parts[0] : parts);
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbOptionsCard.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.options }">
+        <div class="sb-card-head" @click="sb.toggle('options')">
+            <span>OPTIONS</span><span class="sb-chevron">{{ sb.cards.options ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.options" class="sb-card-body">
+            <div v-for="(opt, oi) in (sb.step.options || [])" :key="oi" class="sb-opt-row">
+                <input :value="opt.label" @input="setLabel(oi, $event.target.value)" class="sb-input" placeholder="Label">
+                <select :value="opt._action" @change="setAction(oi, $event.target.value)" class="sb-input sb-input--sm">
+                    <option value="next">Next</option>
+                    <option value="done">Done</option>
+                    <option value="goToStep">Go To</option>
+                    <option value="redirect">Redirect</option>
+                </select>
+                <button class="sb-pick sb-pick--danger" @click="removeOption(oi)">&times;</button>
+            </div>
+            <button class="sb-btn sb-btn-sm sb-btn-green" @click="addOption">+ Option</button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        setLabel(oi, val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 option label');
+            this.$set(this.sb.step.options[oi], 'label', val);
+        },
+        addOption() {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 add option');
+            if (!this.sb.step.options) this.$set(this.sb.step, 'options', []);
+            this.sb.step.options.push({ label: 'New Option', _action: 'next' });
+        },
+        removeOption(i) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 remove option');
+            this.sb.step.options.splice(i, 1);
+            if (!this.sb.step.options.length) this.$delete(this.sb.step, 'options');
+        },
+        setAction(i, action) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 option action');
+            const opt = this.sb.step.options[i];
+            delete opt.done; delete opt.goToStep; delete opt.redirect;
+            this.$set(opt, '_action', action);
+            if (action === 'done') this.$set(opt, 'done', true);
+            else if (action === 'goToStep') this.$set(opt, 'goToStep', this.sb.idx + 1);
+            else if (action === 'redirect') this.$set(opt, 'redirect', '/');
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbOutputCard.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.output }">
+        <div class="sb-card-head" @click="sb.toggle('output')">
+            <span>OUTPUT (JSON)</span><span class="sb-chevron">{{ sb.cards.output ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.output" class="sb-card-body">
+            <pre class="sb-code">{{ sb.outputJson }}</pre>
+            <div class="sb-row" style="margin-top:8px;justify-content:flex-end">
+                <button class="sb-btn sb-btn-sm sb-btn-ghost" @click="sb.copyStep()">Copy Step</button>
+                <button class="sb-btn sb-btn-sm sb-btn-ghost" @click="sb.copyAll()">Copy All</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default { inject: ['sb'] };
+</script>

package/components/step-builder/cards/SbPositionCard.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.position }">
+        <div class="sb-card-head" @click="sb.toggle('position')">
+            <span>POSITION</span>
+            <span class="sb-chevron">{{ sb.cards.position ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.position" class="sb-card-body">
+            <div class="sb-row">
+                <label class="sb-lbl">Position</label>
+                <select :value="sb.step.position" @change="setPosition($event.target.value)" class="sb-input">
+                    <option value="left">Left of avatar</option>
+                    <option value="right">Right of avatar</option>
+                    <option value="top">Above avatar</option>
+                    <option value="bottom">Below avatar</option>
+                    <option value="custom">Custom (manual)</option>
+                </select>
+            </div>
+            <template v-if="sb.step.position === 'custom'">
+                <div class="sb-row">
+                    <label class="sb-lbl">Left</label>
+                    <input :value="sb.step.bubbleLeft || ''" @input="sb.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 :value="sb.step.bubbleTop || ''" @input="sb.setStepProp('bubbleTop', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
+                </div>
+            </template>
+            <div class="sb-row">
+                <label class="sb-lbl">Avatar Pos</label>
+                <select :value="sb.step.align" @change="setAlign($event.target.value)" 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="sb.step.align === 'custom'">
+                <div class="sb-row">
+                    <label class="sb-lbl">Left</label>
+                    <input :value="sb.step.avatarLeft || ''" @input="sb.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="sb.step.avatarTop || ''" @input="sb.setStepProp('avatarTop', $event.target.value)" class="sb-input" placeholder="e.g. 60%, 400px">
+                </div>
+            </template>
+            <div class="sb-row">
+                <label class="sb-lbl">Avatar Size</label>
+                <input :value="sb.step.avatarSize || ''" @input="sb.setStepProp('avatarSize', $event.target.value); applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
+            </div>
+            <label class="sb-check"><input type="checkbox" :checked="!!sb.step.chatMode" @change="toggleChatMode"> Chat Mode</label>
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">Target</label>
+                <input :value="sb.step.positionTarget || ''" @input="sb.setStepProp('positionTarget', $event.target.value)" class="sb-input" placeholder="CSS selector">
+                <button class="sb-pick" @click="sb.pickField('positionTarget')">Pick</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        setPosition(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 position');
+            this.$set(this.sb.step, 'position', val);
+        },
+        setAlign(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 align');
+            this.$set(this.sb.step, 'align', val);
+        },
+        toggleChatMode(e) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 chatMode');
+            if (e.target.checked) this.$set(this.sb.step, 'chatMode', true);
+            else this.$delete(this.sb.step, 'chatMode');
+        },
+        applyAvatarSize() {
+            const size = this.sb.step.avatarSize;
+            if (this.sb.engine?.avatar?.img) {
+                this.sb.engine.avatar.img.style.height = size || this.sb.engine.config?.get('avatarHeight') || '';
+                this.sb.engine.avatar.img.style.maxHeight = size || this.sb.engine.config?.get('avatarMaxHeight') || '';
+            }
+            this.sb.previewNow();
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbScrollCard.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.scroll }">
+        <div class="sb-card-head" @click="sb.toggle('scroll')">
+            <span>SCROLL</span><span class="sb-chevron">{{ sb.cards.scroll ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.scroll" class="sb-card-body">
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">Scroll To</label>
+                <input :value="sb.step.scrollTo || ''" @input="sb.setStepProp('scrollTo', $event.target.value)" class="sb-input">
+                <button class="sb-pick" @click="sb.pickField('scrollTo')">Pick</button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default { inject: ['sb'] };
+</script>