fix(combinator): DLT-3171 update v-model bindings from rendered component events (#1299)

Author: paulojreis-dialpad

packages/combinator/src/components/combinator.test.js

@@ -2,8 +2,14 @@ import DtcCombinator from './combinator.vue';
 
 import { assert } from 'chai';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getSupportedComponents } from '@/src/lib/test/utils_test';
-import documentation from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+import { DtInput, DtToggle } from '@dialpad/dialtone-vue';
+import allDocs from '@/node_modules/@dialpad/dialtone-vue/dist/component-documentation.json';
+
+const documentation = allDocs;
+const toggleDoc = allDocs.find(d => d.displayName === 'DtToggle');
+const inputDoc = allDocs.find(d => d.displayName === 'DtInput');
 
 describe('combinator.vue test', function () {
   const testComponents = getSupportedComponents();
@@ -33,4 +39,78 @@ describe('combinator.vue test', function () {
       });
     });
   });
+
+  describe('v-model writeback', function () {
+    describe('boolean modelValue (DtToggle)', function () {
+      beforeEach(function () {
+        wrapper = shallowMount(DtcCombinator, {
+          props: {
+            component: DtToggle,
+            documentation: toggleDoc,
+            variants: {},
+          },
+        });
+      });
+
+      afterEach(function () {
+        wrapper.unmount();
+      });
+
+      it('updates options.props when the renderer emits an update:modelValue event', async function () {
+        const renderer = wrapper.findComponent({ name: 'DtcRenderer' });
+        const initialValue = renderer.props('options').props.modelValue;
+
+        await renderer.vm.$emit('event', 'update:modelValue', !initialValue);
+        await nextTick();
+
+        assert.strictEqual(renderer.props('options').props.modelValue, !initialValue);
+      });
+
+      it('does not mutate options.props for non-update events (e.g. "change")', async function () {
+        const renderer = wrapper.findComponent({ name: 'DtcRenderer' });
+        const before = JSON.stringify(renderer.props('options').props);
+
+        await renderer.vm.$emit('event', 'change', 'something');
+        await nextTick();
+
+        assert.strictEqual(JSON.stringify(renderer.props('options').props), before);
+      });
+    });
+
+    describe('string modelValue (DtInput)', function () {
+      beforeEach(function () {
+        wrapper = shallowMount(DtcCombinator, {
+          props: {
+            component: DtInput,
+            documentation: inputDoc,
+            variants: {},
+          },
+        });
+      });
+
+      afterEach(function () {
+        wrapper.unmount();
+      });
+
+      it('updates options.props when the renderer emits an update:modelValue event', async function () {
+        const renderer = wrapper.findComponent({ name: 'DtcRenderer' });
+
+        await renderer.vm.$emit('event', 'update:modelValue', 'hello');
+        await nextTick();
+
+        assert.strictEqual(renderer.props('options').props.modelValue, 'hello');
+      });
+
+      it('reflects subsequent updates (simulates typing character by character)', async function () {
+        const renderer = wrapper.findComponent({ name: 'DtcRenderer' });
+
+        for (const value of ['h', 'he', 'hel', 'hell', 'hello']) {
+          await renderer.vm.$emit('event', 'update:modelValue', value);
+          await nextTick();
+        }
+
+        assert.strictEqual(renderer.props('options').props.modelValue, 'hello');
+      });
+    });
+  });
 });

packages/combinator/src/components/combinator.vue

@@ -122,6 +122,7 @@
         :options="options"
         :library="library"
         :disabled-members="disabledMembers"
+        @event="onComponentEvent"
       />
       <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
       <div
@@ -354,6 +355,23 @@ const settings = computedModel(
 
 watch(() => settings.value.root.theme, clearTokenCache);
 
+/**
+ * Handles events emitted by the rendered target component.
+ * For v-model events (`update:<prop>`), writes the new value back into the
+ * reactive options model so the preview and the generated code stay in sync.
+ *
+ * @param {string} name - The emitted event name (e.g. 'update:modelValue').
+ * @param {*} value - The emitted value.
+ */
+function onComponentEvent (name, value) {
+  if (!name?.startsWith('update:')) return;
+  const prop = name.slice('update:'.length);
+  options.value = (model) => {
+    if (model.props && prop in model.props) model.props[prop] = value;
+    else if (model.attributes && prop in model.attributes) model.attributes[prop] = value;
+  };
+}
+
 function updateVariant (e) {
   _presetChanging = true;
   selectedVariant.value = e;