@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MCodeEditor.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { html } from '@codemirror/lang-html'
+import { css } from '@codemirror/lang-css'
+import { python } from '@codemirror/lang-python'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'plain'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    language?: Language
+    readonly?: boolean
+    lineNumbers?: boolean
+    theme?: 'light' | 'dark'
+    minHeight?: string
+    maxHeight?: string
+    placeholder?: string
+  }>(),
+  {
+    language: 'javascript',
+    readonly: false,
+    lineNumbers: true,
+    theme: 'light',
+    minHeight: '200px',
+    maxHeight: '600px',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const containerRef = ref<HTMLElement | null>(null)
+let view: EditorView | null = null
+
+const langLabel = computed(() => {
+  const labels: Record<Language, string> = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    json: 'JSON',
+    html: 'HTML',
+    css: 'CSS',
+    python: 'Python',
+    plain: 'Texto',
+  }
+  return labels[props.language]
+})
+
+function getLangExtension() {
+  switch (props.language) {
+    case 'javascript': return javascript()
+    case 'typescript': return javascript({ typescript: true })
+    case 'json': return json()
+    case 'html': return html()
+    case 'css': return css()
+    case 'python': return python()
+    default: return []
+  }
+}
+
+function buildExtensions() {
+  const exts = [
+    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+    history(),
+    bracketMatching(),
+    indentOnInput(),
+    foldGutter(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    getLangExtension(),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) emit('update:modelValue', update.state.doc.toString())
+    }),
+    EditorState.readOnly.of(props.readonly),
+  ]
+
+  if (props.lineNumbers) exts.push(lineNumbers())
+  if (props.theme === 'dark') exts.push(oneDark)
+
+  return exts
+}
+
+function createEditor() {
+  if (!containerRef.value) return
+  view?.destroy()
+
+  view = new EditorView({
+    state: EditorState.create({
+      doc: props.modelValue,
+      extensions: buildExtensions(),
+    }),
+    parent: containerRef.value,
+  })
+}
+
+onMounted(createEditor)
+
+watch(() => props.modelValue, (val) => {
+  if (view && view.state.doc.toString() !== val) {
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: val } })
+  }
+})
+
+watch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers], createEditor)
+
+onBeforeUnmount(() => view?.destroy())
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-lg border border-outline-variant">
+    <!-- Header bar -->
+    <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2">
+      <span class="text-label-medium text-on-surface-variant">{{ langLabel }}</span>
+      <slot name="actions" />
+    </div>
+
+    <!-- Editor -->
+    <div
+      ref="containerRef"
+      class="code-editor-container overflow-auto bg-surface"
+      :style="{ minHeight, maxHeight }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.code-editor-container :deep(.cm-editor) {
+  height: 100%;
+  min-height: inherit;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.875rem;
+}
+
+.code-editor-container :deep(.cm-editor.cm-focused) {
+  outline: none;
+}
+
+.code-editor-container :deep(.cm-scroller) {
+  min-height: inherit;
+}
+
+.code-editor-container :deep(.cm-gutters) {
+  background: var(--color-surface-container);
+  border-right: 1px solid var(--color-outline-variant);
+  color: var(--color-on-surface-variant);
+}
+
+.code-editor-container :deep(.cm-activeLineGutter) {
+  background: var(--color-surface-container-high);
+}
+
+.code-editor-container :deep(.cm-activeLine) {
+  background: var(--color-surface-container-lowest);
+}
+
+.code-editor-container :deep(.cm-selectionBackground) {
+  background: var(--color-primary-container) !important;
+}
+
+.code-editor-container :deep(.cm-cursor) {
+  border-left-color: var(--color-primary);
+}
+
+.code-editor-container :deep(.cm-matchingBracket) {
+  background: var(--color-tertiary-container);
+  color: var(--color-on-tertiary-container);
+}
+
+.code-editor-container :deep(.cm-foldGutter span) {
+  color: var(--color-on-surface-variant);
+}
+</style>

package/src/components/MColorPicker.vue

@@ -0,0 +1,305 @@
+<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
+  label?: string
+  presets?: string[]
+  disabled?: boolean
+  error?: string
+  hint?: string
+  fieldBg?: string
+}>(), {
+  presets: () => [
+    '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3',
+    '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39',
+    '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#607d8b',
+  ],
+})
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+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 satBrightEl = ref<HTMLElement>()
+const draggingSB = ref(false)
+
+// HSV state
+const hue = ref(0)
+const sat = ref(100)
+const bright = ref(100)
+
+function hexToHsv(hex: string) {
+  let c = hex.replace('#', '')
+  if (c.length === 3) c = c[0]!+c[0]!+c[1]!+c[1]!+c[2]!+c[2]!
+  const r = parseInt(c.substring(0, 2), 16) / 255
+  const g = parseInt(c.substring(2, 4), 16) / 255
+  const b = parseInt(c.substring(4, 6), 16) / 255
+  const max = Math.max(r, g, b), min = Math.min(r, g, b)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + 6) % 6
+    else if (max === g) h = (b - r) / d + 2
+    else h = (r - g) / d + 4
+    h *= 60
+  }
+  const s = max === 0 ? 0 : (d / max) * 100
+  const v = max * 100
+  return { h, s, v }
+}
+
+function hsvToHex(h: number, s: number, v: number) {
+  s /= 100; v /= 100
+  const c = v * s
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1))
+  const m = v - c
+  let r = 0, g = 0, b = 0
+  if (h < 60) { r = c; g = x }
+  else if (h < 120) { r = x; g = c }
+  else if (h < 180) { g = c; b = x }
+  else if (h < 240) { g = x; b = c }
+  else if (h < 300) { r = x; b = c }
+  else { r = c; b = x }
+  const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+function syncFromProp() {
+  const hsv = hexToHsv(props.modelValue)
+  hue.value = hsv.h
+  sat.value = hsv.s
+  bright.value = hsv.v
+}
+syncFromProp()
+
+watch(() => props.modelValue, syncFromProp)
+
+function emitColor() {
+  emit('update:modelValue', hsvToHex(hue.value, sat.value, bright.value))
+}
+
+const currentHex = computed(() => hsvToHex(hue.value, sat.value, bright.value))
+const hueColor = computed(() => `hsl(${hue.value}, 100%, 50%)`)
+
+function onSBPointerDown(e: PointerEvent) {
+  draggingSB.value = true
+  updateSB(e)
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+}
+function onSBPointerMove(e: PointerEvent) {
+  if (!draggingSB.value) return
+  updateSB(e)
+}
+function onSBPointerUp() {
+  draggingSB.value = false
+  emitColor()
+}
+function updateSB(e: PointerEvent) {
+  if (!satBrightEl.value) return
+  const rect = satBrightEl.value.getBoundingClientRect()
+  sat.value = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100))
+  bright.value = Math.max(0, Math.min(100, (1 - (e.clientY - rect.top) / rect.height) * 100))
+}
+
+function onHueInput(e: Event) {
+  hue.value = Number((e.target as HTMLInputElement).value)
+  emitColor()
+}
+
+function selectPreset(color: string) {
+  emit('update:modelValue', color)
+}
+
+function onHexInput(e: Event) {
+  const v = (e.target as HTMLInputElement).value
+  if (/^#[0-9a-fA-F]{6}$/.test(v)) {
+    emit('update:modelValue', v)
+  }
+}
+
+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 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) {
+    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-3 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)"
+      >
+        <span
+          class="h-6 w-6 shrink-0 rounded-full border border-outline-variant"
+          :style="{ backgroundColor: modelValue }"
+        />
+        <span class="flex-1 font-mono text-on-surface">{{ modelValue }}</span>
+        <MIcon name="palette" :size="20" class="shrink-0 text-on-surface-variant" />
+      </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 p-4 shadow-elevation-3"
+          :style="dropPos"
+        >
+          <!-- Saturation / Brightness area -->
+          <div
+            ref="satBrightEl"
+            class="relative mb-3 h-40 w-full cursor-crosshair overflow-hidden rounded-lg"
+            :style="{ background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` }"
+            @pointerdown="onSBPointerDown"
+            @pointermove="onSBPointerMove"
+            @pointerup="onSBPointerUp"
+          >
+            <div
+              class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-elevation-1"
+              :style="{
+                left: `${sat}%`,
+                top: `${100 - bright}%`,
+                backgroundColor: currentHex,
+              }"
+            />
+          </div>
+
+          <!-- Hue slider -->
+          <div class="mb-3">
+            <input
+              type="range"
+              min="0"
+              max="360"
+              :value="hue"
+              class="hue-slider h-3 w-full cursor-pointer appearance-none rounded-full outline-none"
+              @input="onHueInput"
+            />
+          </div>
+
+          <!-- Preview + hex input -->
+          <div class="mb-3 flex items-center gap-3">
+            <span
+              class="h-9 w-9 shrink-0 rounded-full border border-outline-variant"
+              :style="{ backgroundColor: currentHex }"
+            />
+            <input
+              type="text"
+              :value="modelValue"
+              maxlength="7"
+              class="flex-1 rounded-sm border border-outline bg-transparent px-3 py-2 font-mono text-body-medium text-on-surface outline-none transition-colors focus:border-primary"
+              @input="onHexInput"
+            />
+          </div>
+
+          <!-- Presets -->
+          <div class="flex flex-wrap gap-1.5">
+            <button
+              v-for="color in presets"
+              :key="color"
+              type="button"
+              class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border transition-transform duration-100 hover:scale-110"
+              :class="color === modelValue ? 'border-on-surface' : 'border-transparent'"
+              :style="{ backgroundColor: color }"
+              @click="selectPreset(color)"
+            >
+              <MIcon v-if="color === modelValue" name="check" :size="14" class="text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]" />
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.hue-slider {
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+.hue-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+  cursor: pointer;
+}
+.hue-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+  border: none;
+  cursor: pointer;
+}
+</style>

package/src/components/MCommandPalette.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface CommandItem {
+  id: string
+  label: string
+  icon?: string
+  shortcut?: string
+  group?: string
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    items: CommandItem[]
+    placeholder?: string
+    noResultsText?: string
+    hotkey?: string
+  }>(),
+  {
+    placeholder: 'Buscar comando...',
+    noResultsText: 'Sin resultados',
+    hotkey: 'k',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  select: [CommandItem]
+}>()
+
+const query = ref('')
+const activeIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const filtered = computed(() => {
+  if (!query.value) return props.items.filter(i => !i.disabled)
+  const q = query.value.toLowerCase()
+  return props.items.filter(
+    i => !i.disabled && (i.label.toLowerCase().includes(q) || i.group?.toLowerCase().includes(q)),
+  )
+})
+
+const grouped = computed(() => {
+  const map = new Map<string, CommandItem[]>()
+  for (const item of filtered.value) {
+    const g = item.group ?? ''
+    if (!map.has(g)) map.set(g, [])
+    map.get(g)!.push(item)
+  }
+  return map
+})
+
+function open() {
+  emit('update:modelValue', true)
+}
+
+function close() {
+  query.value = ''
+  activeIndex.value = 0
+  emit('update:modelValue', false)
+}
+
+function selectItem(item: CommandItem) {
+  emit('select', item)
+  item.onSelect?.()
+  close()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % filtered.value.length
+    scrollToActive()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value - 1 + filtered.value.length) % filtered.value.length
+    scrollToActive()
+  } else if (e.key === 'Enter' && filtered.value.length) {
+    e.preventDefault()
+    selectItem(filtered.value[activeIndex.value]!)
+  } else if (e.key === 'Escape') {
+    close()
+  }
+}
+
+function scrollToActive() {
+  nextTick(() => {
+    const el = document.querySelector('[data-cmd-active="true"]')
+    el?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+function onGlobalKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === props.hotkey) {
+    e.preventDefault()
+    if (props.modelValue) close()
+    else open()
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+      nextTick(() => inputRef.value?.focus())
+    } else {
+      document.body.style.overflow = ''
+    }
+  },
+)
+
+watch(query, () => { activeIndex.value = 0 })
+
+onMounted(() => document.addEventListener('keydown', onGlobalKeydown))
+onBeforeUnmount(() => document.removeEventListener('keydown', onGlobalKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="m3-cmd">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[15vh]"
+        @click.self="close"
+      >
+        <div class="cmd-box flex w-full max-w-lg flex-col overflow-hidden rounded-xl bg-surface-container-high shadow-elevation-3">
+          <!-- Search input -->
+          <div class="flex items-center gap-3 border-b border-outline-variant px-4">
+            <MIcon name="search" :size="20" class="shrink-0 text-on-surface-variant" />
+            <input
+              ref="inputRef"
+              v-model="query"
+              type="text"
+              :placeholder="placeholder"
+              class="h-12 flex-1 bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant/50"
+              @keydown="onKeydown"
+            />
+            <kbd class="rounded bg-surface-container px-1.5 py-0.5 text-label-small text-on-surface-variant">
+              ESC
+            </kbd>
+          </div>
+
+          <!-- Results -->
+          <div class="max-h-80 overflow-y-auto py-2">
+            <template v-if="filtered.length">
+              <template v-for="[group, items] in grouped" :key="group">
+                <p v-if="group" class="px-4 pt-3 pb-1 text-label-small font-medium tracking-wide text-on-surface-variant uppercase">
+                  {{ group }}
+                </p>
+                <button
+                  v-for="(item, i) in items"
+                  :key="item.id"
+                  type="button"
+                  :data-cmd-active="filtered.indexOf(item) === activeIndex || undefined"
+                  class="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors"
+                  :class="filtered.indexOf(item) === activeIndex ? 'bg-primary/12 text-primary' : 'text-on-surface hover:bg-on-surface/4'"
+                  @click="selectItem(item)"
+                  @pointerenter="activeIndex = filtered.indexOf(item)"
+                >
+                  <MIcon v-if="item.icon" :name="item.icon" :size="20" class="shrink-0 opacity-70" />
+                  <span class="flex-1 truncate text-body-medium">{{ item.label }}</span>
+                  <kbd v-if="item.shortcut" class="rounded bg-surface-container px-1.5 py-0.5 text-label-small text-on-surface-variant">
+                    {{ item.shortcut }}
+                  </kbd>
+                </button>
+              </template>
+            </template>
+            <p v-else class="px-4 py-6 text-center text-body-medium text-on-surface-variant">
+              {{ noResultsText }}
+            </p>
+          </div>
+
+          <!-- Footer -->
+          <div class="flex items-center gap-4 border-t border-outline-variant px-4 py-2">
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> navegar
+            </span>
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> seleccionar
+            </span>
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> cerrar
+            </span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.m3-cmd-enter-active,
+.m3-cmd-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-cmd-enter-from,
+.m3-cmd-leave-to {
+  opacity: 0;
+}
+.m3-cmd-enter-active .cmd-box,
+.m3-cmd-leave-active .cmd-box {
+  transition: transform 0.15s ease;
+}
+.m3-cmd-enter-from .cmd-box,
+.m3-cmd-leave-to .cmd-box {
+  transform: scale(0.95) translateY(-10px);
+}
+</style>