bfg-common 1.0.15 → 1.0.17

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

@@ -1,189 +1,189 @@
-<template>
-  <div v-show="props.totalPages > 1" class="pagination-list">
-    <button
-      :id="`${props.testId}-first-button`"
-      class="pagination-first"
-      :disabled="currentPage === 1"
-      @click="changeCurrentPage(1)"
-    >
-      <atoms-the-icon
-        name="step-forward"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-    <button
-      :id="`${props.testId}-prev-button`"
-      class="pagination-previous"
-      :disabled="currentPage === 1"
-      @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"
-      type="text"
-      class="pagination-current clr-input"
-      @blur="changeCurrentPageManual"
-    />
-    <span class="divider">/</span>
-    <span class="total-pages">{{ props.totalPages }}</span>
-
-    <button
-      :id="`${props.testId}-next-button`"
-      class="pagination-next"
-      :disabled="currentPage === props.totalPages"
-      @click="changeCurrentPage(currentPage + 1)"
-    >
-      <atoms-the-icon
-        name="angle"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-    <button
-      :id="`${props.testId}-last-button`"
-      class="pagination-last"
-      :disabled="currentPage === props.totalPages"
-      @click="changeCurrentPage(props.totalPages)"
-    >
-      <atoms-the-icon
-        name="step-forward"
-        class="pagination-icon"
-        width="14px"
-        height="14px"
-      />
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_HTMLSelectElement } from '~/models/interfaces'
-const props = withDefaults(
-  defineProps<{
-    page: number
-    totalItems: number
-    totalPages: number
-    pageSize: number
-    testId?: string
-  }>(),
-  { testId: 'ui-data-grid-page' }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const currentPage = ref(1)
-const currentPageLazy = ref(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,
-  (val) => {
-    changePageAndLazy(Math.min(props.totalPages, val))
-  },
-  { immediate: true }
-)
-const changeCurrentPage = (page: number): void => {
-  if (page > props.totalPages || page < 1) return
-  changePageAndLazy(page)
-}
-const changeCurrentPageManual = (e: UI_I_HTMLSelectElement): void => {
-  const newVal = parseInt(e.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`"
+      class="pagination-first"
+      :disabled="currentPage === 1"
+      @click="changeCurrentPage(1)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-prev-button`"
+      class="pagination-previous"
+      :disabled="currentPage === 1"
+      @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"
+      type="text"
+      class="pagination-current clr-input"
+      @blur="changeCurrentPageManual"
+    />
+    <span class="divider">/</span>
+    <span class="total-pages">{{ props.totalPages }}</span>
+
+    <button
+      :id="`${props.testId}-next-button`"
+      class="pagination-next"
+      :disabled="currentPage === props.totalPages"
+      @click="changeCurrentPage(currentPage + 1)"
+    >
+      <atoms-the-icon
+        name="angle"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-last-button`"
+      class="pagination-last"
+      :disabled="currentPage === props.totalPages"
+      @click="changeCurrentPage(props.totalPages)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HTMLSelectElement } from '~/models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    page: number
+    totalItems: number
+    totalPages: number
+    pageSize: number
+    testId?: string
+  }>(),
+  { testId: 'ui-data-grid-page' }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const currentPage = ref(1)
+const currentPageLazy = ref(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,
+  (val) => {
+    changePageAndLazy(Math.min(props.totalPages, val))
+  },
+  { immediate: true }
+)
+const changeCurrentPage = (page: number): void => {
+  if (page > props.totalPages || page < 1) return
+  changePageAndLazy(page)
+}
+const changeCurrentPageManual = (e: UI_I_HTMLSelectElement): void => {
+  const newVal = parseInt(e.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/dataGrid/DataGridPagination.vue

@@ -1,83 +1,83 @@
-<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">
-      {{ 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
-  }>(),
-  { testId: 'ui-data-grid-pagination' }
-)
-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">
+      {{ 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
+  }>(),
+  { testId: 'ui-data-grid-pagination' }
+)
+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,
+  },
+]