@dolanske/vui 1.0.4 → 1.1.0

package/src/components/Toast/toast.ts

@@ -1,75 +1,75 @@
-import type { Component } from 'vue'
-import { ref } from 'vue'
-
-interface ToastAction {
-  label: string
-  handler: (toastId: number) => void
-}
-
-interface ToastOptions {
-  persist?: boolean
-  timeout?: number
-  action?: ToastAction
-  description?: string
-  body?: Component
-  bodyProps?: object
-}
-
-interface Toast {
-  id: number
-  // type: ToastType
-  title: string
-  action?: ToastAction
-  createdAt: number
-  expiresAt: number
-  description?: string
-  body?: Component
-  bodyProps?: object
-}
-
-// Store in a ref so the toast component can import it
-export const toasts = ref(new Map<number, Toast>())
-
-// Simple incremental id system
-let id = 0
-
-// function toast(type: ToastType, title: string, options?: ToastOptions): Toast {
-export function pushToast(title: string, options?: ToastOptions): Toast {
-  const parsedOptions = Object.assign({
-    persist: false,
-    timeout: 7000,
-  }, options)
-
-  const newToast = {
-    id,
-    // type,
-    title,
-    persist: parsedOptions.persist,
-    description: parsedOptions.description,
-    action: parsedOptions.action,
-    createdAt: Date.now(),
-    expiresAt: Date.now() + parsedOptions.timeout,
-    body: parsedOptions.body,
-    bodyProps: parsedOptions.bodyProps ?? {},
-  }
-
-  toasts.value.set(id, newToast)
-
-  // If options include timeout (by default) remove the toast after timeout
-  // passes
-  if (!parsedOptions.persist) {
-    setTimeout((_id: number) => {
-      toasts.value.delete(_id)
-      // Pass Id as an optional argument, becasue by the time it is executed the
-      // Id will have been increased
-    }, parsedOptions.timeout, id)
-  }
-
-  id++
-
-  return newToast
-}
-
-export function removeToast(id: number): void {
-  toasts.value.delete(id)
-}
+import type { Component } from 'vue'
+import { ref } from 'vue'
+
+interface ToastAction {
+  label: string
+  handler: (toastId: number) => void
+}
+
+interface ToastOptions {
+  persist?: boolean
+  timeout?: number
+  action?: ToastAction
+  description?: string
+  body?: Component
+  bodyProps?: object
+}
+
+interface Toast {
+  id: number
+  // type: ToastType
+  title: string
+  action?: ToastAction
+  createdAt: number
+  expiresAt: number
+  description?: string
+  body?: Component
+  bodyProps?: object
+}
+
+// Store in a ref so the toast component can import it
+export const toasts = ref(new Map<number, Toast>())
+
+// Simple incremental id system
+let id = 0
+
+// function toast(type: ToastType, title: string, options?: ToastOptions): Toast {
+export function pushToast(title: string, options?: ToastOptions): Toast {
+  const parsedOptions = Object.assign({
+    persist: false,
+    timeout: 7000,
+  }, options)
+
+  const newToast = {
+    id,
+    // type,
+    title,
+    persist: parsedOptions.persist,
+    description: parsedOptions.description,
+    action: parsedOptions.action,
+    createdAt: Date.now(),
+    expiresAt: Date.now() + parsedOptions.timeout,
+    body: parsedOptions.body,
+    bodyProps: parsedOptions.bodyProps ?? {},
+  }
+
+  toasts.value.set(id, newToast)
+
+  // If options include timeout (by default) remove the toast after timeout
+  // passes
+  if (!parsedOptions.persist) {
+    setTimeout((_id: number) => {
+      toasts.value.delete(_id)
+      // Pass Id as an optional argument, becasue by the time it is executed the
+      // Id will have been increased
+    }, parsedOptions.timeout, id)
+  }
+
+  id++
+
+  return newToast
+}
+
+export function removeToast(id: number): void {
+  toasts.value.delete(id)
+}

package/src/components/Tooltip/Tooltip.vue

@@ -1,86 +1,86 @@
-<script setup lang='ts'>
-import type { Placement } from '../../shared/types'
-import { ref, useId, useTemplateRef, watch } from 'vue'
-import Popout from '../Popout/Popout.vue'
-import './tooltip.scss'
-
-interface Props {
-  /**
-   * Tooltip placement related to the anchor
-   */
-  placement?: Placement
-  /**
-   * Amount of time user should hover the anchor until the tooltip shows up
-   */
-  delay?: number
-}
-
-const {
-  placement,
-  delay = 0,
-} = defineProps<Props>()
-
-const popoutAnchorRef = useTemplateRef('popoutAnchor')
-// Track if user is hovering the anchor
-const hoverAnchor = ref(false)
-
-// Display tooltip
-const showTooltip = ref(false)
-
-let timeoutId: NodeJS.Timeout
-watch(hoverAnchor, (isHovering) => {
-  if (isHovering) {
-    if (!delay || delay <= 0) {
-      showTooltip.value = true
-      return
-    }
-
-    clearTimeout(timeoutId)
-
-    timeoutId = setTimeout(() => {
-      // Need to reference the ref itself as this will execute without the
-      // outside scope (as far as I know tbh)
-      if (hoverAnchor.value) {
-        showTooltip.value = true
-      }
-    }, delay)
-  }
-  else {
-    clearTimeout(timeoutId)
-    showTooltip.value = false
-  }
-})
-
-const id = useId()
-</script>
-
-<template>
-  <div
-    ref="popoutAnchor"
-    :style="{
-      width: 'fit-content',
-    }"
-    :aria-describedby="id"
-    @mouseenter="hoverAnchor = true"
-    @mouseleave="hoverAnchor = false"
-  >
-    <slot />
-  </div>
-  <!-- <Transition name="tooltip"> -->
-  <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
-    <slot name="tooltip" />
-  </Popout>
-  <!-- </Transition> -->
-</template>
-
-<!-- <style scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-  transition: var(--transition-fast);
-}
-
-.tooltip-enter-from,
-.tooltip-leave-to {
-  opacity: 0;
-}
-</style> -->
+<script setup lang='ts'>
+import type { Placement } from '../../shared/types'
+import { ref, useId, useTemplateRef, watch } from 'vue'
+import Popout from '../Popout/Popout.vue'
+import './tooltip.scss'
+
+interface Props {
+  /**
+   * Tooltip placement related to the anchor
+   */
+  placement?: Placement
+  /**
+   * Amount of time user should hover the anchor until the tooltip shows up
+   */
+  delay?: number
+}
+
+const {
+  placement,
+  delay = 0,
+} = defineProps<Props>()
+
+const popoutAnchorRef = useTemplateRef('popoutAnchor')
+// Track if user is hovering the anchor
+const hoverAnchor = ref(false)
+
+// Display tooltip
+const showTooltip = ref(false)
+
+let timeoutId: NodeJS.Timeout
+watch(hoverAnchor, (isHovering) => {
+  if (isHovering) {
+    if (!delay || delay <= 0) {
+      showTooltip.value = true
+      return
+    }
+
+    clearTimeout(timeoutId)
+
+    timeoutId = setTimeout(() => {
+      // Need to reference the ref itself as this will execute without the
+      // outside scope (as far as I know tbh)
+      if (hoverAnchor.value) {
+        showTooltip.value = true
+      }
+    }, delay)
+  }
+  else {
+    clearTimeout(timeoutId)
+    showTooltip.value = false
+  }
+})
+
+const id = useId()
+</script>
+
+<template>
+  <div
+    ref="popoutAnchor"
+    :style="{
+      width: 'fit-content',
+    }"
+    :aria-describedby="id"
+    @mouseenter="hoverAnchor = true"
+    @mouseleave="hoverAnchor = false"
+  >
+    <slot />
+  </div>
+  <!-- <Transition name="tooltip"> -->
+  <Popout v-if="showTooltip" :id :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
+    <slot name="tooltip" />
+  </Popout>
+  <!-- </Transition> -->
+</template>
+
+<!-- <style scoped>
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: var(--transition-fast);
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  opacity: 0;
+}
+</style> -->

package/src/components/Tooltip/tooltip.scss

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

package/src/examples/ExampleAccordions.vue

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

@@ -1,78 +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>
+<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 y-center x-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>