@dolanske/vui 0.4.0 → 1.0.0

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>

package/src/examples/ExampleFlexGrid.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+
+const cols = ref(3)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Layouts
+    </h3>
+
+    <h6 class="block mb-m">
+      Flex
+    </h6>
+
+    <table class="mb-l">
+      <tbody>
+        <tr>
+          <th>Flex + gaps <br> (gap can either be set as a size or a number)</th>
+          <td class="w-85">
+            <Flex gap="l" column>
+              <Flex v-for="size in ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] as const" :key="size" expand :gap="size">
+                <div v-for="key in 3" :key class="example flex-1">
+                  {{ size.toUpperCase() }}
+                </div>
+              </Flex>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="mb-s">
+      All of the following props are boolean props
+    </p>
+
+    <table class="mb-xl">
+      <tbody>
+        <tr>
+          <th>Display props</th>
+          <td>
+            <Flex>
+              <code>inline</code><code>wrap</code><code>wrap-reverse</code><code>expand</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Flow props</th>
+          <td>
+            <Flex>
+              <code>row</code><code>column</code><code>row-reverse</code><code>column-reverse</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Justify props</th>
+          <td>
+            <Flex>
+              <code>justify-start</code><code>justify-end</code><code>justify-center</code>
+              <code>space-between</code><code>space-around</code><code>space-evenly</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Align props</th>
+          <td>
+            <Flex>
+              <code>align-start</code><code>align-end</code><code>align-center</code>
+              <code>align-baseline</code>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h6 class="block mb-m">
+      Grid
+    </h6>
+
+    <p class="mb-s">
+      This grid utility is mostly meant for simple grid layouts. For anything mroe complicated, write your layouts in CSS. It supports setting <code>rows</code> or <code>columns</code> prop with a number or a string (the same way you'd write the CSS properties)
+    </p>
+
+    <p class="mb-s">
+      You can also set the `inlin` boolean prop and the `gap` prop which is a size prop or a number
+    </p>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>
+            Base
+            <select v-model="cols" class="mt-s block">
+              <option v-for="key in 5" :key :value="key + 1">
+                Cols: {{ key + 1 }}
+              </option>
+            </select>
+          </th>
+          <td class="w-85">
+            <Grid :columns="cols" gap="l">
+              <div v-for="key in 9" :key class="example">
+                {{ key }}
+              </div>
+            </Grid>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.example {
+  height: 24px;
+  border-radius: var(--border-radius-m);
+  background-color: var(--color-border);
+  text-align: center;
+}
+</style>