2.2.0 (#41)

* Core - Tiny quality of life timeouts refactor * Demo - Add auto imports everywhere * Core - Some rename refactorings * Pkg - Update demo website url * Demo - Fix QueueCount auto import * Core - Some utils rename refactorings * Core - Streamline refactor pause/resume timeout handling * Demo - Disable center on mobile button if not necessary * Core - Cleanup some unnecessary code * Core - Rename `getSlotContext` to `getSlotItem` * Pkg - Up deps * Core - Clenup some other unnecessary code * Core - More rename refactorings * Notivue - Add feature to disable teleport * Notivue - Add `styles` prop * Pkg - Bump v2.2.0 * Demo - Remove componentIslands to fix cloudflare deploy error * Demo - Add vue to devDependencies to fix cloudflare deploy
smastrom · Jan 27, 2024 · 16c197a · 16c197a
1 parent 0448cc3
commit 16c197a
Show file tree

Hide file tree

Showing 33 changed files with 224 additions and 268 deletions.
diff --git a/demo/app.vue b/demo/app.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import type { NotivueItem } from 'notivue'
 
-import Nav from '@/components/nav/Nav.vue'
-import Background from '@/components/shared/Background.vue'
-import QueueCount from '@/components/shared/QueueCount.vue'
-
 import FriendRequestNotification, {
    type FriendRequestNotificationProps,
 } from '@/components/custom-notifications/FriendRequestNotification.vue'
@@ -64,9 +60,9 @@ watch(
       </Notivue>
    </NotivueKeyboard>
 
-   <QueueCount />
+   <SharedQueueCount />
    <Nav />
-   <Background />
+   <SharedBackground />
 </template>
 
 <style>

diff --git a/demo/components/custom-notifications/UploadNotification.vue b/demo/components/custom-notifications/UploadNotification.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import CloseIcon from '../icons/CloseIcon.vue'
-
 import type { NotivueItem } from 'notivue'
 
 export interface UploadNotificationProps {
@@ -21,7 +19,7 @@ const isPromise = computed(() => notification.item.type === 'promise')
          <div class="Title">
             <h3 :aria-live="item.ariaLive" :role="item.ariaRole">{{ item.message }}</h3>
             <button class="Close" @click="item.clear" v-if="!isPromise">
-               <CloseIcon />
+               <IconsCloseIcon />
             </button>
          </div>
       </div>

diff --git a/demo/components/nav/Nav.vue b/demo/components/nav/Nav.vue
@@ -1,51 +1,40 @@
-<script setup lang="ts">
-import NavNotivueConfig from './NavNotivueConfig.vue'
-import NavNotificationsThemes from './NavNotificationsThemes.vue'
-import NavPushBuiltIn from './NavPushBuiltIn.vue'
-import NavPushHeadless from './NavPushHeadless.vue'
-import NavNotivuePosition from './NavNotivuePosition.vue'
-import ButtonGroup from '../shared/ButtonGroup.vue'
-import Button from '../shared/Button.vue'
-import DismissIcon from '../icons/DismissIcon.vue'
-import DestroyIcon from '../icons/DestroyIcon.vue'
-import NavNotificationsCustomization from './NavNotificationsCustomization.vue'
-</script>
-
 <template>
    <nav dir="ltr">
       <div class="Container">
-         <ButtonGroup name="Position">
+         <SharedButtonGroup name="Position">
             <NavNotivuePosition />
-         </ButtonGroup>
+         </SharedButtonGroup>
 
-         <ButtonGroup name="Config">
+         <SharedButtonGroup name="Config">
             <NavNotivueConfig />
-         </ButtonGroup>
+         </SharedButtonGroup>
 
          <div class="DefaultComponent">
-            <ButtonGroup name="Push 👇" isPush>
+            <SharedButtonGroup name="Push 👇" isPush>
                <NavPushBuiltIn />
-            </ButtonGroup>
+            </SharedButtonGroup>
 
-            <ButtonGroup name="Theme">
+            <SharedButtonGroup name="Theme">
                <NavNotificationsThemes />
-            </ButtonGroup>
+            </SharedButtonGroup>
 
-            <ButtonGroup name="Features">
+            <SharedButtonGroup name="Features">
                <NavNotificationsCustomization />
-            </ButtonGroup>
+            </SharedButtonGroup>
          </div>
 
-         <ButtonGroup name="Headless 👇" isPush>
+         <SharedButtonGroup name="Headless 👇" isPush>
             <NavPushHeadless />
-         </ButtonGroup>
+         </SharedButtonGroup>
 
-         <ButtonGroup name="Actions">
-            <Button @click="push.clearAll()" text="Dismiss All"> <DismissIcon /> </Button>
-            <Button @click="push.destroyAll()" text="Destroy All">
-               <DestroyIcon />
-            </Button>
-         </ButtonGroup>
+         <SharedButtonGroup name="Actions">
+            <SharedButton @click="push.clearAll()" text="Dismiss All">
+               <IconsDismissIcon />
+            </SharedButton>
+            <SharedButton @click="push.destroyAll()" text="Destroy All">
+               <IconsDestroyIcon />
+            </SharedButton>
+         </SharedButtonGroup>
       </div>
    </nav>
 </template>

diff --git a/demo/components/nav/NavNotivuePosition.vue b/demo/components/nav/NavNotivuePosition.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Position } from 'notivue'
 
-import ArrowIcon from '../icons/ArrowIcon.vue'
-
 const { state, actions } = useStore()
 const config = useNotivue()
 
@@ -34,7 +32,7 @@ function setPosition(position: Position) {
          :aria-label="position.label"
          :aria-checked="config.position.value === position.value"
       >
-         <ArrowIcon :rotate="position.rotate" />
+         <IconsArrowIcon :rotate="position.rotate" />
       </div>
 
       <button
@@ -50,6 +48,7 @@ function setPosition(position: Position) {
          role="switch"
          :aria-checked="state.centerOnMobile"
          @click="actions.toggleCenterOnMobile"
+         :disabled="config.position.value.endsWith('center')"
       >
          Center on Mobile
       </button>

diff --git a/demo/components/nav/NavPushBuiltIn.vue b/demo/components/nav/NavPushBuiltIn.vue
@@ -1,21 +1,14 @@
 <script setup lang="ts">
-import Button from '../shared/Button.vue'
-import SuccessIcon from '../icons/SuccessIcon.vue'
-import PromiseIcon from '../icons/PromiseIcon.vue'
-import InfoIcon from '../icons/InfoIcon.vue'
-import WarnIcon from '../icons/WarnIcon.vue'
-
 const { state } = useStore()
-
 const { messages } = useStore()
 
 async function asyncRefMessagePush() {
    const initialMessage = ref(state.rtl ? 'جاري تحميل الملفات...' : 'Preparing to upload files...')
    const notification = push.promise({ message: initialMessage })
 
-   for (const i of [1, 2, 3]) {
+   for (let n = 1; n < 4; n++) {
       await new Promise((resolve) => setTimeout(resolve, getRandomInt(1000, 2000)))
-      initialMessage.value = state.rtl ? `جاري تحميل الملف ${i}/3...` : `Uploading file ${i}/3...`
+      initialMessage.value = state.rtl ? `جاري تحميل الملف ${n}/3...` : `Uploading file ${n}/3...`
    }
 
    await new Promise((resolve) => setTimeout(resolve, getRandomInt(1000, 2000)))
@@ -37,7 +30,7 @@ async function asyncPush() {
 </script>
 
 <template>
-   <Button
+   <SharedButton
       @click="
          push.success({
             ...messages.success,
@@ -51,18 +44,18 @@ async function asyncPush() {
       "
       text="Success"
    >
-      <SuccessIcon />
-   </Button>
-   <Button @click="push.error(messages.error)" text="Error">
-      <WarnIcon :isWarn="false" />
-   </Button>
-   <Button @click="push.warning(messages.warning)" text="Warn">
-      <WarnIcon :isWarn="true" />
-   </Button>
-   <Button @click="push.info(messages.info)" text="Info">
-      <InfoIcon />
-   </Button>
-   <Button @click="asyncPush" text="Promise">
-      <PromiseIcon />
-   </Button>
+      <IconsSuccessIcon />
+   </SharedButton>
+   <SharedButton @click="push.error(messages.error)" text="Error">
+      <IconsWarnIcon :isWarn="false" />
+   </SharedButton>
+   <SharedButton @click="push.warning(messages.warning)" text="Warn">
+      <IconsWarnIcon isWarn />
+   </SharedButton>
+   <SharedButton @click="push.info(messages.info)" text="Info">
+      <IconsInfoIcon />
+   </SharedButton>
+   <SharedButton @click="asyncPush" text="Promise">
+      <IconsPromiseIcon />
+   </SharedButton>
 </template>
diff --git a/demo/components/nav/NavPushHeadless.vue b/demo/components/nav/NavPushHeadless.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import VueIcon from '../icons/VueIcon.vue'
-import Button from '../shared/Button.vue'
-
 import profilePicture from '@/assets/profile-picture.jpg?url'
 
 import type { UploadNotificationProps } from '@/components/custom-notifications/UploadNotification.vue'
@@ -82,13 +79,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-   <Button @click="pushFriendRequest" text="Actions">
-      <VueIcon />
-   </Button>
-   <Button @click="pushFileUpload" text="Promise">
-      <VueIcon />
-   </Button>
-   <Button @click="pushSimple" text="Simple">
-      <VueIcon />
-   </Button>
+   <SharedButton @click="pushFriendRequest" text="Actions">
+      <IconsVueIcon />
+   </SharedButton>
+   <SharedButton @click="pushFileUpload" text="Promise">
+      <IconsVueIcon />
+   </SharedButton>
+   <SharedButton @click="pushSimple" text="Simple">
+      <IconsVueIcon />
+   </SharedButton>
 </template>
diff --git a/demo/components/shared/Background.vue → demo/components/shared/Background.server.vue b/demo/components/shared/Background.vue → demo/components/shared/Background.server.vue
diff --git a/demo/components/shared/Button.vue b/demo/components/shared/Button.vue
@@ -3,13 +3,13 @@ const props = defineProps<{
    text: string
 }>()
 
-const emits = defineEmits<{
+const emit = defineEmits<{
    (event: 'click'): void
 }>()
 </script>
 
 <template>
-   <button @click="emits('click')" class="ButtonBase" role="button">
+   <button @click="emit('click')" class="ButtonBase" role="button">
       <slot />
       <span>{{ props.text }}</span>
    </button>

diff --git a/demo/nuxt.config.ts b/demo/nuxt.config.ts
@@ -3,8 +3,8 @@ import { getHead } from './utils/head'
 export default defineNuxtConfig({
    modules: ['notivue/nuxt'],
    ssr: true,
-   devtools: {
-      enabled: false,
+   experimental: {
+      componentIslands: true,
    },
    notivue: {
       // addPlugin: true,
@@ -26,11 +26,6 @@ export default defineNuxtConfig({
       },
       css: {
          transformer: 'lightningcss',
-         lightningcss: {
-            drafts: {
-               nesting: true,
-            },
-         },
       },
    },
    css: ['assets/style.css', 'notivue/notifications.css', 'notivue/animations.css'],

diff --git a/demo/package.json b/demo/package.json
@@ -9,10 +9,11 @@
       "postinstall": "nuxt prepare"
    },
    "devDependencies": {
-      "@types/luxon": "^3.3.7",
-      "@types/node": "^20.10.5",
-      "lightningcss": "^1.22.1",
-      "nuxt": "^3.9.0"
+      "@types/luxon": "^3.4.2",
+      "@types/node": "^20.11.7",
+      "lightningcss": "^1.23.0",
+      "nuxt": "^3.9.3",
+      "vue": "^3.4.15"
    },
    "dependencies": {
       "luxon": "^3.4.4",

diff --git a/demo/utils/head.ts b/demo/utils/head.ts
@@ -36,7 +36,7 @@ export function getHead() {
          {
             hid: 'og:url',
             property: 'og:url',
-            content: 'https://notivue.pages.dev',
+            content: 'https://notivue.smastrom.io',
          },
          {
             hid: 'twitter:title',

diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
    "name": "notivue-monorepo",
    "private": true,
-   "packageManager": "pnpm@8.9.2",
+   "packageManager": "pnpm@8.14.3",
    "engines": {
-      "node": ">=18.0.0"
+      "node": ">=20.0.0"
    },
    "scripts": {
       "dev": "pnpm build && concurrently \"pnpm -C packages/notivue run watch\" \"pnpm -C demo install && pnpm -C demo run dev --host\"",
@@ -18,7 +18,7 @@
       "concurrently": "^8.2.2",
       "husky": "^8.0.3",
       "lint-staged": "^15.2.0",
-      "prettier": "^3.1.1"
+      "prettier": "^3.2.4"
    },
    "lint-staged": {
       "*.{js,ts,vue,json,css,md}": "prettier --write"

diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, Teleport } from 'vue'
+import { Teleport } from 'vue'
 
 import AriaLive from './AriaLive.vue'
 
@@ -10,7 +10,7 @@ import { useNotivueStyles } from './composables/useNotivueStyles'
 import { useRepositioning } from './composables/useRepositioning'
 import { useVisibilityChange } from './composables/useVisibilityChange'
 import { useReducedMotion } from './composables/useReducedMotion'
-import { getSlotContext, getAriaLabel } from './utils'
+import { getSlotItem, getAriaLabel } from './utils'
 import { DEFAULT_PROPS } from './constants'
 
 import type { NotivueProps, NotivueComponentSlot } from 'notivue'
@@ -34,24 +34,22 @@ const touchEvents = useTouchEvents()
 useReducedMotion()
 useVisibilityChange()
 useRepositioning()
-
-// Computed
-
-const dataAlign = computed(() => ({
-   'data-notivue-align': config.isTopAlign.value ? 'top' : 'bottom',
-}))
 </script>
 
 <template>
-   <Teleport :to="config.teleportTo.value">
+   <Teleport
+      :to="config.teleportTo.value === false ? undefined : config.teleportTo.value"
+      :disabled="config.teleportTo.value === false"
+   >
       <!-- List Container -->
       <ol
          v-if="items.length > 0"
-         v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value, ...dataAlign }"
+         v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value }"
+         :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
@@ -63,25 +61,26 @@ const dataAlign = computed(() => ({
             :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="getSlotContext(item)" />
+               <slot v-bind="getSlotItem(item)" />
             </div>
          </li>
       </ol>