@dolanske/vui 0.2.0 → 0.3.1

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/types.ts

@@ -15,3 +15,15 @@ export type VueClass = string | Record<string, | boolean> | Array<string | Recor
 // 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,32 +8,39 @@
 @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-fast: 0.08s all ease-in-out;
   --transition: 0.14s all ease-in-out;
   --transition-slow: 0.3s all ease-in-out;
 
@@ -43,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);
@@ -74,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);
@@ -122,10 +131,16 @@ body {
   min-height: 100dvh;
 }
 
-@import './typography.scss';
-@import './layout.scss';
-@import './animation.scss';
-@import './tooltip.scss';
-@import './utils.scss';
+// 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');
 
-@import './media-query.scss';
+@include meta.load-css('media-query.scss');

package/src/style/fonts.scss

@@ -0,0 +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;
+}

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,8 +7,130 @@
   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%;
+  }
+}
+
+// Layout
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+// 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});
+  }
 }
 
-.flex-1 {
-  flex: 1;
+// Z-index
+$zindexes: 0, 10, 20, 30, 40, 50, auto;
+
+@each $zindex in $zindexes {
+  .z-#{$zindex} {
+    z-index: $zindex;
+  }
 }

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);
 }
 
@@ -223,7 +223,6 @@ dl {
 article,
 .typeset {
   width: 100%;
-  // overflow: hidden;
 
   ol,
   ul {
@@ -236,7 +235,7 @@ article,
       margin-bottom: var(--space-m);
       font-size: var(--font-size-m);
       position: relative;
-      padding-left: 32px;
+      padding-left: 28px;
 
       & > ul {
         margin-top: 0;
@@ -245,7 +244,7 @@ article,
       &:before {
         content: '';
         position: absolute;
-        top: 3px;
+        top: 5px;
         left: 12px;
       }
 
@@ -261,7 +260,7 @@ article,
         width: 6px;
         height: 6px;
         border-radius: 100%;
-        background-color: var(--color-text-light);
+        background-color: var(--color-text-lighter);
       }
     }
   }
@@ -327,7 +326,7 @@ article,
 
   figure {
     img {
-      margin-bottom: 8px;
+      margin-bottom: var(--space-xs);
     }
 
     figcaption {

package/src/style/utils.scss

@@ -20,3 +20,17 @@ 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;
+  padding-inline: 4px;
+}

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'
-    }
-  })
-}