@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Switch/switch.scss

@@ -1,93 +0,0 @@
-.vui-switch {
-  --switch-size: 24px;
-
-  &.checked {
-    .vui-switch-icon .vui-switch-indicator {
-      left: calc(100% - 24px);
-      background-color: var(--color-text);
-    }
-
-    &.accent .vui-switch-icon .vui-switch-indicator {
-      background-color: var(--color-accent);
-    }
-  }
-
-  &.disabled {
-    .vui-switch-icon {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    input + label .vui-switch-content {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .vui-switch-icon {
-    width: 44px;
-    height: var(--switch-size);
-    border-radius: 22px;
-    background-color: var(--color-bg-raised);
-    position: relative;
-    cursor: default;
-
-    .vui-switch-indicator {
-      display: block;
-      position: absolute;
-      left: 2px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      border-radius: 100%;
-      background-color: var(--color-text-lighter);
-      transition: var(--transition);
-    }
-  }
-
-  input {
-    width: 1px;
-    height: 1px;
-    position: absolute;
-    overflow: hidden;
-    outline: none !important;
-    opacity: 0;
-
-    &:focus-visible + label .vui-switch-icon {
-      outline: 2px solid var(--color-text);
-    }
-
-    & + label {
-      display: grid;
-      grid-template-columns: 44px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-m);
-      color: var(--color-text);
-      user-select: none;
-
-      .vui-switch-content {
-        display: block;
-
-        &:is(p) {
-          height: var(--switch-size);
-          line-height: var(--switch-size);
-          font-size: var(--font-size-m);
-        }
-      }
-    }
-  }
-}
-
-:root.light {
-  .vui-switch .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-bg-lowered);
-  }
-
-  .vui-switch.checked.accent .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-accent);
-  }
-
-  .vui-switch.checked .vui-switch-icon .vui-switch-indicator {
-    background-color: var(--color-text);
-  }
-}

package/src/components/Table/Cell.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots, useTemplateRef } from 'vue'
-
-const slots = useSlots()
-const contextRef = useTemplateRef<HTMLTableCellElement>('context')
-const computedStyle = computed(() => {
-  if (!slots.context || !window)
-    return {}
-  const width = contextRef.value?.getBoundingClientRect().width ?? 0
-  return {
-    paddingRight: `${width}px`,
-  }
-})
-</script>
-
-<template>
-  <td :style="computedStyle">
-    <slot />
-    <div v-if="$slots.context" ref="context" class="vui-cell-context">
-      <slot name="context" />
-    </div>
-  </td>
-</template>

package/src/components/Table/Head.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { Header } from './table'
-import { computed } from 'vue'
-import Button from '../Button/Button.vue'
-import Tooltip from '../Tooltip/Tooltip.vue'
-
-interface Props {
-  /**
-   * Main header data. This can be empty in case we are just adding an empty
-   * padder. It is recommended to just use <th> instead, but this shouldn't fail
-   * anyway
-   */
-  header?: Header
-  /**
-   * Enable sorting on this column
-   */
-  sort?: boolean
-}
-
-const props = defineProps<Props>()
-
-const sortStateBind = computed(() => {
-  if (!props.header)
-    return
-  switch (props.header.sortKey) {
-    case 'asc': return {
-      icon: 'ph:sort-ascending',
-      tooltipText: 'Ascending',
-    }
-    case 'desc': return {
-      icon: 'ph:sort-descending',
-      tooltipText: 'Descending',
-    }
-    default: return {
-      icon: 'ph:arrows-down-up',
-      tooltipText: 'Sort column',
-    }
-  }
-})
-</script>
-
-<template>
-  <th>
-    <div v-if="props.header || $slots.default" class="vui-table-th-content">
-      <slot>
-        {{ props.header?.label }}
-      </slot>
-      <template v-if="props.sort && props.header">
-        <Tooltip placement="top">
-          <Button
-            :icon="sortStateBind?.icon"
-            class="vui-table-sort-button"
-            size="s"
-            :plain="!!!props.header.sortKey"
-            square
-            variant="gray"
-            @click="props.header.sortToggle"
-          />
-          <template #tooltip>
-            {{ sortStateBind?.tooltipText }}
-          </template>
-        </Tooltip>
-      </template>
-    </div>
-  </th>
-</template>

package/src/components/Table/Root.vue

@@ -1,66 +0,0 @@
-<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 v-if="$slots.header">
-        <tr>
-          <slot name="header" />
-        </tr>
-      </thead>
-      <tbody>
-        <slot name="body" />
-      </tbody>
-    </table>
-    <div v-if="$slots.pagination" class="vui-table-pagination-wrap">
-      <slot name="pagination" />
-    </div>
-  </div>
-</template>

package/src/components/Table/SelectAll.vue

@@ -1,23 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<script setup lang='ts'>
-import type { BaseRow, TableSelectionProvide } from './table'
-import { computed, inject } from 'vue'
-import { isObjectInSet } from '../../shared/helpers'
-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(() => isObjectInSet(selectedRows.value, 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/index.ts

@@ -1,7 +0,0 @@
-import Cell from './Cell.vue'
-import Head from './Head.vue'
-import Root from './Root.vue'
-import SelectAll from './SelectAll.vue'
-import SelectRow from './SelectRow.vue'
-
-export { Cell, Head, Root, SelectAll, SelectRow }

package/src/components/Table/table.scss

@@ -1,155 +0,0 @@
-.vui-table-overflow {
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: visible;
-}
-
-.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;
-
-      &:first-child td {
-        border-top: 0 !important;
-      }
-
-      &:has(.vui-table-interactive-cell.selected) {
-        td {
-          background-color: var(--color-bg-raised);
-        }
-      }
-
-      &:last-child td {
-        border-bottom: 0;
-      }
-    }
-
-    th {
-      border-top: 0 !important;
-    }
-
-    th,
-    td {
-      border: none;
-      border-left: none !important;
-      transition: var(--transition-fast);
-      position: relative;
-      z-index: var(--z-default);
-
-      // 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;
-        vertical-align: middle;
-
-        &.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: var(--z-active);
-        position: absolute;
-        inset: 0;
-        padding: var(--space-xs);
-        background-color: var(--color-bg);
-        left: unset;
-      }
-    }
-
-    th {
-      .vui-table-th-content {
-        color: var(--color-text);
-        font-size: var(--font-size-xs);
-        text-transform: uppercase;
-        font-weight: var(--font-weight-semibold);
-        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-light);
-        }
-      }
-    }
-  }
-
-  .vui-table-pagination-wrap {
-    padding: var(--space-xs) var(--space-m);
-    border-top: 1px solid var(--color-border);
-  }
-}
-
-:root.light {
-  .vui-table-container table tr:has(.vui-table-interactive-cell.selected) td {
-    background-color: var(--color-bg-medium);
-  }
-}

package/src/components/Table/table.ts

@@ -1,248 +0,0 @@
-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 any[]>(
-  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) {
-      // FIXME: change to `toSorted` when typescript is ok
-      final = [...final].sort((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 {
-      const data = new Set<BaseRow>()
-      for (const item of $data.value) {
-        data.add(item)
-      }
-      selectedRows.value = new Set(data)
-    }
-  }
-
-  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,
-  }
-}