Notivue - Add styles prop

smastrom · Jan 27, 2024 · 4df8a21 · 4df8a21
1 parent 7eb64a9
commit 4df8a21
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue
@@ -48,8 +48,8 @@ useRepositioning()
          :data-notivue-align="config.isTopAlign.value ? 'top' : 'bottom'"
          :aria-label="props.listAriaLabel"
          :ref="elements.root"
-         :style="styles.stream"
          :class="props.class"
+         :style="{ ...styles.list, ...props.styles?.list }"
       >
          <!-- List Item -->
          <li
@@ -61,22 +61,23 @@ useRepositioning()
             :aria-posinset="index + 1"
             :ref="elements.items"
             :style="{
-               ...styles.item,
+               ...styles.listItem,
                ...item.positionStyles,
+               ...props.styles?.listItem,
             }"
          >
             <!-- ariaLiveOnly Push Option -->
             <AriaLive v-if="item.ariaLiveOnly" :item="item" />
 
-            <!-- Notification Container -->
+            <!-- Item Container -->
             <div
                v-else
                v-bind="item.animationAttrs"
                :aria-label="getAriaLabel(item)"
                :tabindex="containersTabIndex?.[item.id] ?? -1"
                :data-notivue-container="item.id"
                :ref="elements.containers"
-               :style="styles.container"
+               :style="{ ...styles.itemContainer, ...props.styles?.itemContainer }"
             >
                <!-- Notification -->
                <slot v-bind="getSlotItem(item)" />

diff --git a/packages/notivue/Notivue/composables/useNotivueStyles.ts b/packages/notivue/Notivue/composables/useNotivueStyles.ts
@@ -15,7 +15,7 @@ import type { NotivueElements } from 'notivue'
 const boxSizing: CSSProperties = { boxSizing: 'border-box' }
 
 const baseStyles: Record<NotivueElements, CSSProperties> = {
-   stream: {
+   list: {
       ...boxSizing,
       display: 'flex',
       justifyContent: 'center',
@@ -27,15 +27,15 @@ const baseStyles: Record<NotivueElements, CSSProperties> = {
       position: 'fixed',
       zIndex: 'var(--nv-z, 500)',
    },
-   item: {
+   listItem: {
       ...boxSizing,
       display: 'flex',
       margin: '0',
       position: 'absolute',
       transitionProperty: 'transform',
       width: '100%',
    },
-   container: {
+   itemContainer: {
       ...boxSizing,
       maxWidth: '100%',
       padding: `0 0 var(--nv-gap, 0.75rem) 0`,
@@ -79,8 +79,8 @@ export function useNotivueStyles() {
    }))
 
    return computed<Record<NotivueElements, CSSProperties>>(() => ({
-      stream: { ...baseStyles.stream, ...offset.value },
-      item: { ...baseStyles.item, ...xAlignment.value },
-      container: baseStyles.container,
+      list: { ...baseStyles.list, ...offset.value },
+      listItem: { ...baseStyles.listItem, ...xAlignment.value },
+      itemContainer: baseStyles.itemContainer,
    }))
 }
diff --git a/packages/notivue/Notivue/types.ts b/packages/notivue/Notivue/types.ts
@@ -1,4 +1,4 @@
-import type { Component } from 'vue'
+import type { CSSProperties, Component } from 'vue'
 import type { ContainersTabIndexMap } from '@/NotivueKeyboard/types'
 import type { NotivueItem } from 'notivue'
 
@@ -16,6 +16,29 @@ export interface NotivueProps {
     * @default "Notifications"
     */
    listAriaLabel?: string
+   /**
+    * CSS styles for the list container, list items and notification containers.
+    *
+    * They have higher priority over the internal styles and will override them.
+    *
+    * ```ts
+    * const styles = {
+    *   list: {
+    *     position: 'relative',
+    *     height: '100%',
+    *   },
+    *   listItem: {
+    *     // ...
+    *   },
+    *   itemContainer: {
+    *     // ...
+    *   },
+    * }
+    * ```
+    *
+    * @default undefined
+    */
+   styles?: Partial<Record<NotivueElements, CSSProperties>>
 }
 
 export interface NotivueComponentSlot {
@@ -24,4 +47,4 @@ export interface NotivueComponentSlot {
 
 // Elements
 
-export type NotivueElements = 'stream' | 'item' | 'container'
+export type NotivueElements = 'list' | 'listItem' | 'itemContainer'