Add columns option for 'checkboxes' and 'multi_select' fields

area17 · Aug 12, 2021 · ee1f668 · ee1f668
1 parent 896c58c
commit ee1f668
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/frontend/js/components/MultiSelect.vue b/frontend/js/components/MultiSelect.vue
@@ -5,7 +5,9 @@
         <div class="multiselector__outer">
           <div class="multiselector__item"
                v-for="(checkbox, index) in fullOptions"
-               :key="index">
+               :key="index"
+               :style="itemStyle"
+            >
             <input class="multiselector__checkbox" :class="{'multiselector__checkbox--checked': checkedValue.includes(checkbox.value) }" type="checkbox" :value="checkbox.value" :name="name +   '[' + randKey + ']'" :id="uniqId(checkbox.value, index)" :disabled="checkbox.disabled || disabled" v-model="checkedValue">
             <label class="multiselector__label" :for="uniqId(checkbox.value, index)" @click.prevent="changeCheckbox(checkbox.value)">
               <span class="multiselector__icon"><span v-svg symbol="check"></span></span>
@@ -40,6 +42,10 @@
         type: Boolean,
         default: true
       },
+      columns: {
+        type: Number,
+        default: 0
+      },
       inline: {
         type: Boolean,
         default: false
@@ -51,11 +57,27 @@
     },
     computed: {
       gridClasses: function () {
+        if (this.columns >= 1) {
+          return [
+            'multiselector--columns',
+            this.grid ? 'multiselector--grid' : ''
+          ]
+        }
+
         return [
           this.grid ? 'multiselector--grid' : '',
           this.inline ? 'multiselector--inline' : '',
           this.border ? 'multiselector--border' : ''
         ]
+      },
+      itemStyle: function () {
+        if (this.columns >= 1) {
+          return {
+            width: `${100 / this.columns}%`
+          }
+        }
+
+        return {}
       }
     },
     methods: {
@@ -190,8 +212,9 @@
     border-color: $color__fborder--active;
   }
 
-  /* grid version */
-  .multiselector--grid {
+  /* grid + columns shared styles */
+  .multiselector--grid,
+  .multiselector--columns {
     border:1px solid $color__border;
     background-clip: padding-box;
     box-sizing: border-box;
@@ -249,7 +272,10 @@
       top:50%;
       margin-top:-8px;
     }
+  }
 
+  /* grid version */
+  .multiselector--grid {
     .multiselector__bg {
       display:block;
       position:absolute;
@@ -274,25 +300,10 @@
     }
   }
 
-  /* Grid in editor */
-  .s--in-editor .multiselector--grid .multiselector__item {
-      width:100%;
-
-      @include breakpoint('small') {
-        width:100%
-      }
-
-      @include breakpoint('medium') {
-        width:100%
-      }
-
-      @include breakpoint('large') {
-        width:100%
-      }
-
-      @include breakpoint('large+') {
-        width:100%
-      }
+  /* grid or columns in editor */
+  .s--in-editor .multiselector--grid .multiselector__item,
+  .s--in-editor .multiselector--columns .multiselector__item {
+    width: 100% !important; // override inline styles, if any (@see itemStyle)
   }
 
   /* inline version */

diff --git a/views/partials/form/_checkboxes.blade.php b/views/partials/form/_checkboxes.blade.php
@@ -9,6 +9,7 @@
     $note = $note ?? false;
     $inline = $inline ?? false;
     $border = $border ?? false;
+    $columns = $columns ?? 0;
 
     // do not use for now, but this will allow you to create a new option directly from the form
     $addNew = $addNew ?? false;
@@ -22,6 +23,7 @@
     @include('twill::partials.form.utils._field_name')
     :options="{{ json_encode($options) }}"
     :grid="false"
+    :columns="{{ $columns }}"
     :inline='{{ $inline ? 'true' : 'false' }}'
     :border='{{ $border ? 'true' : 'false' }}'
     @if ($min ?? false) :min="{{ $min }}" @endif

diff --git a/views/partials/form/_multi_select.blade.php b/views/partials/form/_multi_select.blade.php
@@ -8,6 +8,7 @@
 
     $unpack = $unpack ?? true;
     $note = $note ?? false;
+    $columns = $columns ?? 0;
 
     // do not use for now, but this will allow you to create a new option directly from the form
     $addNew = $addNew ?? false;
@@ -22,6 +23,7 @@
         @include('twill::partials.form.utils._field_name')
         :options="{{ json_encode($options) }}"
         :grid="true"
+        :columns="{{ $columns }}"
         :inline="false"
         @if ($min ?? false) :min="{{ $min }}" @endif
         @if ($max ?? false) :max="{{ $max }}" @endif