@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Tables/Table.vue

@@ -45,7 +45,7 @@
                                             <th
                                                 :key="`column-label--${column.propName}`"
                                                 class="uikit-table__column-label"
-                                                :style="{ 
+                                                :style="{
                                                     ...tableColumnLabelStyles,
                                                     ...column.styles,
                                                     ...column.labelStyles,
@@ -53,12 +53,12 @@
                                                 scope="col"
                                                 role="columnheader"
                                                 :aria-sort="
-                                                    (!currentSort.column 
-                                                        || currentSort.column.propName !== column.propName 
+                                                    (!currentSort.column
+                                                        || currentSort.column.propName !== column.propName
                                                         || currentSort.direction === 0)
                                                         ? 'none'
-                                                        : currentSort.direction === -1 
-                                                            ? 'ascending' 
+                                                        : currentSort.direction === -1
+                                                            ? 'ascending'
                                                             : 'descending'"
                                             >
                                                 <slot name="tableColumnLabelContent" :column="column">
@@ -71,11 +71,11 @@
                                                         }"
                                                         :role="column.isSortDisabled ? 'presentation' : 'button'"
                                                         :aria-label="
-                                                            (!currentSort.column 
-                                                                || currentSort.column.propName !== column.propName 
+                                                            (!currentSort.column
+                                                                || currentSort.column.propName !== column.propName
                                                                 || currentSort.direction === 0)
                                                                 ? `${column.name || column.propName} (sortable)`
-                                                                : currentSort.direction === -1 
+                                                                : currentSort.direction === -1
                                                                     ? `${column.name || column.propName} (sorted ascending)`
                                                                     : `${column.name || column.propName} (sorted descending)`"
                                                         :tabindex="column.isSortDisabled ? -1 : 0"
@@ -94,9 +94,9 @@
                                                                     v-dark="isDarkMode"
                                                                     class="uikit-table__sort-icon"
                                                                     :class="{
-                                                                        'uikit-table__sort-icon--visible': 
+                                                                        'uikit-table__sort-icon--visible':
                                                                             currentSort.column
-                                                                            && currentSort.column.propName 
+                                                                            && currentSort.column.propName
                                                                                 === column.propName
                                                                             && currentSort.direction !== 0,
                                                                         'uikit-table__sort-icon--up': currentSort
@@ -131,7 +131,7 @@
                                             role="row"
                                             :tabIndex="row.tabIndex === 0 ? 0 : -1"
                                             :class="{
-                                                'uikit-table__row--hover-focus': row.tabIndex === 0 
+                                                'uikit-table__row--hover-focus': row.tabIndex === 0
                                             }"
                                             :style="{
                                                 ...gridStyles,
@@ -175,13 +175,13 @@
                                         </tr>
                                         <template v-for="subrow in row.subrows">
                                             <slot name="tableSubrow" :subrow="subrow">
-                                                <tr 
+                                                <tr
                                                     :key="`subrow--${subrow.id}`"
                                                     v-dark="isDarkMode"
                                                     role="subrow"
                                                     :tabIndex="row.tabIndex === 0 ? 0 : -1"
                                                     :class="{
-                                                        'uikit-table__subrow--hover-focus': row.tabIndex === 0 
+                                                        'uikit-table__subrow--hover-focus': row.tabIndex === 0
                                                     }"
                                                     class="uikit-table__subrow"
                                                     :style="{
@@ -237,144 +237,157 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
 import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
-import { dark } from '../../directives'
+import { dark as vDark } 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    *******/
+import { ref, watch } from 'vue'
+
+const {
+    columns,
+    rows,
+    showHeader = true,
+    name = 'Results',
+    count = undefined,
+    grid = undefined,
+    sortToggleOrder = [ 1, -1 ],
+    defaultSort = undefined,
+    isDarkMode = false,
+    tableContainerStyles = undefined,
+    tableStyles = undefined,
+    tableHeaderStyles = undefined,
+    tableNameStyles = undefined,
+    tableCountStyles = undefined,
+    tableContentStyles = undefined,
+    tableColumnLabelsStyles = undefined,
+    tableColumnLabelStyles = undefined,
+    tableSortIconStyles = undefined,
+    tableRowsStyles = undefined,
+    tableRowStyles = undefined,
+    tableCellStyles = undefined,
+    tableSubrowsStyles = undefined,
+} = defineProps<{
+    columns: ITableColumn[]
+    rows: TTableRow[]
+    showHeader?: boolean
+    name?: string
+    count?: string | number
+    grid?: Record<string, string>
+    sortToggleOrder?: TSortDirection[]
+    defaultSort?: ITableSortSettings
+    isDarkMode?: boolean
+    /** *****    Element-specific style props    ***** **/
     // .table__container
-    @Prop() tableContainerStyles!: Record<string, string>
+    tableContainerStyles?: Record<string, string>
     // .table
-    @Prop() tableStyles!: Record<string, string>
+    tableStyles?: Record<string, string>
     // .table__header
-    @Prop() tableHeaderStyles!: Record<string, string>
+    tableHeaderStyles?: Record<string, string>
     // .table__name
-    @Prop() tableNameStyles!: Record<string, string>
+    tableNameStyles?: Record<string, string>
     // .table__count
-    @Prop() tableCountStyles!: Record<string, string>
+    tableCountStyles?: Record<string, string>
     // .table__content
-    @Prop() tableContentStyles!: Record<string, string>
+    tableContentStyles?: Record<string, string>
     // .table__column-labels
-    @Prop() tableColumnLabelsStyles!: Record<string, string>
+    tableColumnLabelsStyles?: Record<string, string>
     // .table__column-label
-    @Prop() tableColumnLabelStyles!: Record<string, string>
+    tableColumnLabelStyles?: Record<string, string>
     // .table__sort-icon
-    @Prop() tableSortIconStyles!: Record<string, string>
+    tableSortIconStyles?: Record<string, string>
     // .table__rows
-    @Prop() tableRowsStyles!: Record<string, string>
+    tableRowsStyles?: Record<string, string>
     // .table__row
-    @Prop() tableRowStyles!: Record<string, string>
+    tableRowStyles?: Record<string, string>
     // .table__cell
-    @Prop() tableCellStyles!: Record<string, string>
+    tableCellStyles?: Record<string, string>
     // .table__subrow
-    @Prop() tableSubrowsStyles!: Record<string, string>
-
-    gridStyles: Record<string, string> = {}
-    currentSort: ITableSortSettings = {
-        column: null,
-        direction: this.sortToggleOrder?.[0] !== undefined ? this.sortToggleOrder[0] : -1,
-    }
+    tableSubrowsStyles?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+    'sort': [sortSettings: ITableSortSettings]
+    'rowClicked': [row: TTableRow]
+    'rowEnter': [row: TTableRow]
+    'rowLeave': [row: TTableRow]
+    'cellClicked': [rowAndColumn: { row: TTableRow; column: ITableColumn }]
+}>()
+
+const gridStyles = ref<Record<string, string>>({})
+const currentSort = ref<ITableSortSettings>({
+    column: null,
+    direction: sortToggleOrder?.[0] !== undefined ? sortToggleOrder[0] : -1,
+})
 
-    created () {
-        // Use default sort, if provided
-        if (this.defaultSort) {
-            this.currentSort = JSON.parse(JSON.stringify(this.defaultSort))
-        }
+// Use default sort, if provided
+if (defaultSort) {
+    currentSort.value = JSON.parse(JSON.stringify(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 = {
-                'grid-template-columns': `repeat(${numColumns}, 1fr)`,
-            }
-        }
+// Allow custom grid styles, otherwise use default based on number of columns
+if (grid) {
+    gridStyles.value = grid
+} else {
+    const numColumns = columns.length
+    gridStyles.value = {
+        '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)
-            const newSortDirection = this.sortToggleOrder[
-                (currentSortDirIndex + 1) % this.sortToggleOrder.length
-            ]
-            this.currentSort.direction = newSortDirection !== undefined ? newSortDirection : -1
-        }
-        this.emitSort()
+const columnLabelClicked = (column: ITableColumn) => {
+    // Do nothing if the column has disabled sort
+    if (column.isSortDisabled) {
+        return
     }
 
-    @Watch('defaultSort')
-    defaultSortChanged () {
-        if (!this.defaultSort) {
-            return
-        }
-        const defaultSort = JSON.stringify(this.defaultSort)
-        const currentSort = JSON.stringify(this.currentSort)
-
-        if (defaultSort !== currentSort) {
-            this.currentSort = JSON.parse(defaultSort)
-            this.emitSort()
-        }
+    // Sort by the current column, or change directions if already sorting by current column
+    if (currentSort.value.column?.propName !== column.propName) {
+        currentSort.value.column = column
+    } else {
+        const currentSortDirIndex = sortToggleOrder.indexOf(currentSort.value.direction)
+        const newSortDirection = sortToggleOrder[
+            (currentSortDirIndex + 1) % sortToggleOrder.length
+        ]
+        currentSort.value.direction = newSortDirection !== undefined ? newSortDirection : -1
     }
+    emitSort()
+}
 
-    @Emit('sort')
-    emitSort (): ITableSortSettings {
-        return this.currentSort
+watch(() => defaultSort, () => {
+    if (!defaultSort) {
+        return
     }
+    const defaultSortStr = JSON.stringify(defaultSort)
+    const currentSortStr = JSON.stringify(currentSort)
 
-    @Emit('rowClicked')
-    emitRowClicked (row: TTableRow) {
-        return row
+    if (defaultSortStr !== currentSortStr) {
+        currentSort.value = JSON.parse(defaultSortStr)
+        emitSort()
     }
+})
 
-    @Emit('rowEnter')   
-    emitRowEnter (row: TTableRow) {
-        return row
-    }
+const emitSort = () => {
+    emit('sort', currentSort.value)
+}
 
-    @Emit('rowLeave')
-    emitRowLeave (row: TTableRow) {
-        return row
-    }
+const emitRowClicked = (row: TTableRow) => {
+    emit('rowClicked', row)
+}
 
-    @Emit('cellClicked')
-    emitCellClicked (row: TTableRow, column: ITableColumn) {
-        return {
-            row,
-            column,
-        }
-    }
+const emitRowEnter = (row: TTableRow) => {
+    emit('rowEnter', row)
+}
+
+const emitRowLeave = (row: TTableRow) => {
+    emit('rowLeave', row)
+}
+
+const emitCellClicked = (row: TTableRow, column: ITableColumn) => {
+    emit('cellClicked', {
+        row,
+        column,
+    })
 }
 </script>
 
@@ -614,4 +627,4 @@ export default class Table extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Tables/TableActions.vue

@@ -32,7 +32,8 @@
                 <div
                     v-for="subAction in action.menu"
                     :key="subAction.id"
-                    :ref="`${name}ActionMenu-${action.id}`"
+                    :ref="`${name}ActionMenu`"
+                    :data-action-id="action.id"
                     class="uikit-table-actions__action-menu-option"
                     tabindex="0"
                     @mousedown.prevent.stop="actionClicked(subAction)"
@@ -46,95 +47,99 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import type { ITableAction, ITableSubAction } from './table'
 import Icon from '../Icons/Icon.vue'
 import Tooltip from '../Tooltips/Tooltip.vue'
+import { ref, useTemplateRef } from 'vue'
+
+const {
+    name = undefined,
+    actions = [],
+} = defineProps<{
+    name?: string
+    actions?: ITableAction[]
+}>()
+
+const emit = defineEmits<{
+    'actionClicked': [action: ITableAction | ITableSubAction]
+}>()
+
+const visibleMenuActionId = ref<string | number>('')
+const hoveringMenuActionId = ref<number | string | null>(null)
+const focusedMenuOptionIndex = ref<number | null>(null)
+
+const actionRefs = useTemplateRef<HTMLElement[]>(`${name}Actions`)
+const actionMenuRefs = useTemplateRef<HTMLElement[]>(`${name}ActionMenu`)
+
+const blurActions = () => {
+    visibleMenuActionId.value = ''
+    hoveringMenuActionId.value = null
+    focusedMenuOptionIndex.value = null
+    actionRefs.value?.forEach(actionElement => {
+        actionElement.blur()
+    })
+}
 
-@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?.length) {
-            if (this.visibleMenuActionId !== action.id) {
-                this.focusedMenuOptionIndex = null
-                this.visibleMenuActionId = action.id
-            } else {
-                this.blurActions()
-            }
+const actionClicked = (action: ITableAction | ITableSubAction) => {
+    if ('menu' in action && action.menu?.length) {
+        if (visibleMenuActionId.value !== action.id) {
+            focusedMenuOptionIndex.value = null
+            visibleMenuActionId.value = action.id
         } else {
-            this.blurActions()
-            this.emitActionClicked(action)
+            blurActions()
         }
+    } else {
+        blurActions()
+        emitActionClicked(action)
     }
+}
 
-    scrollActionMenu (action: ITableAction, event: KeyboardEvent) {
-        if (
-            ![ 'ArrowUp', 'ArrowDown' ].includes(event.key) // ArrowUp, ArrowDown
-            || !('menu' in action)
-            || this.visibleMenuActionId !== action.id
-        ) {
-            return
-        }
+const scrollActionMenu = (action: ITableAction, event: KeyboardEvent) => {
+    if (
+        ![ 'ArrowUp', 'ArrowDown' ].includes(event.key) // ArrowUp, ArrowDown
+        || !('menu' in action)
+        || visibleMenuActionId.value !== 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
+    const currentIndex = focusedMenuOptionIndex.value
+    const menuElements = actionMenuRefs.value?.filter(actionMenuEl =>
+        actionMenuEl.getAttribute('data-action-id') === action.id
+    )
+
+    if (menuElements && event.key === 'ArrowUp') {
+        // Up arrow
+        if (currentIndex === 0) {
+            const parentActionElement = menuElements[currentIndex]?.parentElement?.parentElement
+            if (parentActionElement) {
+                parentActionElement.focus()
+                visibleMenuActionId.value = ''
             }
-        } else if (menuElements && event.key === 'ArrowDown') {
-            // Down arrow
-            const nextIndex = currentIndex === null || currentIndex === menuElements.length - 1
-                ? 0
-                : currentIndex + 1
+        } else {
+            const nextIndex = currentIndex === null
+                ? menuElements.length - 1
+                : currentIndex - 1
             menuElements[nextIndex]?.focus()
-            this.focusedMenuOptionIndex = nextIndex
-            this.visibleMenuActionId = action.id
+            focusedMenuOptionIndex.value = nextIndex
+            visibleMenuActionId.value = action.id
         }
-        event.preventDefault()
-        event.stopPropagation()
+    } else if (menuElements && event.key === 'ArrowDown') {
+        // Down arrow
+        const nextIndex = currentIndex === null || currentIndex === menuElements.length - 1
+            ? 0
+            : currentIndex + 1
+        menuElements[nextIndex]?.focus()
+        focusedMenuOptionIndex.value = nextIndex
+        visibleMenuActionId.value = action.id
     }
+    event.preventDefault()
+    event.stopPropagation()
+}
 
-    @Emit('actionClicked')
-    emitActionClicked (action: ITableAction | ITableSubAction) {
-        return action
-    }
+const emitActionClicked = (action: ITableAction | ITableSubAction) => {
+    emit('actionClicked', action)
 }
 </script>
 

package/lib/components/Tables/table.d.ts

@@ -41,7 +41,7 @@ export type TTableRow = {
 }
 
 export interface ITableSortSettings {
-    column: ITableColumn | null
+    column?: ITableColumn | null
     direction: TSortDirection
 }
 

package/lib/components/Tags/Tag.vue

@@ -22,9 +22,9 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { dark as vDark } from '../../directives'
 
 type TTagStyles = {
     background?: string
@@ -32,44 +32,54 @@ type TTagStyles = {
     border?: string
 }
 
-@Component({
-    directives: {
-        dark,
-    },
-})
-export default class Tag extends Vue {
-    @Prop({ default: false }) isBetaTag!: boolean
-    @Prop({ default: false }) isLearningTag!: boolean
-    @Prop({ default: false }) isActiveTag!: boolean
-    @Prop({ default: false }) isPendingTag!: boolean
-    @Prop({ default: false }) isArchivedTag!: boolean
-    @Prop({ default: false }) isDraftTag!: boolean
-    @Prop({ default: false }) isAvailableTag!: boolean
-    @Prop({ default: false }) isUpcomingTag!: boolean
-    @Prop({ default: false }) isClosedTag!: boolean
-    @Prop({ default: 'large' }) size!: 'small' | 'medium' | 'large'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: undefined }) backgroundColor!: string | undefined
-    @Prop({ default: undefined }) textColor!: string | undefined
-    @Prop({ default: undefined }) tagBorder!: string | undefined
-
-    get tagStyles () {
-        const tagStylesObj: TTagStyles = {}
-        if (this.backgroundColor) {
-            tagStylesObj['background'] = this.backgroundColor
-        }
-
-        if (this.textColor) {
-            tagStylesObj['color'] = this.textColor
-        }
+const {
+    isBetaTag = false,
+    isLearningTag = false,
+    isActiveTag = false,
+    isPendingTag = false,
+    isArchivedTag = false,
+    isDraftTag = false,
+    isAvailableTag = false,
+    isUpcomingTag = false,
+    isClosedTag = false,
+    size = 'large',
+    isDarkMode = false,
+    backgroundColor = undefined,
+    textColor = undefined,
+    tagBorder = undefined,
+} = defineProps<{
+    isBetaTag?: boolean
+    isLearningTag?: boolean
+    isActiveTag?: boolean
+    isPendingTag?: boolean
+    isArchivedTag?: boolean
+    isDraftTag?: boolean
+    isAvailableTag?: boolean
+    isUpcomingTag?: boolean
+    isClosedTag?: boolean
+    size?: 'small' | 'medium' | 'large'
+    isDarkMode?: boolean
+    backgroundColor?: string
+    textColor?: string
+    tagBorder?: string
+}>()
+
+const tagStyles = computed(() => {
+    const tagStylesObj: TTagStyles = {}
+    if (backgroundColor) {
+        tagStylesObj['background'] = backgroundColor
+    }
 
-        if (this.tagBorder) {
-            tagStylesObj['border'] = this.tagBorder
-        }
+    if (textColor) {
+        tagStylesObj['color'] = textColor
+    }
 
-        return Object.keys(tagStylesObj).length !== 0 ? tagStylesObj : undefined
+    if (tagBorder) {
+        tagStylesObj['border'] = tagBorder
     }
-}
+
+    return Object.keys(tagStylesObj).length !== 0 ? tagStylesObj : undefined
+})
 </script>
 
 <style lang="scss">
@@ -209,4 +219,4 @@ export default class Tag extends Vue {
         }
     }
 }
-</style>
+</style>