From 669ea1087e27e65579f367a99b5f7ff631eb70f9 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 18 Apr 2024 17:31:08 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=20form=20=E0=B8=AD=E0=B8=B1=E0=B8=9B=E0=B9=82?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A5=E0=B8=94=20=E0=B8=A0=E0=B8=B2=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B3=E0=B8=99=E0=B8=B1=E0=B8=81=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_branch-management/FormImage.vue        | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/01_branch-management/FormImage.vue

diff --git a/src/components/01_branch-management/FormImage.vue b/src/components/01_branch-management/FormImage.vue
new file mode 100644
index 00000000..b6fce1b8
--- /dev/null
+++ b/src/components/01_branch-management/FormImage.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+const image = defineModel<string | null>('image');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'upload'): void;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• {{ title }}</div>
+  <div
+    :class="{ 'dark-form-show-img-qh': $q.dark.isActive }"
+    class="col-9 row q-mt-lg branch-form-show-img-hq"
+    style="min-height: 150px"
+  >
+    <div class="col-12 flex flex-center" v-if="image">
+      <q-img :src="image as string" style="width: 150px; height: 150px" />
+    </div>
+    <div class="col-12 flex flex-center q-pb-lg">
+      <q-btn
+        :text-color="$q.dark.isActive ? 'black' : 'white'"
+        style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
+        unelevated
+        rounded
+        :label="$t('formDialogBtnImg')"
+        @click="$emit('upload')"
+      />
+    </div>
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style scoped>
+.branch-form-show-img-hq {
+  --_border-branch-form-show-img-hq: 2px solid var(--gray-4);
+  border: var(--_border-branch-form-show-img-hq);
+  border-radius: 10px;
+  background: var(--surface-3);
+  &.dark-form-show-img-qh {
+    background: var(--gray-9);
+    border-radius: 10px;
+    border: none;
+  }
+}
+.branch-form-btn-img-hq {
+  --_color-btn-qr-code: 3px solid var(--gray-4);
+  border: var(--_color-btn-qr-code);
+  border-radius: 6px;
+  &.dark-form-btn-qr-code {
+    border: none;
+  }
+}
+.branch-form-input-Contact {
+  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
+  background: hsl(var(--_bg-branch-form-input-Contact));
+  &.dark-form-input-Contact {
+    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
+    border: 2px solid var(--gray-9);
+  }
+}
+</style>