@dolanske/vui 0.5.0 → 1.0.0

package/src/examples/ExampleTables.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue'
+import Accordion from '../components/Accordion/Accordion.vue'
+import Divider from '../components/Divider/Divider.vue'
+import { paginate } from '../components/Pagination/pagination'
+import Pagination from '../components/Pagination/Pagination.vue'
+import * as Table from '../components/Table/index'
+import { defineTable } from '../components/Table/table'
+
+interface Item {
+  'ID Nation': string
+  'ID Year': number
+  'Nation': string
+  'Population': number
+  'Slug Nation': string
+  'Year': string
+}
+
+interface StrippedItem {
+  Nation: string
+  Population: number
+  Year: string
+}
+
+const data = ref<StrippedItem[]>([])
+
+onBeforeMount(async () => {
+  data.value = await fetch('https://datausa.io/api/data?drilldowns=Nation&measures=Population')
+    .then(response => response.json())
+    .then(({ data }: { data: Item[] }) => {
+      return data.map(row => ({
+        Nation: row.Nation,
+        Population: row.Population,
+        Year: row.Year,
+      }))
+    })
+})
+
+const {
+  rows,
+  headers,
+  pagination,
+  allRows,
+  setPage,
+  selectedRows,
+} = defineTable(data, {
+  pagination: {
+    enabled: true,
+    perPage: 3,
+  },
+  select: true,
+})
+
+// Example
+//
+const testData = ['Jan', 'Andrew', 'Kasper', 'Anton', 'Felix', 'Daniel', 'Gabriel', 'Ayalga', 'Floris']
+const page = ref(1)
+const paginationExample = computed(() => paginate(testData.length, page.value, 2))
+const exampleToRender = computed(() => testData.slice(paginationExample.value.startIndex, paginationExample.value.endIndex + 1))
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tables
+    </h3>
+
+    <p class="mb-l">
+      This library has two way to define tables. By default, you can use the classic <code>table</code> element and compose simple tables. <br> Or you can go overkill with the  <code>{{ `<Table />` }}</code> component, which comes with its own composable function
+    </p>
+
+    <strong class="mb-s block">Simple vertical table</strong>
+
+    <table class="mb-l">
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+          <th>Three</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>First </td>
+          <td>Second</td>
+          <td>Third</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <strong class="mb-s block">Simple horizontal table</strong>
+
+    <table class="mb-xxl">
+      <tbody>
+        <tr>
+          <th>One</th>
+          <td>First</td>
+        </tr>
+        <tr>
+          <th>Two</th>
+          <td>Second</td>
+        </tr>
+        <tr>
+          <th>Three</th>
+          <td>Third</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h5 class="mb-s">
+      Data table
+    </h5>
+
+    <p class="mb-s">
+      This example demonstrates the full capability of the table component. Including column sorting, pagination and row selection.
+    </p>
+
+    <Table.Root separate-cells class="mb-l">
+      <template #header>
+        <Table.SelectAll />
+        <Table.Head v-for="header in headers" :key="header.label" :header sort />
+      </template>
+      <template #body>
+        <tr v-for="row in rows" :key="row.Year">
+          <Table.SelectRow :row />
+          <Table.Cell>{{ row.Nation }}</Table.Cell>
+          <Table.Cell>{{ row.Population }}</Table.Cell>
+          <Table.Cell>{{ row.Year }}</Table.Cell>
+        </tr>
+      </template>
+      <template #pagination>
+        <Pagination :pagination :first-last="false" @change="setPage" />
+      </template>
+    </Table.Root>
+
+    <Accordion :label="`Selected rows (${selectedRows.size})`" class="mb-xl">
+      <pre>
+        {{ selectedRows }}
+      </pre>
+    </Accordion>
+
+    <h5 class="mb-s">
+      Variations
+    </h5>
+
+    <div class="typeset mb-xl">
+      <ul>
+        <li><p><code>separate-rows</code> Adds a border between rows (default: <code>true</code>)</p></li>
+        <li><p><code>separate-cells</code> Adds a border between cells (default: <code>false</code>)</p></li>
+        <li><p><code>outer-border</code> Adds a border around the entire table component (default: <code>true</code>)</p></li>
+        <li><p><code>nowrap</code> Adds ellipsis to text which overflows to keep row size consistent (default: <code>false</code>)</p></li>
+        <li><p><code>fixed</code> Keeps all the columns the same size (default: <code>false</code>)</p></li>
+      </ul>
+    </div>
+
+    <div class="container container-s mb-xxl ml-0">
+      <Table.Root :outer-border="false" :separate-cells="true" nowrap fixed>
+        <template #body>
+          <tr v-for="row in allRows" :key="row.Year">
+            <Table.Cell>{{ `${row.Nation} ${row.Nation}` }}</Table.Cell>
+            <Table.Cell>{{ row.Population }}</Table.Cell>
+            <Table.Cell>{{ row.Year }}</Table.Cell>
+          </tr>
+        </template>
+      </Table.Root>
+    </div>
+
+    <h5 class="mb-s">
+      Pagination
+    </h5>
+
+    <p class="mb-m">
+      Pagination does not need to be used with table only. The calculation of pages is done via an external function and the pagination component accepts all the necesary props to implement it for any kind of dataset and UI
+    </p>
+
+    <p class="mb-m">
+      Here we have a list of names and we're gonna paginate through them:<br><br> {{ testData.join(', ') }}
+    </p>
+    <Pagination :pagination="paginationExample" @change="(num) => page = num" />
+    <div class="typeset">
+      <ul>
+        <li
+          v-for="name in exampleToRender"
+          :key="name"
+        >
+          {{ name }}
+        </li>
+      </ul>
+    </div>
+
+    <Divider :size="40" class="w-40" />
+
+    <p>The <code>defineTable</code> hook can also be used with other UI components. Not just tables. That's why all the table interactivity is not within the component, but in a hook. It's very flexible and allows custom functionality.</p>
+  </div>
+</template>

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,