bfg-common 1.4.791 → 1.4.792

package/components/common/modals/confirmByInput/ConfirmByInput.vue

@@ -1,206 +1,206 @@
-<template>
-  <atoms-modal
-    show
-    :test-id="`${props.testId}-modal`"
-    :width="props.width"
-    class="confirm-by-input"
-    :title="props.title"
-    :second-title="props.subTitle"
-    :loading="props.loading"
-    is-hide-close-icon
-    @submit="onConfirm"
-  >
-    <template #modalBody>
-      <div class="confirm-by-input__body">
-        <atoms-the-icon
-          name="exclamation-triangle"
-          class="confirm-by-input__icon"
-        />
-
-        <div>
-          <slot name="content"></slot>
-
-          <div class="form-group">
-            <label class="no-selection" for="confirmation">{{
-              confirmationText
-            }}</label>
-            <div class="form-group__input">
-              <input
-                id="confirmation"
-                v-model="confirmationForm"
-                data-id="confirmation-input"
-                type="text"
-                autocomplete="off"
-                @keyup.enter="onConfirm"
-              />
-              <div v-show="!isValid && confirmationForm" class="form-validate">
-                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
-                  <template #elem>
-                    <atoms-the-icon
-                      class="is-error tooltip-trigger"
-                      name="info"
-                      width="28px"
-                      height="28px"
-                    />
-                  </template>
-                  <template #content>
-                    {{ confirmDeletionInputError }}
-                  </template>
-                </atoms-tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #modalFooter>
-      <button
-        id="confirm-by-input-modal-close-button"
-        :data-id="`${props.testId}-modal-close-button`"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.common.no }}
-      </button>
-      <button
-        id="confirm-by-input-modal-apply-button"
-        :data-id="`${props.testId}-modal-apply-button`"
-        class="btn btn-primary"
-        :class="props.loading && 'modal-dialog__loader'"
-        :disabled="!isValid || props.loading"
-        @click="onConfirm"
-      >
-        <atoms-loader-pre-loader
-          v-if="props.loading"
-          id="loader"
-          :show="props.loading"
-          class="button__loading"
-          :test-id="`${props.testId}-spinner`"
-        />
-        <span v-else>
-          {{ localization.common.yes }}
-        </span>
-      </button>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  subTitle: string
-  testId: string
-  width: string
-  loading?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'confirm'): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const confirmationForm = ref<string>('')
-const isValid = computed<boolean>(() => {
-  return confirmationForm.value === props.subTitle
-})
-
-const confirmationText = localization.value.common.confirmDeletionInput.replace(
-    '{title}',
-    props.subTitle
-)
-const confirmDeletionInputError =
-  localization.value.common.confirmDeletionInputError.replace(
-    '{title}',
-    props.subTitle
-  )
-
-const onConfirm = async (): Promise<void> => {
-  if (!isValid.value) return
-
-  emits('confirm')
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.confirm-by-input {
-  :deep(.modal-header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .modal-title {
-      color: var(--main-color-mode);
-      font-size: 24px;
-      max-width: 65%;
-    }
-    .secondary-title {
-      color: var(--modal-secondary-title);
-      font-size: 0.75rem;
-      font-weight: lighter;
-      user-select: none;
-    }
-    .separator {
-      content: '';
-      border-left: 1px solid #ccc;
-      margin: 0 18px;
-      height: 22px;
-    }
-
-    .close-icon {
-      fill: var(--close-icon);
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__body {
-    @include flex($align: flex-start);
-
-    .form-group {
-      margin-top: 20px;
-
-      label {
-        font-weight: bold;
-        font-size: 0.6rem;
-        user-select: none;
-      }
-
-      &:not(:first-child) input {
-        width: 100%;
-      }
-      &__input {
-        display: flex;
-        width: 100%;
-        min-height: 30px;
-      }
-    }
-  }
-
-  &__icon {
-    min-width: 48px;
-    height: 48px;
-    margin-right: 20px;
-    fill: #c27b00;
-  }
-
-  .button {
-    &__loading {
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-        margin-top: 5px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <atoms-modal
+    show
+    :test-id="`${props.testId}-modal`"
+    :width="props.width"
+    class="confirm-by-input"
+    :title="props.title"
+    :second-title="props.subTitle"
+    :loading="props.loading"
+    is-hide-close-icon
+    @submit="onConfirm"
+  >
+    <template #modalBody>
+      <div class="confirm-by-input__body">
+        <atoms-the-icon
+          name="exclamation-triangle"
+          class="confirm-by-input__icon"
+        />
+
+        <div>
+          <slot name="content"></slot>
+
+          <div class="form-group">
+            <label class="no-selection" for="confirmation">{{
+              confirmationText
+            }}</label>
+            <div class="form-group__input">
+              <input
+                id="confirmation"
+                v-model="confirmationForm"
+                data-id="confirmation-input"
+                type="text"
+                autocomplete="off"
+                @keyup.enter="onConfirm"
+              />
+              <div v-show="!isValid && confirmationForm" class="form-validate">
+                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
+                  <template #elem>
+                    <atoms-the-icon
+                      class="is-error tooltip-trigger"
+                      name="info"
+                      width="28px"
+                      height="28px"
+                    />
+                  </template>
+                  <template #content>
+                    {{ confirmDeletionInputError }}
+                  </template>
+                </atoms-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #modalFooter>
+      <button
+        id="confirm-by-input-modal-close-button"
+        :data-id="`${props.testId}-modal-close-button`"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.common.no }}
+      </button>
+      <button
+        id="confirm-by-input-modal-apply-button"
+        :data-id="`${props.testId}-modal-apply-button`"
+        class="btn btn-primary"
+        :class="props.loading && 'modal-dialog__loader'"
+        :disabled="!isValid || props.loading"
+        @click="onConfirm"
+      >
+        <atoms-loader-pre-loader
+          v-if="props.loading"
+          id="loader"
+          :show="props.loading"
+          class="button__loading"
+          :test-id="`${props.testId}-spinner`"
+        />
+        <span v-else>
+          {{ localization.common.yes }}
+        </span>
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  subTitle: string
+  testId: string
+  width: string
+  loading?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const confirmationForm = ref<string>('')
+const isValid = computed<boolean>(() => {
+  return confirmationForm.value === props.subTitle
+})
+
+const confirmationText = localization.value.common.confirmDeletionInput.replace(
+    '{title}',
+    props.subTitle
+)
+const confirmDeletionInputError =
+  localization.value.common.confirmDeletionInputError.replace(
+    '{title}',
+    props.subTitle
+  )
+
+const onConfirm = async (): Promise<void> => {
+  if (!isValid.value) return
+
+  emits('confirm')
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.confirm-by-input {
+  :deep(.modal-header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .modal-title {
+      color: var(--main-color-mode);
+      font-size: 24px;
+      max-width: 65%;
+    }
+    .secondary-title {
+      color: var(--modal-secondary-title);
+      font-size: 0.75rem;
+      font-weight: lighter;
+      user-select: none;
+    }
+    .separator {
+      content: '';
+      border-left: 1px solid #ccc;
+      margin: 0 18px;
+      height: 22px;
+    }
+
+    .close-icon {
+      fill: var(--close-icon);
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__body {
+    @include flex($align: flex-start);
+
+    .form-group {
+      margin-top: 20px;
+
+      label {
+        font-weight: bold;
+        font-size: 0.6rem;
+        user-select: none;
+      }
+
+      &:not(:first-child) input {
+        width: 100%;
+      }
+      &__input {
+        display: flex;
+        width: 100%;
+        min-height: 30px;
+      }
+    }
+  }
+
+  &__icon {
+    min-width: 48px;
+    height: 48px;
+    margin-right: 20px;
+    fill: #c27b00;
+  }
+
+  .button {
+    &__loading {
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>

package/components/common/modals/unsavedChanges/UnsavedChanges.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="absolute">
-    <common-modals-confirmation
-      v-if="show"
-      is-new-view
-      :headline="localization.common.unsavedChanges"
-      :description="localization.common.unsavedChangesDescription"
-      :modal-texts="modalTexts"
-      @hide-modal="onHide"
-      @confirm="onLeave"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const emits = defineEmits<{
-  (event: 'leave'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const modalTexts = ref<UI_I_ModalTexts>({
-  resetToDefault: '',
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.leave,
-})
-
-const show = defineModel<boolean>('show', { required: true })
-
-const onHide = (): void => {
-  show.value = false
-}
-const onLeave = (): void => {
-  emits('leave')
-}
-</script>
-
-<style>
-:root {
-  --unsaved-changes-modal-bg-color: var(--modal-bg);
-}
-:root.dark-theme {
-  --unsaved-changes-modal-bg-color: #334453;
-}
-</style>
-<style scoped lang="scss">
-:deep(.ui-popup_content) {
-  background-color: var(--unsaved-changes-modal-bg-color);
-}
-:deep(.ui-popup_footer-transparent-block) {
-  display: none;
-}
-</style>
+<template>
+  <div class="absolute">
+    <common-modals-confirmation
+      v-if="show"
+      is-new-view
+      :headline="localization.common.unsavedChanges"
+      :description="localization.common.unsavedChangesDescription"
+      :modal-texts="modalTexts"
+      @hide-modal="onHide"
+      @confirm="onLeave"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'leave'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  resetToDefault: '',
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.leave,
+})
+
+const show = defineModel<boolean>('show', { required: true })
+
+const onHide = (): void => {
+  show.value = false
+}
+const onLeave = (): void => {
+  emits('leave')
+}
+</script>
+
+<style>
+:root {
+  --unsaved-changes-modal-bg-color: var(--modal-bg);
+}
+:root.dark-theme {
+  --unsaved-changes-modal-bg-color: #334453;
+}
+</style>
+<style scoped lang="scss">
+:deep(.ui-popup_content) {
+  background-color: var(--unsaved-changes-modal-bg-color);
+}
+:deep(.ui-popup_footer-transparent-block) {
+  display: none;
+}
+</style>