@datametria/vue-components 2.3.1 → 2.4.1

package/src/components/DatametriaPagination.vue

@@ -1,373 +1,377 @@
-<template>
-  <div class="datametria-pagination" :class="classes">
-    <template v-for="item in layoutItems" :key="item">
-      <!-- Total -->
-      <span v-if="item === 'total'" class="datametria-pagination__total">
-        Total: {{ total }}
-      </span>
-
-      <!-- Sizes -->
-      <select
-        v-if="item === 'sizes'"
-        v-model="currentPageSize"
-        class="datametria-pagination__sizes"
-        :disabled="disabled"
-        @change="handleSizeChange"
-      >
-        <option v-for="size in pageSizes" :key="size" :value="size">
-          {{ size }} / página
-        </option>
-      </select>
-
-      <!-- Prev -->
-      <button
-        v-if="item === 'prev'"
-        class="datametria-pagination__btn"
-        :disabled="currentPage === 1 || disabled"
-        @click="handlePrev"
-      >
-        <span class="datametria-pagination__icon">‹</span>
-      </button>
-
-      <!-- Pager -->
-      <ul v-if="item === 'pager'" class="datametria-pagination__pager">
-        <li
-          v-for="page in pagerList"
-          :key="page"
-          class="datametria-pagination__number"
-          :class="{
-            'is-active': page === currentPage,
-            'is-disabled': disabled
-          }"
-          @click="handlePageClick(page)"
-        >
-          {{ page === '...' ? '•••' : page }}
-        </li>
-      </ul>
-
-      <!-- Next -->
-      <button
-        v-if="item === 'next'"
-        class="datametria-pagination__btn"
-        :disabled="currentPage === totalPages || disabled"
-        @click="handleNext"
-      >
-        <span class="datametria-pagination__icon">›</span>
-      </button>
-
-      <!-- Jumper -->
-      <span v-if="item === 'jumper'" class="datametria-pagination__jumper">
-        Ir para
-        <input
-          v-model.number="jumpPage"
-          type="number"
-          min="1"
-          :max="totalPages"
-          :disabled="disabled"
-          @keyup.enter="handleJump"
-        />
-      </span>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-interface Props {
-  modelValue?: number
-  total?: number
-  pageSize?: number
-  pageSizes?: number[]
-  layout?: string
-  pagerCount?: number
-  disabled?: boolean
-  small?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: 1,
-  total: 0,
-  pageSize: 10,
-  pageSizes: () => [10, 20, 30, 50, 100],
-  layout: 'prev, pager, next',
-  pagerCount: 7,
-  disabled: false,
-  small: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-  'size-change': [size: number]
-  'current-change': [page: number]
-}>()
-
-const currentPage = ref(props.modelValue)
-const currentPageSize = ref(props.pageSize)
-const jumpPage = ref<number | ''>('')
-
-const totalPages = computed(() => Math.ceil(props.total / currentPageSize.value) || 1)
-
-const layoutItems = computed(() => {
-  return props.layout.split(',').map(item => item.trim())
-})
-
-const pagerList = computed(() => {
-  const pages: (number | string)[] = []
-  const count = props.pagerCount
-  const half = Math.floor(count / 2)
-
-  if (totalPages.value <= count) {
-    for (let i = 1; i <= totalPages.value; i++) {
-      pages.push(i)
-    }
-  } else {
-    if (currentPage.value <= half + 1) {
-      for (let i = 1; i <= count - 2; i++) {
-        pages.push(i)
-      }
-      pages.push('...')
-      pages.push(totalPages.value)
-    } else if (currentPage.value >= totalPages.value - half) {
-      pages.push(1)
-      pages.push('...')
-      for (let i = totalPages.value - count + 3; i <= totalPages.value; i++) {
-        pages.push(i)
-      }
-    } else {
-      pages.push(1)
-      pages.push('...')
-      for (let i = currentPage.value - half + 2; i <= currentPage.value + half - 2; i++) {
-        pages.push(i)
-      }
-      pages.push('...')
-      pages.push(totalPages.value)
-    }
+<template>
+  <div class="datametria-pagination" :class="classes">
+    <template v-for="item in layoutItems" :key="item">
+      <!-- Total -->
+      <span v-if="item === 'total'" class="datametria-pagination__total">
+        Total: {{ total }}
+      </span>
+
+      <!-- Sizes -->
+      <select
+        v-if="item === 'sizes'"
+        v-model="currentPageSize"
+        class="datametria-pagination__sizes"
+        :disabled="disabled"
+        @change="handleSizeChange"
+      >
+        <option v-for="size in pageSizes" :key="size" :value="size">
+          {{ size }} / página
+        </option>
+      </select>
+
+      <!-- Prev -->
+      <button
+        v-if="item === 'prev'"
+        class="datametria-pagination__btn"
+        :disabled="currentPage === 1 || disabled"
+        @click="handlePrev"
+      >
+        <span class="datametria-pagination__icon">‹</span>
+      </button>
+
+      <!-- Pager -->
+      <ul v-if="item === 'pager'" class="datametria-pagination__pager">
+        <li
+          v-for="page in pagerList"
+          :key="page"
+          class="datametria-pagination__number"
+          :class="{
+            'is-active': page === currentPage,
+            'is-disabled': disabled
+          }"
+          @click="handlePageClick(page)"
+        >
+          {{ page === '...' ? '•••' : page }}
+        </li>
+      </ul>
+
+      <!-- Next -->
+      <button
+        v-if="item === 'next'"
+        class="datametria-pagination__btn"
+        :disabled="currentPage === totalPages || disabled"
+        @click="handleNext"
+      >
+        <span class="datametria-pagination__icon">›</span>
+      </button>
+
+      <!-- Jumper -->
+      <span v-if="item === 'jumper'" class="datametria-pagination__jumper">
+        Ir para
+        <input
+          v-model.number="jumpPage"
+          type="number"
+          min="1"
+          :max="totalPages"
+          :disabled="disabled"
+          @keyup.enter="handleJump"
+        />
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: number
+  total?: number
+  pageSize?: number
+  pageSizes?: number[]
+  layout?: string
+  pagerCount?: number
+  disabled?: boolean
+  small?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  total: 0,
+  pageSize: 10,
+  pageSizes: () => [10, 20, 30, 50, 100],
+  layout: 'prev, pager, next',
+  pagerCount: 7,
+  disabled: false,
+  small: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  'size-change': [size: number]
+  'current-change': [page: number]
+}>()
+
+const currentPage = ref(props.modelValue)
+const currentPageSize = ref(props.pageSize)
+const jumpPage = ref<number | ''>('')
+
+const totalPages = computed(() => Math.ceil(props.total / currentPageSize.value) || 1)
+
+const layoutItems = computed(() => {
+  return props.layout.split(',').map(item => item.trim())
+})
+
+const pagerList = computed(() => {
+  const pages: (number | string)[] = []
+  const count = props.pagerCount
+  const half = Math.floor(count / 2)
+
+  if (totalPages.value <= count) {
+    for (let i = 1; i <= totalPages.value; i++) {
+      pages.push(i)
+    }
+  } else {
+    if (currentPage.value <= half + 1) {
+      for (let i = 1; i <= count - 2; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages.value)
+    } else if (currentPage.value >= totalPages.value - half) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = totalPages.value - count + 3; i <= totalPages.value; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = currentPage.value - half + 2; i <= currentPage.value + half - 2; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages.value)
+    }
+  }
+
+  return pages
+})
+
+const classes = computed(() => ({
+  'is-small': props.small,
+  'is-disabled': props.disabled
+}))
+
+watch(() => props.modelValue, (val) => {
+  currentPage.value = val
+})
+
+watch(() => props.pageSize, (val) => {
+  currentPageSize.value = val
+})
+
+const handlePrev = () => {
+  if (currentPage.value > 1) {
+    changePage(currentPage.value - 1)
+  }
+}
+
+const handleNext = () => {
+  if (currentPage.value < totalPages.value) {
+    changePage(currentPage.value + 1)
+  }
+}
+
+const handlePageClick = (page: number | string) => {
+  if (page === '...' || props.disabled) return
+  changePage(page as number)
+}
+
+const handleSizeChange = () => {
+  const newPage = Math.min(currentPage.value, Math.ceil(props.total / currentPageSize.value))
+  changePage(newPage)
+  emit('size-change', currentPageSize.value)
+}
+
+const handleJump = () => {
+  if (jumpPage.value && jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
+    changePage(jumpPage.value)
+    jumpPage.value = ''
+  }
+}
+
+const changePage = (page: number) => {
+  if (page === currentPage.value) return
+  currentPage.value = page
+  emit('update:modelValue', page)
+  emit('current-change', page)
+}
+</script>
+
+<style scoped>
+.datametria-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--datametria-text-primary, #303133);
+}
+
+.datametria-pagination.is-small {
+  font-size: 12px;
+}
+
+.datametria-pagination.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.datametria-pagination__total {
+  color: var(--datametria-text-secondary, #606266);
+}
+
+.datametria-pagination__sizes {
+  width: 120px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-primary, #303133);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__sizes:hover:not(:disabled) {
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__sizes:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__sizes:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-primary, #303133);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__btn:hover:not(:disabled) {
+  color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__icon {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.datametria-pagination__pager {
+  display: flex;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.datametria-pagination__number {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__number:hover:not(.is-active):not(.is-disabled) {
+  color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__number.is-active {
+  color: #ffffff;
+  background: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__number.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__jumper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--datametria-text-secondary, #606266);
+}
+
+.datametria-pagination__jumper input {
+  width: 60px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.datametria-pagination__jumper input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__jumper input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-pagination {
+    color: var(--datametria-text-primary, #e5eaf3);
   }
 
-  return pages
-})
-
-const classes = computed(() => ({
-  'is-small': props.small,
-  'is-disabled': props.disabled
-}))
-
-watch(() => props.modelValue, (val) => {
-  currentPage.value = val
-})
-
-watch(() => props.pageSize, (val) => {
-  currentPageSize.value = val
-})
-
-const handlePrev = () => {
-  if (currentPage.value > 1) {
-    changePage(currentPage.value - 1)
-  }
-}
-
-const handleNext = () => {
-  if (currentPage.value < totalPages.value) {
-    changePage(currentPage.value + 1)
-  }
-}
-
-const handlePageClick = (page: number | string) => {
-  if (page === '...' || props.disabled) return
-  changePage(page as number)
-}
-
-const handleSizeChange = () => {
-  const newPage = Math.min(currentPage.value, Math.ceil(props.total / currentPageSize.value))
-  changePage(newPage)
-  emit('size-change', currentPageSize.value)
-}
-
-const handleJump = () => {
-  if (jumpPage.value && jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
-    changePage(jumpPage.value)
-    jumpPage.value = ''
-  }
-}
-
-const changePage = (page: number) => {
-  if (page === currentPage.value) return
-  currentPage.value = page
-  emit('update:modelValue', page)
-  emit('current-change', page)
-}
-</script>
-
-<style scoped>
-.datametria-pagination {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: var(--datametria-text-primary, #303133);
-}
-
-.datametria-pagination.is-small {
-  font-size: 12px;
-}
-
-.datametria-pagination.is-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.datametria-pagination__total {
-  color: var(--datametria-text-secondary, #606266);
-}
-
-.datametria-pagination__sizes {
-  width: 120px;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  background: var(--datametria-bg-color, #ffffff);
-  color: var(--datametria-text-primary, #303133);
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.datametria-pagination__sizes:hover:not(:disabled) {
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__sizes:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__sizes:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-pagination__btn {
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  background: var(--datametria-bg-color, #ffffff);
-  color: var(--datametria-text-primary, #303133);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.datametria-pagination__btn:hover:not(:disabled) {
-  color: var(--datametria-primary-color, #0072ce);
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-pagination__icon {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.datametria-pagination__pager {
-  display: flex;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.datametria-pagination__number {
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  background: var(--datametria-bg-color, #ffffff);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.datametria-pagination__number:hover:not(.is-active):not(.is-disabled) {
-  color: var(--datametria-primary-color, #0072ce);
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__number.is-active {
-  color: #ffffff;
-  background: var(--datametria-primary-color, #0072ce);
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__number.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-pagination__jumper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--datametria-text-secondary, #606266);
-}
-
-.datametria-pagination__jumper input {
-  width: 60px;
-  height: 32px;
-  padding: 0 8px;
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
-  border-radius: 4px;
-  text-align: center;
-  font-size: 14px;
-}
-
-.datametria-pagination__jumper input:focus {
-  outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
-}
-
-.datametria-pagination__jumper input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-pagination {
-    color: var(--datametria-text-primary, #e5eaf3);
-  }
-
-  .datametria-pagination__total,
-  .datametria-pagination__jumper {
-    color: var(--datametria-text-secondary, #a3a6ad);
-  }
-
-  .datametria-pagination__btn,
-  .datametria-pagination__number {
-    border-color: var(--datametria-border-color, #4c4d4f);
-    background: var(--datametria-bg-color, #1d1e1f);
-    color: var(--datametria-text-primary, #e5eaf3);
-  }
-
-  .datametria-pagination__jumper input {
-    border-color: var(--datametria-border-color, #4c4d4f);
-    background: var(--datametria-bg-color, #1d1e1f);
-    color: var(--datametria-text-primary, #e5eaf3);
-  }
-
-  .datametria-pagination__sizes {
-    border-color: var(--datametria-border-color, #4c4d4f);
-    background: var(--datametria-bg-color, #1d1e1f);
-    color: var(--datametria-text-primary, #e5eaf3);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-pagination {
+color: var(--datametria-text-primary, #e5eaf3);
+}
+
+  .datametria-pagination__total,
+  .datametria-pagination__jumper {
+    color: var(--datametria-text-secondary, #a3a6ad);
+  }
+
+  .datametria-pagination__btn,
+  .datametria-pagination__number {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-pagination__jumper input {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-pagination__sizes {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+}
+</style>