@dolanske/vui 0.4.0 → 1.0.0

package/src/components/Tooltip/Tooltip.vue

@@ -16,7 +16,7 @@ interface Props {
 }
 
 const {
-  placement = 'bottom',
+  placement,
   delay = 0,
 } = defineProps<Props>()
 
@@ -66,21 +66,21 @@ const id = useId()
   >
     <slot />
   </div>
-  <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement name="tooltip">
-      <slot name="tooltip" />
-    </Popout>
-  </Transition>
+  <!-- <Transition name="tooltip"> -->
+  <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+    <slot name="tooltip" />
+  </Popout>
+  <!-- </Transition> -->
 </template>
 
-<style scoped>
+<!-- <style scoped>
 .tooltip-enter-active,
 .tooltip-leave-active {
-  transition: 0.1s opacity ease-in-out;
+  transition: var(--transition-fast);
 }
 
 .tooltip-enter-from,
 .tooltip-leave-to {
   opacity: 0;
 }
-</style>
+</style> -->

package/src/components/Tooltip/tooltip.scss

@@ -1,4 +1,8 @@
 .vui-tooltip {
   padding: var(--space-s);
   max-width: 512px;
+  background-color: var(--color-bg-raised);
 }
+
+// :root.light {
+// }

package/src/examples/ExampleAccordions.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import Accordion from '../components/Accordion/Accordion.vue'
+import AccordionGroup from '../components/Accordion/AccordionGroup.vue'
+import Grid from '../components/Grid/Grid.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Accordion
+    </h3>
+
+    <Grid :columns="2" gap="xl">
+      <div>
+        <strong class="block mb-s">Base</strong>
+        <Accordion label="Open details" class="mb-xl">
+          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
+        </Accordion>
+
+        <div class="mb-xl" />
+
+        <strong class="block mb-s">Group</strong>
+        <AccordionGroup single>
+          <Accordion label="First">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+          <Accordion label="Second">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+          <Accordion label="Third">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+        </AccordionGroup>
+      </div>
+      <div>
+        <strong class="block mb-s">Card</strong>
+        <Accordion label="Open details" card>
+          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi nostrum aspernatur nam earum vitae deleniti, odio atque esse sequi, in harum! Sint dolorum quis excepturi odio eum aspernatur aliquid harum.</p>
+        </Accordion>
+
+        <div class="mb-xl" />
+
+        <strong class="block mb-s">Card group</strong>
+        <AccordionGroup single>
+          <Accordion card label="First" class="mb-xs">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+          <Accordion card label="Second" class="mb-xs">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+          <Accordion card label="Third" class="mb-xs">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
+          </Accordion>
+        </AccordionGroup>
+      </div>
+    </Grid>
+  </div>
+</template>

package/src/examples/ExampleAlerts.vue

@@ -0,0 +1,78 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import Alert from '../components/Alert/Alert.vue'
+import Button from '../components/Button/Button.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const variants = ['neutral', 'danger', 'warning', 'success', 'info'] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Alerts
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant>
+                We'd like to get in touch about your car's extended warranty.
+              </Alert>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant filled>
+                We'd like to get in touch about your car's extended warranty.
+              </Alert>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Title + description</th>
+          <td>
+            <Flex column>
+              <Alert
+                v-for="variant in variants"
+                :key="variant"
+                :variant
+                title="Warranty discounts 2025"
+                description="We'd like to get in touch about your car's extended warranty."
+              />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Title + description + filled</th>
+          <td>
+            <Flex column>
+              <Alert v-for="variant in variants" :key="variant" :variant title="Warranty discounts 2025" filled description="We'd like to get in touch about your car's extended warranty." />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom</th>
+          <td>
+            <Alert variant="warning">
+              <Flex align-center space-between>
+                <p>Unfortunately we can't help you.</p>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:x" />
+                  </template>
+                  Ignore
+                </Button>
+              </Flex>
+            </Alert>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleAvatars.vue

@@ -0,0 +1,44 @@
+<script setup lang='ts'>
+import Avatar from '../components/Avatar/Avatar.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const variants = ['s', 'm', 'l', 96] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Avatars
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base S, M, L  <br> + custom size</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Photo</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size url="https://i.imgur.com/bHWgZfD.jpeg" />
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Abbreviation</th>
+          <td>
+            <Flex>
+              <Avatar v-for="size in variants" :key="size" :size>
+                AB
+              </Avatar>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleBadges.vue

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

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

@@ -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>