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

changes

Browse Source
This commit is contained in:
Viet An
2026-05-07 15:01:09 +07:00
parent 56cfcd09bf
commit ad2d1fbfb6
31 changed files with 356 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,13 @@
<template>
<div
class="control has-icons-left"
:id="docid"
ref="datepickerRoot"
>
<div
:class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
style="width: 100%"
>
<div
class="dropdown-trigger"
style="width: 100%"
>
<div :class="['dropdown w-full', pos, focused && 'is-active']">
<div class="dropdown-trigger w-full">
<input
:disabled="disabled"
:class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
:class="['input', error && 'is-danger', disabled && 'has-text-dark']"
type="text"
placeholder="DD/MM/YYYY"
maxlength="10"
@@ -33,7 +27,7 @@
<PickDay
v-bind="{ date, maxdate }"
@date="selectDate"
></PickDay>
/>
</div>
</div>
</div>
@@ -41,119 +35,131 @@
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="21"
class="has-text-grey"
:class="focused ? 'has-text-primary' : 'has-text-grey'"
/>
</span>
</div>
</template>
<script>
export default {
props: ["record", "attr", "position", "mindate", "maxdate", "disabled"],
data() {
return {
date: undefined,
show: undefined,
error: false,
focused: false,
docid: this.$id(),
count1: 0,
count2: 0,
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");
<script setup>
const props = defineProps({
record: Object,
attr: String,
position: String,
mindate: String,
maxdate: String,
disabled: Boolean,
});
const emit = defineEmits(["date"]);
const { $id, $copy, $dayjs, $empty } = useNuxtApp();
const date = ref();
const show = ref();
const error = ref(false);
const focused = ref(false);
const count1 = ref(0);
const count2 = ref(0);
const pos = ref();
const datepickerRoot = useTemplateRef("datepickerRoot");
function getPos() {
switch (props.position) {
case "is-top-left":
pos.value = "is-up is-left";
break;
case "is-top-right":
pos.value = "is-up is-right";
break;
case "is-bottom-left":
pos.value = "is-left";
break;
case "is-bottom-right":
pos.value = "is-right";
break;
}
}
function initializeDate() {
if (props.record) {
date.value = props.record[props.attr] ? $copy(props.record[props.attr]) : undefined;
if (date.value) show.value = $dayjs(date.value).format("L");
}
}
function pressEnter() {
checkDate();
if (!error.value) focused.value = false;
}
function setFocus() {
focused.value = true;
count1.value = 0;
count2.value = 0;
}
function lostFocus() {
setTimeout(() => {
if (focused.value && count1.value === 0) focused.value = false;
}, 200);
}
function processEvent(event) {
count2.value += 1;
const isClickInside = datepickerRoot.value.contains(event.target);
if (!isClickInside && focused.value) {
if (count2.value - 1 !== count1.value) {
focused.value = false;
count1.value = 0;
count2.value = 0;
}
}
}
function doClick() {
count1.value += 1;
}
function selectDate(v) {
date.value = v;
show.value = $dayjs(v).format("L");
emit("date", date.value);
if (focused.value) focused.value = false;
count1.value = 0;
count2.value = 0;
}
function getDate(value) {
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)}`;
} else if (v.length >= 3) {
return `${v.slice(0, 2)}/${v.slice(2)}`;
}
return v;
}
function checkDate() {
if (!focused.value) setFocus();
error.value = false;
date.value = undefined;
if ($empty(show.value)) return emit("date", null);
show.value = getDate(show.value);
let val = `${show.value.substring(6, 10)}-${show.value.substring(3, 5)}-${show.value.substring(0, 2)}`;
if ($dayjs(val, "YYYY-MM-DD", true).isValid()) {
date.value = val;
emit("date", date.value);
} else error.value = true;
}
onMounted(() => {
getPos();
initializeDate();
});
watch(
() => props.record,
() => {
initializeDate();
},
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");
}
},
},
methods: {
pressEnter() {
this.checkDate();
if (!this.error) this.focused = false;
},
setFocus() {
this.focused = true;
this.count1 = 0;
this.count2 = 0;
},
lostFocus() {
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;
isClickInside = doc.contains(event.target);
if (!isClickInside && this.focused) {
if (this.count2 - 1 !== this.count1) {
this.focused = false;
this.count1 = 0;
this.count2 = 0;
}
}
},
doClick() {
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;
},
getDate(value) {
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)}`;
} else if (v.length >= 3) {
return `${v.slice(0, 2)}/${v.slice(2)}`;
}
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;
},
getPos() {
switch (this.position) {
case "is-top-left":
this.pos = "is-up is-left";
break;
case "is-top-right":
this.pos = "is-up is-right";
break;
case "is-bottom-left":
this.pos = "is-left";
break;
case "is-bottom-right":
this.pos = "is-right";
break;
}
},
},
};
);
</script>