bfg-common 1.5.713 → 1.5.715

package/components/common/layout/theHeader/TheHeaderOld.vue

@@ -1,262 +1,252 @@
-<template>
-  <div class="main-nav">
-    <header class="header header-7">
-      <div class="header-nav">
-        <div class="nav-link">
-          <button
-            id="inventory-menu-trigger"
-            data-id="inventory-menu-toggle-button"
-            class="inventory-menu-trigger"
-            @click="emits('toggle-main-menu')"
-          >
-            <span class="inventory-menu-link">
-              <span class="nav-icon">
-                <atoms-the-icon class="menu-icon" name="menu" />
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-      <div class="branding">
-        <nuxt-link
-          id="header-shortcuts-link"
-          data-id="header-shortcuts-link"
-          to="/shortcuts"
-        >
-          <span class="title pointer"
-            >{{ props.companyName }}<sup><b>®</b></sup>
-            {{ props.projectName }}</span
-          >
-        </nuxt-link>
-      </div>
-      <form>
-        <atoms-input-search />
-      </form>
-
-      <div class="settings header-actions">
-        <div class="divider" />
-        <a
-          id="global-refresh-button"
-          data-id="global-refresh-button"
-          class="nav-link tid-global-refresh-button"
-          @click="emits('global-refresh')"
-        >
-          <span class="nav-icon">
-            <atoms-the-icon
-              v-show="!props.globalRefreshLoading"
-              class="reset-icon"
-              name="reset"
-            />
-            <span
-              :class="[
-                'spinner spinner-inline spinner-inverse global-refresh-active',
-                { 'spinner-paused': !props.globalRefreshLoading },
-              ]"
-            ></span>
-          </span>
-        </a>
-        <div class="divider" />
-
-        <common-layout-the-header-user-menu
-          v-model:security="security"
-          :hostname="props.hostname"
-          :is-preference="props.isPreference"
-          :time-format="props.timeFormat"
-          :selected-language-type="props.selectedLanguageType"
-          :selected-language="props.selectedLang.value"
-          :new-view="props.newView"
-          :new-view-local="props.newViewLocal"
-          :project="props.project"
-          :remote-console="props.remoteConsole"
-          :vm-cluster="props.vmCluster"
-          :security-loader="props.securityLoader"
-          :recovery="props.recovery"
-          @show-preference="emits('show-preference')"
-          @hide-preference="emits('hide-preference')"
-          @change-theme-mode="emits('change-theme-mode')"
-          @update-time-format="emits('update-time-format', $event)"
-          @update-language="onUpdateLanguage"
-          @update-is-browser="emits('update-is-browser', $event)"
-          @update-is-new-view="emits('update-is-new-view', $event)"
-          @update-remote-console="emits('update-remote-console', $event)"
-          @update-vm-clusters="emits('update-vm-clusters', $event)"
-          @security-confirm="emits('security-confirm', $event)"
-          @submit-preferences="emits('submit-preferences')"
-        />
-
-        <div class="divider" />
-
-        <common-layout-the-header-feedback
-          :is-show-feedback="isShowFeedback"
-          @show="isShowFeedback = true"
-          @hide="isShowFeedback = false"
-        />
-
-        <div class="divider" />
-
-        <common-layout-the-header-help-menu :project-name="props.projectName" />
-
-        <div class="divider" />
-      </div>
-    </header>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type { UI_T_Project } from '~/lib/models/types'
-import type {
-  UI_I_Recovery
-} from "~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces";
-import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
-
-const security = defineModel<boolean>('security')
-
-const props = defineProps<{
-  companyName: string
-  betaText: string
-  globalRefreshLoading: boolean
-  project: UI_T_Project
-  projectName: string
-  hostname: string
-  isPreference: boolean
-  selectedLanguageType: string
-  selectedLang: UI_I_Dropdown
-  remoteConsole: string
-  vmCluster: boolean
-  newView: boolean
-  newViewLocal: boolean
-  timeFormat: string
-  securityLoader: boolean // для Сферы
-  recovery: UI_I_Recovery | null // для Сферы
-}>()
-
-const emits = defineEmits<{
-  (event: 'toggle-main-menu'): void
-  (event: 'global-refresh'): void
-  (event: 'show-preference'): void
-  (event: 'hide-preference'): void
-  (event: 'change-theme-mode'): void
-  (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', value: UI_I_Dropdown): void
-  (event: 'update-is-browser', value: string): void
-  (event: 'update-is-new-view', value: boolean): void
-  (event: 'update-remote-console', value: string): void
-  (event: 'update-vm-clusters', value: boolean): void
-  (event: 'security-confirm', value: boolean): void
-  (event: 'submit-preferences'): void
-}>()
-
-const onUpdateLanguage = (language: string): void => {
-  const languageObj = findInLocals(language)
-  emits('update-language', languageObj)
-}
-
-const isShowFeedback = ref<boolean>(false)
-</script>
-
-<style scoped lang="scss">
-.main-nav {
-  position: relative;
-  left: 0;
-
-  header {
-    height: 62px;
-    align-items: center;
-    padding-left: 0;
-
-    .nav-link::before,
-    .nav-link::after {
-      display: none !important;
-    }
-
-    .inventory-menu-trigger {
-      padding: 0 0 0 60px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      position: relative;
-      outline: none;
-
-      .nav-icon {
-        padding: 0;
-        width: auto;
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-        background: transparent;
-        border: none;
-
-        .menu-icon {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          height: 24px;
-          width: 24px;
-          fill: #fafafa;
-          display: inline-block;
-          margin: 0;
-          vertical-align: middle;
-        }
-      }
-    }
-
-    .branding {
-      width: auto;
-      min-width: auto;
-      padding-left: 9px;
-      padding-right: 20px;
-
-      a {
-        position: relative;
-        padding-right: 4px;
-      }
-    }
-
-    .settings {
-      align-items: center;
-
-      a.nav-link {
-        display: flex;
-        padding: 0;
-        cursor: pointer;
-
-        .reset-icon {
-          width: 24px;
-          height: 24px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          fill: #fafafa;
-        }
-
-        .spinner {
-          line-height: 24px;
-          vertical-align: middle;
-          height: 24px;
-          width: 24px;
-          min-height: 24px;
-          min-width: 24px;
-          z-index: var(--z-fixed);
-
-          &.spinner-paused {
-            animation-play-state: paused;
-            display: none;
-          }
-        }
-      }
-      .divider {
-        height: 40px;
-        display: flex;
-        flex: 0 0 auto;
-        width: 1px;
-        background: #fafafa;
-        opacity: 0.15;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="main-nav">
+    <header class="header header-7">
+      <div class="header-nav">
+        <div class="nav-link">
+          <button
+            id="inventory-menu-trigger"
+            data-id="inventory-menu-toggle-button"
+            class="inventory-menu-trigger"
+            @click="emits('toggle-main-menu')"
+          >
+            <span class="inventory-menu-link">
+              <span class="nav-icon">
+                <atoms-the-icon class="menu-icon" name="menu" />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="branding">
+        <nuxt-link
+          id="header-shortcuts-link"
+          data-id="header-shortcuts-link"
+          to="/shortcuts"
+        >
+          <span class="title pointer"
+            >{{ props.companyName }}<sup><b>®</b></sup>
+            {{ props.projectName }}</span
+          >
+        </nuxt-link>
+      </div>
+      <form>
+        <atoms-input-search />
+      </form>
+
+      <div class="settings header-actions">
+        <div class="divider" />
+        <a
+          id="global-refresh-button"
+          data-id="global-refresh-button"
+          class="nav-link tid-global-refresh-button"
+          @click="emits('global-refresh')"
+        >
+          <span class="nav-icon">
+            <atoms-the-icon
+              v-show="!props.globalRefreshLoading"
+              class="reset-icon"
+              name="reset"
+            />
+            <span
+              :class="[
+                'spinner spinner-inline spinner-inverse global-refresh-active',
+                { 'spinner-paused': !props.globalRefreshLoading },
+              ]"
+            ></span>
+          </span>
+        </a>
+        <div class="divider" />
+
+        <common-layout-the-header-user-menu
+          v-model:security="security"
+          v-model:new-view-local="newViewLocal"
+          v-model:time-format="timeFormat"
+          v-model:console-value="consoleValue"
+          v-model:vm-in-hosts-clusters="vmInHostsClusters"
+          :hostname="props.hostname"
+          :is-preference="props.isPreference"
+          :selected-language-type="props.selectedLanguageType"
+          :selected-language="props.selectedLang.value"
+          :new-view="props.newView"
+          :project="props.project"
+          :security-loader="props.securityLoader"
+          :recovery="props.recovery"
+          @show-preference="emits('show-preference')"
+          @hide-preference="emits('hide-preference')"
+          @change-theme-mode="emits('change-theme-mode')"
+          @update-language="onUpdateLanguage"
+          @update-is-browser="emits('update-is-browser', $event)"
+          @security-confirm="emits('security-confirm', $event)"
+          @submit-preferences="emits('submit-preferences')"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-feedback
+          :is-show-feedback="isShowFeedback"
+          @show="isShowFeedback = true"
+          @hide="isShowFeedback = false"
+        />
+
+        <div class="divider" />
+
+        <common-layout-the-header-help-menu :project-name="props.projectName" />
+
+        <div class="divider" />
+      </div>
+    </header>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Recovery } from '~/components/common/layout/theHeader/userMenu/modals/preferences/security/lib/models/interfaces'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
+
+const security = defineModel<boolean>('security')
+const newViewLocal = defineModel<boolean>('newViewLocal')
+const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
+const consoleValue = defineModel<string>('consoleValue')
+const vmInHostsClusters = defineModel<boolean>('vmInHostsClusters')
+
+const props = defineProps<{
+  companyName: string
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: UI_I_Dropdown
+  newView: boolean
+  securityLoader: boolean // для Сферы
+  recovery: UI_I_Recovery | null // для Сферы
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-main-menu'): void
+  (event: 'global-refresh'): void
+  (event: 'show-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'change-theme-mode'): void
+  (event: 'update-language', value: UI_I_Dropdown): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'security-confirm', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+
+const onUpdateLanguage = (language: string): void => {
+  const languageObj = findInLocals(language)
+  emits('update-language', languageObj)
+}
+
+const isShowFeedback = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.main-nav {
+  position: relative;
+  left: 0;
+
+  header {
+    height: 62px;
+    align-items: center;
+    padding-left: 0;
+
+    .nav-link::before,
+    .nav-link::after {
+      display: none !important;
+    }
+
+    .inventory-menu-trigger {
+      padding: 0 0 0 60px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      position: relative;
+      outline: none;
+
+      .nav-icon {
+        padding: 0;
+        width: auto;
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+        background: transparent;
+        border: none;
+
+        .menu-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: 24px;
+          width: 24px;
+          fill: #fafafa;
+          display: inline-block;
+          margin: 0;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .branding {
+      width: auto;
+      min-width: auto;
+      padding-left: 9px;
+      padding-right: 20px;
+
+      a {
+        position: relative;
+        padding-right: 4px;
+      }
+    }
+
+    .settings {
+      align-items: center;
+
+      a.nav-link {
+        display: flex;
+        padding: 0;
+        cursor: pointer;
+
+        .reset-icon {
+          width: 24px;
+          height: 24px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          fill: #fafafa;
+        }
+
+        .spinner {
+          line-height: 24px;
+          vertical-align: middle;
+          height: 24px;
+          width: 24px;
+          min-height: 24px;
+          min-width: 24px;
+          z-index: var(--z-fixed);
+
+          &.spinner-paused {
+            animation-play-state: paused;
+            display: none;
+          }
+        }
+      }
+      .divider {
+        height: 40px;
+        display: flex;
+        flex: 0 0 auto;
+        width: 1px;
+        background: #fafafa;
+        opacity: 0.15;
+      }
+    }
+  }
+}
+</style>