bfg-common 1.0.76 → 1.0.78

package/components/atoms/tabs/VerticalTabs.vue

@@ -1,81 +1,81 @@
-<template>
-  <nav class="sidenav vertical-groups-sidenav">
-    <ul class="sidenav-content">
-      <li
-        v-for="(item, key) in props.items"
-        :id="`${props.testId}-item-${key}`"
-        :key="item.value"
-        :class="[
-          'vertical-nav-link group-nav-link',
-          { active: item.value === props.modelValue },
-        ]"
-        :title="item.text"
-        @click="selectItem(item.value)"
-      >
-        {{ item.text }}
-      </li>
-    </ul>
-  </nav>
-</template>
-<script setup lang="ts">
-import { UI_I_VerticalTabs } from '~/components/atoms/tabs/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: string): void => {
-  if (
-    props.hasErrorMessages === undefined ||
-    props.hasErrorMessages === 0 ||
-    props.hasErrorMessages === false
-  ) {
-    emits('update:model-value', value)
-    return
-  }
-  emits('set-alert')
-}
-</script>
-
-<style lang="scss" scoped>
-.vertical-groups-sidenav {
-  min-height: 94%;
-  background-color: #fafafa;
-
-  .vertical-nav-link {
-    display: inline-block;
-    width: 100%;
-    margin-top: 5px;
-    padding-left: 12px;
-    color: var(--grey-100);
-    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;
-    }
-
-    &: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}`"
+        :key="item.value"
+        :class="[
+          'vertical-nav-link group-nav-link',
+          { active: item.value === props.modelValue },
+        ]"
+        :title="item.text"
+        @click="selectItem(item.value)"
+      >
+        {{ item.text }}
+      </li>
+    </ul>
+  </nav>
+</template>
+<script setup lang="ts">
+import { UI_I_VerticalTabs } from '~/components/atoms/tabs/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: string): void => {
+  if (
+    props.hasErrorMessages === undefined ||
+    props.hasErrorMessages === 0 ||
+    props.hasErrorMessages === false
+  ) {
+    emits('update:model-value', value)
+    return
+  }
+  emits('set-alert')
+}
+</script>
+
+<style lang="scss" scoped>
+.vertical-groups-sidenav {
+  min-height: 94%;
+  background-color: #fafafa;
+
+  .vertical-nav-link {
+    display: inline-block;
+    width: 100%;
+    margin-top: 5px;
+    padding-left: 12px;
+    color: var(--grey-100);
+    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;
+    }
+
+    &:hover:not(.active) {
+      background: var(--vertical-nav-hover-bg-color);
+      color: var(--blue-950);
+      border-bottom: 1px solid #666;
+    }
+  }
+}
+</style>

package/components/atoms/tabs/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_VerticalTabs {
-    text: string
-    value: string | number
-}
+export interface UI_I_VerticalTabs {
+    text: string
+    value: string | number
+}

package/components/atoms/tabs/models/types.ts

@@ -1 +1 @@
-export type UI_T_ButtonSize = 'large' | 'medium' | 'small'
+export type UI_T_ButtonSize = 'large' | 'medium' | 'small'

package/components/atoms/tooltip/Models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_ElPosition {
-  top: string
-  left: string
-}
+export interface UI_I_ElPosition {
+  top: string
+  left: string
+}

package/components/atoms/tooltip/Text.vue

@@ -1,39 +1,39 @@
-<template>
-  <span
-    :class="['icon-info-standart']"
-    @mouseover="hoverClass = true"
-    @mouseleave="hoverClass = false"
-  />
-  <span v-show="hoverClass" class="tooltip">
-    <span class="tooltiptext">
-      {{ props.text }}
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  text: string
-}>()
-
-const hoverClass = ref<boolean>(false)
-
-</script>
-<style lang="scss">
-
-.tooltip {
-    position: relative;
-    display: inline-block;
-
-    & .tooltiptext {
-        text-align: center;
-        padding: 5px 2px;
-        border-radius: 2px;
-        border: 1px solid var(--global-font-color);
-        color: var(--global-font-color);
-        background-color: var(--global-bg-color);
-        position: absolute;
-        z-index: 1;
-    }
-}
-</style>
+<template>
+  <span
+    :class="['icon-info-standart']"
+    @mouseover="hoverClass = true"
+    @mouseleave="hoverClass = false"
+  />
+  <span v-show="hoverClass" class="tooltip">
+    <span class="tooltiptext">
+      {{ props.text }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+}>()
+
+const hoverClass = ref<boolean>(false)
+
+</script>
+<style lang="scss">
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+
+    & .tooltiptext {
+        text-align: center;
+        padding: 5px 2px;
+        border-radius: 2px;
+        border: 1px solid var(--global-font-color);
+        color: var(--global-font-color);
+        background-color: var(--global-bg-color);
+        position: absolute;
+        z-index: 1;
+    }
+}
+</style>

package/components/atoms/tooltip/Tooltip.vue

@@ -1,57 +1,57 @@
-<template>
-  <div>
-    <div
-      :id="id"
-      class="flex"
-      @mouseover="setPosition"
-      @mouseleave="show = false"
-    >
-      <slot name="elem" />
-    </div>
-
-    <Teleport to="body">
-      <div
-        v-show="show"
-        class="tooltip-top-right tooltip-content"
-        :style="tooltipStyles"
-      >
-        <slot name="content" />
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
-
-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}px`,
-    left: `${x + width / 2}px`,
-  }
-  show.value = true
-}
-</script>
-
-<style lang="scss" scoped>
-.tooltip-top-right {
-  min-width: 200px;
-  padding: 9px 14px;
-  position: fixed;
-  z-index: 1000000;
-}
-.tooltip-content::before {
-  border-left: 0.25rem solid transparent;
-  border-top: 0.208333rem solid transparent;
-  border-right: 0.25rem solid transparent;
-  border-bottom: 0.208333rem solid transparent;
-}
-</style>
+<template>
+  <div>
+    <div
+      :id="id"
+      class="flex"
+      @mouseover="setPosition"
+      @mouseleave="show = false"
+    >
+      <slot name="elem" />
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-show="show"
+        class="tooltip-top-right tooltip-content"
+        :style="tooltipStyles"
+      >
+        <slot name="content" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ElPosition } from '~/components/atoms/tooltip/Models/interfaces'
+
+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}px`,
+    left: `${x + width / 2}px`,
+  }
+  show.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip-top-right {
+  min-width: 200px;
+  padding: 9px 14px;
+  position: fixed;
+  z-index: 1000000;
+}
+.tooltip-content::before {
+  border-left: 0.25rem solid transparent;
+  border-top: 0.208333rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-bottom: 0.208333rem solid transparent;
+}
+</style>

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>