@dolanske/vui 0.1.0 → 0.1.2

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 underlineRef = useTemplateRef('underline')
+const tabsRef = useTemplateRef('tabs')
+
+function computeUnderlinePosition() {
+  if (tabsRef.value && underlineRef.value) {
+    const activeBounds = tabsRef.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
+    const parentBounds = tabsRef.value.getBoundingClientRect()
+    if (!activeBounds || !parentBounds)
+      return
+
+    underlineRef.value.style.width = `${activeBounds.width}px`
+    underlineRef.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;
+  }
+}

package/src/components/Toast/Toasts.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Button from '../Button/Button.vue'
+import { toasts } from './toast'
+import './toast.scss'
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="vui-toast-wrapper">
+      <TransitionGroup name="toast" tag="ul" class="vui-toast-list">
+        <li v-for="[toastId, toast] in toasts" :key="toastId" class="vui-toast-item">
+          <div class="vui-toast-item-content">
+            <strong>{{ toast.title }}</strong>
+            <p v-if="toast.description">
+              {{ toast.description }}
+            </p>
+          </div>
+          <Button v-if="toast.action" @click="toast.action.handler(toast.id)">
+            {{ toast.action.label }}
+          </Button>
+        </li>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.toast-move,
+.toast-enter-active,
+.toast-leave-active {
+  transition: var(--transition);
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(24px) scale(0.95);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(-24px) scale(0.95);
+}
+
+.toast-leave-active {
+  position: absolute;
+}
+</style>

package/src/components/Toast/toast.scss

@@ -0,0 +1,41 @@
+.vui-toast-wrapper {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: 100%;
+  max-width: 392px;
+
+  .vui-toast-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+
+    .vui-toast-item {
+      display: flex;
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-m);
+      padding: var(--space-m) var(--space-s);
+      background-color: var(--color-bg);
+      width: 100%;
+      align-items: center;
+      gap: var(--space-m);
+      box-shadow: var(--box-shadow);
+
+      .vui-toast-item-content {
+        flex: 1;
+
+        strong {
+          color: var(--color-text);
+          margin-bottom: var(--space-xs);
+          display: block;
+          font-size: var(--font-size-m);
+        }
+
+        p {
+          color: var(--color-text-lighter);
+          font-size: var(--font-size-s);
+        }
+      }
+    }
+  }
+}

package/src/components/Toast/toast.ts

@@ -0,0 +1,92 @@
+// share some tiny global state
+
+import { ref } from 'vue'
+
+interface ToastAction {
+  label: string
+  handler: (toastId: number) => void
+}
+
+interface ToastOptions {
+  persist?: boolean
+  timeout?: number
+  action?: ToastAction
+  description?: string
+}
+
+interface Toast {
+  id: number
+  // type: ToastType
+  title: string
+  action?: ToastAction
+  createdAt: number
+  expiresAt: number
+  description?: string
+}
+
+// Store in a ref so the toast component can import it
+export const toasts = ref(new Map<number, Toast>())
+
+// Simple incremental id system
+let id = 0
+
+// function toast(type: ToastType, title: string, options?: ToastOptions): Toast {
+export function pushToast(title: string, options?: ToastOptions): Toast {
+  const parsedOptions = Object.assign({
+    persist: false,
+    timeout: 7000,
+  }, options)
+
+  const newToast = {
+    id,
+    // type,
+    title,
+    persist: parsedOptions.persist,
+    description: parsedOptions.description,
+    action: parsedOptions.action,
+    createdAt: Date.now(),
+    expiresAt: Date.now() + parsedOptions.timeout,
+  }
+
+  toasts.value.set(id, newToast)
+
+  // If options include timeout (by default) remove the toast after timeout
+  // passes
+  if (!parsedOptions.persist) {
+    setTimeout((_id: number) => {
+      toasts.value.delete(_id)
+      // Pass Id as an optional argument, becasue by the time it is executed the
+      // Id will have been increased
+    }, parsedOptions.timeout, id)
+  }
+
+  id++
+
+  return newToast
+}
+
+export function removeToast(id: number): void {
+  toasts.value.delete(id)
+}
+
+//////
+
+// export const toastError: NewToastFn = (title, options) => {
+//   return pushToast('error', title, options)
+// }
+
+// export const toastSuccess: NewToastFn = (title, options) => {
+//   return pushToast('success', title, options)
+// }
+
+// export const toastInfo: NewToastFn = (title, options) => {
+//   return pushToast('info', title, options)
+// }
+
+// export const toastNeutral: NewToastFn = (title, options) => {
+//   return pushToast('neutral', title, options)
+// }
+
+// export const toastWarning: NewToastFn = (title, options) => {
+//   return pushToast('warning', title, options)
+// }

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,80 @@
+<script setup lang='ts'>
+import type { Placement } from '@floating-ui/vue'
+import { ref, useTemplateRef, watch } from 'vue'
+import Popout from '../Popout/Popout.vue'
+import './tooltip.scss'
+
+interface Props {
+  /**
+   * Tooltip placement related to the anchor
+   */
+  placement?: Placement
+  /**
+   * Amount of time user should hover the anchor until the tooltip shows up
+   */
+  delay?: number
+}
+
+const {
+  placement = 'bottom',
+  delay = 0,
+} = defineProps<Props>()
+
+const popoutAnchorRef = useTemplateRef('popoutAnchor')
+// Track if user is hovering the anchor
+const hoverAnchor = ref(false)
+
+// Display tooltip
+const showTooltip = ref(false)
+
+let timeoutId: NodeJS.Timeout
+watch(hoverAnchor, (isHovering) => {
+  if (isHovering) {
+    if (!delay || delay <= 0) {
+      showTooltip.value = true
+      return
+    }
+
+    clearTimeout(timeoutId)
+
+    timeoutId = setTimeout(() => {
+      // Need to reference the ref itself as this will execute without the
+      // outside scope (as far as I know tbh)
+      if (hoverAnchor.value) {
+        showTooltip.value = true
+      }
+    }, delay)
+  }
+  else {
+    clearTimeout(timeoutId)
+    showTooltip.value = false
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="popoutAnchor"
+    @mouseenter="hoverAnchor = true"
+    @mouseleave="hoverAnchor = false"
+  >
+    <slot />
+  </div>
+  <Transition appear name="tooltip">
+    <Popout v-if="showTooltip" :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+      <slot name="tooltip" />
+    </Popout>
+  </Transition>
+</template>
+
+<style scoped>
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: 0.1s opacity ease-in-out;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/Tooltip/tooltip.scss

@@ -0,0 +1,4 @@
+.vui-tooltip {
+  padding: var(--space-s);
+  max-width: 512px;
+}

package/src/index.scss

@@ -0,0 +1 @@
+@import url(./style/core.scss);