bfg-common 1.3.467 → 1.3.468

package/components/common/context/Context.vue

@@ -1,99 +1,99 @@
-<template>
-  <div
-    :id="elementId"
-    class="context-popup"
-    :style="{
-      top: currentContextMenuY,
-      left: currentContextMenuX,
-    }"
-  >
-    <common-context-recursion
-      :action-loading="props.actionLoading"
-      :items="props.contextMenu.items"
-      @select-item="selectItem"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ContextMenuItem,
-  UI_I_ContextMenu,
-} from '~/components/common/context/lib/models/interfaces'
-
-const props = defineProps<{
-  contextMenu: UI_I_ContextMenu
-  actionLoading: string | null
-}>()
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (event: 'hide'): void
-}>()
-const selectItem = (item: UI_I_ContextMenuItem): void => {
-  emits('select-item', item)
-}
-
-const elementId = ref<string>(`context-${useUniqueId()}`)
-
-const currentContextMenuY = ref<string>('')
-const currentContextMenuX = ref<string>('')
-const setCurrentPositionsPopup = (): void => {
-  const contextMenuY = props.contextMenu.y
-  const contextMenuX = props.contextMenu.x
-
-  const contextWrap: HTMLElement | null =
-    document.querySelector(`#${elementId.value} .context-wrap`)
-  const contextW = contextWrap?.offsetWidth || 0
-  const contextH = contextWrap?.offsetHeight || 0
-
-  const windowW = window.innerWidth
-  const windowH = window.innerHeight
-
-  if (contextMenuY + contextH >= windowH) {
-    currentContextMenuY.value = 'auto'
-  } else {
-    currentContextMenuY.value = `${contextMenuY}px`
-  }
-
-  if (contextMenuX + contextW >= windowW) {
-    const divisionW = windowW - contextW
-    currentContextMenuX.value = `${divisionW}px`
-  } else {
-    currentContextMenuX.value = `${contextMenuX}px`
-  }
-}
-
-const windowMousedown = (): void => {
-  emits('hide')
-}
-watch(
-  () => props.contextMenu.y,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (newValue < 0) {
-      window.removeEventListener('mousedown', windowMousedown)
-    } else {
-      window.addEventListener('mousedown', windowMousedown)
-    }
-
-    setTimeout(() => {
-      setCurrentPositionsPopup()
-    }, 0)
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.context-popup {
-  top: -9999px;
-  left: -9999px;
-  bottom: 0;
-  border: none;
-  box-sizing: content-box;
-  overflow: visible;
-  display: block;
-  position: fixed;
-  z-index: 10002;
-}
-</style>
+<template>
+  <div
+    :id="elementId"
+    class="context-popup"
+    :style="{
+      top: currentContextMenuY,
+      left: currentContextMenuX,
+    }"
+  >
+    <common-context-recursion
+      :action-loading="props.actionLoading"
+      :items="props.contextMenu.items"
+      @select-item="selectItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/lib/models/interfaces'
+
+const props = defineProps<{
+  contextMenu: UI_I_ContextMenu
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (event: 'hide'): void
+}>()
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const elementId = ref<string>(`context-${useUniqueId()}`)
+
+const currentContextMenuY = ref<string>('')
+const currentContextMenuX = ref<string>('')
+const setCurrentPositionsPopup = (): void => {
+  const contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null =
+    document.querySelector(`#${elementId.value} .context-wrap`)
+  const contextW = contextWrap?.offsetWidth || 0
+  const contextH = contextWrap?.offsetHeight || 0
+
+  const windowW = window.innerWidth
+  const windowH = window.innerHeight
+
+  if (contextMenuY + contextH >= windowH) {
+    currentContextMenuY.value = 'auto'
+  } else {
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    const divisionW = windowW - contextW
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+const windowMousedown = (): void => {
+  emits('hide')
+}
+watch(
+  () => props.contextMenu.y,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (newValue < 0) {
+      window.removeEventListener('mousedown', windowMousedown)
+    } else {
+      window.addEventListener('mousedown', windowMousedown)
+    }
+
+    setTimeout(() => {
+      setCurrentPositionsPopup()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.context-popup {
+  top: -9999px;
+  left: -9999px;
+  bottom: 0;
+  border: none;
+  box-sizing: content-box;
+  overflow: visible;
+  display: block;
+  position: fixed;
+  z-index: 10002;
+}
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="language-switch-content">
+    <label class="switch">
+      <input type="checkbox" @change="emits('change-theme-mode')" />
+      <span class="slider"></span>
+      <span class="theme-icon light">
+        <ui-icon name="light" width="14" height="14" />
+      </span>
+      <span class="theme-icon dark">
+        <ui-icon name="dark" width="14" height="14" />
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits<{
+  (event: 'change-theme-mode'): void
+}>()
+</script>
+
+<style>
+:root {
+  --switch-bg-color: #e9ebed;
+  --switch-item-color: #213444;
+}
+:root.dark-theme {
+  --switch-bg-color: #4d5d69;
+  --switch-item-color: #ffffff;
+}
+</style>
+
+<style scoped lang="scss">
+.language-switch-content {
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 48px;
+    height: 24px;
+    color: var(--switch-item-color);
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+
+      &:checked + .slider {
+        background-color: var(--switch-bg-color);
+      }
+      &:focus + .slider {
+        box-shadow: 0 0 1px var(--switch-bg-color);
+      }
+      &:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+    }
+
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--switch-bg-color);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      border-radius: 34px;
+
+      &:before {
+        position: absolute;
+        content: '';
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 3px;
+        background-color: var(--switch-item-color);
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        border-radius: 50%;
+      }
+    }
+
+    .theme-icon {
+      position: absolute;
+      display: flex;
+      top: 5px;
+      color: var(--switch-item-color);
+      pointer-events: none;
+
+      &.light {
+        right: 5px;
+      }
+      &.dark {
+        left: 5px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <common-layout-the-header-new
+    v-if="newView"
+    :company-name="props.companyName"
+    :is-beta="props.isBeta"
+    :is-dev="props.isDev"
+    :beta-text="props.betaText"
+    :global-refresh-loading="props.globalRefreshLoading"
+    :hostname="props.hostname"
+    :project-name="props.projectName"
+    :is-preference="props.isPreference"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-lang="props.selectedLang"
+    :new-view="props.newViewLocal"
+    :time-format="props.timeFormat"
+    :project="props.project"
+    @toggle-main-menu="emits('toggle-main-menu')"
+    @show-preference="emits('show-preference')"
+    @hide-preference="emits('hide-preference')"
+    @global-refresh="emits('global-refresh')"
+    @update-time-format="emits('update-time-format', $event)"
+    @change-theme-mode="emits('change-theme-mode')"
+    @update-language="emits('update-language', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-is-new-view="emits('update-is-new-view', $event)"
+    @submit-preferences="emits('submit-preferences')"
+  />
+  <common-layout-the-header-old
+    v-else
+    :company-name="props.companyName"
+    :is-beta="props.isBeta"
+    :is-dev="props.isDev"
+    :beta-text="props.betaText"
+    :global-refresh-loading="props.globalRefreshLoading"
+    :hostname="props.hostname"
+    :project-name="props.projectName"
+    :is-preference="props.isPreference"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-lang="props.selectedLang"
+    :new-view="props.newViewLocal"
+    :time-format="props.timeFormat"
+    :project="props.project"
+    @toggle-main-menu="emits('toggle-main-menu')"
+    @show-preference="emits('show-preference')"
+    @hide-preference="emits('hide-preference')"
+    @global-refresh="emits('global-refresh')"
+    @update-time-format="emits('update-time-format', $event)"
+    @change-theme-mode="emits('change-theme-mode')"
+    @update-language="emits('update-language', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-is-new-view="emits('update-is-new-view', $event)"
+    @submit-preferences="emits('submit-preferences')"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+
+const props = defineProps<{
+  companyName: string
+  isBeta: boolean
+  isDev: boolean
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: string
+  newView: boolean
+  newViewLocal: boolean
+  timeFormat: string
+}>()
+
+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: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,229 @@
+<template>
+  <div class="the-header-content">
+    <div class="flex-content">
+      <div class="left-content">
+        <button
+          id="inventory-menu-trigger"
+          data-id="inventory-menu-toggle-button"
+          class="inventory-menu-trigger"
+          @click="emits('toggle-main-menu')"
+        >
+          <atoms-the-icon class="menu-icon" name="menu" />
+        </button>
+        <nuxt-link
+          id="header-shortcuts-link"
+          data-id="header-shortcuts-link"
+          class="header-shortcuts-link"
+          to="/shortcuts"
+        >
+          <span class="title pointer"
+            >{{ props.companyName }}® {{ props.projectName }}</span
+          >
+          <span v-if="props.isBeta" class="badge-info">{{
+            props.betaText
+          }}</span>
+          <span v-else-if="props.isDev" class="badge-info">Dev</span>
+        </nuxt-link>
+      </div>
+      <div class="right-content">
+        <button
+          id="global-refresh-button"
+          data-id="global-refresh-button"
+          class="global-refresh-button"
+          @click="emits('global-refresh')"
+        >
+          <atoms-the-icon
+            v-if="!props.globalRefreshLoading"
+            class="reset-icon"
+            name="reset"
+          />
+          <span v-else class="reset-loader-content">
+            <ui-loader2 />
+          </span>
+        </button>
+        <div class="divider" />
+        <div class="container-content">
+          <common-layout-the-header-language-switch
+            @change-theme-mode="emits('change-theme-mode')"
+          />
+        </div>
+        <div class="divider" />
+        <div class="container-content">
+          <common-layout-the-header-help-menu
+            :project-name="props.projectName"
+          />
+        </div>
+        <div class="divider" />
+        <div class="container-content user-menu-container">
+          <common-layout-the-header-user-menu
+            :hostname="props.hostname"
+            :is-preference="isPreference"
+            :time-format="props.timeFormat"
+            :selected-language-type="props.selectedLanguageType"
+            :selected-language="props.selectedLang"
+            :new-view="props.newView"
+            :project="props.project"
+            @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="emits('update-language', $event)"
+            @update-is-browser="emits('update-is-browser', $event)"
+            @update-is-new-view="emits('update-is-new-view', $event)"
+            @submit-preferences="emits('submit-preferences')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  companyName: string
+  isBeta: boolean
+  isDev: boolean
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: string
+  newView: boolean
+  timeFormat: string
+}>()
+
+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: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+</script>
+
+<style>
+:root {
+  --header-container-bg-color: #213444;
+  --header-shortcuts-link-color: #ffffff;
+  --badge-info-bg-color: #008fd6;
+}
+:root.dark-theme {
+  --header-container-bg-color: #1b2a37;
+  --header-shortcuts-link-color: #e9eaec;
+  --badge-info-bg-color: #2ba2de;
+}
+</style>
+
+<style scoped lang="scss">
+.the-header-content {
+  background-color: var(--header-container-bg-color);
+  height: 64px;
+  padding: 16px;
+
+  .flex-content {
+    display: flex;
+    justify-content: space-between;
+
+    .left-content {
+      display: flex;
+      align-items: center;
+
+      .inventory-menu-trigger {
+        width: 24px;
+        height: 24px;
+        border: unset;
+        padding: 0;
+        outline: unset;
+        background: transparent;
+        cursor: pointer;
+        margin-right: 16px;
+
+        &:hover {
+          svg {
+            fill: #ffffff;
+          }
+        }
+        svg {
+          fill: #d3d6da;
+        }
+      }
+      .header-shortcuts-link {
+        color: var(--header-shortcuts-link-color);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+
+        .title {
+          font-size: 14px;
+        }
+        .badge-info {
+          background-color: var(--badge-info-bg-color);
+          margin-left: 16px;
+          border-radius: 8px;
+          font-size: 12px;
+          padding: 0 12px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+    .right-content {
+      display: flex;
+      align-items: center;
+
+      .divider {
+        width: 1px;
+        height: 32px;
+        background-color: #394a58;
+      }
+
+      .global-refresh-button {
+        border: unset;
+        padding: 0;
+        outline: unset;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+        margin-right: 16px;
+
+        .reset-icon {
+          width: 24px;
+          height: 24px;
+          fill: #d3d6da;
+
+          &:hover {
+            fill: #ffffff;
+          }
+        }
+        .reset-loader-content {
+          width: 18px;
+          height: 18px;
+
+          .loader {
+            padding: 2px;
+          }
+        }
+      }
+      .container-content {
+        margin-left: 16px;
+        margin-right: 16px;
+      }
+      .user-menu-container {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>