bfg-common 1.3.450 → 1.3.451

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -45,7 +45,8 @@
45
45
  .vsphere-icon-host-maintenance {
46
46
  background-position: 0 60.7594936709%;
47
47
  }
48
- .icon-events {
48
+ .icon-events,
49
+ .icon-logs {
49
50
  background-position: 0 31.6455696203%;
50
51
  }
51
52
  .icon-developer-center {
@@ -130,6 +131,7 @@
130
131
  .vsphere-icon-datastore-warning,
131
132
  .icon-datastore-24x,
132
133
  .icon-events,
134
+ .icon-logs,
133
135
  .icon-developer-center,
134
136
  .icon-info-standart,
135
137
  .vsphere-icon-status-warning,
@@ -172,6 +174,7 @@
172
174
  .active .vsphere-icon-datastore,
173
175
  .active .vsphere-icon-datastore-warning,
174
176
  .active .icon-events,
177
+ .active .icon-logs,
175
178
  .active .icon-developer-center,
176
179
  .active .vsphere-icon-status-warning,
177
180
  .active .vsphere-icon-status-error,
@@ -222,6 +225,7 @@
222
225
  .vsphere-icon-host-maintenance,
223
226
  .vsphere-icon-folder,
224
227
  .icon-events,
228
+ .icon-logs,
225
229
  .icon-developer-center,
226
230
  .vsphere-icon-status-warning,
227
231
  .vsphere-icon-status-error,
@@ -1,18 +1,26 @@
1
1
  <template>
2
- <common-main-navigation-panel-new
2
+ <common-main-navigation-panel-new
3
3
  v-if="props.isNewView"
4
+ v-model:main-menu-hovered="mainMenuHovered"
4
5
  :main-menu-status="props.mainMenuStatus"
5
6
  :navigation-items="props.navigationItems"
6
7
  :parent-status="props.parentStatus"
7
8
  :disabled-pin="props.disabledPin"
9
+ :menu-pined="menuPined"
10
+ :menu-collapsed="menuCollapsed"
11
+ :show-menu="showMenu"
8
12
  @toggle="emits('toggle', $event)"
9
13
  />
10
- <common-main-navigation-panel-old
14
+ <common-main-navigation-panel-old
11
15
  v-else
16
+ v-model:main-menu-hovered="mainMenuHovered"
12
17
  :main-menu-status="props.mainMenuStatus"
13
18
  :navigation-items="props.navigationItems"
14
19
  :parent-status="props.parentStatus"
15
20
  :disabled-pin="props.disabledPin"
21
+ :menu-pined="menuPined"
22
+ :menu-collapsed="menuCollapsed"
23
+ :show-menu="showMenu"
16
24
  @toggle="emits('toggle', $event)"
17
25
  />
18
26
  </template>
@@ -37,6 +45,92 @@ const props = withDefaults(
37
45
  const emits = defineEmits<{
38
46
  (event: 'toggle', value: boolean): void
39
47
  }>()
48
+
49
+ const route = useRoute()
50
+
51
+ const showMenu = computed<boolean>(
52
+ () => props.mainMenuStatus || menuPined.value
53
+ )
54
+
55
+ const menuPined = ref<boolean>(false)
56
+ const changeMenuPin = (): void => {
57
+ useLocalStorage('menuPined', menuPined.value)
58
+ }
59
+ const setMenuPined = (): void => {
60
+ menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
61
+ }
62
+ watch(
63
+ () => props.disabledPin,
64
+ () => {
65
+ setMenuPined()
66
+ },
67
+ { immediate: true }
68
+ )
69
+
70
+ const menuCollapsed = ref<boolean>(false)
71
+ const collapseMenu = (): void => {
72
+ menuCollapsed.value = !menuCollapsed.value
73
+ useLocalStorage('menuCollapsed', menuCollapsed.value)
74
+ }
75
+
76
+ const mainMenuHovered = ref<boolean>(false)
77
+
78
+ const clickWindow = (event: Event): void => {
79
+ const target = event.target as any
80
+ if (
81
+ menuPined.value ||
82
+ mainMenuHovered.value ||
83
+ target.className.baseVal?.includes('menu-icon') ||
84
+ target.className.baseVal?.includes('clr-i-outline')
85
+ ) {
86
+ return
87
+ }
88
+
89
+ emits('toggle', false)
90
+ }
91
+
92
+ const mountedReady = ref<boolean>(false)
93
+ onMounted(() => {
94
+ mountedReady.value = true
95
+ window.addEventListener('click', clickWindow)
96
+ })
97
+
98
+ onUnmounted(() => {
99
+ window.removeEventListener('click', clickWindow)
100
+ })
101
+
102
+ watch(
103
+ [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
104
+ ([newValue1, newValue2, newValue3]: [
105
+ boolean,
106
+ any,
107
+ UI_T_ParentStatus
108
+ ]): void => {
109
+ if (newValue3 === 1) return
110
+
111
+ const name = location.pathname.split('/')[1]
112
+
113
+ if (!newValue1 || name === 'auth') return
114
+
115
+ setSidebarOptions()
116
+ useLocalStorage('navigationHistoryRoute', newValue2)
117
+ },
118
+ { immediate: true, deep: true }
119
+ )
120
+
121
+ const setSidebarOptions = (): void => {
122
+ setMenuPined()
123
+ menuCollapsed.value = useLocalStorage('menuCollapsed')
124
+
125
+ if (menuPined.value) {
126
+ emits('toggle', true)
127
+ }
128
+ }
129
+
130
+ const hideMainMenu = (): void => {
131
+ if (menuPined.value) return
132
+ emits('toggle', false)
133
+ }
40
134
  </script>
41
135
 
42
136
  <style scoped lang="scss"></style>
@@ -1,43 +1,43 @@
1
1
  <template>
2
2
  <div
3
- :class="['main-navigation-panel', { pinned: menuPined }]"
3
+ :class="['main-navigation-panel', { pinned: props.menuPined }]"
4
4
  @mouseenter="mainMenuHovered = true"
5
5
  @mouseleave="mainMenuHovered = false"
6
6
  >
7
7
  <div
8
- v-show="showMenu"
9
- :class="['nav-context', { collapsed: menuCollapsed }]"
8
+ v-show="props.showMenu"
9
+ :class="['nav-context', { collapsed: props.menuCollapsed }]"
10
10
  >
11
11
  <div class="tools">
12
- <div v-show="!menuCollapsed" class="pin-wrap">
12
+ <div v-show="!props.menuCollapsed" class="pin-wrap">
13
13
  <input
14
14
  id="pin-menu-control"
15
- v-model="menuPined"
15
+ v-model="props.menuPined"
16
16
  data-id="navigation-panel-pin-menu-control"
17
17
  type="checkbox"
18
18
  :disabled="props.disabledPin"
19
- @change="changeMenuPin"
19
+ @change="emits('change-menu-pin')"
20
20
  />
21
21
  <label for="pin-menu-control" class="pointer flex-align-center">
22
- <ui-icon-icon3
23
- :name="menuPined ? 'unpin' : 'pin'"
22
+ <ui-icon-main-navigation-panel
23
+ :name="props.menuPined ? 'unpin' : 'pin'"
24
24
  width="12px"
25
25
  height="12px"
26
26
  />
27
- <span v-if="!menuPined">{{ localization.pinMenu }}</span>
27
+ <span v-if="!props.menuPined">{{ localization.pinMenu }}</span>
28
28
  <span v-else>{{ localization.unpinMenu }}</span>
29
29
  </label>
30
30
  </div>
31
31
 
32
32
  <button
33
- v-if="menuPined"
33
+ v-if="props.menuPined"
34
34
  id="nav-trigger"
35
35
  data-id="navigation-panel-trigger"
36
36
  class="nav-trigger"
37
- @click="collapseMenu"
37
+ @click="emits('collapse-menu')"
38
38
  >
39
39
  <span class="nav-trigger-icon flex">
40
- <ui-icon-icon3 name="doubleArrow" width="16px" height="16px" />
40
+ <ui-icon-main-navigation-panel name="doubleArrow" width="16px" height="16px" />
41
41
  </span>
42
42
  </button>
43
43
  </div>
@@ -53,9 +53,9 @@
53
53
  active-class="active"
54
54
  :to="item2.to"
55
55
  :title="item2.title"
56
- @click="hideMainMenu"
56
+ @click="emits('hide-main-menu')"
57
57
  >
58
- <ui-icon-icon3 :name="item2.iconName" width="20px" height="20px" />
58
+ <ui-icon-main-navigation-panel :name="item2.iconName" width="20px" height="20px" />
59
59
  <span class="nav-text">{{ item2.title }}</span>
60
60
  </nuxt-link>
61
61
  <div
@@ -78,99 +78,22 @@ const props = defineProps<{
78
78
  navigationItems: UI_I_NavigationItem[][]
79
79
  parentStatus: UI_T_ParentStatus
80
80
  disabledPin: boolean
81
+ menuPined: boolean
82
+ menuCollapsed: boolean
83
+ showMenu: boolean
81
84
  }>()
82
85
  const emits = defineEmits<{
83
86
  (event: 'toggle', value: boolean): void
87
+ (event: 'collapse-menu'): void
88
+ (event: 'change-menu-pin'): void
89
+ (event: 'hide-main-menu'): void
84
90
  }>()
85
91
 
86
- // const { $store } = useNuxtApp()
87
-
88
- const localization = computed<UI_I_Localization>(() => useLocal())
89
- const route = useRoute()
90
-
91
- const showMenu = computed<boolean>(
92
- () => props.mainMenuStatus || menuPined.value
93
- )
94
-
95
- const menuPined = ref<boolean>(false)
96
- const changeMenuPin = (): void => {
97
- useLocalStorage('menuPined', menuPined.value)
98
- }
99
- const setMenuPined = (): void => {
100
- menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
101
- }
102
- watch(
103
- () => props.disabledPin,
104
- () => {
105
- setMenuPined()
106
- },
107
- { immediate: true }
108
- )
109
-
110
- const menuCollapsed = ref<boolean>(false)
111
- const collapseMenu = (): void => {
112
- menuCollapsed.value = !menuCollapsed.value
113
- useLocalStorage('menuCollapsed', menuCollapsed.value)
114
- }
115
-
116
- const mainMenuHovered = ref<boolean>(false)
117
-
118
- const clickWindow = (event: Event): void => {
119
- const target = event.target as any
120
- if (
121
- menuPined.value ||
122
- mainMenuHovered.value ||
123
- target.className.baseVal?.includes('menu-icon') ||
124
- target.className.baseVal?.includes('clr-i-outline')
125
- ) {
126
- return
127
- }
128
-
129
- emits('toggle', false)
130
- }
131
-
132
- const mountedReady = ref<boolean>(false)
133
- onMounted(() => {
134
- mountedReady.value = true
135
- window.addEventListener('click', clickWindow)
136
- })
137
-
138
- onUnmounted(() => {
139
- window.removeEventListener('click', clickWindow)
92
+ const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
93
+ required: true,
140
94
  })
141
95
 
142
- watch(
143
- [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
144
- ([newValue1, newValue2, newValue3]: [
145
- boolean,
146
- any,
147
- UI_T_ParentStatus
148
- ]): void => {
149
- if (newValue3 === 1) return
150
-
151
- const name = location.pathname.split('/')[1]
152
-
153
- if (!newValue1 || name === 'auth') return
154
-
155
- setSidebarOptions()
156
- useLocalStorage('navigationHistoryRoute', newValue2)
157
- },
158
- { immediate: true, deep: true }
159
- )
160
-
161
- const setSidebarOptions = (): void => {
162
- setMenuPined()
163
- menuCollapsed.value = useLocalStorage('menuCollapsed')
164
-
165
- if (menuPined.value) {
166
- emits('toggle', true)
167
- }
168
- }
169
-
170
- const hideMainMenu = (): void => {
171
- if (menuPined.value) return
172
- emits('toggle', false)
173
- }
96
+ const localization = computed<UI_I_Localization>(() => useLocal())
174
97
  </script>
175
98
 
176
99
  <style scoped lang="scss">
@@ -1,28 +1,28 @@
1
1
  <template>
2
2
  <div
3
- :class="['main-navigation-panel', { pinned: menuPined }]"
3
+ :class="['main-navigation-panel', { pinned: props.menuPined }]"
4
4
  @mouseenter="mainMenuHovered = true"
5
5
  @mouseleave="mainMenuHovered = false"
6
6
  >
7
7
  <div
8
- v-show="showMenu"
9
- :class="['nav-context', { collapsed: menuCollapsed }]"
8
+ v-show="props.showMenu"
9
+ :class="['nav-context', { collapsed: props.menuCollapsed }]"
10
10
  >
11
11
  <div class="category-wrap">
12
12
  <div class="clr-vertical-nav">
13
13
  <button
14
- v-if="menuPined"
14
+ v-if="props.menuPined"
15
15
  id="nav-trigger"
16
16
  data-id="navigation-panel-trigger"
17
17
  class="nav-trigger"
18
- @click="collapseMenu"
18
+ @click="emits('collapse-menu')"
19
19
  >
20
20
  <span class="nav-trigger-icon">
21
21
  <atoms-the-icon name="doubleArrows" />
22
22
  </span>
23
23
  </button>
24
24
  <div class="nav-content">
25
- <template v-for="(item, key) in navigationItems" :key="key">
25
+ <template v-for="(item, key) in props.navigationItems" :key="key">
26
26
  <nuxt-link
27
27
  v-for="(item2, key2) in item"
28
28
  :id="`nav-item-${key}-${key2}`"
@@ -32,7 +32,7 @@
32
32
  active-class="active"
33
33
  :to="item2.to"
34
34
  :title="item2.title"
35
- @click="hideMainMenu"
35
+ @click="emits('hide-main-menu')"
36
36
  >
37
37
  <span class="nav-text">
38
38
  <span
@@ -52,15 +52,15 @@
52
52
  </div>
53
53
  </div>
54
54
 
55
- <div v-show="!menuCollapsed" class="pin-wrap">
55
+ <div v-show="!props.menuCollapsed" class="pin-wrap">
56
56
  <div class="clr-checkbox-wrapper">
57
57
  <input
58
58
  id="pin-menu-control"
59
- v-model="menuPined"
59
+ v-model="props.menuPined"
60
60
  data-id="navigation-panel-pin-menu-control"
61
61
  type="checkbox"
62
62
  :disabled="props.disabledPin"
63
- @change="changeMenuPin"
63
+ @change="emits('change-menu-pin')"
64
64
  />
65
65
  <label for="pin-menu-control">{{ localization.pinMenu }}</label>
66
66
  </div>
@@ -79,99 +79,22 @@ const props = defineProps<{
79
79
  navigationItems: UI_I_NavigationItem[][]
80
80
  parentStatus: UI_T_ParentStatus
81
81
  disabledPin: boolean
82
+ menuPined: boolean
83
+ menuCollapsed: boolean
84
+ showMenu: boolean
82
85
  }>()
83
86
  const emits = defineEmits<{
84
87
  (event: 'toggle', value: boolean): void
88
+ (event: 'collapse-menu'): void
89
+ (event: 'change-menu-pin'): void
90
+ (event: 'hide-main-menu'): void
85
91
  }>()
86
92
 
87
- // const { $store } = useNuxtApp()
88
-
89
- const localization = computed<UI_I_Localization>(() => useLocal())
90
- const route = useRoute()
91
-
92
- const showMenu = computed<boolean>(
93
- () => props.mainMenuStatus || menuPined.value
94
- )
95
-
96
- const menuPined = ref<boolean>(false)
97
- const changeMenuPin = (): void => {
98
- useLocalStorage('menuPined', menuPined.value)
99
- }
100
- const setMenuPined = (): void => {
101
- menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
102
- }
103
- watch(
104
- () => props.disabledPin,
105
- () => {
106
- setMenuPined()
107
- },
108
- { immediate: true }
109
- )
110
-
111
- const menuCollapsed = ref<boolean>(false)
112
- const collapseMenu = (): void => {
113
- menuCollapsed.value = !menuCollapsed.value
114
- useLocalStorage('menuCollapsed', menuCollapsed.value)
115
- }
116
-
117
- const mainMenuHovered = ref<boolean>(false)
118
-
119
- const clickWindow = (event: Event): void => {
120
- const target = event.target as any
121
- if (
122
- menuPined.value ||
123
- mainMenuHovered.value ||
124
- target.className.baseVal?.includes('menu-icon') ||
125
- target.className.baseVal?.includes('clr-i-outline')
126
- ) {
127
- return
128
- }
129
-
130
- emits('toggle', false)
131
- }
132
-
133
- const mountedReady = ref<boolean>(false)
134
- onMounted(() => {
135
- mountedReady.value = true
136
- window.addEventListener('click', clickWindow)
137
- })
138
-
139
- onUnmounted(() => {
140
- window.removeEventListener('click', clickWindow)
93
+ const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
94
+ required: true,
141
95
  })
142
96
 
143
- watch(
144
- [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
145
- ([newValue1, newValue2, newValue3]: [
146
- boolean,
147
- any,
148
- UI_T_ParentStatus
149
- ]): void => {
150
- if (newValue3 === 1) return
151
-
152
- const name = location.pathname.split('/')[1]
153
-
154
- if (!newValue1 || name === 'auth') return
155
-
156
- setSidebarOptions()
157
- useLocalStorage('navigationHistoryRoute', newValue2)
158
- },
159
- { immediate: true, deep: true }
160
- )
161
-
162
- const setSidebarOptions = (): void => {
163
- setMenuPined()
164
- menuCollapsed.value = useLocalStorage('menuCollapsed')
165
-
166
- if (menuPined.value) {
167
- emits('toggle', true)
168
- }
169
- }
170
-
171
- const hideMainMenu = (): void => {
172
- if (menuPined.value) return
173
- emits('toggle', false)
174
- }
97
+ const localization = computed<UI_I_Localization>(() => useLocal())
175
98
  </script>
176
99
 
177
100
  <style scoped lang="scss">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.3.450",
4
+ "version": "1.3.451",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",