bfg-common 1.5.413 → 1.5.415

package/components/common/layout/theHeader/helpMenu/helpMenuNew/HelpMenuNew.vue

@@ -1,195 +1,195 @@
-<template>
-  <div class="help-menu-content">
-    <ui-tooltip
-      id="tooltip-help-menu-dropdown-toggle"
-      test-id="tooltip-help-menu-dropdown-toggle"
-      size="sm"
-      position="bottom"
-      position-by-tooltip="center"
-    >
-      <template #target>
-        <div
-          id="tooltip-help-menu-dropdown-toggle"
-          class="popped tooltip inline-block"
-        >
-          <button
-            id="help-menu-dropdown-toggle"
-            data-id="help-menu-dropdown-toggle"
-            class="help-menu-dropdown-toggle"
-            @click="isShowDropdown = !isShowDropdown"
-          >
-            <span class="help-icon-container">
-              <ui-icon-main-navigation-panel
-                name="icon-help-2"
-                width="24"
-                height="24"
-              />
-            </span>
-            <span :class="['arrow-icon-container', { active: isShowDropdown }]">
-              <ui-icon name="arrow2" width="16" height="8" />
-            </span>
-          </button>
-        </div>
-      </template>
-      <template #content>
-        <span class="header-tooltip-text">{{
-          localization.mainNavigation.help
-        }}</span>
-      </template>
-    </ui-tooltip>
-  </div>
-  <ui-dropdown
-    test-id="help-menu-dropdown"
-    :show="isShowDropdown"
-    :items="dropdownItems"
-    width="max-content"
-    elem-id="help-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"
-      >
-        <span v-if="item.iconName === 'icon-help'" class="flex ui-item-text">
-          <ui-icon-main-navigation-panel
-            :name="item.iconName"
-            width="16"
-            height="16"
-          />
-        </span>
-        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
-          <ui-icon :name="item.iconName" width="16" height="16" />
-        </span>
-        <span v-if="item.iconName === 'comment'" class="flex ui-item-text">
-          <ui-icon :name="item.iconName" width="16" height="16" />
-        </span>
-        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
-          {{ item.text }}
-        </p>
-      </a>
-    </template>
-  </ui-dropdown>
-
-  <common-layout-the-header-feedback
-    :is-show-feedback="isShowFeedback"
-    @show="isShowFeedback = true"
-    @hide="isShowFeedback = false"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu'
-
-const emits = defineEmits<{
-  (event: 'select-dropdown', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowFeedback = ref<boolean>(false)
-
-const isShowDropdown = ref<boolean>(false)
-const dropdownItems = computed<UI_I_Dropdown[]>(() =>
-  helpMenuFunc(localization.value)
-)
-
-const onHideDropdown = (): void => {
-  isShowDropdown.value = false
-}
-
-const onSelectDropdown = (value: string): void => {
-  switch (value) {
-    case 'sendFeedback':
-      isShowFeedback.value = true
-      break
-    default:
-      emits('select-dropdown', value)
-  }
-  onHideDropdown()
-}
-
-const hideTooltip = (): void => {
-  const hoverElement = document.querySelector(
-    '#tooltip-help-menu-dropdown-toggle-main .tooltip-container-hover'
-  )
-
-  if (!hoverElement) return
-
-  hoverElement.classList.remove('isShow')
-}
-
-watch(isShowDropdown, (newValue) => {
-  newValue && hideTooltip()
-})
-</script>
-
-<style scoped lang="scss">
-.help-menu-content {
-  .header-tooltip-text {
-    font-size: 12px;
-    font-weight: 500;
-  }
-  .help-menu-dropdown-toggle {
-    border: unset;
-    padding: 0;
-    outline: unset;
-    background: transparent;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      .help-icon-container {
-        :deep(svg) {
-          color: #ffffff;
-        }
-      }
-      .arrow-icon-container {
-        color: #ffffff;
-      }
-    }
-
-    .help-icon-container {
-      display: flex;
-      margin-right: 10px;
-
-      :deep(svg) {
-        color: #d3d6da;
-      }
-    }
-    .arrow-icon-container {
-      display: flex;
-      transform: rotate(90deg);
-      color: #d3d6da;
-
-      &.active {
-        transform: rotate(270deg);
-      }
-    }
-  }
-
-  :deep(span.nav-icon) {
-    padding: 0 !important;
-  }
-}
-#ui-popup-window-help-menu-dropdown-toggle {
-  margin-top: 17px;
-}
-#dropdown-help-menu-dropdown {
-  .ui-dropdown-menu-item {
-    &:hover {
-      .ui-item-text {
-        color: var(--dropdown-item-hover-color);
-      }
-    }
-    .ui-item-text {
-      color: var(--dropdown-item-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="help-menu-content">
+    <ui-tooltip
+      id="tooltip-help-menu-dropdown-toggle"
+      test-id="tooltip-help-menu-dropdown-toggle"
+      size="sm"
+      position="bottom"
+      position-by-tooltip="center"
+    >
+      <template #target>
+        <div
+          id="tooltip-help-menu-dropdown-toggle"
+          class="popped tooltip inline-block"
+        >
+          <button
+            id="help-menu-dropdown-toggle"
+            data-id="help-menu-dropdown-toggle"
+            class="help-menu-dropdown-toggle"
+            @click="isShowDropdown = !isShowDropdown"
+          >
+            <span class="help-icon-container">
+              <ui-icon-main-navigation-panel
+                name="icon-help-2"
+                width="24"
+                height="24"
+              />
+            </span>
+            <span :class="['arrow-icon-container', { active: isShowDropdown }]">
+              <ui-icon name="arrow2" width="16" height="8" />
+            </span>
+          </button>
+        </div>
+      </template>
+      <template #content>
+        <span class="header-tooltip-text">{{
+          localization.mainNavigation.help
+        }}</span>
+      </template>
+    </ui-tooltip>
+  </div>
+  <ui-dropdown
+    :show="isShowDropdown"
+    :items="dropdownItems"
+    test-id="help-menu-dropdown"
+    width="max-content"
+    elem-id="help-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"
+      >
+        <span v-if="item.iconName === 'icon-help'" class="flex ui-item-text">
+          <ui-icon-main-navigation-panel
+            :name="item.iconName"
+            width="16"
+            height="16"
+          />
+        </span>
+        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="16" height="16" />
+        </span>
+        <span v-if="item.iconName === 'comment'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="16" height="16" />
+        </span>
+        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
+          {{ item.text }}
+        </p>
+      </a>
+    </template>
+  </ui-dropdown>
+
+  <common-layout-the-header-feedback
+    :is-show-feedback="isShowFeedback"
+    @show="isShowFeedback = true"
+    @hide="isShowFeedback = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu'
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowFeedback = ref<boolean>(false)
+
+const isShowDropdown = ref<boolean>(false)
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  helpMenuFunc(localization.value)
+)
+
+const onHideDropdown = (): void => {
+  isShowDropdown.value = false
+}
+
+const onSelectDropdown = (value: string): void => {
+  switch (value) {
+    case 'sendFeedback':
+      isShowFeedback.value = true
+      break
+    default:
+      emits('select-dropdown', value)
+  }
+  onHideDropdown()
+}
+
+const hideTooltip = (): void => {
+  const hoverElement = document.querySelector(
+    '#tooltip-help-menu-dropdown-toggle-main .tooltip-container-hover'
+  )
+
+  if (!hoverElement) return
+
+  hoverElement.classList.remove('isShow')
+}
+
+watch(isShowDropdown, (newValue) => {
+  newValue && hideTooltip()
+})
+</script>
+
+<style scoped lang="scss">
+.help-menu-content {
+  .header-tooltip-text {
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .help-menu-dropdown-toggle {
+    border: unset;
+    padding: 0;
+    outline: unset;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      .help-icon-container {
+        :deep(svg) {
+          color: #ffffff;
+        }
+      }
+      .arrow-icon-container {
+        color: #ffffff;
+      }
+    }
+
+    .help-icon-container {
+      display: flex;
+      margin-right: 10px;
+
+      :deep(svg) {
+        color: #d3d6da;
+      }
+    }
+    .arrow-icon-container {
+      display: flex;
+      transform: rotate(90deg);
+      color: #d3d6da;
+
+      &.active {
+        transform: rotate(270deg);
+      }
+    }
+  }
+
+  :deep(span.nav-icon) {
+    padding: 0 !important;
+  }
+}
+#ui-popup-window-help-menu-dropdown-toggle {
+  margin-top: 17px;
+}
+#dropdown-help-menu-dropdown {
+  .ui-dropdown-menu-item {
+    &:hover {
+      .ui-item-text {
+        color: var(--dropdown-item-hover-color);
+      }
+    }
+    .ui-item-text {
+      color: var(--dropdown-item-color);
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu.ts

@@ -1,28 +1,28 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-
-export const helpMenuFunc = (
-  localization: UI_I_Localization
-): UI_I_Dropdown[] => {
-  return [
-    {
-      text: localization.mainNavigation.help,
-      value: 'help',
-      testId: 'information-menu-help',
-      iconName: 'icon-help',
-    },
-    {
-      text: localization.layout.about,
-      value: 'about',
-      testId: 'information-menu-about',
-      divider: true,
-      iconName: 'info',
-    },
-    {
-      text: localization.common.sendFeedback,
-      value: 'sendFeedback',
-      testId: 'information-menu-send-feedback',
-      iconName: 'comment',
-    },
-  ]
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+export const helpMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_Dropdown[] => {
+  return [
+    {
+      text: localization.mainNavigation.help,
+      value: 'help',
+      testId: 'information-menu-help',
+      iconName: 'icon-help',
+    },
+    {
+      text: localization.layout.about,
+      value: 'about',
+      testId: 'information-menu-about',
+      divider: true,
+      iconName: 'info',
+    },
+    {
+      text: localization.common.sendFeedback,
+      value: 'sendFeedback',
+      testId: 'information-menu-send-feedback',
+      iconName: 'comment',
+    },
+  ]
+}

package/components/common/layout/theHeader/helpMenu/helpMenuOld/HelpMenuOld.vue

@@ -1,69 +1,59 @@
-<template>
-  <div class="tid-control-bar-help-menu help-menu">
-    <atoms-dropdown
-      :drop-menu="helpMenu"
-      test-id="help-menu-dropdown"
-      @select="emits('select-dropdown', $event.action)"
-    >
-      <template #icon>
-        <atoms-the-icon class="help-icon" name="help-icon" />
-      </template>
-    </atoms-dropdown>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
-import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu'
-
-const emits = defineEmits<{
-  (event: 'select-dropdown', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const helpMenu = computed<UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[]>(() =>
-  helpMenuFunc(localization.value)
-)
-</script>
-
-<style lang="scss">
-.help-menu {
-  .help-icon {
-    width: 24px;
-    height: 24px;
-    margin: 0 6px 0 9px;
-    stroke: none;
-    fill: #fafafa;
-  }
-}
-.about-vsphere-dialog-legal-section {
-  color: var(--description-color);
-  a {
-    color: var(--link-visited-color);
-  }
-}
-
-.separator {
-  content: '';
-  border-left: 1px solid #ccc;
-  margin: 0 18px;
-  height: 22px;
-}
-.close-icon {
-  fill: var(--close-icon);
-  width: 24px;
-  height: 24px;
-}
-
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
-
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-}
-</style>
+<template>
+  <div class="tid-control-bar-help-menu help-menu">
+    <atoms-dropdown
+      :drop-menu="helpMenu"
+      test-id="help-menu-dropdown"
+      @select="emits('select-dropdown', $event.action)"
+    >
+      <template #icon>
+        <atoms-the-icon class="help-icon" name="help-icon" />
+      </template>
+    </atoms-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
+import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu'
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const helpMenu = computed<UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[]>(() =>
+  helpMenuFunc(localization.value)
+)
+</script>
+
+<style lang="scss">
+.help-menu {
+  .help-icon {
+    width: 24px;
+    height: 24px;
+    margin: 0 6px 0 9px;
+    stroke: none;
+    fill: #fafafa;
+  }
+}
+.about-vsphere-dialog-legal-section {
+  color: var(--description-color);
+  a {
+    color: var(--link-visited-color);
+  }
+}
+
+.separator {
+  content: '';
+  border-left: 1px solid #ccc;
+  margin: 0 18px;
+  height: 22px;
+}
+.close-icon {
+  fill: var(--close-icon);
+  width: 24px;
+  height: 24px;
+}
+</style>

package/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu.ts

@@ -1,22 +1,22 @@
-import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
-
-export const helpMenuFunc = (
-  localization: UI_I_Localization
-): UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[] => {
-  return [
-    {
-      text: localization.mainNavigation.help,
-      action: 'help',
-      closeAfterClick: true,
-      testId: 'information-menu-help',
-    },
-    {
-      text: localization.layout.about,
-      action: 'about',
-      closeAfterClick: true,
-      testId: 'information-menu-about',
-    },
-  ]
-}
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
+
+export const helpMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[] => {
+  return [
+    {
+      text: localization.mainNavigation.help,
+      action: 'help',
+      closeAfterClick: true,
+      testId: 'information-menu-help',
+    },
+    {
+      text: localization.layout.about,
+      action: 'about',
+      closeAfterClick: true,
+      testId: 'information-menu-about',
+    },
+  ]
+}

package/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_ActionTypeHelpMenu = 'help' | 'about'
+export type UI_T_ActionTypeHelpMenu = 'help' | 'about'

package/components/common/layout/theHeader/lib/models/enums.ts

@@ -1,10 +1,10 @@
-export enum UI_E_Languages {
-  'ar_SA' = 'ar',
-  'en_US' = 'en',
-  'ru_RU' = 'ru',
-  'hy_AM' = 'hy',
-  'zh_CHS' = 'zh',
-  'kk_KZ' = 'kk',
-  'be_BY' = 'be',
-  'BROWSER' = 'BROWSER',
-}
+export enum UI_E_Languages {
+  'ar_SA' = 'ar',
+  'en_US' = 'en',
+  'ru_RU' = 'ru',
+  'hy_AM' = 'hy',
+  'zh_CHS' = 'zh',
+  'kk_KZ' = 'kk',
+  'be_BY' = 'be',
+  'BROWSER' = 'BROWSER',
+}

package/components/common/layout/theHeader/lib/models/types.ts

@@ -1,5 +1,5 @@
-export type UI_T_ActionTypeUserMenu =
-  | 'popup'
-  | 'logout'
-  | 'themeMode'
-  | 'popupPreferences'
+export type UI_T_ActionTypeUserMenu =
+  | 'popup'
+  | 'logout'
+  | 'themeMode'
+  | 'popupPreferences'