bfg-common 1.3.449 → 1.3.451

package/assets/scss/common/icons/icons-2.scss

@@ -45,7 +45,8 @@
 .vsphere-icon-host-maintenance {
   background-position: 0 60.7594936709%;
 }
-.icon-events {
+.icon-events,
+.icon-logs {
   background-position: 0 31.6455696203%;
 }
 .icon-developer-center {
@@ -130,6 +131,7 @@
 .vsphere-icon-datastore-warning,
 .icon-datastore-24x,
 .icon-events,
+.icon-logs,
 .icon-developer-center,
 .icon-info-standart,
 .vsphere-icon-status-warning,
@@ -172,6 +174,7 @@
 .active .vsphere-icon-datastore,
 .active .vsphere-icon-datastore-warning,
 .active .icon-events,
+.active .icon-logs,
 .active .icon-developer-center,
 .active .vsphere-icon-status-warning,
 .active .vsphere-icon-status-error,
@@ -222,6 +225,7 @@
 .vsphere-icon-host-maintenance,
 .vsphere-icon-folder,
 .icon-events,
+.icon-logs,
 .icon-developer-center,
 .vsphere-icon-status-warning,
 .vsphere-icon-status-error,

package/assets/scss/common/icons/icons-3.scss

@@ -47,7 +47,8 @@
 .icon-nsx {
   background-position: 0 25.3164556962%;
 }
-.icon-policies-profiles {
+.icon-policies-profiles,
+.icon-access-log {
   background-position: 0 78.4810126582%;
 }
 .icon-inventory {
@@ -138,6 +139,7 @@
 .icon-network-24x,
 .icon-nsx,
 .icon-policies-profiles,
+.icon-access-log,
 .icon-inventory,
 .vx-icon-new-cluster,
 .network-lib-ui-icon-virtualAdapter,
@@ -177,6 +179,7 @@
 .active .icon-openConsole,
 .active .icon-nsx,
 .active .icon-policies-profiles,
+.active .icon-access-log,
 .active .icon-inventory,
 .active .network-lib-ui-icon-virtualAdapter,
 .active .network-lib-ui-icon-physicalAdapter,
@@ -221,6 +224,7 @@
 .icon-status-ok,
 .icon-nsx,
 .icon-policies-profiles,
+.icon-access-log,
 .icon-inventory,
 .icon-shortcuts,
 .network-lib-ui-icon-virtualAdapter,

package/components/atoms/TheIcon2.vue

@@ -1267,21 +1267,21 @@
     >
       <path
         d="M12.9275 17.4058C13.5005 17.9789 14.2922 18.3333 15.1667 18.3333C16.9156 18.3333 18.3333 16.9156 18.3333 15.1667C18.3333 13.4178 16.9156 12 15.1667 12C13.7389 12 12.8734 12.9516 12 13.9352M12.8063 17.2778C13.0736 17.5764 13.3967 17.824 13.7593 18.0042"
-        :stroke="props.color"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M12 12.5283V13.9357H13.4074"
-        :stroke="props.color"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M16.7857 3.45271C16.7857 4.43893 13.5877 5.23842 9.64286 5.23842C5.69797 5.23842 2.5 4.43893 2.5 3.45271M16.7857 3.45271C16.7857 2.46648 13.5877 1.66699 9.64286 1.66699C5.69797 1.66699 2.5 2.46648 2.5 3.45271M16.7857 3.45271V9.00033M2.5 3.45271V16.5479M2.5 16.5479C2.5 17.5049 5.51097 18.286 9.29367 18.3316M2.5 16.5479C2.5 17.5342 5.69797 18.3337 9.64286 18.3337M2.5 12.1906C2.5 13.028 4.80575 13.7308 7.91667 13.9238M2.5 12.1906C2.5 13.0718 5.05287 13.8037 8.41043 13.9497M2.5 12.1906C2.5 13.0943 5.18514 13.8413 8.66964 13.96M16.1836 8.5404C16.5708 8.32049 16.7857 8.07735 16.7857 7.82166C16.7857 8.80788 13.5877 9.60749 9.64286 9.60749C5.69797 9.60749 2.5 8.80788 2.5 7.82166C2.5 8.74309 5.29157 9.50152 8.87571 9.5972"
-        :stroke="props.color"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
       />

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -1,18 +1,26 @@
 <template>
-    <common-main-navigation-panel-new
+  <common-main-navigation-panel-new
     v-if="props.isNewView"
+    v-model:main-menu-hovered="mainMenuHovered"
     :main-menu-status="props.mainMenuStatus"
     :navigation-items="props.navigationItems"
     :parent-status="props.parentStatus"
     :disabled-pin="props.disabledPin"
+    :menu-pined="menuPined"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
     @toggle="emits('toggle', $event)"
   />
-    <common-main-navigation-panel-old
+  <common-main-navigation-panel-old
     v-else
+    v-model:main-menu-hovered="mainMenuHovered"
     :main-menu-status="props.mainMenuStatus"
     :navigation-items="props.navigationItems"
     :parent-status="props.parentStatus"
     :disabled-pin="props.disabledPin"
+    :menu-pined="menuPined"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
     @toggle="emits('toggle', $event)"
   />
 </template>
@@ -37,6 +45,92 @@ const props = withDefaults(
 const emits = defineEmits<{
   (event: 'toggle', value: boolean): void
 }>()
+
+const route = useRoute()
+
+const showMenu = computed<boolean>(
+  () => props.mainMenuStatus || menuPined.value
+)
+
+const menuPined = ref<boolean>(false)
+const changeMenuPin = (): void => {
+  useLocalStorage('menuPined', menuPined.value)
+}
+const setMenuPined = (): void => {
+  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
+}
+watch(
+  () => props.disabledPin,
+  () => {
+    setMenuPined()
+  },
+  { immediate: true }
+)
+
+const menuCollapsed = ref<boolean>(false)
+const collapseMenu = (): void => {
+  menuCollapsed.value = !menuCollapsed.value
+  useLocalStorage('menuCollapsed', menuCollapsed.value)
+}
+
+const mainMenuHovered = ref<boolean>(false)
+
+const clickWindow = (event: Event): void => {
+  const target = event.target as any
+  if (
+    menuPined.value ||
+    mainMenuHovered.value ||
+    target.className.baseVal?.includes('menu-icon') ||
+    target.className.baseVal?.includes('clr-i-outline')
+  ) {
+    return
+  }
+
+  emits('toggle', false)
+}
+
+const mountedReady = ref<boolean>(false)
+onMounted(() => {
+  mountedReady.value = true
+  window.addEventListener('click', clickWindow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickWindow)
+})
+
+watch(
+  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
+  ([newValue1, newValue2, newValue3]: [
+    boolean,
+    any,
+    UI_T_ParentStatus
+  ]): void => {
+    if (newValue3 === 1) return
+
+    const name = location.pathname.split('/')[1]
+
+    if (!newValue1 || name === 'auth') return
+
+    setSidebarOptions()
+    useLocalStorage('navigationHistoryRoute', newValue2)
+  },
+  { immediate: true, deep: true }
+)
+
+const setSidebarOptions = (): void => {
+  setMenuPined()
+  menuCollapsed.value = useLocalStorage('menuCollapsed')
+
+  if (menuPined.value) {
+    emits('toggle', true)
+  }
+}
+
+const hideMainMenu = (): void => {
+  if (menuPined.value) return
+  emits('toggle', false)
+}
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -1,43 +1,43 @@
 <template>
   <div
-    :class="['main-navigation-panel', { pinned: menuPined }]"
+    :class="['main-navigation-panel', { pinned: props.menuPined }]"
     @mouseenter="mainMenuHovered = true"
     @mouseleave="mainMenuHovered = false"
   >
     <div
-      v-show="showMenu"
-      :class="['nav-context', { collapsed: menuCollapsed }]"
+      v-show="props.showMenu"
+      :class="['nav-context', { collapsed: props.menuCollapsed }]"
     >
       <div class="tools">
-        <div v-show="!menuCollapsed" class="pin-wrap">
+        <div v-show="!props.menuCollapsed" class="pin-wrap">
           <input
             id="pin-menu-control"
-            v-model="menuPined"
+            v-model="props.menuPined"
             data-id="navigation-panel-pin-menu-control"
             type="checkbox"
             :disabled="props.disabledPin"
-            @change="changeMenuPin"
+            @change="emits('change-menu-pin')"
           />
           <label for="pin-menu-control" class="pointer flex-align-center">
-            <ui-icon-icon3
-              :name="menuPined ? 'unpin' : 'pin'"
+            <ui-icon-main-navigation-panel
+              :name="props.menuPined ? 'unpin' : 'pin'"
               width="12px"
               height="12px"
             />
-            <span v-if="!menuPined">{{ localization.pinMenu }}</span>
+            <span v-if="!props.menuPined">{{ localization.pinMenu }}</span>
             <span v-else>{{ localization.unpinMenu }}</span>
           </label>
         </div>
 
         <button
-          v-if="menuPined"
+          v-if="props.menuPined"
           id="nav-trigger"
           data-id="navigation-panel-trigger"
           class="nav-trigger"
-          @click="collapseMenu"
+          @click="emits('collapse-menu')"
         >
           <span class="nav-trigger-icon flex">
-            <ui-icon-icon3 name="doubleArrow" width="16px" height="16px" />
+            <ui-icon-main-navigation-panel name="doubleArrow" width="16px" height="16px" />
           </span>
         </button>
       </div>
@@ -53,9 +53,9 @@
             active-class="active"
             :to="item2.to"
             :title="item2.title"
-            @click="hideMainMenu"
+            @click="emits('hide-main-menu')"
           >
-            <ui-icon-icon3 :name="item2.iconName" width="20px" height="20px" />
+            <ui-icon-main-navigation-panel :name="item2.iconName" width="20px" height="20px" />
             <span class="nav-text">{{ item2.title }}</span>
           </nuxt-link>
           <div
@@ -78,99 +78,22 @@ const props = defineProps<{
   navigationItems: UI_I_NavigationItem[][]
   parentStatus: UI_T_ParentStatus
   disabledPin: boolean
+  menuPined: boolean
+  menuCollapsed: boolean
+  showMenu: boolean
 }>()
 const emits = defineEmits<{
   (event: 'toggle', value: boolean): void
+  (event: 'collapse-menu'): void
+  (event: 'change-menu-pin'): void
+  (event: 'hide-main-menu'): void
 }>()
 
-// const { $store } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-const setMenuPined = (): void => {
-  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
-}
-watch(
-  () => props.disabledPin,
-  () => {
-    setMenuPined()
-  },
-  { immediate: true }
-)
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
+const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
+  required: true,
 })
 
-watch(
-  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
-  ([newValue1, newValue2, newValue3]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (newValue3 === 1) return
-
-    const name = location.pathname.split('/')[1]
-
-    if (!newValue1 || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', newValue2)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  setMenuPined()
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  if (menuPined.value) return
-  emits('toggle', false)
-}
+const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped lang="scss">
@@ -259,7 +182,8 @@ const hideMainMenu = (): void => {
     }
 
     .nav-content {
-      padding: 0 12px;
+      overflow: auto;
+      padding: 0 12px 12px;
 
       .nav-link {
         display: flex;

package/components/common/mainNavigationPanel/MainNavigationPanelOld.vue

@@ -1,28 +1,28 @@
 <template>
   <div
-    :class="['main-navigation-panel', { pinned: menuPined }]"
+    :class="['main-navigation-panel', { pinned: props.menuPined }]"
     @mouseenter="mainMenuHovered = true"
     @mouseleave="mainMenuHovered = false"
   >
     <div
-      v-show="showMenu"
-      :class="['nav-context', { collapsed: menuCollapsed }]"
+      v-show="props.showMenu"
+      :class="['nav-context', { collapsed: props.menuCollapsed }]"
     >
       <div class="category-wrap">
         <div class="clr-vertical-nav">
           <button
-            v-if="menuPined"
+            v-if="props.menuPined"
             id="nav-trigger"
             data-id="navigation-panel-trigger"
             class="nav-trigger"
-            @click="collapseMenu"
+            @click="emits('collapse-menu')"
           >
             <span class="nav-trigger-icon">
               <atoms-the-icon name="doubleArrows" />
             </span>
           </button>
           <div class="nav-content">
-            <template v-for="(item, key) in navigationItems" :key="key">
+            <template v-for="(item, key) in props.navigationItems" :key="key">
               <nuxt-link
                 v-for="(item2, key2) in item"
                 :id="`nav-item-${key}-${key2}`"
@@ -32,7 +32,7 @@
                 active-class="active"
                 :to="item2.to"
                 :title="item2.title"
-                @click="hideMainMenu"
+                @click="emits('hide-main-menu')"
               >
                 <span class="nav-text">
                   <span
@@ -52,15 +52,15 @@
         </div>
       </div>
 
-      <div v-show="!menuCollapsed" class="pin-wrap">
+      <div v-show="!props.menuCollapsed" class="pin-wrap">
         <div class="clr-checkbox-wrapper">
           <input
             id="pin-menu-control"
-            v-model="menuPined"
+            v-model="props.menuPined"
             data-id="navigation-panel-pin-menu-control"
             type="checkbox"
             :disabled="props.disabledPin"
-            @change="changeMenuPin"
+            @change="emits('change-menu-pin')"
           />
           <label for="pin-menu-control">{{ localization.pinMenu }}</label>
         </div>
@@ -79,99 +79,22 @@ const props = defineProps<{
   navigationItems: UI_I_NavigationItem[][]
   parentStatus: UI_T_ParentStatus
   disabledPin: boolean
+  menuPined: boolean
+  menuCollapsed: boolean
+  showMenu: boolean
 }>()
 const emits = defineEmits<{
   (event: 'toggle', value: boolean): void
+  (event: 'collapse-menu'): void
+  (event: 'change-menu-pin'): void
+  (event: 'hide-main-menu'): void
 }>()
 
-// const { $store } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-const setMenuPined = (): void => {
-  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
-}
-watch(
-  () => props.disabledPin,
-  () => {
-    setMenuPined()
-  },
-  { immediate: true }
-)
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
+const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
+  required: true,
 })
 
-watch(
-  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
-  ([newValue1, newValue2, newValue3]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (newValue3 === 1) return
-
-    const name = location.pathname.split('/')[1]
-
-    if (!newValue1 || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', newValue2)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  setMenuPined()
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  if (menuPined.value) return
-  emits('toggle', false)
-}
+const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style scoped lang="scss">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.449",
+  "version": "1.3.451",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",