@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MKanban.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+
+export interface KanbanCard {
+  id: string | number
+  [key: string]: any
+}
+
+export interface KanbanColumn {
+  id: string | number
+  title: string
+  cards: KanbanCard[]
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success'
+}
+
+const props = defineProps<{
+  modelValue: KanbanColumn[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [KanbanColumn[]]
+  cardMove: [{ cardId: string | number; fromColumn: string | number; toColumn: string | number; toIndex: number }]
+  cardClick: [{ card: KanbanCard; columnId: string | number }]
+}>()
+
+const dragCard = ref<{ cardId: string | number; columnId: string | number } | null>(null)
+const overColumn = ref<string | number | null>(null)
+const overCardIndex = ref<number | null>(null)
+
+const colorMap: Record<string, string> = {
+  primary: 'bg-primary',
+  secondary: 'bg-secondary',
+  tertiary: 'bg-tertiary',
+  error: 'bg-error',
+  success: 'bg-success',
+}
+
+function onCardDragStart(e: DragEvent, card: KanbanCard, columnId: string | number) {
+  dragCard.value = { cardId: card.id, columnId }
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(card.id))
+  }
+}
+
+function onColumnDragOver(e: DragEvent, columnId: string | number) {
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  overColumn.value = columnId
+}
+
+function onCardDragOver(e: DragEvent, _card: KanbanCard, index: number, columnId: string | number) {
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+  overColumn.value = columnId
+  overCardIndex.value = index
+}
+
+function onDrop(e: DragEvent, toColumnId: string | number) {
+  e.preventDefault()
+  if (!dragCard.value) return
+
+  const { cardId, columnId: fromColumnId } = dragCard.value
+  if (fromColumnId === toColumnId && overCardIndex.value === null) {
+    reset()
+    return
+  }
+
+  const columns = props.modelValue.map((col) => ({ ...col, cards: [...col.cards] }))
+  const fromCol = columns.find((c) => c.id === fromColumnId)
+  const toCol = columns.find((c) => c.id === toColumnId)
+  if (!fromCol || !toCol) { reset(); return }
+
+  const cardIndex = fromCol.cards.findIndex((c) => c.id === cardId)
+  if (cardIndex === -1) { reset(); return }
+
+  const removed = fromCol.cards.splice(cardIndex, 1)
+  const toIndex = overCardIndex.value ?? toCol.cards.length
+  toCol.cards.splice(toIndex, 0, removed[0]!)
+
+  emit('update:modelValue', columns)
+  emit('cardMove', { cardId, fromColumn: fromColumnId, toColumn: toColumnId, toIndex })
+  reset()
+}
+
+function reset() {
+  dragCard.value = null
+  overColumn.value = null
+  overCardIndex.value = null
+}
+</script>
+
+<template>
+  <div class="flex gap-4 overflow-x-auto pb-2">
+    <div
+      v-for="column in modelValue"
+      :key="column.id"
+      class="flex w-72 shrink-0 flex-col rounded-xl bg-surface-container-low"
+      :class="overColumn === column.id && dragCard ? 'ring-2 ring-primary ring-inset' : ''"
+      @dragover="onColumnDragOver($event, column.id)"
+      @dragleave="overColumn = null"
+      @drop="onDrop($event, column.id)"
+    >
+      <!-- Column header -->
+      <div class="flex items-center gap-2 px-4 py-3">
+        <div v-if="column.color" class="h-2.5 w-2.5 rounded-full" :class="colorMap[column.color] ?? 'bg-primary'" />
+        <h3 class="flex-1 text-title-small font-medium text-on-surface">{{ column.title }}</h3>
+        <span class="rounded-full bg-surface-container-high px-2 py-0.5 text-label-small text-on-surface-variant">
+          {{ column.cards.length }}
+        </span>
+      </div>
+
+      <!-- Cards area -->
+      <div class="flex min-h-[60px] flex-1 flex-col gap-2 px-3 pb-3">
+        <div
+          v-for="(card, index) in column.cards"
+          :key="card.id"
+          draggable="true"
+          class="cursor-grab rounded-lg bg-surface p-3 shadow-elevation-1 transition-all duration-150 active:cursor-grabbing"
+          :class="[
+            dragCard?.cardId === card.id ? 'opacity-30' : 'hover:shadow-elevation-2',
+            overCardIndex === index && overColumn === column.id && dragCard ? 'border-t-2 border-primary' : '',
+          ]"
+          @dragstart="onCardDragStart($event, card, column.id)"
+          @dragover="onCardDragOver($event, card, index, column.id)"
+          @dragend="reset"
+          @click="emit('cardClick', { card, columnId: column.id })"
+        >
+          <slot name="card" :card="card" :column="column">
+            <p class="text-body-medium text-on-surface">{{ card.id }}</p>
+          </slot>
+        </div>
+
+        <!-- Empty state -->
+        <div
+          v-if="column.cards.length === 0"
+          class="flex flex-1 items-center justify-center rounded-lg border border-dashed border-outline-variant/50 p-4"
+        >
+          <p class="text-body-small text-on-surface-variant/60">Sin tarjetas</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/MLoadingOverlay.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import MSpinner from './MSpinner.vue'
+
+withDefaults(defineProps<{
+  visible: boolean
+  text?: string
+  fullscreen?: boolean
+  opaque?: boolean
+  spinnerSize?: number
+}>(), { fullscreen: false, opaque: false, spinnerSize: 40 })
+</script>
+
+<template>
+  <Teleport v-if="fullscreen" to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-[300] flex flex-col items-center justify-center gap-4"
+        :class="opaque ? 'bg-surface' : 'bg-surface/80 backdrop-blur-sm'"
+      >
+        <MSpinner :size="spinnerSize" class="text-primary" />
+        <p v-if="text" class="text-body-large text-on-surface-variant">{{ text }}</p>
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+
+  <div v-else class="relative">
+    <slot name="content" />
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible"
+        class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-[inherit]"
+        :class="opaque ? 'bg-surface' : 'bg-surface/80 backdrop-blur-sm'"
+      >
+        <MSpinner :size="spinnerSize" class="text-primary" />
+        <p v-if="text" class="text-body-medium text-on-surface-variant">{{ text }}</p>
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/MMarkdown.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+
+const props = withDefaults(
+  defineProps<{
+    source: string
+    breaks?: boolean
+    linkify?: boolean
+  }>(),
+  { breaks: true, linkify: true },
+)
+
+const md = new MarkdownIt({
+  html: false,
+  breaks: props.breaks,
+  linkify: props.linkify,
+  typographer: true,
+})
+
+md.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
+  const token = tokens[idx]
+  if (token) {
+    token.attrSet('target', '_blank')
+    token.attrSet('rel', 'noopener noreferrer')
+  }
+  return self.renderToken(tokens, idx, options)
+}
+
+const rendered = computed(() => md.render(props.source))
+</script>
+
+<template>
+  <div class="m3-markdown text-body-large text-on-surface" v-html="rendered" />
+</template>
+
+<style scoped>
+.m3-markdown :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 1em 0 0.5em; color: var(--color-on-surface); }
+.m3-markdown :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 1em 0 0.5em; color: var(--color-on-surface); }
+.m3-markdown :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; color: var(--color-on-surface); }
+.m3-markdown :deep(h4) { font-size: var(--text-title-large); line-height: var(--text-title-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; color: var(--color-on-surface); }
+
+.m3-markdown :deep(p) { margin: 0.5em 0; }
+
+.m3-markdown :deep(a) {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.m3-markdown :deep(a:hover) { opacity: 0.8; }
+
+.m3-markdown :deep(strong) { font-weight: 600; color: var(--color-on-surface); }
+.m3-markdown :deep(em) { font-style: italic; }
+
+.m3-markdown :deep(ul),
+.m3-markdown :deep(ol) { padding-left: 1.5em; margin: 0.5em 0; }
+.m3-markdown :deep(li) { margin: 0.25em 0; }
+.m3-markdown :deep(li::marker) { color: var(--color-on-surface-variant); }
+
+.m3-markdown :deep(blockquote) {
+  border-left: 3px solid var(--color-primary);
+  padding: 0.5em 1em;
+  margin: 0.75em 0;
+  background: var(--color-surface-container);
+  border-radius: 0 8px 8px 0;
+  color: var(--color-on-surface-variant);
+}
+
+.m3-markdown :deep(code) {
+  background: var(--color-surface-container-highest);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.875em;
+  color: var(--color-primary);
+}
+
+.m3-markdown :deep(pre) {
+  background: var(--color-surface-container-highest);
+  padding: 1em;
+  border-radius: 12px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+  border: 1px solid var(--color-outline-variant);
+}
+.m3-markdown :deep(pre code) {
+  background: none;
+  padding: 0;
+  color: var(--color-on-surface);
+}
+
+.m3-markdown :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--color-outline-variant);
+  margin: 1.5em 0;
+}
+
+.m3-markdown :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75em 0;
+}
+.m3-markdown :deep(th) {
+  background: var(--color-surface-container);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.5em 0.75em;
+  border-bottom: 2px solid var(--color-outline-variant);
+  font-size: var(--text-label-large);
+  color: var(--color-on-surface);
+}
+.m3-markdown :deep(td) {
+  padding: 0.5em 0.75em;
+  border-bottom: 1px solid var(--color-outline-variant);
+}
+
+.m3-markdown :deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  margin: 0.5em 0;
+}
+</style>

package/src/components/MMasonry.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick, useSlots } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    cols?: number
+    smCols?: number
+    mdCols?: number
+    lgCols?: number
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  }>(),
+  { cols: 2, gap: 'md' },
+)
+
+const gapPx: Record<string, number> = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+}
+
+const containerRef = ref<HTMLElement | null>(null)
+const activeCols = ref(props.cols)
+
+function getActiveCols() {
+  const w = window.innerWidth
+  if (props.lgCols && w >= 1024) return props.lgCols
+  if (props.mdCols && w >= 768) return props.mdCols
+  if (props.smCols && w >= 640) return props.smCols
+  return props.cols
+}
+
+const slots = useSlots()
+
+function layout() {
+  activeCols.value = getActiveCols()
+  const container = containerRef.value
+  if (!container) return
+
+  const gap = gapPx[props.gap] ?? 0
+  const cols = activeCols.value
+  const children = Array.from(container.children) as HTMLElement[]
+
+  const colWidth = (container.clientWidth - gap * (cols - 1)) / cols
+  const colHeights = new Array<number>(cols).fill(0)
+
+  for (const child of children) {
+    const shortest = colHeights.indexOf(Math.min(...colHeights))
+    const x = shortest * (colWidth + gap)
+    const y = colHeights[shortest] ?? 0
+
+    child.style.position = 'absolute'
+    child.style.left = `${x}px`
+    child.style.top = `${y}px`
+    child.style.width = `${colWidth}px`
+
+    colHeights[shortest] = (colHeights[shortest] ?? 0) + child.offsetHeight + gap
+  }
+
+  container.style.height = `${Math.max(...colHeights) - gap}px`
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  nextTick(layout)
+  resizeObserver = new ResizeObserver(layout)
+  if (containerRef.value) resizeObserver.observe(containerRef.value)
+  window.addEventListener('resize', layout)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', layout)
+})
+
+watch(() => [props.cols, props.smCols, props.mdCols, props.lgCols, props.gap], () => nextTick(layout))
+watch(() => slots.default?.(), () => nextTick(layout), { flush: 'post' })
+</script>
+
+<template>
+  <div ref="containerRef" class="relative w-full">
+    <slot />
+  </div>
+</template>

package/src/components/MMenu.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Which edge of the trigger the dropdown aligns to. */
+    align?: 'left' | 'right'
+  }>(),
+  { align: 'right' },
+)
+
+const open = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+const dropdownEl = ref<HTMLElement | null>(null)
+const dropStyle = ref<Record<string, string>>({})
+
+function computePos() {
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  const spaceBelow = window.innerHeight - rect.bottom - 8
+  const openAbove = spaceBelow < 200 && rect.top > spaceBelow
+
+  const style: Record<string, string> = {
+    maxHeight: `${Math.min(openAbove ? rect.top - 12 : spaceBelow, 400)}px`,
+  }
+
+  if (openAbove) {
+    style.bottom = `${window.innerHeight - rect.top + 4}px`
+  } else {
+    style.top = `${rect.bottom + 4}px`
+  }
+
+  if (props.align === 'right') {
+    style.right = `${window.innerWidth - rect.right}px`
+  } else {
+    style.left = `${rect.left}px`
+  }
+
+  dropStyle.value = style
+}
+
+function toggle() {
+  if (!open.value) computePos()
+  open.value = !open.value
+}
+
+function close() {
+  open.value = false
+}
+
+defineExpose({ close, open })
+
+function onOutsideClick(e: MouseEvent) {
+  const t = e.target as Node
+  if (!triggerEl.value?.contains(t) && !dropdownEl.value?.contains(t)) close()
+}
+
+function onScroll(e: Event) {
+  if (!open.value) return
+  if (dropdownEl.value?.contains(e.target as Node)) return
+  if (!triggerEl.value) return
+  const rect = triggerEl.value.getBoundingClientRect()
+  if (rect.bottom < 0 || rect.top > window.innerHeight) { close(); return }
+  computePos()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onOutsideClick)
+  document.addEventListener('keydown', onKeydown)
+  window.addEventListener('scroll', onScroll, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onOutsideClick)
+  document.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('scroll', onScroll, true)
+})
+
+const origin = computed(() =>
+  props.align === 'right' ? 'top right' : 'top left',
+)
+</script>
+
+<template>
+  <div ref="triggerEl" class="inline-block" @click="toggle">
+    <slot name="trigger" :open="open" />
+  </div>
+
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-[opacity,transform] duration-100 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-[opacity,transform] duration-75 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="open"
+        ref="dropdownEl"
+        class="fixed z-[500] min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2"
+        :style="{ ...dropStyle, transformOrigin: origin }"
+        @click="close"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MMenuItem.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+
+withDefaults(defineProps<{ icon?: string }>(), {})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-body-large text-on-surface hover:bg-on-surface/8"
+  >
+    <MIcon v-if="icon" :name="icon" :size="20" class="text-on-surface-variant" />
+    <slot />
+  </button>
+</template>