Ability to hide uncheck values on detail page

dist/mix-manifest.json

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

mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/dist/js/field.js": "/dist/js/field.js",
+    "/C:/dist/js/field.js": "/C:/dist/js/field.js",
     "/dist/css/field.css": "/dist/css/field.css"
 }

resources/js/components/DetailField.vue

@@ -9,6 +9,7 @@
                     v-for="(label, option) in field.options"
                     :key="option"
                     class="flex-auto"
+                    :class="optionVisible(option)"
                 >
                     <span
                         class="inline-block rounded-full w-2 h-2 mr-1"
@@ -32,6 +33,10 @@ export default {
                 'bg-danger': this.field.value ? !this.field.value.includes(option) : true,
             }
         },
+        optionVisible(option) {
+            if(this.field.hideUncheckedValues && !this.field.value.includes(option)) 
+                return 'hidden'
+        }
     },
 }
 </script>

src/Checkboxes.php

@@ -114,4 +114,12 @@ private function castValueToType($value)
 
         return $value;
     }
+
+     /**
+     * Hide unchecked values
+     */
+    public function hideUncheckedValues($hideUncheckedValues = true)
+    {
+        return $this->withMeta(['hideUncheckedValues' => $hideUncheckedValues]);
+    }
 }

webpack.mix.js

@@ -1,7 +1,8 @@
 let mix = require('laravel-mix')
 
-mix.js('resources/js/field.js', 'dist/js')
-   .sass('resources/sass/field.scss', 'dist/css')
+mix.setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+   .sass('resources/sass/field.scss', 'css')
     .webpackConfig({
         resolve: {
             symlinks: false