@dolanske/vui 1.4.1 → 1.4.3

package/src/examples/ExampleTables.vue

@@ -1,359 +0,0 @@
-<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'
-import Tooltip from '../components/Tooltip/Tooltip.vue'
-
-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>
-
-    <Divider :size="40" />
-
-    <h5 class="mb-s">
-      Responsitivity
-    </h5>
-
-    <p class="mb-m">
-      Table can be made responsible if they overflow their width and are wrapped in a <code>.vui-table-container</code> element.
-    </p>
-
-    <div class="container container-m">
-      <div class="vui-table-overflow">
-        <table>
-          <thead>
-            <tr>
-              <th>
-                <Tooltip placement="top">
-                  ID
-                  <template #tooltip>
-                    <p>ID</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Name
-                  <template #tooltip>
-                    <p>Name</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Email
-                  <template #tooltip>
-                    <p>Email</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Phone
-                  <template #tooltip>
-                    <p>Phone</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Address
-                  <template #tooltip>
-                    <p>Address</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  City
-                  <template #tooltip>
-                    <p>City</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  State
-                  <template #tooltip>
-                    <p>State</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Zip
-                  <template #tooltip>
-                    <p>Zip</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Country
-                  <template #tooltip>
-                    <p>Country</p>
-                  </template>
-                </Tooltip>
-              </th>
-              <th>
-                <Tooltip placement="top">
-                  Status
-                  <template #tooltip>
-                    <p>Status</p>
-                  </template>
-                </Tooltip>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>001</td>
-              <td>John Doe</td>
-              <td>john.doe@example.com</td>
-              <td>(555) 123-4567</td>
-              <td>123 Main St</td>
-              <td>New York</td>
-              <td>NY</td>
-              <td>10001</td>
-              <td>USA</td>
-              <td>Active</td>
-            </tr>
-            <tr>
-              <td>002</td>
-              <td>Jane Smith</td>
-              <td>jane.smith@example.com</td>
-              <td>(555) 987-6543</td>
-              <td>456 Oak Ave</td>
-              <td>Los Angeles</td>
-              <td>CA</td>
-              <td>90001</td>
-              <td>USA</td>
-              <td>Inactive</td>
-            </tr>
-            <tr>
-              <td>003</td>
-              <td>Robert Johnson</td>
-              <td>robert.j@example.com</td>
-              <td>(555) 456-7890</td>
-              <td>789 Pine Blvd</td>
-              <td>Chicago</td>
-              <td>IL</td>
-              <td>60601</td>
-              <td>USA</td>
-              <td>Active</td>
-            </tr>
-            <tr>
-              <td>004</td>
-              <td>Emily Davis</td>
-              <td>emily.d@example.com</td>
-              <td>(555) 234-5678</td>
-              <td>321 Cedar Ln</td>
-              <td>Houston</td>
-              <td>TX</td>
-              <td>77001</td>
-              <td>USA</td>
-              <td>Pending</td>
-            </tr>
-            <tr>
-              <td>005</td>
-              <td>Michael Wilson</td>
-              <td>michael.w@example.com</td>
-              <td>(555) 876-5432</td>
-              <td>654 Maple Dr</td>
-              <td>Miami</td>
-              <td>FL</td>
-              <td>33101</td>
-              <td>USA</td>
-              <td>Active</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>

package/src/examples/ExampleTabs.vue

@@ -1,142 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Tab from '../components/Tabs/Tab.vue'
-import Tabs from '../components/Tabs/Tabs.vue'
-// import Flex from '../components/Flex/Flex.vue'
-
-const activeTab = ref('Home')
-const noActiveNow = ref('')
-
-// Dynamic test
-const dynamicTabs = ref(['First', 'Second', 'Third'])
-const activeDynamic = ref(dynamicTabs.value[0])
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Tabs
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base + nothing active at first</th>
-          <td>
-            <Tabs v-model="noActiveNow">
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-            </Tabs>
-          </td>
-        </tr>
-        <tr>
-          <th>Filled</th>
-          <td>
-            <Tabs v-model="activeTab" variant="filled">
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-            </Tabs>
-          </td>
-        </tr>
-        <tr class="w-100">
-          <th>Expanded</th>
-          <td class="w-100">
-            <Tabs v-model="activeTab" expand>
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" expand variant="filled">
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="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 value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" variant="filled">
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="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 value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" expand variant="filled">
-              <Tab value="Home" />
-              <Tab value="About" />
-              <Tab value="You" />
-
-              <template #end>
-                <Button icon="ph:x" plain />
-              </template>
-            </Tabs>
-          </td>
-        </tr>
-        <tr>
-          <th>Dynamic</th>
-          <td>
-            <Flex>
-              <Button @click="dynamicTabs.push(`Tab ${dynamicTabs.length}`)">
-                Add
-              </Button>
-              <Button @click="dynamicTabs.shift()">
-                Remove
-              </Button>
-            </Flex>
-            <Tabs v-model="activeDynamic">
-              <Tab v-for="tab in dynamicTabs" :key="tab" :value="tab" />
-            </Tabs>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleToasts.vue

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

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

@@ -1,28 +0,0 @@
-<script setup lang='ts'>
-import Grid from '../../components/Grid/Grid.vue'
-
-const props = defineProps<{
-  name: string
-  color: string
-}>()
-</script>
-
-<template>
-  <Grid columns="212px 32px" y-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>