bfg-common 1.0.16 → 1.0.18

package/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/LimitIops.vue

@@ -1,151 +1,151 @@
-<template>
-  <div class="">
-    <atoms-stack-block :has-children="false">
-      <template #stackBlockKey>
-        {{ localization.limitIops }}
-      </template>
-      <template #stackBlockContent>
-        <div class="flex-align-center">
-          <atoms-tooltip-error
-            :has-error="!!apiError"
-            :selector="`.vm-wizard-disk-device-io-field-${props.index}`"
-            @remove="onRemoveValidationError"
-          >
-            <template #elem>
-              <div class="select mr-1">
-                <select
-                  :id="`vm-wizard-disk-device-io-field-${props.index}`"
-                  v-model="limitIopsTypeLocal"
-                  :class="`vm-wizard-disk-device-io-field-${props.index}`"
-                  @click.stop
-                >
-                  <option
-                    v-for="(item, key) in limitIopsTypeOptions"
-                    :key="key"
-                    :value="item.value"
-                  >
-                    {{ item.text }}
-                  </option>
-                </select>
-              </div>
-            </template>
-            <template #content>{{ apiError }}</template>
-          </atoms-tooltip-error>
-
-          <atoms-combobox
-            v-show="limitIopsType !== 'unlimited'"
-            v-model.number="limitIopsLocal"
-            :items="limitIopsOptions"
-            @click.stop
-          />
-          <div v-show="limitIopsErrorText" class="flex-align-center">
-            <atoms-tooltip>
-              <template #elem>
-                <atoms-the-icon
-                  width="24px"
-                  height="24px"
-                  class="is-error tooltip-trigger"
-                  name="info"
-                />
-              </template>
-              <template #content>
-                {{ limitIopsErrorText }}
-              </template>
-            </atoms-tooltip>
-          </div>
-        </div>
-      </template>
-    </atoms-stack-block>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  limitIopsOptionsFunc,
-  limitIopsTypeOptionsFunc,
-} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/config/options'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const props = defineProps<{
-  limitIops: number
-  limitIopsType: string
-  index: number
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:limit-iops', value: number): void
-  (event: 'update:limit-iops-type', value: string): void
-  (event: 'valid', value: boolean): void
-  (event: 'remove-error-by-title', value: string): void
-}>()
-
-const limitIopsTypeOptions = ref<UI_I_OptionItem[]>(
-  limitIopsTypeOptionsFunc(localization.value)
-)
-
-const minLimitIops = 16
-const maxLimitIops = 2_147_483_647
-const limitIopsOptions = ref<UI_I_OptionItem[]>(
-  limitIopsOptionsFunc(localization.value, minLimitIops, maxLimitIops)
-)
-
-const limitIopsLocal = computed<number>({
-  get() {
-    return props.limitIops
-  },
-  set(newValue) {
-    emits('update:limit-iops', newValue)
-  },
-})
-const limitIopsTypeLocal = computed<string>({
-  get() {
-    return props.limitIopsType
-  },
-  set(newValue) {
-    emits('update:limit-iops-type', newValue)
-  },
-})
-
-const limitIopsErrorText = computed<string>(() => {
-  if (limitIopsTypeLocal.value === 'unlimited') return ''
-
-  const validValue = /^\d+(\.\d+)?$/.test(props.limitIops + '')
-  if (!validValue) {
-    return localization.value.inputContainsInvalidCharacters
-  }
-
-  if (+props.limitIops < minLimitIops || +props.limitIops > maxLimitIops) {
-    return localization.value.enterValueBetween
-      .replace('{0}', '' + minLimitIops)
-      .replace('{1}', '' + maxLimitIops)
-  }
-  return ''
-})
-watch(
-  limitIopsErrorText,
-  (newValue) => {
-    emits('valid', !!newValue)
-  },
-  { immediate: true }
-)
-
-const typeError = computed<string>(() => `disk_devices[${props.index}].io`)
-
-const apiError = computed<string>(() => {
-  return (
-    props.errorValidationFields?.find(
-      (message) => message.field === typeError.value
-    )?.error_message || ''
-  )
-})
-
-const onRemoveValidationError = (): void => {
-  emits('remove-error-by-title', typeError.value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.limitIops }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <atoms-tooltip-error
+            :has-error="!!apiError"
+            :selector="`.vm-wizard-disk-device-io-field-${props.index}`"
+            @remove="onRemoveValidationError"
+          >
+            <template #elem>
+              <div class="select mr-1">
+                <select
+                  :id="`vm-wizard-disk-device-io-field-${props.index}`"
+                  v-model="limitIopsTypeLocal"
+                  :class="`vm-wizard-disk-device-io-field-${props.index}`"
+                  @click.stop
+                >
+                  <option
+                    v-for="(item, key) in limitIopsTypeOptions"
+                    :key="key"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </template>
+            <template #content>{{ apiError }}</template>
+          </atoms-tooltip-error>
+
+          <atoms-combobox
+            v-show="limitIopsType !== 'unlimited'"
+            v-model.number="limitIopsLocal"
+            :items="limitIopsOptions"
+            @click.stop
+          />
+          <div v-show="limitIopsErrorText" class="flex-align-center">
+            <atoms-tooltip>
+              <template #elem>
+                <atoms-the-icon
+                  width="24px"
+                  height="24px"
+                  class="is-error tooltip-trigger"
+                  name="info"
+                />
+              </template>
+              <template #content>
+                {{ limitIopsErrorText }}
+              </template>
+            </atoms-tooltip>
+          </div>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  limitIopsOptionsFunc,
+  limitIopsTypeOptionsFunc,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/newHardDisk/limitIops/config/options'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const props = defineProps<{
+  limitIops: number
+  limitIopsType: string
+  index: number
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:limit-iops', value: number): void
+  (event: 'update:limit-iops-type', value: string): void
+  (event: 'valid', value: boolean): void
+  (event: 'remove-error-by-title', value: string): void
+}>()
+
+const limitIopsTypeOptions = ref<UI_I_OptionItem[]>(
+  limitIopsTypeOptionsFunc(localization.value)
+)
+
+const minLimitIops = 16
+const maxLimitIops = 2_147_483_647
+const limitIopsOptions = ref<UI_I_OptionItem[]>(
+  limitIopsOptionsFunc(localization.value, minLimitIops, maxLimitIops)
+)
+
+const limitIopsLocal = computed<number>({
+  get() {
+    return props.limitIops
+  },
+  set(newValue) {
+    emits('update:limit-iops', newValue)
+  },
+})
+const limitIopsTypeLocal = computed<string>({
+  get() {
+    return props.limitIopsType
+  },
+  set(newValue) {
+    emits('update:limit-iops-type', newValue)
+  },
+})
+
+const limitIopsErrorText = computed<string>(() => {
+  if (limitIopsTypeLocal.value === 'unlimited') return ''
+
+  const validValue = /^\d+(\.\d+)?$/.test(props.limitIops + '')
+  if (!validValue) {
+    return localization.value.inputContainsInvalidCharacters
+  }
+
+  if (+props.limitIops < minLimitIops || +props.limitIops > maxLimitIops) {
+    return localization.value.enterValueBetween
+      .replace('{0}', '' + minLimitIops)
+      .replace('{1}', '' + maxLimitIops)
+  }
+  return ''
+})
+watch(
+  limitIopsErrorText,
+  (newValue) => {
+    emits('valid', !!newValue)
+  },
+  { immediate: true }
+)
+
+const typeError = computed<string>(() => `disk_devices[${props.index}].io`)
+
+const apiError = computed<string>(() => {
+  return (
+    props.errorValidationFields?.find(
+      (message) => message.field === typeError.value
+    )?.error_message || ''
+  )
+})
+
+const onRemoveValidationError = (): void => {
+  emits('remove-error-by-title', typeError.value)
+}
+</script>
+
+<style scoped></style>