bfg-common 1.4.884 → 1.4.901

package/components/atoms/tabs/VerticalTabs.vue

@@ -1,105 +1,105 @@
-<template>
-  <nav class="sidenav vertical-groups-sidenav">
-    <ul class="sidenav-content">
-      <li
-        v-for="(item, key) in props.items"
-        :id="`${props.testId}-item-${key}`"
-        :data-id="item.testId"
-        :key="item.value"
-        :class="[
-          'vertical-nav-link group-nav-link',
-          { active: item.value === props.modelValue },
-          { disabled: item.disabled },
-        ]"
-        :title="item.title || item.text"
-        @click="selectItem(item)"
-      >
-        {{ item.text }}
-      </li>
-    </ul>
-  </nav>
-</template>
-<script setup lang="ts">
-import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | number
-    items: UI_I_VerticalTabs[]
-    hasErrorMessages?: number | boolean
-    testId?: string
-  }>(),
-  { testId: 'ui-vertical-tabs' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string): void
-  (event: 'set-alert'): void
-}>()
-
-const selectItem = ({
-  value,
-  disabled,
-}: {
-  value: string
-  disabled: boolean
-}): void => {
-  if (disabled) return
-  if (
-    props.hasErrorMessages === undefined ||
-    props.hasErrorMessages === 0 ||
-    props.hasErrorMessages === false
-  ) {
-    emits('update:model-value', value)
-    return
-  }
-  emits('set-alert')
-}
-</script>
-
-<style>
-:root {
-  --vertical-tabs-nav-link: --grey-100;
-  --vertical-tabs-bg-color: #fafafa;
-}
-:root.dark-theme {
-  --vertical-tabs-nav-link: #ffffff;
-  --vertical-tabs-bg-color: transparent;
-}
-</style>
-<style lang="scss" scoped>
-.vertical-groups-sidenav {
-  min-height: 94%;
-  background-color: var(--vertical-tabs-bg-color);
-
-  .vertical-nav-link {
-    display: inline-block;
-    width: 100%;
-    margin-top: 5px;
-    padding-left: 12px;
-    color: var(--vertical-tabs-nav-link);
-    border-bottom: 1px solid transparent;
-    text-decoration: none;
-    font-size: 14px;
-    cursor: pointer;
-    border-radius: 2.5px 0 0 2.5px;
-
-    &.active {
-      color: var(--vertical-nav-active-item-color);
-      background: var(--vertical-nav-active-bg-color);
-      border-bottom: 1px solid transparent;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &:hover:not(.active) {
-      background: var(--vertical-nav-hover-bg-color);
-      color: var(--blue-950);
-      border-bottom: 1px solid #666;
-    }
-  }
-}
-</style>
+<template>
+  <nav class="sidenav vertical-groups-sidenav">
+    <ul class="sidenav-content">
+      <li
+        v-for="(item, key) in props.items"
+        :id="`${props.testId}-item-${key}`"
+        :data-id="item.testId"
+        :key="item.value"
+        :class="[
+          'vertical-nav-link group-nav-link',
+          { active: item.value === props.modelValue },
+          { disabled: item.disabled },
+        ]"
+        :title="item.title || item.text"
+        @click="selectItem(item)"
+      >
+        {{ item.text }}
+      </li>
+    </ul>
+  </nav>
+</template>
+<script setup lang="ts">
+import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number
+    items: UI_I_VerticalTabs[]
+    hasErrorMessages?: number | boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-vertical-tabs' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string): void
+  (event: 'set-alert'): void
+}>()
+
+const selectItem = ({
+  value,
+  disabled,
+}: {
+  value: string
+  disabled: boolean
+}): void => {
+  if (disabled) return
+  if (
+    props.hasErrorMessages === undefined ||
+    props.hasErrorMessages === 0 ||
+    props.hasErrorMessages === false
+  ) {
+    emits('update:model-value', value)
+    return
+  }
+  emits('set-alert')
+}
+</script>
+
+<style>
+:root {
+  --vertical-tabs-nav-link: --grey-100;
+  --vertical-tabs-bg-color: #fafafa;
+}
+:root.dark-theme {
+  --vertical-tabs-nav-link: #ffffff;
+  --vertical-tabs-bg-color: transparent;
+}
+</style>
+<style lang="scss" scoped>
+.vertical-groups-sidenav {
+  min-height: 94%;
+  background-color: var(--vertical-tabs-bg-color);
+
+  .vertical-nav-link {
+    display: inline-block;
+    width: 100%;
+    margin-top: 5px;
+    padding-left: 12px;
+    color: var(--vertical-tabs-nav-link);
+    border-bottom: 1px solid transparent;
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 2.5px 0 0 2.5px;
+
+    &.active {
+      color: var(--vertical-nav-active-item-color);
+      background: var(--vertical-nav-active-bg-color);
+      border-bottom: 1px solid transparent;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &:hover:not(.active) {
+      background: var(--vertical-nav-hover-bg-color);
+      color: var(--blue-950);
+      border-bottom: 1px solid #666;
+    }
+  }
+}
+</style>

package/components/common/accordion/Recursion.vue

@@ -1,221 +1,222 @@
-<template>
-  <div class="accordion" :class="{ disabled: props.accordion.disabled }">
-    <nuxt-link
-      class="accordion-item"
-      :to="accordionLocal.path"
-      :data-id="accordionLocal.testId"
-      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" :class="{ disabled: props.accordion.disabled }">
+    <nuxt-link
+      v-development="props.accordion.development"
+      class="accordion-item"
+      :to="accordionLocal.path"
+      :data-id="accordionLocal.testId"
+      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>

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

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