@imaginario27/air-ui-ds 1.15.0 → 1.15.2

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.15.0 - 2026-06-30
+
+Release type: minor.
+Commits found in range: 1.
+
+### Added
+
+1. add NotificationsPopover; enhance MetricCard, ContainedIcon, SectionTitle, and Popover ([352e809](https://github.com/imaginario27/air-ui/commit/352e809a77a63b6ef70d3877ad5d8c4b20a4e65e))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.14.2 - 2026-06-23
 
 Release type: patch.

package/components/cards/specific/MetricCard.vue

@@ -71,7 +71,7 @@
                     v-if="unit"
                     :class="['text-lg', 'font-semibold', unitClass]"
                 >
-                    /{{ unit }}
+                    {{ unit }}
                 </span>
             </div>
 

package/components/notifications/NotificationListItem.vue

@@ -41,9 +41,11 @@
                     {{ title }}
                 </span>
 
-                <slot name="description" />
+                <div v-if="$slots.description" class="max-w-[800px]">
+                    <slot name="description" />
+                </div>
 
-                <p v-if="!$slots.description" class="text-sm text-text-default">
+                <p v-if="!$slots.description" class="text-sm text-text-default max-w-[800px]">
                     {{ description }}
                 </p>
             </div>
@@ -53,8 +55,9 @@
                     <Icon
                         :name="timeAgoIcon"
                         :size="IconSize.XS"
+                        iconClass="text-icon-neutral-subtle"
                     />
-                    <span class="text-xs text-text-neutral-subtle">
+                    <span class="text-xs text-text-neutral-subtle whitespace-nowrap select-none">
                         {{ timeAgo }}
                     </span>
                 </div>
@@ -62,8 +65,9 @@
                     <Icon
                         :name="authorIcon"
                         :size="IconSize.XS"
+                        iconClass="text-icon-neutral-subtle"
                     />
-                    <span class="text-xs text-text-neutral-subtle">
+                    <span class="text-xs text-text-neutral-subtle whitespace-nowrap select-none">
                         {{ author }}
                     </span>
                 </div>
@@ -152,11 +156,12 @@ const props = defineProps({
     },
 })
 
-const emit = defineEmits(['update:modelValue', 'remove'])
+const emit = defineEmits(['update:modelValue', 'remove', 'itemClick'])
 
-function onItemClick() {
+const onItemClick = () => {
     if (!props.modelValue) {
         emit('update:modelValue', true)
     }
+    emit('itemClick')
 }
 </script>

package/components/notifications/NotificationsPopover.vue

@@ -5,9 +5,9 @@
         :trigger
         :popoverClass="['px-0 py-3', popoverClass]"
     >
-        <template #content>
+        <template #content="{ onClose }">
             <div
-                v-if="isLoading && !hasError" 
+                v-if="isLoading && !hasError"
                 class="w-full flex justify-center py-3"
             >
                 <Loading 
@@ -52,6 +52,7 @@
                             :text="viewAllText"
                             :to="viewAllLink"
                             textClass="text-text-default text-sm! hover:text-text-primary-brand-hover font-normal"
+                            @click="onViewAllClick($event, onClose)"
                         />
                     </div>
 
@@ -92,6 +93,7 @@
                             :removeAriaLabel="listRemoveItemAriaLabel"
                             @update:model-value="onReadStatusChange(notification.id, $event)"
                             @remove="onRemoveNotification(notification.id)"
+                            @itemClick="onClose"
                         />
                     </template>
 
@@ -134,41 +136,11 @@
 const props = defineProps({
     list: {
         type: Array as PropType<NotificationItem[]>,
-        default: () => [
-                       {
-                id: '1',
-                read: false,
-                icon: 'mdi:bell-outline',
-                iconColor: ColorAccent.NEUTRAL,
-                title: 'New Notification',
-                description: 'This is a sample notification description.',
-                timeAgo: '5 minutes ago',
-                author: 'John Doe',
-                link: '',
-            },
-            {
-                id: '2',
-                read: true,
-                icon: 'mdi:bell-outline',
-                iconColor: ColorAccent.SECONDARY_BRAND,
-                title: 'Another Notification',
-                description: 'This is another sample notification description.',
-                timeAgo: '10 minutes ago',
-                author: 'Jane Doe',
-                link: '',
-            },
-            {
-                id: '3',
-                read: false,
-                icon: 'mdi:bell-outline',
-                iconColor: ColorAccent.PRIMARY_BRAND,
-                title: 'Third Notification',
-                description: 'This is the third sample notification description.',
-                timeAgo: '15 minutes ago',
-                author: 'Jim Doe',
-                link: '',
-            }
-        ],
+        default: () => [],
+    },
+    limit: {
+        type: Number as PropType<number>,
+        default: 10,
     },
     isListIconContained: {
         type: Boolean as PropType<boolean>,
@@ -331,13 +303,19 @@ const hasError = computed(() => props.errorText.trim().length > 0)
 const unreadCount = computed(() => internalList.value.filter(notification => !notification.read).length)
 
 const filteredList = computed(() => {
-    if (selectedFilterValue.value === 'unread') {
-        return internalList.value.filter(notification => !notification.read)
-    }
-    return internalList.value
+    const source = selectedFilterValue.value === 'unread'
+        ? internalList.value.filter(notification => !notification.read)
+        : internalList.value
+
+    return source.slice(0, props.limit)
 })
 
 // Handlers
+const onViewAllClick = (event: MouseEvent, onClose: () => void) => {
+    if (!props.viewAllLink) event.preventDefault()
+    onClose()
+}
+
 const onRemoveNotification = (id: string) => {
     internalList.value = internalList.value.filter(notification => notification.id !== id)
     emit('remove', { id })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.15.0",
+    "version": "1.15.2",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",