inertia-bootstrap-forms 1.0.44 → 1.0.46
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/dist/inertia-bootstrap-forms.es.js +1239 -1229
- package/dist/inertia-bootstrap-forms.umd.js +3 -3
- package/package.json +1 -1
- package/src/PersianDatePickerInput.vue +139 -128
package/package.json
CHANGED
|
@@ -2,175 +2,186 @@
|
|
|
2
2
|
import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker';
|
|
3
3
|
import {computed, defineComponent, inject} from "vue";
|
|
4
4
|
|
|
5
|
+
let _this;
|
|
5
6
|
export default defineComponent({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
calendar: {
|
|
13
|
-
type: String,
|
|
14
|
-
default: 'date',
|
|
15
|
-
},
|
|
16
|
-
view: {
|
|
17
|
-
type: String,
|
|
18
|
-
default: 'date',
|
|
19
|
-
},
|
|
20
|
-
min: String,
|
|
21
|
-
max: String,
|
|
22
|
-
range: Boolean,
|
|
23
|
-
locale: {
|
|
24
|
-
default: 'fa',
|
|
25
|
-
},
|
|
26
|
-
format: {
|
|
27
|
-
type: String,
|
|
28
|
-
default: 'jYYYY-jMM-jDD',
|
|
29
|
-
},
|
|
30
|
-
inputFormat: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: null,
|
|
33
|
-
},
|
|
34
|
-
placeholder: String,
|
|
7
|
+
components: {Vue3PersianDatetimePicker},
|
|
8
|
+
emits: ['update:modelValue', 'change'],
|
|
9
|
+
props: {
|
|
10
|
+
name: {
|
|
11
|
+
type: String,
|
|
12
|
+
required: true,
|
|
35
13
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
errors: {},
|
|
40
|
-
getID(name) {
|
|
41
|
-
return name;
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
let group = inject('group', {});
|
|
45
|
-
|
|
46
|
-
const modelValue = computed({
|
|
47
|
-
get() {
|
|
48
|
-
return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
|
|
49
|
-
},
|
|
50
|
-
set(value) {
|
|
51
|
-
if (group?.value?.name) {
|
|
52
|
-
group.value.setData(props.name, value);
|
|
53
|
-
} else {
|
|
54
|
-
form.value[props.name] = value;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
return {modelValue, form, group};
|
|
14
|
+
calendar: {
|
|
15
|
+
type: String,
|
|
16
|
+
default: 'date',
|
|
60
17
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
18
|
+
view: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: 'date',
|
|
21
|
+
},
|
|
22
|
+
min: String,
|
|
23
|
+
max: String,
|
|
24
|
+
range: Boolean,
|
|
25
|
+
locale: {
|
|
26
|
+
default: 'fa',
|
|
27
|
+
},
|
|
28
|
+
format: {
|
|
29
|
+
type: String,
|
|
30
|
+
default: 'jYYYY-jMM-jDD',
|
|
65
31
|
},
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
32
|
+
inputFormat: {
|
|
33
|
+
type: String,
|
|
34
|
+
default: null,
|
|
35
|
+
},
|
|
36
|
+
placeholder: String,
|
|
37
|
+
},
|
|
38
|
+
setup(props) {
|
|
39
|
+
let form = inject('form', {
|
|
40
|
+
errors: {},
|
|
41
|
+
getID(name) {
|
|
42
|
+
return name;
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
let group = inject('group', {});
|
|
46
|
+
|
|
47
|
+
const modelValue = computed({
|
|
48
|
+
get() {
|
|
49
|
+
return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
|
|
50
|
+
},
|
|
51
|
+
set(value) {
|
|
52
|
+
if (group?.value?.name) {
|
|
53
|
+
group.value.setData(props.name, value);
|
|
54
|
+
} else {
|
|
55
|
+
form.value[props.name] = value;
|
|
72
56
|
}
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
return {modelValue, form, group};
|
|
61
|
+
},
|
|
62
|
+
watch: {
|
|
63
|
+
modelValue: (newVal, oldVal) => {
|
|
64
|
+
_this?.$emit('change', newVal, oldVal);
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
clear() {
|
|
69
|
+
this.modelValue = null;
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
mounted() {
|
|
73
|
+
_this = this;
|
|
74
|
+
},
|
|
75
|
+
computed: {
|
|
76
|
+
isSsr() {
|
|
77
|
+
return !window || !document;
|
|
73
78
|
},
|
|
74
|
-
|
|
75
|
-
|
|
79
|
+
inputID() {
|
|
80
|
+
return this.form.getID(this)
|
|
76
81
|
}
|
|
82
|
+
},
|
|
83
|
+
data() {
|
|
84
|
+
return {}
|
|
85
|
+
}
|
|
77
86
|
})
|
|
78
87
|
</script>
|
|
79
88
|
|
|
80
89
|
<template>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
90
|
+
<div class="input-group">
|
|
91
|
+
<input
|
|
92
|
+
:name="name"
|
|
93
|
+
:id="inputID"
|
|
94
|
+
:value="modelValue"
|
|
95
|
+
:placeholder="(placeholder || 'انتخاب تاریخ')"
|
|
96
|
+
:class="{'is-invalid': form.errors[name]}"
|
|
97
|
+
:disabled="form?.processing"
|
|
98
|
+
type="text" class="form-control form-control--datepicker text-start fanum">
|
|
99
|
+
<button
|
|
100
|
+
type="button"
|
|
101
|
+
@click="clear"
|
|
102
|
+
class="input-group-text input-group-datepicker-delete"
|
|
103
|
+
:class="{'input-group-datepicker-delete-show': modelValue}">
|
|
104
|
+
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
105
|
+
<path
|
|
106
|
+
d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C20.1752 21.4816 19.3001 21.7706 18 21.8985"
|
|
107
|
+
stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
108
|
+
<path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
109
|
+
<path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
110
|
+
<path d="M21.5 9H16.625H10.75M2 9H5.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
111
|
+
<path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="#1C274C"/>
|
|
112
|
+
<path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="#1C274C"/>
|
|
113
|
+
<path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#1C274C"/>
|
|
114
|
+
<path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="#1C274C"/>
|
|
115
|
+
<path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="#1C274C"/>
|
|
116
|
+
<path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="#1C274C"/>
|
|
117
|
+
</svg>
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
<Vue3PersianDatetimePicker
|
|
121
|
+
:type="calendar"
|
|
122
|
+
:view="view"
|
|
123
|
+
:min="min"
|
|
124
|
+
:max="max"
|
|
125
|
+
v-if="!isSsr"
|
|
126
|
+
jumpminute="15"
|
|
127
|
+
:range="range"
|
|
128
|
+
:locale="locale"
|
|
129
|
+
:simple="false"
|
|
130
|
+
:roundminute="true"
|
|
131
|
+
:showNowBtn="true"
|
|
132
|
+
:autoSubmit="true"
|
|
133
|
+
:format="format"
|
|
134
|
+
:inputFormat="(inputFormat ? inputFormat : format)"
|
|
135
|
+
:displayFormat="format"
|
|
136
|
+
v-model="modelValue"
|
|
137
|
+
:custom-input="'#'+inputID"/>
|
|
127
138
|
</template>
|
|
128
139
|
<style>
|
|
129
140
|
.form-control--datepicker {
|
|
130
|
-
|
|
141
|
+
direction: rtl;
|
|
131
142
|
}
|
|
132
143
|
|
|
133
144
|
.input-group-datepicker-delete {
|
|
134
|
-
|
|
135
|
-
|
|
145
|
+
width: 42px;
|
|
146
|
+
text-align: center;
|
|
136
147
|
}
|
|
137
148
|
|
|
138
149
|
.input-group-datepicker-delete .fa-times {
|
|
139
|
-
|
|
150
|
+
display: none;
|
|
140
151
|
}
|
|
141
152
|
|
|
142
153
|
.input-group-datepicker-delete-show:hover .fa-times {
|
|
143
|
-
|
|
154
|
+
display: block;
|
|
144
155
|
}
|
|
145
156
|
|
|
146
157
|
.input-group-datepicker-delete-show:hover .fa-calendars {
|
|
147
|
-
|
|
158
|
+
display: none;
|
|
148
159
|
}
|
|
149
160
|
|
|
150
161
|
.vpd-content {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
162
|
+
color: var(--bs-body-color) !important;
|
|
163
|
+
background-color: var(--bs-body-bg) !important;
|
|
164
|
+
-moz-font-feature-settings: "ss01";
|
|
165
|
+
-webkit-font-feature-settings: "ss01";
|
|
166
|
+
font-feature-settings: "ss01";
|
|
156
167
|
}
|
|
157
168
|
|
|
158
169
|
.vpd-time .vpd-down-arrow-btn, .vpd-time .vpd-up-arrow-btn {
|
|
159
|
-
|
|
170
|
+
text-align: center;
|
|
160
171
|
}
|
|
161
172
|
|
|
162
173
|
.vpd-time .vpd-down-arrow-btn svg,
|
|
163
174
|
.vpd-time .vpd-up-arrow-btn svg {
|
|
164
|
-
|
|
175
|
+
margin: 0 auto;
|
|
165
176
|
}
|
|
166
177
|
|
|
167
178
|
.vpd-controls button {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
179
|
+
display: flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
justify-content: center;
|
|
171
182
|
}
|
|
172
183
|
|
|
173
184
|
.vpd-month-label {
|
|
174
|
-
|
|
185
|
+
width: 110px;
|
|
175
186
|
}
|
|
176
187
|
</style>
|