bfg-common 1.2.53 → 1.2.55

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

@@ -1,89 +1,89 @@
-<template>
-  <div class="pagination">
-    <div v-if="!props.hidePagination" class="pagination-size">
-      <atoms-per-page
-        v-if="!props.hidePageSize"
-        :test-id="props.testId"
-        :page-size="props.pageSize"
-        :options="props.options"
-        @change="changePageSize"
-      />
-    </div>
-
-    <div
-      :class="['pagination-description', { 'ml-1': !props.isShowHiddenInfo }]"
-    >
-      {{ totalItemCount }}
-    </div>
-
-    <atoms-table-data-grid-page
-      v-if="!props.hidePagination"
-      :test-id="props.testId"
-      :page="props.page"
-      :total-items="props.totalItems"
-      :total-pages="props.totalPages"
-      :page-size="props.pageSize"
-      @change="changePage"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    options: UI_I_OptionItem[]
-    pageSize: number
-    page: number
-    totalItems: number
-    totalPages: number
-    pageItemsCount: number
-    hidePagination?: boolean
-    hidePageSize?: boolean
-    showPageInfo?: boolean
-    testId?: string
-    isShowHiddenInfo?: boolean
-  }>(),
-  {
-    testId: 'ui-data-grid-pagination',
-    isShowHiddenInfo: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'change-page-size', value: number): void
-  (event: 'change-page', value: number): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-const totalItemCount = computed<string>(() => {
-  const start = (props.page - 1) * props.pageSize + 1
-  // const end = Math.min(props.totalItems, props.page * props.pageSize)
-
-  const paginationInfo = props.showPageInfo
-    ? `${start} - ${props.pageItemsCount} ${localization.value.of}`
-    : ''
-  // props.totalPages > 1 ? `${start} - ${end} ${localization.of}` : ''
-
-  return `${paginationInfo} ${
-    props.totalItems
-  } ${localization.value.items.toLowerCase()}`
-})
-
-const changePageSize = (pageSize: number): void => {
-  const newTotalPages = Math.ceil(props.totalItems / pageSize)
-  if (newTotalPages < props.page) changePage(newTotalPages)
-  emits('change-page-size', pageSize)
-}
-
-const changePage = (page: number): void => {
-  emits('change-page', page)
-}
-</script>
-
-<style scoped lang="scss">
-.pagination {
-  display: inline-flex;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="pagination">
+    <div v-if="!props.hidePagination" class="pagination-size">
+      <atoms-per-page
+        v-if="!props.hidePageSize"
+        :test-id="props.testId"
+        :page-size="props.pageSize"
+        :options="props.options"
+        @change="changePageSize"
+      />
+    </div>
+
+    <div
+      :class="['pagination-description', { 'ml-1': !props.isShowHiddenInfo }]"
+    >
+      {{ totalItemCount }}
+    </div>
+
+    <atoms-table-data-grid-page
+      v-if="!props.hidePagination"
+      :test-id="props.testId"
+      :page="props.page"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :page-size="props.pageSize"
+      @change="changePage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    options: UI_I_OptionItem[]
+    pageSize: number
+    page: number
+    totalItems: number
+    totalPages: number
+    pageItemsCount: number
+    hidePagination?: boolean
+    hidePageSize?: boolean
+    showPageInfo?: boolean
+    testId?: string
+    isShowHiddenInfo?: boolean
+  }>(),
+  {
+    testId: 'ui-data-grid-pagination',
+    isShowHiddenInfo: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change-page-size', value: number): void
+  (event: 'change-page', value: number): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+const totalItemCount = computed<string>(() => {
+  const start = (props.page - 1) * props.pageSize + 1
+  // const end = Math.min(props.totalItems, props.page * props.pageSize)
+
+  const paginationInfo = props.showPageInfo
+    ? `${start} - ${props.pageItemsCount} ${localization.value.of}`
+    : ''
+  // props.totalPages > 1 ? `${start} - ${end} ${localization.of}` : ''
+
+  return `${paginationInfo} ${
+    props.totalItems
+  } ${localization.value.items.toLowerCase()}`
+})
+
+const changePageSize = (pageSize: number): void => {
+  const newTotalPages = Math.ceil(props.totalItems / pageSize)
+  if (newTotalPages < props.page) changePage(newTotalPages)
+  emits('change-page-size', pageSize)
+}
+
+const changePage = (page: number): void => {
+  emits('change-page', page)
+}
+</script>
+
+<style scoped lang="scss">
+.pagination {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/components/atoms/table/dataGrid/config/itemsPerPage.ts

@@ -1,20 +1,20 @@
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-export const itemsPerPage: UI_I_OptionItem[] = [
-  {
-    text: '35',
-    value: 35,
-  },
-  {
-    text: '50',
-    value: 50,
-  },
-  {
-    text: '100',
-    value: 100,
-  },
-  {
-    text: '200',
-    value: 200,
-  },
-]
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const itemsPerPage: UI_I_OptionItem[] = [
+  {
+    text: '35',
+    value: 35,
+  },
+  {
+    text: '50',
+    value: 50,
+  },
+  {
+    text: '100',
+    value: 100,
+  },
+  {
+    text: '200',
+    value: 200,
+  },
+]

package/components/atoms/table/dataGrid/models/interfaces.ts

@@ -1,24 +1,24 @@
-export interface UI_I_BodyItem {
-  key: string
-  text: string | number
-  id: number | string
-  selected?: boolean
-  data?: any
-}
-export interface UI_I_HeadItem {
-  key: string
-  text: string
-  sortColumn: string
-  showFilter: boolean
-  hasFilter: boolean
-  filter: string
-  width: string
-  iconName?: string
-}
-
-export interface UI_I_ColumnKey {
-  key: string
-  text: string
-  show: boolean
-  id?: number
-}
+export interface UI_I_BodyItem {
+  key: string
+  text: string | number
+  id: number | string
+  selected?: boolean
+  data?: any
+}
+export interface UI_I_HeadItem {
+  key: string
+  text: string
+  sortColumn: string
+  showFilter: boolean
+  hasFilter: boolean
+  filter: string
+  width: string
+  iconName?: string
+}
+
+export interface UI_I_ColumnKey {
+  key: string
+  text: string
+  show: boolean
+  id?: number
+}

package/components/atoms/table/dataGrid/models/types.ts

@@ -1,5 +1,5 @@
-import { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/models/interfaces'
-
-export type UI_T_SelectedRow = (number | string)[] | number | string | null
-export type UI_T_ColumnKeys = UI_I_ColumnKey[] | undefined
-export type UI_T_DataGridType = 'radio' | 'checkbox'
+import { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/models/interfaces'
+
+export type UI_T_SelectedRow = (number | string)[] | number | string | null
+export type UI_T_ColumnKeys = UI_I_ColumnKey[] | undefined
+export type UI_T_DataGridType = 'radio' | 'checkbox'

package/components/atoms/table/dataGrid/utils/constructDataTable.ts

@@ -1,32 +1,32 @@
-import {
-  UI_I_ColumnKey,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/models/interfaces'
-
-export const constructColumnKey = (
-  key: string,
-  text: string,
-  show: boolean
-): UI_I_ColumnKey => ({
-  key,
-  text,
-  show,
-})
-
-export const constructHeadItem = (
-  key: string,
-  text: string,
-  sortColumn: string,
-  hasFilter: boolean,
-  width: string,
-  iconName?: string
-): UI_I_HeadItem => ({
-  key,
-  text,
-  sortColumn,
-  showFilter: false,
-  hasFilter,
-  filter: '',
-  width,
-  iconName,
-})
+import {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
+
+export const constructColumnKey = (
+  key: string,
+  text: string,
+  show: boolean
+): UI_I_ColumnKey => ({
+  key,
+  text,
+  show,
+})
+
+export const constructHeadItem = (
+  key: string,
+  text: string,
+  sortColumn: string,
+  hasFilter: boolean,
+  width: string,
+  iconName?: string
+): UI_I_HeadItem => ({
+  key,
+  text,
+  sortColumn,
+  showFilter: false,
+  hasFilter,
+  filter: '',
+  width,
+  iconName,
+})

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

@@ -1,60 +1,60 @@
-<template>
-  <table class="table table-vertical">
-    <tbody>
-      <tr v-for="item in list" :key="item.id">
-        <th
-          scope="row"
-          :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
-        >
-          {{ item.label }}
-        </th>
-        <td class="vm-name">
-          <slot :name="item.key">
-            {{ item.value }}
-          </slot>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script lang="ts" setup>
-import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_TableInfoItem[]
-}>()
-
-const list = computed<UI_I_TableInfoItem[]>(() => {
-  return props.items.map((item) => {
-    return {
-      ...item,
-      id: Symbol(''),
-    }
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-.dark-theme {
-  table {
-    border-color: #495865;
-
-    &.table-vertical th:first-child,
-    &.table-vertical td {
-      background-color: #29414e;
-      border-color: #495865;
-    }
-  }
-}
-
-table {
-  .vm-name-label {
-    width: 20%;
-
-    &.hard-disk-properties {
-      padding-left: 25px;
-    }
-  }
-}
-</style>
+<template>
+  <table class="table table-vertical">
+    <tbody>
+      <tr v-for="item in list" :key="item.id">
+        <th
+          scope="row"
+          :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
+        >
+          {{ item.label }}
+        </th>
+        <td class="vm-name">
+          <slot :name="item.key">
+            {{ item.value }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_TableInfoItem[]
+}>()
+
+const list = computed<UI_I_TableInfoItem[]>(() => {
+  return props.items.map((item) => {
+    return {
+      ...item,
+      id: Symbol(''),
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.dark-theme {
+  table {
+    border-color: #495865;
+
+    &.table-vertical th:first-child,
+    &.table-vertical td {
+      background-color: #29414e;
+      border-color: #495865;
+    }
+  }
+}
+
+table {
+  .vm-name-label {
+    width: 20%;
+
+    &.hard-disk-properties {
+      padding-left: 25px;
+    }
+  }
+}
+</style>

package/components/atoms/table/info/models/interfaces.ts

@@ -1,9 +1,9 @@
-export interface UI_I_TableInfoItem {
-  label: string
-  value: any
-  isProperty?: boolean
-  key?: string
-  localization?: string
-  localizationTemplate?: string
-  isCapital?: boolean
-}
+export interface UI_I_TableInfoItem {
+  label: string
+  value: any
+  isProperty?: boolean
+  key?: string
+  localization?: string
+  localizationTemplate?: string
+  isCapital?: boolean
+}

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 {
-  UI_I_TableHeadItem,
-  UI_I_TableBodyItem,
-} from '~/components/atoms/table/simpleEvent/models/interfaces'
-
-const props = defineProps<{
-  headItems: UI_I_TableHeadItem
-  bodyItems: UI_I_TableBodyItem[][]
-}>()
-
-const presentBodyItems = ref([])
-watch(
-  () => props.bodyItems,
-  (val) => {
-    presentBodyItems.value = useDeepCopy(val)
-  },
-  { 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 {
+  UI_I_TableHeadItem,
+  UI_I_TableBodyItem,
+} from '~/components/atoms/table/simpleEvent/models/interfaces'
+
+const props = defineProps<{
+  headItems: UI_I_TableHeadItem
+  bodyItems: UI_I_TableBodyItem[][]
+}>()
+
+const presentBodyItems = ref([])
+watch(
+  () => props.bodyItems,
+  (val) => {
+    presentBodyItems.value = useDeepCopy(val)
+  },
+  { 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>