@dolanske/vui 1.0.4 → 1.1.0

package/src/examples/ExampleCards.vue

@@ -1,94 +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>
+<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" x-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" x-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" x-end>
+              <Button>Cancel</Button>
+              <Button variant="success">
+                Save
+              </Button>
+            </Flex>
+          </template>
+        </Card>
+      </Flex>
+    </Grid>
+  </div>
+</template>

package/src/examples/ExampleCheckboxes.vue

@@ -1,123 +1,123 @@
-<script setup lang='ts'>
-import Checkbox from '../components/Checkbox/Checkbox.vue'
-import Grid from '../components/Grid/Grid.vue'
-import Radio from '../components/Radio/Radio.vue'
-import RadioGroup from '../components/Radio/RadioGroup.vue'
-import Switch from '../components/Switch/Switch.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <Grid :columns="2" gap="xl">
-      <div>
-        <h3 class="mb-l">
-          Checkbox
-        </h3>
-        <table class="mb-xl w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <Checkbox label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <Checkbox label="Just click me" accent />
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <Checkbox disabled label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Custom icons</th>
-              <td>
-                <Checkbox icon-on="ph:check-fat" icon-off="ph:x-bold" label="Just click me" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h3 class="mb-l">
-          Switch
-        </h3>
-        <table class="mb-xl w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <Switch label="Just click me" />
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <Switch label="Just click me" accent />
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <Switch label="Just click me" disabled />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div>
-        <h3 class="mb-l">
-          Radio group
-        </h3>
-
-        <table class="w-100">
-          <tbody>
-            <tr>
-              <th>Base</th>
-              <td>
-                <RadioGroup>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Accent</th>
-              <td>
-                <RadioGroup>
-                  <Radio value="one" label="First" accent />
-                  <Radio value="two" label="Second" accent />
-                  <Radio value="three" label="Third" disabled accent />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Vertical</th>
-              <td>
-                <RadioGroup column>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-            <tr>
-              <th>Disabled</th>
-              <td>
-                <RadioGroup column disabled>
-                  <Radio value="one" label="First" />
-                  <Radio value="two" label="Second" />
-                  <Radio value="three" label="Third" disabled />
-                </RadioGroup>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </Grid>
-  </div>
-</template>
+<script setup lang='ts'>
+import Checkbox from '../components/Checkbox/Checkbox.vue'
+import Grid from '../components/Grid/Grid.vue'
+import Radio from '../components/Radio/Radio.vue'
+import RadioGroup from '../components/Radio/RadioGroup.vue'
+import Switch from '../components/Switch/Switch.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <Grid :columns="2" gap="xl">
+      <div>
+        <h3 class="mb-l">
+          Checkbox
+        </h3>
+        <table class="mb-xl w-100">
+          <tbody>
+            <tr>
+              <th>Base</th>
+              <td>
+                <Checkbox label="Just click me" />
+              </td>
+            </tr>
+            <tr>
+              <th>Accent</th>
+              <td>
+                <Checkbox label="Just click me" accent />
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <Checkbox disabled label="Just click me" />
+              </td>
+            </tr>
+            <tr>
+              <th>Custom icons</th>
+              <td>
+                <Checkbox icon-on="ph:check-fat" icon-off="ph:x-bold" label="Just click me" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h3 class="mb-l">
+          Switch
+        </h3>
+        <table class="mb-xl w-100">
+          <tbody>
+            <tr>
+              <th>Base</th>
+              <td>
+                <Switch label="Just click me" />
+              </td>
+            </tr>
+            <tr>
+              <th>Accent</th>
+              <td>
+                <Switch label="Just click me" accent />
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <Switch label="Just click me" disabled />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <h3 class="mb-l">
+          Radio group
+        </h3>
+
+        <table class="w-100">
+          <tbody>
+            <tr>
+              <th>Base</th>
+              <td>
+                <RadioGroup>
+                  <Radio value="one" label="First" />
+                  <Radio value="two" label="Second" />
+                  <Radio value="three" label="Third" disabled />
+                </RadioGroup>
+              </td>
+            </tr>
+            <tr>
+              <th>Accent</th>
+              <td>
+                <RadioGroup>
+                  <Radio value="one" label="First" accent />
+                  <Radio value="two" label="Second" accent />
+                  <Radio value="three" label="Third" disabled accent />
+                </RadioGroup>
+              </td>
+            </tr>
+            <tr>
+              <th>Vertical</th>
+              <td>
+                <RadioGroup column>
+                  <Radio value="one" label="First" />
+                  <Radio value="two" label="Second" />
+                  <Radio value="three" label="Third" disabled />
+                </RadioGroup>
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <RadioGroup column disabled>
+                  <Radio value="one" label="First" />
+                  <Radio value="two" label="Second" />
+                  <Radio value="three" label="Third" disabled />
+                </RadioGroup>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Grid>
+  </div>
+</template>

package/src/examples/ExampleCopyClipboard.vue

@@ -1,47 +1,47 @@
-<script setup lang='ts'>
-import Button from '../components/Button/Button.vue'
-import CopyClipboard from '../components/CopyClipboard/CopyClipboard.vue'
-import Flex from '../components/Flex/Flex.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Clipboard copy
-    </h3>
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <CopyClipboard text="Copy me!">
-              <p>Copy me!</p>
-            </CopyClipboard>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom slot & confirmation</th>
-          <td>
-            <CopyClipboard text="Copy me!" confirm>
-              <Button>Copy me!</Button>
-            </CopyClipboard>
-          </td>
-        </tr>
-        <tr>
-          <th>Custom confirm popup</th>
-          <td>
-            <CopyClipboard text="Copy me!" confirm>
-              <Button>Copy me!</Button>
-              <template #confirm>
-                <Flex column gap="s" align-center>
-                  <strong>The dawg</strong>
-                  <img style="width:128px;border-radius:8px" src="https://i.imgur.com/jMxIs6p.png" alt="">
-                </Flex>
-              </template>
-            </CopyClipboard>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang='ts'>
+import Button from '../components/Button/Button.vue'
+import CopyClipboard from '../components/CopyClipboard/CopyClipboard.vue'
+import Flex from '../components/Flex/Flex.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Clipboard copy
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <CopyClipboard text="Copy me!">
+              <p>Copy me!</p>
+            </CopyClipboard>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom slot & confirmation</th>
+          <td>
+            <CopyClipboard text="Copy me!" confirm>
+              <Button>Copy me!</Button>
+            </CopyClipboard>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom confirm popup</th>
+          <td>
+            <CopyClipboard text="Copy me!" confirm>
+              <Button>Copy me!</Button>
+              <template #confirm>
+                <Flex column gap="s" y-center>
+                  <strong>The dawg</strong>
+                  <img style="width:128px;border-radius:8px" src="https://i.imgur.com/jMxIs6p.png" alt="">
+                </Flex>
+              </template>
+            </CopyClipboard>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleDividers.vue

@@ -1,39 +1,39 @@
-<script setup lang='ts'>
-import Avatar from '../components/Avatar/Avatar.vue'
-import Divider from '../components/Divider/Divider.vue'
-import Flex from '../components/Flex/Flex.vue'
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Dividers
-    </h3>
-
-    <div class="container container-s">
-      <p>Standard divider</p>
-      <Divider />
-      <p>Divider with a variable spacing. For instance 80px. This means there will be a gap of 40 pixels above and below the divider. Size serves a different purpose with vertical dividers, so to achieve the same thing, you could also set the margin to <code>40px 0</code></p>
-      <Divider :size="80" />
-      <p>Using margin. The default divider size is 32px, so we need to either set it to 0 or offset the provided margin.</p>
-      <Divider margin="40px 0" />
-
-      <p>Different thickness (you specify the number of pixels)</p>
-      <Divider :thickness="5" :size="64" />
-      <p class="mb-s">
-        Vertical dividers. Here, size is the height of the divider. And if you want to add extra spacing between dividers, jsut set the margin to something like <code>0 16px</code>.
-      </p>
-      <Flex class="mb-xl">
-        <span>One</span>
-        <Divider vertical :size="16" />
-        <span>Two</span>
-        <Divider vertical :size="16" />
-        <span>Three</span>
-      </Flex>
-      <p>Dividers also accept a slot. This is rendered in the center, overlaying the divider. For instance an icon or an avatar, but it can be any component.</p>
-      <Divider size="80">
-        <Avatar />
-      </Divider>
-    </div>
-  </div>
-</template>
+<script setup lang='ts'>
+import Avatar from '../components/Avatar/Avatar.vue'
+import Divider from '../components/Divider/Divider.vue'
+import Flex from '../components/Flex/Flex.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Dividers
+    </h3>
+
+    <div class="container container-s">
+      <p>Standard divider</p>
+      <Divider />
+      <p>Divider with a variable spacing. For instance 80px. This means there will be a gap of 40 pixels above and below the divider. Size serves a different purpose with vertical dividers, so to achieve the same thing, you could also set the margin to <code>40px 0</code></p>
+      <Divider :size="80" />
+      <p>Using margin. The default divider size is 32px, so we need to either set it to 0 or offset the provided margin.</p>
+      <Divider margin="40px 0" />
+
+      <p>Different thickness (you specify the number of pixels)</p>
+      <Divider :thickness="5" :size="64" />
+      <p class="mb-s">
+        Vertical dividers. Here, size is the height of the divider. And if you want to add extra spacing between dividers, jsut set the margin to something like <code>0 16px</code>.
+      </p>
+      <Flex class="mb-xl">
+        <span>One</span>
+        <Divider vertical :size="16" />
+        <span>Two</span>
+        <Divider vertical :size="16" />
+        <span>Three</span>
+      </Flex>
+      <p>Dividers also accept a slot. This is rendered in the center, overlaying the divider. For instance an icon or an avatar, but it can be any component.</p>
+      <Divider size="80">
+        <Avatar />
+      </Divider>
+    </div>
+  </div>
+</template>