bfg-common 1.5.92 → 1.5.94

package/components/common/accordion/Recursion.vue

@@ -1,222 +1,222 @@
-<template>
-  <div :class="['accordion', { disabled: props.accordion.disabled }]">
-    <nuxt-link
-      v-development="props.accordion.development"
-      :to="accordionLocal.path"
-      :data-id="accordionLocal.testId"
-      class="accordion-item"
-      active-class="active"
-      @click.prevent="onSelect(accordionLocal)"
-    >
-      <div
-        :class="['heading-wrap', { group: props.accordion.hasChild }]"
-        :style="{ paddingLeft: `${props.level * 24 || 10}px` }"
-      >
-        <div class="flex-align-center heading">
-          <div
-            v-if="props.accordion.iconClassName"
-            :class="['icon', props.accordion.iconClassName]"
-          ></div>
-          <div
-            :class="['text text-ellipsis', headingClass]"
-            :data-id="`${accordionLocal.testId}`"
-          >
-            {{ props.accordion.name }}
-          </div>
-        </div>
-        <button
-          v-if="props.accordion.hasChild"
-          :id="`${props.testId}-trigger-button`"
-          :data-id="`${accordionLocal.testId}-toggle-button`"
-          class="btn-trigger max-width"
-          @click="toggle"
-        >
-          <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 type {
-  UI_I_AccordionRecursion,
-  UI_I_HeadingClass,
-} from '~/components/common/accordion/lib/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)
-
-// TODO CHANGE
-watch(
-  accordionLocal,
-  () => {
-    if (accordionLocal.value.isOpen !== false)
-      accordionLocal.value.isOpen = true
-  },
-  { immediate: true }
-)
-
-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 = (element: any): void => {
-  element.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;
-
-  &.max-width {
-    width: max-content;
-  }
-
-  //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', { disabled: props.accordion.disabled }]">
+    <nuxt-link
+      v-development="props.accordion.development"
+      :to="accordionLocal.path"
+      :data-id="accordionLocal.testId"
+      class="accordion-item"
+      active-class="active"
+      @click.prevent="onSelect(accordionLocal)"
+    >
+      <div
+        :class="['heading-wrap', { group: props.accordion.hasChild }]"
+        :style="{ paddingLeft: `${props.level * 24 || 10}px` }"
+      >
+        <div class="flex-align-center heading">
+          <div
+            v-if="props.accordion.iconClassName"
+            :class="['icon', props.accordion.iconClassName]"
+          ></div>
+          <div
+            :class="['text text-ellipsis', headingClass]"
+            :data-id="`${accordionLocal.testId}`"
+          >
+            {{ props.accordion.name }}
+          </div>
+        </div>
+        <button
+          v-if="props.accordion.hasChild"
+          :id="`${props.testId}-trigger-button`"
+          :data-id="`${accordionLocal.testId}-toggle-button`"
+          class="btn-trigger max-width"
+          @click="toggle"
+        >
+          <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 type {
+  UI_I_AccordionRecursion,
+  UI_I_HeadingClass,
+} from '~/components/common/accordion/lib/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)
+
+// TODO CHANGE
+watch(
+  accordionLocal,
+  () => {
+    if (accordionLocal.value.isOpen !== false)
+      accordionLocal.value.isOpen = true
+  },
+  { immediate: true }
+)
+
+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 = (element: any): void => {
+  element.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;
+
+  &.max-width {
+    width: max-content;
+  }
+
+  //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>