@teammodlr/ui-kit 2.0.21 → 2.0.22

package/src/components/pagination/Pagination.vue

@@ -1,230 +1,230 @@
-<template>
-    <div :class="style.pagination">
-<!--        <div v-if="showTotal || showPageSize">-->
-<!--            <div v-if="showTotal">-->
-<!--                {{ page }}-->
-<!--            </div>-->
-<!--        </div>-->
-
-        <div :class="style.buttons">
-            <button
-                :class="style.page"
-                :tabindex="page === 1 ? undefined : '0'"
-                :disabled="page === 1"
-                aria-label="Previous"
-                role="button"
-                @click="handlePageChange(page - 1)"
-            >
-                <svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="m2.462 12 7.222-6.77-1.368-1.46-8 7.5a1 1 0 0 0 0 1.46l8 7.5 1.368-1.46L2.462 12z" clip-rule="evenodd"></path></svg>
-            </button>
-
-            <div :class="style.pages">
-                <template
-                    v-for="(item, index) in pageIndicatorSeries"
-                    :key="index"
-                >
-                    <button
-                        :class="[
-                            style.page,
-                            {
-                                [style.active]: item.current
-                            },
-                        ]"
-                        :ref="getKey(item)"
-                        tabindex="0"
-                        :disabled="isEmpty"
-                        role="button"
-                        @click="handlePageChange(item.page)"
-                        :aria-label="item.current ? `Page ${item.page}` : `Goto page ${item.page}`"
-                    >
-                        <template v-if="item.more">
-                            ...
-                        </template>
-                        <template v-else>
-                            {{ item.text }}
-                        </template>
-                    </button>
-                </template>
-            </div>
-
-            <button
-                :tabindex="page === pageCount ? undefined : '0'"
-                :disabled="page === pageCount || pageCount === 0"
-                aria-label="Next"
-                role="button"
-                @click="handlePageChange(page + 1)"
-                :class="style.page"
-            >
-                <svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="M10 12a1 1 0 0 1-.316.73l-8 7.5-1.368-1.46L7.538 12 .316 5.23l1.368-1.46 8 7.5A1 1 0 0 1 10 12z" clip-rule="evenodd"></path></svg>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, watch} from "vue";
-import * as style from "./style"
-
-const pageIndicatorLength = 7
-const aroundIndicatorLength = 1
-const moreIndicatorOffsetLength = 5
-export default defineComponent({
-    name: "Pagination",
-    props: {
-        page: {
-            type: Number,
-            default: 1
-        },
-        pageSize: {
-            type: Number,
-            default: 10
-        },
-        pageSizes: {
-            type: Array
-        },
-        total: {
-            type: Number
-        },
-        showPageSize: {
-            type: Boolean,
-            default: true
-        },
-        showTotal: {
-            type: Boolean,
-            default: true
-        }
-    },
-    emits: [
-        'update:page',
-        'update:pageSize',
-    ],
-    setup(props, {emit}) {
-        const realTotal = computed(() => {
-            return props.total || 0;
-        });
-
-        const isEmpty = computed(() => {
-            return realTotal.value === 0;
-        });
-
-        const realPageSizes = computed(() => {
-            const sizes = props.pageSizes == null
-                ? [10, 20, 30, 40, 50]
-                : props.pageSizes;
-
-            return sizes.map((size) => ({
-                label: size,
-                value: size
-            }));
-        });
-
-        const pageCount = computed(() => {
-            return Math.ceil(realTotal.value / props.pageSize);
-        });
-
-        const pageIndicatorSeries = computed(() => {
-            let {page} = props;
-
-            if (isEmpty.value) {
-                return [getPageIndicator(1, {current: false})];
-            }
-
-            let continuousIndicatorLength = aroundIndicatorLength * 2 + 1
-            let boundaryIndicatorLength =
-                (pageIndicatorLength - continuousIndicatorLength - 2) / 2
-            let leftLen
-            let rightLen
-            let offsetBackward = Math.max(page - moreIndicatorOffsetLength, 1)
-            let offsetForward = Math.min(page + moreIndicatorOffsetLength, pageCount.value)
-            switch (true) {
-                case pageCount.value <= pageIndicatorLength:
-                    return getPageSeries(1, pageCount.value)
-                case page <= boundaryIndicatorLength + aroundIndicatorLength + 2:
-                    leftLen = pageIndicatorLength - boundaryIndicatorLength - 1
-                    return getPageSeries(1, leftLen)
-                        .concat(
-                            getPageIndicator(offsetForward, { more: true, forward: true })
-                        )
-                        .concat(
-                            getPageSeries(
-                                pageCount.value - boundaryIndicatorLength + 1,
-                                boundaryIndicatorLength
-                            )
-                        )
-                case page >=
-                pageCount.value - boundaryIndicatorLength - aroundIndicatorLength - 1:
-                    rightLen = pageIndicatorLength - boundaryIndicatorLength - 1
-                    return getPageSeries(1, boundaryIndicatorLength)
-                        .concat(
-                            getPageIndicator(offsetBackward, { more: true, forward: false })
-                        )
-                        .concat(getPageSeries(pageCount.value - rightLen + 1, rightLen))
-                default:
-                    return getPageSeries(1, boundaryIndicatorLength)
-                        .concat(
-                            getPageIndicator(offsetBackward, { more: true, forward: false })
-                        )
-                        .concat(
-                            getPageSeries(
-                                page - aroundIndicatorLength,
-                                continuousIndicatorLength
-                            )
-                        )
-                        .concat(
-                            getPageIndicator(offsetForward, { more: true, forward: true })
-                        )
-                        .concat(
-                            getPageSeries(
-                                pageCount.value - boundaryIndicatorLength + 1,
-                                boundaryIndicatorLength
-                            )
-                        )
-            }
-
-        })
-
-        function getPageSeries(from: number, length: number) {
-            let series = [];
-            for (let i = 0; i < length; i++) {
-                series[i] = getPageIndicator(from + i);
-            }
-
-            return series;
-        }
-
-        function getPageIndicator(page: number, {more = false, forward = false, current = false} = {}) {
-            return {
-                page,
-                more,
-                forward,
-                current: !current ? page === props.page : current,
-                text: page
-            }
-        }
-
-        function getKey(item: any) {
-            return `page-${item.more ? (item.forward ? 'forward' : 'backward') : item.page}`
-        }
-
-        function handlePageChange(page: number) {
-            emit('update:page', page)
-        }
-
-        watch(() => props.page, (val) => {
-            emit('update:page', val)
-        }, { immediate: true })
-
-        return {
-            realTotal,
-            isEmpty,
-            realPageSizes,
-            pageCount,
-            pageIndicatorSeries,
-            getKey,
-            handlePageChange,
-
-            style
-        }
-    }
-})
+<template>
+    <div :class="style.pagination">
+<!--        <div v-if="showTotal || showPageSize">-->
+<!--            <div v-if="showTotal">-->
+<!--                {{ page }}-->
+<!--            </div>-->
+<!--        </div>-->
+
+        <div :class="style.buttons">
+            <button
+                :class="style.page"
+                :tabindex="page === 1 ? undefined : '0'"
+                :disabled="page === 1"
+                aria-label="Previous"
+                role="button"
+                @click="handlePageChange(page - 1)"
+            >
+                <svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="m2.462 12 7.222-6.77-1.368-1.46-8 7.5a1 1 0 0 0 0 1.46l8 7.5 1.368-1.46L2.462 12z" clip-rule="evenodd"></path></svg>
+            </button>
+
+            <div :class="style.pages">
+                <template
+                    v-for="(item, index) in pageIndicatorSeries"
+                    :key="index"
+                >
+                    <button
+                        :class="[
+                            style.page,
+                            {
+                                [style.active]: item.current
+                            },
+                        ]"
+                        :ref="getKey(item)"
+                        tabindex="0"
+                        :disabled="isEmpty"
+                        role="button"
+                        @click="handlePageChange(item.page)"
+                        :aria-label="item.current ? `Page ${item.page}` : `Goto page ${item.page}`"
+                    >
+                        <template v-if="item.more">
+                            ...
+                        </template>
+                        <template v-else>
+                            {{ item.text }}
+                        </template>
+                    </button>
+                </template>
+            </div>
+
+            <button
+                :tabindex="page === pageCount ? undefined : '0'"
+                :disabled="page === pageCount || pageCount === 0"
+                aria-label="Next"
+                role="button"
+                @click="handlePageChange(page + 1)"
+                :class="style.page"
+            >
+                <svg :class="style.svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 24" width="10" height="24" focusable="false"><path stroke="currentColor" fill="currentColor" fill-rule="evenodd" d="M10 12a1 1 0 0 1-.316.73l-8 7.5-1.368-1.46L7.538 12 .316 5.23l1.368-1.46 8 7.5A1 1 0 0 1 10 12z" clip-rule="evenodd"></path></svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, watch} from "vue";
+import * as style from "./style"
+
+const pageIndicatorLength = 7
+const aroundIndicatorLength = 1
+const moreIndicatorOffsetLength = 5
+export default defineComponent({
+    name: "Pagination",
+    props: {
+        page: {
+            type: Number,
+            default: 1
+        },
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        pageSizes: {
+            type: Array
+        },
+        total: {
+            type: Number
+        },
+        showPageSize: {
+            type: Boolean,
+            default: true
+        },
+        showTotal: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: [
+        'update:page',
+        'update:pageSize',
+    ],
+    setup(props, {emit}) {
+        const realTotal = computed(() => {
+            return props.total || 0;
+        });
+
+        const isEmpty = computed(() => {
+            return realTotal.value === 0;
+        });
+
+        const realPageSizes = computed(() => {
+            const sizes = props.pageSizes == null
+                ? [10, 20, 30, 40, 50]
+                : props.pageSizes;
+
+            return sizes.map((size) => ({
+                label: size,
+                value: size
+            }));
+        });
+
+        const pageCount = computed(() => {
+            return Math.ceil(realTotal.value / props.pageSize);
+        });
+
+        const pageIndicatorSeries = computed(() => {
+            let {page} = props;
+
+            if (isEmpty.value) {
+                return [getPageIndicator(1, {current: false})];
+            }
+
+            let continuousIndicatorLength = aroundIndicatorLength * 2 + 1
+            let boundaryIndicatorLength =
+                (pageIndicatorLength - continuousIndicatorLength - 2) / 2
+            let leftLen
+            let rightLen
+            let offsetBackward = Math.max(page - moreIndicatorOffsetLength, 1)
+            let offsetForward = Math.min(page + moreIndicatorOffsetLength, pageCount.value)
+            switch (true) {
+                case pageCount.value <= pageIndicatorLength:
+                    return getPageSeries(1, pageCount.value)
+                case page <= boundaryIndicatorLength + aroundIndicatorLength + 2:
+                    leftLen = pageIndicatorLength - boundaryIndicatorLength - 1
+                    return getPageSeries(1, leftLen)
+                        .concat(
+                            getPageIndicator(offsetForward, { more: true, forward: true })
+                        )
+                        .concat(
+                            getPageSeries(
+                                pageCount.value - boundaryIndicatorLength + 1,
+                                boundaryIndicatorLength
+                            )
+                        )
+                case page >=
+                pageCount.value - boundaryIndicatorLength - aroundIndicatorLength - 1:
+                    rightLen = pageIndicatorLength - boundaryIndicatorLength - 1
+                    return getPageSeries(1, boundaryIndicatorLength)
+                        .concat(
+                            getPageIndicator(offsetBackward, { more: true, forward: false })
+                        )
+                        .concat(getPageSeries(pageCount.value - rightLen + 1, rightLen))
+                default:
+                    return getPageSeries(1, boundaryIndicatorLength)
+                        .concat(
+                            getPageIndicator(offsetBackward, { more: true, forward: false })
+                        )
+                        .concat(
+                            getPageSeries(
+                                page - aroundIndicatorLength,
+                                continuousIndicatorLength
+                            )
+                        )
+                        .concat(
+                            getPageIndicator(offsetForward, { more: true, forward: true })
+                        )
+                        .concat(
+                            getPageSeries(
+                                pageCount.value - boundaryIndicatorLength + 1,
+                                boundaryIndicatorLength
+                            )
+                        )
+            }
+
+        })
+
+        function getPageSeries(from: number, length: number) {
+            let series = [];
+            for (let i = 0; i < length; i++) {
+                series[i] = getPageIndicator(from + i);
+            }
+
+            return series;
+        }
+
+        function getPageIndicator(page: number, {more = false, forward = false, current = false} = {}) {
+            return {
+                page,
+                more,
+                forward,
+                current: !current ? page === props.page : current,
+                text: page
+            }
+        }
+
+        function getKey(item: any) {
+            return `page-${item.more ? (item.forward ? 'forward' : 'backward') : item.page}`
+        }
+
+        function handlePageChange(page: number) {
+            emit('update:page', page)
+        }
+
+        watch(() => props.page, (val) => {
+            emit('update:page', val)
+        }, { immediate: true })
+
+        return {
+            realTotal,
+            isEmpty,
+            realPageSizes,
+            pageCount,
+            pageIndicatorSeries,
+            getKey,
+            handlePageChange,
+
+            style
+        }
+    }
+})
 </script>

package/src/components/pagination/examples/basic.vue

@@ -1,18 +1,18 @@
-<template>
-    <MPagination
-            v-model:page="page"
-            :total="total"
-            @update:page="handlePage"
-            />
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-const page = ref(3);
-const total = ref(1000);
-
-const handlePage = (page: number) => {
-    console.log(page);
-    // do axios stuff
-};
+<template>
+    <MPagination
+            v-model:page="page"
+            :total="total"
+            @update:page="handlePage"
+            />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const page = ref(3);
+const total = ref(1000);
+
+const handlePage = (page: number) => {
+    console.log(page);
+    // do axios stuff
+};
 </script>

package/src/components/pagination/examples/index.stories.ts

@@ -1,15 +1,15 @@
-import MPagination from "../Pagination.vue";
-import {
-    MPaginationBasic
-} from "./index";
-
-import {
-    createStory
-} from "../../../__storybook__";
-
-export default {
-    component: MPagination,
-    title: 'Components/Pagination'
-}
-
+import MPagination from "../Pagination.vue";
+import {
+    MPaginationBasic
+} from "./index";
+
+import {
+    createStory
+} from "../../../__storybook__";
+
+export default {
+    component: MPagination,
+    title: 'Components/Pagination'
+}
+
 export const Basic = createStory(MPaginationBasic)