bfg-common 1.4.882 → 1.4.883

package/components/common/select/input/lib/models/interfaces.ts

@@ -1,6 +1,6 @@
-export interface UI_I_SelectInputItem {
-  label: string
-  value: string | number
-  disabled?: boolean
-  testId?: string
-}
+export interface UI_I_SelectInputItem {
+  label: string
+  value: string | number
+  disabled?: boolean
+  testId?: string
+}

package/components/common/select/radio/RadioGroup.vue

@@ -1,128 +1,128 @@
-<template>
-  <div class="select-option">
-    <div
-      v-for="radio in options"
-      :key="radio.value"
-      class="select-option__inner radio"
-      :class="radio.disabled && 'disabled'"
-    >
-      <div :class="['select-option__container', radio.value]">
-        <div class="select-option__wrapper">
-          <input
-            :id="radio.label"
-            v-model="selectedType"
-            :data-id="radio.testId"
-            type="radio"
-            :value="radio.value"
-            :disabled="radio.disabled"
-          />
-          <label :for="radio.label">{{ radio.label }}</label>
-
-          <div
-            v-if="'isTooltip' in radio"
-            :id="`${radio.value}-select-tooltip-icon`"
-            class="signpost-container relative"
-          >
-            <atoms-the-icon
-              :data-id="`${radio.testId}-tooltip-toggle-icon`"
-              fill="#0072a3"
-              width="24px"
-              height="24px"
-              name="info-circle"
-              @click="radio.isTooltip = !radio.isTooltip"
-            />
-            <atoms-tooltip-signpost
-              v-if="radio.isTooltip"
-              :elem-id="`${radio.value}-select-tooltip-icon`"
-              :test-id="radio.testId"
-              @hide="radio.isTooltip = false"
-            >
-              <div class="tooltip-content-container">
-                <p>{{ radio.tooltipContent }}</p>
-              </div>
-            </atoms-tooltip-signpost>
-          </div>
-        </div>
-
-        <slot
-          v-if="$slots.beforeDescription"
-          name="beforeDescription"
-          :data="radio"
-        ></slot>
-      </div>
-
-      <div v-if="radio.description" class="select-option__description">
-        {{ radio.description }}
-      </div>
-
-      <slot
-        v-if="$slots.afterDescription"
-        name="afterDescription"
-        :data="radio"
-      ></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-
-const props = defineProps<{
-  modelValue: string | number
-  options: UI_I_RadioOption[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:model-value', value: string | number): void
-}>()
-
-const options = computed<UI_I_RadioOption[]>(() => props.options)
-
-const selectedType = computed<string | number>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.select-option {
-  &__container {
-    @include flex($dir: column);
-  }
-  &__wrapper {
-    @include flex($align: center);
-    gap: 10px;
-    .signpost-container {
-      display: flex;
-      cursor: pointer;
-      .tooltip-content-container {
-        max-width: 350px;
-      }
-    }
-  }
-  &__subtitle {
-  }
-  &__description {
-    margin-left: 22px;
-  }
-}
-.radio {
-  margin-bottom: 5px;
-  //&:nth-child(2) {
-    //margin-top: 10px; // ?
-  //}
-  &.disabled {
-    opacity: 0.7;
-  }
-}
-.radio {
-}
-input[type='radio']:focus:checked + label::before,
-input[type='radio']:focus + label::before {
-  box-shadow: inset 0 0 0 0.25rem #0094d2;
-}
-</style>
+<template>
+  <div class="select-option">
+    <div
+      v-for="radio in options"
+      :key="radio.value"
+      class="select-option__inner radio"
+      :class="radio.disabled && 'disabled'"
+    >
+      <div :class="['select-option__container', radio.value]">
+        <div class="select-option__wrapper">
+          <input
+            :id="radio.label"
+            v-model="selectedType"
+            :data-id="radio.testId"
+            type="radio"
+            :value="radio.value"
+            :disabled="radio.disabled"
+          />
+          <label :for="radio.label">{{ radio.label }}</label>
+
+          <div
+            v-if="'isTooltip' in radio"
+            :id="`${radio.value}-select-tooltip-icon`"
+            class="signpost-container relative"
+          >
+            <atoms-the-icon
+              :data-id="`${radio.testId}-tooltip-toggle-icon`"
+              fill="#0072a3"
+              width="24px"
+              height="24px"
+              name="info-circle"
+              @click="radio.isTooltip = !radio.isTooltip"
+            />
+            <atoms-tooltip-signpost
+              v-if="radio.isTooltip"
+              :elem-id="`${radio.value}-select-tooltip-icon`"
+              :test-id="radio.testId"
+              @hide="radio.isTooltip = false"
+            >
+              <div class="tooltip-content-container">
+                <p>{{ radio.tooltipContent }}</p>
+              </div>
+            </atoms-tooltip-signpost>
+          </div>
+        </div>
+
+        <slot
+          v-if="$slots.beforeDescription"
+          name="beforeDescription"
+          :data="radio"
+        ></slot>
+      </div>
+
+      <div v-if="radio.description" class="select-option__description">
+        {{ radio.description }}
+      </div>
+
+      <slot
+        v-if="$slots.afterDescription"
+        name="afterDescription"
+        :data="radio"
+      ></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+const props = defineProps<{
+  modelValue: string | number
+  options: UI_I_RadioOption[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:model-value', value: string | number): void
+}>()
+
+const options = computed<UI_I_RadioOption[]>(() => props.options)
+
+const selectedType = computed<string | number>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.select-option {
+  &__container {
+    @include flex($dir: column);
+  }
+  &__wrapper {
+    @include flex($align: center);
+    gap: 10px;
+    .signpost-container {
+      display: flex;
+      cursor: pointer;
+      .tooltip-content-container {
+        max-width: 350px;
+      }
+    }
+  }
+  &__subtitle {
+  }
+  &__description {
+    margin-left: 22px;
+  }
+}
+.radio {
+  margin-bottom: 5px;
+  //&:nth-child(2) {
+    //margin-top: 10px; // ?
+  //}
+  &.disabled {
+    opacity: 0.7;
+  }
+}
+.radio {
+}
+input[type='radio']:focus:checked + label::before,
+input[type='radio']:focus + label::before {
+  box-shadow: inset 0 0 0 0.25rem #0094d2;
+}
+</style>

package/components/common/select/radio/lib/models/interfaces.ts

@@ -1,9 +1,9 @@
-export interface UI_I_RadioOption {
-  label: string
-  value: string | number
-  disabled?: boolean
-  isTooltip?: boolean
-  description?: string
-  tooltipContent?: string
-  testId?: string
-}
+export interface UI_I_RadioOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+  isTooltip?: boolean
+  description?: string
+  tooltipContent?: string
+  testId?: string
+}

package/components/common/selectLanguage/SelectLanguage.vue

@@ -1,134 +1,134 @@
-<template>
-  <div :class="['language-dropdown', props.size]">
-    <ui-select
-        v-model="selectedLang"
-        test-id="select-language"
-        :items="itemsLocal"
-        :width="props.size === 'md' ? '114px' : '97px'"
-        arrow-stroke-width="2.4"
-        :disabled="props.disabled"
-        :size="props.size"
-        max-height="inherit"
-    >
-      <template #toggleContent>
-        <span class="language-dropdown__icon content-icon"
-        ><ui-icon-icon2
-            :name="selectedLang?.iconName"
-            :height="props.size === 'md' ? '16' : '13'"
-            :width="props.size === 'md' ? '24' : '19'"
-        ></ui-icon-icon2
-        ></span>
-        {{ selectedLang?.text }}
-      </template>
-      <template #row="{ item }">
-        <span class="language-dropdown__icon dropdown-icon">
-          <ui-icon-icon2
-              :name="item.iconName"
-              :height="props.size === 'md' ? '16' : '13'"
-              :width="props.size === 'md' ? '24' : '19'"
-          ></ui-icon-icon2>
-        </span>
-        <span class="ui-item-text">{{ item.text }}</span>
-      </template>
-    </ui-select>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
-
-const props = withDefaults(
-    defineProps<{
-      normalizeLang: UI_I_Dropdown[]
-      modelValue: UI_I_Dropdown
-      disabled?: boolean
-      width?: string
-      size?: 'sm' | 'md'
-    }>(),
-    {
-      disabled: false,
-      width: '114px',
-      size: 'md',
-    }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', newValue: UI_I_Dropdown): void
-}>()
-
-const selectedLang = computed<UI_I_Dropdown>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue: UI_I_Dropdown) {
-    emits('update:model-value', newValue)
-  },
-})
-
-const itemsLocal = computed(() => {
-  return props.normalizeLang.filter(lang => !lang.disabled)
-})
-</script>
-
-<style lang="scss" scoped>
-.language-dropdown {
-  &.sm {
-    .language-dropdown__icon {
-      margin-right: 8px;
-      &.content-icon {
-        margin-right: 6px;
-      }
-    }
-
-    font-size: 12px;
-    line-height: 14.52px;
-    font-weight: 500;
-  }
-
-  &.md {
-    .language-dropdown__icon {
-      margin-right: 8px;
-      &.content-icon {
-        margin-right: 8px;
-      }
-    }
-
-    font-size: 14px;
-    line-height: 16.94px;
-    font-weight: 500;
-  }
-
-  :deep(.ui-dropdown-menu-item) {
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-
-    &:not(:last-child) {
-      margin-bottom: 8px;
-    }
-    &:not(.disabled):not(.selected):hover {
-      background-color: var(--dropdown-item-hover-bg-color);
-
-      .ui-item-text {
-        color: var(--dropdown-item-hover-color);
-      }
-    }
-
-    & .ui-item-text {
-      color: var(--dropdown-item-color);
-      font-weight: 500;
-    }
-
-    &.selected {
-      .ui-item-text {
-        color: var(--dropdown-item-selected-color);
-      }
-    }
-  }
-
-  &__icon {
-    display: flex;
-  }
-}
-</style>
+<template>
+  <div :class="['language-dropdown', props.size]">
+    <ui-select
+        v-model="selectedLang"
+        test-id="select-language"
+        :items="itemsLocal"
+        :width="props.size === 'md' ? '114px' : '97px'"
+        arrow-stroke-width="2.4"
+        :disabled="props.disabled"
+        :size="props.size"
+        max-height="inherit"
+    >
+      <template #toggleContent>
+        <span class="language-dropdown__icon content-icon"
+        ><ui-icon-icon2
+            :name="selectedLang?.iconName"
+            :height="props.size === 'md' ? '16' : '13'"
+            :width="props.size === 'md' ? '24' : '19'"
+        ></ui-icon-icon2
+        ></span>
+        {{ selectedLang?.text }}
+      </template>
+      <template #row="{ item }">
+        <span class="language-dropdown__icon dropdown-icon">
+          <ui-icon-icon2
+              :name="item.iconName"
+              :height="props.size === 'md' ? '16' : '13'"
+              :width="props.size === 'md' ? '24' : '19'"
+          ></ui-icon-icon2>
+        </span>
+        <span class="ui-item-text">{{ item.text }}</span>
+      </template>
+    </ui-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
+
+const props = withDefaults(
+    defineProps<{
+      normalizeLang: UI_I_Dropdown[]
+      modelValue: UI_I_Dropdown
+      disabled?: boolean
+      width?: string
+      size?: 'sm' | 'md'
+    }>(),
+    {
+      disabled: false,
+      width: '114px',
+      size: 'md',
+    }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', newValue: UI_I_Dropdown): void
+}>()
+
+const selectedLang = computed<UI_I_Dropdown>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: UI_I_Dropdown) {
+    emits('update:model-value', newValue)
+  },
+})
+
+const itemsLocal = computed(() => {
+  return props.normalizeLang.filter(lang => !lang.disabled)
+})
+</script>
+
+<style lang="scss" scoped>
+.language-dropdown {
+  &.sm {
+    .language-dropdown__icon {
+      margin-right: 8px;
+      &.content-icon {
+        margin-right: 6px;
+      }
+    }
+
+    font-size: 12px;
+    line-height: 14.52px;
+    font-weight: 500;
+  }
+
+  &.md {
+    .language-dropdown__icon {
+      margin-right: 8px;
+      &.content-icon {
+        margin-right: 8px;
+      }
+    }
+
+    font-size: 14px;
+    line-height: 16.94px;
+    font-weight: 500;
+  }
+
+  :deep(.ui-dropdown-menu-item) {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+    &:not(.disabled):not(.selected):hover {
+      background-color: var(--dropdown-item-hover-bg-color);
+
+      .ui-item-text {
+        color: var(--dropdown-item-hover-color);
+      }
+    }
+
+    & .ui-item-text {
+      color: var(--dropdown-item-color);
+      font-weight: 500;
+    }
+
+    &.selected {
+      .ui-item-text {
+        color: var(--dropdown-item-selected-color);
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+  }
+}
+</style>

package/components/common/selectLanguage/lib/config/config.ts

@@ -1,40 +1,40 @@
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-
-export const locales: UI_I_Dropdown[] = [
-  {
-    text: 'AR',
-    value: 'ar_SA',
-    iconName: 'ar-flag',
-    disabled: true
-  },
-  {
-    text: 'RU',
-    value: 'ru_RU',
-    iconName: 'ru-flag',
-  },
-  {
-    text: 'AM',
-    value: 'hy_AM',
-    iconName: 'am-flag',
-  },
-  {
-    text: 'BY',
-    value: 'be_BY',
-    iconName: 'be-flag',
-  },
-  {
-    text: 'KZ',
-    value: 'kk_KZ',
-    iconName: 'kk-flag',
-  },
-  {
-    text: 'CN',
-    value: 'zh_CHS',
-    iconName: 'zh-flag',
-  },
-  {
-    text: 'EN',
-    value: 'en_US',
-    iconName: 'en-flag',
-  },
-]
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+export const locales: UI_I_Dropdown[] = [
+  {
+    text: 'AR',
+    value: 'ar_SA',
+    iconName: 'ar-flag',
+    disabled: true
+  },
+  {
+    text: 'RU',
+    value: 'ru_RU',
+    iconName: 'ru-flag',
+  },
+  {
+    text: 'AM',
+    value: 'hy_AM',
+    iconName: 'am-flag',
+  },
+  {
+    text: 'BY',
+    value: 'be_BY',
+    iconName: 'be-flag',
+  },
+  {
+    text: 'KZ',
+    value: 'kk_KZ',
+    iconName: 'kk-flag',
+  },
+  {
+    text: 'CN',
+    value: 'zh_CHS',
+    iconName: 'zh-flag',
+  },
+  {
+    text: 'EN',
+    value: 'en_US',
+    iconName: 'en-flag',
+  },
+]

package/components/common/selectLanguage/lib/utils/utils.ts

@@ -1,5 +1,5 @@
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import { locales } from '~/components/common/selectLanguage/lib/config/config'
-
-export const findInLocals = (find: string): UI_I_Dropdown =>
-  locales.find((lang: UI_I_Dropdown) => lang.value === find) || locales[0]
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { locales } from '~/components/common/selectLanguage/lib/config/config'
+
+export const findInLocals = (find: string): UI_I_Dropdown =>
+  locales.find((lang: UI_I_Dropdown) => lang.value === find) || locales[0]