@nexxtmove/ui 1.0.0 → 1.0.2

package/src/components/SidebarMenuItem/SidebarMenuItem.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+
+interface SidebarMenuItemProps {
+  icon: InstanceType<typeof NexxtIcon>['name']
+  selected?: boolean
+  notificationCount?: number
+  isCurentRoute?: boolean
+  variant?: 'default' | 'danger'
+}
+
+const { variant = 'default' } = defineProps<SidebarMenuItemProps>()
+const emit = defineEmits<{ click: [] }>()
+
+const hoverClass = computed(() =>
+  variant === 'danger' ? 'hover:bg-brick-500' : 'hover:bg-cornflower-blue-300/40',
+)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex h-11 w-full max-w-full cursor-pointer items-center text-white transition-colors duration-300 ease-in-out"
+    :class="[
+      hoverClass,
+      { 'bg-cornflower-blue-300/40 shadow-[inset_4px_0_0_0_#fff]': isCurentRoute },
+    ]"
+    :aria-current="isCurentRoute ? 'page' : undefined"
+    @click="emit('click')"
+  >
+    <div class="relative flex h-11 w-16 shrink-0 items-center justify-center text-lg">
+      <Transition
+        enter-active-class="transition duration-300 ease-[cubic-bezier(0.175,0.885,0.32,1.275)]"
+        enter-from-class="scale-0 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="transition duration-200 ease-[cubic-bezier(0.6,-0.28,0.735,0.045)]"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-0 opacity-0"
+      >
+        <span
+          v-if="notificationCount"
+          aria-hidden="true"
+          class="absolute top-1 left-2 flex h-4 min-w-4 items-center justify-center rounded-2-xl bg-red-500 p-1 text-[0.6rem]"
+          >{{ notificationCount }}</span
+        >
+      </Transition>
+      <NexxtIcon :name="icon" aria-hidden="true" />
+    </div>
+    <span
+      class="text-sm whitespace-nowrap opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
+    >
+      <slot />
+    </span>
+    <span v-if="notificationCount" class="sr-only">, {{ notificationCount }} notifications</span>
+  </button>
+</template>

package/src/components/SocialIcons/SocialIcons.vue

@@ -52,7 +52,7 @@ const activeIcons = computed(() =>
       :class="brandColors[platform.name]"
       :aria-label="platform.label"
     >
-      <Icon :name="platform.icon" type="brands" class="text-[10px] text-white" aria-hidden="true" />
+      <Icon :name="platform.icon" class="text-[10px] text-white" aria-hidden="true" />
     </li>
   </ul>
 </template>

package/src/components/TimelineEvent/TimelineEvent.vue

@@ -82,11 +82,7 @@ const isContactEvent = computed(() => {
         class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
         :class="[eventConfig.color]"
       >
-        <NexxtIcon
-          :name="eventConfig.icon as any"
-          :type="eventConfig.icon === 'whatsapp' ? 'brands' : 'light'"
-          class="flex h-6 w-6 text-xl text-white"
-        />
+        <NexxtIcon :name="eventConfig.icon as any" class="flex h-6 w-6 text-xl text-white" />
       </div>
       <div
         class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8"

package/src/components.json

@@ -1,5 +1,6 @@
 {
   "NexxtAnimatedNumber": "components/AnimatedNumber/AnimatedNumber.vue",
+  "NexxtAnnouncement": "components/Announcement/Announcement.vue",
   "NexxtAvatar": "components/Avatar/Avatar.vue",
   "NexxtButton": "components/Button/Button.vue",
   "NexxtCalendar": "components/Calendar/Calendar.vue",
@@ -26,6 +27,7 @@
   "NexxtPropertyCard": "components/PropertyCard/PropertyCard.vue",
   "NexxtPropertyListing": "components/PropertyListing/PropertyListing.vue",
   "NexxtSelect": "components/Select/Select.vue",
+  "NexxtSidebarMenuItem": "components/SidebarMenuItem/SidebarMenuItem.vue",
   "NexxtSkeleton": "components/Skeleton/Skeleton.vue",
   "NexxtSkeletonPropertyCard": "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",

package/src/index.ts

@@ -1,5 +1,6 @@
 // This file is auto-generated by scripts/generate-index.ts
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
+export { default as NexxtAnnouncement } from './components/Announcement/Announcement.vue'
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'
 export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
@@ -26,6 +27,7 @@ export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBa
 export { default as NexxtPropertyCard } from './components/PropertyCard/PropertyCard.vue'
 export { default as NexxtPropertyListing } from './components/PropertyListing/PropertyListing.vue'
 export { default as NexxtSelect } from './components/Select/Select.vue'
+export { default as NexxtSidebarMenuItem } from './components/SidebarMenuItem/SidebarMenuItem.vue'
 export { default as NexxtSkeleton } from './components/Skeleton/Skeleton.vue'
 export { default as NexxtSkeletonPropertyCard } from './components/SkeletonPropertyCard/SkeletonPropertyCard.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'