Upgrade to Nova 4

README.md

@@ -1,5 +1,11 @@
 # Laravel Nova Color Field
 
+Now works with Laravel Nova v4!  
+
+---
+
+If you still are using Nova v1-v3, use v1.0.4 of this field.
+
 Dead simple Laravel Nova Color field. Includes a color picker from the `vue-color` component.
 
 ### Details Page 
@@ -43,10 +49,10 @@ Color::make('Field')->compact()
 Color::make('Field')->slider()
 ```
 
-and so on. You can use any one of: `chrome, compact, grayscale, material, photoshop, sketch, slider, swatches`.
+and so on. You can use any one of: `chrome, compact, grayscale, material, photoshop, sketch, slider, swatches, twitter`.
 
 
-Palette support for adding custom colors to the pickers is also available:
+Palette support for adding custom colors to some of the pickers is also available:
 
 ```
 Color::make('Field')->compact()->palette(['#beaf00', '#DEADAF', '#000']);

composer.json

@@ -8,9 +8,18 @@
         "field"
     ],
     "license": "MIT",
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "require": {
         "php": ">=7.1.0"
     },
+    "require-dev": {
+        "laravel/nova": "~4.0"
+    },
     "autoload": {
         "psr-4": {
             "Timothyasp\\Color\\": "src/"
@@ -24,6 +33,7 @@
         }
     },
     "config": {
+        "preferred-install": "dist",
         "sort-packages": true
     },
     "minimum-stability": "dev",

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+ * vuex v4.0.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */

dist/mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/js/field.js": "/js/field.js"
+}

dist/node_modules_ckpack_vue-color_src_components_alpha_alpha_vue.js

@@ -0,0 +1,161 @@
+"use strict";
+(self["webpackChunktimothyasp_nova_color_field"] = self["webpackChunktimothyasp_nova_color_field"] || []).push([["node_modules_ckpack_vue-color_src_components_alpha_alpha_vue"],{
+
+/***/ "./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue ***!
+  \***********************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _alpha_vue_vue_type_template_id_59281027__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./alpha.vue?vue&type=template&id=59281027 */ "./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=template&id=59281027");
+/* harmony import */ var _alpha_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./alpha.vue?vue&type=script&lang=js */ "./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=script&lang=js");
+/* harmony import */ var _home_vagrant_Code_quiz_factory_nova_components_Color_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+
+
+
+;
+
+
+const __exports__ = /*#__PURE__*/(0,_home_vagrant_Code_quiz_factory_nova_components_Color_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_0__["default"])(_alpha_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_alpha_vue_vue_type_template_id_59281027__WEBPACK_IMPORTED_MODULE_2__.render],['__file',"node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue"]])
+/* hot reload */
+if (false) {}
+
+
+/* harmony default export */ __webpack_exports__["default"] = (__exports__);
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=script&lang=js":
+/*!**********************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=script&lang=js ***!
+  \**********************************************************************************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+Object(function webpackMissingModule() { var e = new Error("Cannot find module '@/components/checkboard'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
+
+
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+  name: 'Alpha',
+  props: {
+    value: Object,
+    onChange: Function,
+  },
+  components: {
+    checkboard: Object(function webpackMissingModule() { var e = new Error("Cannot find module '@/components/checkboard'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()),
+  },
+  computed: {
+    colors() {
+      return this.value;
+    },
+    gradientColor() {
+      const { rgba } = this.colors;
+      const rgbStr = [rgba.r, rgba.g, rgba.b].join(',');
+      return `linear-gradient(to right, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`;
+    },
+  },
+  methods: {
+    handleChange(e, skip) {
+      !skip && e.preventDefault();
+      const { container } = this.$refs;
+      if (!container) {
+        // for some edge cases, container may not exist. see #220
+        return;
+      }
+      const containerWidth = container.clientWidth;
+
+      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
+      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
+      const left = pageX - xOffset;
+
+      let a;
+      if (left < 0) {
+        a = 0;
+      } else if (left > containerWidth) {
+        a = 1;
+      } else {
+        a = Math.round(left * 100 / containerWidth) / 100;
+      }
+
+      if (this.colors.a !== a) {
+        this.$emit('change', {
+          h: this.colors.hsl.h,
+          s: this.colors.hsl.s,
+          l: this.colors.hsl.l,
+          a,
+          source: 'rgba',
+        });
+      }
+    },
+    handleMouseDown(e) {
+      this.handleChange(e, true);
+      window.addEventListener('mousemove', this.handleChange);
+      window.addEventListener('mouseup', this.handleMouseUp);
+    },
+    handleMouseUp() {
+      this.unbindEventListeners();
+    },
+    unbindEventListeners() {
+      window.removeEventListener('mousemove', this.handleChange);
+      window.removeEventListener('mouseup', this.handleMouseUp);
+    },
+  },
+});
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=template&id=59281027":
+/*!**************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@ckpack/vue-color/src/components/alpha/alpha.vue?vue&type=template&id=59281027 ***!
+  \**************************************************************************************************************************************************************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": function() { return /* binding */ render; }
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
+
+
+const _hoisted_1 = { class: "vc-alpha" }
+const _hoisted_2 = { class: "vc-alpha-checkboard-wrap" }
+const _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", { class: "vc-alpha-picker" }, null, -1 /* HOISTED */)
+const _hoisted_4 = [
+  _hoisted_3
+]
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_checkboard = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("checkboard")
+
+  return ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [
+      (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_checkboard)
+    ]),
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
+      class: "vc-alpha-gradient",
+      style: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeStyle)({background: $options.gradientColor})
+    }, null, 4 /* STYLE */),
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
+      class: "vc-alpha-container",
+      ref: "container",
+      onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.handleMouseDown && $options.handleMouseDown(...args))),
+      onTouchmove: _cache[1] || (_cache[1] = (...args) => ($options.handleChange && $options.handleChange(...args))),
+      onTouchstart: _cache[2] || (_cache[2] = (...args) => ($options.handleChange && $options.handleChange(...args)))
+    }, [
+      (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
+        class: "vc-alpha-pointer",
+        style: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeStyle)({left: $options.colors.a * 100 + '%'})
+      }, _hoisted_4, 4 /* STYLE */)
+    ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)
+  ]))
+}
+
+/***/ })
+
+}]);