@dolanske/vui 0.1.0 → 0.1.2

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);
+}

package/src/style/media-query.scss

@@ -0,0 +1,29 @@
+// Mobile phones
+@media screen and (max-width: 572px) {
+  :root {
+    --space-xs: 5px;
+    --space-s: 8px;
+    --space-m: 12px;
+    --space-l: 20px;
+    --space-xl: 32px;
+    --space-xxl: 44px;
+  }
+
+  // Typography changes
+  h1 {
+    font-size: 3.2rem;
+  }
+
+  h2 {
+    font-size: 2.8rem;
+  }
+
+  h3 {
+    font-size: 2.2rem;
+  }
+
+  .vui-tabs .vui-tab {
+    font-size: var(--font-size-s);
+    padding: 0 var(--space-xs);
+  }
+}

package/src/style/reset.scss

@@ -0,0 +1,135 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+button {
+  border: none;
+  background-color: unset;
+  margin: 0;
+  font-family: var(--global-font);
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+}

package/src/style/tooltip.scss

@@ -0,0 +1,128 @@
+/*
+This is a trick in which you can add simply tooltips to an element without any additional html.
+Simple add data-title-_position_="Hello world" and hover the element.
+
+Available tooltip positions:
+*/
+
+[data-title-left],
+[data-title-right],
+[data-title-bottom],
+[data-title-bottom-left],
+[data-title-bottom-right],
+[data-title-top],
+[data-title-top-left],
+[data-title-top-right] {
+  position: relative;
+
+  &:before {
+    font-family: var(--global-font);
+    font-weight: 400;
+    background-color: var(--color-bg-raised);
+    color: var(--color-text);
+
+    font-size: var(--font-size-ms);
+    position: absolute;
+    padding: 4px 8px;
+    line-height: 1.3em;
+    border-radius: var(--border-radius-m);
+    transition: var(--transition);
+
+    max-width: 512px;
+    opacity: 0;
+    cursor: default;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &:hover {
+    &:before {
+      visibility: visible;
+      opacity: 1;
+      z-index: 99999;
+    }
+  }
+}
+
+[data-title-left]:before {
+  content: attr(data-title-left);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  right: calc(100% + 4px);
+}
+
+[data-title-right]:before {
+  content: attr(data-title-right);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  left: calc(100% + 4px);
+}
+
+[data-title-bottom]:before,
+[data-title-bottom-left]:before,
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom);
+  top: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-bottom-left]:before {
+  content: attr(data-title-bottom-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+[data-title-top]:before,
+[data-title-top-left]:before,
+[data-title-top-right]:before {
+  content: attr(data-title-top);
+  bottom: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-top-left]:before {
+  content: attr(data-title-top-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-top-right]:before {
+  content: attr(data-title-top-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+// Hover
+
+[data-title-left]:hover:before {
+  right: calc(100% + 10px);
+}
+
+[data-title-right]:hover:before {
+  left: calc(100% + 10px);
+}
+
+[data-title-top]:hover:before,
+[data-title-top-left]:hover:before,
+[data-title-top-right]:hover:before {
+  bottom: calc(100% + 10px);
+}
+
+[data-title-bottom]:hover:before,
+[data-title-bottom-left]:hover:before,
+[data-title-bottom-right]:hover:before {
+  top: calc(100% + 10px);
+}