Initial Commit

assets/js/fields.js

@@ -0,0 +1,46 @@
+/* global Vue */
+
+if (typeof window.Vue !== 'undefined') {
+
+  /**
+   * Registers the ColorPicker component.
+   *
+   * @since 2.0.0
+   */
+  Vue.component('colorPicker', {
+    props: ['value'],
+    template: '<input type="text">',
+    mounted() {
+
+      const vm = this;
+
+      $(this.$el)
+        .val(this.value)
+        .wpColorPicker({
+          width: 200,
+          defaultColor: this.value,
+          change(event, ui) {
+
+            // emit change event on color change using mouse
+            vm.$emit('input', ui.color.toString());
+
+          },
+        });
+
+    },
+    watch: {
+      value(value) {
+
+        // update value
+        $(this.$el).wpColorPicker('color', value);
+
+      },
+    },
+    destroyed() {
+
+      $(this.$el).off().wpColorPicker('destroy'); // (!) Not tested
+
+    },
+  });
+
+} // end if;