@dolanske/vui 1.4.0 → 1.4.2

package/src/index.ts

@@ -1,116 +0,0 @@
-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 Color from './components/Input/Color.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 OTP from './components/OTP/OTP.vue'
-import OTPItem from './components/OTP/OTPItem.vue'
-import { paginate } from './components/Pagination/pagination'
-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 Sidebar from './components/Sidebar/Sidebar.vue'
-import Skeleton from './components/Skeleton/Skeleton.vue'
-import Spinner from './components/Spinner/Spinner.vue'
-import Switch from './components/Switch/Switch.vue'
-import * as Table from './components/Table'
-import { defineTable } from './components/Table/table'
-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 { setColorTheme, theme } from './shared/theme'
-import './style.scss'
-
-export {
-  Accordion,
-  AccordionGroup,
-  Alert,
-  Avatar,
-  Backdrop,
-  Badge,
-  BreadcrumbItem,
-  Breadcrumbs,
-  Button,
-  ButtonGroup,
-  Calendar,
-  Card,
-  Checkbox,
-  Color,
-  Confirm,
-  CopyClipboard,
-  Counter,
-  defineTable,
-  Divider,
-  Drawer,
-  Dropdown,
-  DropdownItem,
-  DropdownTitle,
-  Dropzone,
-  File,
-  Flex,
-  Grid,
-  Input,
-  Kbd,
-  KbdGroup,
-  Modal,
-  OTP,
-  OTPItem,
-  paginate,
-  Pagination,
-  Password,
-  Popout,
-  Progress,
-  pushToast,
-  Radio,
-  RadioGroup,
-  removeToast,
-  searchString,
-  Select,
-  setColorTheme,
-  Sheet,
-  Sidebar,
-  Skeleton,
-  Spinner,
-  Switch,
-  Tab,
-  Table,
-  Tabs,
-  Textarea,
-  theme,
-  Toasts,
-  Tooltip,
-}

package/src/internal/Backdrop/Backdrop.vue

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

@@ -1,34 +0,0 @@
-:root {
-  --backdrop-offset: 64px;
-}
-
-.vui-backdrop {
-  z-index: var(--z-overlay);
-  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: var(--z-behind);
-    inset: 0;
-    background-color: var(--color-bg-lowered);
-    opacity: 0.75;
-  }
-}
-
-html:has(.vui-backdrop) {
-  overflow: hidden;
-}
-
-:root.light {
-  .vui-backdrop:after {
-    background-color: var(--dark-color-bg);
-  }
-}

package/src/main.ts

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

package/src/shared/helpers.ts

@@ -1,124 +0,0 @@
-import type { Placement } from '@floating-ui/vue'
-
-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 | null {
-  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 rgbToHex(r: number, g: number, b: number): string {
-//   return `#${[r, g, b].map((x) => {
-//     const hex = x.toString(16)
-//     return hex.length === 1 ? `0${hex}` : hex
-//   }).join('')}`
-// }
-
-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))
-}
-
-export function setCharAt(str: string, char: string | number, index: number): string {
-  if (str.length === 0)
-    return char.toString()
-  return str.substring(0, index) + char + str.substring(index + 1)
-}
-
-/**
- * Takes in a value and if it is a number, appends "px" to it, otherwise returns
- * the original value.
- *
- */
-export function formatUnitValue(value: string | number, unit: string = 'px'): string {
-  return typeof value === 'number'
-    ? `${value}${unit}`
-  // If last value of string is NOT a number, do not add "px" at the end
-  // eslint-disable-next-line unicorn/prefer-number-properties
-    : isNaN(Number(value[value.length - 1]))
-      ? value
-      : `${value}${unit}`
-}
-
-export function clamp(min: number, max: number, value: number): number {
-  return Math.min(Math.max(value, min), max)
-}
-
-/**
- * Checks wether an object is inside of Set, based on comparing values. Not reference
- *
- * @param set The Set
- * @param obj Object which should be in the side
- * @returns If object is inside the set
- */
-export function isObjectInSet(set: Set<any>, obj: any): boolean {
-  for (const item of set) {
-    // Check if both have the same number of keys
-    if (Object.keys(item).length !== Object.keys(obj).length) {
-      continue
-    }
-
-    // Compare each key-value pair
-    let isEqual = true
-
-    for (const key in item) {
-      if (key in item && item[key] !== obj[key]) {
-        isEqual = false
-        break
-      }
-    }
-
-    if (isEqual) {
-      return true
-    }
-  }
-
-  return false
-}
-
-export function getPlacementAnimationName(position: Placement): string {
-  const suffix = position.includes('-') ? position.split('-')[0] : position
-  return `fade-${suffix}`
-}

package/src/shared/slots.ts

@@ -1,61 +0,0 @@
-import type { ShallowRef, VNode } from 'vue'
-import { computed, Fragment, shallowRef, watchEffect } from 'vue'
-
-type VNodesProps<T extends object> = Array<VNode & { props: T }>
-
-/**
- * Flattens slot children and keeps them in sync reactively.
- * @param slotFn The slot function (e.g., slots.default)
- * @returns Computed array of flattened VNodes
- */
-export function useFlattenedSlot<T extends object>(slotFn?: () => VNode[] | undefined): ShallowRef<VNodesProps<T>> {
-  const rawChildren = shallowRef<VNodesProps<T>>([])
-
-  // Flatten VNodes recursively (handles Fragments)
-  function flatten(vnodes: VNode[]): VNodesProps<T> {
-    const result: VNode[] = []
-
-    const walk = (nodes: VNode[] | VNode | undefined): void => {
-      if (!nodes)
-        return
-
-      if (Array.isArray(nodes)) {
-        nodes.forEach(walk)
-      }
-      else if (nodes.type === Fragment || Array.isArray(nodes.children)) {
-        walk(nodes.children as VNode[])
-      }
-      else {
-        result.push(nodes)
-      }
-    }
-
-    walk(vnodes)
-    return result as VNodesProps<T>
-  }
-
-  // Re-compute children whenever slot content changes
-  watchEffect(() => {
-    const content = slotFn?.() ?? []
-    rawChildren.value = flatten(content)
-  })
-
-  return computed(() => rawChildren.value)
-}
-
-/**
- * Checks whether all of the provided VNodes are of the same type. Throws an
- * error if not. This function should be used in components that only allow a
- * single type of component
- *
- * @param vnodes Array of VNodes to check
- * @param name Expected name of the components
- */
-export function enforceSlotType(vnodes: ShallowRef<VNodesProps<any>>, name: string): void {
-  watchEffect(() => {
-    // @ts-expect-error Accessing internals
-    if (vnodes.value.some(item => item.type.__name !== name)) {
-      throw new Error(`You can only pass \`<${name} />\` components as children.`)
-    }
-  })
-}

package/src/shared/theme.ts

@@ -1,22 +0,0 @@
-import { useColorMode } from '@vueuse/core'
-import { readonly } from 'vue'
-
-export type VuiTheme = 'light' | 'dark' | 'auto'
-
-const themeImpl = useColorMode({
-  modes: {
-    dark: 'dark',
-    light: 'light',
-    // TODO: add black theme
-    // TODO: add high contrast light & dark theme
-  },
-})
-
-export const theme = readonly(themeImpl)
-
-export function setColorTheme(newTheme: VuiTheme): void {
-  if (newTheme === themeImpl.value)
-    return
-
-  themeImpl.value = newTheme
-}

package/src/shared/types.ts

@@ -1,29 +0,0 @@
-import type { ComponentPublicInstance } from 'vue'
-
-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>>
-
-// FLoating UI imported types were ruining the build so here we go
-export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined
-export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'
-
-export type Space = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
-export enum SpaceSize {
-  xxs = 'xxs',
-  xs = 'xs',
-  s = 's',
-  m = 'm',
-  l = 'l',
-  xl = 'xl',
-  xxl = 'xxl',
-  xxxl = 'xxxl',
-}

package/src/style/animation.scss

@@ -1,50 +0,0 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s cubic-bezier(0.65, 0, 0.35, 1);
-  will-change: opacity;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-// Positioned fade-ins
-
-// Defaults
-.fade-top-enter-active,
-.fade-top-leave-active,
-.fade-bottom-enter-active,
-.fade-bottom-leave-active,
-.fade-right-enter-active,
-.fade-right-leave-active,
-.fade-left-enter-active,
-.fade-left-leave-active {
-  transition: var(--transition);
-  transition-property: transform, opacity;
-}
-
-// Specifics
-.fade-top-enter-from,
-.fade-top-leave-to {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.fade-bottom-enter-from,
-.fade-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.fade-right-enter-from,
-.fade-right-leave-to {
-  opacity: 0;
-  transform: translateX(8px);
-}
-
-.fade-left-enter-from,
-.fade-left-leave-to {
-  opacity: 0;
-  transform: translateX(-8px);
-}

package/src/style/core.scss

@@ -1,133 +0,0 @@
-@use 'sass:meta';
-// 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';
-@use './theme.scss';
-
-:root {
-  color-scheme: dark;
-
-  --container-xs: 360px;
-  --container-s: 498px;
-  --container-m: 856px;
-  --container-l: 1140px;
-  --container-xl: 1540px;
-  --container-xxl: 1920px;
-
-  --border-radius-xs: 3px;
-  --border-radius-s: 5px;
-  --border-radius-m: 8px;
-  --border-radius-l: 12px;
-
-  --font-size-xxs: 1rem;
-  --font-size-xs: 1.15rem;
-  --font-size-s: 1.3rem;
-  --font-size-m: 1.5rem;
-  --font-size-l: 1.8rem;
-  --font-size-xl: 2rem;
-  --font-size-xxl: 2.6rem;
-  --font-size-xxxl: 3.4rem;
-  --font-size-xxxxl: 4.8rem;
-
-  --space-xxs: 4px;
-  --space-xs: 8px;
-  --space-s: 12px;
-  --space-m: 18px;
-  --space-l: 24px;
-  --space-xl: 34px;
-  --space-xxl: 48px;
-  --space-xxxl: 64px;
-
-  --transition-fast: 0.055s all ease-in-out;
-  --transition: 0.1s all cubic-bezier(0.65, 0, 0.35, 1);
-  --transition-slow: 0.25s all cubic-bezier(0.65, 0, 0.35, 1);
-
-  --global-font: 'Inter', sans-serif;
-  --global-font-mono: 'Geist Mono', 'Courier New', 'Courier', monospace;
-
-  --font-weight: 300;
-  --font-weight: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --font-weight-black: 900;
-
-  --line-height-tight: 1.125em;
-  --line-height-title: 1.25em;
-  --line-height-base: 1.4em;
-
-  --z-behind: -1;
-  --z-default: 1;
-  --z-active: 50;
-  --z-mask: 75;
-  --z-sticky: 100;
-  --z-nav: 200;
-  --z-overlay: 300;
-  --z-popout: 400;
-  --z-toast: 500;
-  --z-modal: 600;
-
-  --interactive-el-height: 36px;
-}
-
-// Disable motion for users who have requested it
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --transition-fast: 0s all linear;
-    --transition: 0s all linear;
-    --transition-slow: 0s all linear;
-  }
-}
-
-:root {
-  font-family: var(--global-font);
-  font-size: 63.5%;
-  position: relative;
-  background-color: var(--color-bg);
-
-  overflow-x: hidden;
-  width: 100%;
-  font-weight: var(--font-weight);
-
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  * {
-    -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);
-  min-height: 100dvh;
-}
-
-// Set base icon color
-.iconify {
-  color: var(--color-text-light);
-}
-
-@include meta.load-css('typography.scss');
-@include meta.load-css('layout.scss');
-@include meta.load-css('animation.scss');
-@include meta.load-css('tooltip.scss');
-@include meta.load-css('utils.scss');
-@include meta.load-css('text.scss');
-@include meta.load-css('media-query.scss');

package/src/style/fonts.scss

@@ -1,73 +0,0 @@
-// Regular
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url('/fonts/Inter_18pt-Light.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/fonts/Inter_18pt-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url('/fonts/Inter_18pt-Medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  src: url('/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/fonts/Inter_18pt-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  src: url('/fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 900;
-  src: url('/fonts/Inter_18pt-Black.ttf') format('truetype');
-}
-
-// Monospace
-@font-face {
-  font-display: swap;
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Geist Mono';
-  font-style: normal;
-  font-weight: 600;
-  src: url('/fonts/GeistMono-SemiBold.ttf') format('truetype');
-}