inertia-bootstrap-forms 1.0.44 → 1.0.45
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
|
@@ -3,174 +3,181 @@ import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker';
|
|
|
3
3
|
import {computed, defineComponent, inject} from "vue";
|
|
4
4
|
|
|
5
5
|
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,
|
|
6
|
+
components: {Vue3PersianDatetimePicker},
|
|
7
|
+
emits: ['update:modelValue', 'change'],
|
|
8
|
+
props: {
|
|
9
|
+
name: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
35
12
|
},
|
|
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};
|
|
13
|
+
calendar: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'date',
|
|
60
16
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
17
|
+
view: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: 'date',
|
|
20
|
+
},
|
|
21
|
+
min: String,
|
|
22
|
+
max: String,
|
|
23
|
+
range: Boolean,
|
|
24
|
+
locale: {
|
|
25
|
+
default: 'fa',
|
|
26
|
+
},
|
|
27
|
+
format: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: 'jYYYY-jMM-jDD',
|
|
65
30
|
},
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
31
|
+
inputFormat: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: null,
|
|
34
|
+
},
|
|
35
|
+
placeholder: String,
|
|
36
|
+
},
|
|
37
|
+
setup(props) {
|
|
38
|
+
let form = inject('form', {
|
|
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;
|
|
72
55
|
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
return {modelValue, form, group};
|
|
60
|
+
},
|
|
61
|
+
watch: {
|
|
62
|
+
modelValue: (newVal, oldVal) => {
|
|
63
|
+
this.$emit('change', newVal, oldVal);
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
methods: {
|
|
67
|
+
clear() {
|
|
68
|
+
this.modelValue = null;
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
computed: {
|
|
72
|
+
isSsr() {
|
|
73
|
+
return !window || !document;
|
|
73
74
|
},
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
inputID() {
|
|
76
|
+
return this.form.getID(this)
|
|
76
77
|
}
|
|
78
|
+
},
|
|
79
|
+
data() {
|
|
80
|
+
return {}
|
|
81
|
+
}
|
|
77
82
|
})
|
|
78
83
|
</script>
|
|
79
84
|
|
|
80
85
|
<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
|
-
|
|
86
|
+
<div class="input-group">
|
|
87
|
+
<input
|
|
88
|
+
:name="name"
|
|
89
|
+
:id="inputID"
|
|
90
|
+
:value="modelValue"
|
|
91
|
+
:placeholder="(placeholder || 'انتخاب تاریخ')"
|
|
92
|
+
:class="{'is-invalid': form.errors[name]}"
|
|
93
|
+
:disabled="form?.processing"
|
|
94
|
+
type="text" class="form-control form-control--datepicker text-start fanum">
|
|
95
|
+
<button
|
|
96
|
+
type="button"
|
|
97
|
+
@click="clear"
|
|
98
|
+
class="input-group-text input-group-datepicker-delete"
|
|
99
|
+
:class="{'input-group-datepicker-delete-show': modelValue}">
|
|
100
|
+
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
101
|
+
<path
|
|
102
|
+
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"
|
|
103
|
+
stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
104
|
+
<path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
105
|
+
<path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
106
|
+
<path d="M21.5 9H16.625H10.75M2 9H5.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
|
107
|
+
<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"/>
|
|
108
|
+
<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"/>
|
|
109
|
+
<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"/>
|
|
110
|
+
<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"/>
|
|
111
|
+
<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"/>
|
|
112
|
+
<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"/>
|
|
113
|
+
</svg>
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
116
|
+
<Vue3PersianDatetimePicker
|
|
117
|
+
:type="calendar"
|
|
118
|
+
:view="view"
|
|
119
|
+
:min="min"
|
|
120
|
+
:max="max"
|
|
121
|
+
v-if="!isSsr"
|
|
122
|
+
jumpminute="15"
|
|
123
|
+
:range="range"
|
|
124
|
+
:locale="locale"
|
|
125
|
+
:simple="false"
|
|
126
|
+
:roundminute="true"
|
|
127
|
+
:showNowBtn="true"
|
|
128
|
+
:autoSubmit="true"
|
|
129
|
+
:format="format"
|
|
130
|
+
:inputFormat="(inputFormat ? inputFormat : format)"
|
|
131
|
+
:displayFormat="format"
|
|
132
|
+
v-model="modelValue"
|
|
133
|
+
:custom-input="'#'+inputID"/>
|
|
127
134
|
</template>
|
|
128
135
|
<style>
|
|
129
136
|
.form-control--datepicker {
|
|
130
|
-
|
|
137
|
+
direction: rtl;
|
|
131
138
|
}
|
|
132
139
|
|
|
133
140
|
.input-group-datepicker-delete {
|
|
134
|
-
|
|
135
|
-
|
|
141
|
+
width: 42px;
|
|
142
|
+
text-align: center;
|
|
136
143
|
}
|
|
137
144
|
|
|
138
145
|
.input-group-datepicker-delete .fa-times {
|
|
139
|
-
|
|
146
|
+
display: none;
|
|
140
147
|
}
|
|
141
148
|
|
|
142
149
|
.input-group-datepicker-delete-show:hover .fa-times {
|
|
143
|
-
|
|
150
|
+
display: block;
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
.input-group-datepicker-delete-show:hover .fa-calendars {
|
|
147
|
-
|
|
154
|
+
display: none;
|
|
148
155
|
}
|
|
149
156
|
|
|
150
157
|
.vpd-content {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
158
|
+
color: var(--bs-body-color) !important;
|
|
159
|
+
background-color: var(--bs-body-bg) !important;
|
|
160
|
+
-moz-font-feature-settings: "ss01";
|
|
161
|
+
-webkit-font-feature-settings: "ss01";
|
|
162
|
+
font-feature-settings: "ss01";
|
|
156
163
|
}
|
|
157
164
|
|
|
158
165
|
.vpd-time .vpd-down-arrow-btn, .vpd-time .vpd-up-arrow-btn {
|
|
159
|
-
|
|
166
|
+
text-align: center;
|
|
160
167
|
}
|
|
161
168
|
|
|
162
169
|
.vpd-time .vpd-down-arrow-btn svg,
|
|
163
170
|
.vpd-time .vpd-up-arrow-btn svg {
|
|
164
|
-
|
|
171
|
+
margin: 0 auto;
|
|
165
172
|
}
|
|
166
173
|
|
|
167
174
|
.vpd-controls button {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
justify-content: center;
|
|
171
178
|
}
|
|
172
179
|
|
|
173
180
|
.vpd-month-label {
|
|
174
|
-
|
|
181
|
+
width: 110px;
|
|
175
182
|
}
|
|
176
183
|
</style>
|