feat: components ProfileUplode

src/components/ProfileUpload.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const urlProfile = defineModel('urlProfile', {
+  default: '',
+});
+const profileSubmit = defineModel('profileSubmit');
+const statusToggle = defineModel('statusToggle');
+
+defineEmits<{
+  (e: 'inputFile'): void;
+}>();
+</script>
+
+<template>
+  <div class="text-center">
+    <div class="upload-img-preview">
+      <q-img
+        v-if="urlProfile"
+        :src="urlProfile"
+        style="object-fit: cover; width: 100%; height: 100%"
+      />
+      <q-icon
+        v-else
+        name="mdi-account full-height"
+        size="3vw"
+        style="color: var(--border-color)"
+      />
+    </div>
+    <div
+      v-if="urlProfile && !profileSubmit"
+      class="col-12 row q-mt-md q-col-gutter-x-md"
+    >
+      <div class="col-6">
+        <q-btn
+          id="btn-profile-cancel"
+          dense
+          unelevated
+          outlined
+          padding="8px"
+          class="cancel-img-btn full-width"
+          :label="$t('cancel')"
+          @click="urlProfile = ''"
+        />
+      </div>
+      <div class="col-6">
+        <q-btn
+          id="btn-profile-save"
+          dense
+          unelevated
+          outlined
+          padding="8px"
+          class="submit-img-btn full-width"
+          :label="$t('save')"
+          @click="profileSubmit = true"
+        />
+      </div>
+    </div>
+    <q-btn
+      id="btn-profile-edit"
+      v-else-if="urlProfile && profileSubmit"
+      dense
+      unelevated
+      outlined
+      padding="8px"
+      icon="mdi-pencil-outline"
+      class="edit-img-btn q-mt-md full-width"
+      :label="$t('formDialogBtnEditProfile')"
+      @click.prevent="$emit('inputFile'), (profileSubmit = false)"
+    />
+
+    <q-btn
+      id="btn-profile-upload"
+      v-else
+      dense
+      unelevated
+      outlined
+      padding="8px"
+      class="upload-img-btn q-mt-md full-width"
+      :label="$t('formDialogBtnUploadProfile')"
+      :class="{ dark: $q.dark.isActive }"
+      @click="$emit('inputFile')"
+    />
+    <q-separator class="col-12 q-my-md" />
+    <div class="text-left q-pt-md">
+      <q-toggle
+        dense
+        size="md"
+        v-model="statusToggle"
+        padding="none"
+        class="q-pr-md"
+      />
+      <span>{{ $t('formDialogTitleUserStatus') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.upload-img-preview {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2);
+  height: 12vw;
+  background-color: var(--surface-1);
+}
+</style>