bfg-common 1.2.109 → 1.2.110

package/components/atoms/modal/Modal.vue

@@ -233,6 +233,12 @@ const submit = (): void => {
     left: unset;
   }
 }
+
+:root.dark-theme {
+  .modal .modal-content .modal-header {
+    border-bottom: 1px solid #485764;
+  }
+}
 </style>
 <style>
 :root {

package/components/atoms/switch/Switch.vue

@@ -1,107 +1,107 @@
-<template>
-  <div class="switch-body">
-    <input :id="props.testId" v-model="value" type="checkbox" />
-    <label class="switch-label" :for="props.testId"> </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    testId?: string
-  }>(),
-  { testId: 'ui-switch' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: boolean): void
-}>()
-
-const value = computed<boolean>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style>
-:root {
-  --label-before-bg-color: #737373;
-  --label-after-bg-color: #fff;
-  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
-}
-
-:root.dark-theme {
-  --label-before-bg-color: #fff;
-  --label-after-bg-color: #1b2a32;
-  --label-before-box-shadow: 0 0 0;
-}
-</style>
-
-<style scoped lang="scss">
-.switch-body {
-  width: max-content;
-  position: relative;
-  height: 1.2rem;
-
-  input[type='checkbox'] {
-    position: absolute;
-    top: 0.3rem;
-    right: 0.3rem;
-    height: 0.8rem;
-    width: 0.8rem;
-    opacity: 0;
-  }
-  .switch-label {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    height: 1.2rem;
-  }
-  .switch-label {
-    &:before {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 18px;
-      width: 33px;
-      border-radius: 0.45rem;
-      border: 2px solid var(--label-before-bg-color);
-      background-color: var(--label-before-bg-color);
-      transition: 0.15s ease-in;
-      transition-property: border-color, background-color;
-    }
-
-    &:after {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 14.5px;
-      width: 14.5px;
-      border: 1px solid var(--label-after-bg-color);
-      border-radius: 50%;
-      background-color: var(--label-after-bg-color);
-      bottom: 12.5px;
-      transition: 0.15s ease-in;
-    }
-  }
-
-  & input[type='checkbox']:focus + label:before {
-    box-shadow: var(--label-before-box-shadow);
-  }
-  & input[type='checkbox']:checked + label:before {
-    border-color: #62a420;
-    background-color: #62a420;
-  }
-  & input[type='checkbox']:checked + label:after {
-    left: 15px;
-  }
-  & input[type='checkbox'] + label:after {
-    left: 3px;
-  }
-}
-</style>
+<template>
+  <div class="switch-body">
+    <input :id="props.testId" v-model="value" type="checkbox" />
+    <label class="switch-label" :for="props.testId"> </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-switch' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+}>()
+
+const value = computed<boolean>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style>
+:root {
+  --label-before-bg-color: #737373;
+  --label-after-bg-color: #fff;
+  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
+}
+
+:root.dark-theme {
+  --label-before-bg-color: #fff;
+  --label-after-bg-color: #1b2a32;
+  --label-before-box-shadow: 0 0 0;
+}
+</style>
+
+<style scoped lang="scss">
+.switch-body {
+  width: max-content;
+  position: relative;
+  height: 1.2rem;
+
+  input[type='checkbox'] {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.3rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    opacity: 0;
+  }
+  .switch-label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    height: 1.2rem;
+  }
+  .switch-label {
+    &:before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 18px;
+      width: 33px;
+      border-radius: 0.45rem;
+      border: 2px solid var(--label-before-bg-color);
+      background-color: var(--label-before-bg-color);
+      transition: 0.15s ease-in;
+      transition-property: border-color, background-color;
+    }
+
+    &:after {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 14.5px;
+      width: 14.5px;
+      border: 1px solid var(--label-after-bg-color);
+      border-radius: 50%;
+      background-color: var(--label-after-bg-color);
+      bottom: 12.5px;
+      transition: 0.15s ease-in;
+    }
+  }
+
+  & input[type='checkbox']:focus + label:before {
+    box-shadow: var(--label-before-box-shadow);
+  }
+  & input[type='checkbox']:checked + label:before {
+    border-color: #62a420;
+    background-color: #62a420;
+  }
+  & input[type='checkbox']:checked + label:after {
+    left: 15px;
+  }
+  & input[type='checkbox'] + label:after {
+    left: 3px;
+  }
+}
+</style>

package/components/atoms/tabs/VerticalTabs.vue

@@ -49,6 +49,12 @@ const selectItem = (value: string): void => {
 </script>
 
 <style lang="scss" scoped>
+:root.dark-theme {
+  .vertical-nav-link:not(.active) {
+    color: #fff;
+  }
+}
+
 .vertical-groups-sidenav {
   min-height: 94%;
   background-color: #fafafa;

package/components/common/BadBrowser.vue

@@ -1,114 +1,114 @@
-<template>
-  <div class="bad-browser">
-    <div class="main-block">
-      <h1 class="title-block">
-        {{ localization.browserOutDate }}
-      </h1>
-      <p class="first description-text">
-        {{ firstDescriptionText }}
-      </p>
-      <div class="browsers-block">
-        <a
-            href="https://www.google.com/chrome/"
-            target="_blank"
-            class="browser-link"
-        >
-          <div class="browser-item">
-            <atoms-the-icon2 name="chrome" class="browser-icon" />
-            <p class="browser-name">Chrome</p>
-          </div>
-        </a>
-        <a
-            href="https://www.mozilla.org/en-US/"
-            target="_blank"
-            class="browser-link"
-        >
-          <div class="browser-item">
-            <atoms-the-icon2 name="firefox" class="browser-icon" />
-            <p class="browser-name">Firefox</p>
-          </div>
-        </a>
-        <a
-            href="https://support.apple.com/downloads/safari"
-            target="_blank"
-            class="browser-link"
-        >
-          <div class="browser-item">
-            <atoms-the-icon2 name="safari" class="browser-icon" />
-            <p class="browser-name">Safari</p>
-          </div>
-        </a>
-        <a
-            href="https://www.microsoft.com/en-us/edge/download?form=MA13FJ"
-            target="_blank"
-            class="browser-link last"
-        >
-          <div class="browser-item">
-            <atoms-the-icon2 name="edge" class="browser-icon" />
-            <p class="browser-name">Edge</p>
-          </div>
-        </a>
-      </div>
-      <p>
-        {{ localization.browserOutDateDesc2 }}
-        <a href="#">{{ localization.browserOutDateDesc3 }}</a>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-const props = defineProps<{
-  projectName: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const firstDescriptionText = computed<string>(() =>
-  localization.value.browserOutDateDesc.replace('{0}', props.projectName)
-)
-</script>
-
-<style scoped lang="scss">
-.bad-browser {
-  height: inherit;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .main-block {
-    width: max-content;
-    padding: 20px 40px;
-    text-align: center;
-
-    .title-block {
-      font-size: 32px;
-      font-weight: 400;
-    }
-    .description-text {
-      &.first {
-        margin: 0 auto;
-        max-width: 400px;
-      }
-    }
-    .browsers-block {
-      margin: 20px 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .browser-link:not(.last) {
-        margin-right: 40px;
-      }
-
-      .browser-item {
-        .browser-icon {
-          width: 60px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="bad-browser">
+    <div class="main-block">
+      <h1 class="title-block">
+        {{ localization.browserOutDate }}
+      </h1>
+      <p class="first description-text">
+        {{ firstDescriptionText }}
+      </p>
+      <div class="browsers-block">
+        <a
+            href="https://www.google.com/chrome/"
+            target="_blank"
+            class="browser-link"
+        >
+          <div class="browser-item">
+            <atoms-the-icon2 name="chrome" class="browser-icon" />
+            <p class="browser-name">Chrome</p>
+          </div>
+        </a>
+        <a
+            href="https://www.mozilla.org/en-US/"
+            target="_blank"
+            class="browser-link"
+        >
+          <div class="browser-item">
+            <atoms-the-icon2 name="firefox" class="browser-icon" />
+            <p class="browser-name">Firefox</p>
+          </div>
+        </a>
+        <a
+            href="https://support.apple.com/downloads/safari"
+            target="_blank"
+            class="browser-link"
+        >
+          <div class="browser-item">
+            <atoms-the-icon2 name="safari" class="browser-icon" />
+            <p class="browser-name">Safari</p>
+          </div>
+        </a>
+        <a
+            href="https://www.microsoft.com/en-us/edge/download?form=MA13FJ"
+            target="_blank"
+            class="browser-link last"
+        >
+          <div class="browser-item">
+            <atoms-the-icon2 name="edge" class="browser-icon" />
+            <p class="browser-name">Edge</p>
+          </div>
+        </a>
+      </div>
+      <p>
+        {{ localization.browserOutDateDesc2 }}
+        <a href="#">{{ localization.browserOutDateDesc3 }}</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  projectName: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const firstDescriptionText = computed<string>(() =>
+  localization.value.browserOutDateDesc.replace('{0}', props.projectName)
+)
+</script>
+
+<style scoped lang="scss">
+.bad-browser {
+  height: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .main-block {
+    width: max-content;
+    padding: 20px 40px;
+    text-align: center;
+
+    .title-block {
+      font-size: 32px;
+      font-weight: 400;
+    }
+    .description-text {
+      &.first {
+        margin: 0 auto;
+        max-width: 400px;
+      }
+    }
+    .browsers-block {
+      margin: 20px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .browser-link:not(.last) {
+        margin-right: 40px;
+      }
+
+      .browser-item {
+        .browser-icon {
+          width: 60px;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/common/adapterManager/AddAdapterWarningModal.vue

@@ -1,82 +1,82 @@
-<template>
-  <div>
-    <atoms-modal
-      test-id="add-adapter-warning"
-      width="576"
-      height="420"
-      :show="props.show"
-      :title="props.title"
-      class="diagram-action__remove"
-      @hide="onHideModal"
-    >
-      <template #modalBody>
-        <div class="modal-body-content modal-body-content__confirmation">
-          <div class="confirm-icon-container">
-            <atoms-diagram-icon name="is-warning" />
-          </div>
-          <p class="preserve-newlines">
-            {{ localization.noFreeNetworkAdaptersAddSwitch }}
-          </p>
-        </div>
-      </template>
-      <template #modalFooter>
-        <span>
-          <button
-            :id="`${props.testId}-modal-close-button`"
-            type="button"
-            class="btn btn-primary"
-            @click="onHideModal"
-          >
-            {{ localization.ok }}
-          </button>
-        </span>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-// Props from up
-const props = defineProps<{
-  show: boolean
-  modalName: string
-  viewName: string
-  title: string
-  testId: string
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Modal
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.diagram-action__remove) {
-  .modal-body-content {
-    display: flex;
-
-    .confirm-icon-container {
-      margin-right: 20px;
-    }
-
-    .preserve-newlines {
-      white-space: pre-line;
-      font-size: 15px;
-    }
-  }
-}
-.table-fixed-height {
-  min-height: 287px;
-  max-height: 287px;
-  overflow-y: auto;
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      test-id="add-adapter-warning"
+      width="576"
+      height="420"
+      :show="props.show"
+      :title="props.title"
+      class="diagram-action__remove"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <div class="modal-body-content modal-body-content__confirmation">
+          <div class="confirm-icon-container">
+            <atoms-diagram-icon name="is-warning" />
+          </div>
+          <p class="preserve-newlines">
+            {{ localization.noFreeNetworkAdaptersAddSwitch }}
+          </p>
+        </div>
+      </template>
+      <template #modalFooter>
+        <span>
+          <button
+            :id="`${props.testId}-modal-close-button`"
+            type="button"
+            class="btn btn-primary"
+            @click="onHideModal"
+          >
+            {{ localization.ok }}
+          </button>
+        </span>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+// Props from up
+const props = defineProps<{
+  show: boolean
+  modalName: string
+  viewName: string
+  title: string
+  testId: string
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Modal
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__remove) {
+  .modal-body-content {
+    display: flex;
+
+    .confirm-icon-container {
+      margin-right: 20px;
+    }
+
+    .preserve-newlines {
+      white-space: pre-line;
+      font-size: 15px;
+    }
+  }
+}
+.table-fixed-height {
+  min-height: 287px;
+  max-height: 287px;
+  overflow-y: auto;
+}
+</style>