@m3ui-vue/m3ui-vue 0.4.6 → 0.5.0

package/src/components/MSelect.vue

@@ -20,7 +20,8 @@ const props = withDefaults(
     variant?: 'filled' | 'outlined'
     mode?: 'docked' | 'modal'
     disabled?: boolean
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     required?: boolean
     leadingIcon?: string
@@ -247,7 +248,7 @@ const labelClasses = computed(() => {
       </div>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 

package/src/components/MSlider.vue

@@ -37,7 +37,7 @@ const props = withDefaults(
 const emit = defineEmits<{ 'update:modelValue': [number | [number, number]] }>()
 
 const trackEl = ref<HTMLElement>()
-const dragging = ref<false | 'single' | 'lo' | 'hi'>(false)
+const dragging = ref<false | 'single' | 0 | 1>(false)
 const isVertical = computed(() => props.orientation === 'vertical')
 const isRange = computed(() => props.variant === 'range')
 const isCentered = computed(() => props.variant === 'centered')
@@ -100,11 +100,14 @@ function onPointerDown(e: PointerEvent) {
   e.preventDefault()
   const v = valueFromEvent(e)
   if (isRange.value) {
-    const distLo = Math.abs(v - val.value.lo)
-    const distHi = Math.abs(v - val.value.hi)
-    dragging.value = distLo <= distHi ? 'lo' : 'hi'
     const cur = props.modelValue as [number, number]
-    emit('update:modelValue', dragging.value === 'lo' ? [v, cur[1]] : [cur[0], v])
+    const dist0 = Math.abs(v - cur[0])
+    const dist1 = Math.abs(v - cur[1])
+    const idx: 0 | 1 = dist0 <= dist1 ? 0 : 1
+    dragging.value = idx
+    const next: [number, number] = [cur[0], cur[1]]
+    next[idx] = v
+    emit('update:modelValue', next)
   } else {
     dragging.value = 'single'
     emit('update:modelValue', v)
@@ -115,11 +118,13 @@ function onPointerDown(e: PointerEvent) {
 }
 
 function onPointerMove(e: PointerEvent) {
-  if (!dragging.value) return
+  if (dragging.value === false) return
   const v = valueFromEvent(e)
   if (isRange.value) {
     const cur = props.modelValue as [number, number]
-    emit('update:modelValue', dragging.value === 'lo' ? [v, cur[1]] : [cur[0], v])
+    const next: [number, number] = [cur[0], cur[1]]
+    next[dragging.value as 0 | 1] = v
+    emit('update:modelValue', next)
   } else {
     emit('update:modelValue', v)
   }
@@ -169,7 +174,7 @@ const stopPositions = computed(() => {
 })
 
 const r = computed(() => s.value.radius)
-const nd = computed(() => !dragging.value)
+const nd = computed(() => dragging.value === false)
 const tr = computed(() => nd.value ? '75ms ease' : '0s')
 
 function thumbPos(pct: number) {
@@ -188,11 +193,11 @@ function thumbPos(pct: number) {
   if (isVertical.value) {
     base.left = '50%'
     base.bottom = `${pct}%`
-    base.transform = `translateX(-50%) translateY(50%) scaleX(${dragging.value ? 1.08 : 1})`
+    base.transform = `translateX(-50%) translateY(50%) scaleX(${dragging.value !== false ? 1.08 : 1})`
   } else {
     base.left = `${pct}%`
     base.top = '50%'
-    base.transform = `translateX(-50%) translateY(-50%) scaleY(${dragging.value ? 1.08 : 1})`
+    base.transform = `translateX(-50%) translateY(-50%) scaleY(${dragging.value !== false ? 1.08 : 1})`
   }
   return base
 }
@@ -212,15 +217,14 @@ const displayValue = computed(() => {
 })
 
 const tooltipValue = computed(() => {
-  if (isRange.value) {
-    if (dragging.value === 'lo') return val.value.lo
-    return val.value.hi
-  }
+  if (isRange.value && typeof dragging.value === 'number')
+    return (props.modelValue as [number, number])[dragging.value]
   return props.modelValue
 })
 
 const tooltipPct = computed(() => {
-  if (isRange.value) return dragging.value === 'lo' ? pctLo.value : pctHi.value
+  if (isRange.value && typeof dragging.value === 'number')
+    return toPct((props.modelValue as [number, number])[dragging.value])
   return pctLo.value
 })
 </script>
@@ -408,7 +412,7 @@ const tooltipPct = computed(() => {
           leave-to-class="opacity-0"
         >
           <div
-            v-if="showTooltip && dragging"
+            v-if="showTooltip && dragging !== false"
             class="pointer-events-none absolute z-10 flex h-7 min-w-7 items-center justify-center rounded-full bg-inverse-surface px-2 text-label-small tabular-nums text-inverse-on-surface"
             :style="tooltipPos(tooltipPct)"
           >

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/components/MTabs.vue

@@ -103,7 +103,7 @@ function select(tab: Tab) {
           width: `${indicatorWidth}px`,
           transition: stretching
             ? 'left 150ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0.4, 0, 0.2, 1)'
-            : 'left 250ms cubic-bezier(0.34, 1.56, 0.64, 1), width 250ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+            : 'left 180ms cubic-bezier(0.34, 1.4, 0.64, 1), width 180ms cubic-bezier(0.34, 1.4, 0.64, 1)',
         }"
       />
     </div>

package/src/components/MTagInput.vue

@@ -11,7 +11,8 @@ const props = withDefaults(
     placeholder?: string
     variant?: 'filled' | 'outlined'
     disabled?: boolean
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     required?: boolean
     leadingIcon?: string
@@ -235,7 +236,7 @@ const labelClasses = computed(() => {
       </button>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 </template>

package/src/components/MTextField.vue

@@ -10,7 +10,8 @@ const props = withDefaults(
     label: string;
     type?: string;
     variant?: "filled" | "outlined";
-    error?: string;
+    error?: boolean;
+    errorLabel?: string;
     hint?: string;
     disabled?: boolean;
     required?: boolean;
@@ -188,7 +189,7 @@ function onInput(event: Event) {
       </button>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 </template>

package/src/components/MTimePicker.vue

@@ -9,7 +9,8 @@ const props = withDefaults(defineProps<{
   label?: string
   placeholder?: string
   disabled?: boolean
-  error?: string
+  error?: boolean
+  errorLabel?: string
   hint?: string
   minuteStep?: number
   use24h?: boolean
@@ -148,7 +149,7 @@ onUnmounted(() => {
       </label>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
 
     <Teleport to="body">

package/src/components/MWindow.vue

@@ -257,11 +257,11 @@ onUnmounted(() => {
 
 // Resize handle definitions
 const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] = [
-  { dir: 's', class: 'bottom-0 left-[10px] right-[10px] h-[5px]', cursor: 'cursor-ns-resize' },
-  { dir: 'e', class: 'top-[10px] right-0 bottom-[10px] w-[5px]', cursor: 'cursor-ew-resize' },
-  { dir: 'w', class: 'top-[10px] left-0 bottom-[10px] w-[5px]', cursor: 'cursor-ew-resize' },
-  { dir: 'se', class: 'bottom-0 right-0 w-[12px] h-[12px]', cursor: 'cursor-nwse-resize' },
-  { dir: 'sw', class: 'bottom-0 left-0 w-[12px] h-[12px]', cursor: 'cursor-nesw-resize' },
+  { dir: 's', class: 'bottom-0 left-[20px] right-[20px] h-[8px]', cursor: 'cursor-ns-resize' },
+  { dir: 'e', class: 'top-[20px] right-0 bottom-[20px] w-[8px]', cursor: 'cursor-ew-resize' },
+  { dir: 'w', class: 'top-[20px] left-0 bottom-[20px] w-[8px]', cursor: 'cursor-ew-resize' },
+  { dir: 'se', class: 'bottom-0 right-0 w-[20px] h-[20px]', cursor: 'cursor-nwse-resize' },
+  { dir: 'sw', class: 'bottom-0 left-0 w-[20px] h-[20px]', cursor: 'cursor-nesw-resize' },
 ]
 </script>
 

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

@@ -81,6 +81,7 @@ export { default as MLoadingOverlay } from './components/MLoadingOverlay.vue'
 // MMarkdown — import from '@m3ui-vue/m3ui-vue/markdown'
 export { default as MMasonry } from './components/MMasonry.vue'
 export { default as MMenu } from './components/MMenu.vue'
+export { default as MMenuDivider } from './components/MMenuDivider.vue'
 export { default as MMenuItem } from './components/MMenuItem.vue'
 export { default as MMaskField } from './components/MMaskField.vue'
 export type { MaskPreset } from './components/MMaskField.vue'
@@ -94,6 +95,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'
@@ -150,7 +152,6 @@ export type { Placement } from './components/MAbsolute.vue'
 export type { BadgePosition, BadgeOverlap } from './components/MBadge.vue'
 export type { CalendarEvent } from './components/MCalendar.vue'
 export type { CarouselItem } from './components/MCarousel.vue'
-export type { ContextMenuItem } from './components/MContextMenu.vue'
 export type { DataTableColumn, DataTableFetchParams } from './components/MDataTable.vue'
 export type { DateRange } from './components/MDateRangePicker.vue'
 export type { DragDropItem } from './components/MDragDropList.vue'

package/dist/components/_MContextMenuPanel.vue.d.ts

@@ -1,13 +0,0 @@
-import type { ContextMenuItem } from "./MContextMenu.vue";
-type __VLS_Props = {
-    items: ContextMenuItem[];
-    x: number;
-    y: number;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/src/components/_MContextMenuPanel.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, nextTick } from "vue";
-import MIcon from "./MIcon.vue";
-import MContextMenuPanel from "./_MContextMenuPanel.vue";
-import type { ContextMenuItem } from "./MContextMenu.vue";
-
-const props = defineProps<{
-  items: ContextMenuItem[];
-  x: number;
-  y: number;
-}>();
-
-const emit = defineEmits<{ close: [] }>();
-
-const panel = ref<HTMLElement | null>(null);
-const panelX = ref(props.x);
-const panelY = ref(props.y);
-const activeIndex = ref<number | null>(null);
-const subPos = ref({ x: 0, y: 0 });
-
-onMounted(async () => {
-  await nextTick();
-  if (!panel.value) return;
-  const el = panel.value;
-  panelX.value = Math.min(props.x, window.innerWidth - el.offsetWidth - 8);
-  panelY.value = Math.min(props.y, window.innerHeight - el.offsetHeight - 8);
-});
-
-function onItemMouseEnter(index: number, item: ContextMenuItem, e: MouseEvent) {
-  if (item.divider || item.disabled) {
-    activeIndex.value = null;
-    return;
-  }
-  if (!item.children?.length) {
-    activeIndex.value = null;
-    return;
-  }
-
-  activeIndex.value = index;
-  const itemEl = e.currentTarget as HTMLElement;
-  const itemRect = itemEl.getBoundingClientRect();
-  const panelRect = panel.value!.getBoundingClientRect();
-
-  let x = panelRect.right;
-  let y = itemRect.top;
-  if (x + 220 > window.innerWidth) x = panelRect.left - 220;
-  if (y + 300 > window.innerHeight) y = Math.max(8, window.innerHeight - 300);
-
-  subPos.value = { x, y };
-}
-
-function onItemClick(item: ContextMenuItem) {
-  if (item.disabled || item.divider || item.children?.length) return;
-  item.onClick?.();
-  emit("close");
-}
-
-function onPanelMouseLeave(e: MouseEvent) {
-  // Don't close if the mouse moved to another context menu panel (sibling sub-panel)
-  const related = e.relatedTarget as Element | null;
-  if (related?.closest(".m3-ctx-panel")) return;
-  activeIndex.value = null;
-}
-</script>
-
-<template>
-  <div
-    ref="panel"
-    class="m3-ctx-panel absolute z-201 min-w-[200px] overflow-hidden rounded-lg bg-surface-container shadow-elevation-2"
-    :style="{ left: `${panelX}px`, top: `${panelY}px` }"
-    @mouseleave="onPanelMouseLeave"
-  >
-    <div class="py-1">
-      <template v-for="(item, i) in items" :key="i">
-        <hr v-if="item.divider" class="my-1 border-outline-variant" />
-
-        <component
-          v-else
-          :is="item.to && !item.disabled ? 'RouterLink' : 'div'"
-          :to="item.to && !item.disabled ? item.to : undefined"
-          class="relative flex cursor-default select-none items-center gap-3 px-4 py-2.5 text-body-large"
-          :class="[
-            item.disabled
-              ? 'cursor-not-allowed opacity-38 text-on-surface'
-              : item.danger
-                ? 'cursor-pointer text-error hover:bg-error/8'
-                : 'cursor-pointer text-on-surface hover:bg-on-surface/8',
-            activeIndex === i && !item.disabled
-              ? item.danger
-                ? 'bg-error/8'
-                : 'bg-on-surface/8'
-              : '',
-          ]"
-          @mouseenter="onItemMouseEnter(i, item, $event)"
-          @click="onItemClick(item)"
-        >
-          <MIcon
-            v-if="item.icon"
-            :name="item.icon"
-            :size="18"
-            class="shrink-0"
-            :class="item.danger ? 'text-error' : 'text-on-surface-variant'"
-          />
-          <span v-else class="w-[18px] shrink-0" />
-
-          <span class="flex-1">{{ item.label }}</span>
-
-          <span
-            v-if="item.shortcut"
-            class="text-label-small text-on-surface-variant"
-          >
-            {{ item.shortcut }}
-          </span>
-
-          <MIcon
-            v-if="item.children?.length"
-            name="chevron_right"
-            :size="18"
-            class="shrink-0 text-on-surface-variant"
-          />
-        </component>
-      </template>
-    </div>
-  </div>
-
-  <!-- Sub-panel: sibling in the same Teleport layer.
-       No <Transition> wrapper — MContextMenuPanel is a fragment and cannot be
-       animated by Vue's Transition (produces a console warning). -->
-  <MContextMenuPanel
-    v-if="activeIndex !== null && items[activeIndex]?.children?.length"
-    :key="activeIndex"
-    :items="items[activeIndex]!.children!"
-    :x="subPos.x"
-    :y="subPos.y"
-    @close="emit('close')"
-  />
-</template>