inertia-bootstrap-forms 2.1.13 → 2.1.14

package/index.d.ts

@@ -6,6 +6,7 @@ import CaptchaInput from './src/CaptchaInput.vue';
 import CheckboxButtonInput from './src/CheckboxButtonInput.vue';
 import CheckboxInput from './src/CheckboxInput.vue';
 import CheckboxToggle from './src/CheckboxToggle.vue';
+import SwitchInput from './src/SwitchInput.vue';
 import EditorInput from './src/EditorInput.vue';
 import EmailInput from './src/EmailInput.vue';
 import FileInput from './src/FileInput.vue';
@@ -37,6 +38,7 @@ export {
     CheckboxButtonInput,
     CheckboxInput,
     CheckboxToggle,
+    SwitchInput,
     countryCodes,
     EditorInput,
     EmailInput,
@@ -125,6 +127,7 @@ export const CheckboxButtonInput: DefineComponent<{
 }, {}, any>;
 export const CheckboxInput: DefineComponent<{}, {}, any>;
 export const CheckboxToggle: DefineComponent<{}, {}, any>;
+export const SwitchInput: DefineComponent<{}, {}, any>;
 export const countryCodes: any;
 export const EditorInput: DefineComponent<{
     name: {
@@ -442,6 +445,7 @@ declare const Vue3FormComponents: {
     CheckboxButtonInput: typeof CheckboxButtonInput;
     CheckboxInput: typeof CheckboxInput;
     CheckboxToggle: typeof CheckboxToggle;
+    SwitchInput: typeof SwitchInput;
     DropzoneInput: typeof DropzoneInput;
     countryCodes: typeof countryCodes;
     EditorInput: typeof EditorInput;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "2.1.13",
+    "version": "2.1.14",
     "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/SwitchInput.vue

@@ -0,0 +1,79 @@
+<script>
+import {computed, defineComponent, inject} from "vue";
+
+export default defineComponent({
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        id: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        value: {
+            type: [String, Number],
+            default: null,
+            required: false,
+        },
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+    },
+    computed: {
+        inputID() {
+            return this.form.getID(this);
+        }
+    },
+    setup(props) {
+        let form = inject('form', {
+            errors: {},
+            getID(name) {
+                return name;
+            }
+        });
+        let group = inject('group', {});
+
+        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 {modelValue, form, group};
+    },
+})
+</script>
+<template>
+    <div class="form-check form-switch">
+        <input
+            :name="name"
+            :id="inputID"
+            v-model="modelValue"
+            :class="{'is-invalid': form?.errors[name]}"
+            :disabled="form?.processing"
+            :type="type"
+            :value="value"
+            @change="e => $emit('change', e)"
+            class="form-check-input">
+        <label class="form-check-label" :for="inputID">
+            <slot/>
+        </label>
+    </div>
+</template>
+<style>
+.form-check,
+.form-check label {
+    cursor: pointer;
+}
+</style>

package/src/index.js

@@ -3,6 +3,7 @@ import CaptchaInput from "./CaptchaInput.vue";
 import CheckboxButtonInput from "./CheckboxButtonInput.vue";
 import CheckboxInput from "./CheckboxInput.vue";
 import CheckboxToggle from "./CheckboxToggle.vue";
+import SwitchInput from "./SwitchInput.vue";
 import PersianDatePickerInput from "./PersianDatePickerInput.vue";
 import EditorInput from "./EditorInput.vue";
 import FileInput from "./FileInput.vue";
@@ -33,6 +34,7 @@ export {
     CheckboxButtonInput,
     CheckboxInput,
     CheckboxToggle,
+    SwitchInput,
     FileInput,
     EmailInput,
     PersianDatePickerInput,