feat: สร้าง form อัปโหลด ภาพสำนักงาน

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>