erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: install prettier

Browse Source
This commit is contained in:
Viet An
2026-05-04 15:22:27 +07:00
parent 93d29ca7d8
commit bd58e2b847
267 changed files with 22950 additions and 13581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
app/components/datepicker/Datepicker.vue
View File

@@ -1,28 +1,54 @@
<template>
<div class="control has-icons-left" :id="docid">
<div :class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`" style="width: 100%">
<div class="dropdown-trigger" style="width: 100%;">
<input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text" placeholder="DD/MM/YYYY"
maxlength="10" @focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="checkDate" v-model="show" />
</div>
<div class="dropdown-menu" role="menu" @click="doClick()">
<div class="dropdown-content">
<PickDay v-bind="{ date, maxdate }" @date="selectDate"></PickDay>
<div
class="control has-icons-left"
:id="docid"
>
<div
:class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
style="width: 100%"
>
<div
class="dropdown-trigger"
style="width: 100%"
>
<input
:disabled="disabled"
:class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
type="text"
placeholder="DD/MM/YYYY"
maxlength="10"
@focus="setFocus"
@blur="lostFocus"
@keyup.enter="pressEnter"
@keyup="checkDate"
v-model="show"
/>
</div>
<div
class="dropdown-menu"
role="menu"
@click="doClick()"
>
<div class="dropdown-content">
<PickDay
v-bind="{ date, maxdate }"
@date="selectDate"
></PickDay>
</div>
</div>
</div>
</div>
</div>
<span class="icon is-left">
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="21"
class="has-text-grey"
/>
</span>
<span class="icon is-left">
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="21"
class="has-text-grey"
/>
</span>
</div>
</template>
<script>
export default {
props: ['record', 'attr', 'position', 'mindate', 'maxdate', 'disabled'],
props: ["record", "attr", "position", "mindate", "maxdate", "disabled"],
data() {
return {
date: undefined,
@@ -32,103 +58,102 @@ export default {
docid: this.$id(),
count1: 0,
count2: 0,
pos: undefined
}
pos: undefined,
};
},
created() {
this.getPos()
if(this.record) {
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
this.getPos();
if (this.record) {
this.date = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
if (this.date) this.show = this.$dayjs(this.date).format("DD/MM/YYYY");
}
},
watch: {
record: function(newVal) {
if(this.record) {
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
record: function (newVal) {
if (this.record) {
this.date = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
if (this.date) this.show = this.$dayjs(this.date).format("DD/MM/YYYY");
}
}
},
},
methods: {
pressEnter() {
this.checkDate()
if(!this.error) this.focused = false
this.checkDate();
if (!this.error) this.focused = false;
},
setFocus() {
this.focused = true
this.count1 = 0
this.count2 = 0
this.focused = true;
this.count1 = 0;
this.count2 = 0;
},
lostFocus() {
let self = this
setTimeout(()=>{
if(self.focused && self.count1===0) self.focused = false
}, 200)
let self = this;
setTimeout(() => {
if (self.focused && self.count1 === 0) self.focused = false;
}, 200);
},
processEvent(event) {
var doc = document.getElementById(this.docid)
if(!doc) return
this.count2 += 1
var isClickInside = false
var doc = document.getElementById(this.docid);
if (!doc) return;
this.count2 += 1;
var isClickInside = false;
isClickInside = doc.contains(event.target);
if(!isClickInside && this.focused) {
if(this.count2-1!==this.count1) {
this.focused = false
this.count1 = 0
this.count2 = 0
if (!isClickInside && this.focused) {
if (this.count2 - 1 !== this.count1) {
this.focused = false;
this.count1 = 0;
this.count2 = 0;
}
}
},
doClick() {
this.count1 += 1
this.count1 += 1;
},
selectDate(v) {
this.date = v
this.show = this.$dayjs(v).format('DD/MM/YYYY')
this.$emit('date', this.date)
if(this.focused) this.focused = false
this.count1 = 0
this.count2 = 0
this.date = v;
this.show = this.$dayjs(v).format("DD/MM/YYYY");
this.$emit("date", this.date);
if (this.focused) this.focused = false;
this.count1 = 0;
this.count2 = 0;
},
getDate(value) {
let v = value.replace(/\D/g,'').slice(0, 10);
let v = value.replace(/\D/g, "").slice(0, 10);
if (v.length >= 5) {
return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
return `${v.slice(0, 2)}/${v.slice(2, 4)}/${v.slice(4)}`;
} else if (v.length >= 3) {
return `${v.slice(0, 2)}/${v.slice(2)}`;
}
else if (v.length >= 3) {
return `${v.slice(0,2)}/${v.slice(2)}`;
}
return v
return v;
},
checkDate() {
if(!this.focused) this.setFocus()
this.error = false
this.date = undefined
if(this.$empty(this.show)) return this.$emit('date', null)
this.show = this.getDate(this.show)
let val = `${this.show.substring(6,10)}-${this.show.substring(3,5)}-${this.show.substring(0,2)}`
if(this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
this.date = val
this.$emit('date', this.date)
} else this.error = true
if (!this.focused) this.setFocus();
this.error = false;
this.date = undefined;
if (this.$empty(this.show)) return this.$emit("date", null);
this.show = this.getDate(this.show);
let val = `${this.show.substring(6, 10)}-${this.show.substring(3, 5)}-${this.show.substring(0, 2)}`;
if (this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
this.date = val;
this.$emit("date", this.date);
} else this.error = true;
},
getPos() {
switch(this.position) {
case 'is-top-left':
this.pos = 'is-up is-left'
switch (this.position) {
case "is-top-left":
this.pos = "is-up is-left";
break;
case 'is-top-right':
this.pos = 'is-up is-right'
case "is-top-right":
this.pos = "is-up is-right";
break;
case 'is-bottom-left':
this.pos = 'is-left'
case "is-bottom-left":
this.pos = "is-left";
break;
case 'is-bottom-right':
this.pos = 'is-right'
case "is-bottom-right":
this.pos = "is-right";
break;
}
}
}
}
},
},
};
</script>