edvoyui-component-library-test-flight 0.0.168 → 0.0.170

package/src/components/table/EUIPagination.vue

@@ -1,175 +0,0 @@
-<template>
-
-  <div
-    class="inline-flex flex-row items-center gap-2 overflow-hidden border-gray-100 rounded"
-  >
-    <div>
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-2',
-          currentPage === 1 && 'opacity-50 pointer-events-none',
-        ]"
-        :disabled="currentPage === 1 ? true : false"
-        @click="prev()"
-      >
-        <ChevronDownStroke class="text-current transform rotate-90 size-6" />
-        <span class="hidden md:block">Back</span>
-      </button>
-    </div>
-    <div v-for="i in displayedPages" :key="i">
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out  cursor-pointer text-sm font-medium px-3 py-2',
-          i == '…'
-            ? 'select-none pointer-events-none'
-            : currentPage == i
-            ? 'text-white bg-violet-600'
-            : 'bg-white text-black',
-        ]"
-        @click="typeof i === 'number' && changePage(i - 1)"
-      >
-        {{ i }}
-      </button>
-    </div>
-    <div>
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-2',
-          totalPages === currentPage && 'opacity-50 pointer-events-none',
-        ]"
-        :disabled="totalPages === currentPage ? true : false"
-        @click="next()"
-      >
-        <span class="hidden md:block">Next</span>
-        <ChevronDownStroke class="text-current transform -rotate-90 size-6" />
-      </button>
-    </div>
-  </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,
-            validate (value:number) {
-                return value >= 5 && value < Number.MAX_VALUE
-            }
-        }
-    })
-
-    const emit = defineEmits(['changePage'])
-    const currentPage = computed(() => props.activePage + 1);
-    const totalPages = computed(() => {
-      return props.pageLimit > 0 ? Math.ceil(props.totalCount / props.pageLimit) : 1
-    });
-
-    const prev = () => {
-        if (props.activePage > 0) {
-            const prevPage = props.activePage - 1
-            changePage(prevPage)
-        }
-    }
-
-    const next = () => {
-        if (props.activePage < totalPages.value - 1) {
-            const nextPage = props.activePage + 1
-            changePage(nextPage)
-        }
-    }
-
-    const changePage = (page: Number) => {
-        emit('changePage', page)
-    }
-
-// new pagination count
-const pages = computed(() => Array.from({ length: Math.ceil(props.totalCount / props.pageLimit) },(_, i) => i + 1))
-
-const displayedPages = computed(() => {
-  const totalPages = pages.value.length
-  const current = currentPage.value
-  const maxDisplayedPages = Math.max(props.max, 12)
-
-  const r = Math.floor((Math.min(maxDisplayedPages, totalPages) - 7) / 2)
-  const r1 = current - r
-  const r2 = current + r
-
-  const beforeWrapped = r1 - 1 > 1
-  const afterWrapped = r2 + 1 < totalPages
-
-  const items: Array<number | string> = []
-
-  if (totalPages <= maxDisplayedPages) {
-    for (let i = 1; i <= totalPages; i++) {
-      items.push(i)
-    }
-    return items
-  }
-
-  items.push(1)
-
-  if (beforeWrapped) {
-    items.push(props.divider)
-  }
-
-  if (!afterWrapped) {
-    const addedItems = current + r + 2 - totalPages
-    for (let i = current - r - addedItems; i <= current - r - 1; i++) {
-      items.push(i)
-    }
-  }
-
-  for (let i = Math.max(2, r1); i <= Math.min(totalPages, 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 < totalPages) {
-    items.push(totalPages)
-  }
-
-  // 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>

package/src/components/table/EUIStudentPagination.vue

@@ -1,172 +0,0 @@
-<template>
-  <div class="inline-flex flex-row items-center overflow-hidden gap-x-1">
-    <div>
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-1 leading-6',
-          currentPage === 1 && 'opacity-50 pointer-events-none',
-        ]"
-        :disabled="currentPage === 1 ? true : false"
-        @click="prev()"
-      >
-        <ChevronDownStroke class="text-current transform rotate-90 size-6" />
-        <span class="hidden md:block">Prev</span>
-      </button>
-    </div>
-    <div v-for="i in displayedPages" :key="i">
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-1 items-center transition-transform duration-100 ease-in-out cursor-pointer text-sm font-medium leading-6 px-3 py-1',
-          i === '…'
-            ? 'select-none pointer-events-none'
-            : currentPage === i
-            ? 'text-black bg-purple-50 ring-2 ring-inset ring-purple-600'
-            : 'bg-white text-black',
-        ]"
-        @click="typeof i === 'number' && changePage(i - 1)"
-      >
-        {{ i }}
-      </button>
-    </div>
-    <div>
-      <button
-        :class="[
-          'rounded-md capitalize box-border border-none focus:outline-none inline-flex flex-row gap-x-2 items-center transition duration-150 ease-in-out bg-white text-black cursor-pointer text-sm font-medium px-3 py-1 leading-6',
-          totalPages === currentPage && 'opacity-50 pointer-events-none',
-        ]"
-        :disabled="totalPages === currentPage ? true : false"
-        @click="next()"
-      >
-        <span class="hidden md:block">Next</span>
-        <ChevronDownStroke class="text-current transform -rotate-90 size-6" />
-      </button>
-    </div>
-  </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,
-            validate (value:number) {
-                return value >= 5 && value < Number.MAX_VALUE
-            }
-        }
-    })
-
-    const emit = defineEmits(['changePage'])
-    const currentPage = computed(() => props.activePage + 1);
-
-    const totalPages = computed(() => {
-      return props.pageLimit > 0 ? Math.ceil(props.totalCount / props.pageLimit) : 1
-    });
-
-    const prev = () => {
-        if (props.activePage > 0) {
-            const prevPage = props.activePage - 1
-            changePage(prevPage)
-        }
-    }
-
-    const next = () => {
-        if (props.activePage < totalPages.value - 1) {
-            const nextPage = props.activePage + 1
-            changePage(nextPage)
-        }
-    }
-
-    const changePage = (page: Number) => {
-        emit('changePage', page)
-    }
-
-// new pagination count
-const pages = computed(() => Array.from({ length: Math.ceil(props.totalCount / props.pageLimit) },(_, i) => i + 1))
-
-const displayedPages = computed(() => {
-  const totalPages = pages.value.length
-  const current = currentPage.value
-  const maxDisplayedPages = Math.max(props.max, 5)
-
-  const r = Math.floor((Math.min(maxDisplayedPages, totalPages) - 5) / 2)
-  const r1 = current - r
-  const r2 = current + r
-
-  const beforeWrapped = r1 - 1 > 1
-  const afterWrapped = r2 + 1 < totalPages
-
-  const items: Array<number | string> = []
-
-  if (totalPages <= maxDisplayedPages) {
-    for (let i = 1; i <= totalPages; i++) {
-      items.push(i)
-    }
-    return items
-  }
-
-  items.push(1)
-
-  if (beforeWrapped) {
-    items.push(props.divider)
-  }
-
-  if (!afterWrapped) {
-    const addedItems = current + r + 2 - totalPages
-    for (let i = current - r - addedItems; i <= current - r - 1; i++) {
-      items.push(i)
-    }
-  }
-
-  for (let i = Math.max(2, r1); i <= Math.min(totalPages, 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 < totalPages) {
-    items.push(totalPages)
-  }
-
-  // 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>