bfg-common 1.3.99 → 1.3.101

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuModel.vue

@@ -1,220 +1,220 @@
-<template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.cpuModel }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <atoms-tooltip-error
-            :has-error="!!apiError"
-            selector="#vm-wizard-cpu-model-field"
-            @remove="onRemoveValidationError"
-          >
-            <template #elem>
-              <div class="select">
-                <select
-                  id="vm-wizard-cpu-model-field"
-                  :value="props.cpuModel"
-                  :disabled="props.disabled"
-                  @change="changeCpuModel"
-                >
-                  <option
-                    v-for="(item, key) in cpuModelOptions"
-                    :key="key"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </template>
-            <template #content>{{ apiError }}</template>
-          </atoms-tooltip-error>
-
-          <div class="passthrough-host-cpu-wrap flex-align-center">
-            <input
-              id="passthrough-host-cpu"
-              v-model="passthroughHostCpuLocal"
-              :disabled="props.disabled"
-              type="checkbox"
-              @change="changePassthroughHostCpu"
-            />
-            <label for="passthrough-host-cpu" class="label-text-normal">{{
-              localization.passthroughHostCpu
-            }}</label>
-            <div id="passthrough-help-icon" class="flex-align-center relative">
-              <atoms-the-icon
-                fill="#0072a3"
-                width="24px"
-                height="24px"
-                name="info-circle"
-                class="pointer"
-                @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
-              />
-              <Teleport to="body">
-                <atoms-tooltip-signpost
-                  v-if="isShowPassthroughHost"
-                  elem-id="passthrough-help-icon"
-                  @hide="isShowPassthroughHost = false"
-                >
-                  <h3 class="passthrough-help-title">
-                    {{ localization.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="divider"></div>
-          <div class="flex-align-center">
-            <input
-              id="host-model-cpu"
-              v-model="hostModelCpuLocal"
-              type="checkbox"
-              :disabled="props.disabled"
-              @change="changeHostModelCpu"
-            />
-            <label for="host-model-cpu" class="label-text-normal">{{
-              localization.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="pointer"
-                @click.stop="isShowHostModel = !isShowHostModel"
-              />
-              <Teleport to="body">
-                <atoms-tooltip-signpost
-                  v-if="isShowHostModel"
-                  elem-id="host-model-help-icon"
-                  @hide="isShowHostModel = false"
-                >
-                  <h3 class="host-model-help-title">
-                    {{ localization.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>
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_Localization,
-  UI_I_HTMLSelectElement,
-} from '~/lib/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  cpuModel: string
-  passthroughHostCpu: boolean
-  hostModelCpu: boolean
-  cpuModels: UI_I_OptionItem[]
-  isEdit: boolean
-  disabled: boolean
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:cpu-model', value: string): boolean
-  (event: 'update:passthrough-host-cpu', value: boolean): boolean
-  (event: 'update:host-model-cpu', value: boolean): boolean
-  (event: 'remove-error-by-title', value: string): void
-}>()
-
-const cpuModelOptions = ref<UI_I_OptionItem[]>(props.cpuModels)
-watch(
-  () => props.cpuModels,
-  (newValue) => {
-    cpuModelOptions.value = [...newValue]
-  }
-)
-
-const passthroughHostCpuLocal = computed<boolean>({
-  get() {
-    return props.passthroughHostCpu
-  },
-  set(newValue) {
-    emits('update:passthrough-host-cpu', newValue)
-  },
-})
-const hostModelCpuLocal = computed<boolean>({
-  get() {
-    return props.hostModelCpu
-  },
-  set(newValue) {
-    emits('update:host-model-cpu', newValue)
-  },
-})
-
-const changeCpuModel = (event: UI_I_HTMLSelectElement): void => {
-  emits('update:cpu-model', event.target.value)
-  emits('update:passthrough-host-cpu', false)
-  emits('update:host-model-cpu', false)
-}
-const changePassthroughHostCpu = (event: Event): void => {
-  const target = event.target as HTMLInputElement
-  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
-  emits('update:host-model-cpu', false)
-}
-const changeHostModelCpu = (event: Event): void => {
-  const target = event.target as HTMLInputElement
-  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
-  emits('update:passthrough-host-cpu', false)
-}
-
-const isShowPassthroughHost = ref<false>(false)
-const isShowHostModel = ref<false>(false)
-
-const typeError = 'cpu.model'
-
-const apiError = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find((message) => message.field === typeError)
-      ?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (): void => {
-  emits('remove-error-by-title', typeError)
-}
-</script>
-
-<style scoped lang="scss">
-.passthrough-host-cpu-wrap {
-  margin-right: 8px;
-}
-#passthrough-host-cpu,
-#host-model-cpu {
-  margin: 0 4px 0 0;
-}
-
-.divider {
-  height: 16px;
-  width: 1px;
-  background-color: var(--global-border-color);
-  margin: 0 6px 0 0;
-}
-</style>
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.cpuModel }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            selector="#vm-wizard-cpu-model-field"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select">
+                <select
+                  id="vm-wizard-cpu-model-field"
+                  :value="props.cpuModel"
+                  :disabled="props.disabled"
+                  @change="changeCpuModel"
+                >
+                  <option
+                    v-for="(item, key) in cpuModelOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+
+          <div class="passthrough-host-cpu-wrap flex-align-center">
+            <input
+              id="passthrough-host-cpu"
+              v-model="passthroughHostCpuLocal"
+              :disabled="props.disabled"
+              type="checkbox"
+              @change="changePassthroughHostCpu"
+            />
+            <label for="passthrough-host-cpu" class="label-text-normal">{{
+              localization.passthroughHostCpu
+            }}</label>
+            <div id="passthrough-help-icon" class="flex-align-center relative">
+              <atoms-the-icon
+                fill="#0072a3"
+                width="24px"
+                height="24px"
+                name="info-circle"
+                class="pointer"
+                @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
+              />
+              <Teleport to="body">
+                <atoms-tooltip-signpost
+                  v-if="isShowPassthroughHost"
+                  elem-id="passthrough-help-icon"
+                  @hide="isShowPassthroughHost = false"
+                >
+                  <h3 class="passthrough-help-title">
+                    {{ localization.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="divider"></div>
+          <div class="flex-align-center">
+            <input
+              id="host-model-cpu"
+              v-model="hostModelCpuLocal"
+              type="checkbox"
+              :disabled="props.disabled"
+              @change="changeHostModelCpu"
+            />
+            <label for="host-model-cpu" class="label-text-normal">{{
+              localization.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="pointer"
+                @click.stop="isShowHostModel = !isShowHostModel"
+              />
+              <Teleport to="body">
+                <atoms-tooltip-signpost
+                  v-if="isShowHostModel"
+                  elem-id="host-model-help-icon"
+                  @hide="isShowHostModel = false"
+                >
+                  <h3 class="host-model-help-title">
+                    {{ localization.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>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_Localization,
+  UI_I_HTMLSelectElement,
+} from '~/lib/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  cpuModel: string
+  passthroughHostCpu: boolean
+  hostModelCpu: boolean
+  cpuModels: UI_I_OptionItem[]
+  isEdit: boolean
+  disabled: boolean
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:cpu-model', value: string): boolean
+  (event: 'update:passthrough-host-cpu', value: boolean): boolean
+  (event: 'update:host-model-cpu', value: boolean): boolean
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const cpuModelOptions = ref<UI_I_OptionItem[]>(props.cpuModels)
+watch(
+  () => props.cpuModels,
+  (newValue) => {
+    cpuModelOptions.value = [...newValue]
+  }
+)
+
+const passthroughHostCpuLocal = computed<boolean>({
+  get() {
+    return props.passthroughHostCpu
+  },
+  set(newValue) {
+    emits('update:passthrough-host-cpu', newValue)
+  },
+})
+const hostModelCpuLocal = computed<boolean>({
+  get() {
+    return props.hostModelCpu
+  },
+  set(newValue) {
+    emits('update:host-model-cpu', newValue)
+  },
+})
+
+const changeCpuModel = (event: UI_I_HTMLSelectElement): void => {
+  emits('update:cpu-model', event.target.value)
+  emits('update:passthrough-host-cpu', false)
+  emits('update:host-model-cpu', false)
+}
+const changePassthroughHostCpu = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
+  emits('update:host-model-cpu', false)
+}
+const changeHostModelCpu = (event: Event): void => {
+  const target = event.target as HTMLInputElement
+  emits('update:cpu-model', target.checked ? '' : props.cpuModels?.[0].value)
+  emits('update:passthrough-host-cpu', false)
+}
+
+const isShowPassthroughHost = ref<false>(false)
+const isShowHostModel = ref<false>(false)
+
+const typeError = 'cpu.model'
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find((message) => message.field === typeError)
+      ?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError)
+}
+</script>
+
+<style scoped lang="scss">
+.passthrough-host-cpu-wrap {
+  margin-right: 8px;
+}
+#passthrough-host-cpu,
+#host-model-cpu {
+  margin: 0 4px 0 0;
+}
+
+.divider {
+  height: 16px;
+  width: 1px;
+  background-color: var(--global-border-color);
+  margin: 0 6px 0 0;
+}
+</style>