bfg-common 1.4.829 → 1.4.830

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

@@ -1,209 +1,209 @@
-<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="confirmationFormLocal"
-                data-id="confirmation-input"
-                type="text"
-                autocomplete="off"
-                @keyup.enter="onConfirm"
-              />
-              <div
-                v-show="!isValid && confirmationFormLocal"
-                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 confirmationFormLocal = defineModel<string>({ required: true })
-const emits = defineEmits<{
-  (event: 'confirm'): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isValid = computed<boolean>(() => {
-  return confirmationFormLocal.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="confirmationFormLocal"
+                data-id="confirmation-input"
+                type="text"
+                autocomplete="off"
+                @keyup.enter="onConfirm"
+              />
+              <div
+                v-show="!isValid && confirmationFormLocal"
+                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 confirmationFormLocal = defineModel<string>({ required: true })
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isValid = computed<boolean>(() => {
+  return confirmationFormLocal.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/confirmation/Confirmation.vue

@@ -1,74 +1,74 @@
-<template>
-  <common-modals-confirmation-new
-    v-if="isNewViewLocal"
-    :headline="props.headline"
-    :description="props.description"
-    :modal-texts="props.modalTexts"
-    :test-id="props.testId"
-    @hide-modal="emits('hide-modal')"
-    @confirm="emits('confirm')"
-  />
-  <common-modals-confirmation-old
-    v-else
-    :description="props.description"
-    :headline="props.headline"
-    :sub-title="props.subTitle"
-    :test-id="props.testId"
-    :type="props.type"
-    :loading="props.loading"
-    :variant-text-button="props.variantTextButton"
-    :width="props.width"
-    @hide-modal="emits('hide-modal')"
-    @confirm="emits('confirm')"
-  >
-    <template #content>
-      <slot name="content" />
-    </template>
-  </common-modals-confirmation-old>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    isNewView?: boolean
-    description?: string
-    headline?: string
-    subTitle?: string
-    testId?: string
-    type?: 'confirm' | 'remove'
-    loading?: boolean
-    variantTextButton?: 'ok' | 'confirm' | 'remove'
-    width?: string
-    modalTexts?: UI_I_ModalTexts
-  }>(),
-  {
-    isNewView: undefined,
-    testId: 'common-confirmation',
-    headline: '',
-    subTitle: '',
-    type: 'confirm',
-    description: '',
-    variantTextButton: 'ok',
-    width: '580px',
-    loading: false,
-    modalTexts: {
-      resetToDefault: 'Reset To Default',
-      button1: 'Cancel',
-      button2: 'Confirm',
-    },
-  }
-)
-const emits = defineEmits<{
-  (event: 'hide-modal'): void
-  (event: 'confirm'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewViewLocal = computed<boolean>(
-  () => props.isNewView ?? $store.getters['main/getIsNewView']
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-modals-confirmation-new
+    v-if="isNewViewLocal"
+    :headline="props.headline"
+    :description="props.description"
+    :modal-texts="props.modalTexts"
+    :test-id="props.testId"
+    @hide-modal="emits('hide-modal')"
+    @confirm="emits('confirm')"
+  />
+  <common-modals-confirmation-old
+    v-else
+    :description="props.description"
+    :headline="props.headline"
+    :sub-title="props.subTitle"
+    :test-id="props.testId"
+    :type="props.type"
+    :loading="props.loading"
+    :variant-text-button="props.variantTextButton"
+    :width="props.width"
+    @hide-modal="emits('hide-modal')"
+    @confirm="emits('confirm')"
+  >
+    <template #content>
+      <slot name="content" />
+    </template>
+  </common-modals-confirmation-old>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    isNewView?: boolean
+    description?: string
+    headline?: string
+    subTitle?: string
+    testId?: string
+    type?: 'confirm' | 'remove'
+    loading?: boolean
+    variantTextButton?: 'ok' | 'confirm' | 'remove'
+    width?: string
+    modalTexts?: UI_I_ModalTexts
+  }>(),
+  {
+    isNewView: undefined,
+    testId: 'common-confirmation',
+    headline: '',
+    subTitle: '',
+    type: 'confirm',
+    description: '',
+    variantTextButton: 'ok',
+    width: '580px',
+    loading: false,
+    modalTexts: {
+      resetToDefault: 'Reset To Default',
+      button1: 'Cancel',
+      button2: 'Confirm',
+    },
+  }
+)
+const emits = defineEmits<{
+  (event: 'hide-modal'): void
+  (event: 'confirm'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewViewLocal = computed<boolean>(
+  () => props.isNewView ?? $store.getters['main/getIsNewView']
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/modals/confirmation/ConfirmationNew.vue

@@ -1,37 +1,37 @@
-<template>
-  <ui-popup
-    :test-id="props.testId"
-    icon-name="info-status"
-    :title="props.headline"
-    :message="props.description"
-    :texts="modalTextsLocal"
-    @submit="onSubmit"
-    @hide="onHide"
-  ></ui-popup>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-
-const props = defineProps<{
-  testId: string
-  headline: string
-  description: string
-  modalTexts: UI_I_ModalTexts
-}>()
-const emits = defineEmits<{
-  (event: 'confirm'): void
-  (event: 'hide-modal'): void
-}>()
-
-const modalTextsLocal = computed<UI_I_ModalTexts>(() => props.modalTexts)
-
-const onHide = (): void => {
-  emits('hide-modal')
-}
-const onSubmit = (): void => {
-  emits('confirm')
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <ui-popup
+    :test-id="props.testId"
+    icon-name="info-status"
+    :title="props.headline"
+    :message="props.description"
+    :texts="modalTextsLocal"
+    @submit="onSubmit"
+    @hide="onHide"
+  ></ui-popup>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+
+const props = defineProps<{
+  testId: string
+  headline: string
+  description: string
+  modalTexts: UI_I_ModalTexts
+}>()
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide-modal'): void
+}>()
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() => props.modalTexts)
+
+const onHide = (): void => {
+  emits('hide-modal')
+}
+const onSubmit = (): void => {
+  emits('confirm')
+}
+</script>
+
+<style scoped lang="scss"></style>