@dolanske/vui 0.5.0 → 1.0.1

package/src/examples/ExampleButtons.vue

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

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

@@ -0,0 +1,94 @@
+<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" justify-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" justify-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" justify-end>
+              <Button>Cancel</Button>
+              <Button variant="success">
+                Save
+              </Button>
+            </Flex>
+          </template>
+        </Card>
+      </Flex>
+    </Grid>
+  </div>
+</template>

package/src/examples/ExampleCheckboxes.vue

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

@@ -0,0 +1,47 @@
+<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</th>
+          <td>
+            <CopyClipboard text="Copy me!" confirm>
+              <Button>Copy me!</Button>
+              <template #confirm>
+                <Flex column gap="s" align-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

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

@@ -0,0 +1,67 @@
+<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 v-model="open" title="Hello" :container-size="size">
+              <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 v-model="open2" :handle="false" title="Hello" :container-size="size" :root-props="{ shouldScaleBackground: true }">
+              <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>

package/src/examples/ExampleDropdowns.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from '../components/Button/Button.vue'
+import Dropdown from '../components/Dropdown/Dropdown.vue'
+import DropdownItem from '../components/Dropdown/DropdownItem.vue'
+import DropdownTitle from '../components/Dropdown/DropdownTitle.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const placements = ['top', 'bottom', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Dropdowns
+    </h3>
+
+    <table class="mb-xxl">
+      <tbody>
+        <tr>
+          <th>
+            Base + expand <br> (dropdown takes width of the trigger)
+          </th>
+          <td>
+            <Dropdown expand>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" expand @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+              <DropdownItem>New user</DropdownItem>
+              <DropdownItem>Update</DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            Placements (some)
+          </th>
+          <td>
+            <Flex>
+              <Dropdown v-for="placement in placements" :key="placement" :placement="placement">
+                <template #trigger="{ toggle }">
+                  <Button class="btn btn-primary" @click="toggle">
+                    {{ placement }}
+                  </Button>
+                </template>
+
+                <DropdownItem>New user</DropdownItem>
+                <DropdownItem>Update</DropdownItem>
+                <DropdownItem>Cancel</DropdownItem>
+              </Dropdown>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Complex</th>
+          <td>
+            <Dropdown>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+
+              <DropdownTitle>
+                Actions
+                <template #end>
+                  3
+                </template>
+              </DropdownTitle>
+
+              <DropdownItem icon="ph:user">
+                New user
+                <template #hint>
+                  <Icon icon="ic:round-keyboard-command-key" />
+                  + C
+                </template>
+              </DropdownItem>
+              <DropdownItem icon-end="ph:arrow-right">
+                Update
+              </DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+
+              <DropdownTitle>Yourself</DropdownTitle>
+              <DropdownItem icon="ph:x" disabled>
+                Disabled option
+              </DropdownItem>
+              <DropdownItem icon="ph:x">
+                Delete
+              </DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+        <tr>
+          <th>Disabled</th>
+          <td>
+            <Dropdown expand>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" disabled @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+              <DropdownItem>New user</DropdownItem>
+              <DropdownItem>Update</DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>