bfg-common 1.0.52 → 1.0.53

package/components/atoms/step/VerticalStep.vue

@@ -1,104 +1,104 @@
-<template>
-  <div :class="['clr-wizard-stepnav', props.type]">
-    <div class="clr-wizard-stepnav-list">
-      <div
-        v-for="(item, key) in props.items"
-        :key="key"
-        :class="[
-          'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
-          { disabled: item.disabled },
-          { active: key === props.stepPosition },
-          { complete: item.complete },
-        ]"
-      >
-        <atoms-the-icon
-          v-if="type === 'check'"
-          :style="{ opacity: item.complete ? 1 : 0 }"
-          width="14px"
-          fill="#3aab24"
-          name="check"
-        />
-        <button
-          :id="`${props.testId}-step-button-${key}`"
-          class="btn btn-link clr-wizard-stepnav-link"
-          :style="{ 'margin-left': '8px' }"
-          :disabled="item.disabled"
-          @click="changeStep(key)"
-        >
-          <span class="clr-wizard-stepnav-link-title">{{ item.text }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_VerticalStepItem[]
-    stepPosition: number
-    type?: string
-    testId?: string
-  }>(),
-  { testId: 'ui-vertical-step' }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const changeStep = (key: number) => {
-  emits('change', key)
-}
-</script>
-
-<style scoped lang="scss">
-.clr-wizard-stepnav {
-  &.check {
-    .clr-wizard-stepnav-item {
-      box-shadow: none;
-      display: flex;
-      align-items: center;
-
-      button {
-        height: auto;
-        font-size: 13px;
-        border-radius: 3px;
-        //margin-left: 4px;
-      }
-    }
-  }
-  .clr-wizard-stepnav-item {
-    padding: 0.3rem 0 0.4rem;
-
-    &.active {
-      button:hover,
-      button {
-        color: var(--vertical-steps-active-color);
-        background-color: var(--vertical-steps-active-bg-color);
-        cursor: default;
-        span {
-          color: var(--checkbox-mark-color);
-        }
-      }
-    }
-    &.complete:not(&.active) {
-      button {
-        background: var(--block-view-bg-color3);
-      }
-      button:hover {
-        color: var(--vertical-steps-complete-color);
-        background-color: var(--vertical-steps-complete-bg-color);
-        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
-      }
-    }
-    button {
-      color: var(--add-vm-context-title);
-      .clr-wizard-stepnav-link-title {
-        font-size: 14px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div :class="['clr-wizard-stepnav', props.type]">
+    <div class="clr-wizard-stepnav-list">
+      <div
+        v-for="(item, key) in props.items"
+        :key="key"
+        :class="[
+          'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
+          { disabled: item.disabled },
+          { active: key === props.stepPosition },
+          { complete: item.complete },
+        ]"
+      >
+        <atoms-the-icon
+          v-if="type === 'check'"
+          :style="{ opacity: item.complete ? 1 : 0 }"
+          width="14px"
+          fill="#3aab24"
+          name="check"
+        />
+        <button
+          :id="`${props.testId}-step-button-${key}`"
+          class="btn btn-link clr-wizard-stepnav-link"
+          :style="{ 'margin-left': '8px' }"
+          :disabled="item.disabled"
+          @click="changeStep(key)"
+        >
+          <span class="clr-wizard-stepnav-link-title">{{ item.text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_VerticalStepItem[]
+    stepPosition: number
+    type?: string
+    testId?: string
+  }>(),
+  { testId: 'ui-vertical-step' }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const changeStep = (key: number) => {
+  emits('change', key)
+}
+</script>
+
+<style scoped lang="scss">
+.clr-wizard-stepnav {
+  &.check {
+    .clr-wizard-stepnav-item {
+      box-shadow: none;
+      display: flex;
+      align-items: center;
+
+      button {
+        height: auto;
+        font-size: 13px;
+        border-radius: 3px;
+        //margin-left: 4px;
+      }
+    }
+  }
+  .clr-wizard-stepnav-item {
+    padding: 0.3rem 0 0.4rem;
+
+    &.active {
+      button:hover,
+      button {
+        color: var(--vertical-steps-active-color);
+        background-color: var(--vertical-steps-active-bg-color);
+        cursor: default;
+        span {
+          color: var(--checkbox-mark-color);
+        }
+      }
+    }
+    &.complete:not(&.active) {
+      button {
+        background: var(--block-view-bg-color3);
+      }
+      button:hover {
+        color: var(--vertical-steps-complete-color);
+        background-color: var(--vertical-steps-complete-bg-color);
+        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
+      }
+    }
+    button {
+      color: var(--add-vm-context-title);
+      .clr-wizard-stepnav-link-title {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

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/table/dataGrid/DataGrid.vue

@@ -207,7 +207,11 @@
                         <div class="datagrid-scrolling-cells">
                           <div
                             v-for="(item2, key2) in item"
-                            v-show="!isShowHiddenInfo || item2.key === 'icon'"
+                            v-show="
+                              !isShowHiddenInfo ||
+                              item2.key === 'col1' ||
+                              item2.key === 'icon'
+                            "
                             :key="key2"
                             :style="{
                               width: columnsWidth[key2][0],
@@ -217,13 +221,21 @@
                             :class="{
                               'hidden-text-triangle':
                                 isShowHiddenInfo &&
-                                item2.key === 'icon' &&
-                                item2.data?.iconClassName,
+                                item2.key === 'col1' &&
+                                item2.data?.iconClassName === '11',
                             }"
                           >
-                            <div class="flex-align-center h-100">
+                            <div
+                              :class="[
+                                'flex-align-center h-100',
+                                {
+                                  'double-arrow-width':
+                                    item2.data?.name === 'doubleArrows',
+                                },
+                              ]"
+                            >
                               <div
-                                v-if="item2.data?.text"
+                                v-if="item2.data?.name === 'doubleArrows'"
                                 class="double-arrow-wrap"
                                 :class="{
                                   'arrow-selected':
@@ -232,7 +244,7 @@
                                 }"
                               >
                                 <atoms-the-icon
-                                  v-if="item2.data?.text"
+                                  v-if="item2.data?.name === 'doubleArrows'"
                                   name="doubleArrows"
                                   class="double-arrow"
                                   :class="{
@@ -271,7 +283,10 @@
                                     }"
                                   >
                                     <div class="header">
-                                      <slot name="hiddenInfoHeader" />
+                                      <slot
+                                        name="hiddenInfoHeader"
+                                        :item="item"
+                                      />
                                       <button
                                         :id="`${props.testId}-hidden-info-toggle-icon-${key}-${key2}`"
                                         class="signpost-action close"
@@ -455,7 +470,9 @@ let memoryWidth = '0'
 const doubleArrowClick = () => {
   if (!isShowHiddenInfo.value) {
     memoryWidth = columnsWidth.value[1][0]
-    columnsWidth.value[1][0] = columnsWidth.value[1][1] // min width of 1st column
+    columnsWidth.value[1][0] = '162px'
+    // min width of 1st column
+    // columnsWidth.value[1][1]
   } else {
     columnsWidth.value[1][0] = memoryWidth
   }
@@ -953,9 +970,9 @@ onUnmounted(() => {
                   margin-right: -5%;
                   position: absolute;
                   transform: rotate(225deg);
-                  border-bottom: 21px solid transparent;
-                  border-right: 21px solid var(--global-bg-color);
-                  bottom: 4%;
+                  border-bottom: 15px solid transparent;
+                  border-right: 15px solid var(--global-bg-color);
+                  bottom: 26%;
                   right: 0;
                   z-index: 1000003;
                 }
@@ -964,9 +981,9 @@ onUnmounted(() => {
                   margin-right: -5%;
                   transform: rotate(-135deg);
                   position: absolute;
-                  border-bottom: 22px solid transparent;
-                  border-right: 22px solid var(--global-border-color);
-                  bottom: 3%;
+                  border-bottom: 16px solid transparent;
+                  border-right: 16px solid var(--global-border-color);
+                  bottom: 23%;
                   right: 0%;
                   z-index: 1000002;
                 }
@@ -1233,9 +1250,15 @@ onUnmounted(() => {
     }
   }
 }
+.double-arrow-width {
+  width: 47px;
+}
 .double-arrow-wrap {
-  width: 22px;
-  height: 22px;
+  width: 30px;
+  height: 20px;
+  padding-top: 1px;
+  padding-left: 5px;
+  cursor: pointer;
   background-color: transparent;
 
   .double-arrow {
@@ -1252,7 +1275,7 @@ onUnmounted(() => {
 }
 .double-arrow-wrap.arrow-selected {
   background-color: #0079b8;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 </style>