@m3ui-vue/m3ui-vue 0.3.0 → 0.4.0

package/src/components/MWindow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
 
 const props = withDefaults(
@@ -11,6 +11,8 @@ const props = withDefaults(
     height?: string
     minWidth?: number
     minHeight?: number
+    maxWidth?: number
+    maxHeight?: number
     resizable?: boolean
     draggable?: boolean
     closable?: boolean
@@ -86,46 +88,69 @@ function bringToFront() {
   zIndex.value = globalZIndex
 }
 
+// ---- Pointer helpers ----
+function getXY(e: MouseEvent | TouchEvent): { x: number; y: number } {
+  if ('touches' in e) {
+    const t = e.touches[0] ?? e.changedTouches[0]
+    return { x: t!.clientX, y: t!.clientY }
+  }
+  return { x: e.clientX, y: e.clientY }
+}
+
+function addListeners() {
+  document.addEventListener('mousemove', onPointerMove)
+  document.addEventListener('mouseup', onPointerUp)
+  document.addEventListener('touchmove', onPointerMove, { passive: false })
+  document.addEventListener('touchend', onPointerUp)
+}
+
+function removeListeners() {
+  document.removeEventListener('mousemove', onPointerMove)
+  document.removeEventListener('mouseup', onPointerUp)
+  document.removeEventListener('touchmove', onPointerMove)
+  document.removeEventListener('touchend', onPointerUp)
+}
+
 // ---- Drag ----
-function onTitleBarMouseDown(e: MouseEvent) {
+function onTitleBarStart(e: MouseEvent | TouchEvent) {
   if (!props.draggable) return
-  // Ignore clicks on buttons inside the title bar
   if ((e.target as HTMLElement).closest('button')) return
   e.preventDefault()
+  const { x, y } = getXY(e)
   isDragging = true
-  dragStartX = e.clientX
-  dragStartY = e.clientY
+  dragStartX = x
+  dragStartY = y
   dragStartPosX = posX.value
   dragStartPosY = posY.value
   bringToFront()
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
+  addListeners()
 }
 
 // ---- Resize ----
-function onResizeMouseDown(e: MouseEvent, direction: ResizeDirection) {
+function onResizeStart(e: MouseEvent | TouchEvent, direction: ResizeDirection) {
   if (!props.resizable) return
   e.preventDefault()
   e.stopPropagation()
+  const { x, y } = getXY(e)
   isResizing = true
   resizeDir = direction
-  resizeStartX = e.clientX
-  resizeStartY = e.clientY
+  resizeStartX = x
+  resizeStartY = y
   resizeStartW = winWidth.value
   resizeStartH = winHeight.value
   resizeStartPosX = posX.value
   resizeStartPosY = posY.value
   bringToFront()
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
+  addListeners()
 }
 
-function onMouseMove(e: MouseEvent) {
+function onPointerMove(e: MouseEvent | TouchEvent) {
   e.preventDefault()
+  const { x, y } = getXY(e)
 
   if (isDragging) {
-    const dx = e.clientX - dragStartX
-    const dy = e.clientY - dragStartY
+    const dx = x - dragStartX
+    const dy = y - dragStartY
     const parent = windowRef.value?.parentElement
     const maxX = parent ? parent.clientWidth - winWidth.value : Infinity
     const maxY = parent ? parent.clientHeight - (minimized.value ? 40 : winHeight.value) : Infinity
@@ -134,45 +159,34 @@ function onMouseMove(e: MouseEvent) {
   }
 
   if (isResizing) {
-    const dx = e.clientX - resizeStartX
-    const dy = e.clientY - resizeStartY
+    const dx = x - resizeStartX
+    const dy = y - resizeStartY
     const dir = resizeDir
     const parent = windowRef.value?.parentElement
     const parentW = parent ? parent.clientWidth : Infinity
     const parentH = parent ? parent.clientHeight : Infinity
 
-    // East
+    const clampW = (w: number) => Math.min(props.maxWidth ?? Infinity, Math.max(props.minWidth, w))
+    const clampH = (h: number) => Math.min(props.maxHeight ?? Infinity, Math.max(props.minHeight, h))
+
     if (dir.includes('e')) {
-      const maxW = parentW - resizeStartPosX
-      winWidth.value = Math.min(maxW, Math.max(props.minWidth, resizeStartW + dx))
+      winWidth.value = Math.min(parentW - resizeStartPosX, clampW(resizeStartW + dx))
     }
-    // West
     if (dir.includes('w')) {
-      const maxW = resizeStartPosX + resizeStartW
-      const newW = Math.min(maxW, Math.max(props.minWidth, resizeStartW - dx))
+      const newW = Math.min(resizeStartPosX + resizeStartW, clampW(resizeStartW - dx))
       posX.value = Math.max(0, resizeStartPosX + (resizeStartW - newW))
       winWidth.value = newW
     }
-    // South
     if (dir.includes('s')) {
-      const maxH = parentH - resizeStartPosY
-      winHeight.value = Math.min(maxH, Math.max(props.minHeight, resizeStartH + dy))
-    }
-    // North
-    if (dir === 'n' || dir === 'ne' || dir === 'nw') {
-      const maxH = resizeStartPosY + resizeStartH
-      const newH = Math.min(maxH, Math.max(props.minHeight, resizeStartH - dy))
-      posY.value = Math.max(0, resizeStartPosY + (resizeStartH - newH))
-      winHeight.value = newH
+      winHeight.value = Math.min(parentH - resizeStartPosY, clampH(resizeStartH + dy))
     }
   }
 }
 
-function onMouseUp() {
+function onPointerUp() {
   isDragging = false
   isResizing = false
-  document.removeEventListener('mousemove', onMouseMove)
-  document.removeEventListener('mouseup', onMouseUp)
+  removeListeners()
 }
 
 // ---- Actions ----
@@ -198,6 +212,29 @@ function onWindowMouseDown() {
   bringToFront()
 }
 
+// ---- Clamp to parent ----
+function clampToParent() {
+  const parent = windowRef.value?.parentElement
+  if (!parent) return
+  const pw = parent.clientWidth
+  const ph = parent.clientHeight
+  if (winWidth.value > pw) winWidth.value = Math.max(props.minWidth, pw)
+  if (winHeight.value > ph) winHeight.value = Math.max(props.minHeight, ph)
+  if (posX.value + winWidth.value > pw) posX.value = Math.max(0, pw - winWidth.value)
+  if (posY.value + winHeight.value > ph) posY.value = Math.max(0, ph - winHeight.value)
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  clampToParent()
+  const parent = windowRef.value?.parentElement
+  if (parent) {
+    resizeObserver = new ResizeObserver(clampToParent)
+    resizeObserver.observe(parent)
+  }
+})
+
 // ---- Sync initial props ----
 watch(
   () => props.x,
@@ -207,21 +244,22 @@ watch(
   () => props.y,
   (v) => { posY.value = v },
 )
+watch(
+  () => props.modelValue,
+  (v) => { if (v) nextTick(clampToParent) },
+)
 
 // ---- Cleanup ----
 onUnmounted(() => {
-  document.removeEventListener('mousemove', onMouseMove)
-  document.removeEventListener('mouseup', onMouseUp)
+  removeListeners()
+  resizeObserver?.disconnect()
 })
 
 // Resize handle definitions
 const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] = [
-  { dir: 'n', class: 'top-0 left-[10px] right-[10px] h-[5px]', cursor: 'cursor-ns-resize' },
   { 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: 'ne', class: 'top-0 right-0 w-[12px] h-[12px]', cursor: 'cursor-nesw-resize' },
-  { dir: 'nw', class: 'top-0 left-0 w-[12px] h-[12px]', cursor: 'cursor-nwse-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' },
 ]
@@ -239,7 +277,8 @@ const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] =
     <div
       class="flex items-center gap-2 px-4 h-10 bg-surface-container select-none shrink-0"
       :class="{ 'cursor-move': draggable }"
-      @mousedown="onTitleBarMouseDown"
+      @mousedown="onTitleBarStart"
+      @touchstart="onTitleBarStart"
     >
       <slot name="header">
         <MIcon v-if="icon" :name="icon" :size="18" class="text-on-surface-variant" />
@@ -282,14 +321,10 @@ const resizeHandles: { dir: ResizeDirection; class: string; cursor: string }[] =
         :key="handle.dir"
         class="absolute"
         :class="[handle.class, handle.cursor]"
-        @mousedown="onResizeMouseDown($event, handle.dir)"
+        @mousedown="onResizeStart($event, handle.dir)"
+        @touchstart="onResizeStart($event, handle.dir)"
       />
     </template>
   </div>
 </template>
 
-<style scoped>
-.flex-col {
-  transition: height 0.2s ease;
-}
-</style>

package/src/components/_MContextMenuPanel.vue

@@ -66,11 +66,11 @@ function onPanelMouseLeave(e: MouseEvent) {
 <template>
   <div
     ref="panel"
-    class="m3-ctx-panel absolute z-201 min-w-[200px] rounded-sm bg-surface-container shadow-elevation-2"
+    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="overflow-hidden rounded-sm py-1">
+    <div class="py-1">
       <template v-for="(item, i) in items" :key="i">
         <hr v-if="item.divider" class="my-1 border-outline-variant" />
 

package/src/composables/useDevice.ts

@@ -0,0 +1,29 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const MOBILE_BREAKPOINT = 768
+
+const isMobile = ref(false)
+let listeners = 0
+
+function update() {
+  isMobile.value = window.innerWidth < MOBILE_BREAKPOINT
+}
+
+export function useDevice() {
+  onMounted(() => {
+    if (listeners === 0) {
+      update()
+      window.addEventListener('resize', update)
+    }
+    listeners++
+  })
+
+  onUnmounted(() => {
+    listeners--
+    if (listeners === 0) {
+      window.removeEventListener('resize', update)
+    }
+  })
+
+  return { isMobile }
+}

package/src/composables/useNotification.ts

@@ -0,0 +1,93 @@
+import { ref, createApp, h } from 'vue'
+import MNotificationHost from '../components/MNotificationHost.vue'
+
+export type NotificationVariant = 'info' | 'success' | 'warning' | 'error'
+export type NotificationPosition =
+  | 'top-left' | 'top-center' | 'top-right'
+  | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+export interface NotificationAction { label: string; onClick: () => void }
+
+export interface Notification {
+  id: number
+  message: string
+  variant: NotificationVariant
+  duration: number
+  loading?: boolean
+  icon?: string
+  closable?: boolean
+  action?: NotificationAction
+}
+
+let nextId = 1
+let mounted = false
+const timers = new Map<number, ReturnType<typeof setTimeout>>()
+
+const notifications = ref<Notification[]>([])
+const position = ref<NotificationPosition>('top-right')
+
+function ensureMounted() {
+  if (mounted || typeof document === 'undefined') return
+  mounted = true
+  const container = document.createElement('div')
+  container.id = 'm3-notification-host'
+  document.body.appendChild(container)
+  createApp({ render: () => h(MNotificationHost) }).mount(container)
+}
+
+function dismiss(id: number) {
+  const timer = timers.get(id)
+  if (timer) { clearTimeout(timer); timers.delete(id) }
+  notifications.value = notifications.value.filter((n) => n.id !== id)
+}
+
+export interface NotificationOptions {
+  duration?: number
+  loading?: boolean
+  icon?: string
+  closable?: boolean
+  action?: NotificationAction
+}
+
+function show(
+  message: string,
+  variant: NotificationVariant = 'info',
+  options: NotificationOptions = {},
+) {
+  ensureMounted()
+  const id = nextId++
+  const isLoading = options.loading ?? false
+  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 })
+  if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration))
+  return id
+}
+
+function update(id: number, patch: Partial<Omit<Notification, 'id'>>) {
+  const n = notifications.value.find((n) => n.id === id)
+  if (!n) return
+  Object.assign(n, patch)
+  if ('loading' in patch && !patch.loading) {
+    const timer = timers.get(id)
+    if (timer) clearTimeout(timer)
+    const dur = patch.duration ?? 3000
+    if (dur > 0) {
+      n.duration = dur
+      timers.set(id, setTimeout(() => dismiss(id), dur))
+    }
+  }
+}
+
+function loading(msg: string, opts?: Omit<NotificationOptions, 'loading'>) {
+  return show(msg, 'info', { ...opts, loading: true, closable: opts?.closable ?? false })
+}
+
+const success = (msg: string, opts?: NotificationOptions) => show(msg, 'success', opts ?? {})
+const error = (msg: string, opts?: NotificationOptions) => show(msg, 'error', opts ?? {})
+const warning = (msg: string, opts?: NotificationOptions) => show(msg, 'warning', opts ?? {})
+const info = (msg: string, opts?: NotificationOptions) => show(msg, 'info', opts ?? {})
+
+export function useNotification() {
+  return { notifications, position, show, success, error, warning, info, loading, update, dismiss }
+}

package/src/composables/useToast.ts

@@ -1,4 +1,5 @@
-import { ref } from 'vue'
+import { ref, createApp, h } from 'vue'
+import MSnackbar from '../components/MSnackbar.vue'
 
 export type ToastVariant = 'info' | 'success' | 'warning' | 'error'
 export type ToastPosition =
@@ -12,22 +13,37 @@ export interface Toast {
   message: string
   variant: ToastVariant
   duration: number
+  loading?: boolean
   action?: ToastAction
   icon?: string
   color?: string
 }
 
 let nextId = 1
+let mounted = false
+const timers = new Map<number, ReturnType<typeof setTimeout>>()
 
 const toasts = ref<Toast[]>([])
 const position = ref<ToastPosition>('bottom-center')
 
+function ensureMounted() {
+  if (mounted || typeof document === 'undefined') return
+  mounted = true
+  const container = document.createElement('div')
+  container.id = 'm3-toast-host'
+  document.body.appendChild(container)
+  createApp({ render: () => h(MSnackbar) }).mount(container)
+}
+
 function dismiss(id: number) {
+  const timer = timers.get(id)
+  if (timer) { clearTimeout(timer); timers.delete(id) }
   toasts.value = toasts.value.filter((t) => t.id !== id)
 }
 
 export interface ToastOptions {
   duration?: number
+  loading?: boolean
   action?: ToastAction
   icon?: string
   color?: string
@@ -38,19 +54,40 @@ function show(
   variant: ToastVariant = 'info',
   options: number | ToastOptions = {},
 ) {
+  ensureMounted()
   const id = nextId++
   const opts = typeof options === 'number' ? { duration: options } : options
-  const duration = opts.duration ?? (variant === 'error' ? 6000 : 4000)
-  toasts.value.push({ id, message, variant, duration, action: opts.action, icon: opts.icon, color: opts.color })
-  if (duration > 0) setTimeout(() => dismiss(id), duration)
+  const isLoading = opts.loading ?? false
+  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 })
+  if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration))
   return id
 }
 
+function update(id: number, patch: Partial<Omit<Toast, 'id'>>) {
+  const t = toasts.value.find((t) => t.id === id)
+  if (!t) return
+  Object.assign(t, patch)
+  if ('loading' in patch && !patch.loading) {
+    const timer = timers.get(id)
+    if (timer) clearTimeout(timer)
+    const dur = patch.duration ?? 4000
+    if (dur > 0) {
+      t.duration = dur
+      timers.set(id, setTimeout(() => dismiss(id), dur))
+    }
+  }
+}
+
+function loading(msg: string, opts?: Omit<ToastOptions, 'loading'>) {
+  return show(msg, 'info', { ...opts, loading: true })
+}
+
 const success = (msg: string, opts?: ToastOptions) => show(msg, 'success', opts ?? {})
 const error = (msg: string, opts?: ToastOptions) => show(msg, 'error', opts ?? {})
 const warning = (msg: string, opts?: ToastOptions) => show(msg, 'warning', opts ?? {})
 const info = (msg: string, opts?: ToastOptions) => show(msg, 'info', opts ?? {})
 
 export function useToast() {
-  return { toasts, position, show, success, error, warning, info, dismiss }
+  return { toasts, position, show, success, error, warning, info, loading, update, dismiss }
 }

package/src/index.ts

@@ -12,6 +12,9 @@ export type { Toast, ToastVariant, ToastPosition, ToastAction, ToastOptions } fr
 export { useFieldBg } from './composables/useFieldBg'
 export { useLocale, defaultLocale } from './composables/useLocale'
 export type { M3Locale } from './composables/useLocale'
+export { useDevice } from './composables/useDevice'
+export { useNotification } from './composables/useNotification'
+export type { Notification, NotificationVariant, NotificationPosition, NotificationOptions } from './composables/useNotification'
 
 // Components
 export { default as MAbsolute } from './components/MAbsolute.vue'
@@ -26,22 +29,28 @@ export { default as MBottomSheet } from './components/MBottomSheet.vue'
 export { default as MBox } from './components/MBox.vue'
 export { default as MBreadcrumbs } from './components/MBreadcrumbs.vue'
 export { default as MButton } from './components/MButton.vue'
+export { default as MButtonGroup } from './components/MButtonGroup.vue'
+export type { ButtonGroupOption } from './components/MButtonGroup.vue'
 export { default as MCalendar } from './components/MCalendar.vue'
 export { default as MCard } from './components/MCard.vue'
 export { default as MCarousel } from './components/MCarousel.vue'
 export { default as MCenter } from './components/MCenter.vue'
 // MChart — import from '@m3ui-vue/m3ui-vue/chart'
+export { default as MChatBubble } from './components/MChatBubble.vue'
 export { default as MCheckbox } from './components/MCheckbox.vue'
 export { default as MChip } from './components/MChip.vue'
 // MCodeEditor — import from '@m3ui-vue/m3ui-vue/code-editor'
 export { default as MColorPicker } from './components/MColorPicker.vue'
+export { default as MColorPickerModal } from './components/MColorPickerModal.vue'
 export { default as MCommandPalette } from './components/MCommandPalette.vue'
 export { default as MConfirmDialog } from './components/MConfirmDialog.vue'
 export { default as MContainer } from './components/MContainer.vue'
 export { default as MContextMenu } from './components/MContextMenu.vue'
 export { default as MDataTable } from './components/MDataTable.vue'
 export { default as MDatePicker } from './components/MDatePicker.vue'
+export { default as MDatePickerModal } from './components/MDatePickerModal.vue'
 export { default as MDateRangePicker } from './components/MDateRangePicker.vue'
+export { default as MDateRangePickerModal } from './components/MDateRangePickerModal.vue'
 export { default as MDialog } from './components/MDialog.vue'
 export { default as MDivider } from './components/MDivider.vue'
 export { default as MDragDropList } from './components/MDragDropList.vue'
@@ -103,6 +112,8 @@ export { default as MSlider } from './components/MSlider.vue'
 export { default as MSnackbar } from './components/MSnackbar.vue'
 export { default as MSpacer } from './components/MSpacer.vue'
 export { default as MSpinner } from './components/MSpinner.vue'
+export { default as MSplitButton } from './components/MSplitButton.vue'
+export type { SplitButtonItem } from './components/MSplitButton.vue'
 export { default as MSplitter } from './components/MSplitter.vue'
 export { default as MSpotlightSearch } from './components/MSpotlightSearch.vue'
 export { default as MStack } from './components/MStack.vue'
@@ -119,8 +130,10 @@ export { default as MText } from './components/MText.vue'
 export { default as MTextField } from './components/MTextField.vue'
 export { default as MTimeline } from './components/MTimeline.vue'
 export { default as MTimePicker } from './components/MTimePicker.vue'
+export { default as MTimePickerModal } from './components/MTimePickerModal.vue'
 export { default as MTitle } from './components/MTitle.vue'
 export { default as MTooltip } from './components/MTooltip.vue'
+export { default as MToolbar } from './components/MToolbar.vue'
 export { default as MTopAppBar } from './components/MTopAppBar.vue'
 export { default as MTour } from './components/MTour.vue'
 export { default as MTransferList } from './components/MTransferList.vue'