bfg-common 1.5.243 → 1.5.245

package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue

@@ -17,62 +17,53 @@
           size="sm"
         />
 
-        <div v-if="props.helpText">
-          <common-tooltip-help
-              :test-id="`${props.testId}`"
-              :help-id="`${props.helpId}`"
-              :help-text="props.helpText"
-              :dropdown-left="true"
-              dropdown-width="480px"
+        <div
+          v-if="props.helpText"
+          :id="props.helpId"
+          class="flex-align-center relative"
+        >
+          <ui-icon
+            :data-id="`${props.testId}-show-help-icon`"
+            width="20"
+            height="20"
+            name="info"
+            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"
+            @click.stop="isShowHelp = !isShowHelp"
           />
-        </div>
-<!--        <div-->
-<!--          v-if="props.helpText"-->
-<!--          :id="props.helpId"-->
-<!--          class="flex-align-center relative"-->
-<!--        >-->
-<!--          <ui-icon-->
-<!--            :data-id="`${props.testId}-show-help-icon`"-->
-<!--            width="16"-->
-<!--            height="16"-->
-<!--            name="info"-->
-<!--            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"-->
-<!--            @click.stop="isShowHelp = !isShowHelp"-->
-<!--          />-->
-<!--          <Teleport to="body">-->
-<!--            <ui-dropdown-->
-<!--              :show="isShowHelp"-->
-<!--              :elem-id="props.helpId"-->
-<!--              :items="[]"-->
-<!--              test-id=""-->
-<!--              width="480px"-->
-<!--              left-->
-<!--              @hide="isShowHelp = false"-->
-<!--            >-->
-<!--              <template #content>-->
-<!--                <div class="help-content">-->
-<!--                  <div class="headline">-->
-<!--                    <ui-icon name="info-2" width="16" height="16" />-->
-<!--                    <h3 class="help-title">-->
-<!--                      {{ localization.mainNavigation.help }}-->
-<!--                    </h3>-->
-<!--                    <ui-icon-->
-<!--                      name="close"-->
-<!--                      width="16"-->
-<!--                      height="16"-->
-<!--                      class="bus-help-close-icon cursor-pointer"-->
-<!--                      @click="isShowHelp = false"-->
-<!--                    />-->
-<!--                  </div>-->
+          <Teleport to="body">
+            <ui-dropdown
+              :show="isShowHelp"
+              :elem-id="props.helpId"
+              :items="[]"
+              test-id=""
+              width="480px"
+              left
+              @hide="isShowHelp = false"
+            >
+              <template #content>
+                <div class="help-content">
+                  <div class="headline">
+                    <ui-icon name="info-2" width="16" height="16" />
+                    <h3 class="help-title">
+                      {{ localization.mainNavigation.help }}
+                    </h3>
+                    <ui-icon
+                      name="close"
+                      width="16"
+                      height="16"
+                      class="bus-help-close-icon cursor-pointer"
+                      @click="isShowHelp = false"
+                    />
+                  </div>
 
-<!--                  <p class="help-text">-->
-<!--                    {{ props.helpText }}-->
-<!--                  </p>-->
-<!--                </div>-->
-<!--              </template>-->
-<!--            </ui-dropdown>-->
-<!--          </Teleport>-->
-<!--        </div>-->
+                  <p class="help-text">
+                    {{ props.helpText }}
+                  </p>
+                </div>
+              </template>
+            </ui-dropdown>
+          </Teleport>
+        </div>
       </div>
     </template>
   </ui-stack-block>
@@ -83,7 +74,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
 const bus = defineModel<string>('bus')
-// const isShowHelp = defineModel<boolean>('isShowHelp')
+const isShowHelp = defineModel<boolean>('isShowHelp')
 
 const props = defineProps<{
   index: number
@@ -103,55 +94,55 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style>
-//:root {
-//  --bus-help-color: #4d5d69;
-//  --bus-help-icon-hover-color: #4d5d69;
-//  --bus-help-icon-active-color: #008fd6;
-//  --bus-help-close-icon-color: #182531;
-//}
-//:root.dark-theme {
-//  --bus-help-color: #e9eaec;
-//  --bus-help-icon-hover-color: #e9eaec;
-//  --bus-help-icon-active-color: #2ba2de;
-//  --bus-help-close-icon-color: #e9eaec;
-//}
+:root {
+  --bus-help-color: #4d5d69;
+  --bus-help-icon-hover-color: #4d5d69;
+  --bus-help-icon-active-color: #008fd6;
+  --bus-help-close-icon-color: #182531;
+}
+:root.dark-theme {
+  --bus-help-color: #e9eaec;
+  --bus-help-icon-hover-color: #e9eaec;
+  --bus-help-icon-active-color: #2ba2de;
+  --bus-help-close-icon-color: #e9eaec;
+}
 </style>
 <style lang="scss" scoped>
-//.bus-help-icon {
-//  color: #9da6ad; // for light and dark
-//
-//  &:hover {
-//    color: var(--bus-help-icon-hover-color);
-//  }
-//  &.active {
-//    color: var(--bus-help-icon-active-color);
-//  }
-//}
-//.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(--bus-help-color);
-//    }
-//    .bus-help-close-icon {
-//      color: var(--bus-help-close-icon-color)
-//    }
-//  }
-//
-//  .help-text {
-//    font-size: 13px;
-//    line-height: 15.73px;
-//    color: var(--bus-help-color);
-//  }
-//}
+.bus-help-icon {
+  color: #9da6ad; // for light and dark
+
+  &:hover {
+    color: var(--bus-help-icon-hover-color);
+  }
+  &.active {
+    color: var(--bus-help-icon-active-color);
+  }
+}
+.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(--bus-help-color);
+    }
+    .bus-help-close-icon {
+      color: var(--bus-help-close-icon-color)
+    }
+  }
+
+  .help-text {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: var(--bus-help-color);
+  }
+}
 </style>