@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MTextField.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, ref, useId, useSlots } from "vue";
+import MIcon from "./MIcon.vue";
+import { useFieldBg } from "../composables/useFieldBg";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number;
+    label: string;
+    type?: string;
+    variant?: "filled" | "outlined";
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    required?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    autocomplete?: string;
+    leadingIcon?: string;
+    /**
+     * Background color behind the label in outlined variant.
+     * Defaults to the page surface color. Pass e.g. 'var(--color-surface-container-low)'
+     * when the input is inside a card.
+     */
+    fieldBg?: string;
+  }>(),
+  {
+    type: "text",
+    variant: "filled",
+    rows: 3,
+  },
+);
+
+const emit = defineEmits<{ "update:modelValue": [string] }>();
+
+const id = useId();
+const slots = useSlots();
+
+const fieldBgEl = ref<HTMLElement | null>(null);
+const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg);
+
+const inputClasses = computed(() => {
+  const hasTrailing = !!slots.trailing;
+  const pl = props.leadingIcon ? "pl-12" : "pl-4";
+  const pr = hasTrailing ? "pr-12" : "pr-4";
+  const size = props.multiline ? "resize-y min-h-[56px]" : "h-14";
+  const base = [
+    "peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent",
+    "transition-[border-color,border-width] duration-150",
+    "disabled:cursor-not-allowed disabled:opacity-[0.38]",
+    size,
+    pl,
+    pr,
+  ];
+
+  if (props.variant === "outlined") {
+    return [
+      ...base,
+      "rounded-sm border bg-transparent py-4",
+      props.error
+        ? "border-error focus:border-2 focus:border-error"
+        : "border-outline hover:border-on-surface focus:border-2 focus:border-primary",
+    ].join(" ");
+  }
+
+  return [
+    ...base,
+    "rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2",
+    props.error
+      ? "border-error focus:border-b-2 focus:border-error"
+      : "border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary",
+  ].join(" ");
+});
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? props.variant === "outlined"
+      ? "left-11"
+      : "left-12"
+    : props.variant === "outlined"
+      ? "left-3"
+      : "left-4";
+
+  const base = [
+    "pointer-events-none absolute truncate transition-all duration-200",
+    left,
+    "right-4",
+    "top-1/2 -translate-y-1/2 text-body-large",
+  ];
+
+  if (props.variant === "outlined") {
+    // When floated: drop right-4 (right-auto) and cap max-width so the label
+    // shrinks to its own text width. The bg then only covers the glyphs + px-1,
+    // cutting the border just where the text sits instead of a long strip.
+    return [
+      ...base,
+      "peer-focus:-top-2.5 peer-focus:translate-y-0 peer-focus:text-label-small peer-focus:right-auto peer-focus:max-w-[calc(100%-1.5rem)] peer-focus:bg-[var(--field-bg)] peer-focus:px-1",
+      "peer-[&:not(:placeholder-shown)]:-top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:right-auto peer-[&:not(:placeholder-shown)]:max-w-[calc(100%-1.5rem)]",
+      "peer-[&:not(:placeholder-shown)]:text-label-small peer-[&:not(:placeholder-shown)]:bg-[var(--field-bg)] peer-[&:not(:placeholder-shown)]:px-1",
+      props.error
+        ? "text-error peer-focus:text-error"
+        : "text-on-surface-variant peer-focus:text-primary",
+    ].join(" ");
+  }
+
+  // Filled: label floats to top-2 (slightly higher than before)
+  return [
+    ...base,
+    "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-label-small",
+    "peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-label-small",
+    props.error
+      ? "text-error peer-focus:text-error"
+      : "text-on-surface-variant peer-focus:text-primary",
+  ].join(" ");
+});
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  emit("update:modelValue", target.value);
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <!--
+      --field-bg: background behind the floating label in outlined mode, so it
+      "cuts through" the border. Auto-detected from the nearest opaque ancestor
+      (see resolveBg); overridable via the fieldBg prop; falls back to surface.
+    -->
+    <div
+      ref="fieldBgEl"
+      class="relative"
+      :class="variant === 'outlined' ? 'mt-2' : ''"
+      :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
+    >
+      <!-- Leading icon: centered in the 48px left zone (left-3.5 → center at 24px) -->
+      <div
+        v-if="leadingIcon"
+        class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
+      >
+        <MIcon :name="leadingIcon" :size="20" />
+      </div>
+
+      <textarea
+        v-if="multiline"
+        :id="id"
+        :value="String(modelValue)"
+        :rows="rows"
+        :disabled="disabled"
+        :required="required"
+        placeholder=" "
+        :class="inputClasses"
+        @input="onInput"
+      />
+      <input
+        v-else
+        :id="id"
+        :type="type"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        :autocomplete="autocomplete"
+        placeholder=" "
+        :class="inputClasses"
+        @input="onInput"
+      />
+
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <div v-if="$slots.trailing" class="absolute top-1/2 right-2 -translate-y-1/2">
+        <slot name="trailing" />
+      </div>
+    </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>
+  </div>
+</template>

package/src/components/MTimePicker.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null
+  label?: string
+  disabled?: boolean
+  error?: string
+  hint?: string
+  minuteStep?: number
+  use24h?: boolean
+  fieldBg?: string
+}>(), { minuteStep: 5, use24h: true })
+
+const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
+
+const open = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+const mode = ref<'hour' | 'minute'>('hour')
+const dropPos = ref({ top: '0px', left: '0px' })
+const { resolvedFieldBg } = useFieldBg(triggerEl, () => props.fieldBg)
+
+const parsed = computed(() => {
+  if (!props.modelValue) return { h: 12, m: 0 }
+  const parts = props.modelValue.split(':').map(Number)
+  return { h: parts[0] ?? 12, m: parts[1] ?? 0 }
+})
+
+const selectedHour = ref(parsed.value.h)
+const selectedMinute = ref(parsed.value.m)
+watch(() => props.modelValue, () => {
+  selectedHour.value = parsed.value.h
+  selectedMinute.value = parsed.value.m
+})
+
+const hours = Array.from({ length: 24 }, (_, i) => i)
+const minutes = computed(() => {
+  const arr: number[] = []
+  for (let m = 0; m < 60; m += props.minuteStep) arr.push(m)
+  return arr
+})
+
+function pad(n: number) { return String(n).padStart(2, '0') }
+
+function selectHour(h: number) {
+  selectedHour.value = h
+  mode.value = 'minute'
+}
+
+function selectMinute(m: number) {
+  selectedMinute.value = m
+  emit('update:modelValue', `${pad(selectedHour.value)}:${pad(m)}`)
+  open.value = false
+  mode.value = 'hour'
+}
+
+function clear() {
+  emit('update:modelValue', null)
+}
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  return `${pad(parsed.value.h)}:${pad(parsed.value.m)}`
+})
+
+function computeDropPos() {
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  const panelH = 320
+  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) {
+    mode.value = 'hour'
+    selectedHour.value = parsed.value.h
+    selectedMinute.value = parsed.value.m
+    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="schedule" :size="20" class="shrink-0 text-on-surface-variant" />
+        <span v-if="displayValue" class="flex-1 font-mono text-on-surface">{{ displayValue }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ label || 'Seleccionar hora' }}</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>
+
+    <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-[280px] rounded-lg bg-surface-container shadow-elevation-3"
+          :style="dropPos"
+        >
+          <!-- Display -->
+          <div class="flex items-center justify-center gap-1 border-b border-outline-variant px-4 py-4">
+            <button
+              type="button"
+              class="rounded-lg px-3 py-2 font-mono text-headline-medium transition-colors"
+              :class="mode === 'hour' ? 'bg-primary-container text-on-primary-container cursor-default' : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8'"
+              @click="mode = 'hour'"
+            >
+              {{ pad(selectedHour) }}
+            </button>
+            <span class="text-headline-medium text-on-surface-variant">:</span>
+            <button
+              type="button"
+              class="rounded-lg px-3 py-2 font-mono text-headline-medium transition-colors"
+              :class="mode === 'minute' ? 'bg-primary-container text-on-primary-container cursor-default' : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8'"
+              @click="mode = 'minute'"
+            >
+              {{ pad(selectedMinute) }}
+            </button>
+          </div>
+
+          <!-- Grid -->
+          <div class="p-3">
+            <div v-if="mode === 'hour'" class="grid grid-cols-6 gap-1">
+              <button
+                v-for="h in hours"
+                :key="h"
+                type="button"
+                class="flex h-9 cursor-pointer items-center justify-center rounded-full text-body-medium transition-colors duration-100"
+                :class="
+                  h === selectedHour
+                    ? 'bg-primary text-on-primary'
+                    : 'text-on-surface hover:bg-on-surface/8'
+                "
+                @click="selectHour(h)"
+              >
+                {{ pad(h) }}
+              </button>
+            </div>
+
+            <div v-else class="grid grid-cols-6 gap-1">
+              <button
+                v-for="m in minutes"
+                :key="m"
+                type="button"
+                class="flex h-9 cursor-pointer items-center justify-center rounded-full text-body-medium transition-colors duration-100"
+                :class="
+                  m === selectedMinute
+                    ? 'bg-primary text-on-primary'
+                    : 'text-on-surface hover:bg-on-surface/8'
+                "
+                @click="selectMinute(m)"
+              >
+                {{ pad(m) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/MTimeline.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import MIcon from "./MIcon.vue";
+
+export interface TimelineItem {
+  title: string;
+  description?: string;
+  date?: string;
+  icon?: string;
+  color?: "primary" | "secondary" | "tertiary" | "error" | "success";
+  dotColor?: string;
+}
+
+withDefaults(
+  defineProps<{
+    items: TimelineItem[];
+    dense?: boolean;
+    alternating?: boolean;
+  }>(),
+  { dense: false, alternating: false },
+);
+
+const dotBg: 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="alternating ? 'relative' : 'flex flex-col'">
+    <!-- Standard layout -->
+    <template v-if="!alternating">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="relative flex gap-4"
+        :class="dense ? 'pb-4' : 'pb-8'"
+      >
+        <!-- Line + dot -->
+        <div class="flex flex-col items-center">
+          <div
+            class="z-[1] flex shrink-0 items-center justify-center rounded-full"
+            :class="[item.icon ? 'h-9 w-9' : 'h-3 w-3', dotBg[item.color ?? 'primary']]"
+            :style="item.dotColor ? { backgroundColor: item.dotColor } : undefined"
+          >
+            <MIcon v-if="item.icon" :name="item.icon" :size="18" />
+          </div>
+          <div
+            v-if="i < items.length - 1"
+            class="w-[2px] flex-1"
+            :class="dotBg[item.color ?? 'primary']!.split(' ')[0] + '/30'"
+            style="min-height: 16px"
+          />
+        </div>
+
+        <!-- Content -->
+        <div :class="item.icon ? '' : 'pt-0'" class="-mt-0.5 flex-1">
+          <div class="flex items-baseline justify-between gap-2">
+            <p class="text-body-large font-medium text-on-surface">{{ item.title }}</p>
+            <span v-if="item.date" class="shrink-0 text-label-small text-on-surface-variant">{{
+              item.date
+            }}</span>
+          </div>
+          <p v-if="item.description" class="mt-1 text-body-medium text-on-surface-variant">
+            {{ item.description }}
+          </p>
+          <div v-if="$slots[`item-${i}`]" class="mt-2">
+            <slot :name="`item-${i}`" :item="item" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Alternating layout -->
+    <template v-else>
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="flex items-stretch"
+        :class="i % 2 === 0 ? 'flex-row' : 'flex-row-reverse'"
+      >
+        <!-- Content side -->
+        <div
+          class="flex-1"
+          :class="[i % 2 === 0 ? 'text-right' : 'text-left', dense ? 'pb-4' : 'pb-8']"
+        >
+          <p class="text-body-large font-medium text-on-surface">{{ item.title }}</p>
+          <p v-if="item.description" class="mt-1 text-body-medium text-on-surface-variant">
+            {{ item.description }}
+          </p>
+          <span
+            v-if="item.date"
+            class="mt-1 inline-block text-label-small text-on-surface-variant"
+            >{{ item.date }}</span
+          >
+        </div>
+
+        <!-- Center column: dot + continuous line -->
+        <div class="flex w-14 shrink-0 flex-col items-center">
+          <div
+            class="z-[1] flex shrink-0 items-center justify-center rounded-full"
+            :class="[item.icon ? 'h-9 w-9' : 'h-3.5 w-3.5', dotBg[item.color ?? 'primary']]"
+            :style="item.dotColor ? { backgroundColor: item.dotColor } : undefined"
+          >
+            <MIcon v-if="item.icon" :name="item.icon" :size="18" />
+          </div>
+          <div v-if="i < items.length - 1" class="w-[2px] flex-1 bg-outline-variant" />
+        </div>
+
+        <!-- Empty side -->
+        <div class="flex-1" />
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/MTooltip.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  text: string
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+}>(), { placement: 'top', delay: 600 })
+
+const visible = ref(false)
+const tipEl = ref<HTMLElement>()
+const triggerEl = ref<HTMLElement>()
+const tipStyle = ref<Record<string, string>>({})
+let timer: ReturnType<typeof setTimeout> | null = null
+
+async function show() {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(async () => {
+    visible.value = true
+    await nextTick()
+    reposition()
+  }, props.delay)
+}
+
+function hide() {
+  if (timer) { clearTimeout(timer); timer = null }
+  visible.value = false
+}
+
+function reposition() {
+  if (!triggerEl.value || !tipEl.value) return
+  const tr = triggerEl.value.getBoundingClientRect()
+  const tt = tipEl.value.getBoundingClientRect()
+  const GAP = 6
+
+  let top = 0, left = 0
+  switch (props.placement) {
+    case 'top':    top = tr.top - tt.height - GAP;   left = tr.left + (tr.width - tt.width) / 2; break
+    case 'bottom': top = tr.bottom + GAP;             left = tr.left + (tr.width - tt.width) / 2; break
+    case 'left':   top = tr.top + (tr.height - tt.height) / 2; left = tr.left - tt.width - GAP; break
+    case 'right':  top = tr.top + (tr.height - tt.height) / 2; left = tr.right + GAP; break
+  }
+
+  top  = Math.max(6, Math.min(top,  window.innerHeight - tt.height - 6))
+  left = Math.max(6, Math.min(left, window.innerWidth  - tt.width  - 6))
+  tipStyle.value = { top: `${top}px`, left: `${left}px` }
+}
+</script>
+
+<template>
+  <span
+    ref="triggerEl"
+    class="inline-flex"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+  </span>
+
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-150"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible && text"
+        ref="tipEl"
+        class="pointer-events-none fixed z-[400] max-w-[220px] rounded bg-inverse-surface px-3 py-1.5 text-label-medium text-inverse-on-surface shadow-elevation-2"
+        :style="tipStyle"
+        role="tooltip"
+      >
+        {{ text }}
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MTopAppBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+
+withDefaults(defineProps<{
+  title?: string
+  variant?: 'center' | 'small' | 'medium' | 'large'
+  navigationIcon?: string
+  elevated?: boolean
+}>(), { variant: 'small' })
+
+defineEmits<{ navigation: [] }>()
+</script>
+
+<template>
+  <header
+    class="flex w-full flex-col bg-surface transition-shadow"
+    :class="elevated ? 'shadow-elevation-2' : ''"
+  >
+    <!-- Top row -->
+    <div class="flex h-16 items-center gap-1 px-2">
+      <!-- Navigation icon -->
+      <MIconButton
+        v-if="navigationIcon"
+        :icon="navigationIcon"
+        label="Navegación"
+        @click="$emit('navigation')"
+      />
+
+      <!-- Title: center or small variant -->
+      <h1
+        v-if="variant === 'center' || variant === 'small'"
+        class="flex-1 truncate px-2 text-title-large text-on-surface"
+        :class="variant === 'center' ? 'text-center' : ''"
+      >
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- Spacer for medium/large (title is below) -->
+      <div v-else class="flex-1" />
+
+      <!-- Trailing actions -->
+      <div v-if="$slots.actions" class="flex items-center gap-1">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- Large title row for medium/large variants -->
+    <div
+      v-if="variant === 'medium' || variant === 'large'"
+      class="px-4 pb-6"
+      :class="variant === 'large' ? 'pt-4' : 'pt-1'"
+    >
+      <h1
+        class="text-on-surface"
+        :class="variant === 'large' ? 'text-headline-medium' : 'text-headline-small'"
+      >
+        <slot name="title">{{ title }}</slot>
+      </h1>
+    </div>
+  </header>
+</template>