@dolanske/vui 1.0.1 → 1.0.3

package/src/index.ts

@@ -1,116 +1,116 @@
-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 './index.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,
-}
+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 './index.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 +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>
+<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 +1,34 @@
-: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.75;
-  }
-}
-
-html:has(.vui-backdrop) {
-  overflow: hidden;
-}
-
-:root.light {
-  .vui-backdrop:after {
-    background-color: var(--dark-color-bg);
-  }
-}
+: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.75;
+  }
+}
+
+html:has(.vui-backdrop) {
+  overflow: hidden;
+}
+
+:root.light {
+  .vui-backdrop:after {
+    background-color: var(--dark-color-bg);
+  }
+}

package/src/main.ts

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

package/src/shared/helpers.ts

@@ -1,117 +1,117 @@
-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 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
+}

package/src/shared/theme.ts

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