bfg-common 1.5.648 → 1.5.649

package/components/common/vm/actions/clone/new/New.vue

@@ -121,6 +121,7 @@
         <template #content>
           <common-vm-actions-common-select-options
             :is-new-vm-from-template="props.isNewVmFromTemplate"
+            :project="props.project"
             @change="emits('change-select-options', $event)"
             @change-count="emits('change-clone-count', $event)"
           />

package/components/common/vm/actions/clone/old/Old.vue

@@ -72,6 +72,7 @@
           <common-vm-actions-common-select-options
             v-show="selectedStep.id === props.dynamicSteps.selectOptions"
             :is-new-vm-from-template="props.isNewVmFromTemplate"
+            :project="props.project"
             @change="emits('change-select-options', $event)"
             @change-count="emits('change-clone-count', $event)"
           />

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

@@ -1,259 +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-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'
-
-const modelValue = defineModel<string[]>({ required: true })
-const cloneCount = defineModel<number>('cloneCount')
-
-const props = withDefaults(
-  defineProps<{
-    isNewVmFromTemplate?: boolean // TODO change
-  }>(),
-  {
-    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>

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

@@ -1,102 +1,109 @@
-<template>
-  <div class="select-options">
-    <div v-show="!props.isNewVmFromTemplate" :class="['checkbox', { disabled: props.isNewVmFromTemplate }]">
-      <input
-        id="customize-os"
-        v-model="modelValue"
-        data-id="customize-os"
-        type="checkbox"
-        value="customize-os"
-      />
-      <label for="customize-os">{{
-        localization.common.customizeTheOperatingSystem
-      }}</label>
-    </div>
-    <div v-if="!props.isNewVmFromTemplate" class="checkbox">
-      <input
-        id="customize-hardware"
-        v-model="modelValue"
-        data-id="customize-hardware"
-        type="checkbox"
-        value="customize-hardware"
-      />
-      <label for="customize-hardware">{{
-        localization.common.customizeThisVirtualMachineHardware
-      }}</label>
-    </div>
-    <div class="checkbox">
-      <!--      :disabled="props.isNewVmFromTemplate"-->
-      <input
-        id="power-on"
-        v-model="modelValue"
-        data-id="power-on"
-        type="checkbox"
-        value="power-on"
-      />
-      <label for="power-on">{{
-        localization.common.powerOnVirtualMachineAfterCreation
-      }}</label>
-    </div>
-    <div v-if="props.isNewVmFromTemplate" class="checkbox">
-      <!--      :disabled="props.isNewVmFromTemplate"-->
-      <input
-        id="create-linked-clone"
-        v-model="modelValue"
-        data-id="create-linked-clone"
-        type="checkbox"
-        value="create-linked-clone"
-      />
-      <label for="create-linked-clone">{{
-        localization.vmWizard.createLinkedClone
-      }}</label>
-
-      <input
-        v-model="cloneCount"
-        :disabled="!isLinkedClone"
-        data-id="clone-count"
-        type="number"
-        class="ml-1"
-        :min="0"
-        :max="1000"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const modelValue = defineModel<string[]>()
-const cloneCount = defineModel<number>('cloneCount')
-
-const props = withDefaults(
-  defineProps<{
-    isNewVmFromTemplate?: boolean // TODO change
-  }>(),
-  {
-    isNewVmFromTemplate: undefined,
-  }
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isLinkedClone = computed<boolean>(
-  () => modelValue.value?.includes('create-linked-clone') || false
-)
-</script>
-
-<style scoped lang="scss">
-.select-options {
-  padding: 12px 0 0;
-
-  .disabled {
-    input,
-    label {
-      cursor: not-allowed;
-    }
-  }
-  .checkbox {
-    margin: 6px 0;
-  }
-}
-</style>
+<template>
+  <div class="select-options">
+    <div
+      v-show="!props.isNewVmFromTemplate"
+      :class="['checkbox', { disabled: props.isNewVmFromTemplate }]"
+    >
+      <input
+        id="customize-os"
+        v-model="modelValue"
+        data-id="customize-os"
+        type="checkbox"
+        value="customize-os"
+      />
+      <label for="customize-os">{{
+        localization.common.customizeTheOperatingSystem
+      }}</label>
+    </div>
+    <div v-if="!props.isNewVmFromTemplate" class="checkbox">
+      <input
+        id="customize-hardware"
+        v-model="modelValue"
+        data-id="customize-hardware"
+        type="checkbox"
+        value="customize-hardware"
+      />
+      <label for="customize-hardware">{{
+        localization.common.customizeThisVirtualMachineHardware
+      }}</label>
+    </div>
+    <div class="checkbox">
+      <!--      :disabled="props.isNewVmFromTemplate"-->
+      <input
+        id="power-on"
+        v-model="modelValue"
+        data-id="power-on"
+        type="checkbox"
+        value="power-on"
+      />
+      <label for="power-on">{{
+        localization.common.powerOnVirtualMachineAfterCreation
+      }}</label>
+    </div>
+    <div v-if="props.isNewVmFromTemplate" class="checkbox">
+      <!--      :disabled="props.isNewVmFromTemplate"-->
+      <input
+        id="create-linked-clone"
+        v-model="modelValue"
+        data-id="create-linked-clone"
+        type="checkbox"
+        value="create-linked-clone"
+      />
+      <label for="create-linked-clone">{{
+        localization.vmWizard.createLinkedClone
+      }}</label>
+
+      <input
+        v-if="props.project !== 'sphere'"
+        v-model="cloneCount"
+        :disabled="!isLinkedClone"
+        data-id="clone-count"
+        type="number"
+        class="ml-1"
+        :min="0"
+        :max="1000"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const modelValue = defineModel<string[]>()
+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 isLinkedClone = computed<boolean>(
+  () => modelValue.value?.includes('create-linked-clone') || false
+)
+</script>
+
+<style scoped lang="scss">
+.select-options {
+  padding: 12px 0 0;
+
+  .disabled {
+    input,
+    label {
+      cursor: not-allowed;
+    }
+  }
+  .checkbox {
+    margin: 6px 0;
+  }
+}
+</style>

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

@@ -1,53 +1,58 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model="selectedOptions"
-    v-model:clone-count="cloneCount"
-    :is-new-vm-from-template="props.isNewVmFromTemplate"
-  />
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    isNewVmFromTemplate?: boolean // TODO change
-  }>(),
-  {
-    isNewVmFromTemplate: undefined,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'change', value: string[]): void
-  (event: 'change-count', value: number): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const selectedOptions = ref<string[]>([])
-watch(selectedOptions, (newValue) => {
-  emits('change', newValue)
-})
-const cloneCount = ref<number>(0) // For Deploy
-watch(cloneCount, (newValue) => {
-  if (newValue < 0) {
-    cloneCount.value = 0
-    return
-  }
-  if (newValue > 1000) {
-    cloneCount.value = 1000
-    return
-  }
-
-  emits('change-count', newValue)
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    v-model="selectedOptions"
+    v-model:clone-count="cloneCount"
+    :is="currentComponent"
+    :project="props.project"
+    :is-new-vm-from-template="props.isNewVmFromTemplate"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    project?: UI_T_Project
+    isNewVmFromTemplate?: boolean // TODO change
+  }>(),
+  {
+    project: undefined,
+    isNewVmFromTemplate: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change', value: string[]): void
+  (event: 'change-count', value: number): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const selectedOptions = ref<string[]>([])
+watch(selectedOptions, (newValue) => {
+  emits('change', newValue)
+})
+const cloneCount = ref<number>(0) // For Deploy
+watch(cloneCount, (newValue) => {
+  if (newValue < 0) {
+    cloneCount.value = 0
+    return
+  }
+  if (newValue > 1000) {
+    cloneCount.value = 1000
+    return
+  }
+
+  emits('change-count', newValue)
+})
+</script>
+
+<style scoped lang="scss"></style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.648",
+  "version": "1.5.649",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",