@dolanske/vui 1.0.1 → 1.0.3

package/src/examples/ExampleAvatars.vue

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

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

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

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

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