edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/table/EUIPagination.vue

@@ -0,0 +1,175 @@
+<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

@@ -0,0 +1,172 @@
+<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-blue-50 ring-2 ring-inset ring-blue-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>

package/src/components/table/EUITable.stories.ts

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import {
+  EUITable,
+  EUITableCheckbox,
+  EUIPageLimit,
+  EUIStudentPagination,
+  EUIDashboardTable,
+  EUIPagination,
+} from "..";
+import {
+  studentData,
+  studentHeader,
+  tableData,
+  tableHeaders,
+} from "../../data/table";
+
+// Meta configuration for the EUItabs stories
+const meta = {
+  title: "Component/Table",
+  component: EUITable,
+  tags: ["autodocs"],
+  argTypes: {
+    headers: {
+      control: "object",
+      description: "Array of header objects to define table columns",
+      defaultValue: () => [
+        { text: "ID", value: "id", sortable: true, width: 50 },
+        { text: "Name", value: "name", sortable: true },
+        { text: "Age", value: "age", sortable: true },
+        { text: "Grade", value: "grade", sortable: true },
+      ],
+    },
+    items: {
+      control: "object",
+      description: "Array of table row data",
+      defaultValue: () => [
+        { id: 1, name: "John Doe", age: 20, grade: "A" },
+        { id: 2, name: "Jane Smith", age: 22, grade: "B" },
+        { id: 3, name: "Alice Johnson", age: 21, grade: "A" },
+        { id: 4, name: "Robert Brown", age: 23, grade: "C" },
+      ],
+    },
+    checkable: {
+      control: "boolean",
+      description: "Toggle to enable checkboxes for rows",
+    },
+    paginated: {
+      control: "boolean",
+      description: "Toggle pagination for the table",
+    },
+    total: {
+      control: "number",
+      description: "Total number of items for pagination",
+    },
+    perPage: {
+      control: "number",
+      description: "Number of items to show per page",
+    },
+    currentPage: {
+      control: "number",
+      description: "Current page number in paginated view",
+    },
+    search: {
+      control: "text",
+      description: "Search text for filtering rows",
+    },
+    tableExpanded: {
+      control: "boolean",
+      description: "Indicates if the table rows should be expanded by default",
+    },
+    tableHeight: {
+      control: "text",
+      description:
+        "CSS height of the table (e.g., 'h-[calc(100svh-20rem)] max-h-[calc(100svh-20rem)]')",
+    },
+  },
+} satisfies Meta<typeof EUITable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    headers: [
+      { text: "ID", value: "id", sortable: true, width: 50 },
+      { text: "Name", value: "name", sortable: true },
+      { text: "Age", value: "age", sortable: true },
+      { text: "Grade", value: "grade", sortable: true },
+    ],
+    items: [
+      { id: 1, name: "John Doe", age: 20, grade: "A" },
+      { id: 2, name: "Jane Smith", age: 22, grade: "B" },
+      { id: 3, name: "Alice Johnson", age: 21, grade: "A" },
+      { id: 4, name: "Robert Brown", age: 23, grade: "C" },
+    ],
+    paginated: true,
+    perPage: 2,
+    total: 4,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUITable,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUITable v-bind="args"></EUITable>`,
+  }),
+};
+
+export const StudentTable: Story = {
+  args: {
+    headers: studentHeader,
+    items: studentData,
+    checkable: true,
+    paginated: true,
+    perPage: 10,
+    total: studentData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUITable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIStudentPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUITable v-bind="args">
+                  <template #item.firstName="{ row, rowIndex }">
+                   <div class="space-y-0.5">
+                    <div class="block text-sm font-medium leading-snug">
+                      {{row?.firstName + " " + row?.lastName }}
+                    </div>
+                    <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                      {{ row?.referenceId }}
+                    </div>
+                  </div>
+                  </template>
+                  <template #item.activeUser="{ row, rowIndex }">
+                    {{ row?.activeUser?.user?.firstName }}
+                    {{ row?.activeUser?.user?.lastName }}
+                  </template>
+              </EUITable>`,
+  }),
+};
+
+export const DashboardTable: Story = {
+  args: {
+    headers: tableHeaders,
+    items: tableData,
+    checkable: true,
+    paginated: true,
+    perPage: 5,
+    total: tableData.length,
+    currentPage: 1,
+  },
+  render: (args) => ({
+    components: {
+      EUIDashboardTable,
+      EUITableCheckbox,
+      EUIPageLimit,
+      EUIPagination,
+    },
+    setup() {
+      return { args };
+    },
+    template: `<EUIDashboardTable v-bind="args">
+                  <template #item.introducer_details="{ row, rowIndex }">
+                   <div class="flex flex-row items-center gap-2">
+                    <div
+                      class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+                    >
+                      <img
+                        :src="row?.introducer_details?.url"
+                        class="size-8 rounded-3xl"
+                        alt=""
+                      />
+                    </div>
+                    <div class="text-sm">{{ row?.introducer_details?.name }}</div>
+                  </div>
+                </template>
+          </EUIDashboardTable>`,
+  }),
+};