bfg-common 1.5.241 → 1.5.243

package/components/common/spiceConsole/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_DeviceOption {
-  label: string
-  value: any
-  disabled?: boolean
-}
+export interface UI_I_DeviceOption {
+  label: string
+  value: any
+  disabled?: boolean
+}

package/components/common/tooltip/Help.vue

@@ -0,0 +1,181 @@
+<template>
+  <!--  <div :id="props.helpId" class="flex-align-center relative">-->
+  <!--    <ui-icon-->
+  <!--      :data-id="`${props.testId}-show-help-icon`"-->
+  <!--      :width="props.iconWidth || '16'"-->
+  <!--      :height="props.iconHeight || '16'"-->
+  <!--      name="info"-->
+  <!--      :class="['help-icon cursor-pointer', {active: isShowHelp}, {disabled: props.isDisabled}]"-->
+  <!--      @click.stop="isShowHelp = !isShowHelp"-->
+  <!--    />-->
+  <!--    <Teleport to="body">-->
+  <!--      <ui-dropdown-->
+  <!--        :show="isShowHelp"-->
+  <!--        :elem-id="props.helpId"-->
+  <!--        :items="[]"-->
+  <!--        :test-id="`${props.testId}-help-icon`"-->
+  <!--        :width="props.dropdownWidth || '480px'"-->
+  <!--        :max-height="props.dropdownMaxHeight || 'unset'"-->
+  <!--        :left="props.dropdownLeft"-->
+  <!--        :right="props.dropdownRight"-->
+  <!--        :top="props.dropdownTop"-->
+  <!--        @hide="isShowHelp = false"-->
+  <!--      >-->
+  <!--        <template #content>-->
+  <!--          <div class="help-content">-->
+  <!--            <div class="headline">-->
+  <!--              <ui-icon :name="tooltipStatus" width="16" height="16" />-->
+  <!--              <h3 class="help-title">-->
+  <!--                {{ props.title || localization.mainNavigation.help }}-->
+  <!--              </h3>-->
+  <!--              <ui-icon-->
+  <!--                name="close"-->
+  <!--                width="16"-->
+  <!--                height="16"-->
+  <!--                class="help-close-icon cursor-pointer"-->
+  <!--                @click.stop="isShowHelp = false"-->
+  <!--              />-->
+  <!--            </div>-->
+
+  <!--            <slot />-->
+
+  <!--            <p v-if="props.helpText" class="help-text">-->
+  <!--              {{ props.helpText }}-->
+  <!--            </p>-->
+  <!--          </div>-->
+  <!--        </template>-->
+  <!--      </ui-dropdown>-->
+  <!--    </Teleport>-->
+  <!--  </div>-->
+
+  <div class="flex-align-center relative">
+    <ui-icon
+        :id="`${props.helpId}`"
+        :data-id="`${props.testId}-show-help-icon`"
+        name="info"
+        :width="props.iconWidth || '16'"
+        :height="props.iconHeight || '16'"
+        :class="['help-icon cursor-pointer', {active: isShowHelp}, {disabled: props.isDisabled}]"
+        @click.stop="isShowHelp = !isShowHelp"
+    />
+    <ui-popup-window
+        v-model="isShowHelp"
+        :left="props.dropdownLeft"
+        :right="props.dropdownRight"
+        :top="props.dropdownTop"
+        :elem-id="props.helpId"
+        :width="props.dropdownWidth || 'max-content'"
+        :max-height="props.dropdownMaxHeight || 'unset'"
+
+    >
+      <div class="help-content" :style="{ width: props.dropdownWidth }">
+        <div class="headline">
+          <ui-icon :name="tooltipStatus" width="16" height="16" />
+          <h3 class="help-title">
+            {{ props.title || localization.mainNavigation.help }}
+          </h3>
+          <ui-icon
+              name="close"
+              width="16"
+              height="16"
+              class="help-close-icon cursor-pointer"
+              @click.stop="isShowHelp = false"
+          />
+        </div>
+
+        <slot />
+
+        <p v-if="props.helpText" class="help-text">
+          {{ props.helpText }}
+        </p>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+<script setup lang="ts">
+
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { T_TooltipHelpStatus } from '~/components/common/tooltip/lib/models/types'
+
+const props = defineProps<{
+  testId: string,
+  helpId: string,
+  dropdownWidth?: string
+  helpText?: string,
+  iconWidth?: string,
+  iconHeight?: string,
+  dropdownMaxHeight?: string,
+  dropdownLeft?: boolean,
+  dropdownRight?: boolean,
+  dropdownTop?: boolean,
+  isDisabled?: boolean,
+  title?: string,
+  status?: T_TooltipHelpStatus
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowHelp = ref<boolean>(false)
+
+const tooltipStatus = computed<string>(() => props.status === 'error' ? 'error' : 'info-2')
+
+</script>
+<style>
+:root {
+  --help-color: #4d5d69;
+  --help-icon-hover-color: #4d5d69;
+  --help-icon-active-color: #008fd6;
+  --help-close-icon-color: #182531;
+}
+:root.dark-theme {
+  --help-color: #e9eaec;
+  --help-icon-hover-color: #e9eaec;
+  --help-icon-active-color: #2ba2de;
+  --help-close-icon-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.help-icon {
+  color: #9da6ad; // for light and dark
+
+  &:hover {
+    color: var(--help-icon-hover-color);
+  }
+  &.active {
+    color: var(--help-icon-active-color);
+  }
+  &.disabled {
+    color: #bdc3c7;
+    pointer-events: none;
+  }
+}
+.help-content {
+  padding: 16px;
+
+  .headline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+
+    .help-title {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--help-color);
+    }
+    .help-close-icon {
+      color: var(--help-close-icon-color)
+    }
+  }
+
+  :deep(.help-text) {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: var(--help-color);
+    word-break: break-word;
+    white-space: normal;
+  }
+}
+</style>

package/components/common/tooltip/lib/models/types.ts

@@ -0,0 +1 @@
+export type T_TooltipHelpStatus = 'info' | 'error'

package/components/common/vm/actions/add/folderTreeView/FolderTreeView.vue

@@ -1,72 +1,72 @@
-<template>
-  <common-vm-actions-add-folder-tree-view-new
-    v-if="isNewView"
-    :nodes="nodes"
-    :loading="loading"
-    @show-nodes="showNodes"
-    @select-node="selectNode"
-  />
-  <common-vm-actions-add-folder-tree-view-old
-    v-else
-    :nodes="nodes"
-    :loading="loading"
-    @show-nodes="showNodes"
-    @select-node="selectNode"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const props = defineProps<{
-  dataCenter: UI_I_TreeNode
-}>()
-const emits = defineEmits<{
-  (event: 'select-node', value: UI_I_TreeNode): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const nodes = computed<UI_I_TreeNode[]>(
-  () => $store.getters['inventory/getFolderTree'] || []
-)
-const loading = ref<boolean>(false)
-const getTree = async (): Promise<void> => {
-  loading.value = true
-  await $store.dispatch('inventory/A_GET_FOLDER_TREE', null)
-  loading.value = false
-}
-getTree().then(() => {
-  selectNode(props.dataCenter)
-})
-
-const showNodes = ({
-  node,
-  cb,
-}: {
-  node: UI_I_TreeNode
-  cb: () => void
-}): void => {
-  const payload: any = { node, treeName: 'folderTree' }
-  $store.dispatch('inventory/A_SHOW_NODE', payload)
-  cb()
-}
-const selectNode = (node: UI_I_TreeNode): void => {
-  const payload: any = {
-    node,
-    treeName: 'folderTree',
-    doSelect: false,
-  }
-  $store.dispatch('inventory/A_SELECT_NODE', payload)
-
-  emits('select-node', node)
-}
-
-onUnmounted(() => {
-  $store.dispatch('inventory/A_CLEAR_FOLDER_TREE', null)
-})
-</script>
-
-<style scoped lang="scss">
-</style>
+<template>
+  <common-vm-actions-add-folder-tree-view-new
+    v-if="isNewView"
+    :nodes="nodes"
+    :loading="loading"
+    @show-nodes="showNodes"
+    @select-node="selectNode"
+  />
+  <common-vm-actions-add-folder-tree-view-old
+    v-else
+    :nodes="nodes"
+    :loading="loading"
+    @show-nodes="showNodes"
+    @select-node="selectNode"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const props = defineProps<{
+  dataCenter: UI_I_TreeNode
+}>()
+const emits = defineEmits<{
+  (event: 'select-node', value: UI_I_TreeNode): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const nodes = computed<UI_I_TreeNode[]>(
+  () => $store.getters['inventory/getFolderTree'] || []
+)
+const loading = ref<boolean>(false)
+const getTree = async (): Promise<void> => {
+  loading.value = true
+  await $store.dispatch('inventory/A_GET_FOLDER_TREE', null)
+  loading.value = false
+}
+getTree().then(() => {
+  selectNode(props.dataCenter)
+})
+
+const showNodes = ({
+  node,
+  cb,
+}: {
+  node: UI_I_TreeNode
+  cb: () => void
+}): void => {
+  const payload: any = { node, treeName: 'folderTree' }
+  $store.dispatch('inventory/A_SHOW_NODE', payload)
+  cb()
+}
+const selectNode = (node: UI_I_TreeNode): void => {
+  const payload: any = {
+    node,
+    treeName: 'folderTree',
+    doSelect: false,
+  }
+  $store.dispatch('inventory/A_SELECT_NODE', payload)
+
+  emits('select-node', node)
+}
+
+onUnmounted(() => {
+  $store.dispatch('inventory/A_CLEAR_FOLDER_TREE', null)
+})
+</script>
+
+<style scoped lang="scss">
+</style>

package/components/common/vm/actions/add/folderTreeView/New.vue

@@ -1,40 +1,40 @@
-<template>
-  <div class="tree-view">
-    <ui-tree
-      :nodes="props.nodes"
-      :expand-all="false"
-      :is-loading="props.loading"
-      @toggle-node="onShowNodes"
-      @select-node="emits('select-node', $event)"
-    >
-      <template #content="{ node }">
-        <div class="flex-align-center">
-          <span :class="['node-icon', node.iconClassName]"></span>
-          <span class="node-name">{{ node.name }}</span>
-        </div>
-      </template>
-    </ui-tree>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const props = defineProps<{
-  loading: boolean
-  nodes: UI_I_TreeNode[]
-}>()
-const emits = defineEmits<{
-  (event: 'select-node', value: UI_I_TreeNode): void
-  (event: 'show-nodes', value: {
-    node: UI_I_TreeNode
-    cb: () => void
-  }): void
-}>()
-
-const onShowNodes = (node: UI_I_TreeNode) => {
-  emits('show-nodes', { node, cb: (): void => {} })
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div class="tree-view">
+    <ui-tree
+      :nodes="props.nodes"
+      :expand-all="false"
+      :is-loading="props.loading"
+      @toggle-node="onShowNodes"
+      @select-node="emits('select-node', $event)"
+    >
+      <template #content="{ node }">
+        <div class="flex-align-center">
+          <span :class="['node-icon', node.iconClassName]"></span>
+          <span class="node-name">{{ node.name }}</span>
+        </div>
+      </template>
+    </ui-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  nodes: UI_I_TreeNode[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-node', value: UI_I_TreeNode): void
+  (event: 'show-nodes', value: {
+    node: UI_I_TreeNode
+    cb: () => void
+  }): void
+}>()
+
+const onShowNodes = (node: UI_I_TreeNode) => {
+  emits('show-nodes', { node, cb: (): void => {} })
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/add/folderTreeView/Old.vue

@@ -1,50 +1,50 @@
-<template>
-  <div class="tree-view">
-    <atoms-loader-pre-loader
-      v-show="props.loading"
-      id="loader"
-      class="absolute-center tree-view__loading"
-      :show="true"
-    />
-    <common-recursion-tree
-      :nodes="props.nodes"
-      class="recursion-tree"
-      @get-nodes="emits('show-nodes', $event)"
-      @select-node="emits('select-node', $event)"
-      @contextmenu.prevent
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const props = defineProps<{
-  loading: boolean
-  nodes: UI_I_TreeNode[]
-}>()
-const emits = defineEmits<{
-  (event: 'select-node', value: UI_I_TreeNode): void
-  (
-    event: 'show-nodes',
-    value: {
-      node: UI_I_TreeNode
-      cb: () => void
-    }
-  ): void
-}>()
-</script>
-
-<style scoped lang="scss">
-.tree-view {
-  &__loading {
-    :deep(.spinner.spinner-inverse) {
-      position: static;
-      width: 45px;
-      height: 45px;
-      min-width: 45px;
-      min-height: 45px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="tree-view">
+    <atoms-loader-pre-loader
+      v-show="props.loading"
+      id="loader"
+      class="absolute-center tree-view__loading"
+      :show="true"
+    />
+    <common-recursion-tree
+      :nodes="props.nodes"
+      class="recursion-tree"
+      @get-nodes="emits('show-nodes', $event)"
+      @select-node="emits('select-node', $event)"
+      @contextmenu.prevent
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const props = defineProps<{
+  loading: boolean
+  nodes: UI_I_TreeNode[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-node', value: UI_I_TreeNode): void
+  (
+    event: 'show-nodes',
+    value: {
+      node: UI_I_TreeNode
+      cb: () => void
+    }
+  ): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.tree-view {
+  &__loading {
+    :deep(.spinner.spinner-inverse) {
+      position: static;
+      width: 45px;
+      height: 45px;
+      min-width: 45px;
+      min-height: 45px;
+    }
+  }
+}
+</style>