Merge branch 'dev' of https://git.willaspace.com/WillaEngine-Project/WillaEngine into dev

resources/js/Global/components/Inputs/PersianDate.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="[ disabled ? 'has-blur' : '' ]">
         <v-text-field
             v-model="dateShow"
             :label="label"
@@ -16,7 +16,7 @@
             :locale-config="localeConfig"
             :format="defaultDisplayFormat"
             :inputFormat="defaultInputFormat"
-            @change="$emit('input', $event.format(defaultFormat))"
+            @change="changeDatePicker"
             :type="type"
             :auto-submit="true"
             :element="'my-custom-date-' + uniqueId"
@@ -30,114 +30,129 @@
     </div>
 </template>
 <script>
-    import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
+import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
-    import moment from 'jalali-moment';
+import moment from 'jalali-moment';
 
-    export default {
+export default {
-        components: {
+    components: {
-            datePicker: VuePersianDatetimePicker
+        datePicker: VuePersianDatetimePicker
+    },
+    props: {
+        color: {default: 'black'},
+        disabled: {default: false},
+        defaultDate: {
+            default: 'now',
+            type: String,
+            validator: (val) => ['now', 'empty'].includes(val)
         },
-        props: {
+        min: {default: null},
-            color: {default: 'black'},
+        max: {default: null},
-            defaultDate: {
+        displayFormat: {default: null},
-                default: 'now',
+        inputFormat: {default: null},
-                type: String,
+        format: {default: null},
-                validator: (val) => ['now', 'empty'].includes(val)
+        type: {
-            },
+            default: 'datetime',
-            min: {default: null},
+            type: String,
-            max: {default: null},
+            validator: (val) => ['datetime', 'time', 'date'].includes(val)
-            displayFormat: {default: null},
-            inputFormat: {default: null},
-            format: {default: null},
-            type: {
-                default: 'datetime',
-                type: String,
-                validator: (val) => ['datetime', 'time', 'date'].includes(val)
-            },
-            label: {default: 'در تاریخ '},
-            value: {default: null},
-            icon: {default: 'calendar-alt'},
         },
-        data: () => ({
+        label: {default: 'در تاریخ '},
-            localeConfig: {
+        value: {default: null},
-                fa: {
+        icon: {default: 'calendar-alt'},
-                    lang: {label: 'شمسی'}
+    },
-                },
+    data: () => ({
-                en: {
+        localeConfig: {
-                    lang: {label: 'Gregorian'}
+            fa: {
-                }
+                lang: {label: 'شمسی'}
             },
-            show: false,
+            en: {
-            uniqueId: Math.floor(Math.random() * 10000)
+                lang: {label: 'Gregorian'}
-        }),
+            }
-        computed: {
+        },
-            dateShow: {
+        show: false,
-                get() {
+        uniqueId: Math.floor(Math.random() * 10000)
-                    if (this.value) {
+    }),
-                        return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+    computed: {
+        dateShow: {
+            get() {
+                if (this.value) {
+                    return moment(new Date(this.value)).format(this.defaultDisplayFormat);
+                } else if (!this.disabled) {
+                    if (this.defaultDate === 'now') {
+                        this.$emit('input', moment(new Date()).format(this.defaultFormat));
+                        return moment(new Date()).format(this.defaultDisplayFormat);
                     } else {
-                        if (this.defaultDate === 'now' ) {
+                        return '';
-                            this.$emit('input', moment(new Date()).format(this.defaultFormat));
-                            return moment(new Date()).format(this.defaultDisplayFormat);
-                        } else {
-                            return '';
-                        }
-
-                    }
-                },
-                set(value) {
-                }
-            },
-            defaultDisplayFormat() {
-                if (!this.displayFormat) {
-                    if (this.type === 'datetime') {
-                        return 'jDD jMMMM jYYYY ساعت HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'jDD jMMMM jYYYY';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
-                    }
-                }
-                return this.displayFormat
-            },
-            defaultInputFormat() {
-                if (!this.inputFormat) {
-                    if (this.type === 'datetime') {
-                        return 'YYYY-MM-DD HH:mm';
-                    } else if(this.type === 'date') {
-                        return 'YYYY-MM-DD';
-                    } else if(this.type === 'time') {
-                        return 'HH:mm';
                     }
+
                 }
-                return this.inputFormat
             },
-            defaultFormat() {
+            set(value) {
-                if (!this.format) {
+            }
-                    if (this.type === 'datetime') {
+        },
-                        return 'YYYY-MM-DD HH:mm';
+        defaultDisplayFormat() {
-                    } else if(this.type === 'date') {
+            if (!this.displayFormat) {
-                        return 'YYYY-MM-DD';
+                if (this.type === 'datetime') {
-                    } else if(this.type === 'time') {
+                    return 'jDD jMMMM jYYYY ساعت HH:mm';
-                        return 'HH:mm';
+                } else if (this.type === 'date') {
-                    }
+                    return 'jDD jMMMM jYYYY';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-                return this.format
+            }
-            },
+            return this.displayFormat
-            minimum() {
+        },
-                if (this.min === 'now') {
+        defaultInputFormat() {
-                    return moment(new Date()).format(this.defaultInputFormat);
+            if (!this.inputFormat) {
-                } else {
+                if (this.type === 'datetime') {
-                    return this.min;
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
+            }
-            maximum() {
+            return this.inputFormat
-                if (this.max === 'now') {
+        },
-                    return moment(new Date()).format(this.defaultInputFormat);
+        defaultFormat() {
-                } else {
+            if (!this.format) {
-                    return this.max;
+                if (this.type === 'datetime') {
+                    return 'YYYY-MM-DD HH:mm';
+                } else if (this.type === 'date') {
+                    return 'YYYY-MM-DD';
+                } else if (this.type === 'time') {
+                    return 'HH:mm';
                 }
-            },
+            }
+            return this.format
+        },
+        minimum() {
+            if (this.min === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                return this.min;
+            }
+        },
+        maximum() {
+            if (this.max === 'now') {
+                return moment(new Date()).format(this.defaultInputFormat);
+            } else {
+                return this.max;
+            }
+        },
+    },
+    methods: {
+        changeDatePicker(event) {
+            if (!this.disabled) {
+                this.$emit('input', event.format(this.defaultFormat))
+            }
+        }
+    },
+    watch: {
+        disabled(value) {
+            if (value) {
+                this.$emit('input', null);
+            }
         }
     }
+}
 </script>