inertia-bootstrap-forms 1.0.5 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/MultiQuantityInput.vue +127 -48
- package/src/QuantityInput.vue +106 -79
- package/src/index.js +51 -0
- package/index.js +0 -51
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inertia-bootstrap-forms",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "Create bootstrap forms with inertia and twitter bootstrap",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"module": "index.js",
|
|
5
|
+
"main": "src/index.js",
|
|
6
|
+
"module": "src/index.js",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
@@ -1,68 +1,147 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {Dropdown, DropdownToggle, DropdownMenu, InputGroup, InputGroupText} from 'vue3-bootstrap-components';
|
|
3
|
-
import {inject} from "vue";
|
|
3
|
+
import {computed, inject} from "vue";
|
|
4
|
+
import QuantityInput from "./QuantityInput.vue";
|
|
5
|
+
import GroupControl from "./GroupControl.vue";
|
|
4
6
|
|
|
5
7
|
export default {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
required: Boolean,
|
|
13
|
-
disabled: Boolean,
|
|
14
|
-
readonly: Boolean,
|
|
15
|
-
unit: {
|
|
16
|
-
type: String,
|
|
17
|
-
default: 'عدد'
|
|
18
|
-
},
|
|
8
|
+
components: {GroupControl, QuantityInput, InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
|
|
9
|
+
props: {
|
|
10
|
+
name: {
|
|
11
|
+
type: String,
|
|
12
|
+
required: true,
|
|
19
13
|
},
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
required: Boolean,
|
|
15
|
+
disabled: Boolean,
|
|
16
|
+
readonly: Boolean,
|
|
17
|
+
options: {
|
|
18
|
+
type: Array,
|
|
19
|
+
default: [],
|
|
20
|
+
required: true,
|
|
21
|
+
},
|
|
22
|
+
max: {
|
|
23
|
+
type: Number,
|
|
24
|
+
default: null,
|
|
25
|
+
},
|
|
26
|
+
totalMax: {
|
|
27
|
+
type: Number,
|
|
28
|
+
default: null,
|
|
29
|
+
},
|
|
30
|
+
min: {
|
|
31
|
+
type: Number,
|
|
32
|
+
default: 1,
|
|
33
|
+
},
|
|
34
|
+
totalMin: {
|
|
35
|
+
type: Number,
|
|
36
|
+
default: null,
|
|
37
|
+
},
|
|
38
|
+
unit: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: 'Number',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
setup(props) {
|
|
44
|
+
let form = inject('form');
|
|
45
|
+
let group = inject('group', {});
|
|
22
46
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
};
|
|
47
|
+
if (form === undefined) {
|
|
48
|
+
form = {
|
|
49
|
+
errors: {},
|
|
50
|
+
getID(name) {
|
|
29
51
|
}
|
|
52
|
+
};
|
|
53
|
+
}
|
|
30
54
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
55
|
+
if (!form[props.name]) {
|
|
56
|
+
form[props.name] = 1;
|
|
57
|
+
}
|
|
34
58
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (!this.max || (this.max < this.form[this.name])) {
|
|
45
|
-
this.form[this.name]++;
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
decrement() {
|
|
49
|
-
if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
|
|
50
|
-
this.form[this.name]--;
|
|
51
|
-
}
|
|
59
|
+
const modelValue = computed({
|
|
60
|
+
get() {
|
|
61
|
+
return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
|
|
62
|
+
},
|
|
63
|
+
set(value) {
|
|
64
|
+
if (group?.value?.name) {
|
|
65
|
+
group.value.setData(props.name, value);
|
|
66
|
+
} else {
|
|
67
|
+
form.value[props.name] = value;
|
|
52
68
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
return {modelValue, form};
|
|
73
|
+
},
|
|
74
|
+
computed: {
|
|
75
|
+
totalQuantity() {
|
|
76
|
+
return this.modelValue ? Object.values(this.modelValue).reduce((sum, value) => sum + value, 0) : this.options.length;
|
|
56
77
|
}
|
|
78
|
+
},
|
|
79
|
+
methods: {},
|
|
80
|
+
data() {
|
|
81
|
+
return {}
|
|
82
|
+
}
|
|
57
83
|
}
|
|
58
84
|
</script>
|
|
59
85
|
<template>
|
|
60
|
-
<Dropdown>
|
|
61
|
-
<DropdownToggle>
|
|
86
|
+
<Dropdown class="multi-quantity-input">
|
|
87
|
+
<DropdownToggle class="form-control fanum" data-bs-auto-close="outside">
|
|
88
|
+
{{ totalQuantity }} {{unit}}
|
|
89
|
+
</DropdownToggle>
|
|
62
90
|
<DropdownMenu>
|
|
63
|
-
|
|
91
|
+
<GroupControl :name="name">
|
|
92
|
+
<div class="row align-items-center justify-content-between" v-for="(item, key) in options">
|
|
93
|
+
<div class="col-auto">
|
|
94
|
+
{{ item?.name || item }}
|
|
95
|
+
</div>
|
|
96
|
+
<div class="col-auto">
|
|
97
|
+
<QuantityInput :name="key" :min="(item.min || min)" :max="(item.max || max)"/>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</GroupControl>
|
|
64
101
|
</DropdownMenu>
|
|
65
102
|
</Dropdown>
|
|
66
103
|
</template>
|
|
67
104
|
<style>
|
|
105
|
+
.multi-quantity-input .dropdown-toggle {
|
|
106
|
+
text-align: start;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.multi-quantity-input .dropdown-menu {
|
|
110
|
+
width: 100%;
|
|
111
|
+
padding: 10px 15px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.multi-quantity-input .input-group {
|
|
115
|
+
align-items: center;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.multi-quantity-input .input-group .input-group-text {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.multi-quantity-input .input-group .form-control {
|
|
123
|
+
width: 50px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.multi-quantity-input .input-group .btn {
|
|
127
|
+
display: flex;
|
|
128
|
+
align-content: center;
|
|
129
|
+
align-items: center;
|
|
130
|
+
width: 25px;
|
|
131
|
+
height: 25px;
|
|
132
|
+
border-radius: 50% !important;
|
|
133
|
+
padding: 5px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.multi-quantity-input .input-group .btn,
|
|
137
|
+
.multi-quantity-input .input-group .btn:active,
|
|
138
|
+
.multi-quantity-input .input-group .btn:focus {
|
|
139
|
+
background-color: var(--bs-primary, #de0021);
|
|
140
|
+
color: #ffffff;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.multi-quantity-input .input-group .btn svg,
|
|
144
|
+
.multi-quantity-input .input-group .btn svg path {
|
|
145
|
+
fill: #ffffff;
|
|
146
|
+
}
|
|
68
147
|
</style>
|
package/src/QuantityInput.vue
CHANGED
|
@@ -1,106 +1,133 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
|
|
3
|
-
import {inject} from "vue";
|
|
3
|
+
import {computed, inject} from "vue";
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
required: Boolean,
|
|
13
|
-
disabled: Boolean,
|
|
14
|
-
readonly: Boolean,
|
|
15
|
-
unit: {
|
|
16
|
-
type: String,
|
|
17
|
-
default: 'عدد'
|
|
18
|
-
},
|
|
6
|
+
components: {InputGroup, InputGroupText},
|
|
7
|
+
props: {
|
|
8
|
+
name: {
|
|
9
|
+
type: String,
|
|
10
|
+
required: true,
|
|
19
11
|
},
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
required: Boolean,
|
|
13
|
+
disabled: Boolean,
|
|
14
|
+
readonly: Boolean,
|
|
15
|
+
unit: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: 'عدد'
|
|
18
|
+
},
|
|
19
|
+
min: {
|
|
20
|
+
type: Number,
|
|
21
|
+
default: 1
|
|
22
|
+
},
|
|
23
|
+
max: {
|
|
24
|
+
type: Number,
|
|
25
|
+
default: 1
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
setup(props) {
|
|
29
|
+
let form = inject('form');
|
|
30
|
+
let group = inject('group', {});
|
|
22
31
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
};
|
|
32
|
+
if (form === undefined) {
|
|
33
|
+
form = {
|
|
34
|
+
errors: {},
|
|
35
|
+
getID(name) {
|
|
29
36
|
}
|
|
37
|
+
};
|
|
38
|
+
}
|
|
30
39
|
|
|
31
|
-
|
|
32
|
-
|
|
40
|
+
if (!form[props.name]) {
|
|
41
|
+
form[props.name] = 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const modelValue = computed({
|
|
45
|
+
get() {
|
|
46
|
+
return ((group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name]);
|
|
47
|
+
},
|
|
48
|
+
set(value) {
|
|
49
|
+
if (group?.value?.name) {
|
|
50
|
+
group.value.setData(props.name, value);
|
|
51
|
+
} else {
|
|
52
|
+
form.value[props.name] = value;
|
|
33
53
|
}
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
if (!modelValue.value) {
|
|
58
|
+
modelValue.value = 1;
|
|
59
|
+
}
|
|
34
60
|
|
|
35
|
-
|
|
61
|
+
return {modelValue, group, form};
|
|
62
|
+
},
|
|
63
|
+
methods: {
|
|
64
|
+
onChange(event) {
|
|
65
|
+
let value = parseFloat(this.$number.toEnglish(event.detail?.unmasked)) || 1;
|
|
66
|
+
this.$emit('update:modelValue', value);
|
|
67
|
+
this.modelValue = value;
|
|
36
68
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
this.$emit('update:modelValue', value);
|
|
42
|
-
},
|
|
43
|
-
increment() {
|
|
44
|
-
if (!this.max || (this.max < this.form[this.name])) {
|
|
45
|
-
this.form[this.name]++;
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
decrement() {
|
|
49
|
-
if ((!this.min || (this.min < this.form[this.name])) && this.form[this.name] > 1) {
|
|
50
|
-
this.form[this.name]--;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
69
|
+
increment() {
|
|
70
|
+
if (!this.max || (this.max < this.modelValue)) {
|
|
71
|
+
this.modelValue = this.modelValue + 1;
|
|
72
|
+
}
|
|
53
73
|
},
|
|
54
|
-
|
|
55
|
-
|
|
74
|
+
decrement() {
|
|
75
|
+
if ((!this.min || (this.min < this.modelValue)) && this.modelValue > 1) {
|
|
76
|
+
this.modelValue = this.modelValue - 1;
|
|
77
|
+
}
|
|
56
78
|
}
|
|
79
|
+
},
|
|
80
|
+
data() {
|
|
81
|
+
return {}
|
|
82
|
+
}
|
|
57
83
|
}
|
|
58
84
|
</script>
|
|
59
85
|
<template>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
<InputGroup class="input-group-quantity">
|
|
87
|
+
<button @click="increment" type="button" class="btn">
|
|
88
|
+
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
89
|
+
<path
|
|
90
|
+
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"
|
|
91
|
+
fill="#0F0F0F"/>
|
|
92
|
+
</svg>
|
|
93
|
+
</button>
|
|
94
|
+
<input
|
|
95
|
+
:name="name"
|
|
96
|
+
:value="this.modelValue"
|
|
97
|
+
v-maska
|
|
98
|
+
data-maska="###,###,###,###,###,###,###"
|
|
99
|
+
data-maska-reversed
|
|
100
|
+
@maska="onChange"
|
|
101
|
+
:class="{'is-invalid': form.errors[name]}"
|
|
102
|
+
:disabled="disabled || form.processing"
|
|
103
|
+
:readonly="readonly"
|
|
104
|
+
type="tel"
|
|
105
|
+
class="form-control fanum text-center">
|
|
106
|
+
<button @click="decrement" type="button" class="btn">
|
|
107
|
+
<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
|
|
108
|
+
<path fill="#000000" fill-rule="evenodd" d="M18 10a1 1 0 01-1 1H3a1 1 0 110-2h14a1 1 0 011 1z"/>
|
|
109
|
+
</svg>
|
|
110
|
+
</button>
|
|
111
|
+
<InputGroupText class="fanum">{{ unit }}</InputGroupText>
|
|
112
|
+
<slot name="suffix"/>
|
|
113
|
+
</InputGroup>
|
|
87
114
|
</template>
|
|
88
115
|
<style>
|
|
89
116
|
|
|
90
117
|
.input-group-quantity .input-group-text,
|
|
91
|
-
.input-group-quantity .btn{
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
118
|
+
.input-group-quantity .btn {
|
|
119
|
+
background-color: var(--bs-body-bg);
|
|
120
|
+
--bs-btn-hover-bg: var(--bs-secondary-bg);
|
|
121
|
+
--bs-btn-active-bg: var(--bs-secondary-bg);
|
|
95
122
|
}
|
|
96
123
|
|
|
97
|
-
.input-group-quantity input.form-control{
|
|
98
|
-
|
|
99
|
-
|
|
124
|
+
.input-group-quantity input.form-control {
|
|
125
|
+
border: 0 !important;
|
|
126
|
+
box-shadow: none !important;
|
|
100
127
|
}
|
|
101
128
|
|
|
102
129
|
.input-group-quantity .btn svg {
|
|
103
|
-
|
|
104
|
-
|
|
130
|
+
width: 14px;
|
|
131
|
+
height: 14px;
|
|
105
132
|
}
|
|
106
133
|
</style>
|
package/src/index.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import AmountInput from "./AmountInput.vue";
|
|
2
|
+
import CaptchaInput from "./CaptchaInput.vue";
|
|
3
|
+
import CheckboxButtonInput from "./CheckboxButtonInput.vue";
|
|
4
|
+
import CheckboxInput from "./CheckboxInput.vue";
|
|
5
|
+
import CheckboxToggle from "./CheckboxToggle.vue";
|
|
6
|
+
import PersianDatePickerInput from "./PersianDatePickerInput.vue";
|
|
7
|
+
import EditorInput from "./EditorInput.vue";
|
|
8
|
+
import FileInput from "./FileInput.vue";
|
|
9
|
+
import EmailInput from "./EmailInput.vue";
|
|
10
|
+
import GroupControl from "./GroupControl.vue";
|
|
11
|
+
import FormContainer from "./FormContainer.vue";
|
|
12
|
+
import FormLabel from "./FormLabel.vue";
|
|
13
|
+
import locationInput from "./locationInput.vue";
|
|
14
|
+
import MobileInput from "./MobileInput.vue";
|
|
15
|
+
import PasswordInput from "./PasswordInput.vue";
|
|
16
|
+
import QuantityInput from "./QuantityInput.vue";
|
|
17
|
+
import MultiQuantityInput from "./MultiQuantityInput.vue";
|
|
18
|
+
import SecondarySubmitButton from "./SecondarySubmitButton.vue";
|
|
19
|
+
import Select2Input from "./Select2Input.vue";
|
|
20
|
+
import StarRatingInput from "./StarRatingInput.vue";
|
|
21
|
+
import SubmitButton from "./SubmitButton.vue";
|
|
22
|
+
import TelInput from "./TelInput.vue";
|
|
23
|
+
import TextAreaInput from "./TextAreaInput.vue";
|
|
24
|
+
import TextInput from "./TextInput.vue";
|
|
25
|
+
|
|
26
|
+
export {
|
|
27
|
+
AmountInput,
|
|
28
|
+
CaptchaInput,
|
|
29
|
+
CheckboxButtonInput,
|
|
30
|
+
CheckboxInput,
|
|
31
|
+
CheckboxToggle,
|
|
32
|
+
FileInput,
|
|
33
|
+
EmailInput,
|
|
34
|
+
PersianDatePickerInput,
|
|
35
|
+
EditorInput,
|
|
36
|
+
GroupControl,
|
|
37
|
+
FormContainer,
|
|
38
|
+
locationInput,
|
|
39
|
+
MobileInput,
|
|
40
|
+
PasswordInput,
|
|
41
|
+
QuantityInput,
|
|
42
|
+
MultiQuantityInput,
|
|
43
|
+
SubmitButton,
|
|
44
|
+
SecondarySubmitButton,
|
|
45
|
+
StarRatingInput,
|
|
46
|
+
Select2Input,
|
|
47
|
+
FormLabel,
|
|
48
|
+
TelInput,
|
|
49
|
+
TextAreaInput,
|
|
50
|
+
TextInput,
|
|
51
|
+
}
|
package/index.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import AmountInput from "./src/AmountInput.vue";
|
|
2
|
-
import CaptchaInput from "./src/CaptchaInput.vue";
|
|
3
|
-
import CheckboxButtonInput from "./src/CheckboxButtonInput.vue";
|
|
4
|
-
import CheckboxInput from "./src/CheckboxInput.vue";
|
|
5
|
-
import CheckboxToggle from "./src/CheckboxToggle.vue";
|
|
6
|
-
import PersianDatePickerInput from "./src/PersianDatePickerInput.vue";
|
|
7
|
-
import EditorInput from "./src/EditorInput.vue";
|
|
8
|
-
import FileInput from "./src/FileInput.vue";
|
|
9
|
-
import EmailInput from "./src/EmailInput.vue";
|
|
10
|
-
import GroupControl from "./src/GroupControl.vue";
|
|
11
|
-
import FormContainer from "./src/FormContainer.vue";
|
|
12
|
-
import FormLabel from "./src/FormLabel.vue";
|
|
13
|
-
import locationInput from "./src/locationInput.vue";
|
|
14
|
-
import MobileInput from "./src/MobileInput.vue";
|
|
15
|
-
import PasswordInput from "./src/PasswordInput.vue";
|
|
16
|
-
import QuantityInput from "./src/QuantityInput.vue";
|
|
17
|
-
import MultiQuantityInput from "./src/MultiQuantityInput.vue";
|
|
18
|
-
import SecondarySubmitButton from "./src/SecondarySubmitButton.vue";
|
|
19
|
-
import Select2Input from "./src/Select2Input.vue";
|
|
20
|
-
import StarRatingInput from "./src/StarRatingInput.vue";
|
|
21
|
-
import SubmitButton from "./src/SubmitButton.vue";
|
|
22
|
-
import TelInput from "./src/TelInput.vue";
|
|
23
|
-
import TextAreaInput from "./src/TextAreaInput.vue";
|
|
24
|
-
import TextInput from "./src/TextInput.vue";
|
|
25
|
-
|
|
26
|
-
export {
|
|
27
|
-
AmountInput,
|
|
28
|
-
CaptchaInput,
|
|
29
|
-
CheckboxButtonInput,
|
|
30
|
-
CheckboxInput,
|
|
31
|
-
CheckboxToggle,
|
|
32
|
-
FileInput,
|
|
33
|
-
EmailInput,
|
|
34
|
-
PersianDatePickerInput,
|
|
35
|
-
EditorInput,
|
|
36
|
-
GroupControl,
|
|
37
|
-
FormContainer,
|
|
38
|
-
locationInput,
|
|
39
|
-
MobileInput,
|
|
40
|
-
PasswordInput,
|
|
41
|
-
QuantityInput,
|
|
42
|
-
MultiQuantityInput,
|
|
43
|
-
SubmitButton,
|
|
44
|
-
SecondarySubmitButton,
|
|
45
|
-
StarRatingInput,
|
|
46
|
-
Select2Input,
|
|
47
|
-
FormLabel,
|
|
48
|
-
TelInput,
|
|
49
|
-
TextAreaInput,
|
|
50
|
-
TextInput,
|
|
51
|
-
}
|