@dolanske/vui 0.3.4 → 0.4.0

package/src/shared/helpers.ts

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

package/src/shared/types.ts

@@ -1,29 +1,29 @@
-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',
-}
+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,21 +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);
-}
+.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

@@ -1,148 +1,148 @@
-@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';
-
-: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: 2px;
-  --border-radius-s: 4px;
-  --border-radius-m: 8px;
-  --border-radius-l: 12px;
-
-  --font-size-xxs: 1rem;
-  --font-size-xs: 1.15rem;
-  --font-size-s: 1.3rem;
-  --font-size-ms: 1.45rem;
-  --font-size-m: 1.6rem;
-  --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.08s all ease-in-out;
-  --transition: 0.14s 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-lightest: rgb(65, 65, 65);
-  --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.4) 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.5));
-  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.4));
-
-  --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);
-  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('fonts.scss');
-
-@include meta.load-css('media-query.scss');
+@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';
+
+: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: 2px;
+  --border-radius-s: 4px;
+  --border-radius-m: 8px;
+  --border-radius-l: 12px;
+
+  --font-size-xxs: 1rem;
+  --font-size-xs: 1.15rem;
+  --font-size-s: 1.3rem;
+  --font-size-ms: 1.45rem;
+  --font-size-m: 1.6rem;
+  --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.15s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition: 0.2s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition-slow: 0.35s all cubic-bezier(0.65, 0, 0.35, 1);
+
+  --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-lightest: rgb(65, 65, 65);
+  --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.4) 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.5));
+  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.4));
+
+  --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);
+  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('fonts.scss');
+
+@include meta.load-css('media-query.scss');

package/src/style/fonts.scss

@@ -1,53 +1,53 @@
-$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
-
-@each $size in $sizes {
-  .text-#{$size} {
-    font-size: var(--font-size-#{$size});
-  }
-}
-
-.text-color {
-  color: var(--color-text);
-}
-
-.text-color-accent {
-  color: var(--color-accent);
-}
-
-$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
-
-@each $color in $colors {
-  .text-color-#{$color} {
-    color: var(--color-text-#{$color});
-  }
-}
-
-// Font weights
-
-.text-light {
-  font-weight: 300;
-}
-
-.text-regular {
-  font-weight: 400;
-}
-
-.text-medium {
-  font-weight: 500;
-}
-
-.text-semibold {
-  font-weight: 600;
-}
-
-.text-bold {
-  font-weight: 700;
-}
-
-.text-extra-bold {
-  font-weight: 800;
-}
-
-.text-black {
-  font-weight: 900;
-}
+$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
+
+@each $size in $sizes {
+  .text-#{$size} {
+    font-size: var(--font-size-#{$size});
+  }
+}
+
+.text-color {
+  color: var(--color-text);
+}
+
+.text-color-accent {
+  color: var(--color-accent);
+}
+
+$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
+
+@each $color in $colors {
+  .text-color-#{$color} {
+    color: var(--color-text-#{$color});
+  }
+}
+
+// Font weights
+
+.text-light {
+  font-weight: 300;
+}
+
+.text-regular {
+  font-weight: 400;
+}
+
+.text-medium {
+  font-weight: 500;
+}
+
+.text-semibold {
+  font-weight: 600;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.text-extra-bold {
+  font-weight: 800;
+}
+
+.text-black {
+  font-weight: 900;
+}