adding the vn-dial widget 🔥 (#35)

* adding the vn-dial component 🔥

* using the vn-slider model for vn-dial too 🔥

* adding the demo for the vn-dial component 🌸

Author: shubhamzanwar

demo/Header.vue

@@ -22,6 +22,8 @@
     <vn-text>Here's a progres bar</vn-text>
     <vn-progress-bar :value="45" />
     <vn-combobox :items="data" />
+    <vn-dial :notchesVisible="true" v-model="dialValue" />
+    <vn-text>{{dialValue}}</vn-text>
   </vn-view>
 </template>
 
@@ -32,6 +34,7 @@ export default {
   setup() {
     const count = ref(0);
     const viewVisible = ref(true);
+    const dialValue = ref(0);
     const data = [
       {text: "item 1"}, 
       {text: "item 2"}, 
@@ -60,11 +63,8 @@ export default {
       line1Text,
       link,
       data,
+      dialValue,
     };
   }
 }
-</script>
-
-<style>
-
-</style>
+</script>

src/vueLoader.ts

@@ -32,6 +32,7 @@ export const compilerOptions: CompilerOptions = {
           directiveToUse = V_MODEL_TEXT;
           break;
         case 'vn-slider':
+        case 'vn-dial':
           directiveToUse = V_MODEL_SLIDER;
           break;
         case 'vn-spinbox':

src/widgets/Dial/VNDial.ts

@@ -0,0 +1,89 @@
+import { NodeWidget, QDial } from '@nodegui/nodegui';
+import { Prop, PropSetters } from 'renderer/patchProp';
+import { VNWidget } from 'widgets/config';
+import { ViewProps, viewPropsSetters } from '../View/VNView';
+
+/**
+ * The Dial provides ability to add and manipulate native dial slider widgets. It is based on
+ * [NodeGui's QDial](https://docs.nodegui.org/docs/api/generated/classes/qdial/).
+ *
+ * ## Usage
+ *
+ * ```html
+ * <template>
+ *   <vn-view :style="'flex-direction: \'column\''">
+ *    <vn-dial :notchesVisible="true" v-model="dialValue" />
+ *    <vn-text>{{dialValue}}</vn-text>
+ *   </vn-view>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue';
+ *
+ * export default {
+ *   setup() {
+ *    const dialValue = ref(0);
+ *    return {
+ *      dialValue
+ *    };
+ *   }
+ * }
+ * </script>
+ * ```
+ *
+ * ## What it looks like?
+ *
+ * ![dial-demo](/img/vn-dial.gif)
+ *
+ * ## Props and styling
+ *
+ * You can find all the props `vn-dial` accepts listed below.
+ * Apart from this, you can take a look at the [styling](/docs/guides/3-styling)
+ * and [event handling](/docs/guides/5-handle-events) docs
+ */
+export interface DialProps extends ViewProps {
+  notchesVisible?: boolean;
+  wrapping?: boolean;
+  notchTarget?: number;
+}
+
+const dialPropsSetters: PropSetters<VNDial, DialProps> = {
+  ...viewPropsSetters,
+  notchesVisible: (widget: VNDial, _, nextValue: boolean) => {
+    widget.setNotchesVisible(nextValue);
+  },
+  wrapping: (widget: VNDial, _, nextValue: boolean) => {
+    widget.setWrapping(nextValue);
+  },
+  notchTarget: (widget: VNDial, _, nextValue: number) => {
+    widget.setNotchTarget(nextValue);
+  },
+};
+
+/** @internal */
+export class VNDial extends QDial implements VNWidget<DialProps> {
+  patchProp(
+    key: keyof DialProps,
+    prevValue: Prop<DialProps, typeof key>,
+    nextValue: Prop<DialProps, typeof key>,
+  ) {
+    const propSetter = dialPropsSetters[key];
+    if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); }
+  }
+
+  insertChild() {
+    throw new Error('Cannot add child to Dial elements');
+  }
+
+  getNextSibling(): NodeWidget<any> | null {
+    throw new Error('Dial elements cannot have children');
+  }
+
+  insertBefore() {
+    throw new Error('Cannot add child to Dial elements');
+  }
+
+  removeChild() {
+    throw new Error('Cannot remove/add child to Dial elements');
+  }
+}

src/widgets/Dial/index.ts

@@ -0,0 +1,12 @@
+import { WidgetConfig } from '../config';
+import { VNDial, DialProps } from './VNDial';
+
+class DialConfig implements WidgetConfig<DialProps> {
+  parentNode: any;
+
+  createElement() {
+    return new VNDial();
+  }
+}
+
+export default DialConfig;

src/widgets/nativeWidget.ts

@@ -9,7 +9,8 @@ export type ValidNativeWidgets = 'vn-image' |
 'vn-slider' |
 'vn-spinbox' |
 'vn-progress-bar' |
-'vn-combobox';
+'vn-combobox' |
+'vn-dial';
 
 // Add vue-nodegui widgets here
 // whenever new ones are created
@@ -26,6 +27,7 @@ const nativeWidgets: {[key in ValidNativeWidgets]: boolean} = {
   'vn-spinbox': true,
   'vn-progress-bar': true,
   'vn-combobox': true,
+  'vn-dial': true,
 };
 
 export const isNativeWidget = (type: ValidNativeWidgets) => !!nativeWidgets[type];

src/widgets/widgetMap.ts

@@ -10,6 +10,7 @@ import SliderConfig from './Slider';
 import SpinBoxConfig from './SpinBox';
 import ProgressBarConfig from './ProgressBar';
 import ComboBoxConfig from './ComboBox';
+import DialConfig from './Dial';
 import { ValidNativeWidgets } from './nativeWidget';
 import { WidgetConfig } from './config';
 
@@ -30,6 +31,7 @@ const widgetMap: WidgetMap = {
   'vn-spinbox': new SpinBoxConfig(),
   'vn-progress-bar': new ProgressBarConfig(),
   'vn-combobox': new ComboBoxConfig(),
+  'vn-dial': new DialConfig(),
 };
 
 const getConfigByType = (type: ValidNativeWidgets) => {