inertia-bootstrap-forms 2.1.16 → 2.1.18

package/index.d.ts

@@ -126,7 +126,43 @@ export const CheckboxButtonInput: DefineComponent<{
     },
 }, {}, any>;
 export const CheckboxInput: DefineComponent<{}, {}, any>;
-export const CheckboxToggle: DefineComponent<{}, {}, any>;
+export const CheckboxToggle: DefineComponent<{
+    name: {
+        type: String,
+        required: true,
+    },
+    id: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    value: {
+        type: [String, Number],
+        default: 'yes',
+        required: false,
+    },
+    checked: {
+        type: [Boolean],
+        default: '',
+    },
+    type: {
+        type: String,
+        default: 'checkbox',
+        required: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    hideInput: {
+        type: Boolean,
+        default: false,
+    }
+}, {}, any>;
 export const SwitchInput: DefineComponent<{}, {}, any>;
 export const countryCodes: any;
 export const EditorInput: DefineComponent<{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "2.1.16",
+    "version": "2.1.18",
     "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

@@ -17,11 +17,24 @@ export default defineComponent({
       default: 'yes',
       required: false,
     },
+    checked: {
+      type: [Boolean],
+      default: '',
+    },
     type: {
       type: String,
       default: 'checkbox',
       required: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     hideInput: {
       type: Boolean,
       default: false,
@@ -31,7 +44,7 @@ export default defineComponent({
     inputID() {
       return this.form.getID(this) + (this.value || '');
     },
-    selectedValue(){
+    selectedValue() {
       return (this.modelValue && typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
     }
   },
@@ -62,15 +75,22 @@ export default defineComponent({
 })
 </script>
 <template>
-  <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value), 'is-invalid': form?.errors[name]}" :for="inputID">
+  <label class="form-check-toggle"
+         :class="{
+            'form-check-toggle--active': (selectedValue || []).includes(value),
+            'disabled': disabled,
+            'is-invalid': form?.errors[name]
+         }" :for="inputID">
     <input
         :name="name"
         :id="inputID"
         v-model="modelValue"
         :class="{'is-invalid': form?.errors[name], 'form-check-toggle--input-hide': hideInput}"
-        :disabled="form?.processing"
+        :disabled="form?.processing || disabled"
         :type="type"
         :value="value"
+        :checked="checked"
+        :readonly="readonly"
         @change="e => $emit('change', e)"
         class="form-check-toggle--input form-check-input">
     <slot/>
@@ -103,7 +123,7 @@ export default defineComponent({
 }
 
 .form-check-toggle.form-check-toggle--active,
-.form-check-toggle:has(input:checked){
+.form-check-toggle:has(input:checked) {
   background-color: var(--bs-warning-bg-subtle, #ffda6a);
   border-color: var(--bs-warning-border-subtle, var(--bs-alert-border-color, #fff0c3));
 }