Initial commit

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

README.md

@@ -1,2 +1,68 @@
-# nova-slider-field
-A Laravel Nova slider field
+# Nova Slider Field
+A Laravel Nova slider field using [NightCatSama/vue-slider-component](https://github.com/NightCatSama/vue-slider-component)
+
+# Installation
+
+Install the package with composer using the following command:
+
+```bash
+composer require robertboes/nova-slider-field
+```
+
+# Usage
+
+Add the field to your nova model:
+
+```php
+NovaSliderField::make('Percentage');
+```
+
+## Field options
+
+- [min](#min)
+- [max](#max)
+- [interval](#interval)
+- [withoutTooltip](#withoutTooltip)
+- [tooltipOnHover](#tooltipOnHover)
+- [formatter](#formatter)
+
+### min
+```php
+NovaSliderField::make('Percentage')->min(50);
+```
+Sets the minimum value, defaults to 0.
+
+### max
+```php
+NovaSliderField::make('Percentage')->min(200);
+```
+Set the maximum value, defaults to 100.
+
+### interval
+```php
+NovaSliderField::make('Percentage')->interval(5);
+```
+Set the interval of which the slider should increment/decrement, default is 1.
+
+### withoutTooltip
+```php
+NovaSliderField::make('Percentage')->withoutTooltip();
+```
+Don't show a tooltip on the detail page.
+
+### tooltipOnHover
+```php
+NovaSliderField::make('Percentage')->tooltipOnHover();
+```
+Show a tooltip on hover on the detail page.
+
+### formatter
+```php
+NovaSliderField::make('Percentage')->formatter(50);
+```
+Custom formatter for the text in the tooltip.
+This is a string which has to contain `{value}`, for example `{value} %`
+
+# License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "robertboes/nova-slider-field",
+    "description": "A Laravel Nova slider field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Robertboes\\NovaSliderField\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Robertboes\\NovaSliderField\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/mix-manifest.json

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

package.json

@@ -0,0 +1,21 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "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": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "laravel-nova": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0",
+        "vue-slider-component": "^2.8.0"
+    }
+}

resources/js/components/DetailField.vue

@@ -0,0 +1,30 @@
+<template>
+    <panel-item :field="field">
+        <template slot="value">
+            <div class="flex items-center flex-wrap h-4">
+                <div class="w-1/3">
+                    <vue-slider ref="slider" v-model="field.value"
+                                tooltip="false"
+                                disabled
+                                :dot-size="0"
+                                :disabled-style="{cursor: 'default', opacity: 1}"
+                                :disabled-dot-style="{cursor: 'default', display: 'none'}"
+                                :min="field.min || 0"
+                                :max="field.max || 100"
+                                :interval="field.interval || 1">
+                    </vue-slider>
+                </div>
+            </div>
+        </template>
+    </panel-item>
+</template>
+
+<script>
+import vueSlider from 'vue-slider-component'
+export default {
+    components: {
+        vueSlider,
+    },
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,53 @@
+<template>
+    <default-field :field="field" :errors="errors">
+        <template slot="field">
+            <div class="py-2">
+                <vue-slider ref="slider" v-model="value"
+                            :min="field.min || 0"
+                            :max="field.max || 100"
+                            :interval="field.interval || 1"
+                            :tooltip="field.tooltip || 'always'"
+                            :formatter="field.formatter || null">
+
+                </vue-slider>
+            </div>
+        </template>
+    </default-field>
+</template>
+
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import vueSlider from 'vue-slider-component'
+
+export default {
+    components: {
+        vueSlider,
+    },
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    methods: {
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+            this.value = this.field.value || ''
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+            formData.append(this.field.attribute, this.value || '')
+        },
+
+        /**
+         * Update the field's internal value.
+         */
+        handleChange(value) {
+            this.value = value
+        },
+    },
+}
+</script>

resources/js/components/IndexField.vue

@@ -0,0 +1,22 @@
+<template>
+    <vue-slider ref="slider" v-model="field.value"
+                tooltip="false"
+                disabled
+                :dot-size="0"
+                :disabled-style="{cursor: 'default', opacity: 1}"
+                :disabled-dot-style="{cursor: 'default', display: 'none'}"
+                :min="field.min || 0"
+                :max="field.max || 100"
+                :interval="field.interval || 1">
+    </vue-slider>
+</template>
+
+<script>
+import vueSlider from 'vue-slider-component'
+export default {
+    components: {
+        vueSlider,
+    },
+    props: ['resourceName', 'field'],
+}
+</script>

resources/js/field.js

@@ -0,0 +1,5 @@
+Nova.booting((Vue, router) => {
+    Vue.component('index-nova-slider-field', require('./components/IndexField'));
+    Vue.component('detail-nova-slider-field', require('./components/DetailField'));
+    Vue.component('form-nova-slider-field', require('./components/FormField'));
+})

resources/sass/field.scss

@@ -0,0 +1 @@
+// Nova Tool CSS

src/FieldServiceProvider.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Robertboes\NovaSliderField;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Events\ServingNova;
+use Illuminate\Support\ServiceProvider;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('nova-slider-field', __DIR__.'/../dist/js/field.js');
+            //Nova::style('nova-slider-field', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

src/NovaSliderField.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace Robertboes\NovaSliderField;
+
+use Laravel\Nova\Fields\Field;
+
+class NovaSliderField extends Field
+{
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'nova-slider-field';
+
+    /**
+     * Set the minimum value, defaults to 0
+     * @param int $min
+     * @return NovaSliderField
+     */
+    public function min(int $min)
+    {
+        return $this->withMeta(['min' => $min]);
+    }
+
+    /**
+     * Set the maximum value, defaults to 100
+     * @param int $max
+     * @return NovaSliderField
+     */
+    public function max(int $max)
+    {
+        return $this->withMeta(['max' => $max]);
+    }
+
+    /**
+     * Set the interval of which the slider should increment/decrement, default is 1
+     * @param int $interval
+     * @return NovaSliderField
+     */
+    public function interval(int $interval)
+    {
+        return $this->withMeta(['interval' => $interval]);
+    }
+
+    /**
+     * Don't show a tooltip on the detail page
+     * @return NovaSliderField
+     */
+    public function withoutTooltip()
+    {
+        return $this->withMeta(['tooltip' => false]);
+    }
+
+    /**
+     * Show a tooltip on hover on the detail page
+     * @return NovaSliderField
+     */
+    public function tooltipOnHover()
+    {
+        return $this->withMeta(['tooltip' => 'hover']);
+    }
+
+    /**
+     * Custom formatter for the text in the tooltip
+     * @param string $formatter The format to use, for example "{value} %"
+     * @return NovaSliderField
+     */
+    public function formatter(string $formatter)
+    {
+        return $this->withMeta(['formatter' => $formatter]);
+    }
+}

webpack.mix.js

@@ -0,0 +1,5 @@
+let mix = require('laravel-mix')
+
+mix.setPublicPath('dist')
+   .js('resources/js/field.js', 'js')
+   //.sass('resources/sass/field.scss', 'css')