@dolanske/vui 0.1.0 → 0.1.1

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 popoutAnchor = 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="popoutAnchor" 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);

package/src/index.ts

@@ -0,0 +1,111 @@
+import Accordion from './components/Accordion/Accordion.vue'
+import AccordionGroup from './components/Accordion/AccordionGroup.vue'
+import Alert from './components/Alert/Alert.vue'
+import Avatar from './components/Avatar/Avatar.vue'
+import Badge from './components/Badge/Badge.vue'
+import BreadcrumbItem from './components/Breadcrumbs/BreadcrumbItem.vue'
+import Breadcrumbs from './components/Breadcrumbs/Breadcrumbs.vue'
+import Button from './components/Button/Button.vue'
+import ButtonGroup from './components/ButtonGroup/ButtonGroup.vue'
+import Calendar from './components/Calendar/Calendar.vue'
+import Card from './components/Card/Card.vue'
+import Checkbox from './components/Checkbox/Checkbox.vue'
+import CopyClipboard from './components/CopyClipboard/CopyClipboard.vue'
+import Divider from './components/Divider/Divider.vue'
+import Drawer from './components/Drawer/Drawer.vue'
+import Dropdown from './components/Dropdown/Dropdown.vue'
+import DropdownItem from './components/Dropdown/DropdownItem.vue'
+import DropdownTitle from './components/Dropdown/DropdownTitle.vue'
+import Flex from './components/Flex/Flex.vue'
+import Grid from './components/Grid/Grid.vue'
+import Counter from './components/Input/Counter.vue'
+import Dropzone from './components/Input/Dropzone.vue'
+import File from './components/Input/File.vue'
+import Input from './components/Input/Input.vue'
+import Password from './components/Input/Password.vue'
+import Textarea from './components/Input/Textarea.vue'
+import Kbd from './components/Kbd/Kbd.vue'
+import KbdGroup from './components/Kbd/KbdGroup.vue'
+import Confirm from './components/Modal/Confirm.vue'
+import Modal from './components/Modal/Modal.vue'
+import Pagination from './components/Pagination/Pagination.vue'
+import Popout from './components/Popout/Popout.vue'
+import Progress from './components/Progress/Progress.vue'
+import Radio from './components/Radio/Radio.vue'
+import RadioGroup from './components/Radio/RadioGroup.vue'
+import Select from './components/Select/Select.vue'
+import Sheet from './components/Sheet/Sheet.vue'
+import Skeleton from './components/Skeleton/Skeleton.vue'
+import Spinner from './components/Spinner/Spinner.vue'
+import Switch from './components/Switch/Switch.vue'
+import Cell from './components/Table/Cell.vue'
+import Header from './components/Table/Header.vue'
+import Row from './components/Table/Row.vue'
+import SelectAll from './components/Table/SelectAll.vue'
+import SelectRow from './components/Table/SelectRow.vue'
+import Table from './components/Table/Table.vue'
+import Tab from './components/Tabs/Tab.vue'
+import Tabs from './components/Tabs/Tabs.vue'
+import { pushToast, removeToast } from './components/Toast/toast'
+import Toasts from './components/Toast/Toasts.vue'
+import Tooltip from './components/Tooltip/Tooltip.vue'
+import Backdrop from './internal/Backdrop/Backdrop.vue'
+import { searchString } from './shared/helpers'
+import './index.scss'
+
+export {
+  Accordion,
+  AccordionGroup,
+  Alert,
+  Avatar,
+  Backdrop,
+  Badge,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Cell,
+  Checkbox,
+  Confirm,
+  CopyClipboard,
+  Counter,
+  Divider,
+  Drawer,
+  Dropdown,
+  DropdownItem,
+  DropdownTitle,
+  Dropzone,
+  File,
+  Flex,
+  Grid,
+  Header,
+  Input,
+  Kbd,
+  KbdGroup,
+  Modal,
+  Pagination,
+  Password,
+  Popout,
+  Progress,
+  pushToast,
+  Radio,
+  RadioGroup,
+  removeToast,
+  Row,
+  searchString,
+  Select,
+  SelectAll,
+  SelectRow,
+  Sheet,
+  Skeleton,
+  Spinner,
+  Switch,
+  Tab,
+  Table,
+  Tabs,
+  Textarea,
+  Toasts,
+  Tooltip,
+}

package/src/internal/Backdrop/Backdrop.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import './backdrop.scss'
+
+const emits = defineEmits<{
+  (e: 'close'): void
+}>()
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      emits('close')
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="vui-backdrop" @click.self="emits('close')">
+    <slot />
+  </div>
+</template>

package/src/internal/Backdrop/backdrop.scss

@@ -0,0 +1,28 @@
+:root {
+  --backdrop-offset: 64px;
+}
+
+.vui-backdrop {
+  z-index: 1000;
+  position: fixed;
+  display: block;
+  width: 100dvw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  padding: var(--backdrop-offset);
+  overflow-y: auto;
+
+  &:after {
+    content: '';
+    position: fixed;
+    z-index: -1;
+    inset: 0;
+    background-color: var(--color-bg-lowered);
+    opacity: 0.9;
+  }
+}
+
+html:has(.vui-backdrop) {
+  overflow: hidden;
+}

package/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style/core.scss'
+
+createApp(App).mount('#app')

package/src/shared/composables.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef } from 'vue'
+import type { Sizes } from './types'
+import { computed } from 'vue'
+import { Size } from './types'
+
+// Some files may share the same properties
+export function useActualGap(gap?: Sizes | number): ComputedRef<string> {
+  return computed(() => {
+    if (typeof gap === 'number')
+      return `${gap}px`
+    switch (gap) {
+      case Size.s: return '4px'
+      case Size.l: return '16px'
+      case Size.m:
+      default: return '8px'
+    }
+  })
+}

package/src/shared/helpers.ts

@@ -0,0 +1,53 @@
+export function createArray(length: number, startOffset: number = 0): number[] {
+  return Array
+    .from({ length })
+    .map((_, index) => startOffset + index)
+}
+
+// Searches through the input and checkes wether it contains match
+// It searches the input by splitting it by whitespace and matching each
+// word against the string
+export function searchString(match: string | string[], input: string): boolean {
+  if (!match)
+    return false
+
+  const joint: string = Array.isArray(match) ? match.join(' ') : match
+
+  const split = input.trim().split(/\s+/)
+  return split.every(s => joint.toLowerCase().includes(s.toLowerCase()))
+}
+
+export function getMaybeRefLength(value: string | number): number {
+  return typeof value === 'number' ? value : value.length
+}
+
+export function isNil(value: any): value is undefined {
+  return value === undefined || value === null
+}
+
+/**
+ * Checks wether a color is light or dark, depending on
+ */
+export function calculateColorLightness(r: number, g: number, b: number): 'dark' | 'light' {
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000
+  return yiq >= 128 ? 'light' : 'dark'
+}
+
+/**
+ * Convert a CSS rgb string to a tuple of actual r,g,b values
+ *
+ * 'rgb(12,16,24)' --> [12, 16, 24]
+ */
+export function stringRgbToValues(rgbString: string): [number, number, number] {
+  return rgbString.match(/\d+/g)!.map(Number) as any as [number, number, number]
+}
+
+export function randomMinMax(min: number, max: number): number {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function delay(amount: number): Promise<any> {
+  return new Promise(r => setTimeout(r, amount))
+}

package/src/shared/types.ts

@@ -0,0 +1,11 @@
+export enum Size {
+  s = 's',
+  m = 'm',
+  l = 'l',
+}
+
+export type Sizes = 's' | 'm' | 'l'
+
+export type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>
+
+export type VueClass = string | Record<string, | boolean> | Array<string | Record<string, string | boolean>>

package/src/style/animation.scss

@@ -0,0 +1,21 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: var(--transition);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition: var(--transition);
+  transition-property: transform, opacity;
+}
+
+.fade-up-enter-from,
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}

package/src/style/core.scss

@@ -0,0 +1,128 @@
+// Core of the UI library, it should only contain styles which are relevant to
+// the library and each component should import it
+
+// To overwrite any of these styles, simply create a style file and import it
+// after this one
+@use './reset.scss';
+@use './fonts.scss';
+
+:root {
+  --container-s: 498px;
+  --container-m: 856px;
+  --container-l: 1140px;
+  --container-xl: 1540px;
+
+  --border-radius-xs: 2px;
+  --border-radius-s: 4px;
+  --border-radius-m: 8px;
+  --border-radius-l: 12px;
+
+  --font-size-xs: 1.15rem;
+  --font-size-s: 1.3rem;
+  --font-size-ms: 1.45rem;
+  --font-size-m: 1.6rem;
+  --font-size-l: 1.65rem;
+
+  --space-xs: 8px;
+  --space-s: 12px;
+  --space-m: 18px;
+  --space-l: 26px;
+  --space-xl: 40px;
+  --space-xxl: 52px;
+
+  --transition-quick: 0.08s all ease-in-out;
+  --transition: 0.1s all ease-in-out;
+  --transition-slow: 0.3s all ease-in-out;
+
+  --color-bg: rgb(18, 18, 18);
+  --color-bg-raised: rgb(28, 28, 28);
+  --color-bg-lowered: rgb(14, 14, 14);
+
+  --color-text: rgb(231, 231, 231);
+  --color-text-light: rgb(158, 158, 158);
+  --color-text-lighter: rgb(100, 100, 100);
+  --color-text-invert: rgb(17, 17, 17);
+
+  --color-button-gray: rgb(28, 28, 28);
+  --color-button-gray-hover: rgb(38, 38, 38);
+
+  --color-text-red: rgb(243, 78, 70);
+  --color-bg-red-lowered: rgb(66, 22, 20);
+  --color-bg-red-raised: rgb(119, 31, 26);
+  --color-border-red: rgb(94, 23, 19);
+
+  --color-text-green: rgb(44, 214, 52);
+  --color-text-green-disabled: rgb(109, 193, 113);
+  --color-bg-green-lowered: rgb(19, 46, 9);
+  --color-bg-green-raised: rgb(48, 122, 22);
+  --color-border-green: rgb(27, 70, 12);
+
+  --color-text-yellow: rgb(243, 231, 70);
+  --color-bg-yellow-lowered: rgb(59, 46, 10);
+  --color-bg-yellow-raised: rgb(119, 82, 26);
+  --color-border-yellow: rgb(99, 97, 16);
+
+  --color-text-blue: rgb(85, 141, 245);
+  --color-bg-blue-lowered: rgb(10, 25, 59);
+  --color-bg-blue-raised: rgb(26, 59, 119);
+  --color-border-blue: rgb(20, 45, 112);
+
+  --color-border: rgb(38, 38, 38);
+  --color-border-strong: rgb(54, 54, 54);
+  --color-border-weak: rgb(36, 36, 36);
+
+  --color-accent: rgb(56, 214, 219);
+  --color-accent-disabled: hsl(from var(--color-accent) calc(h) calc(s * 0.5) calc(l));
+  --color-bg-accent-lowered: hsl(from var(--color-accent) calc(h) s calc(l * 0.2));
+  --color-bg-accent-raised: hsl(from var(--color-accent) calc(h) s calc(l * 0.6));
+  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.5));
+
+  --box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
+  --box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
+
+  --global-font: Geist, sans-serif;
+  --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
+}
+
+:root {
+  font-family: var(--global-font);
+  font-size: 63.5%;
+  // TODO remove
+  position: relative;
+  background-color: var(--color-bg);
+
+  overflow-x: hidden;
+  width: 100%;
+
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  // TODO end remove
+
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-text);
+    }
+  }
+}
+
+body {
+  color: var(--color-text);
+}
+
+@import './typography.scss';
+@import './layout.scss';
+@import './animation.scss';
+@import './tooltip.scss';
+@import './utils.scss';
+
+@import './media-query.scss';

package/src/style/layout.scss

@@ -0,0 +1,9 @@
+// Contains basic layout definitions and classes to compose basic layouts
+
+.container {
+  display: block;
+  margin-inline: auto;
+  width: 100%;
+  padding-inline: var(--space-m);
+  max-width: var(--container-l);
+}