bfg-common 1.0.53 → 1.0.55

package/components/common/accordion/Recursion.vue

@@ -1,195 +1,202 @@
-<template>
-  <div
-    class="accordion"
-    :class="{ isOpen, disabled: props.accordion.disabled }"
-  >
-    <NuxtLink
-      class="accordion-item"
-      :to="accordion.path"
-      active-class="active"
-      @click.prevent="onSelect(accordion)"
-    >
-      <div
-        :class="['heading-wrap', { group: props.accordion.hasChild }]"
-        :style="{ paddingLeft: `${props.level * 24 || 10}px` }"
-        @click="toggle"
-      >
-        <div class="flex-align-center heading">
-          <div
-            v-if="props.accordion.iconClassName"
-            :class="['icon', props.accordion.iconClassName]"
-          ></div>
-          <div :class="['text text-ellipsis', headingClass]">
-            {{ props.accordion.name }}
-          </div>
-        </div>
-        <button
-          v-if="props.accordion.hasChild"
-          :id="`${props.testId}-trigger-button`"
-          class="btn-trigger"
-        >
-          <atoms-the-icon class="trigger-icon" name="angle" />
-        </button>
-      </div>
-    </NuxtLink>
-
-    <transition
-      v-if="props.accordion.hasChild"
-      name="accordion"
-      @before-enter="end"
-      @enter="start"
-      @before-leave="start"
-      @leave="end"
-    >
-      <div v-show="isOpen" class="accordion__content">
-        <common-accordion-recursion
-          v-for="(item, key) in props.accordion.children"
-          :test-id="`${props.testId}-${key}`"
-          :key="item.id"
-          :accordion="item"
-          :level="props.level + 1"
-          @change="onSelect"
-        />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AccordionRecursion,
-  UI_I_HeadingClass,
-} from '~/components/common/accordion/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    accordion: UI_I_AccordionRecursion
-    testId: string
-    level?: number
-  }>(),
-  { level: 0 }
-)
-const emits = defineEmits<{
-  (event: 'change', value: UI_I_AccordionRecursion): void
-}>()
-
-const isOpen = ref<boolean>(true)
-const toggle = (): void => {
-  if (!props.accordion.hasChild) return
-  isOpen.value = !isOpen.value
-}
-
-const start = (element: any): void => {
-  element.style.height = element.scrollHeight + 'px'
-}
-const end = (el: any): void => {
-  el.style.height = 0
-}
-
-const headingClass = computed<UI_I_HeadingClass>(() => {
-  return {
-    'text-normal': !props.accordion.hasChild,
-    disabled: props.accordion.disabled && !props.accordion.hasChild,
-  }
-})
-
-const onSelect = (item: UI_I_AccordionRecursion) => {
-  emits('change', item)
-}
-</script>
-
-<style lang="scss">
-@import '~/assets/scss/common/mixins';
-
-%hover-effect {
-  margin-bottom: -1px;
-  border-bottom: 1px solid var(--row-hover-border-color);
-  background-color: var(--row-hover-bg-color);
-  cursor: pointer;
-}
-%active-mode {
-  background-color: var(--row-selected-bg-color);
-  color: var(--row-selected-text-color);
-}
-.accordion {
-  .accordion-item {
-    display: block;
-    text-decoration: none;
-    color: var(--global-font-color);
-
-    &.active {
-      background-color: #29414e;
-      color: #fff;
-      border-bottom: 1px solid transparent;
-      cursor: default;
-      %hover-effect {
-        margin-bottom: unset;
-        border-bottom: unset;
-        background-color: unset;
-        cursor: unset;
-      }
-    }
-
-    .heading-wrap {
-      width: 100%;
-      @include flex($align: center, $just: space-between);
-
-      &:not(.group) {
-        display: block;
-        padding-right: 14px;
-      }
-
-      &.group .heading {
-        width: calc(100% - 30px);
-      }
-      .heading {
-        margin-right: 10px;
-        //overflow: hidden;
-        .icon {
-          margin: 1px 4px 0 0;
-        }
-
-        .text {
-          font-weight: 600;
-
-          &.text-normal {
-            font-weight: 400;
-
-            &.disabled {
-              opacity: 0.3;
-              cursor: not-allowed;
-            }
-          }
-        }
-      }
-      &:hover:not(:has(> .disabled)) {
-        @extend %hover-effect;
-      }
-      &:has(> .disabled) {
-        cursor: not-allowed;
-      }
-    }
-  }
-  &__content {
-    transition: 0.1s ease-in-out;
-    overflow: hidden;
-  }
-}
-
-.btn-trigger {
-  flex: auto;
-  margin-right: 10px;
-
-  //padding-right: 10px;
-  .trigger-icon {
-    width: 16px;
-    height: 16px;
-    transform: rotate(90deg);
-    margin-left: auto;
-    fill: var(--triger-icon-color);
-    .isOpen & {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>
+<template>
+  <div class="accordion" :class="{ disabled: props.accordion.disabled }">
+    <nuxt-link
+      class="accordion-item"
+      :to="accordionLocal.path"
+      active-class="active"
+      @click.prevent="onSelect(accordionLocal)"
+    >
+      <div
+        :class="['heading-wrap', { group: props.accordion.hasChild }]"
+        :style="{ paddingLeft: `${props.level * 24 || 10}px` }"
+        @click="toggle"
+      >
+        <div class="flex-align-center heading">
+          <div
+            v-if="props.accordion.iconClassName"
+            :class="['icon', props.accordion.iconClassName]"
+          ></div>
+          <div :class="['text text-ellipsis', headingClass]">
+            {{ props.accordion.name }}
+          </div>
+        </div>
+        <button
+          v-if="props.accordion.hasChild"
+          :id="`${props.testId}-trigger-button`"
+          class="btn-trigger"
+        >
+          <atoms-the-icon
+            :class="[
+              'trigger-icon',
+              {
+                isOpen: accordionLocal.isOpen,
+              },
+            ]"
+            name="angle"
+          />
+        </button>
+      </div>
+    </nuxt-link>
+
+    <transition
+      v-if="props.accordion.hasChild"
+      name="accordion"
+      @before-enter="end"
+      @enter="start"
+      @before-leave="start"
+      @leave="end"
+    >
+      <div v-show="accordionLocal.isOpen" class="accordion__content">
+        <common-accordion-recursion
+          v-for="(item, key) in props.accordion.children"
+          :key="item.id"
+          :test-id="`${props.testId}-${key}`"
+          :accordion="item"
+          :level="props.level + 1"
+          @change="onSelect"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AccordionRecursion,
+  UI_I_HeadingClass,
+} from '~/components/common/accordion/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    accordion: UI_I_AccordionRecursion
+    testId: string
+    level?: number
+  }>(),
+  { level: 0 }
+)
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_AccordionRecursion): void
+}>()
+
+const accordionLocal = ref<UI_I_AccordionRecursion>(props.accordion)
+
+const toggle = (): void => {
+  if (!props.accordion.hasChild) return
+
+  accordionLocal.value.isOpen = !accordionLocal.value.isOpen
+}
+
+const start = (element: any): void => {
+  element.style.height = 'auto'
+}
+const end = (el: any): void => {
+  el.style.height = 0
+}
+
+const headingClass = computed<UI_I_HeadingClass>(() => {
+  return {
+    'text-normal': !props.accordion.hasChild,
+    disabled: props.accordion.disabled && !props.accordion.hasChild,
+  }
+})
+
+const onSelect = (item: UI_I_AccordionRecursion): void => {
+  emits('change', item)
+}
+</script>
+
+<style lang="scss">
+@import '~/assets/scss/common/mixins';
+
+%hover-effect {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--row-hover-border-color);
+  background-color: var(--row-hover-bg-color);
+  cursor: pointer;
+}
+%active-mode {
+  background-color: var(--row-selected-bg-color);
+  color: var(--row-selected-text-color);
+}
+.accordion {
+  .accordion-item {
+    display: block;
+    text-decoration: none;
+    color: var(--global-font-color);
+
+    &.active {
+      background-color: #29414e;
+      color: #fff;
+      border-bottom: 1px solid transparent;
+      cursor: default;
+      %hover-effect {
+        margin-bottom: unset;
+        border-bottom: unset;
+        background-color: unset;
+        cursor: unset;
+      }
+    }
+
+    .heading-wrap {
+      width: 100%;
+      @include flex($align: center, $just: space-between);
+
+      &:not(.group) {
+        display: block;
+        padding-right: 14px;
+      }
+
+      &.group .heading {
+        width: calc(100% - 30px);
+      }
+      .heading {
+        margin-right: 10px;
+        //overflow: hidden;
+        .icon {
+          margin: 1px 4px 0 0;
+        }
+
+        .text {
+          font-weight: 600;
+
+          &.text-normal {
+            font-weight: 400;
+
+            &.disabled {
+              opacity: 0.3;
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+      &:hover:not(:has(> .disabled)) {
+        @extend %hover-effect;
+      }
+      &:has(> .disabled) {
+        cursor: not-allowed;
+      }
+    }
+  }
+  &__content {
+    transition: 0.1s ease-in-out;
+    overflow: hidden;
+  }
+}
+
+.btn-trigger {
+  flex: auto;
+  margin-right: 10px;
+
+  //padding-right: 10px;
+  .trigger-icon {
+    width: 16px;
+    height: 16px;
+    transform: rotate(90deg);
+    margin-left: auto;
+    fill: var(--triger-icon-color);
+    &.isOpen {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

package/components/common/accordion/models/interfaces.ts

@@ -6,6 +6,7 @@ export interface UI_I_AccordionRecursion {
   path?: string
   iconClassName?: string
   children?: UI_I_AccordionRecursion[]
+  isOpen?: boolean
 }
 
 export interface UI_I_HeadingClass {

package/components/common/accordion/utils/accordion.ts

@@ -0,0 +1,31 @@
+import { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+
+const collapseRecursion = (
+  accordion: UI_I_AccordionRecursion[],
+  isOpen: boolean
+): UI_I_AccordionRecursion[] =>
+  accordion.map((item) => {
+    item.isOpen = isOpen
+    if (item.hasChild && item.children?.length) {
+      item.children = collapseRecursion(item.children, isOpen)
+    }
+
+    return item
+  })
+
+const defaultShow = (
+  accordion: UI_I_AccordionRecursion[]
+): UI_I_AccordionRecursion[] =>
+  accordion.map((item) => {
+    if (item.isOpen !== false) item.isOpen = true
+
+    return item
+  })
+
+export const constructItems = (
+  accordion: UI_I_AccordionRecursion[],
+  isOpen: boolean | null
+): UI_I_AccordionRecursion[] =>
+  isOpen === null
+    ? defaultShow(accordion)
+    : collapseRecursion(accordion, isOpen)

package/components/common/adapterManager/AddAdapterWarningModal.vue

@@ -1,82 +1,82 @@
-<template>
-  <div>
-    <atoms-modal
-      test-id="add-adapter-warning"
-      width="576"
-      height="420"
-      :show="props.show"
-      :title="props.title"
-      class="diagram-action__remove"
-      @hide="onHideModal"
-    >
-      <template #modalBody>
-        <div class="modal-body-content modal-body-content__confirmation">
-          <div class="confirm-icon-container">
-            <atoms-diagram-icon name="is-warning" />
-          </div>
-          <p class="preserve-newlines">
-            {{ localization.noFreeNetworkAdaptersAddSwitch }}
-          </p>
-        </div>
-      </template>
-      <template #modalFooter>
-        <span>
-          <button
-            :id="`${props.testId}-modal-close-button`"
-            type="button"
-            class="btn btn-primary"
-            @click="onHideModal"
-          >
-            {{ localization.ok }}
-          </button>
-        </span>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-// Props from up
-const props = defineProps<{
-  show: boolean
-  modalName: string
-  viewName: string
-  title: string
-  testId: string
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Modal
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.diagram-action__remove) {
-  .modal-body-content {
-    display: flex;
-
-    .confirm-icon-container {
-      margin-right: 20px;
-    }
-
-    .preserve-newlines {
-      white-space: pre-line;
-      font-size: 15px;
-    }
-  }
-}
-.table-fixed-height {
-  min-height: 287px;
-  max-height: 287px;
-  overflow-y: auto;
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      test-id="add-adapter-warning"
+      width="576"
+      height="420"
+      :show="props.show"
+      :title="props.title"
+      class="diagram-action__remove"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <div class="modal-body-content modal-body-content__confirmation">
+          <div class="confirm-icon-container">
+            <atoms-diagram-icon name="is-warning" />
+          </div>
+          <p class="preserve-newlines">
+            {{ localization.noFreeNetworkAdaptersAddSwitch }}
+          </p>
+        </div>
+      </template>
+      <template #modalFooter>
+        <span>
+          <button
+            :id="`${props.testId}-modal-close-button`"
+            type="button"
+            class="btn btn-primary"
+            @click="onHideModal"
+          >
+            {{ localization.ok }}
+          </button>
+        </span>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+// Props from up
+const props = defineProps<{
+  show: boolean
+  modalName: string
+  viewName: string
+  title: string
+  testId: string
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Modal
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__remove) {
+  .modal-body-content {
+    display: flex;
+
+    .confirm-icon-container {
+      margin-right: 20px;
+    }
+
+    .preserve-newlines {
+      white-space: pre-line;
+      font-size: 15px;
+    }
+  }
+}
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+}
+</style>