Vue 0.0.8

Simpler vue components

Adding back Vue suffix

vue/src/components/inputs.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);
+      }
+    }
+  });
+}