bfg-common 1.6.86 → 1.6.87

package/components/common/diagramMain/modals/remove/RemoveModalNew.vue

@@ -1,157 +1,157 @@
-<template>
-  <div>
-    <ui-popup
-      :v-if="props.show"
-      :title="title"
-      :message="text"
-      :texts="buttons"
-      icon-name="circle-warning"
-      size="sm"
-      @hide="onHideModal"
-      @submit="onRemove"
-    >
-      <template #content>
-        <div v-if="props.type === 'port'" class="message">
-          <span class="message-title">{{ title }}</span>
-          <span class="message-item">{{ text[0] }}</span>
-          <span class="message-item">{{ text[1] }}</span>
-        </div>
-      </template>
-    </ui-popup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalName: string
-    viewName: string
-    title: string
-    type: string
-    id?: string
-    isShowLoader?: boolean
-    label?: string
-    switchName?: string
-    hostName?: string
-    networkType: string
-    project: UI_T_Project
-  }>(),
-  {
-    id: '',
-    isShowLoader: false,
-    label: '',
-    switchName: '',
-    hostName: '',
-  }
-)
-
-// Modal hiding
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'remove', id: string, type: string): void
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const title = computed<string>(() => {
-  switch (props.type) {
-    case 'network':
-      return localization.value.common.confirmNetworkRemoval
-    case 'port':
-      return localization.value.common.confirmPortRemoval
-    case 'switch':
-      return localization.value.common.confirmSwitchRemoval
-    default:
-      return ''
-  }
-})
-
-const text = computed<string | string[]>(() => {
-  switch (props.type) {
-    case 'network':
-      return localization.value.common.confirmNetworkRemovalMessage
-        .replace('{networkName}', props.label)
-        .replace('{switchName}', props.switchName)
-    case 'port':
-      return [
-        localization.value.common.confirmPortRemovalMessage1,
-        localization.value.common.confirmPortRemovalMessage2
-          .replace('{portName}', props.id)
-          .replace('{switchName}', props.switchName),
-      ]
-    case 'switch':
-      return localization.value.common.confirmSwitchRemovalMessage
-        .replace('{switchName}', props.switchName)
-        .replace('{hostName}', props.hostName)
-    default:
-      return ''
-  }
-})
-
-const buttons = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.remove,
-}))
-
-const isSphereProject = computed<boolean>(() => props.project === 'sphere')
-
-const onRemove = (): void => {
-  const type = isSphereProject.value
-    ? props.networkType
-      ? `${props.type}${props.networkType}`
-      : props.type
-    : props.type
-
-  emits('remove', props.id, type)
-}
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(svg) {
-  path {
-    fill: var(--text-red);
-  }
-}
-
-.message {
-  padding: 16px 32px;
-
-  &-title {
-    display: block;
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 24px;
-    letter-spacing: 0;
-    text-align: center;
-    vertical-align: middle;
-    margin-bottom: 8px;
-    color: var(--title-form-first-color);
-  }
-
-  &-item {
-    display: block;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 18px;
-    letter-spacing: 0;
-    text-align: center;
-    vertical-align: middle;
-    color: #9da6ad;
-    margin-bottom: 12px;
-  }
-
-  span:last-of-type {
-    margin-bottom: 0;
-  }
-}
-</style>
+<template>
+  <div>
+    <ui-popup
+      :v-if="props.show"
+      :title="title"
+      :message="text"
+      :texts="buttons"
+      icon-name="circle-warning"
+      size="sm"
+      @hide="onHideModal"
+      @submit="onRemove"
+    >
+      <template #content>
+        <div v-if="props.type === 'port'" class="message">
+          <span class="message-title">{{ title }}</span>
+          <span class="message-item">{{ text[0] }}</span>
+          <span class="message-item">{{ text[1] }}</span>
+        </div>
+      </template>
+    </ui-popup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    viewName: string
+    title: string
+    type: string
+    id?: string
+    isShowLoader?: boolean
+    label?: string
+    switchName?: string
+    hostName?: string
+    networkType: string
+    project: UI_T_Project
+  }>(),
+  {
+    id: '',
+    isShowLoader: false,
+    label: '',
+    switchName: '',
+    hostName: '',
+  }
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'remove', id: string, type: string): void
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(() => {
+  switch (props.type) {
+    case 'network':
+      return localization.value.common.confirmNetworkRemoval
+    case 'port':
+      return localization.value.common.confirmPortRemoval
+    case 'switch':
+      return localization.value.common.confirmSwitchRemoval
+    default:
+      return ''
+  }
+})
+
+const text = computed<string | string[]>(() => {
+  switch (props.type) {
+    case 'network':
+      return localization.value.common.confirmNetworkRemovalMessage
+        .replace('{networkName}', props.label)
+        .replace('{switchName}', props.switchName)
+    case 'port':
+      return [
+        localization.value.common.confirmPortRemovalMessage1,
+        localization.value.common.confirmPortRemovalMessage2
+          .replace('{portName}', props.id)
+          .replace('{switchName}', props.switchName),
+      ]
+    case 'switch':
+      return localization.value.common.confirmSwitchRemovalMessage
+        .replace('{switchName}', props.switchName)
+        .replace('{hostName}', props.hostName)
+    default:
+      return ''
+  }
+})
+
+const buttons = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.remove,
+}))
+
+const isSphereProject = computed<boolean>(() => props.project === 'sphere')
+
+const onRemove = (): void => {
+  const type = isSphereProject.value
+    ? props.networkType
+      ? `${props.type}${props.networkType}`
+      : props.type
+    : props.type
+
+  emits('remove', props.id, type)
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(svg) {
+  path {
+    fill: #ea3223;
+  }
+}
+
+.message {
+  padding: 16px 32px;
+
+  &-title {
+    display: block;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 8px;
+    color: var(--title-form-first-color);
+  }
+
+  &-item {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+
+  span:last-of-type {
+    margin-bottom: 0;
+  }
+}
+</style>