cisse-vue-ui 0.1.0

package/dist/NotificationList.vue_vue_type_script_setup_true_lang-B2hjbMm4.js

@@ -0,0 +1,351 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, toDisplayString, onMounted, onUnmounted, withModifiers, renderSlot, createTextVNode, createVNode, unref, Fragment, renderList, computed, createBlock } from "vue";
+import { Icon } from "@iconify/vue";
+const _hoisted_1$4 = { class: "flex items-center justify-center py-12" };
+const _hoisted_2$3 = { class: "text-center" };
+const _hoisted_3$3 = {
+  key: 0,
+  class: "mt-4 text-gray-600 dark:text-gray-400"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "LoadingSpinner",
+  props: {
+    text: {},
+    size: { default: "md" }
+  },
+  setup(__props) {
+    const sizeClasses = {
+      sm: "h-8 w-8",
+      md: "h-12 w-12",
+      lg: "h-16 w-16"
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("div", _hoisted_2$3, [
+          createElementVNode("div", {
+            class: normalizeClass([sizeClasses[__props.size], "border-primary inline-block animate-spin rounded-full border-4 border-solid border-r-transparent"])
+          }, null, 2),
+          __props.text ? (openBlock(), createElementBlock("p", _hoisted_3$3, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = {
+  key: 0,
+  class: "flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700"
+};
+const _hoisted_2$2 = { class: "text-xl font-semibold text-gray-900 dark:text-gray-100" };
+const _hoisted_3$2 = { class: "sr-only" };
+const _hoisted_4$2 = { class: "flex-1 overflow-y-auto px-6 py-4" };
+const _hoisted_5$1 = {
+  key: 1,
+  class: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Modal",
+  props: {
+    title: { default: "" },
+    size: { default: "default" },
+    closeOnBackdrop: { type: Boolean, default: true },
+    closeOnEscape: { type: Boolean, default: true },
+    closeButtonLabel: { default: "Close" }
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const sizeClasses = {
+      sm: "max-w-md",
+      default: "max-w-3xl",
+      lg: "max-w-5xl",
+      xl: "max-w-7xl",
+      full: "max-w-full mx-4"
+    };
+    const handleBackdropClick = () => {
+      if (__props.closeOnBackdrop) {
+        emit("close");
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && __props.closeOnEscape) {
+        emit("close");
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    });
+    onUnmounted(() => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        onClick: withModifiers(handleBackdropClick, ["self"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([sizeClasses[__props.size], "flex max-h-[90vh] w-full flex-col rounded-lg bg-white shadow-xl dark:bg-gray-900"])
+        }, [
+          __props.title || _ctx.$slots.header || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+            createElementVNode("h3", _hoisted_2$2, [
+              renderSlot(_ctx.$slots, "header", {}, () => [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(__props.title), 1)
+                ])
+              ])
+            ]),
+            createElementVNode("button", {
+              class: "rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+              type: "button",
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+            }, [
+              createVNode(unref(Icon), {
+                class: "h-5 w-5",
+                icon: "lucide:x"
+              }),
+              createElementVNode("span", _hoisted_3$2, toDisplayString(__props.closeButtonLabel), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4$2, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+            renderSlot(_ctx.$slots, "footer")
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = {
+  key: 0,
+  class: "flex items-center justify-between border-t border-gray-200 px-6 py-4 dark:border-gray-700"
+};
+const _hoisted_2$1 = { class: "flex items-center gap-4" };
+const _hoisted_3$1 = { class: "text-sm text-gray-700 dark:text-gray-300" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "flex items-center gap-2"
+};
+const _hoisted_5 = {
+  class: "text-sm text-gray-600 dark:text-gray-400",
+  for: "page-size"
+};
+const _hoisted_6 = ["value"];
+const _hoisted_7 = ["value"];
+const _hoisted_8 = { class: "flex gap-2" };
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = ["disabled"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "PaginationControls",
+  props: {
+    currentPage: {},
+    totalPages: {},
+    loading: { type: Boolean, default: false },
+    pageSize: { default: 10 },
+    pageSizeOptions: { default: () => [10, 20, 50, 100] },
+    showPageSize: { type: Boolean, default: true },
+    pageLabel: { default: "Page" },
+    ofLabel: { default: "of" },
+    itemsPerPageLabel: { default: "Items per page:" },
+    previousLabel: { default: "Previous" },
+    nextLabel: { default: "Next" }
+  },
+  emits: ["update:page", "update:pageSize"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const changePage = (page) => {
+      if (page >= 1 && page <= __props.totalPages && !__props.loading) {
+        emit("update:page", page);
+      }
+    };
+    const changePageSize = (event) => {
+      const target = event.target;
+      emit("update:pageSize", Number(target.value));
+    };
+    return (_ctx, _cache) => {
+      return __props.totalPages > 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_3$1, toDisplayString(__props.pageLabel) + " " + toDisplayString(__props.currentPage) + " " + toDisplayString(__props.ofLabel) + " " + toDisplayString(__props.totalPages), 1),
+          __props.showPageSize ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+            createElementVNode("label", _hoisted_5, toDisplayString(__props.itemsPerPageLabel), 1),
+            createElementVNode("select", {
+              id: "page-size",
+              value: __props.pageSize,
+              class: "focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+              onChange: changePageSize
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pageSizeOptions, (size) => {
+                return openBlock(), createElementBlock("option", {
+                  key: size,
+                  value: size
+                }, toDisplayString(size), 9, _hoisted_7);
+              }), 128))
+            ], 40, _hoisted_6)
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_8, [
+          createElementVNode("button", {
+            disabled: __props.currentPage === 1 || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[0] || (_cache[0] = ($event) => changePage(__props.currentPage - 1))
+          }, [
+            createVNode(unref(Icon), {
+              class: "h-4 w-4",
+              icon: "lucide:chevron-left"
+            }),
+            createTextVNode(" " + toDisplayString(__props.previousLabel), 1)
+          ], 8, _hoisted_9),
+          createElementVNode("button", {
+            disabled: __props.currentPage === __props.totalPages || __props.loading,
+            class: "focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+            onClick: _cache[1] || (_cache[1] = ($event) => changePage(__props.currentPage + 1))
+          }, [
+            createTextVNode(toDisplayString(__props.nextLabel) + " ", 1),
+            createVNode(unref(Icon), {
+              class: "h-4 w-4",
+              icon: "lucide:chevron-right"
+            })
+          ], 8, _hoisted_10)
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "flex max-w-md items-start space-x-3 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-black" };
+const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm font-semibold text-gray-900 dark:text-gray-100"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "mt-1 text-sm text-gray-600 dark:text-gray-400"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "NotificationComponent",
+  props: {
+    notification: {},
+    autoDismiss: { type: Boolean },
+    duration: {}
+  },
+  emits: ["dismiss"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const iconName = computed(() => {
+      switch (props.notification.type) {
+        case "success":
+          return "lucide:check-circle";
+        case "info":
+          return "lucide:info";
+        case "warning":
+          return "lucide:alert-triangle";
+        case "error":
+          return "lucide:x-circle";
+        default:
+          return "lucide:bell";
+      }
+    });
+    const iconColor = computed(() => {
+      switch (props.notification.type) {
+        case "success":
+          return "text-green-600 dark:text-green-400";
+        case "info":
+          return "text-blue-600 dark:text-blue-400";
+        case "warning":
+          return "text-yellow-600 dark:text-yellow-400";
+        case "error":
+          return "text-red-600 dark:text-red-400";
+        default:
+          return "text-gray-600 dark:text-gray-400";
+      }
+    });
+    const bgColor = computed(() => {
+      switch (props.notification.type) {
+        case "success":
+          return "bg-green-50 dark:bg-green-950";
+        case "info":
+          return "bg-blue-50 dark:bg-blue-950";
+        case "warning":
+          return "bg-yellow-50 dark:bg-yellow-950";
+        case "error":
+          return "bg-red-50 dark:bg-red-950";
+        default:
+          return "bg-gray-50 dark:bg-gray-950";
+      }
+    });
+    const handleDismiss = () => {
+      if (props.notification.id) {
+        emit("dismiss", props.notification.id);
+      }
+    };
+    onMounted(() => {
+      const duration = props.notification.duration ?? props.duration ?? 5e3;
+      if (props.autoDismiss !== false && duration > 0) {
+        setTimeout(() => {
+          handleDismiss();
+        }, duration);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", {
+          class: normalizeClass([bgColor.value, "flex items-center justify-center rounded-full p-2"])
+        }, [
+          createVNode(unref(Icon), {
+            class: normalizeClass([iconColor.value, "h-5 w-5"]),
+            icon: iconName.value
+          }, null, 8, ["class", "icon"])
+        ], 2),
+        createElementVNode("div", _hoisted_2, [
+          __props.notification.title ? (openBlock(), createElementBlock("h4", _hoisted_3, toDisplayString(__props.notification.title), 1)) : createCommentVNode("", true),
+          __props.notification.message ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.notification.message), 1)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("button", {
+          class: "shrink-0 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400",
+          onClick: handleDismiss
+        }, [
+          createVNode(unref(Icon), {
+            class: "h-4 w-4",
+            icon: "lucide:x"
+          })
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "fixed top-5 right-5 z-50 flex flex-col gap-3" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NotificationList",
+  props: {
+    notifications: {},
+    autoDismiss: { type: Boolean },
+    duration: {}
+  },
+  emits: ["dismiss"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.notifications, (notification) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: notification.id,
+            notification,
+            "auto-dismiss": __props.autoDismiss,
+            duration: __props.duration,
+            onDismiss: _cache[0] || (_cache[0] = ($event) => emit("dismiss", $event))
+          }, null, 8, ["notification", "auto-dismiss", "duration"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main$4 as _,
+  _sfc_main$3 as a,
+  _sfc_main$2 as b,
+  _sfc_main$1 as c,
+  _sfc_main as d
+};
+//# sourceMappingURL=NotificationList.vue_vue_type_script_setup_true_lang-B2hjbMm4.js.map

package/dist/NotificationList.vue_vue_type_script_setup_true_lang-B2hjbMm4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationList.vue_vue_type_script_setup_true_lang-B2hjbMm4.js","sources":["../src/components/feedback/LoadingSpinner.vue","../src/components/feedback/Modal.vue","../src/components/feedback/PaginationControls.vue","../src/components/feedback/NotificationComponent.vue","../src/components/feedback/NotificationList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { SpinnerSize } from '@/types'\n\nconst { text, size = 'md' } = defineProps<{\n  text?: string\n  size?: SpinnerSize\n}>()\n\nconst sizeClasses: Record<SpinnerSize, string> = {\n  sm: 'h-8 w-8',\n  md: 'h-12 w-12',\n  lg: 'h-16 w-16',\n}\n</script>\n\n<template>\n  <div class=\"flex items-center justify-center py-12\">\n    <div class=\"text-center\">\n      <div\n        :class=\"sizeClasses[size]\"\n        class=\"border-primary inline-block animate-spin rounded-full border-4 border-solid border-r-transparent\"\n      ></div>\n      <p v-if=\"text\" class=\"mt-4 text-gray-600 dark:text-gray-400\">{{ text }}</p>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\nimport { onMounted, onUnmounted } from 'vue'\nimport type { ModalSize } from '@/types'\n\nconst {\n  title = '',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  closeButtonLabel = 'Close',\n} = defineProps<{\n  title?: string\n  size?: ModalSize\n  closeOnBackdrop?: boolean\n  closeOnEscape?: boolean\n  closeButtonLabel?: string\n}>()\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nconst sizeClasses: Record<ModalSize, string> = {\n  sm: 'max-w-md',\n  default: 'max-w-3xl',\n  lg: 'max-w-5xl',\n  xl: 'max-w-7xl',\n  full: 'max-w-full mx-4',\n}\n\nconst handleBackdropClick = () => {\n  if (closeOnBackdrop) {\n    emit('close')\n  }\n}\n\nconst handleEscape = (e: KeyboardEvent) => {\n  if (e.key === 'Escape' && closeOnEscape) {\n    emit('close')\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscape)\n  document.body.style.overflow = 'hidden'\n})\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', handleEscape)\n  document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <div\n    class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n    @click.self=\"handleBackdropClick\"\n  >\n    <div\n      :class=\"sizeClasses[size]\"\n      class=\"flex max-h-[90vh] w-full flex-col rounded-lg bg-white shadow-xl dark:bg-gray-900\"\n    >\n      <!-- Header -->\n      <div\n        v-if=\"title || $slots.header || $slots.title\"\n        class=\"flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700\"\n      >\n        <h3 class=\"text-xl font-semibold text-gray-900 dark:text-gray-100\">\n          <slot name=\"header\">\n            <slot name=\"title\">\n              {{ title }}\n            </slot>\n          </slot>\n        </h3>\n        <button\n          class=\"rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100\"\n          type=\"button\"\n          @click=\"emit('close')\"\n        >\n          <Icon class=\"h-5 w-5\" icon=\"lucide:x\" />\n          <span class=\"sr-only\">{{ closeButtonLabel }}</span>\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"flex-1 overflow-y-auto px-6 py-4\">\n        <slot />\n      </div>\n\n      <!-- Footer -->\n      <div\n        v-if=\"$slots.footer\"\n        class=\"flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700\"\n      >\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\n\nconst {\n  currentPage,\n  totalPages,\n  loading = false,\n  pageSize = 10,\n  pageSizeOptions = [10, 20, 50, 100],\n  showPageSize = true,\n  pageLabel = 'Page',\n  ofLabel = 'of',\n  itemsPerPageLabel = 'Items per page:',\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n} = defineProps<{\n  currentPage: number\n  totalPages: number\n  loading?: boolean\n  pageSize?: number\n  pageSizeOptions?: number[]\n  showPageSize?: boolean\n  pageLabel?: string\n  ofLabel?: string\n  itemsPerPageLabel?: string\n  previousLabel?: string\n  nextLabel?: string\n}>()\n\nconst emit = defineEmits<{\n  'update:page': [page: number]\n  'update:pageSize': [size: number]\n}>()\n\nconst changePage = (page: number) => {\n  if (page >= 1 && page <= totalPages && !loading) {\n    emit('update:page', page)\n  }\n}\n\nconst changePageSize = (event: Event) => {\n  const target = event.target as HTMLSelectElement\n  emit('update:pageSize', Number(target.value))\n}\n</script>\n\n<template>\n  <div\n    v-if=\"totalPages > 1\"\n    class=\"flex items-center justify-between border-t border-gray-200 px-6 py-4 dark:border-gray-700\"\n  >\n    <div class=\"flex items-center gap-4\">\n      <div class=\"text-sm text-gray-700 dark:text-gray-300\">\n        {{ pageLabel }} {{ currentPage }} {{ ofLabel }} {{ totalPages }}\n      </div>\n      <div v-if=\"showPageSize\" class=\"flex items-center gap-2\">\n        <label class=\"text-sm text-gray-600 dark:text-gray-400\" for=\"page-size\">\n          {{ itemsPerPageLabel }}\n        </label>\n        <select\n          id=\"page-size\"\n          :value=\"pageSize\"\n          class=\"focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100\"\n          @change=\"changePageSize\"\n        >\n          <option v-for=\"size in pageSizeOptions\" :key=\"size\" :value=\"size\">\n            {{ size }}\n          </option>\n        </select>\n      </div>\n    </div>\n    <div class=\"flex gap-2\">\n      <button\n        :disabled=\"currentPage === 1 || loading\"\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        @click=\"changePage(currentPage - 1)\"\n      >\n        <Icon class=\"h-4 w-4\" icon=\"lucide:chevron-left\" />\n        {{ previousLabel }}\n      </button>\n      <button\n        :disabled=\"currentPage === totalPages || loading\"\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        @click=\"changePage(currentPage + 1)\"\n      >\n        {{ nextLabel }}\n        <Icon class=\"h-4 w-4\" icon=\"lucide:chevron-right\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport type { Notification } from '@/types'\nimport { computed, onMounted } from 'vue'\nimport { Icon } from '@iconify/vue'\n\nconst props = defineProps<{\n  notification: Notification\n  autoDismiss?: boolean\n  duration?: number\n}>()\n\nconst emit = defineEmits<{\n  dismiss: [id: string]\n}>()\n\nconst iconName = computed(() => {\n  switch (props.notification.type) {\n    case 'success':\n      return 'lucide:check-circle'\n    case 'info':\n      return 'lucide:info'\n    case 'warning':\n      return 'lucide:alert-triangle'\n    case 'error':\n      return 'lucide:x-circle'\n    default:\n      return 'lucide:bell'\n  }\n})\n\nconst iconColor = computed(() => {\n  switch (props.notification.type) {\n    case 'success':\n      return 'text-green-600 dark:text-green-400'\n    case 'info':\n      return 'text-blue-600 dark:text-blue-400'\n    case 'warning':\n      return 'text-yellow-600 dark:text-yellow-400'\n    case 'error':\n      return 'text-red-600 dark:text-red-400'\n    default:\n      return 'text-gray-600 dark:text-gray-400'\n  }\n})\n\nconst bgColor = computed(() => {\n  switch (props.notification.type) {\n    case 'success':\n      return 'bg-green-50 dark:bg-green-950'\n    case 'info':\n      return 'bg-blue-50 dark:bg-blue-950'\n    case 'warning':\n      return 'bg-yellow-50 dark:bg-yellow-950'\n    case 'error':\n      return 'bg-red-50 dark:bg-red-950'\n    default:\n      return 'bg-gray-50 dark:bg-gray-950'\n  }\n})\n\nconst handleDismiss = () => {\n  if (props.notification.id) {\n    emit('dismiss', props.notification.id)\n  }\n}\n\nonMounted(() => {\n  const duration = props.notification.duration ?? props.duration ?? 5000\n  if (props.autoDismiss !== false && duration > 0) {\n    setTimeout(() => {\n      handleDismiss()\n    }, duration)\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"flex max-w-md items-start space-x-3 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-black\"\n  >\n    <div :class=\"[bgColor, 'flex items-center justify-center rounded-full p-2']\">\n      <Icon :class=\"iconColor\" :icon=\"iconName\" class=\"h-5 w-5\" />\n    </div>\n\n    <div class=\"flex min-w-0 flex-1 flex-col\">\n      <h4 v-if=\"notification.title\" class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n        {{ notification.title }}\n      </h4>\n      <p v-if=\"notification.message\" class=\"mt-1 text-sm text-gray-600 dark:text-gray-400\">\n        {{ notification.message }}\n      </p>\n    </div>\n\n    <button\n      class=\"shrink-0 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400\"\n      @click=\"handleDismiss\"\n    >\n      <Icon class=\"h-4 w-4\" icon=\"lucide:x\" />\n    </button>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport type { Notification } from '@/types'\nimport NotificationComponent from './NotificationComponent.vue'\n\ndefineProps<{\n  notifications: Notification[]\n  autoDismiss?: boolean\n  duration?: number\n}>()\n\nconst emit = defineEmits<{\n  dismiss: [id: string]\n}>()\n</script>\n\n<template>\n  <div class=\"fixed top-5 right-5 z-50 flex flex-col gap-3\">\n    <NotificationComponent\n      v-for=\"notification in notifications\"\n      :key=\"notification.id\"\n      :notification=\"notification\"\n      :auto-dismiss=\"autoDismiss\"\n      :duration=\"duration\"\n      @dismiss=\"emit('dismiss', $event)\"\n    />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeClass","_hoisted_3","_toDisplayString","$slots","_renderSlot","_createVNode","_unref","_hoisted_4","_hoisted_5","_Fragment","_renderList","_createTextVNode","_createBlock","NotificationComponent"],"mappings":"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"}