@dolanske/vui 1.0.3 → 1.1.0

package/src/examples/ExampleDrawers.vue

@@ -1,67 +1,67 @@
-<script setup lang='ts'>
-import type { Sizes } from '../shared/types'
-import { ref } from 'vue'
-import Button from '../components/Button/Button.vue'
-import Drawer from '../components/Drawer/Drawer.vue'
-import Flex from '../components/Flex/Flex.vue'
-
-const open = ref(false)
-const open2 = ref(false)
-
-const size = ref<Sizes | 'full'>('s')
-function setSize(s: any) {
-  size.value = s
-  open.value = true
-}
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Drawers
-    </h3>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>Base</th>
-          <td>
-            <Flex>
-              <Button square @click="setSize('s')">
-                S
-              </Button>
-              <Button square @click="setSize('m')">
-                M
-              </Button>
-              <Button square @click="setSize('l')">
-                L
-              </Button>
-              <Button square @click="setSize('xl')">
-                XL
-              </Button>
-              <Button square @click="setSize('full')">
-                Full
-              </Button>
-            </Flex>
-            <Drawer v-model="open" title="Hello" :container-size="size">
-              <h2>Hello</h2>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
-            </Drawer>
-          </td>
-        </tr>
-        <tr>
-          <th>With animation + no handle</th>
-          <td>
-            <Button @click="open2 = !open2">
-              Open
-            </Button>
-            <Drawer v-model="open2" :handle="false" title="Hello" :container-size="size" :root-props="{ shouldScaleBackground: true }">
-              <h2>Hello</h2>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
-            </Drawer>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang='ts'>
+import type { Sizes } from '../shared/types'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Drawer from '../components/Drawer/Drawer.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const open = ref(false)
+const open2 = ref(false)
+
+const size = ref<Sizes | 'full'>('s')
+function setSize(s: any) {
+  size.value = s
+  open.value = true
+}
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Drawers
+    </h3>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Flex>
+              <Button square @click="setSize('s')">
+                S
+              </Button>
+              <Button square @click="setSize('m')">
+                M
+              </Button>
+              <Button square @click="setSize('l')">
+                L
+              </Button>
+              <Button square @click="setSize('xl')">
+                XL
+              </Button>
+              <Button square @click="setSize('full')">
+                Full
+              </Button>
+            </Flex>
+            <Drawer :open title="Hello" :container-size="size" @close="open = false">
+              <h2>Hello</h2>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
+            </Drawer>
+          </td>
+        </tr>
+        <tr>
+          <th>With animation + no handle</th>
+          <td>
+            <Button @click="open2 = !open2">
+              Open
+            </Button>
+            <Drawer :open="open2" :handle="false" title="Hello" :container-size="size" @close="open2 = false">
+              <h2>Hello</h2>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta cupiditate laudantium maiores? Nesciunt harum doloribus accusantium architecto, quod rem porro iusto, quia dicta ex sapiente nulla earum voluptatibus, dolor veritatis?</p>
+            </Drawer>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleDropdowns.vue

@@ -1,114 +1,114 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import Button from '../components/Button/Button.vue'
-import Dropdown from '../components/Dropdown/Dropdown.vue'
-import DropdownItem from '../components/Dropdown/DropdownItem.vue'
-import DropdownTitle from '../components/Dropdown/DropdownTitle.vue'
-import Flex from '../components/Flex/Flex.vue'
-
-const placements = ['top', 'bottom', 'left', 'right'] as const
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Dropdowns
-    </h3>
-
-    <table class="mb-xxl">
-      <tbody>
-        <tr>
-          <th>
-            Base + expand <br> (dropdown takes width of the trigger)
-          </th>
-          <td>
-            <Dropdown expand>
-              <template #trigger="{ toggle }">
-                <Button class="btn btn-primary" expand @click="toggle">
-                  Dropdown
-                </Button>
-              </template>
-              <DropdownItem>New user</DropdownItem>
-              <DropdownItem>Update</DropdownItem>
-              <DropdownItem>Cancel</DropdownItem>
-            </Dropdown>
-          </td>
-        </tr>
-        <tr>
-          <th>
-            Placements (some)
-          </th>
-          <td>
-            <Flex>
-              <Dropdown v-for="placement in placements" :key="placement" :placement="placement">
-                <template #trigger="{ toggle }">
-                  <Button class="btn btn-primary" @click="toggle">
-                    {{ placement }}
-                  </Button>
-                </template>
-
-                <DropdownItem>New user</DropdownItem>
-                <DropdownItem>Update</DropdownItem>
-                <DropdownItem>Cancel</DropdownItem>
-              </Dropdown>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Complex</th>
-          <td>
-            <Dropdown>
-              <template #trigger="{ toggle }">
-                <Button class="btn btn-primary" @click="toggle">
-                  Dropdown
-                </Button>
-              </template>
-
-              <DropdownTitle>
-                Actions
-                <template #end>
-                  3
-                </template>
-              </DropdownTitle>
-
-              <DropdownItem icon="ph:user">
-                New user
-                <template #hint>
-                  <Icon icon="ic:round-keyboard-command-key" />
-                  + C
-                </template>
-              </DropdownItem>
-              <DropdownItem icon-end="ph:arrow-right">
-                Update
-              </DropdownItem>
-              <DropdownItem>Cancel</DropdownItem>
-
-              <DropdownTitle>Yourself</DropdownTitle>
-              <DropdownItem icon="ph:x" disabled>
-                Disabled option
-              </DropdownItem>
-              <DropdownItem icon="ph:x">
-                Delete
-              </DropdownItem>
-            </Dropdown>
-          </td>
-        </tr>
-        <tr>
-          <th>Disabled</th>
-          <td>
-            <Dropdown expand>
-              <template #trigger="{ toggle }">
-                <Button class="btn btn-primary" disabled @click="toggle">
-                  Dropdown
-                </Button>
-              </template>
-              <DropdownItem>New user</DropdownItem>
-              <DropdownItem>Update</DropdownItem>
-              <DropdownItem>Cancel</DropdownItem>
-            </Dropdown>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from '../components/Button/Button.vue'
+import Dropdown from '../components/Dropdown/Dropdown.vue'
+import DropdownItem from '../components/Dropdown/DropdownItem.vue'
+import DropdownTitle from '../components/Dropdown/DropdownTitle.vue'
+import Flex from '../components/Flex/Flex.vue'
+
+const placements = ['top', 'bottom', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Dropdowns
+    </h3>
+
+    <table class="mb-xxl">
+      <tbody>
+        <tr>
+          <th>
+            Base + expand <br> (dropdown takes width of the trigger)
+          </th>
+          <td>
+            <Dropdown expand>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" expand @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+              <DropdownItem>New user</DropdownItem>
+              <DropdownItem>Update</DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            Placements (some)
+          </th>
+          <td>
+            <Flex>
+              <Dropdown v-for="placement in placements" :key="placement" :placement="placement">
+                <template #trigger="{ toggle }">
+                  <Button class="btn btn-primary" @click="toggle">
+                    {{ placement }}
+                  </Button>
+                </template>
+
+                <DropdownItem>New user</DropdownItem>
+                <DropdownItem>Update</DropdownItem>
+                <DropdownItem>Cancel</DropdownItem>
+              </Dropdown>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Complex</th>
+          <td>
+            <Dropdown>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+
+              <DropdownTitle>
+                Actions
+                <template #end>
+                  3
+                </template>
+              </DropdownTitle>
+
+              <DropdownItem icon="ph:user">
+                New user
+                <template #hint>
+                  <Icon icon="ic:round-keyboard-command-key" />
+                  + C
+                </template>
+              </DropdownItem>
+              <DropdownItem icon-end="ph:arrow-right">
+                Update
+              </DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+
+              <DropdownTitle>Yourself</DropdownTitle>
+              <DropdownItem icon="ph:x" disabled>
+                Disabled option
+              </DropdownItem>
+              <DropdownItem icon="ph:x">
+                Delete
+              </DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+        <tr>
+          <th>Disabled</th>
+          <td>
+            <Dropdown expand>
+              <template #trigger="{ toggle }">
+                <Button class="btn btn-primary" disabled @click="toggle">
+                  Dropdown
+                </Button>
+              </template>
+              <DropdownItem>New user</DropdownItem>
+              <DropdownItem>Update</DropdownItem>
+              <DropdownItem>Cancel</DropdownItem>
+            </Dropdown>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/examples/ExampleFlexGrid.vue

@@ -1,122 +1,124 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import Flex from '../components/Flex/Flex.vue'
-import Grid from '../components/Grid/Grid.vue'
-
-const cols = ref(3)
-</script>
-
-<template>
-  <div class="mb-xxl">
-    <h3 class="mb-l">
-      Layouts
-    </h3>
-
-    <h6 class="block mb-m">
-      Flex
-    </h6>
-
-    <table class="mb-l">
-      <tbody>
-        <tr>
-          <th>Flex + gaps <br> (gap can either be set as a size or a number)</th>
-          <td class="w-85">
-            <Flex gap="l" column>
-              <Flex v-for="size in ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] as const" :key="size" expand :gap="size">
-                <div v-for="key in 3" :key class="example flex-1">
-                  {{ size.toUpperCase() }}
-                </div>
-              </Flex>
-            </Flex>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <p class="mb-s">
-      All of the following props are boolean props
-    </p>
-
-    <table class="mb-xl">
-      <tbody>
-        <tr>
-          <th>Display props</th>
-          <td>
-            <Flex>
-              <code>inline</code><code>wrap</code><code>wrap-reverse</code><code>expand</code>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Flow props</th>
-          <td>
-            <Flex>
-              <code>row</code><code>column</code><code>row-reverse</code><code>column-reverse</code>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Justify props</th>
-          <td>
-            <Flex>
-              <code>justify-start</code><code>justify-end</code><code>justify-center</code>
-              <code>space-between</code><code>space-around</code><code>space-evenly</code>
-            </Flex>
-          </td>
-        </tr>
-        <tr>
-          <th>Align props</th>
-          <td>
-            <Flex>
-              <code>align-start</code><code>align-end</code><code>align-center</code>
-              <code>align-baseline</code>
-            </Flex>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <h6 class="block mb-m">
-      Grid
-    </h6>
-
-    <p class="mb-s">
-      This grid utility is mostly meant for simple grid layouts. For anything mroe complicated, write your layouts in CSS. It supports setting <code>rows</code> or <code>columns</code> prop with a number or a string (the same way you'd write the CSS properties)
-    </p>
-
-    <p class="mb-s">
-      You can also set the `inlin` boolean prop and the `gap` prop which is a size prop or a number
-    </p>
-
-    <table>
-      <tbody>
-        <tr>
-          <th>
-            Base
-            <select v-model="cols" class="mt-s block">
-              <option v-for="key in 5" :key :value="key + 1">
-                Cols: {{ key + 1 }}
-              </option>
-            </select>
-          </th>
-          <td class="w-85">
-            <Grid :columns="cols" gap="l">
-              <div v-for="key in 9" :key class="example">
-                {{ key }}
-              </div>
-            </Grid>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-.example {
-  height: 24px;
-  border-radius: var(--border-radius-m);
-  background-color: var(--color-border);
-  text-align: center;
-}
-</style>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Flex from '../components/Flex/Flex.vue'
+import Grid from '../components/Grid/Grid.vue'
+
+const cols = ref(3)
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Layouts
+    </h3>
+
+    <h6 class="block mb-m">
+      Flex
+    </h6>
+
+    <table class="mb-l">
+      <tbody>
+        <tr>
+          <th>Flex + gaps <br> (gap can either be set as a size or a number)</th>
+          <td class="w-85">
+            <Flex gap="l" column>
+              <Flex v-for="size in ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'] as const" :key="size" expand :gap="size">
+                <div v-for="key in 3" :key class="example flex-1">
+                  {{ size.toUpperCase() }}
+                </div>
+              </Flex>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p class="mb-s">
+      All of the following props are boolean props
+    </p>
+
+    <table class="mb-xl">
+      <tbody>
+        <tr>
+          <th>Display props</th>
+          <td>
+            <Flex>
+              <code>inline</code><code>wrap</code><code>wrap-reverse</code><code>expand</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Flow props</th>
+          <td>
+            <Flex>
+              <code>row</code><code>column</code><code>row-reverse</code><code>column-reverse</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Justify props</th>
+          <td>
+            <Flex>
+              <code>justify-start</code><code>justify-end</code><code>justify-center</code>
+              <code>space-between</code><code>space-around</code><code>space-evenly</code>
+            </Flex>
+          </td>
+        </tr>
+        <tr>
+          <th>Align props</th>
+          <td>
+            <Flex>
+              <code>align-start</code><code>align-end</code><code>y-center</code>
+              <code>align-baseline</code>
+            </Flex>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h6 class="block mb-m">
+      Grid
+    </h6>
+
+    <p class="mb-s">
+      This grid utility is mostly meant for simple grid layouts. For anything mroe complicated, write your layouts in CSS. It supports setting <code>rows</code> or <code>columns</code> prop with a number or a string (the same way you'd write the CSS properties)
+    </p>
+
+    <p class="mb-s">
+      You can also set the `inlin` boolean prop and the `gap` prop which is a size prop or a number
+    </p>
+
+    <table>
+      <tbody>
+        <tr>
+          <th>
+            Base
+            <select v-model="cols" class="mt-s block">
+              <option v-for="key in 5" :key :value="key + 1">
+                Cols: {{ key + 1 }}
+              </option>
+            </select>
+          </th>
+          <td class="w-85">
+            <Grid :columns="cols" gap="l">
+              <div v-for="key in 9" :key class="example">
+                {{ key }}
+              </div>
+            </Grid>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.example {
+  display: block;
+  width: 100%;
+  height: 24px;
+  border-radius: var(--border-radius-m);
+  background-color: var(--color-border);
+  text-align: center;
+}
+</style>