@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MGrid.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+    sm?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+    md?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+    lg?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+    xl?: 1 | 2 | 3 | 4 | 5 | 6 | 12
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    alignItems?: 'start' | 'center' | 'end' | 'stretch'
+  }>(),
+  { cols: 1, gap: 'md', alignItems: 'stretch' },
+)
+
+const colClasses: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  12: 'grid-cols-12',
+}
+
+const smColClasses: Record<number, string> = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+  12: 'sm:grid-cols-12',
+}
+
+const mdColClasses: Record<number, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  12: 'md:grid-cols-12',
+}
+
+const lgColClasses: Record<number, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+  12: 'lg:grid-cols-12',
+}
+
+const xlColClasses: Record<number, string> = {
+  1: 'xl:grid-cols-1',
+  2: 'xl:grid-cols-2',
+  3: 'xl:grid-cols-3',
+  4: 'xl:grid-cols-4',
+  5: 'xl:grid-cols-5',
+  6: 'xl:grid-cols-6',
+  12: 'xl:grid-cols-12',
+}
+
+const gapClasses: Record<string, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const alignClasses: Record<string, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+}
+
+const classes = computed(() => [
+  'grid',
+  colClasses[props.cols],
+  props.sm && smColClasses[props.sm],
+  props.md && mdColClasses[props.md],
+  props.lg && lgColClasses[props.lg],
+  props.xl && xlColClasses[props.xl],
+  gapClasses[props.gap],
+  alignClasses[props.alignItems],
+])
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/src/components/MHotkeys.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from 'vue'
+
+export interface HotkeyBinding {
+  keys: string
+  label: string
+  handler: () => void
+  group?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    bindings: HotkeyBinding[]
+    showOverlay?: boolean
+  }>(),
+  { showOverlay: false },
+)
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent)
+
+function formatKey(raw: string): string {
+  return raw
+    .replace(/mod/gi, isMac ? '⌘' : 'Ctrl')
+    .replace(/ctrl/gi, isMac ? '⌃' : 'Ctrl')
+    .replace(/alt/gi, isMac ? '⌥' : 'Alt')
+    .replace(/shift/gi, isMac ? '⇧' : 'Shift')
+    .replace(/meta/gi, '⌘')
+    .replace(/enter/gi, '↵')
+    .replace(/escape/gi, 'Esc')
+    .replace(/backspace/gi, '⌫')
+    .replace(/delete/gi, '⌦')
+    .replace(/arrowup/gi, '↑')
+    .replace(/arrowdown/gi, '↓')
+    .replace(/arrowleft/gi, '←')
+    .replace(/arrowright/gi, '→')
+}
+
+function parseCombo(keys: string) {
+  return keys.split('+').map(k => k.trim().toLowerCase())
+}
+
+function matchesEvent(combo: string[], e: KeyboardEvent): boolean {
+  const modifiers = { ctrl: e.ctrlKey, alt: e.altKey, shift: e.shiftKey, meta: e.metaKey, mod: isMac ? e.metaKey : e.ctrlKey }
+  const key = e.key.toLowerCase()
+
+  for (const part of combo) {
+    if (part in modifiers) {
+      if (!modifiers[part as keyof typeof modifiers]) return false
+    } else if (key !== part) {
+      return false
+    }
+  }
+
+  for (const [mod, active] of Object.entries(modifiers)) {
+    if (active && !combo.includes(mod)) return false
+  }
+
+  return true
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const tag = (e.target as HTMLElement).tagName
+  const editable = tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement).isContentEditable
+
+  for (const binding of props.bindings) {
+    if (binding.disabled) continue
+    const combo = parseCombo(binding.keys)
+    const hasModifier = combo.some(k => ['ctrl', 'alt', 'shift', 'meta', 'mod'].includes(k))
+    if (!hasModifier && editable) continue
+    if (matchesEvent(combo, e)) {
+      e.preventDefault()
+      binding.handler()
+      return
+    }
+  }
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
+
+const grouped = () => {
+  const map = new Map<string, HotkeyBinding[]>()
+  for (const b of props.bindings) {
+    const g = b.group ?? ''
+    if (!map.has(g)) map.set(g, [])
+    map.get(g)!.push(b)
+  }
+  return map
+}
+</script>
+
+<template>
+  <div v-if="showOverlay" class="flex flex-col gap-4">
+    <template v-for="[group, bindings] in grouped()" :key="group">
+      <div>
+        <p v-if="group" class="mb-2 text-label-small font-medium tracking-wide text-on-surface-variant uppercase">
+          {{ group }}
+        </p>
+        <div class="flex flex-col gap-1">
+          <div
+            v-for="b in bindings"
+            :key="b.keys"
+            class="flex items-center justify-between rounded-lg px-3 py-2 transition-colors hover:bg-on-surface/4"
+            :class="b.disabled && 'opacity-38'"
+          >
+            <span class="text-body-medium text-on-surface">{{ b.label }}</span>
+            <div class="flex items-center gap-0.5">
+              <kbd
+                v-for="(k, ki) in b.keys.split('+')"
+                :key="ki"
+                class="inline-flex min-w-[24px] items-center justify-center rounded bg-surface-container px-1.5 py-0.5 text-center text-label-small font-medium text-on-surface-variant"
+              >
+                {{ formatKey(k.trim()) }}
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/MIcon.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ name: string; size?: number }>(), { size: 24 })
+</script>
+
+<template>
+  <span class="material-symbols-outlined leading-none" :style="{ fontSize: `${size}px` }">{{
+    name
+  }}</span>
+</template>

package/src/components/MIconButton.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon: string
+    label: string
+    variant?: 'standard' | 'filled' | 'tonal' | 'outlined'
+    disabled?: boolean
+    size?: number
+  }>(),
+  {
+    variant: 'standard',
+    disabled: false,
+    size: 40,
+  },
+)
+
+const base =
+  'inline-flex shrink-0 items-center justify-center rounded-full transition-colors duration-150 cursor-pointer ' +
+  'disabled:cursor-not-allowed disabled:opacity-[0.38]'
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'filled':
+      return 'bg-primary text-on-primary hover:shadow-elevation-1'
+    case 'tonal':
+      return 'bg-secondary-container text-on-secondary-container hover:shadow-elevation-1'
+    case 'outlined':
+      return 'border border-outline text-on-surface-variant hover:bg-on-surface/8'
+    default:
+      return 'text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12'
+  }
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="label"
+    :title="label"
+    :disabled="disabled"
+    :class="[base, variantClasses]"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+  >
+    <MIcon :name="icon" :size="Math.round(size * 0.55)" />
+  </button>
+</template>

package/src/components/MInfiniteScroll.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import MSpinner from './MSpinner.vue'
+
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean
+    disabled?: boolean
+    threshold?: number
+    loadingText?: string
+    endText?: string
+    ended?: boolean
+  }>(),
+  {
+    loading: false,
+    disabled: false,
+    threshold: 100,
+    loadingText: 'Cargando...',
+    endText: 'No hay más elementos',
+    ended: false,
+  },
+)
+
+const emit = defineEmits<{ load: [] }>()
+
+const sentinelRef = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+function createObserver() {
+  if (observer) observer.disconnect()
+  if (props.disabled || props.ended) return
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0]
+      if (entry?.isIntersecting && !props.loading && !props.ended && !props.disabled) {
+        emit('load')
+      }
+    },
+    { rootMargin: `0px 0px ${props.threshold}px 0px` },
+  )
+
+  if (sentinelRef.value) observer.observe(sentinelRef.value)
+}
+
+onMounted(createObserver)
+
+watch(() => [props.disabled, props.ended], createObserver)
+
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <div>
+    <slot />
+
+    <div ref="sentinelRef" class="flex items-center justify-center py-4">
+      <div v-if="loading" class="flex items-center gap-3">
+        <MSpinner :size="20" class="text-primary" />
+        <span class="text-body-medium text-on-surface-variant">{{ loadingText }}</span>
+      </div>
+      <p v-else-if="ended" class="text-body-small text-on-surface-variant">
+        {{ endText }}
+      </p>
+      <slot v-else name="idle" />
+    </div>
+  </div>
+</template>

package/src/components/MJsonEditor.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import MCodeEditor from './MCodeEditor.vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: unknown
+    readonly?: boolean
+    minHeight?: string
+    maxHeight?: string
+  }>(),
+  {
+    readonly: false,
+    minHeight: '200px',
+    maxHeight: '600px',
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
+
+const rawText = ref(JSON.stringify(props.modelValue, null, 2))
+const parseError = ref<string | null>(null)
+
+const isValid = computed(() => !parseError.value)
+
+watch(() => props.modelValue, (val) => {
+  const incoming = JSON.stringify(val, null, 2)
+  if (incoming !== rawText.value) {
+    rawText.value = incoming
+    parseError.value = null
+  }
+})
+
+function onTextUpdate(text: string) {
+  rawText.value = text
+  try {
+    const parsed = JSON.parse(text)
+    parseError.value = null
+    emit('update:modelValue', parsed)
+  } catch (e) {
+    parseError.value = (e as Error).message
+  }
+}
+
+function formatJson() {
+  try {
+    const parsed = JSON.parse(rawText.value)
+    rawText.value = JSON.stringify(parsed, null, 2)
+    parseError.value = null
+    emit('update:modelValue', parsed)
+  } catch {
+    // keep error state
+  }
+}
+
+function minifyJson() {
+  try {
+    const parsed = JSON.parse(rawText.value)
+    rawText.value = JSON.stringify(parsed)
+    parseError.value = null
+    emit('update:modelValue', parsed)
+  } catch {
+    // keep error state
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-0">
+    <MCodeEditor
+      :model-value="rawText"
+      language="json"
+      :readonly="readonly"
+      :min-height="minHeight"
+      :max-height="maxHeight"
+      @update:model-value="onTextUpdate"
+    >
+      <template #actions>
+        <div class="flex items-center gap-2">
+          <!-- Validation badge -->
+          <span
+            class="flex items-center gap-1 rounded-full px-2.5 py-0.5 text-label-small"
+            :class="isValid ? 'bg-success-container text-on-success-container' : 'bg-error-container text-on-error-container'"
+          >
+            <MIcon :name="isValid ? 'check_circle' : 'error'" :size="14" />
+            {{ isValid ? 'Válido' : 'Inválido' }}
+          </span>
+
+          <button
+            v-if="!readonly"
+            type="button"
+            title="Formatear"
+            class="flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
+            @click="formatJson"
+          >
+            <MIcon name="format_indent_increase" :size="16" />
+            Formatear
+          </button>
+          <button
+            v-if="!readonly"
+            type="button"
+            title="Minificar"
+            class="flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
+            @click="minifyJson"
+          >
+            <MIcon name="compress" :size="16" />
+            Minificar
+          </button>
+        </div>
+      </template>
+    </MCodeEditor>
+
+    <p v-if="parseError" class="px-3 py-1.5 text-body-small text-error">
+      {{ parseError }}
+    </p>
+  </div>
+</template>

package/src/components/MJsonViewer.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    data: unknown
+    rootName?: string
+    expandDepth?: number
+    /** @internal — used by recursive instances */
+    _depth?: number
+  }>(),
+  { rootName: 'root', expandDepth: 2, _depth: 0 },
+)
+
+const expanded = ref(props._depth < props.expandDepth)
+
+const dataType = computed(() => {
+  if (props.data === null) return 'null'
+  if (Array.isArray(props.data)) return 'array'
+  return typeof props.data
+})
+
+const isExpandable = computed(() => dataType.value === 'object' || dataType.value === 'array')
+
+const entries = computed(() => {
+  if (dataType.value === 'array') {
+    return (props.data as unknown[]).map((v, i) => ({ key: String(i), value: v }))
+  }
+  if (dataType.value === 'object' && props.data) {
+    return Object.entries(props.data as Record<string, unknown>).map(([k, v]) => ({ key: k, value: v }))
+  }
+  return []
+})
+
+const childCount = computed(() => entries.value.length)
+
+const bracketOpen = computed(() => (dataType.value === 'array' ? '[' : '{'))
+const bracketClose = computed(() => (dataType.value === 'array' ? ']' : '}'))
+
+function valueClass(val: unknown) {
+  if (val === null) return 'text-on-surface-variant italic'
+  switch (typeof val) {
+    case 'string': return 'text-success'
+    case 'number': return 'text-primary'
+    case 'boolean': return 'text-tertiary'
+    default: return 'text-on-surface'
+  }
+}
+
+function formatValue(val: unknown) {
+  if (typeof val === 'string') return `"${val}"`
+  if (val === null) return 'null'
+  if (val === undefined) return 'undefined'
+  return String(val)
+}
+</script>
+
+<template>
+  <div class="font-mono text-body-small leading-relaxed" :class="{ 'rounded-lg border border-outline-variant bg-surface-container-lowest p-3': _depth === 0 }">
+    <!-- Expandable node -->
+    <template v-if="isExpandable">
+      <button
+        type="button"
+        class="group inline-flex cursor-pointer items-center gap-0.5 rounded px-0.5 hover:bg-on-surface/[0.06]"
+        @click="expanded = !expanded"
+      >
+        <MIcon
+          :name="expanded ? 'expand_more' : 'chevron_right'"
+          :size="16"
+          class="text-on-surface-variant transition-transform duration-100"
+        />
+        <span v-if="_depth === 0 || rootName" class="text-tertiary">{{ _depth === 0 ? rootName : '' }}</span>
+        <span class="text-on-surface-variant">{{ bracketOpen }}</span>
+        <span v-if="!expanded" class="text-on-surface-variant/60">
+          {{ childCount }} {{ dataType === 'array' ? 'elementos' : 'campos' }}
+        </span>
+        <span v-if="!expanded" class="text-on-surface-variant">{{ bracketClose }}</span>
+      </button>
+
+      <div v-if="expanded" class="ml-5 border-l border-outline-variant/40 pl-2">
+        <div v-for="entry in entries" :key="entry.key" class="flex items-start">
+          <span class="shrink-0 text-primary">{{ dataType === 'array' ? '' : `"${entry.key}"` }}</span>
+          <span v-if="dataType !== 'array'" class="shrink-0 text-on-surface-variant mr-1">:</span>
+
+          <!-- Recursive child -->
+          <MJsonViewer
+            v-if="entry.value !== null && (typeof entry.value === 'object')"
+            :data="entry.value"
+            :root-name="entry.key"
+            :expand-depth="expandDepth"
+            :_depth="_depth + 1"
+          />
+          <!-- Primitive value -->
+          <span v-else :class="valueClass(entry.value)">{{ formatValue(entry.value) }}</span>
+        </div>
+      </div>
+      <span v-if="expanded" class="ml-5 text-on-surface-variant">{{ bracketClose }}</span>
+    </template>
+
+    <!-- Primitive root -->
+    <template v-else>
+      <span :class="valueClass(data)">{{ formatValue(data) }}</span>
+    </template>
+  </div>
+</template>