110 lines
2.7 KiB
Vue
110 lines
2.7 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> |