vue-notifyr 0.1.0

package/src/styles/style.css

@@ -0,0 +1,245 @@
+@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap);
+
+:root {
+  --notification-info: #385bbb;
+  --notification-info-rgb: 56, 91, 187;
+  --notification-info-darker: hsl(224, 54%, 35%);
+  --notification-warning: #f3950d;
+  --notification-warning-rgb: 243, 149, 13;
+  --notification-warning-darker: hsl(35, 91%, 40%);
+  --notification-error: #d32f2f;
+  --notification-error-rgb: 211, 47, 47;
+  --notification-error-darker: hsl(0, 68%, 43%);
+  --notification-success: #388e3c;
+  --notification-success-rgb: 56, 142, 60;
+  --notification-success-darker: hsl(120, 54%, 35%);
+}
+
+@keyframes notificationSlideFromTop {
+  0% {
+    opacity: 0;
+    translate: 0 calc(-100% - 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes notificationSlideFromBottom {
+  0% {
+    opacity: 0;
+    translate: 0 calc(100% + 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes notificationFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes progressBar {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+.notification-list {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 99999;
+  width: max-content;
+  max-width: calc(100vw - 48px);
+}
+
+.notification-list > * {
+  pointer-events: auto;
+}
+
+.notification-list[data-position^='top'] {
+  top: 24px;
+}
+
+.notification-list[data-position^='bottom'] {
+  bottom: 24px;
+}
+
+.notification-list[data-position$='left'] {
+  left: 24px;
+  right: auto;
+  transform: none;
+  align-items: flex-start;
+}
+
+.notification-list[data-position$='center'] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.notification-list[data-position$='right'] {
+  right: 24px;
+  left: auto;
+  transform: none;
+  align-items: flex-end;
+}
+
+.notification {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  padding-right: 50px;
+  min-width: 280px;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  font-family: 'Nunito Sans', system-ui, helvetica, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  color: var(--notification-info-darker);
+  background-clip: padding-box;
+}
+
+.notification-list[data-position^='top'] .notification {
+  animation: notificationSlideFromTop 0.5s ease-out forwards;
+}
+
+.notification-list[data-position^='bottom'] .notification {
+  animation: notificationSlideFromBottom 0.5s ease-out forwards;
+}
+
+.notification.notification-success {
+  color: var(--notification-success);
+  border-color: var(--notification-success);
+}
+
+.notification.notification-error {
+  color: var(--notification-error);
+  border-color: var(--notification-error);
+}
+
+.notification.notification-warning {
+  color: var(--notification-warning);
+  border-color: var(--notification-warning);
+}
+
+.notification.notification-info {
+  color: var(--notification-info);
+  border-color: var(--notification-info);
+}
+
+.notification-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.notification-title {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.notification-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  border-radius: 50px;
+  transform-origin: left;
+  background-color: currentColor;
+  animation: progressBar linear forwards;
+}
+
+.notification-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.notification-close button {
+  padding: 8px;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.notification-close button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.notification-close button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.notification-enter-active,
+.notification-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.notification-enter-from,
+.notification-leave-to {
+  opacity: 0;
+}
+
+.notification-list[data-position^='top'] .notification-enter-from,
+.notification-list[data-position^='top'] .notification-leave-to {
+  transform: translateY(-16px);
+}
+
+.notification-list[data-position^='bottom'] .notification-enter-from,
+.notification-list[data-position^='bottom'] .notification-leave-to {
+  transform: translateY(16px);
+}
+
+.notification-move {
+  transition: transform 0.2s ease;
+}
+
+@media (max-width: 480px) {
+  .notification {
+    min-width: calc(100vw - 48px);
+    max-width: calc(100vw - 48px);
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,23 @@
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+export type NotificationPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface NotificationOptions {
+  position?: NotificationPosition;
+  autoClose?: number | false;
+  progress?: boolean;
+}
+
+export interface NotificationItem {
+  id: number;
+  type: NotificationType;
+  title: string;
+  options: Required<NotificationOptions>;
+  createdAt: number;
+}