@redseed/redseed-ui-vue3 1.9.2 → 2.0.0

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,275 @@
+<script setup>
+import { ref, computed } from 'vue'
+import PaginationItem from './PaginationItem.vue'
+import PaginationItemCollapsed from './PaginationItemCollapsed.vue'
+import PaginationItemNext from './PaginationItemNext.vue'
+import PaginationItemPrevious from './PaginationItemPrevious.vue'
+
+const props = defineProps({
+    totalItems: {
+        type: Number,
+        default: 1
+    },
+    perPage: {
+        type: Number,
+        default: 10
+    },
+    currentPage: {
+        type: Number,
+        default: 1
+    },
+    arrowsOnly: {
+        type: Boolean,
+        default: false
+    },
+    currentPageOnly: {
+        type: Boolean,
+        default: false
+    }
+})
+
+/**
+ * Current page
+ */
+const current = ref(props.currentPage)
+
+const totalPages = computed(() => {
+    if (props.totalItems == 0) return 1
+    if (props.perPage == 0) return 1
+
+    return Math.ceil(props.totalItems / props.perPage)
+})
+
+const hasOnePage = computed(() => totalPages.value == 1)
+
+const hasMoreThanOnePage = computed(() => totalPages.value > 1)
+
+const disabledPrevious = computed(() => {
+    return totalPages.value < 2
+        || current.value == 1
+})
+
+const disabledNext = computed(() => {
+    return totalPages.value < 2
+        || current.value == totalPages.value
+})
+
+/**
+ * Calculate range of pages to show
+ */
+const range = computed(() => {
+    const scaleMin = 1
+    const scaleMax = 6
+    const scaleOffset = 3
+
+    // Show all pages if total pages is less than 7
+    if (totalPages.value <= scaleMax) return false
+
+    const startRange = [1, 2, 3, 4]
+
+    const endRange = [
+        totalPages.value - 3,
+        totalPages.value - 2,
+        totalPages.value - 1,
+        totalPages.value
+    ]
+
+    const middleRangeGoingPrevious = [
+        current.value,
+        current.value + 1
+    ]
+
+    const middleRangeGoingNext = [
+        current.value - 1,
+        current.value
+    ]
+
+    // if total pages is 7 and current page is 4,
+    // show end range when going previous
+    // show start range when going next
+    if (totalPages.value == scaleMax + 1 && current.value + scaleOffset == totalPages.value) {
+        if (goingPrevious.value) return endRange
+        if (goingNext.value) return startRange
+    }
+
+    // if current page with offset is greater than total pages,
+    // show end range
+    if (current.value + scaleOffset > totalPages.value) {
+        return endRange
+    }
+
+    // if current page with offset is equal to total pages,
+    // show end range when going previous
+    // show next middle range when going next
+    if (current.value + scaleOffset == totalPages.value) {
+        if (goingPrevious.value) return endRange
+        if (goingNext.value) return middleRangeGoingNext
+    }
+
+    // if current page without offset is less than scale min 1,
+    // show previous middle range when going previous
+    // show next middle range when going next
+    if (current.value - scaleOffset > scaleMin) {
+        if (goingPrevious.value) return middleRangeGoingPrevious
+        if (goingNext.value) return middleRangeGoingNext
+    }
+
+    // if current page without offset is equal to scale min 1,
+    // show previous middle range when going previous
+    // show start range when going next
+    if (current.value - scaleOffset == scaleMin) {
+        if (goingPrevious.value) return middleRangeGoingPrevious
+        if (goingNext.value) return startRange
+    }
+
+    // default to show start range
+    return startRange
+})
+
+const showSingleScale = computed(() => hasOnePage.value || props.currentPageOnly)
+
+const showFullScale = computed(() => hasMoreThanOnePage.value
+    && !props.currentPageOnly
+    && !range.value
+)
+
+const showRangedScale = computed(() => hasMoreThanOnePage.value
+    && !props.currentPageOnly
+    && !!range.value
+)
+
+const showCollapsedStart = computed(() => totalPages.value > 6
+    && range.value
+    && !range.value.includes(1)
+)
+
+const showCollapsedEnd = computed(() => totalPages.value > 6
+    && range.value
+    && !range.value.includes(totalPages.value)
+)
+
+const emit = defineEmits(['change'])
+
+const goingPrevious = ref(false)
+const goingNext = ref(false)
+
+function clickPage(page) {
+    if (page == current.value) return
+
+    if (page < current.value) {
+        goingPrevious.value = true
+        goingNext.value = false
+    }
+
+    if (page > current.value) {
+        goingPrevious.value = false
+        goingNext.value = true
+    }
+
+    current.value = page
+
+    emit('change', {
+        currentPage: current.value,
+        totalPages: totalPages.value,
+        perPage: props.perPage,
+    })
+}
+</script>
+<template>
+<div class="rsui-pagination">
+    <!-- Previous button -->
+    <div class="rsui-pagination__previous">
+        <PaginationItemPrevious
+            :disabled="disabledPrevious"
+            @click="clickPage(current - 1)"
+        ></PaginationItemPrevious>
+    </div>
+    <!-- Page items if not arrows only -->
+    <div  v-if="!arrowsOnly"
+        class="rsui-pagination__items"
+    >
+        <!-- Single scale for current page only -->
+        <div v-if="showSingleScale"
+            class="rsui-pagination__items-group"
+        >
+            <PaginationItem freeze>
+                {{ current }}
+            </PaginationItem>
+        </div>
+        <!-- Full scale if total pages equals to scale max -->
+        <div v-if="showFullScale"
+            class="rsui-pagination__items-group"
+        >
+            <PaginationItem v-for="page in totalPages"
+                :key="page"
+                :active="page == current"
+                @click="clickPage(page)"
+            >
+                {{ page }}
+            </PaginationItem>
+        </div>
+        <!-- Ranged scale if total pages is greater than scale max -->
+        <div v-if="showRangedScale"
+            class="rsui-pagination__items-group"
+        >
+            <PaginationItem
+                v-if="showCollapsedStart"
+                :active="current == 1"
+                @click="clickPage(1)"
+            >
+                1
+            </PaginationItem>
+
+            <PaginationItemCollapsed
+                v-if="showCollapsedStart"
+            ></PaginationItemCollapsed>
+
+            <PaginationItem v-for="page in range"
+                :key="page"
+                :active="page == current"
+                @click="clickPage(page)"
+            >
+                {{ page }}
+            </PaginationItem>
+
+            <PaginationItemCollapsed
+                v-if="showCollapsedEnd"
+            ></PaginationItemCollapsed>
+
+            <PaginationItem
+                v-if="showCollapsedEnd"
+                :active="totalPages == current"
+                @click="clickPage(totalPages)"
+            >
+                {{ totalPages }}
+            </PaginationItem>
+        </div>
+    </div>
+    <!-- Next button -->
+    <div class="rsui-pagination__next">
+        <PaginationItemNext
+            :disabled="disabledNext"
+            @click="clickPage(current + 1)"
+        ></PaginationItemNext>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-pagination {
+    @apply flex flex-nowrap items-center;
+    @apply w-fit border border-gray-200 rounded-full p-1;
+    @apply divide-x;
+    &__previous {
+        @apply size-full flex items-center pr-1;
+    }
+    &__items {
+        @apply size-full flex items-center px-1;
+    }
+    &__items-group {
+        @apply size-full flex items-center;
+    }
+    &__next {
+        @apply size-full flex items-center pl-1;
+    }
+}
+</style>

package/src/components/Pagination/PaginationItem.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    active: {
+        type: Boolean,
+        default: false
+    },
+    freeze: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const paginationItemClass = computed(() => [
+    'rsui-pagination-item',
+    {
+        'rsui-pagination-item--active': props.active,
+        'rsui-pagination-item--freeze': props.freeze,
+        'rsui-pagination-item--disabled': props.disabled,
+    }
+])
+
+const emit = defineEmits(['click'])
+
+function clickItem() {
+    if (props.active) return
+    if (props.freeze) return
+    if (props.disabled) return
+
+    emit('click')
+}
+</script>
+<template>
+<div :class="paginationItemClass"
+    @click.prevent="clickItem"
+>
+    <slot></slot>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-pagination-item {
+    @apply inline-flex items-center justify-center overflow-hidden select-none;
+    @apply min-w-9 w-fit h-7 p-1 rounded-md cursor-pointer transition;
+    @apply bg-white hover:bg-gray-100 text-rsui-medium text-sm;
+    &--active {
+        @apply bg-gray-200 hover:bg-gray-200 text-rsui-default cursor-default;
+    }
+    &--freeze {
+        @apply bg-white hover:bg-white cursor-default;
+    }
+    &--disabled {
+        @apply bg-white hover:bg-white text-gray-200 cursor-default;
+    }
+}
+</style>

package/src/components/Pagination/PaginationItemCollapsed.vue

@@ -0,0 +1,18 @@
+<script setup>
+import PaginationItem from './PaginationItem.vue'
+import { EllipsisHorizontalIcon } from '@heroicons/vue/24/outline'
+</script>
+<template>
+<PaginationItem freeze
+    class="rsui-pagination-item-collapsed"
+>
+    <EllipsisHorizontalIcon></EllipsisHorizontalIcon>
+</PaginationItem>
+</template>
+<style lang="scss" scoped>
+.rsui-pagination-item-collapsed {
+    svg {
+        @apply size-4;
+    }
+}
+</style>

package/src/components/Pagination/PaginationItemNext.vue

@@ -0,0 +1,17 @@
+<script setup>
+import PaginationItem from './PaginationItem.vue'
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+</script>
+<template>
+<PaginationItem class="rsui-pagination-item-next">
+    <ChevronRightIcon></ChevronRightIcon>
+</PaginationItem>
+</template>
+<style lang="scss" scoped>
+.rsui-pagination-item-next {
+    @apply rounded-r-3xl;
+    svg {
+        @apply size-5;
+    }
+}
+</style>

package/src/components/Pagination/PaginationItemPrevious.vue

@@ -0,0 +1,17 @@
+<script setup>
+import PaginationItem from './PaginationItem.vue'
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
+</script>
+<template>
+<PaginationItem class="rsui-pagination-item-previous">
+    <ChevronLeftIcon></ChevronLeftIcon>
+</PaginationItem>
+</template>
+<style lang="scss" scoped>
+.rsui-pagination-item-previous {
+    @apply rounded-l-3xl;
+    svg {
+        @apply size-5;
+    }
+}
+</style>

package/src/components/Pagination/index.js

@@ -0,0 +1,13 @@
+import Pagination from './Pagination.vue'
+import PaginationItem from './PaginationItem.vue'
+import PaginationItemCollapsed from './PaginationItemCollapsed.vue'
+import PaginationItemNext from './PaginationItemNext.vue'
+import PaginationItemPrevious from './PaginationItemPrevious.vue'
+
+export {
+    Pagination,
+    PaginationItem,
+    PaginationItemCollapsed,
+    PaginationItemNext,
+    PaginationItemPrevious,
+}

package/src/components/Progress/index.js

@@ -0,0 +1,5 @@
+import ProgressCircle from './ProgressCircle.vue'
+
+export {
+    ProgressCircle,
+}

package/src/components/Social/index.js

@@ -0,0 +1,7 @@
+import SignInWithGoogle from './SignInWithGoogle.vue'
+import SignUpWithGoogle from './SignUpWithGoogle.vue'
+
+export {
+    SignInWithGoogle,
+    SignUpWithGoogle,
+}

package/src/components/Sorting/Sorting.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { ArrowLongUpIcon } from '@heroicons/vue/24/outline'
+import LinkPrimary from '../Link/LinkPrimary.vue'
+
+const props = defineProps({
+    primary: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['asc', 'desc'])
+
+// const defaultColour = computed(() => !props.primary)
+
+const sortingClass = computed(() => [
+    'rsui-sorting',
+    {
+        'rsui-sorting--primary': !!props.primary
+    }
+
+])
+
+const desc = ref(false)
+
+const iconClass = computed(() => [
+    'rsui-sorting__icon',
+    {
+        'rsui-sorting__icon--desc': !!desc.value
+    }
+])
+
+function toggleDesc() {
+    desc.value = !desc.value
+
+    if (desc.value) {
+        emit('desc')
+        return
+    }
+
+    emit('asc')
+    return
+}
+</script>
+<template>
+<div :class="sortingClass">
+    <slot name="asc" v-if="!desc">
+        <LinkPrimary md
+            @click="toggleDesc"
+        >
+            <slot name="asc-label"></slot>
+        </LinkPrimary>
+    </slot>
+    <slot name="desc" v-if="desc">
+        <LinkPrimary md
+            @click="toggleDesc"
+        >
+            <slot name="desc-label"></slot>
+        </LinkPrimary>
+    </slot>
+    <ArrowLongUpIcon :class="iconClass"></ArrowLongUpIcon>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-sorting {
+    @apply flex items-center justify-between;
+    @apply w-fit text-rsui-default;
+    &--primary {
+        @apply text-primary;
+    }
+    &__icon {
+        @apply size-4 transition;
+        &--desc {
+            @apply transform rotate-180;
+        }
+    }
+}
+</style>

package/src/components/Sorting/index.js

@@ -0,0 +1,5 @@
+import Sorting from './Sorting.vue'
+
+export {
+    Sorting,
+}

package/src/components/TwoColumnLayout/index.js

@@ -0,0 +1,5 @@
+import TwoColumnLayout from './TwoColumnLayout.vue'
+
+export {
+    TwoColumnLayout,
+}