bfg-common 1.4.101 → 1.4.103

package/components/common/layout/theHeader/userMenu/userMenuNew/UserMenuNew.vue

@@ -1,156 +1,156 @@
-<template>
-  <div class="user-menu-content">
-    <ui-tooltip
-      id="tooltip-user-menu-dropdown-toggle"
-      test-id="tooltip-user-menu-dropdown-toggle"
-      size="sm"
-      position="bottom"
-      position-by-tooltip="center"
-    >
-      <template #target>
-        <div
-          id="tooltip-user-menu-dropdown-toggle"
-          class="popped tooltip inline-block"
-        >
-          <button
-            id="user-menu-dropdown-toggle"
-            data-id="user-menu-dropdown-toggle"
-            class="user-menu-dropdown-toggle"
-            @click="isShowDropdown = !isShowDropdown"
-          >
-            <span class="user-icon-container">
-              <ui-icon-icon3 name="user-icon" width="24" height="24" />
-            </span>
-            <span class="title">{{ props.hostname }}</span>
-            <span :class="['arrow-icon-container', { active: isShowDropdown }]">
-              <ui-icon name="arrow2" width="16" height="8" />
-            </span>
-          </button>
-        </div>
-      </template>
-      <template #content>
-        {{ localization.layout.myAccount }}
-      </template>
-    </ui-tooltip>
-  </div>
-  <ui-dropdown
-    test-id="user-menu-dropdown"
-    :show="isShowDropdown"
-    :items="dropdownItems"
-    width="max-content"
-    elem-id="user-menu-dropdown-toggle"
-    @select="onSelectDropdown"
-    @hide="onHideDropdown"
-  >
-    <template #row="{ item }">
-      <a
-        :id="item.testId"
-        :data-id="item.testId"
-        :class="['w-full flex items-center dropdown-item', item.iconName]"
-      >
-        <span v-if="item.iconName === 'lock'" class="flex ui-item-text">
-          <ui-icon-icon3 :name="item.iconName" width="18" height="18" />
-        </span>
-        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
-          <ui-icon :name="item.iconName" width="18" height="18" />
-        </span>
-        <span v-if="item.iconName === 'logout'" class="flex ui-item-text">
-          <ui-icon :name="item.iconName" width="18" height="18" />
-        </span>
-        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
-          {{ item.text }}
-        </p>
-      </a>
-    </template>
-  </ui-dropdown>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import { userMenuFunc } from '~/components/common/layout/theHeader/userMenu/userMenuNew/lib/config/dropMenu'
-
-const props = defineProps<{
-  hostname: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-dropdown', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowDropdown = ref<boolean>(false)
-
-const dropdownItems = computed<UI_I_Dropdown[]>(() =>
-  userMenuFunc(localization.value)
-)
-
-const onHideDropdown = (): void => {
-  isShowDropdown.value = false
-}
-
-const onSelectDropdown = (value: string): void => {
-  emits('select-dropdown', value)
-  onHideDropdown()
-}
-</script>
-
-<style lang="scss">
-.user-menu-content {
-  .user-menu-dropdown-toggle {
-    border: unset;
-    padding: 0;
-    outline: unset;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    grid-gap: 10px;
-    color: #d3d6da;
-
-    &:hover {
-      color: #ffffff;
-    }
-
-    .title {
-      font-size: 14px;
-      font-weight: 400;
-      font-family: 'Inter';
-    }
-
-    .arrow-icon-container {
-      display: flex;
-      transform: rotate(90deg);
-
-      &.active {
-        transform: rotate(270deg);
-      }
-    }
-  }
-}
-
-#ui-popup-window-user-menu-dropdown-toggle {
-  margin-top: 17px;
-}
-#dropdown-user-menu-dropdown {
-  .ui-dropdown-menu-item {
-    &:has(.logout) {
-      .ui-item-text {
-        color: #ea3223;
-      }
-    }
-
-    &:hover {
-      .dropdown-item:not(.logout) {
-        .ui-item-text {
-          color: var(--dropdown-item-hover-color);
-        }
-      }
-    }
-    .ui-item-text {
-      color: var(--dropdown-item-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="user-menu-content">
+    <ui-tooltip
+      id="tooltip-user-menu-dropdown-toggle"
+      test-id="tooltip-user-menu-dropdown-toggle"
+      size="sm"
+      position="bottom"
+      position-by-tooltip="center"
+    >
+      <template #target>
+        <div
+          id="tooltip-user-menu-dropdown-toggle"
+          class="popped tooltip inline-block"
+        >
+          <button
+            id="user-menu-dropdown-toggle"
+            data-id="user-menu-dropdown-toggle"
+            class="user-menu-dropdown-toggle"
+            @click="isShowDropdown = !isShowDropdown"
+          >
+            <span class="user-icon-container">
+              <ui-icon-icon3 name="user-icon" width="24" height="24" />
+            </span>
+            <span class="title">{{ props.hostname }}</span>
+            <span :class="['arrow-icon-container', { active: isShowDropdown }]">
+              <ui-icon name="arrow2" width="16" height="8" />
+            </span>
+          </button>
+        </div>
+      </template>
+      <template #content>
+        {{ localization.layout.myAccount }}
+      </template>
+    </ui-tooltip>
+  </div>
+  <ui-dropdown
+    test-id="user-menu-dropdown"
+    :show="isShowDropdown"
+    :items="dropdownItems"
+    width="max-content"
+    elem-id="user-menu-dropdown-toggle"
+    @select="onSelectDropdown"
+    @hide="onHideDropdown"
+  >
+    <template #row="{ item }">
+      <a
+        :id="item.testId"
+        :data-id="item.testId"
+        :class="['w-full flex items-center dropdown-item', item.iconName]"
+      >
+        <span v-if="item.iconName === 'lock'" class="flex ui-item-text">
+          <ui-icon-icon3 :name="item.iconName" width="18" height="18" />
+        </span>
+        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+        </span>
+        <span v-if="item.iconName === 'logout'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+        </span>
+        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
+          {{ item.text }}
+        </p>
+      </a>
+    </template>
+  </ui-dropdown>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { userMenuFunc } from '~/components/common/layout/theHeader/userMenu/userMenuNew/lib/config/dropMenu'
+
+const props = defineProps<{
+  hostname: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowDropdown = ref<boolean>(false)
+
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  userMenuFunc(localization.value)
+)
+
+const onHideDropdown = (): void => {
+  isShowDropdown.value = false
+}
+
+const onSelectDropdown = (value: string): void => {
+  emits('select-dropdown', value)
+  onHideDropdown()
+}
+</script>
+
+<style lang="scss">
+.user-menu-content {
+  .user-menu-dropdown-toggle {
+    border: unset;
+    padding: 0;
+    outline: unset;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    grid-gap: 10px;
+    color: #d3d6da;
+
+    &:hover {
+      color: #ffffff;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      font-family: 'Inter';
+    }
+
+    .arrow-icon-container {
+      display: flex;
+      transform: rotate(90deg);
+
+      &.active {
+        transform: rotate(270deg);
+      }
+    }
+  }
+}
+
+#ui-popup-window-user-menu-dropdown-toggle {
+  margin-top: 17px;
+}
+#dropdown-user-menu-dropdown {
+  .ui-dropdown-menu-item {
+    &:has(.logout) {
+      .ui-item-text {
+        color: #ea3223;
+      }
+    }
+
+    &:hover {
+      .dropdown-item:not(.logout) {
+        .ui-item-text {
+          color: var(--dropdown-item-hover-color);
+        }
+      }
+    }
+    .ui-item-text {
+      color: var(--dropdown-item-color);
+    }
+  }
+}
+</style>