@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Table/SelectAll.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+const {
+  isSelectedAll,
+  enabled,
+  selectAllRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <th v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelectedAll }">
+    <Button
+      square
+      plain
+      :icon="isSelectedAll ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectAllRows()"
+    />
+  </th>
+</template>

package/src/components/Table/SelectRow.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+import type { BaseRow, TableSelectionProvide } from './table'
+import { computed, inject } from 'vue'
+import Button from '../Button/Button.vue'
+import { TableSelectionProvideSymbol } from './table'
+
+interface Props {
+  row: BaseRow
+}
+
+const props = defineProps<Props>()
+const {
+  enabled,
+  selectRow,
+  selectedRows,
+} = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+const isSelected = computed(() => selectedRows.value.has(props.row))
+</script>
+
+<template>
+  <td v-if="enabled" class="vui-table-interactive-cell" :class="{ selected: isSelected }">
+    <Button
+      square
+      plain
+      :icon="isSelected ? 'ph:check-square-fill' : 'ph:square'"
+      @click="selectRow(props.row)"
+    />
+  </td>
+</template>

package/src/components/Table/Table.vue

@@ -0,0 +1,66 @@
+<script setup lang='ts'>
+import type { TableSelectionProvide } from './table'
+import { inject } from 'vue'
+import { TableSelectionProvideSymbol } from './table'
+import './table.scss'
+
+interface Props {
+  /**
+   * Sets the `table-layout` property
+   */
+  fixed?: boolean
+  /**
+   * Table cells with content overflowing on new line will be cropped
+   */
+  nowrap?: boolean
+  /**
+   * Add a visual separator between each row
+   */
+  separateRows?: boolean
+  /**
+   * Add a visual separator between each cell
+   */
+  separateCells?: boolean
+  /**
+   * Wrap table with a border
+   */
+  outerBorder?: boolean
+}
+
+const {
+  fixed,
+  nowrap,
+  separateRows = true,
+  separateCells = false,
+  outerBorder = true,
+} = defineProps<Props>()
+const selecting = inject(TableSelectionProvideSymbol) as TableSelectionProvide
+</script>
+
+<template>
+  <div
+    class="vui-table-container"
+    :class="{
+      fixed,
+      nowrap,
+      'selecting': selecting.enabled,
+      'separated-rows': separateRows,
+      'separated-cells': separateCells,
+      'outer-border': outerBorder,
+    }"
+  >
+    <table>
+      <thead>
+        <tr>
+          <slot name="header" />
+        </tr>
+      </thead>
+      <tbody>
+        <slot name="body" />
+      </tbody>
+    </table>
+    <div class="vui-table-pagination-wrap">
+      <slot name="pagination" />
+    </div>
+  </div>
+</template>

package/src/components/Table/table.scss

@@ -0,0 +1,134 @@
+.vui-table-container {
+  display: block;
+  width: 100%;
+  border-radius: var(--border-radius-m);
+
+  &.fixed table {
+    table-layout: fixed;
+  }
+
+  &.outer-border {
+    border: 1px solid var(--color-border);
+  }
+
+  &.nowrap table tr {
+    td {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.separated-rows table {
+    th,
+    td {
+      border-bottom: 1px solid var(--color-border);
+    }
+  }
+
+  &.separated-cells table {
+    th,
+    td {
+      border-right: 1px solid var(--color-border);
+
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    text-indent: 0;
+    border: none;
+    overflow: unset;
+
+    tr {
+      border: none;
+
+      &:has(.vui-table-interactive-cell.selected) {
+        td {
+          background-color: var(--color-bg-raised);
+        }
+      }
+    }
+
+    th,
+    td {
+      font-size: var(--font-size-ms);
+      border: none;
+      border-left: none !important;
+      transition: var(--transition-quick);
+      position: relative;
+      z-index: 1;
+
+      // Fixed width, only houses a checkbox component
+      &.vui-table-interactive-cell {
+        --checkbox-cell-width: calc(calc(var(--space-xs) * 2) + 32px);
+        width: var(--checkbox-cell-width);
+        min-width: var(--checkbox-cell-width);
+        max-width: var(--checkbox-cell-width);
+        height: auto;
+        padding-inline: var(--space-xs);
+        padding-block: 0;
+
+        &.selected .vui-button.icon .vui-button-slot svg path {
+          color: var(--color-text) !important;
+        }
+
+        .vui-button {
+          vertical-align: middle;
+          display: inline-flex;
+
+          &.icon .vui-button-slot svg {
+            width: 22px !important;
+            height: 22px !important;
+
+            path {
+              color: var(--color-text-light);
+            }
+          }
+        }
+      }
+
+      .vui-cell-context {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        position: absolute;
+        inset: 0;
+        padding: var(--space-xs);
+        background-color: var(--color-bg);
+        left: unset;
+      }
+    }
+
+    th {
+      .vui-table-th-content {
+        color: var(--color-text-light);
+        font-size: var(--font-size-xs);
+        text-transform: uppercase;
+        font-weight: 500;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: var(--space-xs);
+
+        .vui-table-sort-button:not(.active) svg path {
+          color: var(--color-text-lighter);
+        }
+      }
+    }
+  }
+
+  .vui-table-pagination-wrap {
+    padding: var(--space-s) var(--space-m);
+
+    p {
+      font-size: var(--font-size-s);
+      color: var(--color-text-lighter);
+    }
+  }
+}

package/src/components/Table/table.ts

@@ -0,0 +1,243 @@
+import type { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import type { DeepRequired } from '../../shared/types'
+import { computed, provide, readonly, ref, toValue } from 'vue'
+import { searchString } from '../../shared/helpers'
+import { paginate } from '../Pagination/pagination'
+
+export type BaseRow = Record<string, string | number>
+
+export interface TableSelectionProvide {
+  selectedRows: Ref<Set<BaseRow>>
+  selectRow: (row: BaseRow) => void
+  selectAllRows: () => void
+  enabled: ComputedRef<boolean>
+  isSelectedAll: ComputedRef<boolean>
+}
+
+export const TableSelectionProvideSymbol = Symbol('select-row-provide') as InjectionKey<TableSelectionProvide>
+
+interface Sorting<K> {
+  key?: K
+  type: 'asc' | 'desc'
+}
+
+export interface Header {
+  label: string
+  sortToggle: () => void
+  sortKey?: 'asc' | 'desc'
+
+}
+
+interface TableOptionsInput {
+  pagination?: {
+    enabled?: boolean
+    perPage?: number
+    maxPages?: number
+  }
+  select?: boolean
+}
+
+// eslint-disable-next-line ts/explicit-function-return-type
+export function defineTable<const Dataset extends Array<BaseRow>>(
+  computedDataset: MaybeRefOrGetter<Dataset>,
+  tableOptions?: TableOptionsInput,
+) {
+  const $data = computed(() => toValue(computedDataset))
+
+  //
+  // Reactive options + defaults
+  const options = ref(Object.assign({
+    pagination: {
+      enabled: false,
+      perPage: 10,
+      maxPages: 3,
+    },
+    select: false,
+  }, tableOptions) as DeepRequired<TableOptionsInput>)
+
+  //
+  // Pagination
+  const currentPage = ref(1)
+
+  const pagination = computed(() => paginate(
+    $data.value.length,
+    currentPage.value,
+    options.value.pagination?.perPage,
+    options.value.pagination?.maxPages,
+  ))
+
+  const canNextPage = computed(() => pagination.value.currentPage < pagination.value.endPage)
+  const canPrevPage = computed(() => pagination.value.currentPage > pagination.value.startPage)
+
+  /**
+   * Sets the currently active data page. Please note that you provide the page
+   * number, no its index. So this is 1-indexed input
+   *
+   * @param page Page number
+   */
+  const setPage = (page: number): void => {
+    if ((page > currentPage.value && canNextPage.value)
+      || (page < currentPage.value && canPrevPage.value)) {
+      currentPage.value = page
+    }
+  }
+
+  //
+  // Sorting
+
+  const sorting = ref<Sorting<Ref<keyof Dataset[number]>>>({
+    key: undefined,
+    type: 'asc',
+  })
+
+  const setSort = (key: keyof Dataset[number], type: 'asc' | 'desc' | 'toggle' = 'asc'): void => {
+    sorting.value.key = key
+    sorting.value.type = type === 'toggle'
+      // Toggle between descending & ascending whenever the set sort fn is called
+      ? sorting.value.type === 'asc' ? 'desc' : 'asc'
+      : type
+  }
+
+  const clearSort = (): void => {
+    sorting.value.key = undefined
+    sorting.value.type = 'asc'
+  }
+
+  //
+  // Searching
+  const search = ref<string>()
+
+  //
+  // Dataset formatting
+  const filteredRows = computed(() => {
+    const searchValue = search.value
+    let final = $data.value
+
+    if (searchValue) {
+      final = final.filter((row: Dataset[number]) => {
+        const matches = Object
+          .values(row)
+          .map(row => `${row}`)
+        return searchString(matches, searchValue)
+      }) as Dataset
+    }
+
+    const key = sorting.value.key
+
+    if (key) {
+      final = final.toSorted((a: Dataset[number], b: Dataset[number]) => {
+        const aValue = a[key]
+        const bValue = b[key]
+        return sorting.value.type === 'asc'
+          ? aValue > bValue ? 1 : -1
+          : aValue > bValue ? -1 : 1
+      }) as Dataset
+    }
+
+    return final
+  })
+
+  const headers = computed(() => Object
+    .keys($data.value[0])
+    .map((key) => {
+      return {
+        label: key,
+        sortKey: sorting.value.key === key && sorting.value.type,
+        sortToggle: () => {
+          // 3-way toggle asc -> desc -> turn off (reset to undefined)
+          if (sorting.value.key === key) {
+            switch (sorting.value.type) {
+              case 'asc': {
+                sorting.value.type = 'desc'
+                break
+              }
+              case 'desc': {
+                sorting.value.key = undefined
+                sorting.value.key = 'asc'
+                break
+              }
+              default: {
+                sorting.value.key = key
+                sorting.value.type = 'asc'
+                break
+              }
+            }
+          }
+          else {
+            setSort(key)
+          }
+        },
+      } as Header
+    }),
+  )
+
+  const rows = computed(() => {
+    if (options.value.pagination?.enabled === true) {
+      return filteredRows.value.slice(
+        pagination.value.startIndex,
+        pagination.value.endIndex + 1,
+      ) as Dataset
+    }
+    return filteredRows.value as Dataset
+  })
+
+  //
+  // Row selecting
+  const selectedRows = ref<Set<BaseRow>>(new Set() as Set<BaseRow>)
+  const selectingEnabled = computed(() => options.value.select)
+
+  /**
+   * Accepts either an existing index of a row within the dataset or the dataset
+   * row itself. If the item is already selected, it will be deselected.
+   *
+   * @param row {Number | RowObject}
+   */
+  function selectRow(row: Dataset[number]): void {
+    if (selectedRows.value.has(row)) {
+      selectedRows.value.delete(row)
+    }
+    else {
+      selectedRows.value.add(row)
+    }
+  }
+
+  const isSelectedAll = computed(() => $data.value.length === selectedRows.value.size)
+
+  function selectAllRows(): void {
+    if (isSelectedAll.value) {
+      // If the selected indexes have the same length as the data array, we can
+      // assume all of them are selected. Therefore we toggle it by deselecting
+      // all of them
+      selectedRows.value = new Set()
+    }
+    else {
+      selectedRows.value = new Set($data.value.map(row => row))
+    }
+  }
+
+  provide(TableSelectionProvideSymbol, {
+    selectedRows,
+    selectRow,
+    selectAllRows,
+    enabled: selectingEnabled,
+    isSelectedAll,
+  })
+
+  return {
+    setSort,
+    clearSort,
+    search,
+    rows: readonly(rows),
+    allRows: readonly(filteredRows),
+    selectedRows: readonly(selectedRows),
+    headers: readonly(headers),
+    pagination,
+    canPrevPage,
+    canNextPage,
+    setPage,
+    options,
+    selectRow,
+    selectAllRows,
+    isSelectedAll,
+  }
+}

package/src/components/Tabs/Tab.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+
+export interface TabProps {
+  disabled?: boolean
+  id?: string
+  label: string
+  icon?: string
+}
+
+const props = defineProps<TabProps>()
+const id = computed(() => props.id ?? props.label)
+</script>
+
+<template>
+  <button class="vui-tab" :data-tab-id="id" :class="{ disabled: props.disabled }">
+    <Icon v-if="props.icon" :icon="props.icon" />
+    {{ props.label }}
+  </button>
+</template>

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { TabProps } from './Tab.vue'
+import { useEventListener } from '@vueuse/core'
+import { onMounted, useTemplateRef, type VNode, watch } from 'vue'
+import './tabs.scss'
+
+interface Props {
+  variant?: 'default' | 'filled'
+  expand?: boolean
+  disabled?: boolean
+}
+
+const {
+  expand,
+  disabled,
+  variant = 'default',
+} = defineProps<Props>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & { props: TabProps }>
+}>()
+
+const active = defineModel()
+
+// Underline calculation
+const underline = useTemplateRef('underline')
+const tabs = useTemplateRef('tabs')
+
+function computeUnderlinePosition() {
+  if (tabs.value && underline.value) {
+    const activeBounds = tabs.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
+    const parentBounds = tabs.value.getBoundingClientRect()
+    if (!activeBounds || !parentBounds)
+      return
+
+    underline.value.style.width = `${activeBounds.width}px`
+    underline.value.style.left = `${activeBounds.left - parentBounds.left}px`
+  }
+}
+
+onMounted(() => {
+  watch(
+    [active, () => expand],
+    computeUnderlinePosition,
+    {
+      immediate: true,
+      flush: 'post',
+    },
+  )
+})
+
+useEventListener(window, 'resize', computeUnderlinePosition)
+</script>
+
+<template>
+  <div
+    ref="tabs"
+    class="vui-tabs"
+    :class="[
+      { expand, disabled },
+      variant === 'default'
+        ? ''
+        : `vui-tabs-variant-${variant}`,
+    ]"
+  >
+    <Component
+      :is="vnode"
+      v-for="vnode of slots.default()"
+      :key="vnode.props.id"
+      :class="{ active: vnode.props.id === active }"
+      @click="active = vnode.props.id"
+    />
+
+    <div ref="underline" class="vui-tab-underline" />
+  </div>
+</template>

package/src/components/Tabs/tabs.scss

@@ -0,0 +1,78 @@
+.vui-tabs {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+  border-bottom: 1px solid var(--color-border);
+  position: relative;
+
+  &.vui-tabs-variant-filled {
+    background-color: var(--color-bg-raised);
+    border-bottom: none;
+    z-index: 1;
+    border-radius: var(--border-radius-m);
+    padding-inline: 4px;
+
+    .vui-tab-underline {
+      border-bottom: none;
+      background-color: var(--color-bg-lowered);
+      top: 4px;
+      bottom: 4px;
+      z-index: -1;
+      border-radius: var(--border-radius-m);
+    }
+  }
+
+  &.disabled .vui-tab,
+  .vui-tab.disabled {
+    pointer-events: none;
+    color: var(--color-text-lighter);
+
+    &.active {
+      color: var(--color-text-lighter) !important;
+    }
+  }
+
+  &.disabled {
+    .vui-tab-underline {
+      border-color: var(--color-text-lighter);
+    }
+  }
+
+  &.expand .vui-tab {
+    flex: 1;
+  }
+
+  .vui-tab {
+    display: flex;
+    height: 40px;
+    // place-content: center;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10px;
+    font-size: var(--font-size-ms);
+    position: relative;
+    color: var(--color-text-light);
+    transition: var(--transition);
+    cursor: default;
+    gap: var(--space-xs);
+    border-radius: var(--border-radius-m);
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover,
+    &.active {
+      color: var(--color-text);
+    }
+  }
+
+  .vui-tab-underline {
+    transition: var(--transition);
+    display: block;
+    border-bottom: 1px solid var(--color-text);
+    position: absolute;
+    bottom: 0;
+  }
+}