bfg-common 1.5.239 → 1.5.240

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/model/ModelNew.vue

@@ -1,237 +1,246 @@
-<template>
-  <ui-stack-block :has-children="false">
-    <template #stackBlockKey>
-      {{ localization.common.cpuModel }}
-    </template>
-    <template #stackBlockContent>
-      <div class="cpu-model-content">
-        <ui-select
-          v-model="cpuModel"
-          :items="props.cpuModelOptions"
-          :disabled="props.disabled"
-          :error-text="props.errorText"
-          test-id="vm-wizard-cpu-model-field"
-          size="sm"
-          @change="onChangeCpuModel"
-        />
-
-        <div class="passthrough-host-cpu-wrap flex-align-center">
-          <ui-checkbox
-            v-model="passthroughHostCpu"
-            :disabled="props.disabled"
-            :label-text="localization.common.passthroughHostCpu"
-            test-id="passthrough-host-cpu"
-            @change="emits('change-passthrough-host-cpu', $event)"
-          />
-          <div id="passthrough-help-icon" class="flex-align-center relative">
-            <ui-icon
-              width="16"
-              height="16"
-              name="info"
-              data-id="show-passthrough-help-icon"
-              :class="[
-                'passthrough-help-icon cursor-pointer disabled',
-                { active: isShowPassthroughHost },
-              ]"
-              @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
-            />
-            <Teleport to="body">
-              <ui-dropdown
-                :show="isShowPassthroughHost"
-                :items="[]"
-                elem-id="passthrough-help-icon"
-                test-id=""
-                width="480px"
-                left
-                @hide="isShowPassthroughHost = 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="cursor-pointer"
-                        @click="isShowPassthroughHost = false"
-                      />
-                    </div>
-
-                    <p class="help-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                      A cum eius expedita, fuga mollitia perferendis quod soluta
-                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
-                      impedit iusto labore sunt tempora!
-                    </p>
-                  </div>
-                </template>
-              </ui-dropdown>
-            </Teleport>
-          </div>
-        </div>
-        <div class="flex-align-center">
-          <ui-checkbox
-            v-model="hostModelCpu"
-            :disabled="props.disabled"
-            :label-text="localization.common.hostModelCpu"
-            test-id="host-model-cpu"
-            @change="emits('change-host-model-cpu', $event)"
-          />
-          <div id="host-model-help-icon" class="flex-align-center relative">
-            <ui-icon
-              width="16"
-              height="16"
-              name="info"
-              data-id="show-host-model-help-icon"
-              :class="[
-                'host-model-help-icon cursor-pointer disabled',
-                { active: isShowHostModel },
-              ]"
-              @click.stop="isShowHostModel = !isShowHostModel"
-            />
-            <Teleport to="body">
-              <ui-dropdown
-                :show="isShowHostModel"
-                :items="[]"
-                elem-id="host-model-help-icon"
-                test-id=""
-                width="480px"
-                left
-                @hide="isShowHostModel = 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="cursor-pointer"
-                        @click="isShowHostModel = false"
-                      />
-                    </div>
-
-                    <p class="help-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                      A cum eius expedita, fuga mollitia perferendis quod soluta
-                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
-                      impedit iusto labore sunt tempora!
-                    </p>
-                  </div>
-                </template>
-              </ui-dropdown>
-            </Teleport>
-          </div>
-        </div>
-      </div>
-    </template>
-  </ui-stack-block>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_SelectedValue } from '~/node_modules/bfg-uikit/components/ui/select/models/types'
-import type {
-  UI_I_Localization,
-  UI_I_HTMLSelectElement,
-} from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const cpuModel = defineModel<string>('cpuModel')
-const passthroughHostCpu = defineModel<boolean>('passthroughHostCpu')
-const hostModelCpu = defineModel<boolean>('hostModelCpu')
-
-const props = defineProps<{
-  cpuModelOptions: UI_I_OptionItem[]
-  disabled: boolean
-  errorText: string
-}>()
-const emits = defineEmits<{
-  (event: 'change-cpu-model', value: UI_I_HTMLSelectElement): void
-  (event: 'change-passthrough-host-cpu', value: Event): void
-  (event: 'change-host-model-cpu', value: Event): void
-  (event: 'remove-error'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowPassthroughHost = ref<boolean>(false)
-const isShowHostModel = ref<boolean>(false)
-
-const onChangeCpuModel = (data: UI_T_SelectedValue): void => {
-  emits('change-cpu-model', { target: { value: data } })
-}
-</script>
-
-<style>
-:root {
-  --cpu-model-help-icon-color: #4d5d69;
-}
-:root.dark-theme {
-  --cpu-model-help-icon-color: #e9eaec;
-}
-</style>
-<style scoped lang="scss">
-.cpu-model-content {
-  display: flex;
-  flex-direction: column;
-  width: 224px;
-  gap: 12px;
-
-  :deep(.ui-main-select-toggle) {
-    width: 100%;
-  }
-}
-
-#passthrough-help-icon,
-#host-model-help-icon {
-  margin-left: 8px;
-}
-
-.passthrough-help-icon,
-.host-model-help-icon {
-  color: #9da6ad; // for light and dark
-
-  &:hover {
-    color: var(--cpu-model-help-icon-color);
-  }
-  &.active {
-    color: #008fd6;
-  }
-  &.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: #4d5d69;
-    }
-  }
-
-  .help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: #4d5d69;
-  }
-}
-</style>
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span class="limit-title">
+        {{ localization.common.cpuModel }}
+      </span>
+    </template>
+    <template #stackBlockContent>
+      <div class="cpu-model-content">
+        <ui-select
+          v-model="cpuModel"
+          :items="props.cpuModelOptions"
+          :disabled="props.disabled"
+          :error-text="props.errorText"
+          test-id="vm-wizard-cpu-model-field"
+          size="sm"
+          @change="onChangeCpuModel"
+        />
+
+        <div class="passthrough-host-cpu-wrap flex-align-center">
+          <ui-checkbox
+            v-model="passthroughHostCpu"
+            :disabled="props.disabled"
+            :label-text="localization.common.passthroughHostCpu"
+            test-id="passthrough-host-cpu"
+            @change="emits('change-passthrough-host-cpu', $event)"
+          />
+          <div id="passthrough-help-icon" class="flex-align-center relative">
+            <ui-icon
+              width="16"
+              height="16"
+              name="info"
+              data-id="show-passthrough-help-icon"
+              :class="[
+                'passthrough-help-icon cursor-pointer disabled',
+                { active: isShowPassthroughHost },
+              ]"
+              @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
+            />
+            <Teleport to="body">
+              <ui-dropdown
+                :show="isShowPassthroughHost"
+                :items="[]"
+                elem-id="passthrough-help-icon"
+                test-id=""
+                width="480px"
+                left
+                @hide="isShowPassthroughHost = 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="cursor-pointer"
+                        @click="isShowPassthroughHost = false"
+                      />
+                    </div>
+
+                    <p class="help-text">
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      A cum eius expedita, fuga mollitia perferendis quod soluta
+                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
+                      impedit iusto labore sunt tempora!
+                    </p>
+                  </div>
+                </template>
+              </ui-dropdown>
+            </Teleport>
+          </div>
+        </div>
+        <div class="host-model-cpu-wrap flex-align-center">
+          <ui-checkbox
+            v-model="hostModelCpu"
+            :disabled="props.disabled"
+            :label-text="localization.common.hostModelCpu"
+            test-id="host-model-cpu"
+            @change="emits('change-host-model-cpu', $event)"
+          />
+          <div id="host-model-help-icon" class="flex-align-center relative">
+            <ui-icon
+              width="16"
+              height="16"
+              name="info"
+              data-id="show-host-model-help-icon"
+              :class="[
+                'host-model-help-icon cursor-pointer disabled',
+                { active: isShowHostModel },
+              ]"
+              @click.stop="isShowHostModel = !isShowHostModel"
+            />
+            <Teleport to="body">
+              <ui-dropdown
+                :show="isShowHostModel"
+                :items="[]"
+                elem-id="host-model-help-icon"
+                test-id=""
+                width="480px"
+                left
+                @hide="isShowHostModel = 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="cursor-pointer"
+                        @click="isShowHostModel = false"
+                      />
+                    </div>
+
+                    <p class="help-text">
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                      A cum eius expedita, fuga mollitia perferendis quod soluta
+                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
+                      impedit iusto labore sunt tempora!
+                    </p>
+                  </div>
+                </template>
+              </ui-dropdown>
+            </Teleport>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_SelectedValue } from '~/node_modules/bfg-uikit/components/ui/select/models/types'
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const cpuModel = defineModel<string>('cpuModel')
+const passthroughHostCpu = defineModel<boolean>('passthroughHostCpu')
+const hostModelCpu = defineModel<boolean>('hostModelCpu')
+
+const props = defineProps<{
+  cpuModelOptions: UI_I_OptionItem[]
+  disabled: boolean
+  errorText: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-cpu-model', value: UI_I_HTMLSelectElement): void
+  (event: 'change-passthrough-host-cpu', value: Event): void
+  (event: 'change-host-model-cpu', value: Event): void
+  (event: 'remove-error'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowPassthroughHost = ref<boolean>(false)
+const isShowHostModel = ref<boolean>(false)
+
+const onChangeCpuModel = (data: UI_T_SelectedValue): void => {
+  emits('change-cpu-model', { target: { value: data } })
+}
+</script>
+
+<style>
+:root {
+  --cpu-model-help-icon-color: #4d5d69;
+}
+:root.dark-theme {
+  --cpu-model-help-icon-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.limit-title {
+  margin-right: 12px;
+}
+.cpu-model-content {
+  display: flex;
+  flex-direction: column;
+  width: 224px;
+  gap: 12px;
+
+  :deep(.ui-main-select-toggle) {
+    width: 100%;
+  }
+  .passthrough-host-cpu-wrap :deep(.ui-checkbox-label),
+  .host-model-cpu-wrap :deep(.ui-checkbox-label) {
+    min-height: unset !important;
+  }
+}
+
+#passthrough-help-icon,
+#host-model-help-icon {
+  margin-left: 8px;
+}
+
+.passthrough-help-icon,
+.host-model-help-icon {
+  color: #9da6ad; // for light and dark
+
+  &:hover {
+    color: var(--cpu-model-help-icon-color);
+  }
+  &.active {
+    color: #008fd6;
+  }
+  &.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: #4d5d69;
+    }
+  }
+
+  .help-text {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: #4d5d69;
+  }
+}
+</style>