inertia-bootstrap-forms 1.0.33 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.33",
+    "version": "1.0.34",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/CheckboxToggle.vue

@@ -30,6 +30,9 @@ export default {
   computed: {
     inputID() {
       return this.form.getID(this) + (this.value || '');
+    },
+    selectedValue(){
+      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
     }
   },
   setup(props) {
@@ -59,7 +62,7 @@ export default {
 }
 </script>
 <template>
-  <label class="form-check-toggle" :class="{'form-check-toggle--active': (Array.isArray(modelValue) ? modelValue : [modelValue]).include(value)}" :for="inputID">
+  <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value)}" :for="inputID">
     <input
         :name="name + (group ? '_' + group?.name + '-'+group?.groupID : '')"
         :id="inputID"

package/src/EditorInput.vue

@@ -1,6 +1,6 @@
 <script>
 import Editor from '@tinymce/tinymce-vue';
-import {inject} from "vue";
+import {computed, inject} from "vue";
 
 export default {
     components: {Editor},
@@ -27,17 +27,28 @@ export default {
         },
     },
     setup(props) {
-        let form = inject('form');
+      let form = inject('form', {
+        errors: {},
+        getID(name) {
+          return name;
+        }
+      });
+      let group = inject('group', {});
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
+      const modelValue = computed({
+        get() {
+          return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
+        },
+        set(value) {
+          if (group?.value?.name) {
+            group.value.setData(props.name, value);
+          } else {
+            form.value[props.name] = value;
+          }
         }
+      });
 
-        return {form};
+      return {modelValue, form, group};
     },
     emits: ['update:modelValue'],
 }
@@ -47,7 +58,7 @@ export default {
     <Editor
         api-key="tbws10u99swxhai03qolxykukvqw99jd4nw9q8z34aocvc4r"
         tinymce-script-src="/js/tinymce/tinymce.min.js"
-        v-model="form[name]"
+        v-model="modelValue"
         :init="{
           base_url: '/js/tinymce/',
           disabled: false,

package/src/FormContainer.vue

@@ -34,7 +34,11 @@ export default {
     setup(props) {
         const formEl = toRef('formEl');
         const formData = reactive(props.modelValue);
-        const form = useForm(formData);
+        const form = useForm({
+          hasMessage: false,
+          successMessage: null,
+          ...formData
+        });
 
         form.getID = function (el) {
             if (typeof el === String) {
@@ -58,6 +62,8 @@ export default {
                     isDirty,
                     errors,
                     hasErrors,
+                    hasMessage,
+                    successMessage,
                     processing,
                     progress,
                     wasSuccessful,
@@ -101,7 +107,10 @@ export default {
                 }).submit(this.method.toString(), this.url, {
                     only: this.only,
                     onStart: () => {
-                        this.$emit('onStart');
+                      this.form.hasMessage = false;
+                      this.form.successMessage = null;
+
+                      this.$emit('onStart');
                         this.form.clearErrors();
                     },
                     onFinish: (data) => {
@@ -111,6 +120,12 @@ export default {
                     },
                     onSuccess: (data) => {
                         this.reset();
+
+                        if(data?.props?.message){
+                          this.form.hasMessage = true;
+                          this.form.successMessage = data?.props?.message;
+                        }
+
                         this.$emit('onSuccess', data);
                     }
                 });
@@ -137,6 +152,9 @@ export default {
                 </ul>
             </Alert>
         </slot>
+        <slot name="message" v-if="form.hasMessage" :form="form">
+            <Alert type="success" v-html="form.successMessage"></Alert>
+        </slot>
         <slot :form="form" :submit="submit"/>
     </form>
 </template>

package/src/Select2Input.vue

@@ -44,6 +44,10 @@ export default {
       type: Boolean,
       default: false
     },
+    hideDropdown: {
+      type: Boolean,
+      default: false
+    },
     search: {
       type: Object,
       default: {
@@ -75,6 +79,15 @@ export default {
 
     return {modelValue, form, group};
   },
+  computed: {
+    selectedValue() {
+      if (!this.multiple) {
+        return this.modelValue;
+      }
+
+      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
+    }
+  },
   methods: {
     init() {
       this.choices = new Choices(this.$refs.input, {
@@ -179,7 +192,8 @@ export default {
 </script>
 <template>
   <div class="select2-controller" :class="{
-        'is-invalid': form.errors[name]
+        'is-invalid': form.errors[name],
+        'select2-dropdown-hidden': hideDropdown === true
   }">
     <select
         v-bind="$props"
@@ -192,7 +206,9 @@ export default {
       }"
         :placeholder="placeholder"
         ref="input">
-      <option :value="item.id" v-for="(item, key) in options" :selected="modelValue === item.id">{{ item.name }}
+      <option
+          :value="(item.id || item)" v-for="(item, key) in options"
+          :selected="multiple ? (selectedValue || []).includes(item.id || item) : (item.id || item) === modelValue">{{ item.name || item }}
       </option>
     </select>
   </div>

package/src/css/from-select.scss

@@ -84,7 +84,7 @@
     height: 0;
     width: 0;
     border-style: solid;
-    border-color: #333 transparent transparent;
+    border-color: var(--bs-secondary-color, #333) transparent transparent;
     border-width: 5px;
     position: absolute;
     right: 11.5px;
@@ -94,7 +94,7 @@
 }
 
 .choices[data-type*=select-one].is-open::after {
-    border-color: transparent transparent #333;
+    border-color: transparent transparent var(--bs-secondary-color, #333);
     margin-top: -7.5px
 }
 
@@ -137,7 +137,7 @@
     width: 100%;
     background-color: var(--bs-body-bg, #ffffff);
     padding: calc(.5rem - 4px) .75rem calc(.5rem - 4px) .75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--bs-border-color, #ddd);
     border-radius: var(--bs-border-radius);
     font-size: var(--bs-body-font-size);
     min-height: 44px;
@@ -148,15 +148,16 @@
     border-color: var(--bs-danger, #de0021);
 }
 
-.is-focused .choices__inner, .is-open .choices__inner {
+.is-focused .choices__inner,
+.is-open .choices__inner {
     border-color: #b7b7b7
 }
 
-.is-open .choices__inner {
+.select2-controller:not(.select2-dropdown-hidden) .is-open .choices__inner {
     border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0
 }
 
-.is-flipped.is-open .choices__inner {
+.select2-controller:not(.select2-dropdown-hidden) .is-flipped.is-open .choices__inner {
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius)
 }
 
@@ -195,8 +196,8 @@
     font-weight: 500;
     margin-right: 3.75px;
     margin-bottom: 3.75px;
-    background-color: var(--bs-body-secondary, #999999);
-    border: 1px solid var(--bs-body-secondary, #999999);
+    background-color: var(--bs-secondary-bg, #999999);
+    border: 1px solid var(--bs-secondary-bg, #999999);
     color: var(--bs-body-color, #ffffff);
     word-break: break-all;
     box-sizing: border-box
@@ -221,13 +222,17 @@
     border: 1px solid var(--bs-secondary, #003642)
 }
 
+.select2-dropdown-hidden .choices__list--dropdown{
+  display: none !important;
+}
+
 .choices__list--dropdown, .choices__list[aria-expanded] {
     display: none;
     z-index: 99999;
     position: absolute;
     width: 100%;
-    background-color: var(--bs-secondary-bg, #ddd);
-    border: 1px solid var(--bs-secondary-bg, #ddd);
+    background-color: var(--bs-body-bg, #ddd);
+    border: 1px solid var(--bs-body-bg, #ddd);
     top: 100%;
     margin-top: -1px;
     border-bottom-left-radius: var(--bs-border-radius);
@@ -295,7 +300,7 @@
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-    background-color: #f2f2f2
+    background-color: var(--bs-secondary-bg, #ddd)
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
@@ -348,7 +353,7 @@
 .choices__input {
     display: inline-block;
     vertical-align: baseline;
-    background-color: #f9f9f9;
+    background-color: var(--bs-body-bg, #f7f7f7);
     font-size: var(--bs-body-font-size);
     border: 0;
     border-radius: 0;