@dolanske/vui 1.4.1 → 1.4.3

package/src/examples/ExampleDropdowns.vue

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

@@ -1,124 +0,0 @@
-<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>x-start</code><code>x-end</code><code>x-center</code>
-              <code>x-between</code><code>x-around</code><code>x-evenly</code>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Align props</th>
-          <td>
-            <Flex>
-              <code>y-start</code><code>y-end</code><code>y-center</code>
-              <code>y-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 {
-  display: block;
-  width: 100%;
-  height: 24px;
-  border-radius: var(--border-radius-m);
-  background-color: var(--color-border);
-  text-align: center;
-}
-</style>

package/src/examples/ExampleInputs.vue

@@ -1,236 +0,0 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Divider from '../components/Divider/Divider.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Grid from '../components/Grid/Grid.vue'
-import Color from '../components/Input/Color.vue'
-import Counter from '../components/Input/Counter.vue'
-import Dropzone from '../components/Input/Dropzone.vue'
-import File from '../components/Input/File.vue'
-import Input from '../components/Input/Input.vue'
-import Password from '../components/Input/Password.vue'
-import Textarea from '../components/Input/Textarea.vue'
-import OTP from '../components/OTP/OTP.vue'
-import OTPItem from '../components/OTP/OTPItem.vue'
-import Select from '../components/Select/Select.vue'
-
-const options = [
-  { value: 0, label: 'Jan' },
-  { value: 1, label: 'Andrew' },
-  { value: 2, label: 'Felix' },
-]
-
-const longOptions = [
-  ...options,
-  {
-    value: 3,
-    label: 'Kasper',
-  },
-  {
-    value: 4,
-    label: 'Margarett',
-  },
-  {
-    value: 5,
-    label: 'Bridgetson',
-  },
-  {
-    value: 6,
-    label: 'Jenifer',
-  },
-  {
-    value: 7,
-    label: 'Christopher',
-  },
-]
-
-const selected = ref([])
-const selected1 = ref([])
-const selected2 = ref([])
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Inputs
-    </h3>
-
-    <h6 class="mb-l">
-      Input extensions
-    </h6>
-
-    <Grid gap="l" :columns="3">
-      <Input placeholder="Margarett Bridgetson" />
-      <Input label="Default" />
-      <Input label="Password" placeholder="*******" type="password" model-value="asdasdasdass" />
-      <Input label="Has hint" hint="What is your birth name?" />
-      <Input label="Limited" hint="What is your birth name?" limit="65" placeholder="Your name" />
-      <Input label="With errors" hint="What is your birth name?" limit="65" :errors="['Your name is too short']" />
-      <Input label="Readonly" hint="What is your birth name?" readonly model-value="Readonly value" />
-      <Input label="Required" hint="What is your birth name?" required />
-      <Input label="Disabled" hint="What is your birth name?" disabled />
-      <Input label="With slot" hint="What is your phone number, sir?">
-        <template #start>
-          +358
-        </template>
-      </Input>
-      <Input label="With icon" hint="What is your birth name?" placeholder="Your phone sir">
-        <template #start>
-          <Icon icon="ph:phone" />
-        </template>
-      </Input>
-      <Input label="With button" hint="What is your birth name?" placeholder="Your phone sir">
-        <template #start>
-          <Icon icon="ph:phone" />
-        </template>
-        <template #end>
-          <Button>Clear</Button>
-        </template>
-      </Input>
-      <Input label="Two buttons" placeholder="Some stuff">
-        <template #start>
-          <Button square icon="ph:eye" />
-        </template>
-        <template #end>
-          <Button>Clear</Button>
-        </template>
-      </Input>
-      <Input label="Icon and button" placeholder="Some stuff">
-        <template #start>
-          <Button>Start</Button>
-        </template>
-        <template #end>
-          <Icon icon="ph:phone" />
-        </template>
-      </Input>
-    </Grid>
-
-    <Divider :size="48" />
-
-    <h6 class="mb-l">
-      Default input types
-    </h6>
-
-    <Grid gap="m" :columns="3">
-      <Input label="Text" />
-      <Password label="Password" />
-      <Color placeholder="Erm uhmm" label="Pick color" hint="A bonus hint idk" />
-      <Input label="Date" type="date" />
-      <Input label="Email" type="email" />
-      <Input label="Number" type="number" />
-      <Input label="Range" type="range" />
-      <Input label="Search" type="search" />
-      <Input label="Tel" type="tel" />
-      <Input label="Time" type="time" />
-      <Input label="Url" type="url" :errors="['Bro didnt count enough']" />
-      <File label="File" />
-      <Counter label="Counter" hint="It counts!!" />
-    </Grid>
-
-    <Divider :size="48" />
-
-    <h6 class="mb-l">
-      Textarea
-    </h6>
-
-    <Grid :columns="2" gap="m">
-      <Textarea label="Your story" hint="tell me everything" :resize="false" required />
-      <Textarea expand label="With limit" :limit="64" :resize="false" placeholder="Bro tell me a short story" />
-      <Textarea expand label="Resize vertical" />
-      <Textarea expand label="Resize horizontal" resize="horizontal" />
-      <Textarea expand label="Resize both" :resize="true" :errors="['Just an error test carry on', 'Whoops another issue']" />
-      <Textarea expand label="Autoresize" hint="This is not supported in firefox yet" />
-      <Textarea expand label="Readonly" model-value="Hiiiiiiiii uwuwuwu" readonly />
-      <Textarea expand label="Disabled" disabled />
-    </Grid>
-
-    <Divider :size="48" />
-
-    <h6 class="mb-l">
-      Dropzone
-    </h6>
-
-    <Dropzone expand />
-
-    <Divider :size="48" />
-
-    <h6 class="mb-l">
-      Select
-    </h6>
-    <Grid gap="xl" :columns="3">
-      <Select expand :options="longOptions" label="Base, single, search, showClear" search show-clear />
-      <Select expand :options="options" label="Base readonly" readonly />
-      <Select expand :options="options" label="Base disabled" disabled placeholder="Custom placeholder bro" />
-      <Select :options="options" label="Required (single)" expand required />
-      <Select :options="options" label="Base + errors" expand :errors="['Hello bro']" />
-      <Select v-model="selected" :options="options" label="Base multi" expand :single="false" />
-      <Select v-model="selected2" :options="options" label="Multi, max options 2, showClear" show-clear expand :single="false" :max-active-options="2" />
-      <Select v-model="selected1" :options="options" label="Multi required" required expand :single="false" hint="Must always have at least one option selected" />
-
-      <select>
-        <option value="" disabled>
-          Select option
-        </option>
-        <option value="Jan">
-          Jan
-        </option>
-        <option value="Andrew">
-          Andrew
-        </option>
-        <option value="Kasper">
-          Kasper
-        </option>
-      </select>
-    </Grid>
-    <div class="inline-block">
-      <Select :options="longOptions" label="Short" show-clear />
-    </div>
-    <Divider :size="48" />
-    <h6 class="mb-l">
-      OTP
-    </h6>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <OTP>
-              <Flex :gap="0" y-center>
-                <OTPItem :i="0" />
-                <OTPItem :i="1" />
-                <OTPItem :i="2" />
-                <span class="ml-m mr-m">-</span>
-                <OTPItem :i="3" />
-                <OTPItem :i="4" />
-                <OTPItem :i="5" />
-              </Flex>
-            </OTP>
-          </td>
-        </tr>
-        <tr>
-          <th>Redacted + only numbers</th>
-          <td>
-            <OTP redacted mode="num">
-              <OTPItem :i="0" />
-              <OTPItem :i="1" />
-              <OTPItem :i="2" />
-            </OTP>
-          </td>
-        </tr>
-        <tr>
-          <th>Only characters</th>
-          <td>
-            <OTP redacted mode="char">
-              <OTPItem :i="0" />
-              <OTPItem :i="1" />
-              <OTPItem :i="2" />
-            </OTP>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleKBD.vue

@@ -1,65 +0,0 @@
-<script setup lang='ts'>
-import { whenever } from '@vueuse/core'
-import { ref } from 'vue'
-import Flex from '../components/Flex/Flex.vue'
-import Kbd from '../components/Kbd/Kbd.vue'
-import KbdGroup from '../components/Kbd/KbdGroup.vue'
-
-const active = ref(false)
-
-whenever(active, () => {
-  setTimeout(() => {
-    active.value = false
-  }, 1000)
-})
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      KBD
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Flex>
-              <Kbd keys="Ctrl" />
-              <Kbd keys="Shift" />
-              <Kbd keys="A" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Group</th>
-          <td>
-            <Flex :gap="2">
-              <KbdGroup @trigger="active = true">
-                <Kbd highlight keys="Shift" />
-                <Kbd highlight keys="A" />
-              </KbdGroup>
-              {{ active ? 'Pressed' : '' }}
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom labels</th>
-          <td>
-            <Flex>
-              <Kbd highlight keys="Shift" label="Shift bro" />
-              <Kbd highlight keys="A" label="A key" />
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Multiple keys in one</th>
-          <td>
-            <Kbd keys="Shift+A" highlight />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

package/src/examples/ExampleModals.vue

@@ -1,143 +0,0 @@
-<script setup lang='ts'>
-import type { Sizes } from '../shared/types'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Flex from '../components/Flex/Flex.vue'
-import Modal from '../components/Modal/Modal.vue'
-
-const open = ref(false)
-const open2 = ref(false)
-const open3 = ref(false)
-const open4 = ref(false)
-const open5 = ref(false)
-
-const size = ref<Sizes | 'full'>('s')
-function setSize(s: any) {
-  size.value = s
-  open2.value = true
-}
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Modals
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Button @click="open = !open">
-              Open
-            </Button>
-            <Modal :open="open" @close="open = false">
-              <template #header>
-                <h4>Modal </h4>
-              </template>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>Sizes</th>
-          <td>
-            <Flex>
-              <Button square @click="setSize('s')">
-                S
-              </Button>
-              <Button square @click="setSize('l')">
-                L
-              </Button>
-              <Button square @click="setSize('full')">
-                Full
-              </Button>
-            </Flex>
-            <Modal :open="open2" :size @close="open2 = false">
-              <template #header>
-                <h4>Modal </h4>
-              </template>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>Centered + separators + can't dismiss</th>
-          <td>
-            <Button @click="open3 = !open3">
-              Open
-            </Button>
-            <Modal :open="open3" centered :card="{ separators: true }" :can-dismiss="false" @close="open3 = false">
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p>Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop.</p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>
-            Scrollable
-          </th>
-          <td>
-            <Button @click="open4 = !open4">
-              Open
-            </Button>
-            <Modal :open="open4" :card="{ separators: true }" scrollable @close="open4 = false">
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p class="text-xxxxl">
-                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius.
-              </p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-        <tr>
-          <th>
-            Fullscreen
-          </th>
-          <td>
-            <Button @click="open5 = !open5">
-              Open
-            </Button>
-            <Modal :open="open5" size="screen" :card="{ separators: true }" scrollable @close="open5 = false">
-              <template #header>
-                <h4>What is this?</h4>
-              </template>
-              <p class="text-xxxxl">
-                Non dismissable modal means that it can only be closed via a provided button. Like a confirmation etc. No chance of closing it by clicking the x buttton, pressing escape or clicking the backdrop. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nisi eos dolores ipsa perspiciatis ullam voluptates quos. Recusandae quod atque, laudantium quis, ad quaerat cumque vero quibusdam facilis, blanditiis eius. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sed, impedit officia ad earum optio molestiae nihil mollitia quas enim neque repudiandae minus? Odio fugit voluptates enim et iste odit? Lorem, ipsum dolor sit amet consectetur adipisicing elit. In mollitia harum consectetur ad soluta laudantium? In earum animi harum impedit modi dolores, quod ex, ipsa ipsum est perferendis laudantium aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, cupiditate autem aut nisi quas voluptatem dolorem, eaque odit voluptates laboriosam consequuntur dolore alias a provident corporis nemo. Blanditiis, vel! Maiores!
-              </p>
-              <template #footer="{ close }">
-                <Button @click="close">
-                  Close
-                </Button>
-              </template>
-            </Modal>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>