├── .babelrc
├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── composer.json
├── config
    └── swatches.php
├── dist
    ├── css
    │   └── field.css
    ├── js
    │   └── field.js
    └── mix-manifest.json
├── docs
    ├── clipboard.png
    ├── form-input.png
    ├── form-open.png
    ├── form-text-advanced.png
    ├── form.png
    └── index.png
├── package.json
├── resources
    ├── js
    │   ├── components
    │   │   ├── CustomDefaultField.vue
    │   │   ├── DetailField.vue
    │   │   ├── FormField.vue
    │   │   ├── IndexField.vue
    │   │   └── Swatch.vue
    │   └── field.js
    └── sass
    │   └── field.scss
├── src
    ├── FieldServiceProvider.php
    └── Swatches.php
└── webpack.mix.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "plugins": []
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /.idea
 2 | /vendor
 3 | /node_modules
 4 | package-lock.json
 5 | composer.phar
 6 | composer.lock
 7 | phpunit.xml
 8 | .phpunit.result.cache
 9 | .DS_Store
10 | Thumbs.db
11 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "workbench.colorCustomizations": {
 3 |         "terminal.ansiBlack": "#F7F7F7",
 4 |         "terminal.ansiGreen": "#518a3c",
 5 |         "terminal.ansiBrightGreen": "#4fa367",
 6 |         "activityBar.background": "#2DCD78",
 7 |         "titleBar.activeBackground": "#3FD585",
 8 |         "titleBar.activeForeground": "#061D11"
 9 |     }
10 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Nova Swatches
  2 | 
  3 | A beautiful color picking field for Laravel Nova. Uses [vue-swatches](https://github.com/saintplay/vue-swatches).
  4 | 
  5 | ## Screenshots
  6 | 
  7 | <img src="docs/index.png" width="40%" /> <img src="docs/form-open.png" width="40%" />
  8 | <img src="docs/form-input.png" width="40%" /> <img src="docs/form-text-advanced.png" width="40%" />
  9 | 
 10 | ## Installation
 11 | 
 12 | You can install the package into a Laravel application that uses Nova via composer:
 13 | 
 14 | ```
 15 | composer require ynacorp/nova-swatches
 16 | ```
 17 | 
 18 | ## Usage
 19 | 
 20 | Just use the `Swatches` field in your Nova resource:
 21 | 
 22 | ```php
 23 | namespace App\Nova;
 24 | 
 25 | use Yna\NovaSwatches\Swatches;
 26 | 
 27 | class Article extends Resource
 28 | {
 29 |     // ...
 30 | 
 31 |     public function fields(Request $request)
 32 |     {
 33 |         return [
 34 |             // ...
 35 | 
 36 |             Swatches::make('Color'),
 37 | 
 38 |             // ...
 39 |         ];
 40 |     }
 41 | }
 42 | ```
 43 | 
 44 | ## Customization
 45 | 
 46 | ### Presets
 47 | 
 48 | [vue-swatches](https://saintplay.github.io/vue-swatches/) provides a few color presets out of the box.
 49 | 
 50 | ```php
 51 |     public function fields(Request $request)
 52 |     {
 53 |         return [
 54 |             // ...
 55 | 
 56 |             // material-basic is a basic collection of material colors.
 57 |             Swatches::make('Color')->colors('material-basic'),
 58 | 
 59 |             // ...
 60 |         ];
 61 |     }
 62 | ```
 63 | 
 64 | Try switching between `material-basic`, `text-basic`, `text-advanced`, `material-light` and `material-dark`.
 65 | 
 66 | If you're not satisfied with the presets, keep customizing as shown below.
 67 | 
 68 | ### Palettes
 69 | 
 70 | You can also provide an array of colors for the user to pick from.
 71 | 
 72 | ```php
 73 |     public function fields(Request $request)
 74 |     {
 75 |         return [
 76 |             // ...
 77 | 
 78 |             // material-basic is a basic collection of material colors.
 79 |             Swatches::make('Color')->colors(['#ffffff', '#000']),
 80 | 
 81 |             // ...
 82 |         ];
 83 |     }
 84 | ```
 85 | 
 86 | ### Anything else...
 87 | 
 88 | [vue-swatches](https://saintplay.github.io/vue-swatches/) is extremely customizable, you can pass an array of `props` directly to it:
 89 | 
 90 | ```php
 91 |     public function fields(Request $request)
 92 |     {
 93 |         return [
 94 |             // ...
 95 | 
 96 |             Swatches::make('Color')
 97 |                 ->withProps([
 98 |                     'colors' => ["#4ae2c4", "#4fccff", "#41c84d"],
 99 |                     'show-fallback' => true,
100 |                     'fallback-type' => 'input',
101 |                     'popover-to' => 'left',
102 | 
103 |                     // More options at https://saintplay.github.io/vue-swatches/api/props.html
104 |                 ]),
105 | 
106 |             // ...
107 |         ];
108 |     }
109 | ```
110 | 
111 | Check out vue-swatches' [props section](https://saintplay.github.io/vue-swatches/api/props.html) for more options.
112 | 
113 | ## Configuration
114 | 
115 | While the `Swatches` component can be configured fluently, you can also set the defaults by publishing the package's config:
116 | 
117 | ```
118 | php artisan vendor:publish --tag=config --provider=Yna\\NovaSwatches\\FieldServiceProvider
119 | ```
120 | 
121 | Now edit file at the `config/nova/swatches.php` to customize the preferred defaults for your project:
122 | 
123 | ```php
124 | <?php
125 | 
126 | return [
127 |     /**
128 |      * Props to pass to the vue-swatches component.
129 |      *
130 |      * See https://saintplay.github.io/vue-swatches/api/props.html
131 |      */
132 |     'props' => [
133 |         'colors' => 'basic', // Preset
134 |         // 'colors' => 'material-basic', // Preset
135 |         // 'colors' => ['#ffffff', '#000'], // Array
136 | 
137 |         // 'show-fallback' => true,
138 |         // 'fallback-input-type' => 'input', // Or "color"
139 |     ]
140 | ];
141 | ```
142 | 
143 | ## Contribution
144 | 
145 | We'd be glad to accept any contributions to Nova Swatches.
146 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ynacorp/nova-swatches",
 3 |     "description": "A beautiful color picking field for Laravel Nova.",
 4 |     "keywords": [
 5 |         "laravel",
 6 |         "nova"
 7 |     ],
 8 |     "license": "MIT",
 9 |     "require": {
10 |         "php": ">=7.1.0"
11 |     },
12 |     "autoload": {
13 |         "psr-4": {
14 |             "Yna\\NovaSwatches\\": "src/"
15 |         }
16 |     },
17 |     "extra": {
18 |         "laravel": {
19 |             "providers": [
20 |                 "Yna\\NovaSwatches\\FieldServiceProvider"
21 |             ]
22 |         }
23 |     },
24 |     "config": {
25 |         "sort-packages": true
26 |     },
27 |     "minimum-stability": "dev",
28 |     "prefer-stable": true
29 | }


--------------------------------------------------------------------------------
/config/swatches.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 |     /**
 5 |      * Props to pass to the vue-swatches component.
 6 |      * 
 7 |      * See https://saintplay.github.io/vue-swatches/#sub-props
 8 |      */
 9 |     'props' => [
10 |         'colors' => 'basic', // Preset
11 |         // 'colors' => 'material-basic', // Preset
12 |         // 'colors' => ['#ffffff', '#000'], // Array
13 | 
14 |         // 'show-fallback' => true,
15 |         // 'fallback-type' => 'input', // Or "color"
16 |     ]
17 | ];
18 | 


--------------------------------------------------------------------------------
/dist/css/field.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/dist/css/field.css


--------------------------------------------------------------------------------
/dist/mix-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "/js/field.js": "/js/field.js",
3 |     "/css/field.css": "/css/field.css"
4 | }


--------------------------------------------------------------------------------
/docs/clipboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/clipboard.png


--------------------------------------------------------------------------------
/docs/form-input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/form-input.png


--------------------------------------------------------------------------------
/docs/form-open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/form-open.png


--------------------------------------------------------------------------------
/docs/form-text-advanced.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/form-text-advanced.png


--------------------------------------------------------------------------------
/docs/form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/form.png


--------------------------------------------------------------------------------
/docs/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/triolla-io/nova-swatches/464c3889eea98a1b789c09fddb8d66230f3f51c2/docs/index.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "scripts": {
 4 |         "dev": "npm run development",
 5 |         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 6 |         "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",
 7 |         "watch-poll": "npm run watch -- --watch-poll",
 8 |         "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",
 9 |         "prod": "npm run production",
10 |         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11 |     },
12 |     "devDependencies": {
13 |         "cross-env": "^5.0.0",
14 |         "laravel-mix": "^1.0",
15 |         "laravel-nova": "^1.0"
16 |     },
17 |     "dependencies": {
18 |         "v-clipboard": "^2.2.2",
19 |         "vue": "^2.5.0",
20 |         "vue-swatches": "^1.0.4"
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/resources/js/components/CustomDefaultField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <field-wrapper :stacked="field.stacked">
 3 |     <div
 4 |       v-if="!field.hideLabelFromForms"
 5 |       class="w-1/5 px-8"
 6 |       :class="field.stacked ? 'pt-6' : 'py-6'"
 7 |     >
 8 |       <slot>
 9 |         <form-label
10 |           :label-for="field.attribute"
11 |           :class="{ 'mb-2': showHelpText && field.helpText }"
12 |         >
13 |           {{ fieldLabel }}
14 | 
15 |           <span v-if="field.required" class="text-danger text-sm">{{
16 |             __("*")
17 |           }}</span>
18 |         </form-label>
19 |       </slot>
20 |     </div>
21 |     <div class="py-6 px-8">
22 |       <slot name="field" />
23 | 
24 |       <help-text
25 |         class="error-text mt-2 text-danger"
26 |         v-if="showErrors && hasError"
27 |       >
28 |         {{ firstError }}
29 |       </help-text>
30 | 
31 |       <help-text class="help-text mt-2" v-if="showHelpText">
32 |         {{ field.helpText }}
33 |       </help-text>
34 |     </div>
35 |   </field-wrapper>
36 | </template>
37 | 
38 | <script>
39 | import { HandlesValidationErrors, Errors } from "laravel-nova";
40 | 
41 | export default {
42 |   mixins: [HandlesValidationErrors],
43 | 
44 |   props: {
45 |     field: { type: Object, required: true },
46 |     fieldName: { type: String },
47 |     showHelpText: { type: Boolean, default: true },
48 |     showErrors: { type: Boolean, default: true },
49 |     fullWidthContent: { type: Boolean, default: false }
50 |   },
51 | 
52 |   computed: {
53 |     /**
54 |      * Return the label that should be used for the field.
55 |      */
56 |     fieldLabel() {
57 |       // If the field name is purposefully an empty string, then let's show it as such
58 |       if (this.fieldName === "") {
59 |         return "";
60 |       }
61 | 
62 |       return this.fieldName || this.field.singularLabel || this.field.name;
63 |     }
64 |   }
65 | };
66 | </script>
67 | 


--------------------------------------------------------------------------------
/resources/js/components/DetailField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <panel-item :field="field">
 3 |     <template slot="value">
 4 |       <Swatch :value="field.value" />
 5 |     </template>
 6 |   </panel-item>
 7 | </template>
 8 | 
 9 | <script>
10 | import Vue from "vue";
11 | import Swatch from "./Swatch";
12 | 
13 | export default {
14 |   props: ["resource", "resourceName", "resourceId", "field"],
15 | 
16 |   components: { Swatch },
17 | 
18 |   methods: {
19 |     handleClick() {
20 |       if (!this.empty) {
21 |         const success = this.$clipboard(this.field.value);
22 | 
23 |         if (success) {
24 |           Nova.success(this.__("Copied to clipboard!"));
25 |         } else {
26 |           Nova.error(this.__("Can't copy to clipboard."));
27 |         }
28 |       }
29 |     }
30 |   },
31 | 
32 |   computed: {
33 |     empty() {
34 |       return !this.field.value;
35 |     },
36 | 
37 |     title() {
38 |       return this.empty ? this.__("Empty") : this.__("Copy to clipboard");
39 |     }
40 |   }
41 | };
42 | </script>
43 | 
44 | <style lang="scss" scoped>
45 | .nova-swatch {
46 |   display: inline-block;
47 |   width: 42px;
48 |   height: 42px;
49 |   border-radius: 11px;
50 |   background-color: #ffffff;
51 | 
52 |   &.empty {
53 |     border: 2px solid #ccc;
54 |   }
55 | 
56 |   &:not(.empty) {
57 |     cursor: pointer;
58 |     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75);
59 | 
60 |     &:hover {
61 |       opacity: 0.9;
62 |       outline: none;
63 |     }
64 |   }
65 | }
66 | </style>


--------------------------------------------------------------------------------
/resources/js/components/FormField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <CustomDefaultField :field="field" :errors="errors">
 3 |     <template slot="field">
 4 |       <swatches
 5 |         :id="field.name"
 6 |         v-model="value"
 7 |         v-bind="field.props"
 8 |       ></swatches>
 9 |     </template>
10 |   </CustomDefaultField>
11 | </template>
12 | 
13 | <script>
14 | import { FormField, HandlesValidationErrors } from "laravel-nova";
15 | import CustomDefaultField from "./CustomDefaultField";
16 | 
17 | export default {
18 |   mixins: [FormField, HandlesValidationErrors],
19 | 
20 |   props: ["resourceName", "resourceId", "field"],
21 | 
22 |   components: { CustomDefaultField },
23 | 
24 |   methods: {
25 |     /*
26 |      * Set the initial, internal value for the field.
27 |      */
28 |     setInitialValue() {
29 |       this.value = this.field.value || "";
30 |     },
31 | 
32 |     /**
33 |      * Fill the given FormData object with the field's internal value.
34 |      */
35 |     fill(formData) {
36 |       formData.append(this.field.attribute, this.value || "");
37 |     },
38 | 
39 |     /**
40 |      * Update the field's internal value.
41 |      */
42 |     handleChange(value) {
43 |       this.value = value;
44 |     }
45 |   }
46 | };
47 | </script>
48 | 


--------------------------------------------------------------------------------
/resources/js/components/IndexField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="swatch-container">
 3 |     <Swatch :value="field.value" width="32px" height="32px" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Swatch from "./Swatch";
 9 | 
10 | export default {
11 |   props: ["resourceName", "field"],
12 | 
13 |   components: { Swatch }
14 | };
15 | </script>
16 | 
17 | <style lang="scss" scoped>
18 | .swatch-container {
19 |   display: flex;
20 |   align-items: center;
21 |   justify-content: center;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/resources/js/components/Swatch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="nova-swatch"
 4 |     :class="{ empty }"
 5 |     :style="{ backgroundColor: value, width, height }"
 6 |     :title="title"
 7 |     @click="handleClick"
 8 |   >
 9 |     <div
10 |       v-if="empty"
11 |       class="vue-swatches__diagonal--wrapper vue-swatches--has-children-centered"
12 |     >
13 |       <div class="vue-swatches__diagonal"></div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Vue from "vue";
20 | 
21 | export default {
22 |   props: {
23 |     value: {
24 |       type: String,
25 |       default: null
26 |     },
27 |     width: {
28 |       type: String,
29 |       default: "42px"
30 |     },
31 |     height: {
32 |       type: String,
33 |       default: "42px"
34 |     }
35 |   },
36 | 
37 |   methods: {
38 |     handleClick() {
39 |       if (!this.empty) {
40 |         const success = this.$clipboard(this.value);
41 | 
42 |         if (success) {
43 |           Nova.success(this.__("Copied to clipboard!"));
44 |         } else {
45 |           Nova.error(this.__("Can't copy to clipboard."));
46 |         }
47 |       }
48 |     }
49 |   },
50 | 
51 |   computed: {
52 |     empty() {
53 |       return !this.value;
54 |     },
55 | 
56 |     title() {
57 |       return this.empty ? this.__("Empty") : this.__("Copy to clipboard");
58 |     }
59 |   }
60 | };
61 | </script>
62 | 
63 | <style lang="scss" scoped>
64 | .nova-swatch {
65 |   display: inline-block;
66 |   width: 42px;
67 |   height: 42px;
68 |   border-radius: 27%;
69 |   background-color: #ffffff;
70 | 
71 |   &.empty {
72 |     border: 2px solid #ccc;
73 |   }
74 | 
75 |   &:not(.empty) {
76 |     cursor: pointer;
77 |     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75);
78 | 
79 |     &:hover {
80 |       opacity: 0.9;
81 |       outline: none;
82 |     }
83 |   }
84 | }
85 | </style>


--------------------------------------------------------------------------------
/resources/js/field.js:
--------------------------------------------------------------------------------
 1 | import Clipboard from 'v-clipboard'
 2 | import "vue-swatches/dist/vue-swatches.min.css";
 3 | import Swatches from "vue-swatches";
 4 | 
 5 | Nova.booting((Vue, router, store) => {
 6 |   Vue.use(Clipboard)
 7 | 
 8 |   Vue.component('index-nova-swatches', require('./components/IndexField'))
 9 |   Vue.component('detail-nova-swatches', require('./components/DetailField'))
10 |   Vue.component('form-nova-swatches', require('./components/FormField'))
11 |   Vue.component('swatches', Swatches)
12 | })
13 | 


--------------------------------------------------------------------------------
/resources/sass/field.scss:
--------------------------------------------------------------------------------
1 | // Nova Tool CSS
2 | 


--------------------------------------------------------------------------------
/src/FieldServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Yna\NovaSwatches;
 4 | 
 5 | use Laravel\Nova\Nova;
 6 | use Laravel\Nova\Events\ServingNova;
 7 | use Illuminate\Support\ServiceProvider;
 8 | 
 9 | class FieldServiceProvider extends ServiceProvider
10 | {
11 |     /**
12 |      * Bootstrap any application services.
13 |      *
14 |      * @return void
15 |      */
16 |     public function boot()
17 |     {
18 |         Nova::serving(function (ServingNova $event) {
19 |             Nova::script('nova-swatches', __DIR__ . '/../dist/js/field.js');
20 |             Nova::style('nova-swatches', __DIR__ . '/../dist/css/field.css');
21 |         });
22 | 
23 |         $this->publishes([
24 |             __DIR__ . '/../config/swatches.php' => config_path('nova/swatches.php'),
25 |         ], 'config');
26 |     }
27 | 
28 |     /**
29 |      * Register any application services.
30 |      *
31 |      * @return void
32 |      */
33 |     public function register()
34 |     {
35 |         //
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/Swatches.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Yna\NovaSwatches;
  4 | 
  5 | use Laravel\Nova\Fields\Field;
  6 | 
  7 | class Swatches extends Field
  8 | {
  9 |     /**
 10 |      * The field's component.
 11 |      *
 12 |      * @var string
 13 |      */
 14 |     public $component = 'nova-swatches';
 15 | 
 16 |     /**
 17 |      * The text alignment for the field's text in tables.
 18 |      *
 19 |      * @var string
 20 |      */
 21 |     public $textAlign = 'center';
 22 | 
 23 |     /**
 24 |      * The field's props.
 25 |      * 
 26 |      * @var array
 27 |      */
 28 |     protected $props = [];
 29 | 
 30 |     public function __construct($name, $attribute = null, callable $resolveCallback = null)
 31 |     {
 32 |         parent::__construct($name, $attribute, $resolveCallback);
 33 | 
 34 |         $props = config('nova.swatches.props');
 35 | 
 36 |         if (!empty($props)) {
 37 |             $this->withProps($props);
 38 |         }
 39 |     }
 40 | 
 41 |     /**
 42 |      * @return $this 
 43 |      */
 44 |     public function hideLabelFromForms()
 45 |     {
 46 |         return $this->withMeta(['hideLabelFromForms' => true]);
 47 |     }
 48 | 
 49 |     /**
 50 |      * @param string|array $colors 
 51 |      * @return $this
 52 |      */
 53 |     public function colors($colors)
 54 |     {
 55 |         return $this->withProps(['colors' => $colors]);
 56 |     }
 57 | 
 58 |     /**
 59 |      * @param string $direction
 60 |      * @return $this
 61 |      */
 62 |     public function popoverTo($direction)
 63 |     {
 64 |         return $this->withProps(['popoverTo' => $direction]);
 65 |     }
 66 | 
 67 |     /**
 68 |      * @param string $length
 69 |      * @return $this
 70 |      */
 71 |     public function rowLength($length)
 72 |     {
 73 |         return $this->withProps(['rowLength' => $length]);
 74 |     }
 75 | 
 76 |     /**
 77 |      * @param string|boolean $inputType - "text" | "color" | false
 78 |      * @return $this 
 79 |      */
 80 |     public function showFallback($inputType = 'text')
 81 |     {
 82 |         if (!$inputType) {
 83 |             return $this->withProp('showFallback', false);
 84 |         }
 85 | 
 86 |         return $this->withProps([
 87 |             'showFallback' => true,
 88 |             'fallbackInputType' => $inputType,
 89 |         ]);
 90 |     }
 91 | 
 92 |     /**
 93 |      * Pass a prop directly to vue-swatches.
 94 |      * 
 95 |      * See https://saintplay.github.io/vue-swatches/#sub-props
 96 |      * 
 97 |      * @param string $name 
 98 |      * @param mixed $value 
 99 |      * @return $this 
100 |      */
101 |     public function withProp($name, $value)
102 |     {
103 |         return $this->withProps([$name => $value]);
104 |     }
105 | 
106 |     /**
107 |      * Pass an array of props directly to vue-swatches.
108 |      * 
109 |      * See https://saintplay.github.io/vue-swatches/#sub-props
110 |      * 
111 |      * @param array $array
112 |      * @return $this 
113 |      */
114 |     public function withProps($array)
115 |     {
116 |         $this->props = array_merge($this->props, $array);
117 | 
118 |         return $this->withMeta(['props' => $this->props]);
119 |     }
120 | 
121 |     public function withDefault($color)
122 |     {
123 |         return $this->withMeta(['value' => $color]);
124 |     }
125 | }
126 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
1 | let mix = require('laravel-mix')
2 | 
3 | mix
4 |   .setPublicPath('dist')
5 |   .js('resources/js/field.js', 'js')
6 |   .sass('resources/sass/field.scss', 'css')
7 | 


--------------------------------------------------------------------------------