141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
Vue
<template>
|
|
<div class="modal-card">
|
|
<header
|
|
class="modal-card-head"
|
|
:class="headerClass"
|
|
>
|
|
<p class="modal-card-title has-text-white">
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<SvgIcon
|
|
:name="iconName"
|
|
type="white"
|
|
:size="24"
|
|
/>
|
|
</span>
|
|
<span>{{ title }}</span>
|
|
</span>
|
|
</p>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<div class="field">
|
|
<label class="label">{{ label }}</label>
|
|
<div class="control">
|
|
<textarea
|
|
class="textarea"
|
|
v-model="note"
|
|
:placeholder="placeholder"
|
|
></textarea>
|
|
</div>
|
|
<p
|
|
v-if="error"
|
|
class="help is-danger"
|
|
>
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<footer class="modal-card-foot is-justify-content-flex-end">
|
|
<button
|
|
class="button"
|
|
@click="$emit('close')"
|
|
>
|
|
{{ cancelText }}
|
|
</button>
|
|
<button
|
|
class="button"
|
|
:class="buttonClass"
|
|
@click="confirm"
|
|
>
|
|
{{ confirmText }}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useStore } from "@/stores/index";
|
|
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "Nhập nội dung",
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: "Ghi chú",
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "Nhập nội dung...",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "primary", // primary, warning, danger
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: "Xác nhận",
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: "Hủy",
|
|
},
|
|
},
|
|
emits: ["close", "modalevent"],
|
|
setup() {
|
|
const store = useStore();
|
|
return { store };
|
|
},
|
|
data() {
|
|
return {
|
|
note: "",
|
|
error: "",
|
|
};
|
|
},
|
|
computed: {
|
|
isVietnamese() {
|
|
return this.store.lang === "vi";
|
|
},
|
|
headerClass() {
|
|
const colorMap = {
|
|
primary: "has-background-primary",
|
|
warning: "has-background-warning",
|
|
danger: "has-background-danger",
|
|
};
|
|
return colorMap[this.type] || "has-background-primary";
|
|
},
|
|
buttonClass() {
|
|
const colorMap = {
|
|
primary: "is-primary",
|
|
warning: "is-warning",
|
|
danger: "is-danger",
|
|
};
|
|
return colorMap[this.type] || "is-primary";
|
|
},
|
|
iconName() {
|
|
const iconMap = {
|
|
primary: "edit.svg",
|
|
warning: "warning.svg",
|
|
danger: "alert.svg",
|
|
};
|
|
return iconMap[this.type] || "edit.svg";
|
|
},
|
|
},
|
|
methods: {
|
|
confirm() {
|
|
if (!this.note.trim()) {
|
|
this.error = this.isVietnamese ? "Nội dung không được để trống." : "Content cannot be empty.";
|
|
return;
|
|
}
|
|
this.$emit("modalevent", {
|
|
name: "noteConfirm",
|
|
data: { note: this.note },
|
|
});
|
|
this.$emit("close");
|
|
},
|
|
},
|
|
};
|
|
</script>
|