inertia-bootstrap-forms 1.0.4 → 1.0.7

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.4",
+    "version": "1.0.7",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
-    "main": "index.js",
-    "module": "index.js",
+    "main": "src/index.js",
+    "module": "src/index.js",
     "type": "module",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/MultiQuantityInput.vue

@@ -1,68 +1,132 @@
 <script>
 import {Dropdown, DropdownToggle, DropdownMenu, InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {inject} from "vue";
+import {computed, inject} from "vue";
+import QuantityInput from "./QuantityInput.vue";
+import GroupControl from "./GroupControl.vue";
 
 export default {
-    components: {InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        required: Boolean,
-        disabled: Boolean,
-        readonly: Boolean,
-        unit: {
-            type: String,
-            default: 'عدد'
-        },
+  components: {GroupControl, QuantityInput, InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-    setup(props) {
-        let form = inject('form');
+    required: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    options: {
+      type: Array,
+      default: [],
+      required: true,
+    },
+    max: {
+      type: Number,
+    },
+    totalMax: {
+      type: Number,
+    },
+    min: {
+      type: Number,
+      default: 1,
+    },
+    totalMin: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props) {
+    let form = inject('form');
+    let group = inject('group', {});
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
+    if (form === undefined) {
+      form = {
+        errors: {},
+        getID(name) {
         }
+      };
+    }
 
-        if(!form[props.name]) {
-            form[props.name] = 1;
-        }
+    if (!form[props.name]) {
+      form[props.name] = 1;
+    }
 
-        return {form};
-    },
-    methods: {
-        onChange(event) {
-            let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
-            this.form[this.name] = value;
-            this.$emit('update:modelValue', value);
-        },
-        increment() {
-            if (!this.max || (this.max < this.form[this.name])) {
-                this.form[this.name]++;
-            }
-        },
-        decrement() {
-            if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
-                this.form[this.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;
         }
-    },
-    data() {
-        return {}
-    }
+      }
+    });
+
+    return {modelValue, form};
+  },
+  methods: {},
+  data() {
+    return {}
+  }
 }
 </script>
 <template>
-  <Dropdown>
-    <DropdownToggle>adasd</DropdownToggle>
+  <Dropdown class="multi-quantity-input">
+    <DropdownToggle class="form-control" data-bs-auto-close="outside">
+      asdsa
+    </DropdownToggle>
     <DropdownMenu>
-      asdasd
+      <GroupControl :name="name">
+        <div class="row align-items-center justify-content-between" v-for="(item, key) in options">
+          <div class="col-auto">
+            {{ item?.name || item }}
+          </div>
+          <div class="col-auto">
+            <QuantityInput :name="key" :min="(item.min || min)" :max="(item.max || max)"/>
+          </div>
+        </div>
+      </GroupControl>
     </DropdownMenu>
   </Dropdown>
 </template>
 <style>
+.multi-quantity-input .dropdown-menu {
+  width: 100%;
+  padding: 10px 15px;
+}
+
+.multi-quantity-input .input-group {
+  align-items: center;
+}
+
+.multi-quantity-input .input-group .input-group-text {
+  display: none;
+}
+
+.multi-quantity-input .input-group .form-control {
+  width: 50px;
+}
+
+.multi-quantity-input .input-group .btn {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  width: 25px;
+  height: 25px;
+  border-radius: 50% !important;
+  padding: 5px;
+}
+
+.multi-quantity-input .input-group .btn,
+.multi-quantity-input .input-group .btn:active,
+.multi-quantity-input .input-group .btn:focus {
+  background-color: var(--bs-primary, #de0021);
+  color: #ffffff;
+}
+
+.multi-quantity-input .input-group .btn svg,
+.multi-quantity-input .input-group .btn svg path {
+  fill: #ffffff;
+}
 </style>

package/src/QuantityInput.vue

@@ -1,106 +1,129 @@
 <script>
 import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {inject} from "vue";
+import {computed, inject} from "vue";
 
 export default {
-    components: {InputGroup, InputGroupText},
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        required: Boolean,
-        disabled: Boolean,
-        readonly: Boolean,
-        unit: {
-            type: String,
-            default: 'عدد'
-        },
+  components: {InputGroup, InputGroupText},
+  props: {
+    name: {
+      type: String,
+      required: true,
     },
-    setup(props) {
-        let form = inject('form');
+    required: Boolean,
+    disabled: Boolean,
+    readonly: Boolean,
+    unit: {
+      type: String,
+      default: 'عدد'
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: 1
+    },
+  },
+  setup(props) {
+    let form = inject('form');
+    let group = inject('group', {});
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
+    if (form === undefined) {
+      form = {
+        errors: {},
+        getID(name) {
         }
+      };
+    }
 
-        if(!form[props.name]) {
-            form[props.name] = 1;
+    if (!form[props.name]) {
+      form[props.name] = 1;
+    }
+
+    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, group, form};
+  },
+  methods: {
+    onChange(event) {
+      let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
+      this.$emit('update:modelValue', value);
+      this.modelValue = value;
     },
-    methods: {
-        onChange(event) {
-            let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
-            this.form[this.name] = value;
-            this.$emit('update:modelValue', value);
-        },
-        increment() {
-            if (!this.max || (this.max < this.form[this.name])) {
-                this.form[this.name]++;
-            }
-        },
-        decrement() {
-            if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
-                this.form[this.name]--;
-            }
-        }
+    increment() {
+      if (!this.max || (this.max < this.modelValue)) {
+        this.modelValue = this.modelValue + 1;
+      }
     },
-    data() {
-        return {}
+    decrement() {
+      if ((!this.min || (this.min < this.modelValue)) && this.modelValue > 1) {
+        this.modelValue = this.modelValue - 1;
+      }
     }
+  },
+  data() {
+    return {}
+  }
 }
 </script>
 <template>
-    <InputGroup class="input-group-quantity">
-        <button @click="increment" type="button" class="btn">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                <path
-                    d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/>
-            </svg>
-        </button>
-        <input
-            :name="name"
-            :value="form[name]"
-            v-maska
-            data-maska="###,###,###,###,###,###,###"
-            data-maska-reversed
-            @maska="onChange"
-            :class="{'is-invalid': form.errors[name]}"
-            :disabled="disabled || form.processing"
-            :readonly="readonly"
-            type="tel"
-            class="form-control fanum text-center">
-        <button @click="decrement" type="button" class="btn">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                <path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/>
-            </svg>
-        </button>
-        <InputGroupText class="fanum">{{ unit }}</InputGroupText>
-        <slot name="suffix"/>
-    </InputGroup>
+  <InputGroup class="input-group-quantity">
+    <button @click="increment" type="button" class="btn">
+      <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H11V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H13V3Z"
+            fill="#0F0F0F"/>
+      </svg>
+    </button>
+    <input
+        :name="name"
+        :value="this.modelValue"
+        v-maska
+        data-maska="###,###,###,###,###,###,###"
+        data-maska-reversed
+        @maska="onChange"
+        :class="{'is-invalid': form.errors[name]}"
+        :disabled="disabled || form.processing"
+        :readonly="readonly"
+        type="tel"
+        class="form-control fanum text-center">
+    <button @click="decrement" type="button" class="btn">
+      <svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
+        <path fill="#000000" fill-rule="evenodd" d="M18 10a1 1 0 01-1 1H3a1 1 0 110-2h14a1 1 0 011 1z"/>
+      </svg>
+    </button>
+    <InputGroupText class="fanum">{{ unit }}</InputGroupText>
+    <slot name="suffix"/>
+  </InputGroup>
 </template>
 <style>
 
 .input-group-quantity .input-group-text,
-.input-group-quantity .btn{
-    background-color: var(--bs-body-bg);
-    --bs-btn-hover-bg:var(--bs-secondary-bg);
-    --bs-btn-active-bg:var(--bs-secondary-bg);
+.input-group-quantity .btn {
+  background-color: var(--bs-body-bg);
+  --bs-btn-hover-bg: var(--bs-secondary-bg);
+  --bs-btn-active-bg: var(--bs-secondary-bg);
 }
 
-.input-group-quantity input.form-control{
-    border: 0 !important;
-    box-shadow: none !important;
+.input-group-quantity input.form-control {
+  border: 0 !important;
+  box-shadow: none !important;
 }
 
 .input-group-quantity .btn svg {
-    width: 14px;
-    height: 14px;
+  width: 14px;
+  height: 14px;
 }
 </style>

package/src/index.js

@@ -0,0 +1,51 @@
+import AmountInput from "./AmountInput.vue";
+import CaptchaInput from "./CaptchaInput.vue";
+import CheckboxButtonInput from "./CheckboxButtonInput.vue";
+import CheckboxInput from "./CheckboxInput.vue";
+import CheckboxToggle from "./CheckboxToggle.vue";
+import PersianDatePickerInput from "./PersianDatePickerInput.vue";
+import EditorInput from "./EditorInput.vue";
+import FileInput from "./FileInput.vue";
+import EmailInput from "./EmailInput.vue";
+import GroupControl from "./GroupControl.vue";
+import FormContainer from "./FormContainer.vue";
+import FormLabel from "./FormLabel.vue";
+import locationInput from "./locationInput.vue";
+import MobileInput from "./MobileInput.vue";
+import PasswordInput from "./PasswordInput.vue";
+import QuantityInput from "./QuantityInput.vue";
+import MultiQuantityInput from "./MultiQuantityInput.vue";
+import SecondarySubmitButton from "./SecondarySubmitButton.vue";
+import Select2Input from "./Select2Input.vue";
+import StarRatingInput from "./StarRatingInput.vue";
+import SubmitButton from "./SubmitButton.vue";
+import TelInput from "./TelInput.vue";
+import TextAreaInput from "./TextAreaInput.vue";
+import TextInput from "./TextInput.vue";
+
+export {
+    AmountInput,
+    CaptchaInput,
+    CheckboxButtonInput,
+    CheckboxInput,
+    CheckboxToggle,
+    FileInput,
+    EmailInput,
+    PersianDatePickerInput,
+    EditorInput,
+    GroupControl,
+    FormContainer,
+    locationInput,
+    MobileInput,
+    PasswordInput,
+    QuantityInput,
+    MultiQuantityInput,
+    SubmitButton,
+    SecondarySubmitButton,
+    StarRatingInput,
+    Select2Input,
+    FormLabel,
+    TelInput,
+    TextAreaInput,
+    TextInput,
+}

package/index.js

@@ -1,49 +0,0 @@
-import AmountInput from "./src/AmountInput.vue";
-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 PersianDatePickerInput from "./src/PersianDatePickerInput.vue";
-import EditorInput from "./src/EditorInput.vue";
-import FileInput from "./src/FileInput.vue";
-import EmailInput from "./src/EmailInput.vue";
-import GroupControl from "./src/GroupControl.vue";
-import FormContainer from "./src/FormContainer.vue";
-import FormLabel from "./src/FormLabel.vue";
-import locationInput from "./src/locationInput.vue";
-import MobileInput from "./src/MobileInput.vue";
-import PasswordInput from "./src/PasswordInput.vue";
-import QuantityInput from "./src/QuantityInput.vue";
-import SecondarySubmitButton from "./src/SecondarySubmitButton.vue";
-import Select2Input from "./src/Select2Input.vue";
-import StarRatingInput from "./src/StarRatingInput.vue";
-import SubmitButton from "./src/SubmitButton.vue";
-import TelInput from "./src/TelInput.vue";
-import TextAreaInput from "./src/TextAreaInput.vue";
-import TextInput from "./src/TextInput.vue";
-
-export {
-    AmountInput,
-    CaptchaInput,
-    CheckboxButtonInput,
-    CheckboxInput,
-    CheckboxToggle,
-    FileInput,
-    EmailInput,
-    PersianDatePickerInput,
-    EditorInput,
-    GroupControl,
-    FormContainer,
-    locationInput,
-    MobileInput,
-    PasswordInput,
-    QuantityInput,
-    SubmitButton,
-    SecondarySubmitButton,
-    StarRatingInput,
-    Select2Input,
-    FormLabel,
-    TelInput,
-    TextAreaInput,
-    TextInput,
-}