@dolanske/vui 1.0.4 → 1.1.0

package/src/examples/ExampleTabs.vue

@@ -1,119 +1,119 @@
-<script setup lang='ts'>
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Tab from '../components/Tabs/Tab.vue'
-import Tabs from '../components/Tabs/Tabs.vue'
-
-const activeTab = ref('Home')
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Tabs
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Tabs v-model="activeTab">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-          </td>
-        </tr>
-        <tr>
-          <th>Filled</th>
-          <td>
-            <Tabs v-model="activeTab" variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-          </td>
-        </tr>
-        <tr class="w-100">
-          <th>Expanded</th>
-          <td class="w-100">
-            <Tabs v-model="activeTab" expand>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" expand variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-          </td>
-        </tr>
-        <tr>
-          <th>With slots</th>
-          <td class="w-100">
-            <Tabs v-model="activeTab">
-              <template #start>
-                <Button>
-                  <template #start>
-                    <Icon icon="ph:sidebar" />
-                  </template>
-                  Sidebar
-                </Button>
-              </template>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-
-              <template #end>
-                <Button icon="ph:x" plain />
-              </template>
-            </Tabs>
-          </td>
-        </tr>
-        <tr>
-          <th>With slots expanded</th>
-          <td class="w-100">
-            <Tabs v-model="activeTab" expand>
-              <template #start>
-                <Button>
-                  <template #start>
-                    <Icon icon="ph:sidebar" />
-                  </template>
-                  Sidebar
-                </Button>
-              </template>
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-            </Tabs>
-
-            <div class="mb-xl" />
-
-            <Tabs v-model="activeTab" expand variant="filled">
-              <Tab label="Home" />
-              <Tab label="About" />
-              <Tab label="You" />
-
-              <template #end>
-                <Button icon="ph:x" plain />
-              </template>
-            </Tabs>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Tab from '../components/Tabs/Tab.vue'
+import Tabs from '../components/Tabs/Tabs.vue'
+
+const activeTab = ref('Home')
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tabs
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Tabs v-model="activeTab">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr class="w-100">
+          <th>Expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab">
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleToasts.vue

@@ -1,96 +1,96 @@
-<script setup lang="ts">
-import { defineComponent, h, markRaw } from 'vue'
-import Button from '../components/Button/Button.vue'
-import { pushToast, removeToast } from '../components/Toast/toast'
-import Toasts from '../components/Toast/Toasts.vue'
-
-const testBody = markRaw(defineComponent((props) => {
-  return () => h('h2', `${props.data.title} ${props.toastId}`)
-}, {
-  props: {
-    data: Object,
-    toastId: Number,
-  },
-}))
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Toasts
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Button @click="pushToast('Hello')">
-              Push toast
-            </Button>
-          </td>
-        </tr>
-        <tr>
-          <th>+ Description</th>
-          <td>
-            <Button @click="pushToast('Hello', { description: 'Lorem ipsum dolor sit amet and others stuff but I never learned it past that.' })">
-              Push toast
-            </Button>
-          </td>
-        </tr>
-        <tr>
-          <th>+ Action</th>
-          <td>
-            <Button
-              @click="pushToast('Hello', {
-                action: {
-                  label: 'Close',
-                  handler: (id) => {
-                    removeToast(id)
-                  },
-                },
-              })"
-            >
-              Push toast
-            </Button>
-          </td>
-        </tr>
-        <tr>
-          <th>+ persist</th>
-          <td>
-            <Button
-              @click="pushToast('Read the description!!', {
-                description: 'So when you add an action, the handler exposes the ID of the toast. And you can then manually remove it. This toast will also stay up until you close it. It persists!!',
-                action: {
-                  label: 'Close',
-                  handler: (id) => {
-                    removeToast(id)
-                  },
-                },
-                persist: true,
-              })"
-            >
-              Push toast
-            </Button>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom body</th>
-          <td>
-            <Button
-              @click="pushToast('uhhh', {
-                bodyProps: {
-                  title: 'Bro im a custom component and my id is',
-                },
-                body: testBody,
-              })"
-            >
-              Push toast
-            </Button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <Toasts />
-  </div>
-</template>
+<script setup lang="ts">
+import { defineComponent, h, markRaw } from 'vue'
+import Button from '../components/Button/Button.vue'
+import { pushToast, removeToast } from '../components/Toast/toast'
+import Toasts from '../components/Toast/Toasts.vue'
+
+const testBody = markRaw(defineComponent((props) => {
+  return () => h('h2', `${props.data.title} ${props.toastId}`)
+}, {
+  props: {
+    data: Object,
+    toastId: Number,
+  },
+}))
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Toasts
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Button @click="pushToast('Hello')">
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ Description</th>
+          <td>
+            <Button @click="pushToast('Hello', { description: 'Lorem ipsum dolor sit amet and others stuff but I never learned it past that.' })">
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ Action</th>
+          <td>
+            <Button
+              @click="pushToast('Hello', {
+                action: {
+                  label: 'Close',
+                  handler: (id) => {
+                    removeToast(id)
+                  },
+                },
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>+ persist</th>
+          <td>
+            <Button
+              @click="pushToast('Read the description!!', {
+                description: 'So when you add an action, the handler exposes the ID of the toast. And you can then manually remove it. This toast will also stay up until you close it. It persists!!',
+                action: {
+                  label: 'Close',
+                  handler: (id) => {
+                    removeToast(id)
+                  },
+                },
+                persist: true,
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom body</th>
+          <td>
+            <Button
+              @click="pushToast('uhhh', {
+                bodyProps: {
+                  title: 'Bro im a custom component and my id is',
+                },
+                body: testBody,
+              })"
+            >
+              Push toast
+            </Button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <Toasts />
+  </div>
+</template>

package/src/examples/ExampleTooltips.vue

@@ -1,70 +1,70 @@
-<script setup lang='ts'>
-import Flex from '../components/Flex/Flex.vue'
-import Tooltip from '../components/Tooltip/Tooltip.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Tooltips
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Tooltip>
-              <span>Hover me</span>
-              <template #tooltip>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam minus labore commodi aliquid molestiae non voluptas, veritatis nesciunt. Nihil quod necessitatibus veritatis nam enim eius deleniti unde recusandae reprehenderit voluptate?</p>
-              </template>
-            </Tooltip>
-          </td>
-        </tr>
-        <tr>
-          <th>Hover delay</th>
-          <td>
-            <Tooltip :delay="500">
-              <span>Hover me</span>
-              <template #tooltip>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-              </template>
-            </Tooltip>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom placement</th>
-          <td>
-            <Flex>
-              <Tooltip placement="top">
-                <span>Above</span>
-                <template #tooltip>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-                </template>
-              </Tooltip>
-              <Tooltip placement="right">
-                <span>Right</span>
-                <template #tooltip>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-                </template>
-              </Tooltip>
-              <Tooltip placement="left">
-                <span>Left</span>
-                <template #tooltip>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-                </template>
-              </Tooltip>
-              <Tooltip placement="bottom">
-                <span>Bottom</span>
-                <template #tooltip>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-                </template>
-              </Tooltip>
-            </Flex>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang='ts'>
+import Flex from '../components/Flex/Flex.vue'
+import Tooltip from '../components/Tooltip/Tooltip.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tooltips
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Tooltip>
+              <span>Hover me</span>
+              <template #tooltip>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam minus labore commodi aliquid molestiae non voluptas, veritatis nesciunt. Nihil quod necessitatibus veritatis nam enim eius deleniti unde recusandae reprehenderit voluptate?</p>
+              </template>
+            </Tooltip>
+          </td>
+        </tr>
+        <tr>
+          <th>Hover delay</th>
+          <td>
+            <Tooltip :delay="500">
+              <span>Hover me</span>
+              <template #tooltip>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+              </template>
+            </Tooltip>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom placement</th>
+          <td>
+            <Flex>
+              <Tooltip placement="top">
+                <span>Above</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="right">
+                <span>Right</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="left">
+                <span>Left</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+              <Tooltip placement="bottom">
+                <span>Bottom</span>
+                <template #tooltip>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </template>
+              </Tooltip>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/shared/ExampleColor.vue

@@ -1,28 +1,28 @@
-<script setup lang='ts'>
-import Grid from '../../components/Grid/Grid.vue'
-
-const props = defineProps<{
-  name: string
-  color: string
-}>()
-</script>
-
-<template>
-  <Grid columns="212px 32px" align-center>
-    <span>{{ props.name }}</span>
-    <div
-      class="cube" :style="{
-        backgroundColor: `var(${props.color})`,
-      }"
-    />
-  </Grid>
-</template>
-
-<style scoped>
-.cube {
-  display: block;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--border-radius-xs);
-}
-</style>
+<script setup lang='ts'>
+import Grid from '../../components/Grid/Grid.vue'
+
+const props = defineProps<{
+  name: string
+  color: string
+}>()
+</script>
+
+<template>
+  <Grid columns="212px 32px" y-center>
+    <span>{{ props.name }}</span>
+    <div
+      class="cube" :style="{
+        backgroundColor: `var(${props.color})`,
+      }"
+    />
+  </Grid>
+</template>
+
+<style scoped>
+.cube {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius-xs);
+}
+</style>