@dolanske/vui 0.4.0 → 1.0.0

package/src/examples/ExampleInputs.vue

@@ -0,0 +1,234 @@
+<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" 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>
+    <Divider :size="48" />
+
+    <h6 class="mb-l">
+      OTP
+    </h6>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <OTP>
+              <Flex :gap="0" align-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

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

@@ -0,0 +1,143 @@
+<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 v-model="open">
+              <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 v-model="open2" :size>
+              <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 v-model="open3" centered :card="{ separators: true }" :can-dismiss="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 v-model="open4" :card="{ separators: true }" scrollable>
+              <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 v-model="open5" size="screen" :card="{ separators: true }" scrollable>
+              <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>

package/src/examples/ExamplePalette.vue

@@ -0,0 +1,159 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+import { setColorTheme, theme } from '../shared/theme'
+import ExampleColor from './shared/ExampleColor.vue'
+
+// function getPalette(type: 'light' | 'dark') {
+//   return Array.from(document.styleSheets)
+//     .flatMap((styleSheet: CSSStyleSheet) => Array.from(styleSheet.cssRules))
+//     .filter(
+//       (cssRule: CSSRule): cssRule is CSSStyleRule =>
+//         cssRule instanceof CSSStyleRule && cssRule.selectorText === `:root`,
+//     )
+//     .flatMap((cssRule: CSSStyleRule) => Array.from(cssRule.style))
+//     .filter((style: string) => style.startsWith(`--${type}`))
+// }
+
+// const light = getPalette('light')
+// const dark = getPalette('dark')
+</script>
+
+<template>
+  <div>
+    <h3 class="mb-l">
+      Themes
+    </h3>
+
+    <Grid :columns="2">
+      <Flex class="theme-wrap light" column gap="xxs">
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Light</h5>
+          <Button :disabled="theme === 'light'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('light')">
+            <template #start>
+              <Icon icon="ph:sun" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--light-color-bg" />
+        <ExampleColor name="Bg Medium" color="--light-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--light-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--light-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--light-color-text" />
+        <ExampleColor name="Text Light" color="--light-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--light-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--light-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--light-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--light-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--light-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--light-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--light-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--light-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--light-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--light-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--light-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--light-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--light-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--light-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--light-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--light-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--light-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--light-color-border" />
+        <ExampleColor name="Border Strong" color="--light-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--light-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--light-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--light-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--light-color-bg-accent-raised" />
+      </Flex>
+
+      <Flex class="theme-wrap dark" gap="xxs" column>
+        <Flex space-between class="mb-l" align-center expand>
+          <h5>Dark</h5>
+          <Button :disabled="theme === 'dark'" variant="gray" data-title-top="Switch theme" @click="setColorTheme('dark')">
+            <template #start>
+              <Icon icon="ph:moon" />
+            </template>
+            Use
+          </Button>
+        </Flex>
+        <ExampleColor name="Bg" color="--dark-color-bg" />
+        <ExampleColor name="Bg Medium" color="--dark-color-bg-medium" />
+        <ExampleColor name="Bg Raised" color="--dark-color-bg-raised" />
+        <ExampleColor name="Bg Lowered" color="--dark-color-bg-lowered" />
+        <div class="padder" />
+        <ExampleColor name="Text" color="--dark-color-text" />
+        <ExampleColor name="Text Light" color="--dark-color-text-light" />
+        <ExampleColor name="Text Lighter" color="--dark-color-text-lighter" />
+        <ExampleColor name="Text Lightest" color="--dark-color-text-lightest" />
+        <ExampleColor name="Text Invert" color="--dark-color-text-invert" />
+        <div class="padder" />
+        <ExampleColor name="Button Gray" color="--dark-color-button-gray" />
+        <ExampleColor name="Button Gray Hover" color="--dark-color-button-gray-hover" />
+        <div class="padder" />
+        <ExampleColor name="Text Red" color="--dark-color-text-red" />
+        <ExampleColor name="Bg Red Lowered" color="--dark-color-bg-red-lowered" />
+        <ExampleColor name="Bg Red Raised" color="--dark-color-bg-red-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Green" color="--dark-color-text-green" />
+        <ExampleColor name="Bg Green Lowered" color="--dark-color-bg-green-lowered" />
+        <ExampleColor name="Bg Green Raised" color="--dark-color-bg-green-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Yellow" color="--dark-color-text-yellow" />
+        <ExampleColor name="Bg Yellow Lowered" color="--dark-color-bg-yellow-lowered" />
+        <ExampleColor name="Bg Yellow Raised" color="--dark-color-bg-yellow-raised" />
+        <div class="padder" />
+        <ExampleColor name="Text Blue" color="--dark-color-text-blue" />
+        <ExampleColor name="Bg Blue Lowered" color="--dark-color-bg-blue-lowered" />
+        <ExampleColor name="Bg Blue Raised" color="--dark-color-bg-blue-raised" />
+        <div class="padder" />
+        <ExampleColor name="Border" color="--dark-color-border" />
+        <ExampleColor name="Border Strong" color="--dark-color-border-strong" />
+        <ExampleColor name="Border Weak" color="--dark-color-border-weak" />
+        <div class="padder" />
+        <ExampleColor name="Accent" color="--dark-color-accent" />
+        <ExampleColor name="Bg Accent Lowered" color="--dark-color-bg-accent-lowered" />
+        <ExampleColor name="Bg Accent Raised" color="--dark-color-bg-accent-raised" />
+      </Flex>
+    </Grid>
+  </div>
+</template>
+
+<style>
+.padder {
+  height: 16px;
+}
+
+.theme-wrap {
+  padding: var(--space-m);
+  border-radius: var(--border-radius-m);
+
+  &.light {
+    background-color: white;
+
+    h5,
+    span {
+      color: var(--light-color-text) !important;
+    }
+  }
+
+  &.dark {
+    background-color: black;
+
+    h5,
+    span {
+      color: var(--dark-color-text) !important;
+    }
+  }
+}
+</style>

package/src/examples/ExamplePopouts.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+import Popout from '../components/Popout/Popout.vue'
+
+const anch = useTemplateRef('anch')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Popout
+    </h3>
+
+    <p class="mb-l">
+      Popout is a simpler version of dropdown. By default, it only provides functionality to float an element to the anchor. It is up to the developer to style it and set its placement / offset. Both dropdown & tooltip use the popout base.
+    </p>
+
+    <Flex>
+      <Button ref="anch" class="mb-xxs" @click="open = !open">
+        Open popout
+      </Button>
+      <p class="text-s text-color-light w-50">
+        This popout has offset of <code>32</code> and its placement is <code>bottom-start</code>. It also has an attached event to <code>clickOutside</code> which is fired when user clicks outside of the popout. In that case, we manually close it.
+      </p>
+    </Flex>
+    <Popout v-if="open" :anchor="anch" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
+      <h3>Popout content</h3>
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!</p>
+    </Popout>
+  </div>
+</template>
+
+<style scoped>
+.test-popout {
+  max-width: 256px;
+  padding: var(--space-xl);
+}
+</style>