@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MDragDropList.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface DragDropItem {
+  id: string | number
+  [key: string]: any
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: DragDropItem[]
+    handle?: boolean
+  }>(),
+  { handle: false },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [DragDropItem[]]
+  reorder: [{ from: number; to: number; items: DragDropItem[] }]
+}>()
+
+const dragIndex = ref<number | null>(null)
+const overIndex = ref<number | null>(null)
+
+function onDragStart(e: DragEvent, index: number) {
+  dragIndex.value = index
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(index))
+  }
+}
+
+function onDragOver(e: DragEvent, index: number) {
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  overIndex.value = index
+}
+
+function onDragLeave() {
+  overIndex.value = null
+}
+
+function onDrop(e: DragEvent, toIndex: number) {
+  e.preventDefault()
+  const fromIndex = dragIndex.value
+  if (fromIndex === null || fromIndex === toIndex) {
+    reset()
+    return
+  }
+
+  const items = [...props.modelValue]
+  const moved = items.splice(fromIndex, 1)[0]!
+  items.splice(toIndex, 0, moved)
+
+  emit('update:modelValue', items)
+  emit('reorder', { from: fromIndex, to: toIndex, items })
+  reset()
+}
+
+function onDragEnd() {
+  reset()
+}
+
+function reset() {
+  dragIndex.value = null
+  overIndex.value = null
+}
+
+function getItemClass(index: number) {
+  if (dragIndex.value === index) return 'opacity-30'
+  if (overIndex.value === index && dragIndex.value !== null) return 'ring-2 ring-primary ring-inset'
+  return ''
+}
+</script>
+
+<template>
+  <div class="flex flex-col" role="listbox">
+    <div
+      v-for="(item, index) in modelValue"
+      :key="item.id"
+      :draggable="!handle"
+      class="group flex items-center gap-2 rounded-lg px-3 py-2 transition-all"
+      :class="[
+        getItemClass(index),
+        !handle && 'cursor-grab active:cursor-grabbing',
+      ]"
+      @dragstart="!handle && onDragStart($event, index)"
+      @dragover="onDragOver($event, index)"
+      @dragleave="onDragLeave"
+      @drop="onDrop($event, index)"
+      @dragend="onDragEnd"
+      role="option"
+    >
+      <div
+        v-if="handle"
+        class="flex shrink-0 cursor-grab items-center justify-center rounded p-0.5 text-on-surface-variant/50 transition-colors hover:text-on-surface-variant active:cursor-grabbing"
+        draggable="true"
+        @dragstart="onDragStart($event, index)"
+      >
+        <MIcon name="drag_indicator" :size="20" />
+      </div>
+
+      <div class="min-w-0 flex-1">
+        <slot :item="item" :index="index">
+          <span class="text-body-medium text-on-surface">{{ item.id }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MEmptyState.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+
+withDefaults(defineProps<{
+  icon?: string
+  title: string
+  description?: string
+  compact?: boolean
+}>(), { icon: 'inbox' })
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center text-center"
+    :class="compact ? 'gap-2 py-6' : 'gap-3 py-14'"
+  >
+    <div
+      class="flex items-center justify-center rounded-full bg-surface-container-high text-on-surface-variant"
+      :class="compact ? 'h-12 w-12' : 'h-16 w-16'"
+    >
+      <MIcon :name="icon" :size="compact ? 24 : 32" />
+    </div>
+    <h3
+      class="font-medium text-on-surface"
+      :class="compact ? 'text-title-small' : 'text-title-medium'"
+    >
+      {{ title }}
+    </h3>
+    <p
+      v-if="description"
+      class="max-w-sm text-on-surface-variant"
+      :class="compact ? 'text-body-small' : 'text-body-medium'"
+    >
+      {{ description }}
+    </p>
+    <div v-if="$slots.actions" :class="compact ? 'mt-1' : 'mt-2'">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/MExpansionPanel.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(defineProps<{
+  title: string
+  subtitle?: string
+  icon?: string
+  modelValue?: boolean
+  disabled?: boolean
+  variant?: 'outlined' | 'filled' | 'elevated'
+}>(), { disabled: false, variant: 'outlined' })
+
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+
+const internal = ref(false)
+const isOpen = computed(() =>
+  props.modelValue !== undefined ? props.modelValue : internal.value,
+)
+
+function toggle() {
+  if (props.disabled) return
+  const next = !isOpen.value
+  if (props.modelValue !== undefined) emit('update:modelValue', next)
+  else internal.value = next
+}
+
+const wrapperClass = computed(() => {
+  if (props.variant === 'filled')   return 'bg-surface-container-low rounded-md'
+  if (props.variant === 'elevated') return 'bg-surface-container-low rounded-md shadow-elevation-1'
+  return 'rounded-md border border-outline-variant'
+})
+</script>
+
+<template>
+  <div :class="wrapperClass" class="overflow-hidden">
+    <!-- Header / trigger -->
+    <button
+      type="button"
+      class="flex w-full items-center gap-4 px-5 py-4 text-left transition-colors duration-150 focus-visible:outline-none"
+      :class="[
+        disabled ? 'cursor-not-allowed opacity-[0.38]' : 'cursor-pointer hover:bg-on-surface/4',
+        isOpen ? 'bg-on-surface/4' : '',
+      ]"
+      :aria-expanded="isOpen"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <MIcon v-if="icon" :name="icon" :size="22" class="shrink-0 text-on-surface-variant" />
+      <div class="flex-1 min-w-0">
+        <p class="text-body-large font-medium text-on-surface">{{ title }}</p>
+        <p v-if="subtitle" class="text-body-small text-on-surface-variant">{{ subtitle }}</p>
+      </div>
+      <MIcon
+        name="expand_more"
+        :size="22"
+        class="shrink-0 text-on-surface-variant transition-transform duration-200"
+        :class="isOpen ? 'rotate-180' : ''"
+      />
+    </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">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+/*
+  grid-template-rows: 0fr → 1fr expands to the exact content height,
+  so the animation is always proportional — no max-height overshoot.
+*/
+.expand-grid {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+.expand-body {
+  min-height: 0; /* required for 0fr to actually collapse */
+  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

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface SpeedDialItem {
+  icon: string
+  label?: string
+  onClick?: () => void
+}
+
+const props = withDefaults(
+  defineProps<{
+    icon: string
+    label?: string
+    color?: 'primary' | 'secondary' | 'tertiary' | 'surface'
+    size?: 'small' | 'regular' | 'large'
+    disabled?: boolean
+    /** Speed-dial child items. If provided, clicking the FAB toggles them instead of emitting click. */
+    items?: SpeedDialItem[]
+    /** Direction the speed-dial items expand toward. */
+    direction?: 'up' | 'down' | 'left' | 'right' | 'radial'
+  }>(),
+  {
+    color: 'primary',
+    size: 'regular',
+    disabled: false,
+    direction: 'up',
+  },
+)
+
+const emit = defineEmits<{ click: [MouseEvent] }>()
+
+const open = ref(false)
+const containerEl = ref<HTMLElement>()
+
+const hasItems = computed(() => !!props.items?.length)
+
+const colorMap: Record<string, string> = {
+  primary: 'bg-primary-container text-on-primary-container',
+  secondary: 'bg-secondary-container text-on-secondary-container',
+  tertiary: 'bg-tertiary-container text-on-tertiary-container',
+  surface: 'bg-surface-container-high text-primary',
+}
+
+const fabSizeClasses = computed(() => {
+  if (props.label) return 'h-14 rounded-2xl px-4 gap-3'
+  switch (props.size) {
+    case 'small': return 'h-10 w-10 rounded-lg'
+    case 'large': return 'h-24 w-24 rounded-[28px]'
+    default: return 'h-14 w-14 rounded-2xl'
+  }
+})
+
+const fabIconSize = computed(() => {
+  if (props.label) return 24
+  switch (props.size) {
+    case 'small': return 20
+    case 'large': return 36
+    default: return 24
+  }
+})
+
+// FAB height in px — used to position items relative to the container
+const fabPx = computed(() => {
+  if (props.label) return 56
+  switch (props.size) {
+    case 'small': return 40
+    case 'large': return 96
+    default: return 56
+  }
+})
+
+// Item size (always small-FAB-sized): 40px
+const ITEM_PX = 40
+const ITEM_GAP = 8
+
+function itemStyle(index: number): Record<string, string> {
+  const count = props.items?.length ?? 0
+  // Stagger delay: open = forward order, close = reverse order
+  const delay = open.value
+    ? `${index * 35}ms`
+    : `${(count - 1 - index) * 35}ms`
+
+  const transition = `transform 220ms cubic-bezier(0.2,0,0,1) ${delay}, opacity 180ms ease ${delay}`
+
+  if (props.direction === 'radial') {
+    const angle = (2 * Math.PI * index) / count - Math.PI / 2
+    const r = 80
+    const dx = (Math.cos(angle) * r).toFixed(1)
+    const dy = (Math.sin(angle) * r).toFixed(1)
+    return {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: `${-ITEM_PX / 2}px`,
+      marginLeft: `${-ITEM_PX / 2}px`,
+      transform: open.value ? `translate(${dx}px, ${dy}px) scale(1)` : 'translate(0,0) scale(0)',
+      opacity: open.value ? '1' : '0',
+      transition,
+      pointerEvents: open.value ? 'auto' : 'none',
+    }
+  }
+
+  // Linear directions: offset from the container edge
+  const step = ITEM_PX + ITEM_GAP
+  const base = fabPx.value + ITEM_GAP + index * step
+
+  const offsetMap: Record<string, Record<string, string>> = {
+    up:    { bottom: `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
+    down:  { top:    `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
+    left:  { right:  `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
+    right: { left:   `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
+  }
+
+  const translateFrom: Record<string, string> = {
+    up:    'translateY(12px) scale(0.75)',
+    down:  'translateY(-12px) scale(0.75)',
+    left:  'translateX(12px) scale(0.75)',
+    right: 'translateX(-12px) scale(0.75)',
+  }
+
+  return {
+    position: 'absolute',
+    ...offsetMap[props.direction] ?? offsetMap.up,
+    transform: open.value ? 'translate(0,0) scale(1)' : (translateFrom[props.direction] ?? 'scale(0.75)'),
+    opacity: open.value ? '1' : '0',
+    transition,
+    pointerEvents: open.value ? 'auto' : 'none',
+  }
+}
+
+// Label only makes sense for up/down; placed to the left of the item button
+const showLabel = computed(() => props.direction === 'up' || props.direction === 'down')
+
+function createRipple(event: PointerEvent | MouseEvent, target?: HTMLElement) {
+  const button = (target ?? 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 })
+}
+
+function handleFabClick(e: PointerEvent) {
+  if (hasItems.value) {
+    open.value = !open.value
+  } else {
+    emit('click', e)
+  }
+}
+
+function handleItemClick(e: PointerEvent, item: SpeedDialItem, buttonEl: HTMLElement) {
+  createRipple(e, buttonEl)
+  open.value = false
+  item.onClick?.()
+}
+
+function onDocClick(e: MouseEvent) {
+  if (!open.value) return
+  if (containerEl.value && !containerEl.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocClick, true))
+onUnmounted(() => document.removeEventListener('click', onDocClick, true))
+</script>
+
+<template>
+  <div ref="containerEl" class="relative inline-flex items-center justify-center">
+    <!-- Speed-dial items (absolutely positioned outside the container) -->
+    <template v-if="hasItems">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        :style="itemStyle(i)"
+        class="flex items-center gap-3"
+        :class="showLabel ? 'flex-row-reverse' : ''"
+      >
+        <!-- Label pill (up/down only) -->
+        <span
+          v-if="item.label && showLabel"
+          class="whitespace-nowrap rounded-md bg-surface-container-high px-3 py-1.5 text-label-medium text-on-surface shadow-elevation-1"
+        >
+          {{ item.label }}
+        </span>
+
+        <!-- Mini FAB button -->
+        <button
+          type="button"
+          class="relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
+          :class="colorMap[color]"
+          :style="{ width: `${ITEM_PX}px`, height: `${ITEM_PX}px` }"
+          @pointerdown="(e) => handleItemClick(e, item, e.currentTarget as HTMLElement)"
+        >
+          <MIcon :name="item.icon" :size="20" />
+        </button>
+      </div>
+    </template>
+
+    <!-- Main FAB -->
+    <button
+      type="button"
+      class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
+      :class="[colorMap[color], fabSizeClasses]"
+      :disabled="disabled"
+      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
+    >
+      <MIcon
+        :name="icon"
+        :size="fabIconSize"
+        class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+        :class="hasItems && open ? 'rotate-45' : ''"
+      />
+      <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
+    </button>
+  </div>
+</template>

package/src/components/MFileUpload.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+import MSpinner from './MSpinner.vue'
+
+export interface UploadFile {
+  file: File
+  id: string
+  progress: number
+  status: 'pending' | 'uploading' | 'done' | 'error'
+  preview?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    accept?: string
+    multiple?: boolean
+    maxSize?: number
+    disabled?: boolean
+  }>(),
+  { multiple: false, disabled: false },
+)
+
+const emit = defineEmits<{
+  select: [UploadFile[]]
+  remove: [UploadFile]
+}>()
+
+const files = ref<UploadFile[]>([])
+const dragging = ref(false)
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const acceptList = computed(() =>
+  props.accept ? props.accept.split(',').map((s) => s.trim()) : null,
+)
+
+function isAccepted(file: File) {
+  if (!acceptList.value) return true
+  return acceptList.value.some((a) => {
+    if (a.startsWith('.')) return file.name.toLowerCase().endsWith(a.toLowerCase())
+    if (a.endsWith('/*')) return file.type.startsWith(a.replace('/*', '/'))
+    return file.type === a
+  })
+}
+
+function formatSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function processFiles(fileList: FileList | File[]) {
+  const arr = Array.from(fileList)
+  const valid = arr.filter((f) => {
+    if (!isAccepted(f)) return false
+    if (props.maxSize && f.size > props.maxSize) return false
+    return true
+  })
+
+  const entries: UploadFile[] = valid.map((f) => {
+    const entry: UploadFile = {
+      file: f,
+      id: crypto.randomUUID(),
+      progress: 0,
+      status: 'pending',
+    }
+    if (f.type.startsWith('image/')) {
+      entry.preview = URL.createObjectURL(f)
+    }
+    return entry
+  })
+
+  if (props.multiple) {
+    files.value.push(...entries)
+  } else {
+    files.value.forEach((f) => f.preview && URL.revokeObjectURL(f.preview))
+    files.value = entries.slice(0, 1)
+  }
+
+  emit('select', entries)
+}
+
+function onDrop(e: DragEvent) {
+  dragging.value = false
+  if (props.disabled || !e.dataTransfer?.files.length) return
+  processFiles(e.dataTransfer.files)
+}
+
+function onFileInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files?.length) processFiles(input.files)
+  input.value = ''
+}
+
+function removeFile(entry: UploadFile) {
+  if (entry.preview) URL.revokeObjectURL(entry.preview)
+  files.value = files.value.filter((f) => f.id !== entry.id)
+  emit('remove', entry)
+}
+
+function openPicker() {
+  if (!props.disabled) inputRef.value?.click()
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <!-- Drop zone -->
+    <div
+      class="relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-6 transition-colors duration-150"
+      :class="[
+        disabled
+          ? 'cursor-not-allowed border-outline-variant/50 bg-surface-container/30 opacity-60'
+          : dragging
+            ? 'border-primary bg-primary-container/20'
+            : 'border-outline-variant bg-surface-container-lowest hover:border-primary/60 hover:bg-surface-container',
+      ]"
+      @click="openPicker"
+      @dragenter.prevent="dragging = true"
+      @dragover.prevent="dragging = true"
+      @dragleave.prevent="dragging = false"
+      @drop.prevent="onDrop"
+    >
+      <MIcon
+        :name="dragging ? 'downloading' : 'cloud_upload'"
+        :size="40"
+        class="text-on-surface-variant"
+      />
+      <div class="text-center">
+        <p class="text-body-large text-on-surface">
+          Arrastra archivos aquí o <span class="font-medium text-primary">selecciona</span>
+        </p>
+        <p v-if="accept || maxSize" class="mt-1 text-body-small text-on-surface-variant">
+          <span v-if="accept">{{ accept }}</span>
+          <span v-if="accept && maxSize"> · </span>
+          <span v-if="maxSize">Máx. {{ formatSize(maxSize) }}</span>
+        </p>
+      </div>
+    </div>
+
+    <input
+      ref="inputRef"
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onFileInput"
+    />
+
+    <!-- File list -->
+    <TransitionGroup
+      name="m3-file"
+      tag="div"
+      class="flex flex-col gap-2"
+    >
+      <div
+        v-for="entry in files"
+        :key="entry.id"
+        class="flex items-center gap-3 rounded-lg bg-surface-container p-3"
+      >
+        <!-- Preview / icon -->
+        <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-surface-container-high">
+          <img v-if="entry.preview" :src="entry.preview" class="h-full w-full object-cover" />
+          <MIcon v-else name="description" :size="24" class="text-on-surface-variant" />
+        </div>
+
+        <!-- Info -->
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-body-medium text-on-surface">{{ entry.file.name }}</p>
+          <p class="text-body-small text-on-surface-variant">{{ formatSize(entry.file.size) }}</p>
+          <!-- Progress bar -->
+          <div
+            v-if="entry.status === 'uploading'"
+            class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-surface-container-highest"
+          >
+            <div
+              class="h-full rounded-full bg-primary transition-[width] duration-300"
+              :style="{ width: `${entry.progress}%` }"
+            />
+          </div>
+        </div>
+
+        <!-- Status -->
+        <MSpinner v-if="entry.status === 'uploading'" :size="20" />
+        <MIcon v-else-if="entry.status === 'done'" name="check_circle" :size="20" class="text-success" />
+        <MIcon v-else-if="entry.status === 'error'" name="error" :size="20" class="text-error" />
+
+        <MIconButton icon="close" label="Eliminar" :size="32" @click="removeFile(entry)" />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+.m3-file-enter-active,
+.m3-file-leave-active {
+  transition: all 0.2s ease;
+}
+.m3-file-enter-from,
+.m3-file-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>