edvoyui-component-library-test-flight 0.0.207 → 0.0.208

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { default as EUITableCheckbox } from './table/EUITableCheckbox';
 export { default as UCheckbox } from './table/UCheckbox';
 export { default as EUIPagination } from './table/EUIPagination';
 export { default as EUIStudentPagination } from './table/EUIStudentPagination';
+export { default as EUIDashboardPagination } from './table/EUIDashboardPagination';
 export { default as EUIMultiDropdown } from './dropdown/EUIMultiDropdown';
 export { default as EUIDashboardTable } from './table/EUIDashboardTable';
 export { default as UTable } from './table/UTable';

package/dist/components/table/EUIDashboardPagination.d.ts

@@ -0,0 +1,60 @@
+declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
+    totalCount: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    pageLimit: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    activePage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    divider: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+}>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
+    changePage: (...args: any[]) => void;
+}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
+    totalCount: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    pageLimit: {
+        type: NumberConstructor;
+        default: number;
+        required: true;
+    };
+    activePage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    divider: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+}>> & Readonly<{
+    onChangePage?: ((...args: any[]) => any) | undefined;
+}>, {
+    max: number;
+    pageLimit: number;
+    totalCount: number;
+    activePage: number;
+    divider: string;
+}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/table/EUIDashboardPagination.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="inline-flex flex-row items-center overflow-hidden gap-x-1">
+    <button
+      :class="[
+        'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition duration-150 ease-in-out bg-white text-gray-500 cursor-pointer p-px justify-center size-6 ring-1 ring-gray-200 ring-inset',
+        currentPage === 1 &&
+          'disabled:opacity-50 disabled:select-none disabled:pointer-events-none disabled:cursor-default',
+      ]"
+      :disabled="currentPage === 1"
+      @click="prev()"
+    >
+      <ChevronDownStroke class="text-current transform rotate-90 size-5" />
+    </button>
+
+    <button
+      v-for="i in displayedPages"
+      :key="`button-${i}`"
+      :class="[
+        'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition-transform duration-100 ease-in-out cursor-pointer text-xs font-medium p-1 justify-center min-w-6 h-6',
+        i === '…'
+          ? 'select-none pointer-events-none cursor-default'
+          : currentPage === i
+          ? 'text-purple-700 bg-purple-50 ring-1 ring-inset ring-purple-500'
+          : 'bg-white text-gray-500 ring-1 ring-inset ring-gray-200',
+      ]"
+      @click="typeof i === 'number' && changePage(i - 1)"
+    >
+      {{ i }}
+    </button>
+
+    <button
+      :class="[
+        'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition duration-150 ease-in-out bg-white text-gray-500 cursor-pointer p-px justify-center size-6 ring-1 ring-gray-200 ring-inset',
+        totalPages === currentPage &&
+          'disabled:opacity-50 disabled:pointer-events-none disabled:cursor-default disabled:select-none',
+      ]"
+      :disabled="totalPages === currentPage"
+      @click="next()"
+    >
+      <ChevronDownStroke class="text-current transform -rotate-90 size-5" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+const props = defineProps({
+  totalCount: { type: Number, default: 0, required: true },
+  pageLimit: { type: Number, default: 0, required: true },
+  activePage: { type: Number, default: 0 },
+  divider: { type: String, default: "…" },
+  max: {
+    type: Number,
+    default: 7,
+    validator: (value: number) => value >= 5 && value < Number.MAX_VALUE,
+  },
+});
+
+const emit = defineEmits(["changePage"]);
+
+const currentPage = computed(() => props.activePage + 1);
+
+const totalPages = computed(() =>
+  props.pageLimit > 0 ? Math.ceil(props.totalCount / props.pageLimit) : 1,
+);
+
+const prev = () => {
+  if (props.activePage > 0) changePage(props.activePage - 1);
+};
+
+const next = () => {
+  if (props.activePage < totalPages.value - 1) changePage(props.activePage + 1);
+};
+
+const changePage = (page: number) => emit("changePage", page);
+
+const displayedPages = computed(() => {
+  const total = totalPages.value;
+  const current = currentPage.value;
+  const maxDisplayedPages = Math.max(props.max, 5);
+
+  const r = Math.floor((Math.min(maxDisplayedPages, total) - 5) / 2);
+  const r1 = current - r;
+  const r2 = current + r;
+
+  const beforeWrapped = r1 - 1 > 1;
+  const afterWrapped = r2 + 1 < total;
+
+  const items: Array<number | string> = [];
+
+  if (total <= maxDisplayedPages) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  items.push(1);
+
+  if (beforeWrapped) items.push(props.divider);
+
+  if (!afterWrapped) {
+    const addedItems = current + r + 2 - total;
+    for (let i = current - r - addedItems; i <= current - r - 1; i++)
+      items.push(i);
+  }
+
+  for (let i = Math.max(2, r1); i <= Math.min(total, r2); i++) items.push(i);
+
+  if (!beforeWrapped) {
+    const addedItems = 1 - (current - r - 2);
+    for (let i = current + r + 1; i <= current + r + addedItems; i++)
+      items.push(i);
+  }
+
+  if (afterWrapped) items.push(props.divider);
+
+  if (r2 < total) items.push(total);
+
+  // Replace divider by number on start edge case [1, '…', 3, ...]
+  if (items.length >= 3 && items[1] === props.divider && items[2] === 3)
+    items[1] = 2;
+
+  // Replace divider by number on end edge case [..., 48, '…', 50]
+  if (
+    items.length >= 3 &&
+    items[items.length - 2] === props.divider &&
+    items[items.length - 1] === items.length
+  )
+    items[items.length - 2] = items.length - 1;
+
+  return items;
+});
+</script>
+<style scoped></style>