vue3-dynamic-island 1.0.1

package/README.md

@@ -0,0 +1,269 @@
+# Dynamic Island
+
+A commercial-grade Dynamic Island notification component for Vue 3, inspired by Apple's Dynamic Island design.
+
+## Features
+
+- 🎨 Apple-inspired Dynamic Island UI design
+- 🚀 Global notification system with queue management
+- 🎯 Multiple notification types (default, success, error, warning, info)
+- 📦 Dynamic component embedding support
+- 🎭 Multiple animation effects (fade, slide, zoom, bounce)
+- 🔄 Auto-close and persistent modes
+- 🖱️ Drag-and-drop functionality with position persistence
+- 🔊 Sound notifications
+- 🎨 Custom styling support
+- 💾 localStorage position memory
+- 📱 Responsive design
+- 🎯 TypeScript support
+
+## Installation
+
+```bash
+npm install dynamic-island
+```
+
+## Usage
+
+### Basic Setup
+
+```vue
+<script setup>
+import { useDynamicIsland } from 'dynamic-island'
+
+const island = useDynamicIsland()
+
+const showNotification = () => {
+  island.success('Success', 'Operation completed successfully!')
+}
+</script>
+
+<template>
+  <button @click="showNotification">Show Notification</button>
+</template>
+```
+
+### Global Installation
+
+```vue
+<script setup>
+import { createApp } from 'vue'
+import App from './App.vue'
+import DynamicIsland from 'dynamic-island'
+
+const app = createApp(App)
+app.use(DynamicIsland)
+app.mount('#app')
+</script>
+```
+
+## API
+
+### useDynamicIsland()
+
+Returns an object with the following methods:
+
+#### show(options)
+
+```typescript
+island.show({
+  type: 'success',           // 'default' | 'success' | 'error' | 'warning' | 'info'
+  title: 'Notification Title',
+  subtitle: 'Optional subtitle',
+  icon: MyIconComponent,      // Optional custom icon
+  showIcon: true,             // Show/hide icon
+  showClose: true,            // Show/hide close button
+  duration: 3000,             // Auto-close duration (ms)
+  persistent: false,           // Don't auto-close
+  animation: 'slide',          // 'fade' | 'slide' | 'zoom' | 'bounce'
+  progress: 50,               // Progress value (0-100)
+  showProgress: false,         // Show progress bar
+  dynamicComponent: {          // Embed custom component
+    component: MyComponent,
+    props: { /* props */ }
+  },
+  backgroundColor: '#ff0000',  // Custom background color
+  textColor: '#ffffff',        // Custom text color
+  soundEnabled: true,          // Enable sound
+  soundUrl: '/sound.mp3',     // Custom sound URL
+  memPosition: false,         // Remember position
+  onClick: () => {},          // Click callback
+  onClose: () => {}           // Close callback
+})
+```
+
+#### success(title, subtitle, options)
+
+```typescript
+island.success('Success', 'Operation completed!')
+```
+
+#### error(title, subtitle, options)
+
+```typescript
+island.error('Error', 'Something went wrong!')
+```
+
+#### warning(title, subtitle, options)
+
+```typescript
+island.warning('Warning', 'Please check your input')
+```
+
+#### info(title, subtitle, options)
+
+```typescript
+island.info('Info', 'You have 3 new messages')
+```
+
+#### close(id)
+
+Close a specific notification by ID.
+
+```typescript
+const notificationId = island.show({ title: 'Test' })
+island.close(notificationId)
+```
+
+#### clear()
+
+Clear all notifications.
+
+```typescript
+island.clear()
+```
+
+#### clearQueue()
+
+Clear the notification queue.
+
+```typescript
+island.clearQueue()
+```
+
+#### updateProgress(id, progress)
+
+Update progress of a notification.
+
+```typescript
+const notificationId = island.show({
+  title: 'Uploading',
+  showProgress: true,
+  progress: 0,
+  persistent: true
+})
+
+// Update progress
+island.updateProgress(notificationId, 50)
+```
+
+#### updateIsland(id, updates)
+
+Update a notification's properties.
+
+```typescript
+const notificationId = island.show({ title: 'Test' })
+island.updateIsland(notificationId, { title: 'Updated' })
+```
+
+#### setSoundEnabled(enabled)
+
+Enable/disable sound notifications globally.
+
+```typescript
+island.setSoundEnabled(false)
+```
+
+## Examples
+
+### Dynamic Component Embedding
+
+```vue
+<script setup>
+import { useDynamicIsland } from 'dynamic-island'
+import MyForm from './MyForm.vue'
+
+const island = useDynamicIsland()
+
+const showForm = () => {
+  island.show({
+    type: 'info',
+    title: 'User Form',
+    subtitle: 'Please fill in your information',
+    persistent: true,
+    dynamicComponent: {
+      component: MyForm,
+      props: {
+        onSubmit: (data) => {
+          console.log('Form submitted:', data)
+          island.clear()
+        }
+      }
+    }
+  })
+}
+</script>
+```
+
+### Custom Styling
+
+```typescript
+island.show({
+  title: 'Custom Style',
+  subtitle: 'Gradient background',
+  backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  textColor: '#ffffff'
+})
+```
+
+### Progress Bar
+
+```typescript
+const notificationId = island.show({
+  type: 'info',
+  title: 'Processing',
+  subtitle: 'Please wait...',
+  showProgress: true,
+  progress: 0,
+  persistent: true
+})
+
+// Simulate progress
+let progress = 0
+const interval = setInterval(() => {
+  progress += 10
+  island.updateProgress(notificationId, progress)
+  
+  if (progress >= 100) {
+    clearInterval(interval)
+    island.close(notificationId)
+    island.success('Complete', 'Operation finished!')
+  }
+}, 500)
+```
+
+## Drag and Drop
+
+- Click and drag the notification by the header area
+- Position is automatically saved to localStorage
+- Component stays within viewport boundaries
+- 12px safety margin from screen edges
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Author
+
+Your Name
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.js

@@ -0,0 +1,535 @@
+import { ref as w, computed as H, defineComponent as AV, onUnmounted as uV, watch as j, openBlock as c, createBlock as T, Teleport as dV, createElementVNode as r, normalizeStyle as U, createVNode as mV, TransitionGroup as gV, withCtx as fV, createElementBlock as l, Fragment as hV, renderList as wV, unref as pV, normalizeClass as X, resolveDynamicComponent as z, toDisplayString as F, createCommentVNode as I, withModifiers as _, mergeProps as yV, nextTick as $ } from "vue";
+const L = "dynamic-island-position", O = "dynamic-island-mem-position", SV = () => `island-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, xV = () => ({
+  x: Math.max(
+    12,
+    Math.min(
+      window.innerWidth / 2 - 150,
+      window.innerWidth - 320 - 12 - 20
+    )
+  ),
+  y: Math.max(12, 20)
+}), vV = () => {
+  try {
+    const V = localStorage.getItem(L);
+    if (V) {
+      const n = JSON.parse(V);
+      if (typeof n.x == "number" && typeof n.y == "number")
+        return {
+          x: Math.max(
+            12,
+            Math.min(
+              n.x,
+              window.innerWidth - 320 - 12 - 20
+            )
+          ),
+          y: Math.max(
+            12,
+            Math.min(
+              n.y,
+              window.innerHeight - 80 - 12
+            )
+          )
+        };
+    }
+  } catch {
+    console.warn("Failed to load position from localStorage");
+  }
+  return xV();
+}, Z = (V) => {
+  try {
+    localStorage.setItem(L, JSON.stringify(V));
+  } catch {
+    console.warn("Failed to save position to localStorage");
+  }
+}, f = w([]), C = w([]), D = w(vV()), eV = w(!0), J = 3, tV = H(() => f.value.length < J), oV = H(() => C.value.length > 0), nV = () => {
+  for (; tV.value && oV.value; ) {
+    const V = C.value.shift();
+    V && f.value.push(V);
+  }
+}, MV = (V) => {
+  const n = {
+    id: V.id || SV(),
+    type: V.type || "default",
+    title: V.title,
+    subtitle: V.subtitle,
+    icon: V.icon,
+    showIcon: V.showIcon ?? !0,
+    showClose: V.showClose ?? !0,
+    duration: V.duration ?? 3e3,
+    persistent: V.persistent ?? !1,
+    animation: V.animation || "slide",
+    progress: V.progress,
+    showProgress: V.showProgress ?? !1,
+    dynamicComponent: V.dynamicComponent,
+    backgroundColor: V.backgroundColor,
+    textColor: V.textColor,
+    soundEnabled: V.soundEnabled ?? !0,
+    soundUrl: V.soundUrl,
+    onClick: V.onClick,
+    onClose: V.onClose,
+    createdAt: Date.now(),
+    memPosition: V.memPosition ?? !1
+  };
+  return f.value.length < J ? (f.value.push(n), n.memPosition && sV()) : C.value.push(n), n.id;
+}, CV = (V) => {
+  var a;
+  const n = f.value.findIndex((s) => s.id === V);
+  if (n > -1) {
+    const s = f.value[n];
+    (a = s.onClose) == null || a.call(s), f.value.splice(n, 1), s.memPosition && DV(), nV();
+  }
+}, EV = () => {
+  f.value.forEach((V) => {
+    var n;
+    (n = V.onClose) == null || n.call(V);
+  }), f.value = [], C.value = [];
+}, IV = () => {
+  C.value = [];
+}, kV = (V, n, a) => {
+  const y = n || 320, b = a || 80;
+  D.value = {
+    // X轴：确保组件完全在可视区内，右侧增加滚动条安全区
+    x: Math.max(
+      12,
+      Math.min(
+        V.x,
+        window.innerWidth - y - 12 - 0
+      )
+    ),
+    // Y轴：确保组件完全在可视区内，底部保留safeArea
+    y: Math.max(
+      12,
+      Math.min(V.y, window.innerHeight - b - 12)
+    )
+  }, Z(D.value);
+}, sV = () => {
+  try {
+    const V = localStorage.getItem(L);
+    V && localStorage.setItem(O, V);
+  } catch {
+    console.warn("Failed to save mem_position to localStorage");
+  }
+  Z(D.value);
+}, DV = () => {
+  try {
+    const V = localStorage.getItem(O);
+    if (V) {
+      const n = JSON.parse(V);
+      typeof n.x == "number" && typeof n.y == "number" && (Z(n), D.value = n);
+    }
+    localStorage.removeItem(O);
+  } catch {
+    console.warn("Failed to restore mem_position from localStorage");
+  }
+}, bV = (V) => {
+  eV.value = V;
+}, BV = (V, n) => {
+  const a = f.value.find((s) => s.id === V);
+  a && (a.progress = Math.max(0, Math.min(100, n)));
+}, QV = (V, n) => {
+  const a = f.value.find((s) => s.id === V);
+  a && Object.assign(a, n);
+}, aV = () => ({
+  visibleIslands: f,
+  queue: C,
+  position: D,
+  globalSoundEnabled: eV,
+  maxVisible: J,
+  hasVisibleSlots: tV,
+  hasQueuedItems: oV,
+  add: MV,
+  remove: CV,
+  clear: EV,
+  clearQueue: IV,
+  updatePosition: kV,
+  saveMemPosition: sV,
+  setGlobalSoundEnabled: bV,
+  updateProgress: BV,
+  updateIsland: QV,
+  processQueue: nV
+}), k = new URL("data:audio/mpeg;base64,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knmSNGpnU/dT0H2qRZFHRWjpIqVTUk/UbPl0EAACA12sDZ4GHg2IgAVRmYZEBhYWmRVgY7ap03CGwg2WrWCcF/H5n3FO1kDVK9kZtyT2bldZDVm0ODaF48HWc6hUxnd95g7gvavsYtnFq+26brG+Mf/cHe7YrnWYOIW95pbE+Mbe/OrXti319W3rfrNbNLa+PSNcmNh8O7VMQU1FMy4xMDEgKGJldGEgMilVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/+5JkuQzzzkXQB3JAAgAADSDgAAEPlQswdceACAAANIKAAARVVVVVAAAADIgCAggAOfxoBIemFg8mQQ31cDAJOTXESjHwpTBAPa+JioCipTDQC1KueBgggGkFF0Y7AxAoDOgQASAhYV0NW8NXBcGDY2GqwyKQIgxFvBuwToNgUmThSGWFbENFy/NBW4hcg4pQighUmj6JSHO/JY8Tg7BQYuccYuYmSKkBSWXf47DBBRACYHeRckjIiw5xRJ0u0S7/yCJE0XCGFAg5FzcqLKRFiBGJdLqy6TJkRb/7kwRQnCDl83PGZuRQihOE+bkWMUVrLpFTIvE0iySJd//6aJfNyKEUNCfTrL5uRQnDQ3/+RUyLxeqSMS6RUyLxlSLxiXSZTEFNRTMuMTAxIChiZXRhIDIpVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uSZL0AB8h9yN52gAAAAA0gwAAAAAABpBwAACAAADSDgAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==", import.meta.url).href, YV = {
+  default: k,
+  success: k,
+  error: k,
+  warning: k,
+  info: k
+};
+let G = null;
+const RV = () => (G || (G = new (window.AudioContext || window.webkitAudioContext)()), G), M = (V, n, a = "sine") => {
+  try {
+    const s = RV(), A = s.createOscillator(), u = s.createGain();
+    A.connect(u), u.connect(s.destination), A.frequency.value = V, A.type = a, u.gain.setValueAtTime(0.3, s.currentTime), u.gain.exponentialRampToValueAtTime(
+      0.01,
+      s.currentTime + n
+    ), A.start(s.currentTime), A.stop(s.currentTime + n);
+  } catch (s) {
+    console.warn("Failed to play sound:", s);
+  }
+}, VV = (V) => {
+  switch (V) {
+    case "success":
+      M(880, 0.15), setTimeout(() => M(1100, 0.2), 100);
+      break;
+    case "error":
+      M(200, 0.3, "sawtooth");
+      break;
+    case "warning":
+      M(600, 0.2), setTimeout(() => M(500, 0.2), 150);
+      break;
+    case "info":
+      M(700, 0.15);
+      break;
+  }
+}, NV = (V, n, a = !0) => {
+  if (!a) return;
+  const s = n || YV[V];
+  s ? new Audio(s).play().catch((u) => {
+    console.warn("Failed to play sound:", u), VV(V);
+  }) : VV(V);
+}, TV = ["onClick"], UV = { class: "island-content" }, FV = {
+  key: 0,
+  class: "island-icon"
+}, GV = { key: 1 }, OV = {
+  key: 1,
+  class: "island-icon default-icon"
+}, HV = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, LV = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, ZV = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, JV = {
+  key: 3,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, WV = {
+  key: 4,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, PV = { class: "island-text" }, KV = { class: "island-title" }, qV = {
+  key: 0,
+  class: "island-subtitle"
+}, jV = ["onClick"], XV = {
+  key: 0,
+  class: "island-progress"
+}, zV = {
+  key: 1,
+  class: "island-dynamic-component"
+}, _V = /* @__PURE__ */ AV({
+  __name: "DynamicIsland",
+  setup(V) {
+    const n = aV(), { visibleIslands: a, position: s, globalSoundEnabled: A } = n, u = w(null), p = w(!1), y = w({ x: 0, y: 0 }), b = H(() => ({
+      left: `${s.value.x}px`,
+      top: `${s.value.y}px`,
+      zIndex: 99999
+    })), W = (o) => {
+      const e = {};
+      return o.backgroundColor && (e.background = o.backgroundColor), o.textColor && (e.color = o.textColor), e;
+    }, P = (o) => {
+      const e = o.target;
+      e.closest(".island-close") || e.closest(".island-dynamic-component") || !e.closest(".island-header") || (p.value = !0, y.value = {
+        x: o.clientX - s.value.x,
+        y: o.clientY - s.value.y
+      }, document.addEventListener("mousemove", Q), document.addEventListener("mouseup", i));
+    }, Q = (o) => {
+      var x, v;
+      if (!p.value) return;
+      const e = 12, t = 20, m = ((x = u.value) == null ? void 0 : x.offsetWidth) || 320, B = ((v = u.value) == null ? void 0 : v.offsetHeight) || 80;
+      let h = o.clientX - y.value.x, E = o.clientY - y.value.y;
+      h = Math.max(
+        e,
+        Math.min(
+          h,
+          window.innerWidth - m - e - t
+        )
+      ), E = Math.max(
+        e,
+        Math.min(E, window.innerHeight - B - e)
+      ), n.updatePosition({ x: h, y: E }, m, B);
+    }, i = () => {
+      p.value = !1, document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", i);
+    }, d = (o) => {
+      var e;
+      p.value || (e = o.onClick) == null || e.call(o);
+    }, g = (o) => {
+      n.remove(o);
+    }, iV = (o, e) => {
+      lV("dynamic-island"), $(() => {
+        e();
+      });
+    }, rV = (o, e) => {
+      $(() => {
+        e();
+      });
+    }, S = /* @__PURE__ */ new Map(), cV = (o) => {
+      if (o.persistent || o.duration <= 0) return;
+      K(o.id);
+      const e = window.setTimeout(() => {
+        n.remove(o.id);
+      }, o.duration);
+      S.set(o.id, e);
+    }, K = (o) => {
+      const e = S.get(o);
+      e && (clearTimeout(e), S.delete(o));
+    };
+    uV(() => {
+      S.forEach((o) => clearTimeout(o)), S.clear();
+    }), j(
+      () => a.value.length,
+      () => {
+        a.value.forEach((o) => {
+          !o.persistent && o.duration > 0 && !S.has(o.id) && (cV(o), o.soundEnabled && A.value && NV(o.type, o.soundUrl, !0));
+        });
+      },
+      { immediate: !0 }
+    ), j(
+      a,
+      (o, e) => {
+        const t = new Set(o.map((m) => m.id));
+        new Set((e || []).map((m) => m.id)), e == null || e.forEach((m) => {
+          t.has(m.id) || K(m.id);
+        });
+      },
+      { deep: !0 }
+    );
+    function lV(o) {
+      const e = document.getElementById(o);
+      if (!e)
+        return console.warn(`ID为 ${o} 的DOM元素不存在`), null;
+      const t = e.getBoundingClientRect(), m = window.innerWidth || document.documentElement.clientWidth, B = window.innerHeight || document.documentElement.clientHeight, h = 12, E = 12, x = h, v = B - h, Y = h, R = m - h - E, q = t.top >= x && t.left >= Y && t.bottom <= v && t.right <= R;
+      if (!q) {
+        const N = {
+          // 垂直方向：贴合顶部安全区 / 贴合底部安全区 / 保持原位
+          top: t.top < x ? x : t.bottom > v ? v - t.height : t.top,
+          // 水平方向：贴合左侧安全区 / 贴合右侧安全区 / 保持原位
+          left: t.left < Y ? Y : t.right > R ? R - t.width : t.left
+        };
+        console.log("safePosition", N), e.style.position = "fixed", e.style.left = `${N.left}px`, console.log(`✅ 已调整ID为 ${o} 的DOM到视口内`, N);
+      }
+      return {
+        width: e.offsetWidth,
+        clientWidth: e.clientWidth,
+        position: {
+          top: t.top,
+          left: t.left,
+          right: t.right,
+          bottom: t.bottom,
+          x: t.x,
+          y: t.y
+        },
+        isInViewport: q,
+        // safePosition, // 你需要的：带安全区的目标位置
+        domRect: t
+      };
+    }
+    return (o, e) => (c(), T(dV, { to: "body" }, [
+      r("div", {
+        id: "dynamic-island",
+        ref_key: "containerRef",
+        ref: u,
+        class: "dynamic-island-container",
+        style: U(b.value),
+        onMousedown: P
+      }, [
+        mV(gV, {
+          name: "island",
+          tag: "div",
+          class: "island-list",
+          onEnter: iV,
+          onLeave: rV
+        }, {
+          default: fV(() => [
+            (c(!0), l(hV, null, wV(pV(a), (t) => (c(), l("div", {
+              key: t.id,
+              class: X(["dynamic-island", [
+                `island-${t.type}`,
+                `animation-${t.animation}`
+              ]]),
+              style: U(W(t)),
+              onClick: (m) => d(t)
+            }, [
+              r("div", UV, [
+                r("div", {
+                  class: X(["island-header", { "draggable-area": !0 }])
+                }, [
+                  t.showIcon && t.icon ? (c(), l("div", FV, [
+                    typeof t.icon != "string" ? (c(), T(z(t.icon), { key: 0 })) : (c(), l("span", GV, F(t.icon), 1))
+                  ])) : t.showIcon ? (c(), l("div", OV, [
+                    t.type === "success" ? (c(), l("svg", HV, [...e[1] || (e[1] = [
+                      r("path", { d: "M20 6L9 17l-5-5" }, null, -1)
+                    ])])) : t.type === "error" ? (c(), l("svg", LV, [...e[2] || (e[2] = [
+                      r("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10"
+                      }, null, -1),
+                      r("path", { d: "M15 9l-6 6M9 9l6 6" }, null, -1)
+                    ])])) : t.type === "warning" ? (c(), l("svg", ZV, [...e[3] || (e[3] = [
+                      r("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "9",
+                        x2: "12",
+                        y2: "13"
+                      }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "17",
+                        x2: "12.01",
+                        y2: "17"
+                      }, null, -1)
+                    ])])) : t.type === "info" ? (c(), l("svg", JV, [...e[4] || (e[4] = [
+                      r("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10"
+                      }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "16",
+                        x2: "12",
+                        y2: "12"
+                      }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "8",
+                        x2: "12.01",
+                        y2: "8"
+                      }, null, -1)
+                    ])])) : (c(), l("svg", WV, [...e[5] || (e[5] = [
+                      r("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10"
+                      }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "8",
+                        x2: "12",
+                        y2: "12"
+                      }, null, -1),
+                      r("line", {
+                        x1: "12",
+                        y1: "16",
+                        x2: "12.01",
+                        y2: "16"
+                      }, null, -1)
+                    ])]))
+                  ])) : I("", !0),
+                  r("div", PV, [
+                    r("div", KV, F(t.title), 1),
+                    t.subtitle ? (c(), l("div", qV, F(t.subtitle), 1)) : I("", !0)
+                  ]),
+                  t.showClose ? (c(), l("button", {
+                    key: 2,
+                    class: "island-close",
+                    onClick: _((m) => g(t.id), ["stop"]),
+                    onMousedown: e[0] || (e[0] = _(() => {
+                    }, ["stop"]))
+                  }, [...e[6] || (e[6] = [
+                    r("svg", {
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2"
+                    }, [
+                      r("path", { d: "M18 6L6 18M6 6l12 12" })
+                    ], -1)
+                  ])], 40, jV)) : I("", !0)
+                ]),
+                t.showProgress && t.progress !== void 0 ? (c(), l("div", XV, [
+                  r("div", {
+                    class: "progress-bar",
+                    style: U({ width: `${t.progress}%` })
+                  }, null, 4)
+                ])) : I("", !0),
+                t.dynamicComponent ? (c(), l("div", zV, [
+                  (c(), T(z(t.dynamicComponent.component), yV({ ref_for: !0 }, t.dynamicComponent.props), null, 16))
+                ])) : I("", !0)
+              ])
+            ], 14, TV))), 128))
+          ]),
+          _: 1
+        })
+      ], 36)
+    ]));
+  }
+}), $V = (V, n) => {
+  const a = V.__vccOpts || V;
+  for (const [s, A] of n)
+    a[s] = A;
+  return a;
+}, Ve = /* @__PURE__ */ $V(_V, [["__scopeId", "data-v-7c261bf3"]]), te = () => {
+  const V = aV();
+  return {
+    show: (i) => V.add(i),
+    success: (i, d, g) => V.add({
+      type: "success",
+      title: i,
+      subtitle: d,
+      ...g
+    }),
+    error: (i, d, g) => V.add({
+      type: "error",
+      title: i,
+      subtitle: d,
+      duration: (g == null ? void 0 : g.duration) ?? 8e3,
+      ...g
+    }),
+    warning: (i, d, g) => V.add({
+      type: "warning",
+      title: i,
+      subtitle: d,
+      ...g
+    }),
+    info: (i, d, g) => V.add({
+      type: "info",
+      title: i,
+      subtitle: d,
+      ...g
+    }),
+    close: (i) => {
+      console.log("close", i), V.remove(i);
+    },
+    clear: () => {
+      V.clear();
+    },
+    clearQueue: () => {
+      V.clearQueue();
+    },
+    updateProgress: (i, d) => {
+      V.updateProgress(i, d);
+    },
+    updateIsland: (i, d) => {
+      V.updateIsland(i, d);
+    },
+    setSoundEnabled: (i) => {
+      V.setGlobalSoundEnabled(i);
+    }
+  };
+}, oe = {
+  install(V) {
+    V.component("DynamicIsland", Ve);
+  }
+};
+export {
+  Ve as DynamicIsland,
+  oe as default,
+  te as useDynamicIsland
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.Vue3DynamicIsland={},f.Vue))})(this,function(f,e){"use strict";var N=typeof document<"u"?document.currentScript:null;const D="dynamic-island-position",b="dynamic-island-mem-position",z=()=>`island-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,v=()=>({x:Math.max(12,Math.min(window.innerWidth/2-150,window.innerWidth-320-12-20)),y:Math.max(12,20)}),$=()=>{try{const V=localStorage.getItem(D);if(V){const a=JSON.parse(V);if(typeof a.x=="number"&&typeof a.y=="number")return{x:Math.max(12,Math.min(a.x,window.innerWidth-320-12-20)),y:Math.max(12,Math.min(a.y,window.innerHeight-80-12))}}}catch{console.warn("Failed to load position from localStorage")}return v()},Q=V=>{try{localStorage.setItem(D,JSON.stringify(V))}catch{console.warn("Failed to save position to localStorage")}},m=e.ref([]),p=e.ref([]),x=e.ref($()),O=e.ref(!0),R=3,L=e.computed(()=>m.value.length<R),H=e.computed(()=>p.value.length>0),Z=()=>{for(;L.value&&H.value;){const V=p.value.shift();V&&m.value.push(V)}},ee=V=>{const a={id:V.id||z(),type:V.type||"default",title:V.title,subtitle:V.subtitle,icon:V.icon,showIcon:V.showIcon??!0,showClose:V.showClose??!0,duration:V.duration??3e3,persistent:V.persistent??!1,animation:V.animation||"slide",progress:V.progress,showProgress:V.showProgress??!1,dynamicComponent:V.dynamicComponent,backgroundColor:V.backgroundColor,textColor:V.textColor,soundEnabled:V.soundEnabled??!0,soundUrl:V.soundUrl,onClick:V.onClick,onClose:V.onClose,createdAt:Date.now(),memPosition:V.memPosition??!1};return m.value.length<R?(m.value.push(a),a.memPosition&&J()):p.value.push(a),a.id},Ve=V=>{var r;const a=m.value.findIndex(s=>s.id===V);if(a>-1){const s=m.value[a];(r=s.onClose)==null||r.call(s),m.value.splice(a,1),s.memPosition&&ae(),Z()}},te=()=>{m.value.forEach(V=>{var a;(a=V.onClose)==null||a.call(V)}),m.value=[],p.value=[]},oe=()=>{p.value=[]},ne=(V,a,r)=>{const y=a||320,B=r||80;x.value={x:Math.max(12,Math.min(V.x,window.innerWidth-y-12-0)),y:Math.max(12,Math.min(V.y,window.innerHeight-B-12))},Q(x.value)},J=()=>{try{const V=localStorage.getItem(D);V&&localStorage.setItem(b,V)}catch{console.warn("Failed to save mem_position to localStorage")}Q(x.value)},ae=()=>{try{const V=localStorage.getItem(b);if(V){const a=JSON.parse(V);typeof a.x=="number"&&typeof a.y=="number"&&(Q(a),x.value=a)}localStorage.removeItem(b)}catch{console.warn("Failed to restore mem_position from localStorage")}},se=V=>{O.value=V},re=(V,a)=>{const r=m.value.find(s=>s.id===V);r&&(r.progress=Math.max(0,Math.min(100,a)))},ce=(V,a)=>{const r=m.value.find(s=>s.id===V);r&&Object.assign(r,a)},P=()=>({visibleIslands:m,queue:p,position:x,globalSoundEnabled:O,maxVisible:R,hasVisibleSlots:L,hasQueuedItems:H,add:ee,remove:Ve,clear:te,clearQueue:oe,updatePosition:ne,saveMemPosition:J,setGlobalSoundEnabled:se,updateProgress:re,updateIsland:ce,processQueue:Z}),C=new URL("data:audio/mpeg;base64,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knmSNGpnU/dT0H2qRZFHRWjpIqVTUk/UbPl0EAACA12sDZ4GHg2IgAVRmYZEBhYWmRVgY7ap03CGwg2WrWCcF/H5n3FO1kDVK9kZtyT2bldZDVm0ODaF48HWc6hUxnd95g7gvavsYtnFq+26brG+Mf/cHe7YrnWYOIW95pbE+Mbe/OrXti319W3rfrNbNLa+PSNcmNh8O7VMQU1FMy4xMDEgKGJldGEgMilVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/+5JkuQzzzkXQB3JAAgAADSDgAAEPlQswdceACAAANIKAAARVVVVVAAAADIgCAggAOfxoBIemFg8mQQ31cDAJOTXESjHwpTBAPa+JioCipTDQC1KueBgggGkFF0Y7AxAoDOgQASAhYV0NW8NXBcGDY2GqwyKQIgxFvBuwToNgUmThSGWFbENFy/NBW4hcg4pQighUmj6JSHO/JY8Tg7BQYuccYuYmSKkBSWXf47DBBRACYHeRckjIiw5xRJ0u0S7/yCJE0XCGFAg5FzcqLKRFiBGJdLqy6TJkRb/7kwRQnCDl83PGZuRQihOE+bkWMUVrLpFTIvE0iySJd//6aJfNyKEUNCfTrL5uRQnDQ3/+RUyLxeqSMS6RUyLxlSLxiXSZTEFNRTMuMTAxIChiZXRhIDIpVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uSZL0AB8h9yN52gAAAAA0gwAAAAAABpBwAACAAADSDgAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==",typeof document>"u"&&typeof location>"u"?require("url").pathToFileURL(__filename).href:typeof document>"u"?location.href:N&&N.tagName.toUpperCase()==="SCRIPT"&&N.src||new URL("index.umd.cjs",document.baseURI).href).href,le={default:C,success:C,error:C,warning:C,info:C};let Y=null;const ie=()=>(Y||(Y=new(window.AudioContext||window.webkitAudioContext)),Y),h=(V,a,r="sine")=>{try{const s=ie(),l=s.createOscillator(),i=s.createGain();l.connect(i),i.connect(s.destination),l.frequency.value=V,l.type=r,i.gain.setValueAtTime(.3,s.currentTime),i.gain.exponentialRampToValueAtTime(.01,s.currentTime+a),l.start(s.currentTime),l.stop(s.currentTime+a)}catch(s){console.warn("Failed to play sound:",s)}},W=V=>{switch(V){case"success":h(880,.15),setTimeout(()=>h(1100,.2),100);break;case"error":h(200,.3,"sawtooth");break;case"warning":h(600,.2),setTimeout(()=>h(500,.2),150);break;case"info":h(700,.15);break}},de=(V,a,r=!0)=>{if(!r)return;const s=a||le[V];s?new Audio(s).play().catch(i=>{console.warn("Failed to play sound:",i),W(V)}):W(V)},Ae=["onClick"],me={class:"island-content"},ue={key:0,class:"island-icon"},fe={key:1},ge={key:1,class:"island-icon default-icon"},pe={key:0,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},he={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},we={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},ye={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},Ee={key:4,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},Se={class:"island-text"},ke={class:"island-title"},xe={key:0,class:"island-subtitle"},Ce=["onClick"],Me={key:0,class:"island-progress"},Be={key:1,class:"island-dynamic-component"},K=((V,a)=>{const r=V.__vccOpts||V;for(const[s,l]of a)r[s]=l;return r})(e.defineComponent({__name:"DynamicIsland",setup(V){const a=P(),{visibleIslands:r,position:s,globalSoundEnabled:l}=a,i=e.ref(null),w=e.ref(!1),y=e.ref({x:0,y:0}),B=e.computed(()=>({left:`${s.value.x}px`,top:`${s.value.y}px`,zIndex:99999})),q=n=>{const t={};return n.backgroundColor&&(t.background=n.backgroundColor),n.textColor&&(t.color=n.textColor),t},j=n=>{const t=n.target;t.closest(".island-close")||t.closest(".island-dynamic-component")||!t.closest(".island-header")||(w.value=!0,y.value={x:n.clientX-s.value.x,y:n.clientY-s.value.y},document.addEventListener("mousemove",T),document.addEventListener("mouseup",c))},T=n=>{var S,k;if(!w.value)return;const t=12,o=20,A=((S=i.value)==null?void 0:S.offsetWidth)||320,I=((k=i.value)==null?void 0:k.offsetHeight)||80;let g=n.clientX-y.value.x,M=n.clientY-y.value.y;g=Math.max(t,Math.min(g,window.innerWidth-A-t-o)),M=Math.max(t,Math.min(M,window.innerHeight-I-t)),a.updatePosition({x:g,y:M},A,I)},c=()=>{w.value=!1,document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",c)},d=n=>{var t;w.value||(t=n.onClick)==null||t.call(n)},u=n=>{a.remove(n)},De=(n,t)=>{Re("dynamic-island"),e.nextTick(()=>{t()})},be=(n,t)=>{e.nextTick(()=>{t()})},E=new Map,Qe=n=>{if(n.persistent||n.duration<=0)return;X(n.id);const t=window.setTimeout(()=>{a.remove(n.id)},n.duration);E.set(n.id,t)},X=n=>{const t=E.get(n);t&&(clearTimeout(t),E.delete(n))};e.onUnmounted(()=>{E.forEach(n=>clearTimeout(n)),E.clear()}),e.watch(()=>r.value.length,()=>{r.value.forEach(n=>{!n.persistent&&n.duration>0&&!E.has(n.id)&&(Qe(n),n.soundEnabled&&l.value&&de(n.type,n.soundUrl,!0))})},{immediate:!0}),e.watch(r,(n,t)=>{const o=new Set(n.map(A=>A.id));new Set((t||[]).map(A=>A.id)),t==null||t.forEach(A=>{o.has(A.id)||X(A.id)})},{deep:!0});function Re(n){const t=document.getElementById(n);if(!t)return console.warn(`ID为 ${n} 的DOM元素不存在`),null;const o=t.getBoundingClientRect(),A=window.innerWidth||document.documentElement.clientWidth,I=window.innerHeight||document.documentElement.clientHeight,g=12,M=12,S=g,k=I-g,U=g,F=A-g-M,_=o.top>=S&&o.left>=U&&o.bottom<=k&&o.right<=F;if(!_){const G={top:o.top<S?S:o.bottom>k?k-o.height:o.top,left:o.left<U?U:o.right>F?F-o.width:o.left};console.log("safePosition",G),t.style.position="fixed",t.style.left=`${G.left}px`,console.log(`✅ 已调整ID为 ${n} 的DOM到视口内`,G)}return{width:t.offsetWidth,clientWidth:t.clientWidth,position:{top:o.top,left:o.left,right:o.right,bottom:o.bottom,x:o.x,y:o.y},isInViewport:_,domRect:o}}return(n,t)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{id:"dynamic-island",ref_key:"containerRef",ref:i,class:"dynamic-island-container",style:e.normalizeStyle(B.value),onMousedown:j},[e.createVNode(e.TransitionGroup,{name:"island",tag:"div",class:"island-list",onEnter:De,onLeave:be},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),o=>(e.openBlock(),e.createElementBlock("div",{key:o.id,class:e.normalizeClass(["dynamic-island",[`island-${o.type}`,`animation-${o.animation}`]]),style:e.normalizeStyle(q(o)),onClick:A=>d(o)},[e.createElementVNode("div",me,[e.createElementVNode("div",{class:e.normalizeClass(["island-header",{"draggable-area":!0}])},[o.showIcon&&o.icon?(e.openBlock(),e.createElementBlock("div",ue,[typeof o.icon!="string"?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0})):(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString(o.icon),1))])):o.showIcon?(e.openBlock(),e.createElementBlock("div",ge,[o.type==="success"?(e.openBlock(),e.createElementBlock("svg",pe,[...t[1]||(t[1]=[e.createElementVNode("path",{d:"M20 6L9 17l-5-5"},null,-1)])])):o.type==="error"?(e.openBlock(),e.createElementBlock("svg",he,[...t[2]||(t[2]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("path",{d:"M15 9l-6 6M9 9l6 6"},null,-1)])])):o.type==="warning"?(e.openBlock(),e.createElementBlock("svg",we,[...t[3]||(t[3]=[e.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"},null,-1),e.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"},null,-1),e.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"},null,-1)])])):o.type==="info"?(e.openBlock(),e.createElementBlock("svg",ye,[...t[4]||(t[4]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"},null,-1),e.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",Ee,[...t[5]||(t[5]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"12",y1:"8",x2:"12",y2:"12"},null,-1),e.createElementVNode("line",{x1:"12",y1:"16",x2:"12.01",y2:"16"},null,-1)])]))])):e.createCommentVNode("",!0),e.createElementVNode("div",Se,[e.createElementVNode("div",ke,e.toDisplayString(o.title),1),o.subtitle?(e.openBlock(),e.createElementBlock("div",xe,e.toDisplayString(o.subtitle),1)):e.createCommentVNode("",!0)]),o.showClose?(e.openBlock(),e.createElementBlock("button",{key:2,class:"island-close",onClick:e.withModifiers(A=>u(o.id),["stop"]),onMousedown:t[0]||(t[0]=e.withModifiers(()=>{},["stop"]))},[...t[6]||(t[6]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{d:"M18 6L6 18M6 6l12 12"})],-1)])],40,Ce)):e.createCommentVNode("",!0)]),o.showProgress&&o.progress!==void 0?(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",{class:"progress-bar",style:e.normalizeStyle({width:`${o.progress}%`})},null,4)])):e.createCommentVNode("",!0),o.dynamicComponent?(e.openBlock(),e.createElementBlock("div",Be,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.dynamicComponent.component),e.mergeProps({ref_for:!0},o.dynamicComponent.props),null,16))])):e.createCommentVNode("",!0)])],14,Ae))),128))]),_:1})],36)]))}}),[["__scopeId","data-v-7c261bf3"]]),Ie=()=>{const V=P();return{show:c=>V.add(c),success:(c,d,u)=>V.add({type:"success",title:c,subtitle:d,...u}),error:(c,d,u)=>V.add({type:"error",title:c,subtitle:d,duration:(u==null?void 0:u.duration)??8e3,...u}),warning:(c,d,u)=>V.add({type:"warning",title:c,subtitle:d,...u}),info:(c,d,u)=>V.add({type:"info",title:c,subtitle:d,...u}),close:c=>{console.log("close",c),V.remove(c)},clear:()=>{V.clear()},clearQueue:()=>{V.clearQueue()},updateProgress:(c,d)=>{V.updateProgress(c,d)},updateIsland:(c,d)=>{V.updateIsland(c,d)},setSoundEnabled:c=>{V.setGlobalSoundEnabled(c)}}},Ne={install(V){V.component("DynamicIsland",K)}};f.DynamicIsland=K,f.default=Ne,f.useDynamicIsland=Ie,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.dynamic-island-container[data-v-7c261bf3]{position:fixed;pointer-events:auto}.island-list[data-v-7c261bf3]{display:flex;flex-direction:column;gap:8px}.dynamic-island[data-v-7c261bf3]{min-width:240px;max-width:320px;background:#000000d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:10px;padding:10px 14px;box-shadow:0 6px 24px #00000059,0 0 0 1px #ffffff1a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:auto}.island-success[data-v-7c261bf3]{background:#22c55ee6}.island-error[data-v-7c261bf3]{background:#ef4444e6}.island-warning[data-v-7c261bf3]{background:#f59e0be6}.island-info[data-v-7c261bf3]{background:#3b82f6e6}.island-content[data-v-7c261bf3]{display:flex;flex-direction:column;gap:8px}.island-header[data-v-7c261bf3]{display:flex;align-items:center;gap:10px;cursor:grab}.island-header[data-v-7c261bf3]:active{cursor:grabbing}.island-icon[data-v-7c261bf3]{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.island-icon svg[data-v-7c261bf3]{width:100%;height:100%}.default-icon[data-v-7c261bf3]{background:#fff3;border-radius:50%;padding:3px}.island-text[data-v-7c261bf3]{flex:1;min-width:0}.island-title[data-v-7c261bf3]{font-size:13px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.island-subtitle[data-v-7c261bf3]{font-size:11px;opacity:.85;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.island-close[data-v-7c261bf3]{width:22px;height:22px;border:none;background:#ffffff26;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease;flex-shrink:0}.island-close[data-v-7c261bf3]:hover{background:#ffffff40;transform:scale(1.1)}.island-close svg[data-v-7c261bf3]{width:12px;height:12px}.island-progress[data-v-7c261bf3]{height:2px;background:#fff3;border-radius:2px;overflow:hidden}.progress-bar[data-v-7c261bf3]{height:100%;background:#fff;border-radius:2px;transition:width .3s ease}.island-dynamic-component[data-v-7c261bf3]{max-height:500px;overflow-y:auto}.island-dynamic-component[data-v-7c261bf3]::-webkit-scrollbar{width:6px;height:6px}.island-dynamic-component[data-v-7c261bf3]::-webkit-scrollbar-track{background:#ffffff1a;border-radius:5px}.island-dynamic-component[data-v-7c261bf3]::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:5px}.island-enter-active[data-v-7c261bf3],.island-leave-active[data-v-7c261bf3]{transition:all .4s cubic-bezier(.4,0,.2,1)}.island-enter-from[data-v-7c261bf3]{opacity:0;transform:translateY(-20px) scale(.9)}.island-leave-to[data-v-7c261bf3]{opacity:0;transform:translateY(-10px) scale(.95)}.animation-fade.island-enter-from[data-v-7c261bf3]{opacity:0}.animation-slide.island-enter-from[data-v-7c261bf3]{opacity:0;transform:translate(100px)}.animation-zoom.island-enter-from[data-v-7c261bf3]{opacity:0;transform:scale(.5)}.animation-bounce.island-enter-from[data-v-7c261bf3]{opacity:0;transform:translateY(-50px)}.animation-bounce.island-enter-active[data-v-7c261bf3]{animation:bounceIn-7c261bf3 .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounceIn-7c261bf3{0%{opacity:0;transform:translateY(-50px) scale(.3)}50%{transform:translateY(10px) scale(1.05)}70%{transform:translateY(-5px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 480px){.dynamic-island[data-v-7c261bf3]{min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "vue3-dynamic-island",
+  "version": "1.0.1",
+  "description": "A commercial-grade Dynamic Island notification component for Vue 3",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "notification",
+    "dynamic-island",
+    "toast",
+    "alert",
+    "component",
+    "typescript"
+  ],
+  "author": "piapia_",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/tender_only/dynamic-island"
+  },
+  "bugs": {
+    "url": "https://gitee.com/tender_only/dynamic-island/issues"
+  },
+  "homepage": "https://gitee.com/tender_only/dynamic-island",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  }
+}