@dolanske/vui 0.1.5 → 0.3.0

package/src/index.ts

@@ -30,6 +30,7 @@ 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'
@@ -45,6 +46,7 @@ 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 { defineTable } from './components/Table/table'
 import Table from './components/Table/Table.vue'
 import Tab from './components/Tabs/Tab.vue'
 import Tabs from './components/Tabs/Tabs.vue'
@@ -73,6 +75,7 @@ export {
   Confirm,
   CopyClipboard,
   Counter,
+  defineTable,
   Divider,
   Drawer,
   Dropdown,
@@ -89,6 +92,7 @@ export {
   Modal,
   OTP,
   OTPItem,
+  paginate,
   Pagination,
   Password,
   Popout,

package/src/shared/helpers.ts

@@ -57,3 +57,18 @@ export function setCharAt(str: string, char: string | number, index: number): st
     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,3 +1,5 @@
+import type { ComponentPublicInstance } from 'vue'
+
 export enum Size {
   s = 's',
   m = 'm',
@@ -9,3 +11,19 @@ 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/core.scss

@@ -1,3 +1,4 @@
+@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
 
@@ -7,31 +8,40 @@
 @use './fonts.scss';
 
 :root {
+  --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.65rem;
+  --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: 26px;
-  --space-xl: 40px;
-  --space-xxl: 52px;
+  --space-l: 24px;
+  --space-xl: 34px;
+  --space-xxl: 48px;
+  --space-xxxl: 64px;
 
-  --transition-quick: 0.08s all ease-in-out;
-  --transition: 0.1s all ease-in-out;
+  --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);
@@ -41,6 +51,7 @@
   --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);
@@ -72,10 +83,10 @@
   --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-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.6));
-  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.5));
+  --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);
@@ -117,12 +128,14 @@
 
 body {
   color: var(--color-text);
+  min-height: 100dvh;
 }
 
-@import './typography.scss';
-@import './layout.scss';
-@import './animation.scss';
-@import './tooltip.scss';
-@import './utils.scss';
+@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');
 
-@import './media-query.scss';
+@include meta.load-css('media-query.scss');

package/src/style/fonts.scss

@@ -0,0 +1,23 @@
+$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} {
+    font-size: var(--color-text-#{$color});
+  }
+}

package/src/style/layout.scss

@@ -1,4 +1,5 @@
-// Contains basic layout definitions and classes to compose basic layouts
+// Container layout styling
+$containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
 
 .container {
   display: block;
@@ -6,4 +7,135 @@
   width: 100%;
   padding-inline: var(--space-m);
   max-width: var(--container-l);
+
+  @each $container in $containers {
+    &.container-#{$container} {
+      max-width: var(--container-#{$container});
+    }
+  }
+
+  &.container-full {
+    max-width: 100%;
+  }
+}
+
+// Sizes
+
+// Paddings & margins
+
+.mx-auto {
+  margin-inline: auto;
+}
+
+.my-auto {
+  margin-block: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+// Generate layout classes from size styles
+$sizes: 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
+
+@each $size in $sizes {
+  // Margin
+  .mb-#{$size} {
+    margin-bottom: var(--space-#{$size});
+  }
+
+  .mr-#{$size} {
+    margin-right: var(--space-#{$size});
+  }
+
+  .ml-#{$size} {
+    margin-left: var(--space-#{$size});
+  }
+
+  .mt-#{$size} {
+    margin-top: var(--space-#{$size});
+  }
+
+  .mx-#{$size} {
+    margin-inline: var(--space-#{$size});
+  }
+
+  .my-#{$size} {
+    margin-block: var(--space-#{$size});
+  }
+
+  .m-#{$size} {
+    margin: var(--space-#{$size});
+  }
+
+  // Padding
+  .pb-#{$size} {
+    padding-bottom: var(--space-#{$size});
+  }
+
+  .pr-#{$size} {
+    padding-right: var(--space-#{$size});
+  }
+
+  .pl-#{$size} {
+    padding-left: var(--space-#{$size});
+  }
+
+  .pt-#{$size} {
+    padding-top: var(--space-#{$size});
+  }
+
+  .px-#{$size} {
+    padding-inline: var(--space-#{$size});
+  }
+
+  .py-#{$size} {
+    padding-block: var(--space-#{$size});
+  }
+
+  .p-#{$size} {
+    padding: var(--space-#{$size});
+  }
+
+  // Gap
+  .g-#{$size} {
+    gap: var(--space-#{$size});
+  }
+
+  .g-y-#{$size} {
+    row-gap: var(--space-#{$size});
+  }
+
+  .g-x-#{$size} {
+    column-gap: var(--space-#{$size});
+  }
+}
+
+// Z-index
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-auto {
+  z-index: auto;
 }

package/src/style/typography.scss

@@ -15,27 +15,27 @@ h6 {
 }
 
 h1 {
-  font-size: 5rem;
+  font-size: var(--font-size-xxxxl);
 }
 
 h2 {
-  font-size: 3.5rem;
+  font-size: var(--font-size-xxxl);
 }
 
 h3 {
-  font-size: 2.6rem;
+  font-size: var(--font-size-xxl);
 }
 
 h4 {
-  font-size: 2rem;
+  font-size: var(--font-size-xl);
 }
 
 h5 {
-  font-size: 1.8rem;
+  font-size: var(--font-size-l);
 }
 
 h6 {
-  font-size: 1.6rem;
+  font-size: var(--font-size-m);
 }
 
 figcaption,
@@ -62,7 +62,7 @@ p {
   }
 
   code {
-    border-radius: 2px;
+    border-radius: var(--border-radius-xs);
     background-color: var(--color-bg-raised);
     color: var(--color-text);
     border: 1px solid var(--color-border);
@@ -96,7 +96,7 @@ p {
 blockquote {
   display: block;
   padding-block: var(--space-s);
-  padding-left: 24px;
+  padding-left: var(--space-l);
   border-left: 3px solid var(--color-border);
 }
 
@@ -327,7 +327,7 @@ article,
 
   figure {
     img {
-      margin-bottom: 8px;
+      margin-bottom: var(--space-xs);
     }
 
     figcaption {

package/src/style/utils.scss

@@ -20,3 +20,16 @@ mark {
   padding: 1px;
   border-radius: 2px;
 }
+
+.counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  font-size: var(--font-size-xs);
+  color: var(--color-text);
+  background-color: var(--color-button-gray-hover);
+  font-weight: 400;
+}

package/dist/shared/composables.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue';
-import { Sizes } from './types';
-export declare function useActualGap(gap?: Sizes | number): ComputedRef<string>;

package/src/shared/composables.ts

@@ -1,18 +0,0 @@
-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'
-    }
-  })
-}