js-kompo-utils 1.0.30 → 1.0.32

package/kompo-ckeditor-1.0.17/mixins/CKEditor.js

@@ -62,8 +62,11 @@ export default {
         customTextInsertion(){ return this.$_config('customTextInsertion') },
     },
     methods: {
-        onReady(editor, el) {
-            el.ckInstance = editor;
+        onReady(editor) {
+            const el = editor.sourceElement
+            if (!el) return
+
+            el.ckInstance = editor
 
             el.typeSimulated = async (text, options) => {
                 const {
@@ -93,13 +96,20 @@ export default {
             }, 50 )
         },
         $_inputAction(){
+            // This override replaces Field.js's $_inputAction, so behaviors wired
+            // there must be re-triggered here. Whispers fire immediately (typing
+            // indicators can't wait for the value-commit debounce below).
+            if (this.$_config('socketWhisper') && this.$_triggerWhisper) {
+                this.$_triggerWhisper()
+            }
+
             if(typeof window.KCK !== 'undefined') {
                 clearTimeout(window.KCK);
             }
 
             window.KCK = setTimeout(() => {
-                this.$_changeAction()            
-                this.$emit('change', this.$_value) 
+                this.$_changeAction()
+                this.$emit('change', this.$_value)
             }, this.$_debounce || 1200);
         },
         /*$_inputAction: _.debounce(function () {  //this works too but doesn't allow me to add this.$_debounce
@@ -190,16 +200,6 @@ export default {
             this.focus()
     },
     created(){
-        const originalCreate = ClassicEditor.create;
-        const self = this;
-        ClassicEditor.create = function (element, config) {
-            return originalCreate.call(this, element, config).then(editor => {
-                element.ckeditorInstance = editor;
-                self.onReady(editor, element);
-                return editor;
-            });
-        };
-
         let extraPlugins = [
             Essentials,
             Alignment,

package/package.json

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

package/components/VlMultiStateCheckbox.test.js

@@ -1,125 +0,0 @@
-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/__test_helpers__/mountKompo.js

@@ -1,39 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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() {},
-    },
-}