Initial commit

app/components/dialog/NoteInput.vue

@@ -0,0 +1,110 @@
+<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>