@m3ui-vue/m3ui-vue 0.3.1 → 0.4.1

package/src/components/MDateRangePickerModal.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import MButton from './MButton.vue'
+import MIconButton from './MIconButton.vue'
+import { useLocale } from '../composables/useLocale'
+
+export interface DateRange {
+  start: string | null
+  end: string | null
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: DateRange
+  show?: boolean
+  min?: string
+  max?: string
+  locale?: string
+  title?: string
+}>(), {
+  show: false,
+  locale: 'es-ES',
+})
+
+const locale = useLocale()
+const emit = defineEmits<{
+  'update:modelValue': [DateRange]
+  'update:show': [boolean]
+}>()
+
+const picking = ref<'start' | 'end'>('start')
+const start = ref<string | null>(null)
+const end = ref<string | null>(null)
+const hovered = ref<string | null>(null)
+const viewDate = ref(new Date())
+
+watch(() => props.show, (open) => {
+  if (open) {
+    start.value = props.modelValue?.start ?? null
+    end.value = props.modelValue?.end ?? null
+    picking.value = start.value && !end.value ? 'end' : 'start'
+    viewDate.value = props.modelValue?.start
+      ? new Date(props.modelValue.start + 'T00:00:00')
+      : new Date()
+    document.addEventListener('keydown', onKeydown)
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.removeEventListener('keydown', onKeydown)
+    document.body.style.overflow = ''
+  }
+})
+
+// ── Calendar logic ─────────────────────────────────────────────────
+const WEEKDAYS = computed(() => {
+  const f = new Intl.DateTimeFormat(props.locale, { weekday: 'narrow' })
+  return Array.from({ length: 7 }, (_, i) => f.format(new Date(2024, 0, i + 1)))
+})
+
+const monthLabel = computed(() =>
+  new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }).format(viewDate.value),
+)
+
+const calendarDays = computed(() => {
+  const y = viewDate.value.getFullYear()
+  const m = viewDate.value.getMonth()
+  const first = new Date(y, m, 1)
+  const startDay = (first.getDay() + 6) % 7
+  const daysInMonth = new Date(y, m + 1, 0).getDate()
+  const days: { date: number; current: boolean; iso: string; disabled: boolean }[] = []
+
+  const prevDays = new Date(y, m, 0).getDate()
+  for (let i = startDay - 1; i >= 0; i--) {
+    const d = prevDays - i
+    const iso = fmt(y, m - 1, d)
+    days.push({ date: d, current: false, iso, disabled: isOOR(iso) })
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const iso = fmt(y, m, d)
+    days.push({ date: d, current: true, iso, disabled: isOOR(iso) })
+  }
+  const remaining = 42 - days.length
+  for (let d = 1; d <= remaining; d++) {
+    const iso = fmt(y, m + 1, d)
+    days.push({ date: d, current: false, iso, disabled: isOOR(iso) })
+  }
+  return days
+})
+
+function fmt(y: number, m: number, d: number) {
+  const dt = new Date(y, m, d)
+  return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`
+}
+
+function isOOR(iso: string) {
+  if (props.min && iso < props.min) return true
+  if (props.max && iso > props.max) return true
+  return false
+}
+
+const todayIso = fmt(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+
+function prevMonth() {
+  const d = new Date(viewDate.value)
+  d.setMonth(d.getMonth() - 1)
+  viewDate.value = d
+}
+function nextMonth() {
+  const d = new Date(viewDate.value)
+  d.setMonth(d.getMonth() + 1)
+  viewDate.value = d
+}
+
+function selectDay(day: typeof calendarDays.value[0]) {
+  if (day.disabled) return
+  if (picking.value === 'start') {
+    start.value = day.iso
+    end.value = null
+    picking.value = 'end'
+  } else {
+    if (day.iso < start.value!) {
+      start.value = day.iso
+      end.value = null
+    } else {
+      end.value = day.iso
+      picking.value = 'start'
+    }
+  }
+}
+
+function isInRange(iso: string) {
+  const effectiveEnd = end.value ?? hovered.value
+  if (!start.value || !effectiveEnd) return false
+  const lo = start.value < effectiveEnd ? start.value : effectiveEnd
+  const hi = start.value < effectiveEnd ? effectiveEnd : start.value
+  return iso > lo && iso < hi
+}
+
+// ── Display ────────────────────────────────────────────────────────
+const fmtDisplay = (iso: string | null) => {
+  if (!iso) return '—'
+  const d = new Date(iso + 'T00:00:00')
+  return new Intl.DateTimeFormat(props.locale, { month: 'short', day: 'numeric' }).format(d)
+}
+
+// ── Actions ────────────────────────────────────────────────────────
+function cancel() { emit('update:show', false) }
+
+function confirm() {
+  if (start.value && end.value) {
+    emit('update:modelValue', { start: start.value, end: end.value })
+    emit('update:show', false)
+  }
+}
+
+function onKeydown(e: KeyboardEvent) { if (e.key === 'Escape') cancel() }
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="m3-drp-modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+        @click.self="cancel"
+      >
+        <div class="drp-box w-[360px] rounded-[28px] bg-surface-container-high shadow-elevation-3">
+          <!-- Header -->
+          <div class="px-6 pt-6 pb-4">
+            <p class="mb-3 text-label-medium text-on-surface-variant">
+              {{ title || locale.selectRange }}
+            </p>
+            <div class="flex items-center gap-3">
+              <div
+                class="flex-1 rounded-lg px-3 py-2 text-center transition-colors"
+                :class="picking === 'start' ? 'bg-primary-container text-on-primary-container' : 'bg-surface-container-highest text-on-surface'"
+                @click="picking = 'start'"
+              >
+                <p class="text-label-small text-on-surface-variant">{{ locale.pickStart }}</p>
+                <p class="text-title-medium font-medium capitalize">{{ fmtDisplay(start) }}</p>
+              </div>
+              <span class="text-on-surface-variant">→</span>
+              <div
+                class="flex-1 rounded-lg px-3 py-2 text-center transition-colors"
+                :class="picking === 'end' ? 'bg-primary-container text-on-primary-container' : 'bg-surface-container-highest text-on-surface'"
+                @click="start && (picking = 'end')"
+              >
+                <p class="text-label-small text-on-surface-variant">{{ locale.pickEnd }}</p>
+                <p class="text-title-medium font-medium capitalize">{{ fmtDisplay(end) }}</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="h-px bg-outline-variant" />
+
+          <!-- Calendar -->
+          <div class="px-4 pt-3 pb-2">
+            <div class="mb-2 flex items-center justify-between">
+              <MIconButton icon="chevron_left" :label="locale.previousMonth" :size="36" @click="prevMonth" />
+              <span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
+              <MIconButton icon="chevron_right" :label="locale.nextMonth" :size="36" @click="nextMonth" />
+            </div>
+
+            <div class="mb-1 grid grid-cols-7 gap-0.5 text-center">
+              <span v-for="wd in WEEKDAYS" :key="wd" class="py-1 text-label-small font-medium text-on-surface-variant">
+                {{ wd }}
+              </span>
+            </div>
+
+            <div class="grid grid-cols-7 gap-0.5">
+              <button
+                v-for="(day, i) in calendarDays"
+                :key="i"
+                type="button"
+                class="flex h-10 w-full items-center justify-center text-body-medium transition-colors duration-100"
+                :class="[
+                  day.disabled
+                    ? 'cursor-not-allowed text-on-surface/25 rounded-full'
+                    : day.iso === start || day.iso === end
+                      ? 'bg-primary text-on-primary rounded-full'
+                      : isInRange(day.iso)
+                        ? 'bg-primary/12 text-on-surface cursor-pointer'
+                        : day.iso === todayIso
+                          ? 'border border-primary text-primary rounded-full cursor-pointer hover:bg-primary/8'
+                          : day.current
+                            ? 'cursor-pointer text-on-surface rounded-full hover:bg-on-surface/8'
+                            : 'cursor-pointer text-on-surface-variant/50 rounded-full hover:bg-on-surface/4',
+                ]"
+                :disabled="day.disabled"
+                @mouseenter="picking === 'end' && (hovered = day.iso)"
+                @click="selectDay(day)"
+              >
+                {{ day.date }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="flex justify-end gap-2 px-6 py-4">
+            <MButton variant="text" @click="cancel">{{ locale.cancel }}</MButton>
+            <MButton variant="text" :disabled="!start || !end" @click="confirm">OK</MButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.m3-drp-modal-enter-active,
+.m3-drp-modal-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-drp-modal-enter-from,
+.m3-drp-modal-leave-to {
+  opacity: 0;
+}
+.m3-drp-modal-enter-active .drp-box,
+.m3-drp-modal-leave-active .drp-box {
+  transition: transform 0.15s ease;
+}
+.m3-drp-modal-enter-from .drp-box,
+.m3-drp-modal-leave-to .drp-box {
+  transform: scale(0.95);
+}
+</style>

package/src/components/MDialog.vue

@@ -9,11 +9,13 @@ const props = withDefaults(
     title?: string
     maxWidth?: string
     persistent?: boolean
+    fullscreen?: boolean
     closeLabel?: string
   }>(),
   {
     maxWidth: 'max-w-md',
     persistent: false,
+    fullscreen: false,
   },
 )
 
@@ -46,7 +48,8 @@ watch(
 
 <template>
   <Teleport to="body">
-    <Transition name="m3-dialog">
+    <!-- Basic dialog -->
+    <Transition v-if="!fullscreen" name="m3-dialog">
       <div
         v-if="modelValue"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
@@ -71,6 +74,27 @@ watch(
         </div>
       </div>
     </Transition>
+
+    <!-- Fullscreen dialog -->
+    <Transition v-else name="m3-dialog-fs">
+      <div
+        v-if="modelValue"
+        class="dialog-fs fixed inset-0 z-50 flex flex-col bg-surface"
+      >
+        <div class="flex h-14 shrink-0 items-center gap-2 px-2">
+          <MIconButton v-if="!persistent" icon="close" :label="closeLabel ?? locale.close" @click="close" />
+          <h2 class="flex-1 text-title-large font-medium text-on-surface">
+            <slot name="title">{{ title }}</slot>
+          </h2>
+          <div v-if="$slots.actions" class="flex items-center gap-2">
+            <slot name="actions" />
+          </div>
+        </div>
+        <div class="flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant">
+          <slot />
+        </div>
+      </div>
+    </Transition>
   </Teleport>
 </template>
 
@@ -91,4 +115,17 @@ watch(
 .m3-dialog-leave-to .dialog-box {
   transform: scale(0.95);
 }
+
+.m3-dialog-fs-enter-active,
+.m3-dialog-fs-leave-active {
+  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.15s ease;
+}
+.m3-dialog-fs-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.m3-dialog-fs-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
 </style>

package/src/components/MExpansionPanel.vue

@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<{
   modelValue?: boolean
   disabled?: boolean
   variant?: 'outlined' | 'filled' | 'elevated'
-}>(), { disabled: false, variant: 'outlined' })
+}>(), { modelValue: undefined, disabled: false, variant: 'outlined' })
 
 const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
 
@@ -60,13 +60,13 @@ const wrapperClass = computed(() => {
     </button>
 
     <!-- Content with height animation -->
-    <Transition name="expand">
-      <div v-if="isOpen" class="expand-grid">
-        <div class="expand-body border-t border-outline-variant/60 px-5 py-4">
+    <div class="expand-grid" :class="isOpen ? 'expand-open' : ''">
+      <div class="expand-body">
+        <div class="border-t border-outline-variant/60 px-5 py-4">
           <slot />
         </div>
       </div>
-    </Transition>
+    </div>
   </div>
 </template>
 
@@ -77,36 +77,14 @@ const wrapperClass = computed(() => {
 */
 .expand-grid {
   display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms ease-in-out;
+}
+.expand-grid.expand-open {
   grid-template-rows: 1fr;
 }
 .expand-body {
-  min-height: 0; /* required for 0fr to actually collapse */
+  min-height: 0;
   overflow: hidden;
 }
-
-.expand-enter-active {
-  transition: grid-template-rows 280ms cubic-bezier(0.2, 0, 0, 1);
-}
-.expand-enter-active > .expand-body {
-  transition: opacity 220ms ease;
-}
-.expand-enter-from {
-  grid-template-rows: 0fr;
-}
-.expand-enter-from > .expand-body {
-  opacity: 0;
-}
-
-.expand-leave-active {
-  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 1, 1);
-}
-.expand-leave-active > .expand-body {
-  transition: opacity 150ms ease;
-}
-.expand-leave-to {
-  grid-template-rows: 0fr;
-}
-.expand-leave-to > .expand-body {
-  opacity: 0;
-}
 </style>

package/src/components/MFab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue'
 import MIcon from './MIcon.vue'
 
 export interface SpeedDialItem {
@@ -34,10 +34,14 @@ const fabTag = computed(() => props.to ? 'RouterLink' : 'button')
 
 const emit = defineEmits<{ click: [MouseEvent] }>()
 
+const slots = useSlots()
 const open = ref(false)
 const fabEl = ref<HTMLElement>()
+const contentEl = ref<HTMLElement>()
 
 const hasItems = computed(() => !!props.items?.length)
+const hasContent = computed(() => !!slots.content)
+const isExpandable = computed(() => hasItems.value || hasContent.value)
 
 const colorMap: Record<string, string> = {
   primary: 'bg-primary-container text-on-primary-container',
@@ -142,10 +146,9 @@ function itemStyle(index: number): Record<string, string> {
 
 const showLabel = computed(() => props.direction === 'up' || props.direction === 'down')
 
-// Force re-render to recalculate positions on scroll
-const scrollTick = ref(0)
 function onScroll() {
-  if (open.value) scrollTick.value++
+  if (!open.value) return
+  open.value = false
 }
 
 function createRipple(event: PointerEvent | MouseEvent, target?: HTMLElement) {
@@ -159,8 +162,49 @@ function createRipple(event: PointerEvent | MouseEvent, target?: HTMLElement) {
   el.addEventListener('animationend', () => el.remove(), { once: true })
 }
 
+const contentStyle = ref<Record<string, string>>({})
+
+function computeContentPos() {
+  const rect = fabEl.value?.getBoundingClientRect()
+  if (!rect) return
+  const gap = 8
+  const base: Record<string, string> = { position: 'fixed', zIndex: '1000' }
+  switch (props.direction) {
+    case 'up':
+      base.bottom = `${window.innerHeight - rect.top + gap}px`
+      base.left = `${rect.left}px`
+      base.minWidth = `${rect.width}px`
+      break
+    case 'down':
+      base.top = `${rect.bottom + gap}px`
+      base.left = `${rect.left}px`
+      base.minWidth = `${rect.width}px`
+      break
+    case 'left':
+      base.top = `${rect.top}px`
+      base.right = `${window.innerWidth - rect.left + gap}px`
+      break
+    case 'right':
+      base.top = `${rect.top}px`
+      base.left = `${rect.right + gap}px`
+      break
+  }
+  contentStyle.value = base
+}
+
+const contentTransformOrigin = computed(() => {
+  switch (props.direction) {
+    case 'up': return 'bottom center'
+    case 'down': return 'top center'
+    case 'left': return 'center right'
+    case 'right': return 'center left'
+    default: return 'bottom center'
+  }
+})
+
 function handleFabClick(e: PointerEvent) {
-  if (hasItems.value) {
+  if (isExpandable.value) {
+    if (!open.value) computeContentPos()
     open.value = !open.value
   } else {
     emit('click', e)
@@ -175,18 +219,28 @@ function handleItemClick(e: PointerEvent, item: SpeedDialItem, buttonEl: HTMLEle
 
 function onDocClick(e: MouseEvent) {
   if (!open.value || props.persistent) return
-  if (fabEl.value && !fabEl.value.contains(e.target as Node)) {
-    open.value = false
-  }
+  const t = e.target as Node
+  if (fabEl.value?.contains(t)) return
+  if (contentEl.value?.contains(t)) return
+  open.value = false
 }
 
+let observer: IntersectionObserver | null = null
+
 onMounted(() => {
   document.addEventListener('click', onDocClick, true)
   window.addEventListener('scroll', onScroll, true)
+  if (fabEl.value) {
+    observer = new IntersectionObserver(([entry]) => {
+      if (entry && !entry.isIntersecting && open.value) open.value = false
+    }, { threshold: 0 })
+    observer.observe(fabEl.value)
+  }
 })
 onUnmounted(() => {
   document.removeEventListener('click', onDocClick, true)
   window.removeEventListener('scroll', onScroll, true)
+  observer?.disconnect()
 })
 </script>
 
@@ -206,7 +260,7 @@ onUnmounted(() => {
         :name="icon"
         :size="fabIconSize"
         class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
-        :class="hasItems && open ? 'rotate-45' : ''"
+        :class="isExpandable && open ? 'rotate-45' : ''"
       />
       <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
     </component>
@@ -214,8 +268,6 @@ onUnmounted(() => {
 
   <Teleport to="body">
     <template v-if="hasItems">
-      <!-- hidden dep on scrollTick to force style recalc -->
-      <span :data-tick="scrollTick" class="hidden" />
       <div
         v-for="(item, i) in items"
         :key="i"
@@ -243,5 +295,34 @@ onUnmounted(() => {
         </component>
       </div>
     </template>
+
+    <!-- Custom content panel -->
+    <Transition name="m3-fab-content">
+      <div
+        v-if="hasContent && open"
+        ref="contentEl"
+        class=""
+        :style="{ ...contentStyle, transformOrigin: contentTransformOrigin }"
+      >
+        <slot name="content" :close="() => open = false" />
+      </div>
+    </Transition>
   </Teleport>
 </template>
+
+<style scoped>
+.m3-fab-content-enter-active {
+  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+.m3-fab-content-leave-active {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-fab-content-enter-from {
+  opacity: 0;
+  transform: scale(0.85);
+}
+.m3-fab-content-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>

package/src/components/MIconButton.vue

@@ -7,23 +7,52 @@ const props = withDefaults(
     icon: string
     label?: string
     variant?: 'standard' | 'filled' | 'tonal' | 'outlined'
+    shape?: 'rounded' | 'squared'
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number
     disabled?: boolean
-    size?: number
     to?: string | Record<string, any>
   }>(),
   {
     variant: 'standard',
+    shape: 'rounded',
+    size: 'sm',
     disabled: false,
-    size: 40,
   },
 )
 
 const tag = computed(() => props.to ? 'RouterLink' : 'button')
 
+const sizeMap = {
+  xs: { px: 32, icon: 16 },
+  sm: { px: 40, icon: 20 },
+  md: { px: 48, icon: 24 },
+  lg: { px: 56, icon: 28 },
+  xl: { px: 64, icon: 32 },
+}
+
+const resolved = computed(() => {
+  if (typeof props.size === 'number') return { px: props.size, icon: Math.round(props.size * 0.55) }
+  return sizeMap[props.size] ?? sizeMap.sm
+})
+
 const base =
-  'inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer ' +
+  'inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer ' +
   'disabled:cursor-not-allowed disabled:opacity-[0.38]'
 
+const shapeClass = computed(() => props.shape === 'squared' ? 'rounded-md' : 'rounded-full')
+
+function createRipple(event: PointerEvent) {
+  if (props.disabled) return
+  const button = event.currentTarget as HTMLElement
+  const rect = button.getBoundingClientRect()
+  const d = Math.max(rect.width, rect.height) * 2
+  const el = document.createElement('span')
+  el.className = 'm3-ripple'
+  el.style.cssText = `width:${d}px;height:${d}px;top:${event.clientY - rect.top - d / 2}px;left:${event.clientX - rect.left - d / 2}px`
+  button.appendChild(el)
+  el.addEventListener('animationend', () => el.remove(), { once: true })
+}
+
 const variantClasses = computed(() => {
   switch (props.variant) {
     case 'filled':
@@ -45,9 +74,10 @@ const variantClasses = computed(() => {
     :type="to ? undefined : 'button'"
     :aria-label="label || undefined"
     :disabled="disabled"
-    :class="[base, variantClasses]"
-    :style="{ width: `${size}px`, height: `${size}px` }"
+    :class="[base, shapeClass, variantClasses, 'relative overflow-hidden']"
+    :style="{ width: `${resolved.px}px`, height: `${resolved.px}px` }"
+    @pointerdown="createRipple"
   >
-    <MIcon :name="icon" :size="Math.round(size * 0.55)" />
+    <MIcon :name="icon" :size="resolved.icon" />
   </component>
 </template>

package/src/components/MList.vue

@@ -6,11 +6,12 @@ const props = withDefaults(
     dense?: boolean
     dividers?: boolean | 'inset'
     nav?: boolean
+    segmented?: boolean
     selectable?: boolean
     selected?: string | number | null
     lines?: 1 | 2 | 3
   }>(),
-  { dense: false, dividers: false, nav: false, selectable: false },
+  { dense: false, dividers: false, nav: false, segmented: false, selectable: false },
 )
 
 const emit = defineEmits<{
@@ -20,6 +21,7 @@ const emit = defineEmits<{
 provide('m-list', {
   dense: computed(() => props.dense),
   nav: computed(() => props.nav),
+  segmented: computed(() => props.segmented),
   selectable: computed(() => props.selectable),
   selected: computed(() => props.selected),
   dividers: computed(() => props.dividers),
@@ -28,8 +30,9 @@ provide('m-list', {
 })
 
 const classes = computed(() => [
-  'flex flex-col py-2',
-  props.nav && 'gap-0.5 px-3',
+  'flex flex-col',
+  props.segmented ? 'gap-2 p-2' : 'py-2',
+  props.nav && !props.segmented && 'gap-0.5 px-3',
 ])
 </script>