@m3ui-vue/m3ui-vue 0.4.5 → 0.4.7

package/src/components/MProgressBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -8,47 +8,187 @@ const props = withDefaults(
     color?: "primary" | "secondary" | "tertiary" | "error";
     variant?: "linear" | "wavy";
     label?: string;
+    thickness?: number;
   }>(),
-  {
-    color: "primary",
-    variant: "linear",
-  },
+  { color: "primary", variant: "linear" },
 );
 
 const isIndeterminate = computed(() => props.indeterminate || props.value === undefined);
-const clampedValue = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
+const clampedValue    = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
 
 const colorMap: Record<
   "primary" | "secondary" | "tertiary" | "error",
   { bar: string; track: string; text: string }
 > = {
-  primary: { bar: "bg-primary", track: "bg-primary-container", text: "text-primary" },
+  primary:   { bar: "bg-primary",   track: "bg-primary-container",   text: "text-primary"   },
   secondary: { bar: "bg-secondary", track: "bg-secondary-container", text: "text-secondary" },
-  tertiary: { bar: "bg-tertiary", track: "bg-tertiary-container", text: "text-tertiary" },
-  error: { bar: "bg-error", track: "bg-error-container", text: "text-error" },
+  tertiary:  { bar: "bg-tertiary",  track: "bg-tertiary-container",  text: "text-tertiary"  },
+  error:     { bar: "bg-error",     track: "bg-error-container",     text: "text-error"     },
 };
 
-// ── Wave geometry ────────────────────────────────────────────────────────
-// Smooth sine wave sampled as a single polyline path.
-// Period = 20px (one full up-down cycle). We render a wide strip so that
-// translating by exactly one period gives a seamless infinite scroll.
-const PERIOD = 20; // px per full sine cycle
-const AMP = 2.5; // amplitude (bar is 8px tall, mid at 4)
-const MID = 4;
-const VIEW_H = 8;
-const PERIODS = 80; // total cycles → 1600px strip
-const STEP = 1; // px sampling resolution
+// ── Wave geometry ─────────────────────────────────────────────────────────
+const PERIOD     = 20;
+const AMP        = 2.5;
+const PERIODS    = 80;
+const STEP       = 2;
+const MARGIN_PX  = 4;   // gap between wave right-end and track start
+const WAVE_START = 10;  // threshold % below which wave collapses to line
 
-const waveWidth = PERIOD * PERIODS;
+// thickness-derived (computed so they react to prop changes)
+const effectiveThickness = computed(() =>
+  props.thickness ?? (props.variant === "wavy" ? 3 : 4),
+);
+const waveMid  = computed(() => AMP + effectiveThickness.value / 2);
+const waveViewH = computed(() => 2 * AMP + effectiveThickness.value);
+
+const waveWidth = PERIOD * PERIODS; // 1600px — covers any container width
 
-const wavePath = (() => {
+// Static path for indeterminate — built once with the wavy default (thickness=3)
+const STATIC_MID = AMP + 3 / 2; // = 4
+const staticWavePath = (() => {
   let d = "";
   for (let x = 0; x <= waveWidth; x += STEP) {
-    const y = MID - AMP * Math.sin((x / PERIOD) * Math.PI * 2);
-    d += (x === 0 ? "M" : "L") + x + "," + y.toFixed(2) + " ";
+    const y = STATIC_MID - AMP * Math.sin((x / PERIOD) * Math.PI * 2);
+    d += `${x === 0 ? "M" : "L"}${x},${y.toFixed(2)} `;
   }
   return d.trim();
 })();
+
+// ── rAF state (plain JS — no Vue refs to avoid 60fps reactive overhead) ───
+//
+// Architecture mirrors MCircleProgressBar:
+//   • displayedValue  follows clampedValue with exponential smoothing (~300ms)
+//   • appearanceF     animates 0↔1 at the WAVE_START threshold and at 100%
+//   • animPhase       advances every frame to scroll the wave leftward
+// clip-path and track.left are written via direct DOM setAttribute/style
+// to avoid the CSS-transition vs rAF conflict.
+let displayedValue = 0;
+let appearanceF    = 0;
+let animPhase      = 0;
+
+type Anim = { from: number; to: number; t0: number; dur: number };
+const appearAnim: Anim = { from: 0, to: 0, t0: -1, dur: 500 };
+
+function easeInOut(t: number) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+function startAnim(a: Anim, from: number, to: number, now: number) {
+  if (Math.abs(from - to) < 0.001) { a.t0 = -1; a.to = to; return; }
+  a.from = from; a.to = to; a.t0 = now;
+}
+function tickAnim(a: Anim, now: number): number {
+  if (a.t0 < 0) return a.to;
+  const t = Math.min(1, (now - a.t0) / a.dur);
+  const v = a.from + (a.to - a.from) * easeInOut(t);
+  if (t >= 1) a.t0 = -1;
+  return v;
+}
+
+// ── Template refs for direct DOM updates ─────────────────────────────────
+const waveClipEl = ref<HTMLDivElement | null>(null);
+const trackEl    = ref<HTMLDivElement | null>(null);
+const wavePath   = ref("");  // updated in tick → drives path's :d binding
+
+// ── rAF tick ─────────────────────────────────────────────────────────────
+let lastTime: number | null = null;
+let rafId = 0;
+const PHASE_PER_MS = (2 * Math.PI) / 800; // one full PERIOD scroll per 800ms
+const VALUE_TAU    = 130;                  // exponential τ → ~300ms 90%-settle
+
+function buildWavePath(factor: number, ph: number): string {
+  const mid = waveMid.value;
+  const pts: string[] = [];
+  for (let x = 0; x <= waveWidth; x += STEP) {
+    const y = mid - AMP * factor * Math.sin((x / PERIOD) * Math.PI * 2 + ph);
+    pts.push(`${x === 0 ? "M" : "L"}${x},${y.toFixed(2)}`);
+  }
+  return pts.join(" ");
+}
+
+function tick(now: number) {
+  const dt = lastTime !== null ? now - lastTime : 0;
+  lastTime = now;
+
+  // 1. Wave phase scrolls leftward
+  animPhase -= dt * PHASE_PER_MS;
+
+  // 2. Smooth displayed value (exponential interpolation)
+  if (dt > 0) {
+    const k = 1 - Math.exp(-dt / VALUE_TAU);
+    displayedValue += (clampedValue.value - displayedValue) * k;
+  }
+
+  // 3. Advance appearance animation
+  appearanceF = tickAnim(appearAnim, now);
+
+  // 4. Update DOM directly
+  const margin = MARGIN_PX * appearanceF;
+  const dv     = displayedValue;
+
+  if (waveClipEl.value)
+    waveClipEl.value.style.clipPath = `inset(0 ${(100 - dv).toFixed(3)}% 0 0)`;
+
+  if (trackEl.value) {
+    trackEl.value.style.left   = `calc(${dv.toFixed(3)}% + ${margin.toFixed(2)}px)`;
+    trackEl.value.style.height = `${effectiveThickness.value}px`;
+  }
+
+  // 5. Rebuild wave path (drives :d via Vue ref)
+  wavePath.value = buildWavePath(appearanceF, animPhase);
+
+  rafId = requestAnimationFrame(tick);
+}
+
+// ── Watchers ─────────────────────────────────────────────────────────────
+watch(clampedValue, (v, prev) => {
+  if (props.variant !== "wavy" || isIndeterminate.value) return;
+  const now = performance.now();
+
+  if      (prev <= WAVE_START && v > WAVE_START && v < 100) startAnim(appearAnim, appearanceF, 1, now);
+  else if (prev > WAVE_START  && v <= WAVE_START)           startAnim(appearAnim, appearanceF, 0, now);
+  else if (v === 100)                                       startAnim(appearAnim, appearanceF, 0, now);
+  else if (prev === 100 && v > WAVE_START)                  startAnim(appearAnim, appearanceF, 1, now);
+});
+
+function initAndStart() {
+  displayedValue = clampedValue.value;
+  const v = clampedValue.value;
+  appearanceF   = (v > WAVE_START && v < 100) ? 1 : 0;
+  appearAnim.to = appearanceF;
+  appearAnim.t0 = -1;
+
+  // Set initial DOM values immediately to avoid a one-frame flash
+  const margin = MARGIN_PX * appearanceF;
+  if (waveClipEl.value)
+    waveClipEl.value.style.clipPath = `inset(0 ${(100 - v).toFixed(3)}% 0 0)`;
+  if (trackEl.value) {
+    trackEl.value.style.left   = `calc(${v.toFixed(3)}% + ${margin.toFixed(2)}px)`;
+    trackEl.value.style.height = `${effectiveThickness.value}px`;
+  }
+  wavePath.value = buildWavePath(appearanceF, animPhase);
+
+  if (!rafId) rafId = requestAnimationFrame(tick);
+}
+
+function stopRaf() {
+  cancelAnimationFrame(rafId);
+  rafId = 0; lastTime = null;
+  appearAnim.t0 = -1;
+}
+
+onMounted(() => {
+  if (props.variant === "wavy" && !isIndeterminate.value) initAndStart();
+});
+onUnmounted(stopRaf);
+
+watch(() => props.variant, async (v) => {
+  if (v === "wavy" && !isIndeterminate.value) { await nextTick(); initAndStart(); }
+  else stopRaf();
+});
+watch(isIndeterminate, async (v) => {
+  if (!v && props.variant === "wavy") { await nextTick(); initAndStart(); }
+  else stopRaf();
+});
 </script>
 
 <template>
@@ -58,8 +198,9 @@ const wavePath = (() => {
     <!-- ── Linear variant ────────────────────────────────────────────────── -->
     <div
       v-if="variant === 'linear'"
-      class="relative h-1 w-full overflow-hidden rounded-full"
+      class="relative w-full overflow-hidden rounded-full"
       :class="colorMap[color].track"
+      :style="{ height: `${effectiveThickness}px` }"
       role="progressbar"
       :aria-valuenow="isIndeterminate ? undefined : clampedValue"
       aria-valuemin="0"
@@ -81,54 +222,47 @@ const wavePath = (() => {
     <!-- ── Wavy variant ───────────────────────────────────────────────────── -->
     <div
       v-else
-      class="relative h-2 w-full overflow-visible"
+      class="relative w-full overflow-visible"
+      :style="{ height: `${waveViewH}px` }"
       role="progressbar"
       :aria-valuenow="isIndeterminate ? undefined : clampedValue"
       aria-valuemin="0"
       aria-valuemax="100"
     >
-      <!-- DETERMINATE -->
+      <!-- DETERMINATE — rAF drives clip-path, track.left, and wave path -->
       <template v-if="!isIndeterminate">
-        <!-- Active (wavy) portion: clipped to value%, but the wave keeps flowing -->
+        <!-- Active wave, clipped to displayedValue% -->
         <div
+          ref="waveClipEl"
           class="absolute inset-0 overflow-hidden"
-          :style="{
-            clipPath: `inset(0 ${100 - clampedValue}% 0 0)`,
-            transition: 'clip-path 300ms ease',
-          }"
+          style="clip-path: inset(0 100% 0 0)"
         >
-          <div
-            class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.8s_linear_infinite]"
+          <svg
+            class="absolute top-0 left-0 h-full"
             :class="colorMap[color].text"
-            :style="{ width: `${waveWidth}px` }"
+            :width="waveWidth"
+            :height="waveViewH"
+            :viewBox="`0 0 ${waveWidth} ${waveViewH}`"
           >
-            <svg
-              :width="waveWidth"
-              :height="VIEW_H"
-              :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
-              class="h-full"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                :d="wavePath"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-              />
-            </svg>
-          </div>
+            <path
+              :d="wavePath"
+              fill="none"
+              stroke="currentColor"
+              :stroke-width="effectiveThickness"
+              stroke-linecap="round"
+            />
+          </svg>
         </div>
 
-        <!-- Inactive (straight track) portion -->
+        <!-- Inactive track — rAF owns left and height; no Vue-managed left -->
         <div
-          class="absolute inset-y-0 right-0 flex items-center"
+          ref="trackEl"
+          class="absolute right-0"
           :class="colorMap[color].track"
-          :style="{ left: `calc(${clampedValue}% + 4px)`, transition: 'left 300ms ease' }"
-          style="border-radius: 9999px; height: 4px; top: 50%; transform: translateY(-50%)"
+          style="border-radius: 9999px; top: 50%; transform: translateY(-50%);"
         />
 
-        <!-- Stop indicator (dot at the end of the track) -->
+        <!-- Stop dot at far right -->
         <div
           class="absolute rounded-full"
           :class="colorMap[color].bar"
@@ -136,13 +270,13 @@ const wavePath = (() => {
             right: '0',
             top: '50%',
             transform: 'translateY(-50%)',
-            width: '4px',
-            height: '4px',
+            width: `${effectiveThickness}px`,
+            height: `${effectiveThickness}px`,
           }"
         />
       </template>
 
-      <!-- INDETERMINATE -->
+      <!-- INDETERMINATE — keeps original CSS-animated wide strip -->
       <div v-else class="absolute inset-0 overflow-hidden rounded-full">
         <div
           class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.9s_linear_infinite]"
@@ -151,16 +285,16 @@ const wavePath = (() => {
         >
           <svg
             :width="waveWidth"
-            :height="VIEW_H"
-            :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
+            :height="waveViewH"
+            :viewBox="`0 0 ${waveWidth} ${waveViewH}`"
             class="h-full"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              :d="wavePath"
+              :d="staticWavePath"
               fill="none"
               stroke="currentColor"
-              stroke-width="3"
+              :stroke-width="effectiveThickness"
               stroke-linecap="round"
             />
           </svg>
@@ -171,23 +305,14 @@ const wavePath = (() => {
 </template>
 
 <style>
-/* Scroll exactly one period (20px) so the loop is perfectly seamless. */
 @keyframes m3-wave-flow {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-20px);
-  }
+  from { transform: translateX(0); }
+  to   { transform: translateX(-20px); }
 }
 
 @keyframes m3-progress-indeterminate {
-  0% {
-    left: -40%;
-  }
-  100% {
-    left: 100%;
-  }
+  0%   { left: -40%; }
+  100% { left: 100%; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/MSnackbar.vue

@@ -90,7 +90,18 @@ const getVariantStyle = (variant: string): VariantStyle =>
 <template>
   <div :class="containerClass">
     <TransitionGroup :name="isTop ? 'm3-toast-top' : 'm3-toast-bot'">
-      <div v-for="t in toasts" :key="t.id" class="toast-row w-full min-w-64 max-w-xs">
+      <div v-for="t in toasts" :key="t.id" class="toast-row relative w-full min-w-64 max-w-xs">
+        <Transition name="m3-badge">
+          <span
+            v-if="t.count >= 2"
+            class="absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
+          >
+            <Transition name="m3-count" mode="out-in">
+              <span :key="t.count">{{ t.count }}</span>
+            </Transition>
+          </span>
+        </Transition>
+
         <div
           class="toast-inner pointer-events-auto relative flex items-center gap-3 overflow-hidden rounded-2xl px-4 py-4 shadow-elevation-2"
           :class="t.color ? 'text-white ring-1 ring-inset ring-white/10' : getVariantStyle(t.variant).container"
@@ -98,7 +109,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
         >
           <MSpinner v-if="t.loading" :size="20" class="shrink-0" />
           <MIcon
-            v-else
+            v-else-if="t.icon !== null"
             :name="t.icon ?? getVariantStyle(t.variant).iconName"
             :size="20"
             class="shrink-0"
@@ -244,6 +255,17 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transform: scale(0.92);
 }
 
+/* badge appear/disappear */
+.m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.m3-badge-leave-active  { transition: opacity 0.15s ease, transform 0.15s ease; }
+.m3-badge-enter-from, .m3-badge-leave-to { opacity: 0; transform: scale(0.5); }
+
+/* count number bump when incrementing */
+.m3-count-enter-active { transition: opacity 0.12s ease, transform 0.12s ease; }
+.m3-count-leave-active  { transition: opacity 0.08s ease, transform 0.08s ease; }
+.m3-count-enter-from    { opacity: 0; transform: scale(1.5) translateY(-3px); }
+.m3-count-leave-to      { opacity: 0; transform: scale(0.6) translateY(2px); }
+
 @keyframes m3-toast-progress {
   from {
     transform: scaleX(1);

package/src/composables/useNotification.ts

@@ -14,9 +14,10 @@ export interface Notification {
   variant: NotificationVariant
   duration: number
   loading?: boolean
-  icon?: string
+  icon?: string | null  // null = suppress icon entirely
   closable?: boolean
   action?: NotificationAction
+  count: number         // ≥ 2 → show badge
 }
 
 let nextId = 1
@@ -44,7 +45,7 @@ function dismiss(id: number) {
 export interface NotificationOptions {
   duration?: number
   loading?: boolean
-  icon?: string
+  icon?: string | null
   closable?: boolean
   action?: NotificationAction
 }
@@ -55,11 +56,27 @@ function show(
   options: NotificationOptions = {},
 ) {
   ensureMounted()
-  const id = nextId++
   const isLoading = options.loading ?? false
+
+  // Dedup: identical non-loading, non-action notifications increment count
+  if (!isLoading && !options.action) {
+    const existing = notifications.value.find(
+      n => n.message === message && n.variant === variant && !n.loading && !n.action,
+    )
+    if (existing) {
+      existing.count++
+      const old = timers.get(existing.id)
+      if (old) clearTimeout(old)
+      if (existing.duration > 0)
+        timers.set(existing.id, setTimeout(() => dismiss(existing.id), existing.duration))
+      return existing.id
+    }
+  }
+
+  const id = nextId++
   const duration = isLoading ? 0 : (options.duration ?? 3000)
   const closable = options.closable ?? true
-  notifications.value.push({ id, message, variant, duration, loading: isLoading, icon: options.icon, closable, action: options.action })
+  notifications.value.push({ id, message, variant, duration, loading: isLoading, icon: options.icon, closable, action: options.action, count: 1 })
   if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration))
   return id
 }

package/src/composables/useToast.ts

@@ -15,8 +15,9 @@ export interface Toast {
   duration: number
   loading?: boolean
   action?: ToastAction
-  icon?: string
+  icon?: string | null  // null = suppress icon entirely
   color?: string
+  count: number         // ≥ 2 → show badge
 }
 
 let nextId = 1
@@ -45,7 +46,7 @@ export interface ToastOptions {
   duration?: number
   loading?: boolean
   action?: ToastAction
-  icon?: string
+  icon?: string | null
   color?: string
 }
 
@@ -55,11 +56,27 @@ function show(
   options: number | ToastOptions = {},
 ) {
   ensureMounted()
-  const id = nextId++
   const opts = typeof options === 'number' ? { duration: options } : options
   const isLoading = opts.loading ?? false
+
+  // Dedup: identical non-loading, non-action toasts increment count instead of stacking
+  if (!isLoading && !opts.action) {
+    const existing = toasts.value.find(
+      t => t.message === message && t.variant === variant && !t.loading && !t.action,
+    )
+    if (existing) {
+      existing.count++
+      const old = timers.get(existing.id)
+      if (old) clearTimeout(old)
+      if (existing.duration > 0)
+        timers.set(existing.id, setTimeout(() => dismiss(existing.id), existing.duration))
+      return existing.id
+    }
+  }
+
+  const id = nextId++
   const duration = isLoading ? 0 : (opts.duration ?? (variant === 'error' ? 6000 : 4000))
-  toasts.value.push({ id, message, variant, duration, loading: isLoading, action: opts.action, icon: opts.icon, color: opts.color })
+  toasts.value.push({ id, message, variant, duration, loading: isLoading, action: opts.action, icon: opts.icon, color: opts.color, count: 1 })
   if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration))
   return id
 }

package/src/index.ts

@@ -94,6 +94,7 @@ export { default as MNavigationRail } from './components/MNavigationRail.vue'
 export { default as MOverlay } from './components/MOverlay.vue'
 export { default as MPagination } from './components/MPagination.vue'
 export { default as MProgressBar } from './components/MProgressBar.vue'
+export { default as MCircleProgressBar } from './components/MCircleProgressBar.vue'
 export { default as MRadio } from './components/MRadio.vue'
 export { default as MRadioGroup } from './components/MRadioGroup.vue'
 export { default as MRating } from './components/MRating.vue'