@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/pagination/Pagination.vue

@@ -1,296 +1,296 @@
-<template>
-    <div :class="style.pagination">
-        <div v-if="showTotal">
-            <div v-if="showTotal">
-                Showing <strong>{{ (page - 1) * pageSize + 1 }}</strong> to
-                <strong>{{ Math.min(page * pageSize, realTotal) }}</strong> of
-                <strong>{{ realTotal }}</strong>
-            </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
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        }
-    },
-    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) {
-            if (props.loading) {
-                return;
-            }
-            emit('update:page', page);
-        }
-
-        watch(
-            () => props.page,
-            val => {
-                emit('update:page', val);
-            },
-            { immediate: true }
-        );
-
-        return {
-            realTotal,
-            isEmpty,
-            realPageSizes,
-            pageCount,
-            pageIndicatorSeries,
-            getKey,
-            handlePageChange,
-
-            style
-        };
-    }
-});
-</script>
+<template>
+    <div :class="style.pagination">
+        <div v-if="showTotal">
+            <div v-if="showTotal">
+                Showing <strong>{{ (page - 1) * pageSize + 1 }}</strong> to
+                <strong>{{ Math.min(page * pageSize, realTotal) }}</strong> of
+                <strong>{{ realTotal }}</strong>
+            </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
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    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) {
+            if (props.loading) {
+                return;
+            }
+            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.ts

@@ -1 +1 @@
-export { default as MPaginationBasic } from './basic.vue';
+export { default as MPaginationBasic } from './basic.vue';