@dolanske/vui 0.4.0 → 1.0.0

package/src/examples/ExampleSheets.vue

@@ -0,0 +1,77 @@
+<script setup lang='ts'>
+import type { SelectOption } from '../components/Select/Select.vue'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Input from '../components/Input/Input.vue'
+import Select from '../components/Select/Select.vue'
+import Sheet from '../components/Sheet/Sheet.vue'
+
+const open1 = ref()
+const open2 = ref()
+const width = ref(328)
+const options: SelectOption[] = [{ value: 'left', label: 'Left' }, { value: 'right', label: ' Right' }, { value: 'top', label: 'Top' }, { value: 'bottom', label: 'Bottom' }]
+const option = ref([options[0]])
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Sheets
+    </h3>
+
+    <Select v-model="option" expand label="Position" :options class="mb-l" required />
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base + divider + footer</th>
+          <td>
+            <Flex gap="m" justify-start>
+              <Button @click="open1 = !open1">
+                Open
+              </Button>
+              <Sheet v-model="open1" :position="option[0].value" separator>
+                <template #header>
+                  <h2>Hello </h2>
+                </template>
+                <h2 class="text-color-lighter">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias consectetur obcaecati recusandae debitis voluptatum exercitationem. Nam facilis laudantium labore sint cum, veritatis autem asperiores consectetur possimus cumque beatae eveniet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem quod quisquam laborum sed excepturi, eum nisi nostrum, totam nihil magni voluptatum rerum culpa voluptatibus velit, sapiente fuga similique eius?
+                </h2>
+                <template #footer="{ close }">
+                  <p class="mb-s">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis placeat nisi, in velit temporibus at esse error et iusto vero odit illo veritatis rem cum delectus autem minus quod reiciendis.
+                  </p>
+                  <Button @click="close">
+                    Close
+                  </Button>
+                </template>
+              </Sheet>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Width</th>
+          <td>
+            <Flex gap="m" justify-start align-center>
+              <Input v-model="width">
+                <template #start>
+                  Width
+                </template>
+              </Input>
+              <Button @click="open2 = !open2">
+                Open
+              </Button>
+              <Sheet v-model="open2" :position="option[0].value" :size="width">
+                <template #header>
+                  <h2>Hello </h2>
+                </template>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias consectetur obcaecati recusandae debitis voluptatum exercitationem. Nam facilis laudantium labore sint cum, veritatis autem asperiores consectetur possimus cumque beatae eveniet.</p>
+              </Sheet>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleSidebars.vue

@@ -0,0 +1,270 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import Avatar from '../components/Avatar/Avatar.vue'
+import Button from '../components/Button/Button.vue'
+import DropdownItem from '../components/Dropdown/DropdownItem.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+import Sidebar from '../components/Sidebar/Sidebar.vue'
+
+const s1 = ref(true)
+const s2 = ref(true)
+const s3 = ref(true)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Sidebars
+    </h3>
+
+    <Grid :columns="2" gap="xl">
+      <div>
+        <span class="mb-m block">Base + slots</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+                <h3>ABC</h3>
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer>
+              <Flex align-center>
+                <Avatar size="m" />
+                <span class="flex-1">dolanske</span>
+                <Button plain size="s" icon="ph:sign-out" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>My page</h4>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+            <hr>
+            <p>Yes that's correct</p>
+            <ul>
+              <li>Secure</li>
+              <li>Reliant</li>
+              <li>Ublumf</li>
+            </ul>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Toggleable + floaty</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s1" floaty>
+            <template #header="{ close }">
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+                <h3 class="flex-1">
+                  ABC
+                </h3>
+                <Button plain size="s" icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Outside
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About You
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              No contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s1 = !s1" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Mini </span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s2" mini>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer="{ close }">
+              <Flex justify-center>
+                <Button plain icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s2 = !s2" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Mini & floaty </span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar v-model="s3" mini floaty>
+            <template #header>
+              <Flex align-center>
+                <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+              </Flex>
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+
+            <template #footer="{ close }">
+              <Flex justify-center>
+                <Button plain icon="ph:x" @click="close" />
+              </Flex>
+            </template>
+          </Sidebar>
+          <main class="p-l">
+            <Flex align-center class="mb-m">
+              <Button plain size="s" icon="ph:sidebar-simple" @click="s3 = !s3" />
+              <h4>
+                My page
+              </h4>
+            </Flex>
+
+            <div class="typeset">
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque deleniti asperiores quibusdam et commodi deserunt libero officia doloremque. Possimus ipsum sunt odit culpa consequatur hic reiciendis doloremque consequuntur tempore excepturi?</p>
+              <hr>
+              <p>Yes that's correct</p>
+              <ul>
+                <li>Secure</li>
+                <li>Reliant</li>
+                <li>Ublumf</li>
+              </ul>
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Appear + custom width</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar appear :width="300">
+            <template #header>
+              <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>
+              Appear sidebar
+            </h4>
+            <p>This sidebar will appear automatically whenever the curosor is close to the edge of the sidebar wrapper.</p>
+          </main>
+        </div>
+      </div>
+
+      <div>
+        <span class="mb-m block">Appear + mini + floaty</span>
+        <div class="vui-sidebar-layout" :style="{ height: '512px' }">
+          <Sidebar appear mini floaty>
+            <template #header>
+              <img src="https://dolansky.dev/backgrounds/star.png" class="sidebar-logo" width="40" alt="">
+            </template>
+            <DropdownItem icon="ph:house">
+              Home
+            </DropdownItem>
+            <DropdownItem icon="ph:user">
+              About
+            </DropdownItem>
+            <DropdownItem icon="ph:phone">
+              Contact
+            </DropdownItem>
+          </Sidebar>
+          <main class="p-l typeset">
+            <h4>
+              Appear sidebar
+            </h4>
+            <p>This sidebar will appear automatically whenever the curosor is close to the edge of the sidebar wrapper.</p>
+          </main>
+        </div>
+      </div>
+    </Grid>
+  </div>
+</template>
+
+<style scoped>
+.vui-sidebar-layout {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-m);
+  overflow: hidden;
+}
+
+html.dark {
+  .sidebar-logo {
+    filter: invert() !important;
+  }
+}
+</style>

package/src/examples/ExampleSkeletons.vue

@@ -0,0 +1,26 @@
+<script setup lang='ts'>
+import Flex from '../components/Flex/Flex.vue'
+import Skeleton from '../components/Skeleton/Skeleton.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Skeletons
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>No defaults <br> Width, height, roundness must be specified</th>
+          <td>
+            <Flex gap="s">
+              <Skeleton :width="80" :height="48" :radius="8" />
+              <Skeleton :width="48" :height="48" :radius="8" />
+              <Skeleton :width="48" circle />
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleSpinners.vue

@@ -0,0 +1,78 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Checkbox from '../components/Checkbox/Checkbox.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Progress from '../components/Progress/Progress.vue'
+import Spinner from '../components/Spinner/Spinner.vue'
+
+const paused = ref(true)
+const progress = ref(25)
+
+const fakeProgress = ref(15)
+const showFixed = ref(false)
+const variants = ['s', 'm', 'l'] as const
+
+watch(paused, () => fakeProgress.value = 0)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l flex g-m y-center">
+      Loading
+      <Button square :icon="paused ? 'ph:play' : 'ph:pause'" size="s" plain @click="paused = !paused" />
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Spinners</th>
+          <td>
+            <Flex
+              gap="l" :style="{
+                'animation-play-state': 'paused',
+              }"
+            >
+              <Spinner
+                v-for="size in variants" :key="size" :size :style="{
+                  'animation-play-state': paused ? 'paused' : 'running',
+                }"
+              />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Progress bar</th>
+          <td class="w-80">
+            <Flex gap="s" align-center>
+              <Button square icon="ph:minus" size="s" @click="progress -= 5" />
+              <Progress v-model="progress" class="w-full" />
+              <Button square icon="ph:plus" size="s" @click="progress += 5" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Progress bar tall</th>
+          <td class="w-80">
+            <Flex gap="s" align-center>
+              <Progress v-model="progress" :height="8" class="w-full" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Fake</th>
+          <td>
+            <Progress v-model="fakeProgress" :fake="!paused" />
+          </td>
+        </tr>
+        <tr>
+          <th>Fixed</th>
+          <td>
+            <Checkbox v-model="showFixed" label="Show fixed progress bar (look up)" />
+
+            <Progress v-if="showFixed" v-model="fakeProgress" :fake="!paused" fixed />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

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>