inertia-bootstrap-forms 1.0.17 → 1.0.19
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inertia-bootstrap-forms",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "Create bootstrap forms with inertia and twitter bootstrap",
|
|
5
5
|
"main": "dist/inertia-bootstrap-forms.cjs.js",
|
|
6
6
|
"module": "dist/inertia-bootstrap-forms.es.js",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@inertiajs/vue3": "^2.0.3",
|
|
46
46
|
"vue": "^3.0.0",
|
|
47
|
-
"vue3-bootstrap-components": "1.0"
|
|
47
|
+
"vue3-bootstrap-components": "1.0.30"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"sass-embedded": "^1.89.2",
|
|
@@ -76,18 +76,35 @@ export default {
|
|
|
76
76
|
return this.modelValue ? Object.values(this.modelValue).reduce((sum, value) => sum + value, 0) : this.options.length;
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
|
-
methods: {
|
|
79
|
+
methods: {
|
|
80
|
+
show(){
|
|
81
|
+
this.showDropdown = !this.showDropdown;
|
|
82
|
+
},
|
|
83
|
+
clickOnOutside(e){
|
|
84
|
+
if(!this.$refs.input.contains(e.target)){
|
|
85
|
+
this.showDropdown = false;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
mounted() {
|
|
90
|
+
window.addEventListener('click', this.clickOnOutside);
|
|
91
|
+
},
|
|
92
|
+
beforeUnmount() {
|
|
93
|
+
window.removeEventListener('click', this.clickOnOutside);
|
|
94
|
+
},
|
|
80
95
|
data() {
|
|
81
|
-
return {
|
|
96
|
+
return {
|
|
97
|
+
showDropdown : false,
|
|
98
|
+
}
|
|
82
99
|
}
|
|
83
100
|
}
|
|
84
101
|
</script>
|
|
85
102
|
<template>
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
{{ totalQuantity }} {{unit}}
|
|
89
|
-
</
|
|
90
|
-
<
|
|
103
|
+
<div ref="input" class="multi-quantity-input fanum">
|
|
104
|
+
<button type="button" class="form-control fanum dropdown-toggle" @click.prevent="show">
|
|
105
|
+
{{ totalQuantity }} {{ unit }}
|
|
106
|
+
</button>
|
|
107
|
+
<div class="multi-quantity-input--dropdown" :class="{'show': showDropdown}">
|
|
91
108
|
<GroupControl :name="name">
|
|
92
109
|
<div class="row align-items-center justify-content-between g-0" v-for="(item, key) in options">
|
|
93
110
|
<div class="col-auto" v-html="item?.name || item">
|
|
@@ -97,17 +114,17 @@ export default {
|
|
|
97
114
|
</div>
|
|
98
115
|
</div>
|
|
99
116
|
</GroupControl>
|
|
100
|
-
</
|
|
101
|
-
</
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
102
119
|
</template>
|
|
103
120
|
<style>
|
|
104
|
-
|
|
105
|
-
|
|
121
|
+
|
|
122
|
+
.multi-quantity-input{
|
|
123
|
+
position: relative;
|
|
106
124
|
}
|
|
107
125
|
|
|
108
|
-
.multi-quantity-input .dropdown-
|
|
109
|
-
|
|
110
|
-
padding: 10px 15px;
|
|
126
|
+
.multi-quantity-input .dropdown-toggle {
|
|
127
|
+
text-align: start;
|
|
111
128
|
}
|
|
112
129
|
|
|
113
130
|
.multi-quantity-input .dropdown-menu small {
|
|
@@ -149,4 +166,21 @@ export default {
|
|
|
149
166
|
.multi-quantity-input .input-group .btn svg path {
|
|
150
167
|
fill: #ffffff;
|
|
151
168
|
}
|
|
169
|
+
|
|
170
|
+
.multi-quantity-input .multi-quantity-input--dropdown {
|
|
171
|
+
display: none;
|
|
172
|
+
position: absolute;
|
|
173
|
+
top: 100%;
|
|
174
|
+
left: 0;
|
|
175
|
+
right: 0;
|
|
176
|
+
z-index: 2;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.multi-quantity-input .multi-quantity-input--dropdown.show {
|
|
180
|
+
color: var(--bs-body-color, #333333);
|
|
181
|
+
background-color: var(--bs-body-bg, #ffffff);
|
|
182
|
+
border-radius: var(--bs-border-radius, 1rem);
|
|
183
|
+
display: block;
|
|
184
|
+
padding: 10px 15px;
|
|
185
|
+
}
|
|
152
186
|
</style>
|