bfg-common 1.2.60 → 1.2.61

package/components/common/feedback/Feedback.vue

@@ -1,260 +1,260 @@
-<template>
-  <div v-if="props.show" id="feedbackId" class="modal">
-    <div
-      id="feedback-modal-dialog-Id"
-      :class="['modal-dialog', { imageDrawn: isFeedbackImageDrawn }]"
-      :style="{
-        width: computeWidth,
-        height: computeHeight,
-      }"
-    >
-      <div class="modal-content">
-        <div class="modal-header">
-          <div class="flex-align-center">
-            <h3 class="modal-title">
-              {{ props.title }}
-            </h3>
-          </div>
-          <button
-            v-if="!props.isHideCloseIcon"
-            id="feedback-modal-close-icon"
-            class="close"
-            @click="hide"
-          >
-            <atoms-the-icon class="close-icon" name="close" />
-          </button>
-        </div>
-
-        <common-feedback-buttons v-model:select="type" :items="tabsItems" />
-        <div class="modal-body">
-          <common-feedback-message
-            v-show="type !== 2"
-            v-model:description="description"
-            v-model:email="email"
-            :selected-tab="type"
-            @screen-shot="onScreenShot"
-          />
-          <common-feedback-visit-portal v-show="type === 2" />
-        </div>
-        <div
-          :class="{
-            'modal-footer': type !== 2,
-            'modal-no-footer': type === 2,
-          }"
-        >
-          <button
-            id="feedback-modal-cancel-button"
-            class="btn btn-outline"
-            @click="hide"
-          >
-            {{ localization.cancel }}
-          </button>
-          <button
-            class="btn btn-outline"
-            :class="props.loading && 'modal-dialog__loader'"
-            :disabled="!description"
-            @click="submit"
-          >
-            <atoms-loader-pre-loader
-              v-if="props.loading"
-              id="loader"
-              class="absolute-center button__loading"
-              :show="props.loading"
-            />
-            <span v-else>
-              {{ localization.send }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_FeedbackButtonsItem,
-  UI_I_FeedbackForm,
-  UI_I_MessageImg,
-} from '~/components/common/feedback/models/interfaces'
-import { UI_T_FeedbackType } from '~/components/common/feedback/models/types'
-import { feedbackTabs } from '~/components/common/feedback/config/feedbackTabs'
-
-const props = defineProps<{
-  show: boolean
-  title: string
-  width?: string
-  height?: string
-  submitText?: string
-  loading?: boolean
-  isHideCloseIcon?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'submit', value: UI_I_FeedbackForm): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
-  feedbackTabs(localization.value)
-)
-const reset = (): void => {
-  email.value = ''
-  description.value = ''
-  type.value = undefined
-}
-const hide = (): void => {
-  emits('hide')
-
-  reset()
-}
-
-const submit = (): void => {
-  if (type.value !== 0 && type.value !== 1) return
-
-  const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
-
-  const image = canvas?.toDataURL().match(/base64,(.+)/)?.[1] || ''
-  emits('submit', {
-    image,
-    type: type.value,
-    description: description.value,
-    email: email.value,
-  })
-
-  reset()
-}
-const computeWidth = computed<string | undefined>(() =>
-  isFeedbackImageDrawn.value && type.value !== 2
-    ? feedbackImageDrawnWidth.value
-    : props.width
-)
-const computeHeight = computed<string>(() =>
-  !isFeedbackImageDrawn.value && type.value !== 2
-    ? ''
-    : type.value !== 2
-    ? '100%'
-    : '420px'
-)
-const isFeedbackImageDrawn = ref<boolean>(false)
-const feedbackImageDrawnWidth = ref<string>('')
-const type = ref<UI_T_FeedbackType>(undefined)
-const description = ref<string>('')
-const email = ref<string>('')
-
-const onScreenShot = (value: UI_I_MessageImg): void => {
-  isFeedbackImageDrawn.value = value.hasTakeScreenshot
-  feedbackImageDrawnWidth.value = value.width
-}
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-  overflow-x: auto;
-
-  .modal-dialog {
-    .modal-content {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      background-color: var(--modal-bg-color);
-      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      border-radius: 3px;
-      background-clip: padding-box;
-      padding: 24px;
-      height: 100%;
-      -webkit-animation-name: animateTop;
-      -webkit-animation-duration: 0.4s;
-      animation-name: animateTop;
-      animation-duration: 0.4s;
-      overflow-x: auto;
-
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-
-        .modal-title {
-          color: var(--main-color-mode);
-        }
-
-        .close-icon {
-          fill: var(--close-icon);
-          width: 24px;
-          height: 24px;
-        }
-      }
-      .modal-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 20px;
-
-        :deep(.icon-info-standart) {
-          width: 20px !important;
-          min-width: 20px !important;
-          height: 20px;
-          min-height: 20px;
-        }
-        .info-icon {
-          height: 24px;
-        }
-        .info-text {
-          margin-left: 5px;
-        }
-      }
-      .modal-footer {
-        align-items: flex-end;
-        margin-top: auto;
-        .btn:last-child {
-          margin-left: 5px;
-        }
-      }
-      .modal-no-footer {
-        opacity: 0;
-        width: 200px;
-        height: 60px;
-      }
-    }
-    &__loader {
-      position: relative;
-      pointer-events: none;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-  .button {
-    &__loading {
-      display: flex;
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-      }
-    }
-  }
-}
-.imageDrawn {
-  width: auto;
-}
-</style>
+<template>
+  <div v-if="props.show" id="feedbackId" class="modal">
+    <div
+      id="feedback-modal-dialog-Id"
+      :class="['modal-dialog', { imageDrawn: isFeedbackImageDrawn }]"
+      :style="{
+        width: computeWidth,
+        height: computeHeight,
+      }"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="flex-align-center">
+            <h3 class="modal-title">
+              {{ props.title }}
+            </h3>
+          </div>
+          <button
+            v-if="!props.isHideCloseIcon"
+            id="feedback-modal-close-icon"
+            class="close"
+            @click="hide"
+          >
+            <atoms-the-icon class="close-icon" name="close" />
+          </button>
+        </div>
+
+        <common-feedback-buttons v-model:select="type" :items="tabsItems" />
+        <div class="modal-body">
+          <common-feedback-message
+            v-show="type !== 2"
+            v-model:description="description"
+            v-model:email="email"
+            :selected-tab="type"
+            @screen-shot="onScreenShot"
+          />
+          <common-feedback-visit-portal v-show="type === 2" />
+        </div>
+        <div
+          :class="{
+            'modal-footer': type !== 2,
+            'modal-no-footer': type === 2,
+          }"
+        >
+          <button
+            id="feedback-modal-cancel-button"
+            class="btn btn-outline"
+            @click="hide"
+          >
+            {{ localization.cancel }}
+          </button>
+          <button
+            class="btn btn-outline"
+            :class="props.loading && 'modal-dialog__loader'"
+            :disabled="!description"
+            @click="submit"
+          >
+            <atoms-loader-pre-loader
+              v-if="props.loading"
+              id="loader"
+              class="absolute-center button__loading"
+              :show="props.loading"
+            />
+            <span v-else>
+              {{ localization.send }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_FeedbackButtonsItem,
+  UI_I_FeedbackForm,
+  UI_I_MessageImg,
+} from '~/components/common/feedback/models/interfaces'
+import { UI_T_FeedbackType } from '~/components/common/feedback/models/types'
+import { feedbackTabs } from '~/components/common/feedback/config/feedbackTabs'
+
+const props = defineProps<{
+  show: boolean
+  title: string
+  width?: string
+  height?: string
+  submitText?: string
+  loading?: boolean
+  isHideCloseIcon?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'submit', value: UI_I_FeedbackForm): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
+  feedbackTabs(localization.value)
+)
+const reset = (): void => {
+  email.value = ''
+  description.value = ''
+  type.value = undefined
+}
+const hide = (): void => {
+  emits('hide')
+
+  reset()
+}
+
+const submit = (): void => {
+  if (type.value !== 0 && type.value !== 1) return
+
+  const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
+
+  const image = canvas?.toDataURL().match(/base64,(.+)/)?.[1] || ''
+  emits('submit', {
+    image,
+    type: type.value,
+    description: description.value,
+    email: email.value,
+  })
+
+  reset()
+}
+const computeWidth = computed<string | undefined>(() =>
+  isFeedbackImageDrawn.value && type.value !== 2
+    ? feedbackImageDrawnWidth.value
+    : props.width
+)
+const computeHeight = computed<string>(() =>
+  !isFeedbackImageDrawn.value && type.value !== 2
+    ? ''
+    : type.value !== 2
+    ? '100%'
+    : '420px'
+)
+const isFeedbackImageDrawn = ref<boolean>(false)
+const feedbackImageDrawnWidth = ref<string>('')
+const type = ref<UI_T_FeedbackType>(undefined)
+const description = ref<string>('')
+const email = ref<string>('')
+
+const onScreenShot = (value: UI_I_MessageImg): void => {
+  isFeedbackImageDrawn.value = value.hasTakeScreenshot
+  feedbackImageDrawnWidth.value = value.width
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+  overflow-x: auto;
+
+  .modal-dialog {
+    .modal-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--modal-bg-color);
+      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      background-clip: padding-box;
+      padding: 24px;
+      height: 100%;
+      -webkit-animation-name: animateTop;
+      -webkit-animation-duration: 0.4s;
+      animation-name: animateTop;
+      animation-duration: 0.4s;
+      overflow-x: auto;
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .modal-title {
+          color: var(--main-color-mode);
+        }
+
+        .close-icon {
+          fill: var(--close-icon);
+          width: 24px;
+          height: 24px;
+        }
+      }
+      .modal-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 20px;
+
+        :deep(.icon-info-standart) {
+          width: 20px !important;
+          min-width: 20px !important;
+          height: 20px;
+          min-height: 20px;
+        }
+        .info-icon {
+          height: 24px;
+        }
+        .info-text {
+          margin-left: 5px;
+        }
+      }
+      .modal-footer {
+        align-items: flex-end;
+        margin-top: auto;
+        .btn:last-child {
+          margin-left: 5px;
+        }
+      }
+      .modal-no-footer {
+        opacity: 0;
+        width: 200px;
+        height: 60px;
+      }
+    }
+    &__loader {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .button {
+    &__loading {
+      display: flex;
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+      }
+    }
+  }
+}
+.imageDrawn {
+  width: auto;
+}
+</style>