@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Tables/StudyTable.md

@@ -0,0 +1,136 @@
+```vue
+<template>
+    <div>
+        <Button class="btn-dm" @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <div class="tables" :class="{ dark: isDarkMode }">
+            <div class="table-examples__summary" :class="{ 'table-examples__summary--dark': isDarkMode }">
+                Open Table with sort, row button, no header label, and custom field
+                <ul class="table-examples__list">
+                    <li>Study Settings - Exams</li>
+                </ul>
+            </div>
+            <Table
+                class="table-examples__1"
+                theme="open"
+                :rows="table1.rows"
+                :columns="table1.columns"
+                :show-header="false"
+                @rowButtonClicked="table1.rowButtonClicked"
+                @sort="table1.updateSortSettings"
+                :isDarkMode="isDarkMode"
+            >
+                <template #tableCellValue="{ row, column }">
+                    <template v-if="column.propName === 'progress'">
+                        <div class="progress">
+                            <div class="progress__numbers" style="display: inline-block;">
+                                6 / 60
+                            </div>
+                            <div class="progress__bar" style=" margin-left: 5px; width: 94px; height: 14px; background: #edeef3; display: inline-block;"></div>
+                        </div>
+                    </template>
+                    <template v-else-if="column.propName === 'action'">
+                        <Button :isDarkMode="isDarkMode" type="tertiary-small">Edit Exam</Button>
+                    </template>
+                    <template v-else>
+                        {{ row[column.propName] }}
+                    </template>
+                </template>
+            </Table>
+        </div>
+    </div>
+</template>
+
+<script>
+import Table from '../Tables/Table.vue'
+import Button from '../Buttons/Button.vue'
+
+// const grid = {
+//     'display': 'inline-grid',
+//     'grid-template-columns': 'repeat(2, minmax(150px, 1fr))',
+// }
+const grid = undefined
+
+const rows1 = [{
+    id: 1,
+    exam: 'ASWB LCSW',
+    access: 'Basic',
+}, {
+    id: 2,
+    exam: 'ASWB MSW',
+    access: 'Premium License Code',
+}]
+const columns1 = [{
+    name: 'Exam',
+    propName: 'exam',
+}, {
+    name: 'Access',
+    propName: 'access',
+}, {
+    name: 'Progress',
+    propName: 'progress',
+}, {
+    name: 'Action',
+    propName: 'action',
+    isLabelHidden: true,
+    isSortDisabled: true,
+}]
+const table1 = {
+    rows: rows1,
+    columns: columns1,
+    updateSortSettings: (sortSettings) => {
+        // noop
+    },
+    rowButtonClicked: (row) => {
+        // noop
+    },
+}
+
+export default {
+    components: {
+        Table,
+        Button,
+    },
+    data () {
+        return {
+            grid,
+            table1,
+            isDarkMode: false,
+        }
+    },
+}
+</script>
+
+<style>
+.btn-dm {
+    margin-bottom: 30px;
+}
+
+.tables {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.table-examples__1 {
+    margin-bottom: 72px;
+}
+
+.table-examples__summary {
+    background-color: #f4f5f9;
+    padding: 10px;
+    margin-bottom: 12px;
+    border-radius: 6px;
+}
+
+.table-examples__summary--dark {
+    background: #0f1d28;
+    color: white;
+}
+
+.table-examples__list {
+    margin: 0;
+}
+</style>
+```

package/lib/components/Tables/Table.vue

@@ -0,0 +1,497 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-table__container"
+        :style="tableContainerStyles"
+    >
+        <slot name="table">
+            <div class="uikit-table" :style="tableStyles">
+                <slot
+                    v-if="showHeader"
+                    name="tableHeader"
+                >
+                    <div class="uikit-table__header" :style="tableHeaderStyles">
+                        <slot name="tableName">
+                            <div class="uikit-table__name" :style="tableNameStyles">
+                                {{ name }}
+                            </div>
+                        </slot>
+                        <slot v-if="count !== undefined" name="tableCount">
+                            <div class="uikit-table__count" :style="tableCountStyles">
+                                {{ count }}
+                            </div>
+                        </slot>
+                    </div>
+                </slot>
+                <slot name="tableContent">
+                    <table
+                        class="uikit-table__content"
+                        role="grid"
+                        :style="tableContentStyles"
+                    >
+                        <slot name="tableColumnLabels">
+                            <thead role="rowgroup" class="uikit-table__rows">
+                                <tr
+                                    v-dark="isDarkMode"
+                                    class="uikit-table__column-labels"
+                                    :style="{
+                                        ...gridStyles,
+                                        ...tableColumnLabelsStyles
+                                    }"
+                                    role="row"
+                                >
+                                    <template v-for="column in columns">
+                                        <slot name="tableColumnLabel" :column="column">
+                                            <th
+                                                :key="`column-label--${column.propName}`"
+                                                class="uikit-table__column-label"
+                                                :style="{ 
+                                                    ...tableColumnLabelStyles,
+                                                    ...column.styles,
+                                                    ...column.labelStyles,
+                                                }"
+                                                scope="col"
+                                                role="columnheader"
+                                                :aria-sort="
+                                                    (!currentSort.column 
+                                                        || currentSort.column.propName !== column.propName 
+                                                        || currentSort.direction === 0)
+                                                        ? 'none'
+                                                        : currentSort.direction === -1 
+                                                            ? 'ascending' 
+                                                            : 'descending'"
+                                            >
+                                                <slot name="tableColumnLabelContent" :column="column">
+                                                    <!-- eslint-disable max-len -->
+                                                    <div
+                                                        v-dark="isDarkMode"
+                                                        class="uikit-table__column-label-content"
+                                                        :class="{
+                                                            'uikit-table__column-label-content--sort-disabled': column.isSortDisabled
+                                                        }"
+                                                        :role="column.isSortDisabled ? 'presentation' : 'button'"
+                                                        :aria-label="
+                                                            (!currentSort.column 
+                                                                || currentSort.column.propName !== column.propName 
+                                                                || currentSort.direction === 0)
+                                                                ? `${column.name || column.propName} (sortable)`
+                                                                : currentSort.direction === -1 
+                                                                    ? `${column.name || column.propName} (sorted ascending)`
+                                                                    : `${column.name || column.propName} (sorted descending)`"
+                                                        :tabindex="column.isSortDisabled ? -1 : 0"
+                                                        @click="columnLabelClicked(column)"
+                                                        @keydown.enter="columnLabelClicked(column)"
+                                                        @mousedown.prevent
+                                                    >
+                                                        <!-- eslint-enable max-len -->
+                                                        <template v-if="!column.isLabelHidden">
+                                                            <slot name="tableColumnLabelText" :column="column">
+                                                                {{ column.name || column.propName }}
+                                                            </slot>
+                                                            <slot name="tableSortIcon" :column="column">
+                                                                <Icon
+                                                                    v-if="!column.isSortDisabled"
+                                                                    v-dark="isDarkMode"
+                                                                    class="uikit-table__sort-icon"
+                                                                    :class="{
+                                                                        'uikit-table__sort-icon--visible': 
+                                                                            currentSort.column
+                                                                            && currentSort.column.propName 
+                                                                                === column.propName
+                                                                            && currentSort.direction !== 0,
+                                                                        'uikit-table__sort-icon--up': currentSort
+                                                                            && currentSort.direction === -1,
+                                                                    }"
+                                                                    :style="tableSortIconStyles"
+                                                                    type="accordionArrow"
+                                                                />
+                                                            </slot>
+                                                        </template>
+                                                    </div>
+                                                </slot>
+                                            </th>
+                                        </slot>
+                                    </template>
+                                </tr>
+                            </thead>
+                        </slot>
+                        <slot name="tableRows">
+                            <tbody
+                                :key="rows.map(row => row.id).join('-')"
+                                class="uikit-table__rows"
+                                role="rowgroup"
+                                :style="tableRowsStyles"
+                            >
+                                <template v-for="row in rows">
+                                    <slot name="tableRow" :row="row">
+                                        <tr
+                                            :key="`row--${row.id}`"
+                                            v-dark="isDarkMode"
+                                            class="uikit-table__row"
+                                            role="row"
+                                            :tabIndex="row.tabIndex === 0 ? 0 : -1"
+                                            :class="{
+                                                'uikit-table__row--hover-focus': row.tabIndex === 0 
+                                            }"
+                                            :style="{
+                                                ...gridStyles,
+                                                ...tableRowStyles,
+                                                ...row.styles,
+                                            }"
+                                            @click="emitRowClicked(row)"
+                                            @keydown.enter="emitRowClicked(row)"
+                                            @mouseenter="emitRowEnter(row)"
+                                            @mouseleave="emitRowLeave(row)"
+                                        >
+                                            <template v-for="column in columns">
+                                                <slot
+                                                    name="tableCell"
+                                                    :row="row"
+                                                    :column="column"
+                                                    :table-cell-styles="tableCellStyles"
+                                                >
+                                                    <td
+                                                        :key="`row-${row.id}--column-${column.propName}`"
+                                                        role="cell"
+                                                        class="uikit-table__cell"
+                                                        :style="{
+                                                            ...tableCellStyles,
+                                                            ...column.styles,
+                                                        }"
+                                                        @click="emitCellClicked(row, column)"
+                                                    >
+                                                        <slot
+                                                            name="tableCellValue"
+                                                            :row="row"
+                                                            :column="column"
+                                                        >
+                                                            <OverflowTooltip>
+                                                                {{ row[column.propName] }}
+                                                            </OverflowTooltip>
+                                                        </slot>
+                                                    </td>
+                                                </slot>
+                                            </template>
+                                        </tr>
+                                    </slot>
+                                </template>
+                            </tbody>
+                        </slot>
+                    </table>
+                </slot>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
+import { dark } from '../../directives'
+import type { ITableColumn, TTableRow, TSortDirection, ITableSortSettings } from './table'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Icon,
+        OverflowTooltip,
+    },
+})
+export default class Table extends Vue {
+    @Prop() columns!: ITableColumn[]
+    @Prop() rows!: TTableRow[]
+    @Prop({ default: true }) showHeader!: boolean
+    @Prop({ default: 'Results' }) name!: string     // Used in the header by default
+    @Prop() count?: string
+    @Prop() grid?: Record<string, string>
+    @Prop({ default: () => [ 1, -1, 0 ] }) sortToggleOrder!: TSortDirection[]
+    @Prop() defaultSort?: ITableSortSettings
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    /*******    Element-specific style props    *******/
+    // .table__container
+    @Prop() tableContainerStyles!: Record<string, string>
+    // .table
+    @Prop() tableStyles!: Record<string, string>
+    // .table__header
+    @Prop() tableHeaderStyles!: Record<string, string>
+    // .table__name
+    @Prop() tableNameStyles!: Record<string, string>
+    // .table__count
+    @Prop() tableCountStyles!: Record<string, string>
+    // .table__content
+    @Prop() tableContentStyles!: Record<string, string>
+    // .table__column-labels
+    @Prop() tableColumnLabelsStyles!: Record<string, string>
+    // .table__column-label
+    @Prop() tableColumnLabelStyles!: Record<string, string>
+    // .table__sort-icon
+    @Prop() tableSortIconStyles!: Record<string, string>
+    // .table__rows
+    @Prop() tableRowsStyles!: Record<string, string>
+    // .table__row
+    @Prop() tableRowStyles!: Record<string, string>
+    // .table__cell
+    @Prop() tableCellStyles!: Record<string, string>
+
+    gridStyles: Record<string, string> = {}
+    currentSort: ITableSortSettings = { column: null, direction: this.sortToggleOrder?.[0] || -1 }
+
+    created () {
+        // Use default sort, if provided
+        if (this.defaultSort) {
+            this.currentSort = JSON.parse(JSON.stringify(this.defaultSort))
+        }
+
+        // Allow custom grid styles, otherwise use default based on number of columns
+        if (this.grid) {
+            this.gridStyles = this.grid
+        } else {
+            const numColumns = this.columns.length
+            this.gridStyles = {
+                'display': 'inline-grid',
+                'grid-template-columns': `repeat(${numColumns}, 1fr)`,
+            }
+        }
+    }
+
+    columnLabelClicked (column: ITableColumn) {
+        // Do nothing if the column has disabled sort
+        if (column.isSortDisabled) {
+            return
+        }
+
+        // Sort by the current column, or change directions if already sorting by current column
+        if (!this.currentSort.column || this.currentSort.column.propName !== column.propName) {
+            this.currentSort.column = column
+        } else {
+            const currentSortDirIndex = this.sortToggleOrder.indexOf(this.currentSort.direction)
+            this.currentSort.direction = this.sortToggleOrder[
+                (currentSortDirIndex + 1) % this.sortToggleOrder.length
+            ] || -1
+        }
+        this.emitSort()
+    }
+
+    @Emit('sort')
+    emitSort (): ITableSortSettings {
+        return this.currentSort
+    }
+
+    @Emit('rowClicked')
+    emitRowClicked (row: TTableRow) {
+        return row
+    }
+
+    @Emit('rowEnter')   
+    emitRowEnter (row: TTableRow) {
+        return row
+    }
+
+    @Emit('rowLeave')
+    emitRowLeave (row: TTableRow) {
+        return row
+    }
+
+    @Emit('cellClicked')
+    emitCellClicked (row: TTableRow, column: ITableColumn) {
+        return {
+            row,
+            column,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-table {
+    &__container {
+        background-color: white;
+
+        &--dark {
+            background-color: transparent;
+            color: $white;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+    }
+
+    &__content {
+        display: block;
+        border-spacing: 0;
+        border-collapse: initial;
+        border-color: transparent;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        padding: 4px 16px;
+    }
+
+    &__name {
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        margin-right: 6px;
+    }
+
+    &__count {
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: $slate-01;
+    }
+
+    &__column-labels {
+        min-width: 100%;
+        padding: 5px 22px 5px 11px;
+        font-size: 11px;
+        line-height: 15px;
+        letter-spacing: 0.17px;
+        color: $slate-03;
+        max-width: 100%;
+        border-bottom: 1px solid $gray-divider;
+
+        &--dark {
+            color: $fog;
+            border-bottom-color: $slate;
+        }
+    }
+
+    &__column-label {
+        display: block;
+        text-align: left;
+        font-weight: 500;
+
+        &:not(:last-child) {
+            margin-right: 11px;
+        }
+    }
+
+    &__column-label-content {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        outline: none;
+        user-select: none;
+
+        &--sort-disabled {
+            cursor: default;
+            color: inherit !important;
+        }
+
+        &:hover:not(.table__column-label-content--sort-disabled) {
+            color: $brand-blue;
+
+            .table__sort-icon:not(.table__sort-icon--visible) {
+                visibility: visible;
+            }
+        }
+
+        &:focus:not(.table__column-label-content--sort-disabled) {
+            &::before {
+                content: '';
+                position: absolute;
+                top: -3px;
+                bottom: -3px;
+                left: -5px;
+                border: 1px solid $brand-blue;
+                border-radius: 3px;
+                width: calc(100% + 10px);
+            }
+        }
+
+        &--dark {
+            &:hover:not(.table__column-label-content--sort-disabled) {
+                color: $banana-bread;
+            }
+
+            &:focus:not(.table__column-label-content--sort-disabled) {
+                &::before {
+                    border-color: $banana-bread;
+                }
+            }
+        }
+    }
+
+    &__sort-icon {
+        display: inline-block;
+        margin-left: 2px;
+        color: $brand-blue;
+        visibility: hidden;
+        transform: scale(0.75);
+
+        &--dark {
+            color: $banana-bread;
+        }
+
+        &--visible {
+            visibility: visible;
+        }
+
+        &--up {
+            transform: scale(0.75) rotate(180deg);
+        }
+    }
+
+    &__rows {
+        min-width: 100%;
+        overflow-y: auto;
+        display: block;
+    }
+
+    &__row {
+        position: relative;
+        max-width: 100%;
+        min-width: 100%;
+        padding: 10px 22px 10px 11px;
+        font-size: 15px;
+        line-height: 20px;
+        border-bottom: 1px solid $gray-divider;
+        outline: none;
+
+        &--dark {
+            border-bottom-color: $ash;
+        }
+
+        &--hover-focus {
+            &:hover {
+                background-color: mix($barely-background, $brand-black, 96%);
+            }
+
+            &:focus {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    border: 1px solid $brand-blue;
+                    border-radius: 6px;
+                }
+            }
+        }
+    }
+
+    &__cell {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+
+        &:not(:last-child) {
+            margin-right: 11px;
+        }
+    }
+}
+</style>