js-kompo-utils 1.0.28 → 1.0.30

package/components/VlMultiStateCheckbox.test.js

@@ -0,0 +1,125 @@
+import { describe, it, expect } from 'vitest'
+import VlMultiStateCheckbox from './VlMultiStateCheckbox.vue'
+import { mountKompo } from './__test_helpers__/mountKompo'
+
+const SINGLE = { mode: 'single', values: [1, 2, 3], colors: ['bg-r', 'bg-y', 'bg-g'] }
+const SECTION = { mode: 'section', values: [1, 2, 3], colors: ['bg-r', 'bg-y', 'bg-g'] }
+
+function mountMscb(config, value) {
+    return mountKompo(VlMultiStateCheckbox, { config, value })
+}
+
+describe('VlMultiStateCheckbox — single mode rendering', () => {
+    it('shows the color matching the current value', () => {
+        const w = mountMscb(SINGLE, 2)
+        expect(w.find('.vl-mscb__swatch').classes()).toContain('bg-y')
+    })
+
+    it('shows empty when value is null', () => {
+        const w = mountMscb(SINGLE, null)
+        expect(w.find('.vl-mscb__swatch').classes()).toContain('vl-mscb__swatch--empty')
+    })
+
+    it('shows empty when value is not in the values list', () => {
+        const w = mountMscb(SINGLE, 99)
+        expect(w.find('.vl-mscb__swatch').classes()).toContain('vl-mscb__swatch--empty')
+    })
+})
+
+describe('VlMultiStateCheckbox — single mode click', () => {
+    it.each([
+        [null, 1],
+        [1,    2],
+        [2,    3],
+        [3,    null],
+        [99,   1],
+    ])('cycles %s → %s', async (from, to) => {
+        const w = mountMscb(SINGLE, from)
+        await w.find('.vl-mscb').trigger('click')
+        expect(w.vm.component.value).toBe(to)
+    })
+
+    it('does not change value when readonly', async () => {
+        const w = mountMscb({ ...SINGLE, readonly: true }, 1)
+        await w.find('.vl-mscb').trigger('click')
+        expect(w.vm.component.value).toBe(1)
+    })
+
+    it.each(['keydown.enter', 'keydown.space'])('cycles via %s', async (key) => {
+        const w = mountMscb(SINGLE, null)
+        await w.find('.vl-mscb').trigger(key)
+        expect(w.vm.component.value).toBe(1)
+    })
+})
+
+describe('VlMultiStateCheckbox — section mode rendering', () => {
+    it('renders one bar per distinct active value (mixed)', () => {
+        const w = mountMscb(SECTION, [1, 2])
+        const bars = w.findAll('.vl-mscb__bar--visible')
+        expect(bars.length).toBe(2)
+        expect(bars.at(0).classes()).toContain('bg-r')
+        expect(bars.at(1).classes()).toContain('bg-y')
+    })
+
+    it('renders one bar when all entries share a value (uniform)', () => {
+        const w = mountMscb(SECTION, [2, 2, 2])
+        const bars = w.findAll('.vl-mscb__bar--visible')
+        expect(bars.length).toBe(1)
+        expect(bars.at(0).classes()).toContain('bg-y')
+    })
+
+    it.each([
+        ['empty array', []],
+        ['all-null',    [null, null]],
+        ['null value',  null],
+    ])('renders no bars when %s', (_label, value) => {
+        const w = mountMscb(SECTION, value)
+        expect(w.findAll('.vl-mscb__bar--visible').length).toBe(0)
+    })
+
+    it('skips entries not in the values whitelist', () => {
+        const w = mountMscb(SECTION, [1, 99, 2])
+        const bars = w.findAll('.vl-mscb__bar--visible')
+        expect(bars.length).toBe(2)
+    })
+})
+
+describe('VlMultiStateCheckbox — section mode click', () => {
+    it.each([
+        ['uniform — advances from shared value',  [2, 2],   3],
+        ['uniform at last — cycles to null',      [3, 3],   null],
+        ['mixed — starts at first state',         [1, 2],   1],
+        ['empty — starts at first state',         [],       1],
+    ])('%s', async (_label, value, expected) => {
+        const w = mountMscb(SECTION, value)
+        await w.find('.vl-mscb').trigger('click')
+        expect(w.vm.component.value).toBe(expected)
+    })
+
+    it('does not change value when readonly', async () => {
+        const w = mountMscb({ ...SECTION, readonly: true }, [1, 2])
+        await w.find('.vl-mscb').trigger('click')
+        expect(w.vm.component.value).toEqual([1, 2])
+    })
+
+    it('emits a scalar value, not an array', async () => {
+        const w = mountMscb(SECTION, [1, 1])
+        await w.find('.vl-mscb').trigger('click')
+        expect(Array.isArray(w.vm.component.value)).toBe(false)
+        expect(w.vm.component.value).toBe(2)
+    })
+
+    it('updates the visual to a uniform bar at the new target after click', async () => {
+        const w = mountMscb(SECTION, [1, 2]) // mixed — click resets to states[0]=1
+        await w.find('.vl-mscb').trigger('click')
+        const bars = w.findAll('.vl-mscb__bar--visible')
+        expect(bars.length).toBe(1)
+        expect(bars.at(0).classes()).toContain('bg-r')
+    })
+
+    it('renders no bars after a click that cycles past the last state to null', async () => {
+        const w = mountMscb(SECTION, [3, 3]) // uniform at last → click → null
+        await w.find('.vl-mscb').trigger('click')
+        expect(w.findAll('.vl-mscb__bar--visible').length).toBe(0)
+    })
+})

package/components/VlMultiStateCheckbox.vue

@@ -0,0 +1,183 @@
+<template>
+    <vl-form-field v-bind="$_wrapperAttributes">
+        <div class="vl-mscb inline-block"
+             v-bind="$_config('attrs') || {}"
+             :class="rootClass"
+             tabindex="0"
+             @click.stop="onClick"
+             @keydown.enter.stop.prevent="onClick"
+             @keydown.space.stop.prevent="onClick">
+
+            <span v-if="!isSection"
+                  class="vl-mscb__swatch block w-[1.1rem] h-[1.1rem] border border-black rounded"
+                  :class="swatchClass" />
+
+            <span v-else
+                  class="vl-mscb__section flex w-[1.1rem] h-[1.1rem] border border-black rounded overflow-hidden">
+                <span v-for="bar in sectionBars" :key="bar.key"
+                      class="vl-mscb__bar vl-mscb__bar--visible flex-1 h-full"
+                      :class="bar.color" />
+            </span>
+        </div>
+    </vl-form-field>
+</template>
+
+<script>
+import Field from 'vue-kompo/js/form/mixins/Field'
+
+export default {
+    name: 'VlMultiStateCheckbox',
+    mixins: [Field],
+
+    // Local display state for section mode.
+    //
+    // sectionOverride: holds the visual array right after a section click
+    // sets a cascade target (uniform across all cells). Cleared when a cell
+    // change comes in, so cellValues wins.
+    //
+    // cellValues: a live map keyed by permission_id, populated as each cell
+    // mounts and emits its initial state, then kept current via cell-change
+    // events. The section's bars derive from this map. PHP's $_value array
+    // is only used as a fallback when no cell-state events have arrived.
+    data() {
+        return { sectionOverride: null, cellValues: {} }
+    },
+
+    computed: {
+        isSection()  { return this.$_config('mode') === 'section' },
+        states()     { return this.$_config('values') || [] },
+        colors()     { return this.$_config('colors') || [] },
+        isReadonly() { return this.$_readOnly || !!this.$_config('readonly') },
+
+        rootClass() {
+            return {
+                'vl-mscb--readonly': this.isReadonly,
+                'vl-mscb--section':  this.isSection,
+            }
+        },
+
+        // Single-mode swatch: highlight the color matching $_value, or empty.
+        swatchClass() {
+            const i = this.indexOf(this.$_value)
+            return i < 0 ? ['vl-mscb__swatch--empty'] : [this.colors[i] || '']
+        },
+
+        // What array of cell values to display in section mode.
+        // Priority: explicit override (just-clicked cascade) > live cellValues
+        // populated from cell mount/change events > PHP-seeded prop array.
+        sectionDisplay() {
+            if (this.sectionOverride !== null) return this.sectionOverride
+            const live = Object.values(this.cellValues)
+            if (live.length > 0) return live
+            return Array.isArray(this.$_value) ? this.$_value : []
+        },
+
+        // Sync-group key. Cells and section sharing the same group exchange
+        // visual state via the global $kompo.events bus.
+        groupKey()  { return this.$_config('group') || null },
+        permId()    { return this.$_config('permission_id') || null },
+        cellEvent() { return this.groupKey ? 'mscb:cell-state:' + this.groupKey : null },
+        cascadeEvent() { return this.groupKey ? 'mscb:section-cascade:' + this.groupKey : null },
+
+        // One bar per distinct active value in sectionDisplay, restricted to
+        // known states, in first-occurrence order.
+        sectionBars() {
+            const seen = new Map()
+            for (const v of this.sectionDisplay) {
+                if (v === null || v === undefined || seen.has(v)) continue
+                const i = this.indexOf(v)
+                if (i < 0) continue
+                seen.set(v, { key: v, color: this.colors[i] })
+            }
+            return Array.from(seen.values())
+        },
+
+        // Next state on click.
+        // Single mode: advance from $_value.
+        // Section mode: if cells share one state, advance from that state;
+        //               otherwise (mixed or empty) start at the first state.
+        nextValue() {
+            if (!this.isSection) return this.advance(this.$_value)
+            const bars = this.sectionBars
+            return bars.length === 1 ? this.advance(bars[0].key) : this.states[0]
+        },
+    },
+
+    methods: {
+        indexOf(value) {
+            if (value === null || value === undefined) return -1
+            return this.states.findIndex(s => s == value)
+        },
+        advance(from) {
+            const i = this.indexOf(from)
+            if (i < 0) return this.states[0]
+            return (i + 1 >= this.states.length) ? null : this.states[i + 1]
+        },
+        onClick() {
+            if (this.isReadonly) return
+            const target = this.nextValue
+
+            if (this.isSection) {
+                // Cascade visual: every bar becomes the new target (or none if null).
+                const len = this.sectionDisplay.length || 1
+                this.sectionOverride = target === null ? [] : new Array(len).fill(target)
+                if (this.cascadeEvent) {
+                    this.$kompo.events.$emit(this.cascadeEvent, target)
+                }
+            } else if (this.cellEvent && this.permId !== null) {
+                // Single-cell click: tell the section header our new value.
+                this.$kompo.events.$emit(this.cellEvent, {
+                    permission_id: this.permId,
+                    value: target,
+                })
+            }
+
+            this.component = Object.assign({}, this.component, { value: target })
+            this.$_changeAction()
+        },
+        $_resetSortValue() {
+            this.component.value = null
+            this.sectionOverride = null
+            this.cellValues = {}
+        },
+    },
+
+    mounted() {
+        if (!this.groupKey) return
+
+        if (this.isSection) {
+            // Listen for cells reporting their state (initial mount + every change).
+            this.$_vlOn(this.cellEvent, ({ permission_id, value }) => {
+                this.cellValues = Object.assign({}, this.cellValues, { [permission_id]: value })
+                // A real cell change supersedes any earlier cascade override.
+                this.sectionOverride = null
+            })
+        } else if (this.permId !== null) {
+            // Cells: react to section cascade by adopting the new value
+            // and re-broadcasting their state so the section's cellValues stays current.
+            this.$_vlOn(this.cascadeEvent, (newValue) => {
+                this.component = Object.assign({}, this.component, { value: newValue })
+                this.$kompo.events.$emit(this.cellEvent, {
+                    permission_id: this.permId,
+                    value: newValue,
+                })
+            })
+
+            // Announce our initial value so the section can build its cellValues map.
+            this.$kompo.events.$emit(this.cellEvent, {
+                permission_id: this.permId,
+                value: this.$_value,
+            })
+        }
+    },
+
+    beforeDestroy() {
+        if (!this.groupKey) return
+        if (this.isSection) {
+            this.$_vlOff(this.cellEvent)
+        } else {
+            this.$_vlOff(this.cascadeEvent)
+        }
+    },
+}
+</script>

package/components/VlSelect.vue

@@ -34,11 +34,15 @@
                 <option v-for="opt in nativeOptionsList" :key="opt.value" :value="opt.value">{{ nativeLabel(opt) }}</option>
             </select>
         </div>
-        <div class="vlOptions vlOptionsTeleported"
+        <div class="vlOptions"
             :key="optionsKey"
             ref="selectOptions"
             :style="optionsStyle"
-            :class="{ 'vlOptionsFlipUp': flipUp, 'vlOptionsVisible': isFocused }">
+            :class="{
+                'vlOptionsTeleported': useFloatingOptions,
+                'vlOptionsFlipUp': useFloatingOptions && flipUp,
+                'vlOptionsVisible': useFloatingOptions && isFocused
+            }">
             <template v-if="filteredOptions.length">
                 <div v-for="(option,key) in filteredOptions" :key="option.value" :ref="key"
                     class="vlOption"
@@ -85,7 +89,14 @@ export default {
         forceDown() {
             return !!this.$_config('openDownward') || this.$_config('autoOptionsPlacement') === false
         },
+        useFloatingOptions() {
+            const explicitFloating = this.$_config('floatingOptions')
+            if (explicitFloating !== undefined && explicitFloating !== null) return !!explicitFloating
+
+            return !!this.$_config('teleportedOptions') || this.forceUp
+        },
         optionsStyle() {
+            if (!this.useFloatingOptions) return null
             return this.isFocused ? null : { display: 'none' }
         },
         useNativeMobile() {
@@ -116,6 +127,14 @@ export default {
     },
     watch: {
         isFocused(focused) {
+            if (!this.useFloatingOptions) {
+                if (!focused) {
+                    this.flipUp = false
+                    this.detachListeners()
+                    this.resetPanelStyles()
+                }
+                return
+            }
             if (focused) {
                 this.attachListeners()
                 this.$nextTick(() => {
@@ -129,9 +148,10 @@ export default {
             }
         },
         filteredOptions() {
-            if (this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
+            if (this.useFloatingOptions && this.isFocused) this.$nextTick(() => this.queuePositionUpdate())
         },
         optionsKey() {
+            if (!this.useFloatingOptions) return
             this.$nextTick(() => {
                 this.teleportOptions()
                 if (this.isFocused) this.startPositioning()
@@ -139,7 +159,7 @@ export default {
         },
     },
     mounted() {
-        this.teleportOptions()
+        if (this.useFloatingOptions) this.teleportOptions()
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.isTouchDevice = window.matchMedia('(pointer: coarse)').matches
         }
@@ -183,23 +203,56 @@ export default {
             tmp.innerHTML = str
             return (tmp.textContent || tmp.innerText || '').trim()
         },
-        teleportOptions() {
+        teleportOptions(anchor = this.anchorEl()) {
+            if (!this.useFloatingOptions) return
             const opts = this.$refs.selectOptions
-            if (opts && opts.parentNode !== document.body) {
-                document.body.appendChild(opts)
+            const context = this.floatingContext(anchor)
+            const root = context?.root
+            if (opts && root && opts.parentNode !== root) {
+                root.appendChild(opts)
             }
         },
         cleanupOptions() {
+            if (!this.useFloatingOptions) return
             const opts = this.$refs.selectOptions
-            if (opts && opts.parentNode === document.body) {
-                document.body.removeChild(opts)
+            if (opts && opts.parentNode && this.$el && !this.$el.contains(opts)) {
+                opts.parentNode.removeChild(opts)
             }
         },
         anchorEl() {
             return this.$refs.taggableInput?.$el || this.$refs.input?.parentElement
         },
         overlayAncestor(anchor = this.anchorEl()) {
-            return anchor?.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l') || null
+            return anchor?.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l, .vl-sidebar-r') || null
+        },
+        floatingContext(anchor = this.anchorEl()) {
+            if (!anchor || typeof document === 'undefined') return null
+
+            const drawerOrSidebar = anchor.closest('.kompoDrawer, .vl-sidebar-l, .vl-sidebar-r')
+            if (drawerOrSidebar && typeof window !== 'undefined') {
+                const position = window.getComputedStyle(drawerOrSidebar).position
+                if (position && position !== 'static') {
+                    return {
+                        root: drawerOrSidebar,
+                        strategy: 'absolute',
+                        zIndex: 5001,
+                    }
+                }
+            }
+
+            if (this.overlayAncestor(anchor)) {
+                return {
+                    root: document.body,
+                    strategy: 'fixed',
+                    zIndex: 5001,
+                }
+            }
+
+            return {
+                root: document.body,
+                strategy: 'absolute',
+                zIndex: 1000,
+            }
         },
         attachListeners() {
             if (this._listenersAttached) return
@@ -233,7 +286,10 @@ export default {
             if (!opts || !anchor || !this.isFocused) return
 
             this.stopPositioning()
-            this.applyBasePanelStyles(opts, anchor)
+            this.teleportOptions(anchor)
+            const context = this.floatingContext(anchor)
+            if (!context) return
+            this.applyBasePanelStyles(opts, anchor, context)
             opts.style.visibility = 'hidden'
             opts.style.transform = 'translate3d(0px, 0px, 0)'
 
@@ -258,15 +314,16 @@ export default {
             this._autoUpdateCleanup()
             this._autoUpdateCleanup = null
         },
-        applyBasePanelStyles(opts, anchor) {
-            const inOverlay = !!this.overlayAncestor(anchor)
-            opts.style.position = 'fixed'
+        applyBasePanelStyles(opts, anchor, context = this.floatingContext(anchor)) {
+            if (!context) return
+
+            opts.style.position = context.strategy
             opts.style.top = '0px'
             opts.style.left = '0px'
             opts.style.bottom = 'auto'
             opts.style.width = Math.round(anchor.getBoundingClientRect().width) + 'px'
             opts.style.maxHeight = '240px'
-            opts.style.zIndex = inOverlay ? '5001' : '1000'
+            opts.style.zIndex = String(context.zIndex)
             opts.style.willChange = 'transform'
         },
         resetPanelStyles() {
@@ -315,6 +372,17 @@ export default {
             const referenceEl = anchor
             const positionVersion = this._positionVersion || 0
             const { placement, auto } = this.placementConfig()
+            const context = this.floatingContext(referenceEl)
+            if (!context) return
+
+            if (floatingEl.parentNode !== context.root) {
+                this.$nextTick(() => {
+                    if (this.isFocused) this.startPositioning()
+                })
+                return
+            }
+
+            this.applyBasePanelStyles(floatingEl, referenceEl, context)
 
             const middleware = [
                 offset(-1),
@@ -332,7 +400,7 @@ export default {
             ]
 
             computePosition(referenceEl, floatingEl, {
-                strategy: 'fixed',
+                strategy: context.strategy,
                 placement,
                 middleware,
             }).then(({ x, y, placement, middlewareData }) => {

package/components/VlSwipeableTabs.vue

@@ -67,7 +67,7 @@ export default {
             return this.$_config('activeTab')
         },
         tabParamKey(){
-            return 'tab_number'
+            return this.$_config('tabParamKey') || 'tab_number'
         },
         selectId(){
             return this.$_config('selectId')
@@ -317,6 +317,10 @@ export default {
         }else if(this.defaultActiveTab !== undefined && this.defaultActiveTab !== null){
             this.activeTab = this.defaultActiveTab
         }
+
+        if (this.activeTab >= this.elements.length || this.activeTab < 0 || !this.activeTab) {
+            this.activeTab = 0
+        }
     },
     mounted(){
         this.syncSelect()

package/components/__test_helpers__/mountKompo.js

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+
+// Minimal stub for vl-form-field. Real impl is heavy and unrelated to the
+// behaviour we're testing; we just need a transparent wrapper for the slot.
+const VlFormFieldStub = {
+    props: ['component', 'errors'],
+    template: '<div class="vl-form-field-stub"><slot /></div>',
+}
+
+/**
+ * Mount a kompo Field-style Vue component with a synthesized vkompo blob.
+ * Use this for any component that mixes in `vue-kompo/js/form/mixins/Field`
+ * (or descendants of `BaseElement`) so tests don't have to hand-roll the
+ * shape every time.
+ *
+ *   mountKompo(MyField, {
+ *     config: { mode: 'single', values: [1,2], colors: ['a','b'] },
+ *     value:  null,
+ *   })
+ *
+ * Reads `wrapper.vm.component.value` to observe value changes after click.
+ */
+export function mountKompo(component, { config = {}, value = null, name = 'test', label = null } = {}) {
+    return mount(component, {
+        propsData: {
+            vkompo: {
+                vueComponent: component.name || 'TestComponent',
+                config,
+                value,
+                name,
+                label,
+                _kid: 'k-test',
+            },
+        },
+        stubs: {
+            'vl-form-field': VlFormFieldStub,
+        },
+    })
+}

package/components/test-setup.js

@@ -0,0 +1,25 @@
+// Test setup for components that use vue-kompo's Field mixin chain.
+// The kompo runtime expects `_` (lodash) and `$kompo` to be available globally.
+import _ from 'lodash'
+import Vue from 'vue'
+
+// Lodash is referenced as a bare global (`_`) inside vue-kompo mixins.
+globalThis._ = _
+// vue-kompo's KompoHelper module references `Vue` as a bare global at import time.
+globalThis.Vue = Vue
+
+// Stub the kompo bus that Field's $_changeAction reaches into.
+// Tests don't exercise the real form/error pipeline, so the methods are no-ops.
+Vue.prototype.$kompo = {
+    vlUpdateErrorState() {},
+    vlSubmit() {},
+    vlToggle() {},
+    vlEmitFrom() {},
+    vlHybridFilter() {},
+    vlJsInstantFilter() {},
+    vlSetFieldValue() {},
+    events: {
+        $on() {},
+        $off() {},
+    },
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "",
   "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest"
   },
   "keywords": [],
   "author": "xkairo",
@@ -27,13 +27,17 @@
     "vue-qrcode-reader": "^3.1.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vue/test-utils": "^1.3.6",
     "autoprefixer": "^10.4.7",
     "axios": "^0.21",
+    "jsdom": "^24.0.0",
     "laravel-mix": "^6.0.49",
     "lodash": "^4.17.19",
     "postcss": "^8.4.14",
     "sass": "^1.83.0",
     "tailwindcss": "^3.1.6",
+    "vitest": "^1.6.0",
     "vue-kompo": "^4.0.3"
   }
 }

package/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue2'
+
+export default defineConfig({
+    plugins: [vue()],
+    test: {
+        environment: 'jsdom',
+        include: ['components/**/*.test.js'],
+        setupFiles: ['./components/test-setup.js'],
+    },
+})