@dolanske/vui 1.4.1 → 1.4.3

package/src/examples/ExampleBadges.vue

@@ -1,48 +0,0 @@
-<script setup lang='ts'>
-import Badge from '../components/Badge/Badge.vue'
-import Flex from '../components/Flex/Flex.vue'
-
-const variants = ['neutral', 'danger', 'warning', 'success', 'info', 'accent'] as const
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Badges
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Flex>
-              <Badge v-for="variant in variants" :key="variant" :variant>
-                Badge
-              </Badge>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Outline</th>
-          <td>
-            <Flex>
-              <Badge v-for="variant in variants" :key="variant" :variant outline>
-                Badge
-              </Badge>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Filled</th>
-          <td>
-            <Flex>
-              <Badge v-for="variant in variants" :key="variant" :variant filled>
-                Badge
-              </Badge>
-            </Flex>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleBreadcrumbs.vue

@@ -1,46 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import BreadcrumbItem from '../components/Breadcrumbs/BreadcrumbItem.vue'
-import Breadcrumbs from '../components/Breadcrumbs/Breadcrumbs.vue'
-import Button from '../components/Button/Button.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Breadcrumbs
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base with links</th>
-          <td>
-            <Breadcrumbs>
-              <BreadcrumbItem label="Home" href="#" />
-              <BreadcrumbItem label="About" href="#" />
-              <BreadcrumbItem label="You" />
-            </Breadcrumbs>
-          </td>
-        </tr>
-        <tr>
-          <th>With components</th>
-          <td>
-            <Breadcrumbs>
-              <BreadcrumbItem label="Home" href="#" />
-              <BreadcrumbItem label="About" href="#" />
-              <BreadcrumbItem>
-                <Button size="s">
-                  Switch
-                  <template #end>
-                    <Icon icon="ph:caret-down" />
-                  </template>
-                </Button>
-              </BreadcrumbItem>
-            </Breadcrumbs>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleButtons.vue

@@ -1,148 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import Button from '../components/Button/Button.vue'
-import ButtonGroup from '../components/ButtonGroup/ButtonGroup.vue'
-import Flex from '../components/Flex/Flex.vue'
-
-const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as const
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Buttons
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn">
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Base + large</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" size="l">
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Base + small</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" size="s">
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Plain</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" plain>
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Outline</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" outline>
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Disabled</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" disabled>
-                Button
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Square + icon</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Square + icon + small</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="s" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Square + icon + large</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="l" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Loading</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn" loading size="l" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Icon + text</th>
-          <td>
-            <Flex gap="s">
-              <Button v-for="btn in variants" :key="btn" :variant="btn">
-                <template #start>
-                  <Icon icon="ph:arrow-left" />
-                </template>
-                Prev
-                <template #end>
-                  <Icon icon="ph:arrow-right" />
-                </template>
-              </Button>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <td>Button group</td>
-          <td>
-            <Flex gap="s" wrap>
-              <ButtonGroup v-for="btn in variants" :key="btn">
-                <Button :variant="btn">
-                  Hello
-                </Button>
-                <Button :variant="btn" icon="ph:caret-down" />
-              </ButtonGroup>
-
-              <ButtonGroup>
-                <Button square icon="ph:text-b-bold" active />
-                <Button square icon="ph:text-bold" />
-                <Button square icon="ph:text-italic" />
-                <Button square icon="ph:text-a-underline" />
-              </ButtonGroup>
-            </Flex>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleCalendars.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Calendar from '../components/Calendar/Calendar.vue'
-
-const date = ref(Date.now())
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Calendars
-    </h3>
-
-    <p class="mb-s">
-      Using the <a href="https://vue3datepicker.com/" target="_blank">Vue Datepicker</a> component. By default it always outputs a javascript Date object. So it is up to the user to format the dates themselves.
-    </p>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Calendar v-model="date" format="dd/MM/yyyy">
-              <template #trigger>
-                <Button>{{ date ?? 'Choose date' }}</Button>
-              </template>
-            </Calendar>
-          </td>
-        </tr>
-        <tr>
-          <th>Inline</th>
-          <th>
-            <Calendar inline />
-          </th>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleCards.vue

@@ -1,94 +0,0 @@
-<script setup lang='ts'>
-import Button from '../components/Button/Button.vue'
-import Card from '../components/Card/Card.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Grid from '../components/Grid/Grid.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Cards
-    </h3>
-
-    <Grid :columns="2" gap="xl">
-      <Flex column gap="xl">
-        <div>
-          <strong class="block mb-s">Base</strong>
-          <Card>
-            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci eligendi quos inventore voluptas ab saepe fugit deleniti ipsam exercitationem impedit quod rem ipsum laborum, quis quam error ipsa corrupti. Dolorem!</p>
-          </Card>
-        </div>
-
-        <div>
-          <strong class="block mb-s">With header</strong>
-          <Card>
-            <template #header>
-              <h4>Hello</h4>
-            </template>
-            <template #header-end>
-              <Button icon="ph:x" plain size="s" />
-            </template>
-            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci eligendi quos inventore voluptas ab saepe fugit deleniti ipsam exercitationem impedit quod rem ipsum laborum, quis quam error ipsa corrupti. Dolorem!</p>
-          </Card>
-        </div>
-
-        <div>
-          <strong class="block mb-s">With footer</strong>
-          <Card>
-            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci eligendi quos inventore voluptas ab saepe fugit deleniti ipsam exercitationem impedit quod rem ipsum laborum, quis quam error ipsa corrupti. Dolorem!</p>
-
-            <template #footer>
-              <Flex gap="s" x-end>
-                <Button>Cancel</Button>
-                <Button variant="success">
-                  Save
-                </Button>
-              </Flex>
-            </template>
-          </Card>
-        </div>
-      </Flex>
-      <Flex column gap="xl">
-        <div>
-          <strong class="block mb-s">With header + separators (each separator can be individually disabled)</strong>
-          <Card separators>
-            <template #header>
-              <h4>Hello</h4>
-            </template>
-            <template #header-end>
-              <Button icon="ph:x" plain size="s" />
-            </template>
-            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci eligendi quos inventore voluptas ab saepe fugit deleniti ipsam exercitationem impedit quod rem ipsum laborum, quis quam error ipsa corrupti. Dolorem!</p>
-            <template #footer>
-              <Flex gap="s" x-start>
-                <Button variant="success">
-                  Save
-                </Button>
-                <Button>Cancel</Button>
-              </Flex>
-            </template>
-          </Card>
-        </div>
-
-        <Card :header-separator="false" footer-separator>
-          <template #header>
-            <h4>Hello</h4>
-          </template>
-          <template #header-end>
-            <Button icon="ph:x" plain size="s" />
-          </template>
-          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci eligendi quos inventore voluptas ab saepe fugit deleniti ipsam exercitationem impedit quod rem ipsum laborum, quis quam error ipsa corrupti. Dolorem!</p>
-          <template #footer>
-            <Flex gap="s" x-end>
-              <Button>Cancel</Button>
-              <Button variant="success">
-                Save
-              </Button>
-            </Flex>
-          </template>
-        </Card>
-      </Flex>
-    </Grid>
-  </div>
-</template>

package/src/examples/ExampleCheckboxes.vue

@@ -1,123 +0,0 @@
-<script setup lang='ts'>
-import Checkbox from '../components/Checkbox/Checkbox.vue'
-import Grid from '../components/Grid/Grid.vue'
-import Radio from '../components/Radio/Radio.vue'
-import RadioGroup from '../components/Radio/RadioGroup.vue'
-import Switch from '../components/Switch/Switch.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <Grid :columns="2" gap="xl">
-      <div>
-        <h3 class="mb-l">
-          Checkbox
-        </h3>
-        <table class="mb-xl w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <Checkbox label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <Checkbox label="Just click me" accent />
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <Checkbox disabled label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Custom icons</th>
-              <td>
-                <Checkbox icon-on="ph:check-fat" icon-off="ph:x-bold" label="Just click me" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h3 class="mb-l">
-          Switch
-        </h3>
-        <table class="mb-xl w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <Switch label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <Switch label="Just click me" accent />
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <Switch label="Just click me" disabled />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div>
-        <h3 class="mb-l">
-          Radio group
-        </h3>
-
-        <table class="w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <RadioGroup>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <RadioGroup>
-                  <Radio value="one" label="First" accent />
-                  <Radio value="two" label="Second" accent />
-                  <Radio value="three" label="Third" disabled accent />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Vertical</th>
-              <td>
-                <RadioGroup column>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <RadioGroup column disabled>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </Grid>
-  </div>
-</template>

package/src/examples/ExampleCopyClipboard.vue

@@ -1,47 +0,0 @@
-<script setup lang='ts'>
-import Button from '../components/Button/Button.vue'
-import CopyClipboard from '../components/CopyClipboard/CopyClipboard.vue'
-import Flex from '../components/Flex/Flex.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Clipboard copy
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <CopyClipboard text="Copy me!">
-              <p>Copy me!</p>
-            </CopyClipboard>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom slot & confirmation</th>
-          <td>
-            <CopyClipboard text="Copy me!" confirm>
-              <Button>Copy me!</Button>
-            </CopyClipboard>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom confirm popup & positioned at the right</th>
-          <td>
-            <CopyClipboard text="Copy me!" confirm confirm-placement="right">
-              <Button>Copy me!</Button>
-              <template #confirm>
-                <Flex column gap="s" y-center>
-                  <strong>The dawg</strong>
-                  <img style="width:128px;border-radius:8px" src="https://i.imgur.com/jMxIs6p.png" alt="">
-                </Flex>
-              </template>
-            </CopyClipboard>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleDividers.vue

@@ -1,39 +0,0 @@
-<script setup lang='ts'>
-import Avatar from '../components/Avatar/Avatar.vue'
-import Divider from '../components/Divider/Divider.vue'
-import Flex from '../components/Flex/Flex.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Dividers
-    </h3>
-
-    <div class="container container-s">
-      <p>Standard divider</p>
-      <Divider />
-      <p>Divider with a variable spacing. For instance 80px. This means there will be a gap of 40 pixels above and below the divider. Size serves a different purpose with vertical dividers, so to achieve the same thing, you could also set the margin to <code>40px 0</code></p>
-      <Divider :size="80" />
-      <p>Using margin. The default divider size is 32px, so we need to either set it to 0 or offset the provided margin.</p>
-      <Divider margin="40px 0" />
-
-      <p>Different thickness (you specify the number of pixels)</p>
-      <Divider :thickness="5" :size="64" />
-      <p class="mb-s">
-        Vertical dividers. Here, size is the height of the divider. And if you want to add extra spacing between dividers, jsut set the margin to something like <code>0 16px</code>.
-      </p>
-      <Flex class="mb-xl">
-        <span>One</span>
-        <Divider vertical :size="16" />
-        <span>Two</span>
-        <Divider vertical :size="16" />
-        <span>Three</span>
-      </Flex>
-      <p>Dividers also accept a slot. This is rendered in the center, overlaying the divider. For instance an icon or an avatar, but it can be any component.</p>
-      <Divider size="80">
-        <Avatar />
-      </Divider>
-    </div>
-  </div>
-</template>

package/src/examples/ExampleDrawers.vue

@@ -1,67 +0,0 @@
-<script setup lang='ts'>
-import type { Sizes } from '../shared/types'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Drawer from '../components/Drawer/Drawer.vue'
-import Flex from '../components/Flex/Flex.vue'
-
-const open = ref(false)
-const open2 = ref(false)
-
-const size = ref<Sizes | 'full'>('s')
-function setSize(s: any) {
-  size.value = s
-  open.value = true
-}
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Drawers
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Flex>
-              <Button square @click="setSize('s')">
-                S
-              </Button>
-              <Button square @click="setSize('m')">
-                M
-              </Button>
-              <Button square @click="setSize('l')">
-                L
-              </Button>
-              <Button square @click="setSize('xl')">
-                XL
-              </Button>
-              <Button square @click="setSize('full')">
-                Full
-              </Button>
-            </Flex>
-            <Drawer :open title="Hello" :container-size="size" @close="open = false">
-              <h2>Hello</h2>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
-            </Drawer>
-          </td>
-        </tr>
-        <tr>
-          <th>With animation + no handle</th>
-          <td>
-            <Button @click="open2 = !open2">
-              Open
-            </Button>
-            <Drawer :open="open2" :handle="false" title="Hello" :container-size="size" @close="open2 = false">
-              <h2>Hello</h2>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
-            </Drawer>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>