@m3ui-vue/m3ui-vue 0.4.7 → 0.5.1

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

@@ -94,7 +94,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
         <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"
+            class="toast-count-badge 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>
@@ -178,7 +178,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-bot-enter-active > .toast-inner {
   transition:
@@ -198,7 +197,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-bot-leave-active > .toast-inner {
   transition:
@@ -213,13 +211,19 @@ const getVariantStyle = (variant: string): VariantStyle =>
   opacity: 0;
   transform: scale(0.92);
 }
+.m3-toast-bot-leave-active > .toast-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-toast-bot-leave-to > .toast-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 /* ─── Top toasts ────────────────────────────────────────────────── */
 .m3-toast-top-enter-active {
   transition:
     grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-top-enter-active > .toast-inner {
   transition:
@@ -239,7 +243,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-top-leave-active > .toast-inner {
   transition:
@@ -254,6 +257,13 @@ const getVariantStyle = (variant: string): VariantStyle =>
   opacity: 0;
   transform: scale(0.92);
 }
+.m3-toast-top-leave-active > .toast-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-toast-top-leave-to > .toast-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 /* badge appear/disappear */
 .m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 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/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'
@@ -151,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>