Vue inputs and v-model support. #14912

vue/src/components/inputs/IonBaseInputVue.ts

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+/**
+ * Create a wrapped input component that captures typical ionic input events
+ * and emits core ones so v-model works.
+ * @param {} name the vue name of the component
+ * @param {*} coreTag the actual tag to render (such as ion-datetime)
+ */
+export function createInputComponent(name: string, coreTag: string, modelEvent = 'ionChange', valueProperty = 'value') {
+  return Vue.component(name, {
+    model: {
+      event: modelEvent,
+      prop: valueProperty
+    },
+    render(createElement: any) {
+      // Vue types have a bug accessing member properties:
+      // https://github.com/vuejs/vue/issues/8721
+      const cmp: any = this;
+
+      return createElement(coreTag, {
+        'attrs': cmp.attrs,
+        'on': {
+          'ionChange': cmp.handleChange,
+          'ionInput': cmp.handleInput,
+          'ionBlur': cmp.handleBlur,
+          'ionFocus': cmp.handleFocus
+        }
+      }, this.$slots.default);
+    },
+    methods: {
+      handleChange($event: any) {
+        if (modelEvent === 'ionChange') {
+          // Vue expects the value to be sent as the argument for v-model, not the
+          // actual event object
+          this.$emit('ionChange', $event.target[valueProperty]);
+        } else {
+          this.$emit('ionChange', $event);
+        }
+      },
+      handleInput($event: any) {
+        if (modelEvent === 'ionInput') {
+          // Vue expects the value to be sent as the argument for v-model, not the
+          // actual event object
+          this.$emit('ionInput', $event.target[valueProperty]);
+        } else {
+          this.$emit('ionInput', $event);
+        }
+      },
+      handleBlur($event: any) {
+        this.$emit('ionBlur', $event);
+      },
+      handleFocus($event: any) {
+        this.$emit('ionFocus', $event);
+      }
+    }
+  });
+}

vue/src/components/inputs/IonCheckboxVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonCheckboxVue', 'ion-checkbox', 'ionChange', 'checked');

vue/src/components/inputs/IonDatetimeVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonDatetimeVue', 'ion-datetime');

vue/src/components/inputs/IonInputVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonInputVue', 'ion-input', 'ionInput');

vue/src/components/inputs/IonRadioVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonRadioVue', 'ion-radio');

vue/src/components/inputs/IonRangeVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonRangeVue', 'ion-range');

vue/src/components/inputs/IonSearchbarVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonSearchbarVue', 'ion-searchbar', 'ionInput');

vue/src/components/inputs/IonSelectVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonSelectVue', 'ion-select');

vue/src/components/inputs/IonTextareaVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonTextareaVue', 'ion-textarea');

vue/src/components/inputs/IonToggleVue.ts

@@ -0,0 +1,3 @@
+import { createInputComponent } from "./IonBaseInputVue";
+
+export default createInputComponent('IonToggleVue', 'ion-toggle', 'ionChange', 'checked');

vue/src/components/inputs/index.ts

@@ -0,0 +1,21 @@
+import IonDatetimeVue from './IonDatetimeVue';
+import IonInputVue from './IonInputVue';
+import IonRadioVue from './IonRadioVue';
+import IonRangeVue from './IonRangeVue';
+import IonSelectVue from './IonSelectVue';
+import IonTextareaVue from './IonTextareaVue';
+import IonToggleVue from './IonToggleVue';
+import IonSearchbarVue from './IonSearchbarVue';
+import IonCheckboxVue from './IonCheckboxVue';
+
+export {
+  IonCheckboxVue,
+  IonDatetimeVue,
+  IonInputVue,
+  IonRadioVue,
+  IonRangeVue,
+  IonSearchbarVue,
+  IonSelectVue,
+  IonTextareaVue,
+  IonToggleVue
+};

vue/src/index.ts

@@ -7,3 +7,5 @@ export default {
 
 export { Controllers } from './ionic';
 export { default as IonicVueRouter } from './router';
+
+export * from './components/inputs';