@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Tables/TableActions.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="uikit-table-actions">
+        <div
+            v-for="action in actions"
+            :key="action.id"
+            :ref="`${name}Actions`"
+            class="uikit-table-actions__action"
+            :class="{
+                'uikit-table-actions__action--menu-open': action.id === visibleMenuActionId
+            }"
+            tabindex="0"
+            @click="actionClicked(action)"
+            @keyup.enter="actionClicked(action)"
+            @keydown="scrollActionMenu(action, $event)"
+            @blur="visibleMenuActionId = ''"
+            @mouseout="hoveringMenuActionId = null"
+            @mouseover="hoveringMenuActionId = action.id"
+            @focusout="hoveringMenuActionId = null"
+            @focusin="hoveringMenuActionId = action.id"
+        >
+            <Icon class="uikit-table-actions__action-icon" :type="action.icon" />
+            <Tooltip
+                v-if="hoveringMenuActionId === action.id"
+                class="uikit-table-actions__action-tooltip"
+            >
+                {{ action.text }}
+            </Tooltip>
+            <div
+                v-if="action.menu && action.id === visibleMenuActionId"
+                class="uikit-table-actions__action-menu"
+            >
+                <div
+                    v-for="subAction in action.menu"
+                    :key="subAction.id"
+                    :ref="`${name}ActionMenu-${action.id}`"
+                    class="uikit-table-actions__action-menu-option"
+                    tabindex="0"
+                    @mousedown.prevent.stop="actionClicked(subAction)"
+                    @keyup.enter.prevent.stop="actionClicked(subAction)"
+                    @keydown="scrollActionMenu(action, $event)"
+                >
+                    {{ subAction.text }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import type { ITableAction, ITableSubAction } from './table'
+import Icon from '../Icons/Icon.vue'
+import Tooltip from '../Tooltips/Tooltip.vue'
+
+@Component({
+    components: {
+        Icon,
+        Tooltip,
+    },
+})
+export default class TableActions extends Vue {
+    @Prop() name!: string
+    @Prop({ default: () => [] }) actions!: ITableAction[]
+
+    visibleMenuActionId: string | number = ''
+    hoveringMenuActionId: number | string | null = null
+    focusedMenuOptionIndex: number | null = null
+
+    blurActions () {
+        this.visibleMenuActionId = ''
+        this.hoveringMenuActionId = null
+        this.focusedMenuOptionIndex = null
+        const actionElements = this.$refs[`${this.name}Actions`] as HTMLElement[]
+        actionElements?.forEach(actionElement => {
+            actionElement.blur()
+        })
+    }
+
+    actionClicked (action: ITableAction | ITableSubAction) {
+        if ('menu' in action && action.menu && action.menu.length) {
+            if (this.visibleMenuActionId !== action.id) {
+                this.focusedMenuOptionIndex = null
+                this.visibleMenuActionId = action.id
+            } else {
+                this.blurActions()
+            }
+        } else {
+            this.blurActions()
+            this.emitActionClicked(action)
+        }
+    }
+
+    scrollActionMenu (action: ITableAction, event: KeyboardEvent) {
+        if (
+            ![ 'ArrowUp', 'ArrowDown' ].includes(event.key) // ArrowUp, ArrowDown
+            || !('menu' in action)
+            || this.visibleMenuActionId !== action.id
+        ) {
+            return
+        }
+
+        const currentIndex = this.focusedMenuOptionIndex
+        const menuElements = this.$refs[`${this.name}ActionMenu-${action.id}`] as HTMLElement[] | undefined
+
+        if (menuElements && event.key === 'ArrowUp') {
+            // Up arrow
+            if (currentIndex === 0) {
+                const parentActionElement = menuElements[currentIndex]?.parentElement?.parentElement
+                if (parentActionElement) {
+                    parentActionElement.focus()
+                    this.visibleMenuActionId = ''
+                }
+            } else {
+                const nextIndex = currentIndex === null
+                    ? menuElements.length - 1
+                    : currentIndex - 1
+                menuElements[nextIndex]?.focus()
+                this.focusedMenuOptionIndex = nextIndex
+                this.visibleMenuActionId = action.id
+            }
+        } else if (menuElements && event.key === 'ArrowDown') {
+            // Down arrow
+            const nextIndex = currentIndex === null || currentIndex === menuElements.length - 1
+                ? 0
+                : currentIndex + 1
+            menuElements[nextIndex]?.focus()
+            this.focusedMenuOptionIndex = nextIndex
+            this.visibleMenuActionId = action.id
+        }
+        event.preventDefault()
+        event.stopPropagation()
+    }
+
+    @Emit('actionClicked')
+    emitActionClicked (action: ITableAction | ITableSubAction) {
+        return action
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-table-actions {
+    display: flex;
+    color: $brand-blue;
+
+    &__action-tooltip {
+        position: absolute;
+        top: -30px;
+        left: 12px;
+    }
+
+    &__action {
+        position: relative;
+        cursor: pointer;
+        margin-left: 10px;
+        outline: none;
+        user-select: none;
+
+        &:not(&--menu-open) {
+            &:hover,
+            &:focus {
+                color: $brand-black;
+            }
+        }
+
+        &--menu-open {
+            color: $brand-black;
+        }
+    }
+
+    &__action-menu {
+        position: absolute;
+        background-color: white;
+        color: $brand-black;
+        padding: 10px 0;
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px 0 rgba($brand-black, 0.1);
+        cursor: default;
+        z-index: 1;
+    }
+
+    &__action-menu-option {
+        padding: 5px 42px 6px 16px;
+        white-space: nowrap;
+        outline: none;
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+            background-color: $gray-background;
+        }
+    }
+}
+</style>

package/lib/components/Tables/TablePagination.md

@@ -0,0 +1,19 @@
+```vue
+<template>
+    <TablePagination :perPage="10" unit="things" :currentPage="currentPage" :total="45" @changePage="val => currentPage = val" />
+</template>
+<script>
+import TablePagination from '../Tables/TablePagination.vue'
+
+export default {
+    data () {
+        return {
+            currentPage: 0
+        }
+    },
+    components: {
+        TablePagination,
+    },
+}
+</script>
+```

package/lib/components/Tables/TablePagination.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="uikit-table-pagination">
+        <div class="uikit-table-pagination__info">
+            {{ (currentPage * perPage) + 1 }} -
+            {{ nextPageDisabled ? total : (currentPage * perPage) + perPage }}
+            of {{ total }} {{ unit }} <slot />
+        </div>
+        <div
+            class="uikit-table-pagination__previous"
+            :class="{ 'uikit-table-pagination__previous--disabled': currentPage === 0 }"
+            :tabindex="currentPage === 0 ? -1 : 0"
+            aria-label="Previous"
+            :aria-disabled="currentPage === 0"
+            @keydown.enter="changePage('previous')"
+            @click="changePage('previous')"
+        >
+            <Icon type="accordionArrow" class="uikit-table-pagination__previous-icon" />
+        </div>
+        <div
+            class="uikit-table-pagination__next"
+            :class="{ 'uikit-table-pagination__next--disabled': nextPageDisabled }"
+            :tabindex="nextPageDisabled ? -1 : 0"
+            aria-label="Next"
+            :aria-disabled="nextPageDisabled"
+            @keydown.enter="changePage('next')"
+            @click="changePage('next')"
+        >
+            <Icon type="accordionArrow" class="uikit-table-pagination__next-icon" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+
+@Component({
+    components: {
+        Icon,
+    },
+})
+export default class TablePagination extends Vue {
+    @Prop({ default: 10 }) perPage!: number
+    @Prop({ default: 0 }) currentPage!: number
+    @Prop() total!: number
+    @Prop() unit!: string
+
+    get nextPageDisabled () {
+        return this.currentPage >= Math.floor((this.total - 1) / this.perPage)
+    }
+
+    @Emit('changePage')
+    changePage (direction: 'next' | 'previous') {
+        if (direction === 'next') {
+            return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
+        } else {
+            return Math.max(0, this.currentPage - 1)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-table-pagination {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 500;
+
+    &__info {
+        margin-right: 12px;
+    }
+
+    &__previous,
+    &__next {
+        color: $brand-blue;
+        cursor: pointer;
+        user-select: none;
+        width: 17px;
+
+        &--disabled {
+            opacity: 0.35;
+            cursor: default;
+        }
+    }
+
+    &__previous {
+        margin-right: 4px;
+    }
+
+    &__previous-icon,
+    &__next-icon {
+        width: 16px;
+        height: 10px;
+    }
+
+    &__previous-icon {
+        transform: rotate(90deg);
+    }
+
+    &__next-icon {
+        transform: rotate(-90deg);
+    }
+}
+</style>