bfg-common 1.5.92 → 1.5.94

package/components/atoms/table/dataGrid/DataGridPage.vue

@@ -1,195 +1,195 @@
-<template>
-  <div v-show="props.totalPages > 1" class="pagination-list">
-    <button
-      :id="`${props.testId}-first-button`"
-      :data-id="`${props.testId}-first-button`"
-      :disabled="currentPage === 1"
-      class="pagination-first"
-      @click="changeCurrentPage(1)"
-    >
-      <atoms-the-icon
-        name="step-forward"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-    <button
-      :id="`${props.testId}-prev-button`"
-      :data-id="`${props.testId}-prev-button`"
-      :disabled="currentPage === 1"
-      class="pagination-previous"
-      @click="changeCurrentPage(currentPage - 1)"
-    >
-      <atoms-the-icon
-        name="angle"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-
-    <input
-      :id="`${props.testId}-page-input`"
-      v-model="currentPageLazy"
-      :data-id="`${props.testId}-page-input`"
-      type="text"
-      class="pagination-current clr-input"
-      @keydown.enter="changeCurrentPageManual"
-      @blur="changeCurrentPageManual"
-    />
-    <span class="divider">/</span>
-    <span class="total-pages">{{ props.totalPages }}</span>
-
-    <button
-      :id="`${props.testId}-next-button`"
-      :data-id="`${props.testId}-next-button`"
-      :disabled="currentPage === props.totalPages"
-      class="pagination-next"
-      @click="changeCurrentPage(currentPage + 1)"
-    >
-      <atoms-the-icon
-        name="angle"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-    <button
-      :id="`${props.testId}-last-button`"
-      :data-id="`${props.testId}-last-button`"
-      :disabled="currentPage === props.totalPages"
-      class="pagination-last"
-      @click="changeCurrentPage(props.totalPages)"
-    >
-      <atoms-the-icon
-        name="step-forward"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    page: number
-    totalItems: number
-    totalPages: number
-    pageSize: number
-    testId?: string
-  }>(),
-  { testId: 'ui-data-grid-page' }
-)
-
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-}>()
-
-const currentPage = ref<number>(1)
-const currentPageLazy = ref<number>(1)
-const changePageAndLazy = (page: number): void => {
-  currentPage.value = currentPageLazy.value = page
-  emits('change', page)
-}
-// const totalPages = computed(() => {
-//   return Math.ceil(props.totalItems / props.pageSize) || 1
-// })
-// watch(() => props.totalPages, (val) => {
-//   if (val < currentPage.value) {
-//     changePageAndLazy(val)
-//   }
-// })
-watch(
-  () => props.page,
-  (newValue) => {
-    changePageAndLazy(Math.min(props.totalPages, newValue))
-  },
-  { immediate: true }
-)
-const changeCurrentPage = (page: number): void => {
-  if (page > props.totalPages || page < 1) return
-  changePageAndLazy(page)
-}
-const changeCurrentPageManual = (event: any): void => {
-  const newVal = parseInt(event.target.value)
-
-  if (typeof newVal !== 'number' || isNaN(newVal)) {
-    currentPageLazy.value = currentPage.value
-    return
-  }
-  changePageAndLazy(
-    newVal > props.totalPages ? props.totalPages : newVal < 1 ? 1 : newVal
-  )
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins';
-.pagination-list {
-  @include flex($align: center);
-  margin-left: 24px;
-
-  button {
-    display: flex;
-
-    &:disabled {
-      cursor: default;
-      svg {
-        fill: #959595;
-      }
-    }
-  }
-
-  .pagination-first {
-    margin-right: 12px;
-    svg {
-      transform: rotate(180deg);
-    }
-  }
-  .pagination-previous {
-    margin-right: 12px;
-    background-image: none;
-
-    svg {
-      transform: rotate(-90deg);
-    }
-  }
-  .pagination-last {
-    margin-left: 12px;
-  }
-  .pagination-next {
-    margin-left: 12px;
-    background-image: none;
-
-    svg {
-      transform: rotate(90deg);
-    }
-  }
-  .pagination-current {
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    min-width: 24px;
-    transition: none !important;
-    width: 35px;
-    @include text($fs: 11px, $fw: normal, $align: center);
-
-    &:focus {
-      background: none;
-      border: 1px solid #46afd9;
-      box-shadow: 0 0 1px #46afd9;
-    }
-  }
-  .divider {
-    margin: 0 4px;
-  }
-  .total-pages {
-    margin: 0;
-  }
-  .pagination-icon {
-    fill: var(--global-text-color3);
-  }
-}
-</style>
+<template>
+  <div v-show="props.totalPages > 1" class="pagination-list">
+    <button
+      :id="`${props.testId}-first-button`"
+      :data-id="`${props.testId}-first-button`"
+      :disabled="currentPage === 1"
+      class="pagination-first"
+      @click="changeCurrentPage(1)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-prev-button`"
+      :data-id="`${props.testId}-prev-button`"
+      :disabled="currentPage === 1"
+      class="pagination-previous"
+      @click="changeCurrentPage(currentPage - 1)"
+    >
+      <atoms-the-icon
+        name="angle"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+
+    <input
+      :id="`${props.testId}-page-input`"
+      v-model="currentPageLazy"
+      :data-id="`${props.testId}-page-input`"
+      type="text"
+      class="pagination-current clr-input"
+      @keydown.enter="changeCurrentPageManual"
+      @blur="changeCurrentPageManual"
+    />
+    <span class="divider">/</span>
+    <span class="total-pages">{{ props.totalPages }}</span>
+
+    <button
+      :id="`${props.testId}-next-button`"
+      :data-id="`${props.testId}-next-button`"
+      :disabled="currentPage === props.totalPages"
+      class="pagination-next"
+      @click="changeCurrentPage(currentPage + 1)"
+    >
+      <atoms-the-icon
+        name="angle"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-last-button`"
+      :data-id="`${props.testId}-last-button`"
+      :disabled="currentPage === props.totalPages"
+      class="pagination-last"
+      @click="changeCurrentPage(props.totalPages)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    page: number
+    totalItems: number
+    totalPages: number
+    pageSize: number
+    testId?: string
+  }>(),
+  { testId: 'ui-data-grid-page' }
+)
+
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+}>()
+
+const currentPage = ref<number>(1)
+const currentPageLazy = ref<number>(1)
+const changePageAndLazy = (page: number): void => {
+  currentPage.value = currentPageLazy.value = page
+  emits('change', page)
+}
+// const totalPages = computed(() => {
+//   return Math.ceil(props.totalItems / props.pageSize) || 1
+// })
+// watch(() => props.totalPages, (val) => {
+//   if (val < currentPage.value) {
+//     changePageAndLazy(val)
+//   }
+// })
+watch(
+  () => props.page,
+  (newValue) => {
+    changePageAndLazy(Math.min(props.totalPages, newValue))
+  },
+  { immediate: true }
+)
+const changeCurrentPage = (page: number): void => {
+  if (page > props.totalPages || page < 1) return
+  changePageAndLazy(page)
+}
+const changeCurrentPageManual = (event: any): void => {
+  const newVal = parseInt(event.target.value)
+
+  if (typeof newVal !== 'number' || isNaN(newVal)) {
+    currentPageLazy.value = currentPage.value
+    return
+  }
+  changePageAndLazy(
+    newVal > props.totalPages ? props.totalPages : newVal < 1 ? 1 : newVal
+  )
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.pagination-list {
+  @include flex($align: center);
+  margin-left: 24px;
+
+  button {
+    display: flex;
+
+    &:disabled {
+      cursor: default;
+      svg {
+        fill: #959595;
+      }
+    }
+  }
+
+  .pagination-first {
+    margin-right: 12px;
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+  .pagination-previous {
+    margin-right: 12px;
+    background-image: none;
+
+    svg {
+      transform: rotate(-90deg);
+    }
+  }
+  .pagination-last {
+    margin-left: 12px;
+  }
+  .pagination-next {
+    margin-left: 12px;
+    background-image: none;
+
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+  .pagination-current {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    min-width: 24px;
+    transition: none !important;
+    width: 35px;
+    @include text($fs: 11px, $fw: normal, $align: center);
+
+    &:focus {
+      background: none;
+      border: 1px solid #46afd9;
+      box-shadow: 0 0 1px #46afd9;
+    }
+  }
+  .divider {
+    margin: 0 4px;
+  }
+  .total-pages {
+    margin: 0;
+  }
+  .pagination-icon {
+    fill: var(--global-text-color3);
+  }
+}
+</style>

package/components/atoms/table/info/Info.vue

@@ -2,14 +2,14 @@
   <!--  TODO refactoring-->
   <table :data-id="props.testId" class="table table-vertical">
     <tbody>
-      <tr v-for="item in list" :key="item.id">
+      <tr v-for="(item, index) in list" :key="item.id">
         <th
           scope="row"
           :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
         >
           {{ item.label }}
         </th>
-        <td class="vm-name">
+        <td :data-id="`${props.testId}-td-${index}-content`" class="vm-name">
           <slot :name="item.key">
             {{ item.value }}
           </slot>

package/components/atoms/table/simpleEvent/SimpleEvent.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="table-wrap">
-    <table ref="table">
-      <thead>
-        <tr>
-          <th
-            v-for="item in headItems"
-            :key="item.text"
-            :style="{ width: `${100 / headItems.length}%` }"
-          >
-            {{ item.text }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, key) in presentBodyItems" :key="key" :class="''">
-          <td>{{ item.text }}</td>
-          <td>{{ item.value }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_TableHeadItem,
-  UI_I_TableBodyItem,
-} from '~/components/atoms/table/simpleEvent/lib/models/interfaces'
-
-const props = defineProps<{
-  headItems: UI_I_TableHeadItem
-  bodyItems: UI_I_TableBodyItem[][]
-}>()
-
-const presentBodyItems = ref<UI_I_TableBodyItem[][]>([])
-watch(
-  () => props.bodyItems,
-  (newValue) => {
-    presentBodyItems.value = useDeepCopy(newValue)
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped lang="scss">
-.table-wrap {
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  overflow-x: auto;
-
-  table {
-    width: 100%;
-
-    thead {
-      background-color: var(--thead-bg-color);
-      tr {
-        th {
-          color: var(--global-font-color4);
-          background-color: var(--thead-bg-color);
-          font-size: 11px;
-          font-weight: 600;
-          height: 24px;
-          vertical-align: middle;
-          padding: 0 0 0 12px;
-          border-bottom: none;
-          text-align: left;
-          border-bottom: 2px solid var(--global-border-color);
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        color: var(--global-font-color4);
-        td {
-          border-width: 0 0 1px;
-          border-color: #ddd;
-          font-size: 13px;
-          font-weight: 400;
-          line-height: 24px;
-          padding: 0 12px;
-          border-bottom: 1px solid var(--global-border-color);
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style>
-:root {
-  --thead-bg-color: #{$light-grey};
-}
-:root.dark-theme {
-  --thead-bg-color: #{$--blue-700};
-}
-</style>
+<template>
+  <div class="table-wrap">
+    <table ref="table">
+      <thead>
+        <tr>
+          <th
+            v-for="item in headItems"
+            :key="item.text"
+            :style="{ width: `${100 / headItems.length}%` }"
+          >
+            {{ item.text }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, key) in presentBodyItems" :key="key" :class="''">
+          <td>{{ item.text }}</td>
+          <td>{{ item.value }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleEvent/lib/models/interfaces'
+
+const props = defineProps<{
+  headItems: UI_I_TableHeadItem
+  bodyItems: UI_I_TableBodyItem[][]
+}>()
+
+const presentBodyItems = ref<UI_I_TableBodyItem[][]>([])
+watch(
+  () => props.bodyItems,
+  (newValue) => {
+    presentBodyItems.value = useDeepCopy(newValue)
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.table-wrap {
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  overflow-x: auto;
+
+  table {
+    width: 100%;
+
+    thead {
+      background-color: var(--thead-bg-color);
+      tr {
+        th {
+          color: var(--global-font-color4);
+          background-color: var(--thead-bg-color);
+          font-size: 11px;
+          font-weight: 600;
+          height: 24px;
+          vertical-align: middle;
+          padding: 0 0 0 12px;
+          border-bottom: none;
+          text-align: left;
+          border-bottom: 2px solid var(--global-border-color);
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        color: var(--global-font-color4);
+        td {
+          border-width: 0 0 1px;
+          border-color: #ddd;
+          font-size: 13px;
+          font-weight: 400;
+          line-height: 24px;
+          padding: 0 12px;
+          border-bottom: 1px solid var(--global-border-color);
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --thead-bg-color: #{$light-grey};
+}
+:root.dark-theme {
+  --thead-bg-color: #{$--blue-700};
+}
+</style>