update mix version, add babel plugin, fix default label

dist/mix-manifest.json

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

package.json

@@ -10,11 +10,14 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+        "babel-preset-latest": "^6.24.1",
         "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
+        "laravel-mix": "^5.0.0",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
-        "vue": "^2.5.0",
+        "vue": "^2.6.10",
         "vue-slider-component": "^3.0.44"
     }
 }

resources/js/components/Filter.vue

@@ -5,7 +5,7 @@
         </h3>
 
         <div class="p-2 pt-6 flex flex-row items-center">
-            <div class="text-xs flex-shrink-0 mr-2">{{ filter.min }}{{ filter.label }}</div>
+            <div class="text-xs flex-shrink-0 mr-2">{{ filter.min }}{{ filterLabel }}</div>
             <vue-slider v-model="sliderValue"
                         :min="filter.min"
                         :max="filter.max"
@@ -18,12 +18,12 @@
                         :enable-cross="false"
                         tooltip="always"
                         :clickable="false"
-                        :tooltipFormatter="val => `${val}${filter.label}`"
+                        :tooltipFormatter="val => `${val}${filterLabel}`"
                         @drag-end="handleChange"
                         width="100%"
                         class="slider"
                         :duration="0"></vue-slider>
-            <div class="text-xs flex-shrink-0 ml-2">{{ filter.max }}{{ filter.label }}</div>
+            <div class="text-xs flex-shrink-0 ml-2">{{ filter.max }}{{ filterLabel }}</div>
         </div>
     </div>
 </template>
@@ -97,7 +97,12 @@
 
             value() {
                 return this.filter.currentValue
+            },
+
+            filterLabel(){
+                return this.filter.label ??  ''
             }
+
         }
     }
 </script>

resources/js/filter.js

@@ -1,3 +1,3 @@
 Nova.booting((Vue, router, store) => {
-  Vue.component('nova-slider-filter', require('./components/Filter'))
+  Vue.component('nova-slider-filter', require('./components/Filter').default)
 })

src/SliderFilter.php

@@ -51,7 +51,7 @@ public function maxValue(int $max): self
         return $this->withMeta([ 'max' => $max ]);
     }
 
-    public function label(string $label = '万'): self
+    public function label(string $label): self
     {
         return $this->withMeta([ 'label' => $label ]);
     }

webpack.mix.js

@@ -1,4 +1,8 @@
 let mix = require('laravel-mix')
 
 mix.setPublicPath('dist')
-    .js('resources/js/filter.js', 'js')
+    .js('resources/js/filter.js', 'js')
+    .babelConfig({
+        "presets": ["babel-preset-latest"],
+        "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
+    })