bfg-common 1.1.2 → 1.1.4

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>