@dolanske/vui 0.4.0 → 1.0.0

package/src/examples/ExampleTabs.vue

@@ -0,0 +1,119 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Tab from '../components/Tabs/Tab.vue'
+import Tabs from '../components/Tabs/Tabs.vue'
+
+const activeTab = ref('Home')
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tabs
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Tabs v-model="activeTab">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr class="w-100">
+          <th>Expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab">
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleToasts.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { defineComponent, h, markRaw } from 'vue'
+import Button from '../components/Button/Button.vue'
+import { pushToast, removeToast } from '../components/Toast/toast'
+import Toasts from '../components/Toast/Toasts.vue'
+
+const testBody = markRaw(defineComponent((props) => {
+  return () => h('h2', `${props.data.title} ${props.toastId}`)
+}, {
+  props: {
+    data: Object,
+    toastId: Number,
+  },
+}))
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Toasts
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Button @click="pushToast('Hello')">
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ Description</th>
+          <td>
+            <Button @click="pushToast('Hello', { description: 'Lorem ipsum dolor sit amet and others stuff but I never learned it past that.' })">
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ Action</th>
+          <td>
+            <Button
+              @click="pushToast('Hello', {
+                action: {
+                  label: 'Close',
+                  handler: (id) => {
+                    removeToast(id)
+                  },
+                },
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ persist</th>
+          <td>
+            <Button
+              @click="pushToast('Read the description!!', {
+                description: 'So when you add an action, the handler exposes the ID of the toast. And you can then manually remove it. This toast will also stay up until you close it. It persists!!',
+                action: {
+                  label: 'Close',
+                  handler: (id) => {
+                    removeToast(id)
+                  },
+                },
+                persist: true,
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom body</th>
+          <td>
+            <Button
+              @click="pushToast('uhhh', {
+                bodyProps: {
+                  title: 'Bro im a custom component and my id is',
+                },
+                body: testBody,
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <Toasts />
+  </div>
+</template>

package/src/examples/ExampleTooltips.vue

@@ -0,0 +1,70 @@
+<script setup lang='ts'>
+import Flex from '../components/Flex/Flex.vue'
+import Tooltip from '../components/Tooltip/Tooltip.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tooltips
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Tooltip>
+              <span>Hover me</span>
+              <template #tooltip>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam minus labore commodi aliquid molestiae non voluptas, veritatis nesciunt. Nihil quod necessitatibus veritatis nam enim eius deleniti unde recusandae reprehenderit voluptate?</p>
+              </template>
+            </Tooltip>
+          </td>
+        </tr>
+        <tr>
+          <th>Hover delay</th>
+          <td>
+            <Tooltip :delay="500">
+              <span>Hover me</span>
+              <template #tooltip>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+              </template>
+            </Tooltip>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom placement</th>
+          <td>
+            <Flex>
+              <Tooltip placement="top">
+                <span>Above</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="right">
+                <span>Right</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="left">
+                <span>Left</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="bottom">
+                <span>Bottom</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/shared/ExampleColor.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import Grid from '../../components/Grid/Grid.vue'
+
+const props = defineProps<{
+  name: string
+  color: string
+}>()
+</script>
+
+<template>
+  <Grid columns="212px 32px" align-center>
+    <span>{{ props.name }}</span>
+    <div
+      class="cube" :style="{
+        backgroundColor: `var(${props.color})`,
+      }"
+    />
+  </Grid>
+</template>
+
+<style scoped>
+.cube {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius-xs);
+}
+</style>

package/src/index.ts

@@ -41,13 +41,8 @@ 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 * as Table from './components/Table'
 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'
 import { pushToast, removeToast } from './components/Toast/toast'
@@ -55,6 +50,7 @@ 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 {
@@ -70,7 +66,6 @@ export {
   ButtonGroup,
   Calendar,
   Card,
-  Cell,
   Checkbox,
   Confirm,
   CopyClipboard,
@@ -85,7 +80,6 @@ export {
   File,
   Flex,
   Grid,
-  Header,
   Input,
   Kbd,
   KbdGroup,
@@ -101,11 +95,9 @@ export {
   Radio,
   RadioGroup,
   removeToast,
-  Row,
   searchString,
   Select,
-  SelectAll,
-  SelectRow,
+  setColorTheme,
   Sheet,
   Skeleton,
   Spinner,
@@ -114,6 +106,7 @@ export {
   Table,
   Tabs,
   Textarea,
+  theme,
   Toasts,
   Tooltip,
 }

package/src/internal/Backdrop/backdrop.scss

@@ -19,10 +19,16 @@
     z-index: -1;
     inset: 0;
     background-color: var(--color-bg-lowered);
-    opacity: 0.9;
+    opacity: 0.75;
   }
 }
 
 html:has(.vui-backdrop) {
   overflow: hidden;
 }
+
+:root.light {
+  .vui-backdrop:after {
+    background-color: var(--dark-color-bg);
+  }
+}

package/src/shared/helpers.ts

@@ -42,6 +42,13 @@ 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)
@@ -72,3 +79,39 @@ export function formatUnitValue(value: string | number, unit: string = 'px'): st
       ? 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

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

package/src/style/animation.scss

@@ -1,6 +1,7 @@
 .fade-enter-active,
 .fade-leave-active {
   transition: var(--transition);
+  will-change: opacity;
 }
 
 .fade-enter-from,

package/src/style/core.scss

@@ -5,8 +5,9 @@
 // To overwrite any of these styles, simply create a style file and import it
 // after this one
 @use './reset.scss';
-@use './fonts.scss';
+@use './theme.scss';
 
+// TODO: Split this into based on media query prefers-dark-mode
 :root {
   color-scheme: dark;
 
@@ -17,16 +18,16 @@
   --container-xl: 1540px;
   --container-xxl: 1920px;
 
-  --border-radius-xs: 2px;
-  --border-radius-s: 4px;
+  --border-radius-xs: 3px;
+  --border-radius-s: 5px;
   --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-m: 1.45rem;
+  --font-size-m: 1.5rem;
   --font-size-l: 1.8rem;
   --font-size-xl: 2rem;
   --font-size-xxl: 2.6rem;
@@ -42,70 +43,47 @@
   --space-xxl: 48px;
   --space-xxxl: 64px;
 
-  --transition-fast: 0.15s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition-fast: 0.1s all ease-in-out;
   --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: Inter, sans-serif;
   --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
+
+  --font-weight-thin: 200;
+  --font-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 700;
+  --font-weight-black: 900;
+
+  --interactive-el-height: 34px;
+}
+
+@media (prefers-color-scheme: dark) {
+}
+
+// Disable motion for users who have requested it
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-fast: 0s all linear;
+    --transition: 0s all linear;
+    --transition-slow: 0s all linear;
+  }
 }
 
 :root {
   font-family: var(--global-font);
   font-size: 63.5%;
-  // TODO remove
+  // TODO remove - should remove?
   position: relative;
   background-color: var(--color-bg);
 
   overflow-x: hidden;
   width: 100%;
+  font-weight: var(--font-weight);
 
   font-feature-settings: normal;
   font-variation-settings: normal;
@@ -143,6 +121,5 @@ body {
 @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('text.scss');
 @include meta.load-css('media-query.scss');