bfg-common 1.5.463 → 1.5.464

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

@@ -1,130 +1,130 @@
-<template>
-  <ui-stack-block :has-children="false">
-    <template #stackBlockKey>
-      <span class="limit-title mt-2">
-        {{ 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"
-            size="md"
-            test-id="passthrough-host-cpu"
-            @change="emits('change-passthrough-host-cpu', $event)"
-          />
-
-          <common-tooltip-help
-            class="ml-2"
-            test-id="passthrough-help"
-            help-id="passthrough-help-icon"
-            dropdown-width="480px"
-            dropdown-left
-            is-disabled
-          >
-            <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>
-          </common-tooltip-help>
-        </div>
-        <div class="host-model-cpu-wrap flex-align-center">
-          <ui-checkbox
-            v-model="hostModelCpu"
-            :disabled="props.disabled"
-            :label-text="localization.common.hostModelCpu"
-            size="md"
-            test-id="host-model-cpu"
-            @change="emits('change-host-model-cpu', $event)"
-          />
-
-          <common-tooltip-help
-            class="ml-2"
-            test-id="host-model-help"
-            help-id="host-model-help-icon"
-            dropdown-width="480px"
-            dropdown-left
-            is-disabled
-          >
-            <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>
-          </common-tooltip-help>
-        </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 onChangeCpuModel = (data: UI_T_SelectedValue): void => {
-  emits('change-cpu-model', { target: { value: data } })
-}
-</script>
-
-<style scoped lang="scss">
-.limit-title {
-  margin-right: 12px;
-}
-.cpu-model-content {
-  display: flex;
-  flex-direction: column;
-  //width: 224px;
-  gap: 12px;
-
-  .tooltip-main {
-    width: 224px;
-  }
-
-  :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;
-  }
-}
-</style>
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      <span class="limit-title mt-2">
+        {{ 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"
+            size="md"
+            test-id="passthrough-host-cpu"
+            @change="emits('change-passthrough-host-cpu', $event)"
+          />
+
+          <common-tooltip-help
+            class="ml-2"
+            test-id="passthrough-help"
+            help-id="passthrough-help-icon"
+            dropdown-width="480px"
+            dropdown-left
+            is-disabled
+          >
+            <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>
+          </common-tooltip-help>
+        </div>
+        <div class="host-model-cpu-wrap flex-align-center">
+          <ui-checkbox
+            v-model="hostModelCpu"
+            :disabled="props.disabled"
+            :label-text="localization.common.hostModelCpu"
+            size="md"
+            test-id="host-model-cpu"
+            @change="emits('change-host-model-cpu', $event)"
+          />
+
+          <common-tooltip-help
+            class="ml-2"
+            test-id="host-model-help"
+            help-id="host-model-help-icon"
+            dropdown-width="480px"
+            dropdown-left
+            is-disabled
+          >
+            <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>
+          </common-tooltip-help>
+        </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 onChangeCpuModel = (data: UI_T_SelectedValue): void => {
+  emits('change-cpu-model', { target: { value: data } })
+}
+</script>
+
+<style scoped lang="scss">
+.limit-title {
+  margin-right: 12px;
+}
+.cpu-model-content {
+  display: flex;
+  flex-direction: column;
+  //width: 224px;
+  gap: 12px;
+
+  .tooltip-main {
+    width: 224px;
+  }
+
+  :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;
+  }
+}
+</style>

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

@@ -1,168 +1,168 @@
-<template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.common.cpuModel }}
-      </template>
-      <template #stackBlockContent>
-        <div>
-          <atoms-tooltip-error
-            :has-error="!!props.errorText"
-            selector="#vm-wizard-cpu-model-field"
-            @remove="emits('remove-error')"
-          >
-            <template #elem>
-              <div class="select">
-                <select
-                  id="vm-wizard-cpu-model-field"
-                  :value="props.cpuModel"
-                  :disabled="props.disabled"
-                  data-id="vm-wizard-cpu-model-field"
-                  @change="emits('change-cpu-model', $event)"
-                >
-                  <option
-                    v-for="(item, key) in props.cpuModelOptions"
-                    :key="key"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </template>
-            <template #content>{{ errorText }}</template>
-          </atoms-tooltip-error>
-
-          <div class="flex align-start flex-col cpu-model-checkbox">
-            <div class="passthrough-host-cpu-wrap flex-align-center">
-              <input
-                id="passthrough-host-cpu"
-                v-model="passthroughHostCpu"
-                :disabled="props.disabled"
-                data-id="passthrough-host-cpu"
-                type="checkbox"
-                @change="emits('change-passthrough-host-cpu', $event)"
-              />
-              <label for="passthrough-host-cpu" class="label-text-normal">{{
-                localization.common.passthroughHostCpu
-              }}</label>
-              <div
-                id="passthrough-help-icon"
-                class="flex-align-center relative"
-              >
-                <atoms-the-icon
-                  data-id="show-passthrough-help-icon"
-                  fill="#0072a3"
-                  width="24px"
-                  height="24px"
-                  name="info-circle"
-                  class="cursor-pointer"
-                  @click.stop="selectedTooltip = selectedTooltip === 'passthroughHostCpu' ? '' : 'passthroughHostCpu'"
-                />
-                <Teleport to="body">
-                  <atoms-tooltip-signpost
-                    v-if="selectedTooltip === 'passthroughHostCpu'"
-                    elem-id="passthrough-help-icon"
-                    @hide="selectedTooltip = ''"
-                  >
-                    <h3 class="passthrough-help-title">
-                      {{ localization.mainNavigation.help }}
-                    </h3>
-
-                    <p class="passthrough-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>
-                  </atoms-tooltip-signpost>
-                </Teleport>
-              </div>
-            </div>
-            <div class="flex-align-center">
-              <input
-                id="host-model-cpu"
-                v-model="hostModelCpu"
-                :disabled="props.disabled"
-                data-id="host-model-cpu-input"
-                type="checkbox"
-                @change="emits('change-host-model-cpu', $event)"
-              />
-              <label for="host-model-cpu" class="label-text-normal">{{
-                localization.common.hostModelCpu
-              }}</label>
-              <div id="host-model-help-icon" class="flex-align-center relative">
-                <atoms-the-icon
-                  fill="#0072a3"
-                  width="24px"
-                  height="24px"
-                  name="info-circle"
-                  class="cursor-pointer"
-                  data-id="show-host-model-help-icon"
-                  @click.stop="selectedTooltip = selectedTooltip === 'hostModel' ? '' : 'hostModel'"
-                />
-                <Teleport to="body">
-                  <atoms-tooltip-signpost
-                    v-if="selectedTooltip === 'hostModel'"
-                    elem-id="host-model-help-icon"
-                    @hide="selectedTooltip = ''"
-                  >
-                    <h3 class="host-model-help-title">
-                      {{ localization.mainNavigation.help }}
-                    </h3>
-
-                    <p class="host-model-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>
-                  </atoms-tooltip-signpost>
-                </Teleport>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_Localization,
-  UI_I_HTMLSelectElement,
-} from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
-const passthroughHostCpu = defineModel<boolean>('passthroughHostCpu')
-const hostModelCpu = defineModel<boolean>('hostModelCpu')
-
-const props = defineProps<{
-  cpuModel: string
-  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())
-
-</script>
-
-<style scoped lang="scss">
-.cpu-model-checkbox {
-  margin-top: 4px;
-}
-
-#passthrough-host-cpu,
-#host-model-cpu {
-  margin: 0 4px 0 0;
-}
-</style>
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.cpuModel }}
+      </template>
+      <template #stackBlockContent>
+        <div>
+          <atoms-tooltip-error
+            :has-error="!!props.errorText"
+            selector="#vm-wizard-cpu-model-field"
+            @remove="emits('remove-error')"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  id="vm-wizard-cpu-model-field"
+                  :value="props.cpuModel"
+                  :disabled="props.disabled"
+                  data-id="vm-wizard-cpu-model-field"
+                  @change="emits('change-cpu-model', $event)"
+                >
+                  <option
+                    v-for="(item, key) in props.cpuModelOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ errorText }}</template>
+          </atoms-tooltip-error>
+
+          <div class="flex align-start flex-col cpu-model-checkbox">
+            <div class="passthrough-host-cpu-wrap flex-align-center">
+              <input
+                id="passthrough-host-cpu"
+                v-model="passthroughHostCpu"
+                :disabled="props.disabled"
+                data-id="passthrough-host-cpu"
+                type="checkbox"
+                @change="emits('change-passthrough-host-cpu', $event)"
+              />
+              <label for="passthrough-host-cpu" class="label-text-normal">{{
+                localization.common.passthroughHostCpu
+              }}</label>
+              <div
+                id="passthrough-help-icon"
+                class="flex-align-center relative"
+              >
+                <atoms-the-icon
+                  data-id="show-passthrough-help-icon"
+                  fill="#0072a3"
+                  width="24px"
+                  height="24px"
+                  name="info-circle"
+                  class="cursor-pointer"
+                  @click.stop="selectedTooltip = selectedTooltip === 'passthroughHostCpu' ? '' : 'passthroughHostCpu'"
+                />
+                <Teleport to="body">
+                  <atoms-tooltip-signpost
+                    v-if="selectedTooltip === 'passthroughHostCpu'"
+                    elem-id="passthrough-help-icon"
+                    @hide="selectedTooltip = ''"
+                  >
+                    <h3 class="passthrough-help-title">
+                      {{ localization.mainNavigation.help }}
+                    </h3>
+
+                    <p class="passthrough-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>
+                  </atoms-tooltip-signpost>
+                </Teleport>
+              </div>
+            </div>
+            <div class="flex-align-center">
+              <input
+                id="host-model-cpu"
+                v-model="hostModelCpu"
+                :disabled="props.disabled"
+                data-id="host-model-cpu-input"
+                type="checkbox"
+                @change="emits('change-host-model-cpu', $event)"
+              />
+              <label for="host-model-cpu" class="label-text-normal">{{
+                localization.common.hostModelCpu
+              }}</label>
+              <div id="host-model-help-icon" class="flex-align-center relative">
+                <atoms-the-icon
+                  fill="#0072a3"
+                  width="24px"
+                  height="24px"
+                  name="info-circle"
+                  class="cursor-pointer"
+                  data-id="show-host-model-help-icon"
+                  @click.stop="selectedTooltip = selectedTooltip === 'hostModel' ? '' : 'hostModel'"
+                />
+                <Teleport to="body">
+                  <atoms-tooltip-signpost
+                    v-if="selectedTooltip === 'hostModel'"
+                    elem-id="host-model-help-icon"
+                    @hide="selectedTooltip = ''"
+                  >
+                    <h3 class="host-model-help-title">
+                      {{ localization.mainNavigation.help }}
+                    </h3>
+
+                    <p class="host-model-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>
+                  </atoms-tooltip-signpost>
+                </Teleport>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
+const passthroughHostCpu = defineModel<boolean>('passthroughHostCpu')
+const hostModelCpu = defineModel<boolean>('hostModelCpu')
+
+const props = defineProps<{
+  cpuModel: string
+  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())
+
+</script>
+
+<style scoped lang="scss">
+.cpu-model-checkbox {
+  margin-top: 4px;
+}
+
+#passthrough-host-cpu,
+#host-model-cpu {
+  margin: 0 4px 0 0;
+}
+</style>