@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MDatePicker.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null
+  label?: string
+  placeholder?: string
+  min?: string
+  max?: string
+  disabled?: boolean
+  error?: string
+  hint?: string
+  locale?: string
+  fieldBg?: string
+}>(), { locale: 'es-ES' })
+
+const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
+
+const open = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+const dropPos = ref({ top: '0px', left: '0px' })
+const { resolvedFieldBg } = useFieldBg(triggerEl, () => props.fieldBg)
+
+const viewDate = ref(props.modelValue ? new Date(props.modelValue + 'T00:00:00') : new Date())
+watch(() => props.modelValue, (v) => {
+  if (v) viewDate.value = new Date(v + 'T00:00:00')
+})
+
+const WEEKDAYS = (() => {
+  const f = new Intl.DateTimeFormat(props.locale, { weekday: 'narrow' })
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(2024, 0, i + 1) // Mon=1 Jan 2024
+    return f.format(d)
+  })
+})()
+
+const monthLabel = computed(() => {
+  const f = new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' })
+  return f.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 prevMonth = new Date(y, m, 0).getDate()
+  for (let i = startDay - 1; i >= 0; i--) {
+    const d = prevMonth - i
+    const iso = fmt(y, m - 1, d)
+    days.push({ date: d, current: false, iso, disabled: isOutOfRange(iso) })
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const iso = fmt(y, m, d)
+    days.push({ date: d, current: true, iso, disabled: isOutOfRange(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: isOutOfRange(iso) })
+  }
+  return days
+})
+
+function fmt(y: number, m: number, d: number) {
+  const dt = new Date(y, m, d)
+  const yy = dt.getFullYear()
+  const mm = String(dt.getMonth() + 1).padStart(2, '0')
+  const dd = String(dt.getDate()).padStart(2, '0')
+  return `${yy}-${mm}-${dd}`
+}
+
+function isOutOfRange(iso: string) {
+  if (props.min && iso < props.min) return true
+  if (props.max && iso > props.max) return true
+  return false
+}
+
+const isToday = (iso: string) => iso === 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
+  emit('update:modelValue', day.iso)
+  open.value = false
+}
+
+function clear() {
+  emit('update:modelValue', null)
+}
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  const d = new Date(props.modelValue + 'T00:00:00')
+  return new Intl.DateTimeFormat(props.locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(d)
+})
+
+function computeDropPos() {
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  const panelH = 380
+  const spaceBelow = window.innerHeight - rect.bottom - 8
+  const above = spaceBelow < panelH && rect.top > panelH
+  dropPos.value = {
+    top: above ? `${rect.top - 4 - panelH}px` : `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+  }
+}
+
+function onClickOutside(e: MouseEvent) {
+  const t = e.target as Node
+  if (triggerEl.value?.contains(t)) return
+  if (panelEl.value?.contains(t)) return
+  open.value = false
+}
+
+function onScroll(e: Event) {
+  if (!open.value) return
+  if (panelEl.value?.contains(e.target as Node)) return
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  if (rect.bottom < 0 || rect.top > window.innerHeight) { open.value = false; return }
+  computeDropPos()
+}
+
+watch(open, (v) => {
+  if (v) {
+    computeDropPos()
+    setTimeout(() => document.addEventListener('mousedown', onClickOutside), 0)
+  } else {
+    document.removeEventListener('mousedown', onClickOutside)
+  }
+})
+
+onMounted(() => window.addEventListener('scroll', onScroll, true))
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll, true)
+  document.removeEventListener('mousedown', onClickOutside)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <!-- Trigger -->
+    <div ref="triggerEl" class="relative mt-2" :style="{ '--field-bg': resolvedFieldBg }">
+      <button
+        type="button"
+        class="flex h-14 w-full items-center gap-2 rounded-sm border bg-transparent px-4 text-left text-body-large transition-[border-color,border-width] duration-150"
+        :class="[
+          disabled ? 'pointer-events-none opacity-[0.38]' : 'cursor-pointer',
+          open
+            ? error ? 'border-2 border-error' : 'border-2 border-primary'
+            : error ? 'border-error' : 'border-outline hover:border-on-surface',
+        ]"
+        @click="!disabled && (open = !open)"
+      >
+        <MIcon name="calendar_today" :size="20" class="shrink-0 text-on-surface-variant" />
+        <span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ placeholder || label || 'Seleccionar fecha' }}</span>
+        <MIcon
+          v-if="modelValue"
+          name="close"
+          :size="18"
+          class="shrink-0 cursor-pointer text-on-surface-variant hover:text-on-surface"
+          @click.stop="clear"
+        />
+      </button>
+      <label
+        v-if="label"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
+      >
+        {{ label }}
+      </label>
+    </div>
+
+    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
+
+    <!-- Calendar dropdown -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-[opacity,transform] duration-150"
+        enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+        leave-active-class="transition-[opacity,transform] duration-100"
+        leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+      >
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="fixed z-[500] w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
+          :style="dropPos"
+        >
+          <!-- Header -->
+          <div class="mb-3 flex items-center justify-between">
+            <MIconButton icon="chevron_left" label="Mes anterior" :size="36" @click="prevMonth" />
+            <span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
+            <MIconButton icon="chevron_right" label="Mes siguiente" :size="36" @click="nextMonth" />
+          </div>
+
+          <!-- Weekday headers -->
+          <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>
+
+          <!-- Days grid -->
+          <div class="grid grid-cols-7 gap-0.5">
+            <button
+              v-for="(day, i) in calendarDays"
+              :key="i"
+              type="button"
+              class="flex h-9 w-full items-center justify-center rounded-full text-body-medium transition-colors duration-100"
+              :class="[
+                day.disabled
+                  ? 'cursor-not-allowed text-on-surface/25'
+                  : day.iso === modelValue
+                    ? 'bg-primary text-on-primary'
+                    : isToday(day.iso)
+                      ? 'border border-primary text-primary cursor-pointer hover:bg-primary/8'
+                      : day.current
+                        ? 'cursor-pointer text-on-surface hover:bg-on-surface/8'
+                        : 'cursor-pointer text-on-surface-variant/50 hover:bg-on-surface/4',
+              ]"
+              :disabled="day.disabled"
+              @click="selectDay(day)"
+            >
+              {{ day.date }}
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/MDateRangePicker.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+export interface DateRange {
+  start: string | null
+  end: string | null
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: DateRange
+  label?: string
+  min?: string
+  max?: string
+  disabled?: boolean
+  error?: string
+  hint?: string
+  locale?: string
+  fieldBg?: string
+}>(), { locale: 'es-ES' })
+
+const emit = defineEmits<{ 'update:modelValue': [DateRange] }>()
+
+const open = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+const picking = ref<'start' | 'end'>('start')
+const hovered = ref<string | null>(null)
+const dropPos = ref({ top: '0px', left: '0px' })
+const { resolvedFieldBg } = useFieldBg(triggerEl, () => props.fieldBg)
+
+const viewDate = ref(
+  props.modelValue.start ? new Date(props.modelValue.start + 'T00:00:00') : new Date()
+)
+watch(() => props.modelValue.start, (v) => {
+  if (v) viewDate.value = new Date(v + 'T00:00:00')
+})
+
+const WEEKDAYS = (() => {
+  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 prevMonth = new Date(y, m, 0).getDate()
+  for (let i = startDay - 1; i >= 0; i--) {
+    const d = prevMonth - 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 selectDay(day: typeof calendarDays.value[0]) {
+  if (day.disabled) return
+  if (picking.value === 'start') {
+    emit('update:modelValue', { start: day.iso, end: null })
+    picking.value = 'end'
+  } else {
+    const s = props.modelValue.start!
+    if (day.iso < s) {
+      emit('update:modelValue', { start: day.iso, end: null })
+    } else {
+      emit('update:modelValue', { start: s, end: day.iso })
+      picking.value = 'start'
+      open.value = false
+    }
+  }
+}
+
+function isInRange(iso: string) {
+  const { start, end } = props.modelValue
+  const effectiveEnd = end ?? hovered.value
+  if (!start || !effectiveEnd) return false
+  const lo = start < effectiveEnd ? start : effectiveEnd
+  const hi = start < effectiveEnd ? effectiveEnd : start
+  return iso > lo && iso < hi
+}
+
+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 }
+
+const displayValue = computed(() => {
+  const f = new Intl.DateTimeFormat(props.locale, { day: 'numeric', month: 'short' })
+  const s = props.modelValue.start ? f.format(new Date(props.modelValue.start + 'T00:00:00')) : '—'
+  const e = props.modelValue.end ? f.format(new Date(props.modelValue.end + 'T00:00:00')) : '—'
+  if (!props.modelValue.start && !props.modelValue.end) return ''
+  return `${s}  →  ${e}`
+})
+
+function clear() { emit('update:modelValue', { start: null, end: null }); picking.value = 'start' }
+
+function computeDropPos() {
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  const panelH = 400
+  const spaceBelow = window.innerHeight - rect.bottom - 8
+  const above = spaceBelow < panelH && rect.top > panelH
+  dropPos.value = {
+    top: above ? `${rect.top - 4 - panelH}px` : `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+  }
+}
+
+function onOut(e: MouseEvent) {
+  const t = e.target as Node
+  if (triggerEl.value?.contains(t)) return
+  if (panelEl.value?.contains(t)) return
+  open.value = false
+}
+
+function onScroll(e: Event) {
+  if (!open.value) return
+  if (panelEl.value?.contains(e.target as Node)) return
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  if (rect.bottom < 0 || rect.top > window.innerHeight) { open.value = false; return }
+  computeDropPos()
+}
+
+watch(open, (v) => {
+  if (v) {
+    picking.value = props.modelValue.start && !props.modelValue.end ? 'end' : 'start'
+    computeDropPos()
+    setTimeout(() => document.addEventListener('mousedown', onOut), 0)
+  } else {
+    document.removeEventListener('mousedown', onOut)
+  }
+})
+
+onMounted(() => window.addEventListener('scroll', onScroll, true))
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll, true)
+  document.removeEventListener('mousedown', onOut)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div ref="triggerEl" class="relative mt-2" :style="{ '--field-bg': resolvedFieldBg }">
+      <button
+        type="button"
+        class="flex h-14 w-full items-center gap-2 rounded-sm border bg-transparent px-4 text-left text-body-large transition-[border-color,border-width] duration-150"
+        :class="[
+          disabled ? 'pointer-events-none opacity-[0.38]' : 'cursor-pointer',
+          open
+            ? error ? 'border-2 border-error' : 'border-2 border-primary'
+            : error ? 'border-error' : 'border-outline hover:border-on-surface',
+        ]"
+        @click="!disabled && (open = !open)"
+      >
+        <MIcon name="date_range" :size="20" class="shrink-0 text-on-surface-variant" />
+        <span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ label || 'Seleccionar rango' }}</span>
+        <MIcon
+          v-if="modelValue.start || modelValue.end"
+          name="close"
+          :size="18"
+          class="shrink-0 cursor-pointer text-on-surface-variant hover:text-on-surface"
+          @click.stop="clear"
+        />
+      </button>
+      <label
+        v-if="label"
+        class="pointer-events-none absolute -top-2.5 left-3 bg-[var(--field-bg)] px-1 text-label-small transition-colors"
+        :class="open ? (error ? 'text-error' : 'text-primary') : error ? 'text-error' : 'text-on-surface-variant'"
+      >
+        {{ label }}
+      </label>
+    </div>
+
+    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-[opacity,transform] duration-150"
+        enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+        leave-active-class="transition-[opacity,transform] duration-100"
+        leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+      >
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="fixed z-[500] w-[320px] rounded-lg bg-surface-container p-4 shadow-elevation-3"
+          :style="dropPos"
+        >
+          <p class="mb-2 text-center text-label-medium text-on-surface-variant">
+            {{ picking === 'start' ? 'Selecciona inicio' : 'Selecciona fin' }}
+          </p>
+
+          <div class="mb-3 flex items-center justify-between">
+            <MIconButton icon="chevron_left" label="Anterior" :size="36" @click="prevMonth" />
+            <span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
+            <MIconButton icon="chevron_right" label="Siguiente" :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-9 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 === modelValue.start || day.iso === modelValue.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>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/MDialog.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import MIconButton from './MIconButton.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title?: string
+    maxWidth?: string
+    persistent?: boolean
+  }>(),
+  {
+    maxWidth: 'max-w-md',
+    persistent: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+
+function close() {
+  if (props.persistent) return
+  emit('update:modelValue', false)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') close()
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      document.addEventListener('keydown', onKeydown)
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.removeEventListener('keydown', onKeydown)
+      document.body.style.overflow = ''
+    }
+  },
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="m3-dialog">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+        @click.self="close"
+      >
+        <div
+          class="dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3"
+          :class="maxWidth"
+        >
+          <div class="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
+            <h2 class="text-headline-small text-on-surface">
+              <slot name="title">{{ title }}</slot>
+            </h2>
+            <MIconButton v-if="!persistent" icon="close" label="Cerrar" @click="close" />
+          </div>
+          <div class="overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant">
+            <slot />
+          </div>
+          <div v-if="$slots.actions" class="flex justify-end gap-2 px-6 py-4">
+            <slot name="actions" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.m3-dialog-enter-active,
+.m3-dialog-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-dialog-enter-from,
+.m3-dialog-leave-to {
+  opacity: 0;
+}
+.m3-dialog-enter-active .dialog-box,
+.m3-dialog-leave-active .dialog-box {
+  transition: transform 0.15s ease;
+}
+.m3-dialog-enter-from .dialog-box,
+.m3-dialog-leave-to .dialog-box {
+  transform: scale(0.95);
+}
+</style>

package/src/components/MDivider.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  vertical?: boolean
+  label?: string
+  inset?: boolean
+}>(), { vertical: false, inset: false })
+</script>
+
+<template>
+  <div
+    v-if="!vertical"
+    class="flex items-center gap-3"
+    :class="inset && 'ml-16'"
+    role="separator"
+  >
+    <div class="h-px flex-1 bg-outline-variant" />
+    <span v-if="label" class="shrink-0 text-label-small text-on-surface-variant">{{ label }}</span>
+    <div v-if="label" class="h-px flex-1 bg-outline-variant" />
+  </div>
+
+  <div
+    v-else
+    class="w-px self-stretch bg-outline-variant"
+    role="separator"
+  />
+</template>