inertia-bootstrap-forms 2.1.13 → 2.1.15

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.15",
     "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,83 @@
+<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,
+    },
+    disabled: {
+      type: Boolean,
+      default: 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" :class="{'disabled': disabled}">
+    <input
+        :name="name"
+        :id="inputID"
+        v-model="modelValue"
+        :class="{'is-invalid': form?.errors[name]}"
+        :disabled="form?.processing || disabled"
+        :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,