implementing v-model for spinbox (nodegui#22)

* implementing v-model for spinbox

* updating vn-spinbox docs 📚

* using setup API instead of data

Author: rohinivsenthil

src/index.ts

@@ -1,6 +1,7 @@
 export { createApp } from './renderer';
 export { vModelText } from './renderer/directives/vModelText';
 export { vModelSlider } from './renderer/directives/vModelSlider';
+export { vModelSpinBox } from './renderer/directives/vModelSpinBox';
 export { vShow } from './renderer/directives/vShow';
 
 export * from '@vue/runtime-core';

src/renderer/directives/vModelSpinBox.ts

@@ -0,0 +1,22 @@
+import { ObjectDirective } from '@vue/runtime-core';
+import { VNSpinBox } from 'widgets/SpinBox/VNSpinBox';
+
+type ModelDirective<T> = ObjectDirective<T & { _assign: Function }>
+
+export const vModelSpinBox: ModelDirective<VNSpinBox> = {
+  beforeMount: (el, { value }, vnode) => {
+    el.setValue(value);
+    // eslint-disable-next-line no-param-reassign, no-underscore-dangle
+    el._assign = vnode.props!['onUpdate:modelValue'] as Function;
+    el.addEventListener('valueChanged', (spinBoxValue) => {
+      // eslint-disable-next-line no-underscore-dangle
+      el._assign(spinBoxValue);
+    });
+  },
+  beforeUpdate: (el, { value, oldValue }) => {
+    if (value === oldValue) {
+      return;
+    }
+    el.setValue(value);
+  },
+};

src/vueLoader.ts

@@ -3,10 +3,12 @@ import { isNativeWidget } from './widgets/nativeWidget';
 
 const V_MODEL_TEXT = Symbol('vModelText');
 const V_MODEL_SLIDER = Symbol('vModelSlider');
+const V_MODEL_SPINBOX = Symbol('vModelSpinBox');
 
 registerRuntimeHelpers({
   [V_MODEL_TEXT]: 'vModelText',
   [V_MODEL_SLIDER]: 'vModelSlider',
+  [V_MODEL_SPINBOX]: 'vModelSpinBox',
 });
 
 type CompilerOptions = {
@@ -30,6 +32,9 @@ export const compilerOptions: CompilerOptions = {
         case 'vn-slider':
           directiveToUse = V_MODEL_SLIDER;
           break;
+        case 'vn-spinbox':
+          directiveToUse = V_MODEL_SPINBOX;
+          break;
         default:
           throw new Error(`cannot use v-model on tag: ${tag}`);
       }

src/widgets/SpinBox/VNSpinBox.ts

@@ -12,13 +12,21 @@ import { PropSetters, Prop } from '../../renderer/patchProp';
  * ```html
  * <template>
  *  <vn-view>
- *    <vn-text>How many slices of cake would you like?</vn-text>
- *    <vn-spinbox />
+ *    <vn-text>How many slices of cake ($2) would you like?</vn-text>
+ *    <vn-spinbox v-model="spinBoxValue"/>
+ *    <vn-text>Total cost: ${{spinBoxValue * 2}}</vn-text>
  *  </vn-view>
  * </template>
  *
  * <script>
- *  export default { }
+ * import { ref } from 'vue';
+ *
+ * export default {
+ *  setup() {
+ *    const spinBoxValue = ref(0)
+ *    return { spinBoxValue }
+ *  }
+ * }
  * </script>
  * ```
  *

website/docs/api/interfaces/spinboxprops.md

@@ -12,13 +12,21 @@ It is based on [NodeGui's QSpinBox](https://docs.nodegui.org/docs/api/generated/
 ```html
 <template>
  <vn-view>
-   <vn-text>How many slices of cake would you like?</vn-text>
-   <vn-spinbox />
+   <vn-text>How many slices of cake ($2) would you like?</vn-text>
+   <vn-spinbox v-model="spinBoxValue"/>
+   <vn-text>Total cost: ${{spinBoxValue * 2}}</vn-text>
  </vn-view>
 </template>
 
 <script>
- export default { }
+import { ref } from 'vue';
+
+export default {
+ setup() {
+   const spinBoxValue = ref(0)
+   return { spinBoxValue }
+ }
+}
 </script>
 ```