bfg-common 1.4.562 → 1.4.563

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -1,152 +1,152 @@
-<template>
-  <common-main-navigation-panel-new
-    v-if="props.isNewView"
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-  <common-main-navigation-panel-old
-    v-else
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
-import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    mainMenuStatus: boolean
-    navigationItems: UI_I_NavigationItem[][]
-    parentStatus: UI_T_ParentStatus
-    disabledPin: boolean
-    isNewView?: boolean
-  }>(),
-  {
-    isNewView: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-const setMenuPined = (): void => {
-  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
-}
-watch(
-  () => props.disabledPin,
-  () => {
-    setMenuPined()
-  },
-  { immediate: true }
-)
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
-})
-
-watch(
-  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
-  ([newValue1, newValue2, newValue3]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (newValue3 === 1) return
-
-    const name = location.pathname.split('/')[1]
-
-    if (!newValue1 || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', newValue2)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  setMenuPined()
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  if (menuPined.value) return
-  emits('toggle', false)
-}
-
-watch(
-  menuPined,
-  (newValue) => {
-    $store.dispatch('main/A_MENU_PINED', newValue)
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-main-navigation-panel-new
+    v-if="props.isNewView"
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+  <common-main-navigation-panel-old
+    v-else
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
+import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    mainMenuStatus: boolean
+    navigationItems: UI_I_NavigationItem[][]
+    parentStatus: UI_T_ParentStatus
+    disabledPin: boolean
+    isNewView?: boolean
+  }>(),
+  {
+    isNewView: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const route = useRoute()
+
+const showMenu = computed<boolean>(
+  () => props.mainMenuStatus || menuPined.value
+)
+
+const menuPined = ref<boolean>(false)
+const changeMenuPin = (): void => {
+  useLocalStorage('menuPined', menuPined.value)
+}
+const setMenuPined = (): void => {
+  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
+}
+watch(
+  () => props.disabledPin,
+  () => {
+    setMenuPined()
+  },
+  { immediate: true }
+)
+
+const menuCollapsed = ref<boolean>(false)
+const collapseMenu = (): void => {
+  menuCollapsed.value = !menuCollapsed.value
+  useLocalStorage('menuCollapsed', menuCollapsed.value)
+}
+
+const mainMenuHovered = ref<boolean>(false)
+
+const clickWindow = (event: Event): void => {
+  const target = event.target as any
+  if (
+    menuPined.value ||
+    mainMenuHovered.value ||
+    target.className.baseVal?.includes('menu-icon') ||
+    target.className.baseVal?.includes('clr-i-outline')
+  ) {
+    return
+  }
+
+  emits('toggle', false)
+}
+
+const mountedReady = ref<boolean>(false)
+onMounted(() => {
+  mountedReady.value = true
+  window.addEventListener('click', clickWindow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickWindow)
+})
+
+watch(
+  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
+  ([newValue1, newValue2, newValue3]: [
+    boolean,
+    any,
+    UI_T_ParentStatus
+  ]): void => {
+    if (newValue3 === 1) return
+
+    const name = location.pathname.split('/')[1]
+
+    if (!newValue1 || name === 'auth') return
+
+    setSidebarOptions()
+    useLocalStorage('navigationHistoryRoute', newValue2)
+  },
+  { immediate: true, deep: true }
+)
+
+const setSidebarOptions = (): void => {
+  setMenuPined()
+  menuCollapsed.value = useLocalStorage('menuCollapsed')
+
+  if (menuPined.value) {
+    emits('toggle', true)
+  }
+}
+
+const hideMainMenu = (): void => {
+  if (menuPined.value) return
+  emits('toggle', false)
+}
+
+watch(
+  menuPined,
+  (newValue) => {
+    $store.dispatch('main/A_MENU_PINED', newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -1,74 +1,70 @@
-<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>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '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,13 +1,39 @@
 <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>
+    <ui-modal
+      show
+      :test-id="props.testId"
+      size="sm"
+      width="480px"
+      :texts="modalTextsLocal"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #header>
+        <div class="justify-between flex w-full">
+          <span></span>
+
+          <ui-icon name="info-status" width="48px" height="48px" />
+          <ui-icon
+            name="close"
+            width="24"
+            height="24"
+            class="pointer"
+            @click="onHide"
+          />
+        </div>
+      </template>
+      <template #content>
+        <h4 class="confirm-title">
+          {{ props.headline }}
+        </h4>
+        <p class="confirm-description">
+          {{ props.description }}
+        </p>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
 </template>
 
 <script setup lang="ts">
@@ -34,4 +60,29 @@ const onSubmit = (): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.modal-footer-container,
+:deep(.modal-footer-container) {
+  justify-content: center;
+}
+.modal-footer-transparent-block,
+:deep(.modal-footer-transparent-block) {
+  display: none;
+}
+
+.confirm-title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24.2px;
+  color: #4d5d69;
+  margin-bottom: 8px;
+  text-align: center;
+}
+.confirm-description {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.94px;
+  color: #9da6ad;
+  text-align: center;
+}
+</style>

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

@@ -9,18 +9,18 @@
     @hide="onHideModal"
   >
     <template #modalBody>
-      <div class="confirm-modal__body">
-        <atoms-the-icon
-          name="exclamation-triangle"
-          class="confirm-modal__icon"
-        />
+      <slot name="content">
+        <div class="confirm-modal__body">
+          <atoms-the-icon
+            name="exclamation-triangle"
+            class="confirm-modal__icon"
+          />
 
-        <p class="confirm-modal__text">
-          <slot name="content">
+          <p class="confirm-modal__text">
             {{ props.description }}
-          </slot>
-        </p>
-      </div>
+          </p>
+        </div>
+      </slot>
     </template>
 
     <template #modalFooter>