bfg-common 1.5.653 → 1.5.654

package/components/common/vm/actions/common/select/options/New.vue

@@ -1,263 +1,263 @@
-<template>
-  <div
-    ref="mainContainer"
-    :class="[
-      'select-options grid gap-3 mt-4',
-      { 'is-sm-size': isContainerSm },
-      { 'three-items': !props.isNewVmFromTemplate },
-    ]"
-  >
-    <div
-      :class="[
-        'checkbox-container',
-        { checked: isCustomizeOs },
-        { disabled: props.isNewVmFromTemplate },
-      ]"
-      @click.stop.prevent="onToggleCustomizeOs"
-    >
-      <ui-checkbox
-        v-model="isCustomizeOs"
-        :label-text="localization.vmWizard.customizeOS"
-        :title="localization.vmWizard.customizeOS"
-        :disabled="props.isNewVmFromTemplate"
-        test-id="customize-os"
-        size="md"
-      />
-      <p
-        :class="[
-          'checkbox-block-description mt-2 ml-7 mr-3',
-          { disabled: props.isNewVmFromTemplate },
-        ]"
-      >
-        {{ localization.vmWizard.customizeOperatingSystem }}
-      </p>
-    </div>
-    <div
-      v-if="!props.isNewVmFromTemplate"
-      :class="[
-        'checkbox-container',
-        { checked: isCustomizeHardware },
-        { disabled: props.isNewVmFromTemplate },
-      ]"
-      @click.stop.prevent="onToggleCustomizeHardware"
-    >
-      <ui-checkbox
-        v-model="isCustomizeHardware"
-        :label-text="localization.common.customizeHardware"
-        :title="localization.common.customizeHardware"
-        :disabled="props.isNewVmFromTemplate"
-        test-id="customize-hardware"
-        size="md"
-      />
-      <p
-        :class="[
-          'checkbox-block-description mt-2 ml-7 mr-3',
-          { disabled: props.isNewVmFromTemplate },
-        ]"
-      >
-        {{ localization.vmWizard.customizeVMHardware }}
-      </p>
-    </div>
-    <div
-      :class="[
-        'checkbox-container',
-        { checked: isPowerOn },
-        { disabled: props.isNewVmFromTemplate },
-      ]"
-      @click.stop.prevent="onTogglePowerOn"
-    >
-      <!--      :disabled="props.isNewVmFromTemplate"-->
-      <ui-checkbox
-        v-model="isPowerOn"
-        :label-text="localization.vmWizard.autoPowerOn"
-        :title="localization.vmWizard.autoPowerOn"
-        :disabled="props.isNewVmFromTemplate"
-        test-id="power-on"
-        size="md"
-      />
-      <!--      { disabled: props.isNewVmFromTemplate },-->
-      <p :class="['checkbox-block-description mt-2 ml-7 mr-3']">
-        {{ localization.vmWizard.powerVMAfterCreation }}
-      </p>
-    </div>
-    <div
-      v-if="props.isNewVmFromTemplate"
-      :class="['checkbox-container', { checked: isLinkedClone }]"
-      @click.stop.prevent="onToggleLinkedClone"
-    >
-      <ui-checkbox
-        v-model="isLinkedClone"
-        :label-text="localization.vmWizard.createLinkedClone"
-        :title="localization.vmWizard.createLinkedClone"
-        test-id="create-linked-clone"
-        size="md"
-      />
-
-      <ui-input
-        v-if="props.project !== 'sphere'"
-        v-model="cloneCount"
-        :disabled="!isLinkedClone"
-        test-id="clone-count"
-        type="number"
-        class="ml-1 mt-2"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const modelValue = defineModel<string[]>({ required: true })
-const cloneCount = defineModel<number>('cloneCount')
-
-const props = withDefaults(
-  defineProps<{
-    project?: UI_T_Project
-    isNewVmFromTemplate?: boolean // TODO change
-  }>(),
-  {
-    project: undefined,
-    isNewVmFromTemplate: undefined,
-  }
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const mainContainer = ref<HTMLElement | null>(null)
-const { width: mainContainerWidth } = useElementSize(mainContainer)
-
-const isCustomizeOs = ref<boolean>(false)
-const isCustomizeHardware = ref<boolean>(false)
-const isPowerOn = ref<boolean>(false)
-const isLinkedClone = ref<boolean>(false)
-
-const onToggleCustomizeOs = (): void => {
-  if (props.isNewVmFromTemplate) return
-
-  isCustomizeOs.value = !isCustomizeOs.value
-  if (isCustomizeOs.value) {
-    !modelValue.value.includes('customize-os') &&
-      modelValue.value.push('customize-os')
-  } else {
-    modelValue.value = modelValue.value.filter(
-      (item) => item !== 'customize-os'
-    )
-  }
-}
-
-const onToggleCustomizeHardware = (): void => {
-  if (props.isNewVmFromTemplate) return
-
-  isCustomizeHardware.value = !isCustomizeHardware.value
-  if (isCustomizeHardware.value) {
-    !modelValue.value.includes('customize-hardware') &&
-      modelValue.value.push('customize-hardware')
-  } else {
-    modelValue.value = modelValue.value.filter(
-      (item) => item !== 'customize-hardware'
-    )
-  }
-}
-
-const onTogglePowerOn = (): void => {
-  if (props.isNewVmFromTemplate) return
-
-  isPowerOn.value = !isPowerOn.value
-  if (isPowerOn.value) {
-    !modelValue.value.includes('power-on') && modelValue.value.push('power-on')
-  } else {
-    modelValue.value = modelValue.value.filter((item) => item !== 'power-on')
-  }
-}
-
-const onToggleLinkedClone = (): void => {
-  isLinkedClone.value = !isLinkedClone.value
-  if (isLinkedClone.value) {
-    !modelValue.value.includes('create-linked-clone') &&
-      modelValue.value.push('create-linked-clone')
-  } else {
-    modelValue.value = modelValue.value.filter(
-      (item) => item !== 'create-linked-clone'
-    )
-  }
-}
-
-const isContainerSm = ref<boolean>(false)
-watch(
-  mainContainerWidth,
-  (newValue) => {
-    isContainerSm.value = newValue <= 600
-  },
-  { immediate: true }
-)
-</script>
-
-<style>
-:root {
-  --select-option-target-vm-checkbox-description-disabled: #bdc3c7;
-}
-:root.dark-theme {
-  --select-option-target-vm-checkbox-description-disabled: #bdc3c770;
-}
-</style>
-
-<style scoped lang="scss">
-.select-options {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: max-content;
-  overflow-y: auto;
-  padding-bottom: 16px;
-
-  &.is-sm-size {
-    grid-template-columns: 1fr;
-  }
-
-  &.three-items {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .checkbox-container {
-    width: 100%;
-    background-color: var(--select-bg);
-    border-radius: 8px;
-    padding: 12px;
-    transition: box-shadow 0.1s ease-in-out;
-    box-shadow: inset 0 0 0 1px var(--line-color);
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-    &:not(.disabled):hover {
-      cursor: pointer;
-    }
-    &:not(.disabled):not(.checked):hover {
-      box-shadow: inset 0 0 0 1px var(--select-border);
-    }
-    &.checked {
-      background-color: var(--radio-btn-active-label-bg-color);
-      box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
-    }
-
-    :deep(.ui-checkbox-label) {
-      align-items: flex-start;
-
-      .ui-checkbox-label-text {
-        line-height: 18px;
-        margin-top: 1px;
-      }
-    }
-
-    .checkbox-block-description {
-      color: #9da6ad;
-      line-height: 18px;
-
-      &.disabled {
-        color: var(--select-option-target-vm-checkbox-description-disabled);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    ref="mainContainer"
+    :class="[
+      'select-options grid gap-3 mt-4',
+      { 'is-sm-size': isContainerSm },
+      { 'three-items': !props.isNewVmFromTemplate },
+    ]"
+  >
+    <div
+      :class="[
+        'checkbox-container',
+        { checked: isCustomizeOs },
+        { disabled: props.isNewVmFromTemplate },
+      ]"
+      @click.stop.prevent="onToggleCustomizeOs"
+    >
+      <ui-checkbox
+        v-model="isCustomizeOs"
+        :label-text="localization.vmWizard.customizeOS"
+        :title="localization.vmWizard.customizeOS"
+        :disabled="props.isNewVmFromTemplate"
+        test-id="customize-os"
+        size="md"
+      />
+      <p
+        :class="[
+          'checkbox-block-description mt-2 ml-7 mr-3',
+          { disabled: props.isNewVmFromTemplate },
+        ]"
+      >
+        {{ localization.vmWizard.customizeOperatingSystem }}
+      </p>
+    </div>
+    <div
+      v-if="!props.isNewVmFromTemplate"
+      :class="[
+        'checkbox-container',
+        { checked: isCustomizeHardware },
+        { disabled: props.isNewVmFromTemplate },
+      ]"
+      @click.stop.prevent="onToggleCustomizeHardware"
+    >
+      <ui-checkbox
+        v-model="isCustomizeHardware"
+        :label-text="localization.common.customizeHardware"
+        :title="localization.common.customizeHardware"
+        :disabled="props.isNewVmFromTemplate"
+        test-id="customize-hardware"
+        size="md"
+      />
+      <p
+        :class="[
+          'checkbox-block-description mt-2 ml-7 mr-3',
+          { disabled: props.isNewVmFromTemplate },
+        ]"
+      >
+        {{ localization.vmWizard.customizeVMHardware }}
+      </p>
+    </div>
+    <div
+      :class="[
+        'checkbox-container',
+        { checked: isPowerOn },
+        { disabled: props.isNewVmFromTemplate },
+      ]"
+      @click.stop.prevent="onTogglePowerOn"
+    >
+      <!--      :disabled="props.isNewVmFromTemplate"-->
+      <ui-checkbox
+        v-model="isPowerOn"
+        :label-text="localization.vmWizard.autoPowerOn"
+        :title="localization.vmWizard.autoPowerOn"
+        :disabled="props.isNewVmFromTemplate"
+        test-id="power-on"
+        size="md"
+      />
+      <!--      { disabled: props.isNewVmFromTemplate },-->
+      <p :class="['checkbox-block-description mt-2 ml-7 mr-3']">
+        {{ localization.vmWizard.powerVMAfterCreation }}
+      </p>
+    </div>
+    <div
+      v-if="props.isNewVmFromTemplate"
+      :class="['checkbox-container', { checked: isLinkedClone }]"
+      @click.stop.prevent="onToggleLinkedClone"
+    >
+      <ui-checkbox
+        v-model="isLinkedClone"
+        :label-text="localization.vmWizard.createLinkedClone"
+        :title="localization.vmWizard.createLinkedClone"
+        test-id="create-linked-clone"
+        size="md"
+      />
+
+      <ui-input
+        v-if="props.project !== 'sphere'"
+        v-model="cloneCount"
+        :disabled="!isLinkedClone"
+        test-id="clone-count"
+        type="number"
+        class="ml-1 mt-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const modelValue = defineModel<string[]>({ required: true })
+const cloneCount = defineModel<number>('cloneCount')
+
+const props = withDefaults(
+  defineProps<{
+    project?: UI_T_Project
+    isNewVmFromTemplate?: boolean // TODO change
+  }>(),
+  {
+    project: undefined,
+    isNewVmFromTemplate: undefined,
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const mainContainer = ref<HTMLElement | null>(null)
+const { width: mainContainerWidth } = useElementSize(mainContainer)
+
+const isCustomizeOs = ref<boolean>(false)
+const isCustomizeHardware = ref<boolean>(false)
+const isPowerOn = ref<boolean>(false)
+const isLinkedClone = ref<boolean>(false)
+
+const onToggleCustomizeOs = (): void => {
+  if (props.isNewVmFromTemplate) return
+
+  isCustomizeOs.value = !isCustomizeOs.value
+  if (isCustomizeOs.value) {
+    !modelValue.value.includes('customize-os') &&
+      modelValue.value.push('customize-os')
+  } else {
+    modelValue.value = modelValue.value.filter(
+      (item) => item !== 'customize-os'
+    )
+  }
+}
+
+const onToggleCustomizeHardware = (): void => {
+  if (props.isNewVmFromTemplate) return
+
+  isCustomizeHardware.value = !isCustomizeHardware.value
+  if (isCustomizeHardware.value) {
+    !modelValue.value.includes('customize-hardware') &&
+      modelValue.value.push('customize-hardware')
+  } else {
+    modelValue.value = modelValue.value.filter(
+      (item) => item !== 'customize-hardware'
+    )
+  }
+}
+
+const onTogglePowerOn = (): void => {
+  if (props.isNewVmFromTemplate) return
+
+  isPowerOn.value = !isPowerOn.value
+  if (isPowerOn.value) {
+    !modelValue.value.includes('power-on') && modelValue.value.push('power-on')
+  } else {
+    modelValue.value = modelValue.value.filter((item) => item !== 'power-on')
+  }
+}
+
+const onToggleLinkedClone = (): void => {
+  isLinkedClone.value = !isLinkedClone.value
+  if (isLinkedClone.value) {
+    !modelValue.value.includes('create-linked-clone') &&
+      modelValue.value.push('create-linked-clone')
+  } else {
+    modelValue.value = modelValue.value.filter(
+      (item) => item !== 'create-linked-clone'
+    )
+  }
+}
+
+const isContainerSm = ref<boolean>(false)
+watch(
+  mainContainerWidth,
+  (newValue) => {
+    isContainerSm.value = newValue <= 600
+  },
+  { immediate: true }
+)
+</script>
+
+<style>
+:root {
+  --select-option-target-vm-checkbox-description-disabled: #bdc3c7;
+}
+:root.dark-theme {
+  --select-option-target-vm-checkbox-description-disabled: #bdc3c770;
+}
+</style>
+
+<style scoped lang="scss">
+.select-options {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: max-content;
+  overflow-y: auto;
+  padding-bottom: 16px;
+
+  &.is-sm-size {
+    grid-template-columns: 1fr;
+  }
+
+  &.three-items {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .checkbox-container {
+    width: 100%;
+    background-color: var(--select-bg);
+    border-radius: 8px;
+    padding: 12px;
+    transition: box-shadow 0.1s ease-in-out;
+    box-shadow: inset 0 0 0 1px var(--line-color);
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+    &:not(.disabled):hover {
+      cursor: pointer;
+    }
+    &:not(.disabled):not(.checked):hover {
+      box-shadow: inset 0 0 0 1px var(--select-border);
+    }
+    &.checked {
+      background-color: var(--radio-btn-active-label-bg-color);
+      box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
+    }
+
+    :deep(.ui-checkbox-label) {
+      align-items: flex-start;
+
+      .ui-checkbox-label-text {
+        line-height: 18px;
+        margin-top: 1px;
+      }
+    }
+
+    .checkbox-block-description {
+      color: #9da6ad;
+      line-height: 18px;
+
+      &.disabled {
+        color: var(--select-option-target-vm-checkbox-description-disabled);
+      }
+    }
+  }
+}
+</style>