bfg-common 1.0.32 → 1.0.34

package/components/atoms/tooltip/TooltipError.vue

@@ -1,113 +1,113 @@
-<template>
-  <div>
-    <div
-      :id="id"
-      class="flex element-content"
-      @mouseover="setPosition"
-      @mouseleave="show = false"
-    >
-      <slot name="elem" />
-    </div>
-
-    <Teleport to="body">
-      <div
-        v-show="show"
-        :class="[
-          'vx-error-tooltip right in tooltip',
-          { 'has-error': props.hasError },
-        ]"
-        :style="tooltipStyles"
-      >
-        <slot name="content" />
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
-const props = defineProps<{
-  hasError: boolean
-  selector?: string
-}>()
-const emits = defineEmits<{
-  (event: 'remove'): void
-}>()
-
-const tooltipStyles = ref<UI_I_ElPosition | null>(null)
-
-const id = `tooltip${useUniqueId()}`
-
-const show = ref<boolean>(false)
-const setPosition = (): void => {
-  const elem = (document.getElementById(id + '') as HTMLDivElement) || null
-  const { x, y, height, width } = elem.getBoundingClientRect()
-
-  tooltipStyles.value = {
-    top: `${y + height / 2}px`,
-    left: `${x + width}px`,
-  }
-  show.value = true
-}
-
-const remove = (): void => {
-  emits('remove')
-}
-
-watch(
-  () => props.hasError,
-  (value) => {
-    const selector = props.selector
-    if (!selector) return
-
-    setTimeout(() => {
-      const selectElement = document.querySelector(selector) as HTMLElement
-      if (!selectElement) return
-
-      if (!value) {
-        selectElement.style.borderColor = ''
-        selectElement.removeEventListener('blur', remove)
-        return
-      }
-      selectElement.addEventListener('blur', remove)
-      selectElement.style.borderColor = 'red'
-    }, 500)
-  },
-  { immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-.element-content {
-  width: max-content;
-}
-.vx-error-tooltip {
-  max-width: 300px;
-  padding: 4px 8px;
-  position: fixed;
-  background-color: #db2100;
-  color: #ffffff;
-  z-index: 1000000;
-  transform: translateY(-50%);
-  text-align: center;
-  font-size: 12px;
-  line-height: 14px;
-  opacity: 0;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: calc(50% - 6px);
-    left: -5px;
-    border-bottom: 6px solid transparent;
-    border-top: 6px solid transparent;
-    border-right: 5px solid #db2100;
-    opacity: 0;
-  }
-
-  &.has-error,
-  &.has-error:before {
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <div>
+    <div
+      :id="id"
+      class="flex element-content"
+      @mouseover="setPosition"
+      @mouseleave="show = false"
+    >
+      <slot name="elem" />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-show="show"
+        :class="[
+          'vx-error-tooltip right in tooltip',
+          { 'has-error': props.hasError },
+        ]"
+        :style="tooltipStyles"
+      >
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
+const props = defineProps<{
+  hasError: boolean
+  selector?: string
+}>()
+const emits = defineEmits<{
+  (event: 'remove'): void
+}>()
+
+const tooltipStyles = ref<UI_I_ElPosition | null>(null)
+
+const id = `tooltip${useUniqueId()}`
+
+const show = ref<boolean>(false)
+const setPosition = (): void => {
+  const elem = (document.getElementById(id + '') as HTMLDivElement) || null
+  const { x, y, height, width } = elem.getBoundingClientRect()
+
+  tooltipStyles.value = {
+    top: `${y + height / 2}px`,
+    left: `${x + width}px`,
+  }
+  show.value = true
+}
+
+const remove = (): void => {
+  emits('remove')
+}
+
+watch(
+  () => props.hasError,
+  (value) => {
+    const selector = props.selector
+    if (!selector) return
+
+    setTimeout(() => {
+      const selectElement = document.querySelector(selector) as HTMLElement
+      if (!selectElement) return
+
+      if (!value) {
+        selectElement.style.borderColor = ''
+        selectElement.removeEventListener('blur', remove)
+        return
+      }
+      selectElement.addEventListener('blur', remove)
+      selectElement.style.borderColor = 'red'
+    }, 500)
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.element-content {
+  width: max-content;
+}
+.vx-error-tooltip {
+  max-width: 300px;
+  padding: 4px 8px;
+  position: fixed;
+  background-color: #db2100;
+  color: #ffffff;
+  z-index: 1000000;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+  line-height: 14px;
+  opacity: 0;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 6px);
+    left: -5px;
+    border-bottom: 6px solid transparent;
+    border-top: 6px solid transparent;
+    border-right: 5px solid #db2100;
+    opacity: 0;
+  }
+
+  &.has-error,
+  &.has-error:before {
+    opacity: 1;
+  }
+}
+</style>

package/components/common/accordion/Accordion.vue

@@ -1,176 +1,176 @@
-<template>
-  <div
-    :class="['text-wrapper flex-align-center', { active: isActive }]"
-    @click="isActive = !isActive"
-  >
-    <template v-if="parentName">
-      <span class="parent-name text">{{ parentName }}</span>
-      <atoms-the-icon class="trigger-icon parent" name="angle" />
-    </template>
-    <template v-if="childName">
-      <span class="child-name text">{{ childName }}</span>
-      <atoms-the-icon class="trigger-icon child" name="angle" />
-    </template>
-  </div>
-  <div
-    v-on-click-outside="closeDropMenuMobile"
-    :class="['accordion-dropdown-block', { active: isActive }]"
-  >
-    <common-accordion-recursion
-      v-for="(item, key) in accordionLocal"
-      :id="`${props.testId}-${key}`"
-      :test-id="`${props.testId}-${key}`"
-      :key="item.id"
-      :accordion="item"
-      @change="onSelect"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
-import { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
-
-const props = defineProps<{
-  testId: string
-  accordion: UI_I_AccordionRecursion[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'change', value: UI_I_AccordionRecursion): void
-}>()
-
-const parentName = ref<string>('')
-const childName = ref<string>('')
-const accordionLocal = computed<UI_I_AccordionRecursion[]>(
-  () => props.accordion
-)
-
-const closeDropMenuMobile = (): void => {
-  isActive.value = false
-}
-
-const route = useRoute()
-
-watch(
-  [route, accordionLocal],
-  () => {
-    if (!accordionLocal.value.length) return
-
-    const routePath = route.path
-    accordionLocal.value.forEach((item) => {
-      if (item?.path === routePath) {
-        childName.value = item.name
-      } else if (item.children) {
-        item.children.forEach((child) => {
-          if (child?.path === routePath) {
-            parentName.value = item.name
-            childName.value = child.name
-          }
-        })
-      }
-    })
-  },
-  { immediate: true }
-)
-
-const isActive = ref<boolean>(false)
-
-const onSelect = (item: UI_I_AccordionRecursion): void => {
-  if (item.children) return
-
-  emits('change', item)
-  isActive.value = false
-  childName.value = item.name
-
-  accordionLocal.value.forEach((accordion) => {
-    if (accordion.children) {
-      accordion.children.forEach((child) => {
-        if (child.name === item.name) parentName.value = accordion.name
-      })
-    }
-  })
-}
-</script>
-
-<style lang="scss">
-.text-wrapper {
-  border-bottom: 1px solid black;
-  width: max-content;
-  cursor: pointer;
-  margin: 10px 0;
-  padding: 0 0.6rem 0 0;
-  display: none;
-
-  .text {
-    font-size: 13px;
-
-    &.parent-name {
-      font-weight: 700;
-      margin-right: 7px;
-    }
-  }
-
-  .trigger-icon {
-    fill: var(--triger-icon-color);
-    width: 13px;
-
-    &.parent {
-      transform: rotate(90deg);
-      margin-right: 7px;
-    }
-    &.child {
-      margin-left: 15px;
-      transform: rotate(180deg);
-    }
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  .accordion-parent {
-    flex-direction: column;
-
-    .accordion-view.sidenav {
-      overflow-y: unset !important;
-    }
-
-    .sidenav {
-      width: auto;
-      max-width: unset;
-    }
-    .content-area {
-      padding: 0;
-    }
-  }
-  .text-wrapper {
-    display: flex;
-
-    &.active {
-      border-bottom: 1px solid #0079b8;
-    }
-  }
-  .accordion-dropdown-block {
-    display: none;
-
-    &.active {
-      display: unset;
-      padding: 12px 0;
-      position: absolute;
-      background-color: var(--global-bg-color);
-      left: 0;
-      right: 0;
-      top: 0;
-      min-width: 96px;
-      max-width: 288px;
-      border: 1px solid (var(--global-border-color));
-      z-index: 10001;
-      overflow-y: auto;
-      inset: 0 auto auto 0;
-      max-height: calc(((((100% - 86px) - 12px) - 12px) - 1px) - 1px);
-      transform: translateX(10px) translateY(111px);
-      border-radius: 0.15rem;
-      box-shadow: 0 1px 0.125rem rgba(115, 115, 115, 0.25);
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="['text-wrapper flex-align-center', { active: isActive }]"
+    @click="isActive = !isActive"
+  >
+    <template v-if="parentName">
+      <span class="parent-name text">{{ parentName }}</span>
+      <atoms-the-icon class="trigger-icon parent" name="angle" />
+    </template>
+    <template v-if="childName">
+      <span class="child-name text">{{ childName }}</span>
+      <atoms-the-icon class="trigger-icon child" name="angle" />
+    </template>
+  </div>
+  <div
+    v-on-click-outside="closeDropMenuMobile"
+    :class="['accordion-dropdown-block', { active: isActive }]"
+  >
+    <common-accordion-recursion
+      v-for="(item, key) in accordionLocal"
+      :id="`${props.testId}-${key}`"
+      :test-id="`${props.testId}-${key}`"
+      :key="item.id"
+      :accordion="item"
+      @change="onSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { UI_I_AccordionRecursion } from '~/components/common/accordion/models/interfaces'
+
+const props = defineProps<{
+  testId: string
+  accordion: UI_I_AccordionRecursion[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'change', value: UI_I_AccordionRecursion): void
+}>()
+
+const parentName = ref<string>('')
+const childName = ref<string>('')
+const accordionLocal = computed<UI_I_AccordionRecursion[]>(
+  () => props.accordion
+)
+
+const closeDropMenuMobile = (): void => {
+  isActive.value = false
+}
+
+const route = useRoute()
+
+watch(
+  [route, accordionLocal],
+  () => {
+    if (!accordionLocal.value.length) return
+
+    const routePath = route.path
+    accordionLocal.value.forEach((item) => {
+      if (item?.path === routePath) {
+        childName.value = item.name
+      } else if (item.children) {
+        item.children.forEach((child) => {
+          if (child?.path === routePath) {
+            parentName.value = item.name
+            childName.value = child.name
+          }
+        })
+      }
+    })
+  },
+  { immediate: true }
+)
+
+const isActive = ref<boolean>(false)
+
+const onSelect = (item: UI_I_AccordionRecursion): void => {
+  if (item.children) return
+
+  emits('change', item)
+  isActive.value = false
+  childName.value = item.name
+
+  accordionLocal.value.forEach((accordion) => {
+    if (accordion.children) {
+      accordion.children.forEach((child) => {
+        if (child.name === item.name) parentName.value = accordion.name
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.text-wrapper {
+  border-bottom: 1px solid black;
+  width: max-content;
+  cursor: pointer;
+  margin: 10px 0;
+  padding: 0 0.6rem 0 0;
+  display: none;
+
+  .text {
+    font-size: 13px;
+
+    &.parent-name {
+      font-weight: 700;
+      margin-right: 7px;
+    }
+  }
+
+  .trigger-icon {
+    fill: var(--triger-icon-color);
+    width: 13px;
+
+    &.parent {
+      transform: rotate(90deg);
+      margin-right: 7px;
+    }
+    &.child {
+      margin-left: 15px;
+      transform: rotate(180deg);
+    }
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .accordion-parent {
+    flex-direction: column;
+
+    .accordion-view.sidenav {
+      overflow-y: unset !important;
+    }
+
+    .sidenav {
+      width: auto;
+      max-width: unset;
+    }
+    .content-area {
+      padding: 0;
+    }
+  }
+  .text-wrapper {
+    display: flex;
+
+    &.active {
+      border-bottom: 1px solid #0079b8;
+    }
+  }
+  .accordion-dropdown-block {
+    display: none;
+
+    &.active {
+      display: unset;
+      padding: 12px 0;
+      position: absolute;
+      background-color: var(--global-bg-color);
+      left: 0;
+      right: 0;
+      top: 0;
+      min-width: 96px;
+      max-width: 288px;
+      border: 1px solid (var(--global-border-color));
+      z-index: 10001;
+      overflow-y: auto;
+      inset: 0 auto auto 0;
+      max-height: calc(((((100% - 86px) - 12px) - 12px) - 1px) - 1px);
+      transform: translateX(10px) translateY(111px);
+      border-radius: 0.15rem;
+      box-shadow: 0 1px 0.125rem rgba(115, 115, 115, 0.25);
+    }
+  }
+}
+</style>