@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MBreadcrumbs.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+
+export interface BreadcrumbItem {
+  label: string
+  icon?: string
+  to?: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  items: BreadcrumbItem[]
+  separator?: string
+}>(), { separator: 'chevron_right' })
+
+defineEmits<{ select: [BreadcrumbItem, number] }>()
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" class="flex items-center gap-1 overflow-x-auto text-label-large">
+    <template v-for="(item, i) in items" :key="i">
+      <!-- Separator -->
+      <MIcon
+        v-if="i > 0"
+        :name="separator"
+        :size="18"
+        class="shrink-0 text-on-surface-variant"
+      />
+
+      <!-- Item -->
+      <button
+        v-if="i < items.length - 1 && !item.disabled"
+        type="button"
+        class="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 text-primary transition-colors hover:bg-primary/8 focus-visible:outline-none"
+        @click="$emit('select', item, i)"
+      >
+        <MIcon v-if="item.icon" :name="item.icon" :size="18" />
+        <span>{{ item.label }}</span>
+      </button>
+
+      <!-- Last item (current page) or disabled -->
+      <span
+        v-else
+        class="flex shrink-0 items-center gap-1.5 px-1.5 py-1"
+        :class="item.disabled ? 'text-on-surface/38' : 'font-medium text-on-surface'"
+      >
+        <MIcon v-if="item.icon" :name="item.icon" :size="18" />
+        <span>{{ item.label }}</span>
+      </span>
+    </template>
+  </nav>
+</template>

package/src/components/MButton.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MSpinner from './MSpinner.vue'
+import MIcon from './MIcon.vue'
+
+const NAMED_COLORS = ['primary', 'error'] as const
+type NamedColor = (typeof NAMED_COLORS)[number]
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated'
+    /**
+     * Named semantic color ('primary' | 'error') OR any CSS color string
+     * ('red', '#e91e63', 'oklch(0.6 0.2 0)', …).
+     * When a CSS color is passed, --color-primary is overridden for this button.
+     */
+    color?: string
+    type?: 'button' | 'submit' | 'reset'
+    disabled?: boolean
+    loading?: boolean
+    icon?: string
+  }>(),
+  {
+    variant: 'filled',
+    color: 'primary',
+    type: 'button',
+    disabled: false,
+    loading: false,
+  },
+)
+
+const isCustomColor = computed(
+  () => !!props.color && !(NAMED_COLORS as readonly string[]).includes(props.color),
+)
+
+const customStyle = computed(() => {
+  if (!isCustomColor.value) return undefined
+  return {
+    '--color-primary': props.color,
+    '--color-on-primary': '#ffffff',
+    '--color-primary-container': props.color + '33',
+    '--color-on-primary-container': props.color,
+  }
+})
+
+const isError = computed(() => props.color === 'error')
+
+// State-layer overlay: before: pseudo-element uses currentColor (the button's text color)
+// so it's always the correct M3 state-layer color for every variant automatically.
+const base =
+  'relative inline-flex items-center justify-center gap-2 h-10 rounded-full text-label-large font-medium ' +
+  'whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer ' +
+  'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none ' +
+  "before:content-[''] before:pointer-events-none before:absolute before:inset-0 " +
+  'before:bg-current before:opacity-0 before:transition-opacity before:duration-150 ' +
+  'enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]'
+
+const variantClasses = computed(() => {
+  const err = isError.value
+  switch (props.variant) {
+    case 'filled':
+      return err
+        ? 'px-6 bg-error text-on-error enabled:hover:shadow-elevation-1 enabled:active:shadow-none'
+        : 'px-6 bg-primary text-on-primary enabled:hover:shadow-elevation-1 enabled:active:shadow-none'
+    case 'tonal':
+      return err
+        ? 'px-6 bg-error-container text-on-error-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'
+        : 'px-6 bg-secondary-container text-on-secondary-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'
+    case 'elevated':
+      return err
+        ? 'px-6 bg-surface-container-low text-error shadow-elevation-1 enabled:hover:shadow-elevation-2'
+        : 'px-6 bg-surface-container-low text-primary shadow-elevation-1 enabled:hover:shadow-elevation-2'
+    case 'outlined':
+      return err
+        ? 'px-6 border border-error text-error'
+        : 'px-6 border border-outline text-primary'
+    case 'text':
+      return err
+        ? 'px-3 text-error'
+        : 'px-3 text-primary'
+    default:
+      return ''
+  }
+})
+
+function createRipple(event: PointerEvent) {
+  if (props.disabled || props.loading) 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 })
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[base, variantClasses]"
+    :style="customStyle"
+    @pointerdown="createRipple"
+  >
+    <MSpinner v-if="loading" :size="18" />
+    <MIcon v-else-if="icon" :name="icon" :size="20" />
+    <slot />
+  </button>
+</template>

package/src/components/MCalendar.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+
+export interface CalendarEvent {
+  id: string | number
+  title: string
+  date: string
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success'
+  icon?: string
+}
+
+const props = withDefaults(defineProps<{
+  events?: CalendarEvent[]
+  locale?: string
+}>(), { events: () => [], locale: 'es-ES' })
+
+const emit = defineEmits<{
+  dateClick: [string]
+  eventClick: [CalendarEvent]
+}>()
+
+const viewDate = ref(new Date())
+
+const WEEKDAYS = (() => {
+  const f = new Intl.DateTimeFormat(props.locale, { weekday: 'short' })
+  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)
+)
+
+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')}`
+}
+
+const todayIso = fmt(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
+
+interface CalendarDay {
+  date: number
+  iso: string
+  current: boolean
+  events: CalendarEvent[]
+}
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  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: CalendarDay[] = []
+
+  const eventMap = new Map<string, CalendarEvent[]>()
+  for (const ev of props.events) {
+    if (!eventMap.has(ev.date)) eventMap.set(ev.date, [])
+    eventMap.get(ev.date)!.push(ev)
+  }
+
+  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, events: eventMap.get(iso) ?? [] })
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const iso = fmt(y, m, d)
+    days.push({ date: d, current: true, iso, events: eventMap.get(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, events: eventMap.get(iso) ?? [] })
+  }
+  return days
+})
+
+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 goToday() { viewDate.value = new Date() }
+
+const eventColor: Record<string, string> = {
+  primary:   'bg-primary text-on-primary',
+  secondary: 'bg-secondary text-on-secondary',
+  tertiary:  'bg-tertiary text-on-tertiary',
+  error:     'bg-error text-on-error',
+  success:   'bg-success text-on-success',
+}
+</script>
+
+<template>
+  <div class="flex flex-col overflow-hidden rounded-lg border border-outline-variant">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-3">
+      <div class="flex items-center gap-1">
+        <MIconButton icon="chevron_left" label="Mes anterior" :size="36" @click="prevMonth" />
+        <MIconButton icon="chevron_right" label="Mes siguiente" :size="36" @click="nextMonth" />
+      </div>
+      <h3 class="text-title-medium font-medium capitalize text-on-surface">{{ monthLabel }}</h3>
+      <button
+        type="button"
+        class="cursor-pointer rounded-full border border-outline px-3 py-1 text-label-medium text-on-surface transition-colors hover:bg-on-surface/8"
+        @click="goToday"
+      >
+        Hoy
+      </button>
+    </div>
+
+    <!-- Weekday headers -->
+    <div class="grid grid-cols-7 border-b border-outline-variant bg-surface-container-high">
+      <div
+        v-for="wd in WEEKDAYS"
+        :key="wd"
+        class="py-2 text-center text-label-small font-medium uppercase text-on-surface-variant"
+      >
+        {{ wd }}
+      </div>
+    </div>
+
+    <!-- Days grid -->
+    <div class="grid grid-cols-7">
+      <div
+        v-for="(day, i) in calendarDays"
+        :key="i"
+        class="flex min-h-[80px] cursor-pointer flex-col border-b border-r border-outline-variant/50 p-1.5 transition-colors hover:bg-on-surface/[0.03]"
+        :class="[
+          !day.current ? 'bg-surface-container-lowest/50' : 'bg-surface',
+          (i + 1) % 7 === 0 ? 'border-r-0' : '',
+          i >= 35 ? 'border-b-0' : '',
+        ]"
+        @click="emit('dateClick', day.iso)"
+      >
+        <!-- Day number -->
+        <span
+          class="mb-0.5 flex h-6 w-6 items-center justify-center self-end rounded-full text-label-medium"
+          :class="
+            day.iso === todayIso
+              ? 'bg-primary text-on-primary font-medium'
+              : day.current
+                ? 'text-on-surface'
+                : 'text-on-surface-variant/40'
+          "
+        >
+          {{ day.date }}
+        </span>
+
+        <!-- Events -->
+        <div v-if="day.events.length" class="flex flex-col gap-0.5">
+          <button
+            v-for="ev in day.events.slice(0, 2)"
+            :key="ev.id"
+            type="button"
+            class="flex w-full cursor-pointer items-center gap-1 truncate rounded px-1 py-0.5 text-left text-label-small transition-opacity hover:opacity-80"
+            :class="eventColor[ev.color ?? 'primary']"
+            @click.stop="emit('eventClick', ev)"
+          >
+            <MIcon v-if="ev.icon" :name="ev.icon" :size="12" />
+            <span class="truncate">{{ ev.title }}</span>
+          </button>
+          <span
+            v-if="day.events.length > 2"
+            class="px-1 text-label-small text-on-surface-variant"
+          >
+            +{{ day.events.length - 2 }} más
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MCard.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'elevated' | 'filled' | 'outlined'
+    clickable?: boolean
+    elevated?: boolean
+    /** src URL for a full-bleed header image */
+    image?: string
+    imageAlt?: string
+    imageHeight?: string
+  }>(),
+  { variant: 'elevated', clickable: false, elevated: false },
+)
+
+const resolvedVariant = computed(() => (props.elevated ? 'elevated' : props.variant))
+
+const variantClasses: Record<string, string> = {
+  elevated: 'bg-surface-container-low shadow-elevation-1',
+  filled: 'bg-surface-container-highest',
+  outlined: 'bg-surface border border-outline-variant',
+}
+
+// Expose the card's background as --field-bg so outlined text-field labels
+// inside the card automatically match without needing the fieldBg prop.
+const fieldBgByVariant: Record<string, string> = {
+  elevated: 'var(--color-surface-container-low)',
+  filled: 'var(--color-surface-container-highest)',
+  outlined: 'var(--color-surface)',
+}
+</script>
+
+<template>
+  <div
+    class="overflow-hidden rounded-md transition-shadow duration-150"
+    :class="[
+      variantClasses[resolvedVariant],
+      clickable ? 'cursor-pointer hover:shadow-elevation-2 active:shadow-elevation-1' : '',
+    ]"
+    :style="{ '--field-bg': fieldBgByVariant[resolvedVariant] }"
+  >
+    <!-- Optional header image -->
+    <div v-if="image || $slots.media" :class="['w-full overflow-hidden', imageHeight ?? 'h-48']">
+      <img
+        v-if="image"
+        :src="image"
+        :alt="imageAlt ?? ''"
+        class="h-full w-full object-cover"
+      />
+      <slot v-else name="media" />
+    </div>
+
+    <slot />
+  </div>
+</template>

package/src/components/MChart.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted } from 'vue'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  RadialLinearScale,
+  Filler,
+  Tooltip,
+  Legend,
+  Title,
+  type ChartData,
+  type ChartOptions,
+} from 'chart.js'
+import { Line, Bar, Pie, Doughnut, Radar } from 'vue-chartjs'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  RadialLinearScale,
+  Filler,
+  Tooltip,
+  Legend,
+  Title,
+)
+
+type ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar'
+
+const props = withDefaults(
+  defineProps<{
+    type: ChartType
+    data: ChartData<any>
+    options?: ChartOptions<any>
+    height?: string
+  }>(),
+  { height: '300px' },
+)
+
+function getM3Colors() {
+  const style = getComputedStyle(document.documentElement)
+  const get = (v: string) => style.getPropertyValue(v).trim()
+  return {
+    primary: get('--color-primary'),
+    onSurface: get('--color-on-surface'),
+    onSurfaceVariant: get('--color-on-surface-variant'),
+    outlineVariant: get('--color-outline-variant'),
+    surface: get('--color-surface'),
+    surfaceContainer: get('--color-surface-container'),
+  }
+}
+
+const m3Colors = ref(getM3Colors())
+
+onMounted(() => { m3Colors.value = getM3Colors() })
+
+const themeObserver = ref<MutationObserver | null>(null)
+onMounted(() => {
+  themeObserver.value = new MutationObserver(() => { m3Colors.value = getM3Colors() })
+  themeObserver.value.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+})
+
+watch(() => m3Colors.value, () => {}, { deep: true })
+
+const mergedOptions = computed<ChartOptions<any>>(() => {
+  const c = m3Colors.value
+  const base: ChartOptions<any> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        labels: {
+          color: c.onSurface,
+          font: { family: "'Roboto', system-ui, sans-serif", size: 12 },
+          usePointStyle: true,
+          pointStyle: 'circle',
+          padding: 16,
+        },
+      },
+      tooltip: {
+        backgroundColor: c.surfaceContainer,
+        titleColor: c.onSurface,
+        bodyColor: c.onSurfaceVariant,
+        borderColor: c.outlineVariant,
+        borderWidth: 1,
+        cornerRadius: 12,
+        padding: 12,
+        titleFont: { family: "'Roboto', system-ui, sans-serif", size: 13, weight: '600' as const },
+        bodyFont: { family: "'Roboto', system-ui, sans-serif", size: 12 },
+        displayColors: true,
+        boxPadding: 4,
+      },
+    },
+  }
+
+  if (props.type !== 'pie' && props.type !== 'doughnut') {
+    base.scales = {
+      x: {
+        grid: { color: c.outlineVariant + '40', drawTicks: false },
+        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },
+        border: { color: c.outlineVariant },
+      },
+      y: {
+        grid: { color: c.outlineVariant + '40', drawTicks: false },
+        ticks: { color: c.onSurfaceVariant, font: { size: 11 }, padding: 8 },
+        border: { color: c.outlineVariant },
+      },
+    }
+  }
+
+  if (props.type === 'radar') {
+    base.scales = {
+      r: {
+        grid: { color: c.outlineVariant + '40' },
+        angleLines: { color: c.outlineVariant + '40' },
+        pointLabels: { color: c.onSurfaceVariant, font: { size: 11 } },
+        ticks: { color: c.onSurfaceVariant, backdropColor: 'transparent' },
+      },
+    }
+  }
+
+  return deepMerge(base, props.options ?? {})
+})
+
+function deepMerge(target: any, source: any): any {
+  const output = { ...target }
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      output[key] = deepMerge(target[key] ?? {}, source[key])
+    } else {
+      output[key] = source[key]
+    }
+  }
+  return output
+}
+
+const chartComponent = computed(() => {
+  const map = { line: Line, bar: Bar, pie: Pie, doughnut: Doughnut, radar: Radar }
+  return map[props.type]
+})
+</script>
+
+<template>
+  <div class="rounded-lg border border-outline-variant bg-surface p-4" :style="{ height }">
+    <component
+      :is="chartComponent"
+      :data="data"
+      :options="mergedOptions"
+    />
+  </div>
+</template>

package/src/components/MCheckbox.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import MIcon from "./MIcon.vue";
+
+withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+  }>(),
+  { indeterminate: false, disabled: false },
+);
+
+const emit = defineEmits<{ "update:modelValue": [boolean] }>();
+</script>
+
+<template>
+  <label
+    class="inline-flex items-center gap-2 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-[0.38]' : 'cursor-pointer'"
+  >
+    <span
+      class="relative inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-[3px] border-2 transition-colors"
+      :class="
+        modelValue || indeterminate
+          ? 'border-primary bg-primary text-on-primary'
+          : 'border-on-surface-variant text-transparent'
+      "
+    >
+      <input
+        type="checkbox"
+        class="sr-only"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="emit('update:modelValue', !modelValue)"
+      />
+      <MIcon
+        :name="indeterminate ? 'remove' : 'check'"
+        :size="14"
+        class="transition-[opacity,transform] duration-150"
+        :class="modelValue || indeterminate ? 'scale-100 opacity-100' : 'scale-0 opacity-0'"
+      />
+    </span>
+    <span v-if="label || $slots.default" class="text-body-large text-on-surface">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>

package/src/components/MChip.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const NAMED_TONES = ['neutral', 'primary', 'success', 'error', 'tertiary', 'secondary'] as const
+type NamedTone = (typeof NAMED_TONES)[number]
+
+const props = withDefaults(
+  defineProps<{
+    tone?: string       // named tone OR CSS color string
+    selected?: boolean
+    removable?: boolean
+    clickable?: boolean
+    disabled?: boolean
+    icon?: string
+  }>(),
+  {
+    tone: 'neutral',
+    selected: false,
+    removable: false,
+    clickable: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{ click: []; remove: [] }>()
+
+const isCustomColor = computed(
+  () => !!props.tone && !(NAMED_TONES as readonly string[]).includes(props.tone),
+)
+
+// When a CSS color is passed, apply it via CSS variables
+const customStyle = computed(() => {
+  if (!isCustomColor.value) return undefined
+  return {
+    '--chip-bg': props.tone + '22',
+    '--chip-color': props.tone,
+  }
+})
+
+const toneClasses = computed(() => {
+  if (isCustomColor.value) {
+    return 'border border-transparent bg-[var(--chip-bg)] text-[var(--chip-color)]'
+  }
+  if (props.tone === 'neutral' && !props.selected) {
+    return 'border border-outline bg-transparent text-on-surface-variant'
+  }
+  const map: Record<string, string> = {
+    neutral:   'border border-transparent bg-secondary-container text-on-secondary-container',
+    primary:   'border border-transparent bg-primary-container text-on-primary-container',
+    secondary: 'border border-transparent bg-secondary-container text-on-secondary-container',
+    success:   'border border-transparent bg-success-container text-on-success-container',
+    error:     'border border-transparent bg-error-container text-on-error-container',
+    tertiary:  'border border-transparent bg-tertiary-container text-on-tertiary-container',
+  }
+  return map[props.tone ?? 'neutral'] ?? map.neutral
+})
+</script>
+
+<template>
+  <component
+    :is="clickable ? 'button' : 'span'"
+    :type="clickable ? 'button' : undefined"
+    :disabled="clickable && disabled ? true : undefined"
+    class="inline-flex h-8 items-center gap-1.5 rounded-sm px-3 text-label-large transition-colors"
+    :class="[
+      toneClasses,
+      clickable && !disabled ? 'cursor-pointer hover:bg-on-surface/8' : '',
+      disabled ? 'cursor-not-allowed opacity-[0.38]' : '',
+    ]"
+    :style="customStyle"
+    @click="clickable && !disabled && emit('click')"
+  >
+    <MIcon v-if="icon" :name="icon" :size="18" />
+    <slot />
+    <button
+      v-if="removable"
+      type="button"
+      class="-mr-1 ml-0.5 inline-flex items-center justify-center rounded-full hover:bg-on-surface/12"
+      aria-label="Quitar"
+      :disabled="disabled"
+      @click.stop="emit('remove')"
+    >
+      <MIcon name="close" :size="16" />
+    </button>
+  </component>
+</template>