@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MSelect.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { computed, ref, useId, onMounted, onUnmounted } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number | null
+    options: { label: string; value: string | number; disabled?: boolean }[]
+    label?: string
+    placeholder?: string
+    variant?: 'filled' | 'outlined'
+    disabled?: boolean
+    error?: string
+    hint?: string
+    required?: boolean
+    leadingIcon?: string
+    fieldBg?: string
+  }>(),
+  {
+    modelValue: null,
+    variant: 'filled',
+    disabled: false,
+    required: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string | number] }>()
+
+const id = useId()
+const open = ref(false)
+const fieldEl = ref<HTMLElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
+const dropdownEl = ref<HTMLElement | null>(null)
+const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
+
+const hasValue = computed(() => props.modelValue !== null && props.modelValue !== '')
+const selectedLabel = computed(
+  () => props.options.find((o) => o.value === props.modelValue)?.label ?? '',
+)
+
+function computeDropPos() {
+  if (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  const spaceBelow = window.innerHeight - rect.bottom - 8
+  const dropH = Math.min(240, props.options.length * 52 + 8)
+  const openAbove = spaceBelow < dropH && rect.top > dropH
+  dropPos.value = {
+    top: openAbove ? `${rect.top - 4 - dropH}px` : `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+  }
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (!open.value) computeDropPos()
+  open.value = !open.value
+}
+
+function select(opt: { value: string | number; disabled?: boolean }) {
+  if (opt.disabled) return
+  emit('update:modelValue', opt.value)
+  open.value = false
+}
+
+function onOutsideClick(e: MouseEvent) {
+  const t = e.target as Node
+  if (!fieldEl.value?.contains(t) && !dropdownEl.value?.contains(t)) open.value = false
+}
+
+function onScroll(e: Event) {
+  if (!open.value) return
+  // Scrolling inside the dropdown list itself — do nothing
+  if (dropdownEl.value?.contains(e.target as Node)) return
+  // Recompute position to track the trigger element as the page scrolls
+  if (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  // Only close if the trigger has scrolled completely out of the viewport
+  if (rect.bottom < 0 || rect.top > window.innerHeight) {
+    open.value = false
+    return
+  }
+  computeDropPos()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') { open.value = false; return }
+  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); return }
+  if (!open.value) return
+  const opts = props.options.filter((o) => !o.disabled)
+  const idx = opts.findIndex((o) => o.value === props.modelValue)
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    const next = opts[(idx + 1) % opts.length]
+    if (next) emit('update:modelValue', next.value)
+  }
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    const prev = opts[(idx - 1 + opts.length) % opts.length]
+    if (prev) emit('update:modelValue', prev.value)
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onOutsideClick)
+  window.addEventListener('scroll', onScroll, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onOutsideClick)
+  window.removeEventListener('scroll', onScroll, true)
+})
+
+const triggerClasses = computed(() => {
+  const pl = props.leadingIcon ? 'pl-12' : 'pl-4'
+  const base = [
+    'flex w-full cursor-pointer items-center pr-10 text-body-large transition-[border-color,border-width] duration-150',
+    pl,
+  ]
+
+  if (props.variant === 'outlined') {
+    return [
+      ...base,
+      'h-14 rounded-sm border bg-transparent',
+      open.value
+        ? (props.error ? 'border-2 border-error' : 'border-2 border-primary')
+        : (props.error ? 'border-error' : 'border-outline hover:border-on-surface'),
+    ].join(' ')
+  }
+
+  return [
+    ...base,
+    'h-14 rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2',
+    open.value
+      ? (props.error ? 'border-b-2 border-error' : 'border-b-2 border-primary')
+      : (props.error ? 'border-error' : 'border-on-surface-variant hover:border-on-surface'),
+  ].join(' ')
+})
+
+const isFloated = computed(() => hasValue.value || open.value)
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? (props.variant === 'outlined' ? 'left-11' : 'left-12')
+    : (props.variant === 'outlined' ? 'left-3' : 'left-4')
+
+  const floated = props.variant === 'outlined'
+    ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
+    : 'top-2 translate-y-0 text-label-small'
+
+  const unFloated = 'top-1/2 -translate-y-1/2 text-body-large'
+
+  return [
+    'pointer-events-none absolute right-10 truncate transition-all duration-200',
+    left,
+    isFloated.value ? floated : unFloated,
+    open.value
+      ? (props.error ? 'text-error' : 'text-primary')
+      : (props.error ? 'text-error' : 'text-on-surface-variant'),
+  ].join(' ')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      ref="fieldEl"
+      class="relative"
+      :class="variant === 'outlined' ? 'mt-2' : ''"
+      :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
+    >
+      <!-- Leading icon -->
+      <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>
+
+      <!-- Custom trigger -->
+      <div
+        :id="id"
+        :tabindex="disabled ? -1 : 0"
+        role="combobox"
+        :aria-expanded="open"
+        :aria-disabled="disabled"
+        :class="[triggerClasses, disabled ? 'pointer-events-none opacity-[0.38]' : '']"
+        @click="toggle"
+        @keydown="onKeydown"
+      >
+        <span v-if="hasValue" class="text-on-surface">{{ selectedLabel }}</span>
+      </div>
+
+      <!-- Floating label -->
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <!-- Arrow icon -->
+      <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
+        <MIcon
+          :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :size="24"
+          class="text-on-surface-variant transition-transform duration-200"
+        />
+      </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>
+
+  <!-- Dropdown teleported to body to escape overflow clipping -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-[opacity,transform] duration-150"
+      enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition-[opacity,transform] duration-100"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+    >
+      <div
+        v-if="open"
+        ref="dropdownEl"
+        class="fixed z-[500] max-h-60 overflow-auto rounded-sm bg-surface-container py-1 shadow-elevation-2"
+        :style="dropPos"
+      >
+        <div
+          v-for="opt in options"
+          :key="opt.value"
+          class="flex cursor-pointer items-center gap-3 px-4 py-3 text-body-large"
+          :class="[
+            opt.disabled
+              ? 'cursor-not-allowed opacity-38 text-on-surface'
+              : 'text-on-surface hover:bg-on-surface/8',
+            opt.value === modelValue ? 'bg-primary/8 text-primary font-medium' : '',
+          ]"
+          @click="select(opt)"
+        >
+          <MIcon
+            v-if="opt.value === modelValue"
+            name="check"
+            :size="18"
+            class="shrink-0 text-primary"
+          />
+          <span v-else class="w-[18px] shrink-0" />
+          {{ opt.label }}
+        </div>
+        <p
+          v-if="!options.length"
+          class="px-4 py-3 text-center text-body-small text-on-surface-variant"
+        >
+          Sin opciones
+        </p>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MSideSheet.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+withDefaults(defineProps<{
+  modelValue: boolean
+  title?: string
+  width?: string
+}>(), { width: 'w-80' })
+
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+const close = () => emit('update:modelValue', false)
+
+const dragX = ref(0)
+const dragging = ref(false)
+let startX = 0
+
+function onEdgePointerDown(e: PointerEvent) {
+  dragging.value = true
+  startX = e.clientX
+  dragX.value = 0
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+}
+function onEdgePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragX.value = Math.max(0, e.clientX - startX)
+}
+function onEdgePointerUp() {
+  if (dragX.value > 100) close()
+  dragging.value = false
+  dragX.value = 0
+}
+
+const panelStyle = computed(() => ({
+  transform: `translateX(${dragX.value}px)`,
+  transition: dragging.value ? 'none' : undefined,
+}))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="ss" :duration="{ enter: 320, leave: 280 }">
+      <div v-if="modelValue" class="fixed inset-0 z-[200] flex justify-end">
+        <!-- Scrim -->
+        <div class="ss-scrim absolute inset-0 bg-black/40" @click="close" />
+
+        <!-- Panel -->
+        <aside
+          class="ss-panel relative flex h-full flex-col bg-surface-container-low shadow-elevation-3"
+          :class="[width, 'max-w-[90vw]']"
+          :style="panelStyle"
+        >
+          <!-- Drag edge -->
+          <div
+            class="absolute top-0 left-0 h-full w-3 cursor-ew-resize touch-none"
+            @pointerdown="onEdgePointerDown"
+            @pointermove="onEdgePointerMove"
+            @pointerup="onEdgePointerUp"
+          />
+
+          <!-- Header -->
+          <div v-if="title || $slots.header" class="flex shrink-0 items-center justify-between border-b border-outline-variant px-6 py-4">
+            <slot name="header">
+              <h2 class="text-title-large text-on-surface">{{ title }}</h2>
+            </slot>
+            <button
+              type="button"
+              class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8"
+              @click="close"
+            >
+              <MIcon name="close" :size="20" />
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto px-6 py-4">
+            <slot />
+          </div>
+
+          <!-- Actions -->
+          <div v-if="$slots.actions" class="shrink-0 border-t border-outline-variant px-6 py-4">
+            <slot name="actions" />
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ss-scrim {
+  transition: opacity 280ms ease;
+}
+.ss-enter-from .ss-scrim,
+.ss-leave-to .ss-scrim {
+  opacity: 0;
+}
+
+.ss-panel {
+  transition:
+    transform 320ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 240ms ease;
+}
+.ss-enter-from .ss-panel {
+  transform: translateX(40%);
+  opacity: 0;
+}
+.ss-leave-to .ss-panel {
+  transform: translateX(100%) !important;
+  opacity: 0;
+}
+</style>

package/src/components/MSkeleton.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded'
+  width?: string
+  height?: string
+  lines?: number
+  animation?: 'pulse' | 'wave' | 'none'
+}>(), {
+  variant: 'text',
+  animation: 'pulse',
+  lines: 1,
+})
+</script>
+
+<template>
+  <!-- Multi-line text skeleton -->
+  <div v-if="variant === 'text' && lines > 1" class="flex flex-col gap-2.5">
+    <div
+      v-for="i in lines"
+      :key="i"
+      class="h-3.5 rounded-full bg-on-surface/10"
+      :class="animation === 'pulse' ? 'animate-pulse' : animation === 'wave' ? 'skeleton-wave' : ''"
+      :style="{ width: i === lines ? '60%' : (width ?? '100%') }"
+    />
+  </div>
+
+  <!-- Single element -->
+  <div
+    v-else
+    class="bg-on-surface/10"
+    :class="[
+      variant === 'circular' ? 'rounded-full' : variant === 'rounded' ? 'rounded-lg' : variant === 'text' ? 'rounded-full' : 'rounded-sm',
+      animation === 'pulse' ? 'animate-pulse' : animation === 'wave' ? 'skeleton-wave' : '',
+    ]"
+    :style="{
+      width: width ?? (variant === 'circular' ? '40px' : '100%'),
+      height: height ?? (variant === 'circular' ? '40px' : variant === 'text' ? '14px' : '100px'),
+    }"
+  />
+</template>
+
+<style scoped>
+@keyframes skeleton-wave-move {
+  0%   { transform: translateX(-100%); }
+  60%  { transform: translateX(100%); }
+  100% { transform: translateX(100%); }
+}
+.skeleton-wave {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);
+  opacity: 0.06;
+  animation: skeleton-wave-move 1.8s ease-in-out infinite;
+}
+</style>

package/src/components/MSlider.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    showValue?: boolean;
+    color?: "primary" | "secondary" | "tertiary" | "error";
+  }>(),
+  {
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    showValue: false,
+    color: "primary",
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [number];
+}>();
+
+const trackEl = ref<HTMLElement>();
+const dragging = ref(false);
+
+const pct = computed(() => {
+  const range = props.max - props.min;
+  return range === 0 ? 0 : ((props.modelValue - props.min) / range) * 100;
+});
+
+const colors: Record<string, { active: string; inactive: string; thumb: string }> = {
+  primary: {
+    active: "bg-primary",
+    inactive: "bg-primary-container",
+    thumb: "bg-primary",
+  },
+  secondary: {
+    active: "bg-secondary",
+    inactive: "bg-secondary-container",
+    thumb: "bg-secondary",
+  },
+  tertiary: {
+    active: "bg-tertiary",
+    inactive: "bg-tertiary-container",
+    thumb: "bg-tertiary",
+  },
+  error: {
+    active: "bg-error",
+    inactive: "bg-error-container",
+    thumb: "bg-error",
+  },
+};
+
+function clamp(v: number) {
+  const stepped = Math.round((v - props.min) / props.step) * props.step + props.min;
+
+  return Math.max(props.min, Math.min(props.max, stepped));
+}
+
+function valueFromX(clientX: number) {
+  if (!trackEl.value) return props.modelValue;
+
+  const rect = trackEl.value.getBoundingClientRect();
+
+  const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+
+  return clamp(props.min + ratio * (props.max - props.min));
+}
+
+function onPointerDown(e: PointerEvent) {
+  if (props.disabled) return;
+
+  e.preventDefault();
+
+  dragging.value = true;
+
+  emit("update:modelValue", valueFromX(e.clientX));
+
+  window.addEventListener("pointermove", onPointerMove);
+  window.addEventListener("pointerup", onPointerUp);
+  window.addEventListener("pointercancel", onPointerUp);
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!dragging.value) return;
+
+  emit("update:modelValue", valueFromX(e.clientX));
+}
+
+function onPointerUp() {
+  dragging.value = false;
+
+  window.removeEventListener("pointermove", onPointerMove);
+  window.removeEventListener("pointerup", onPointerUp);
+  window.removeEventListener("pointercancel", onPointerUp);
+}
+
+function onKeyDown(e: KeyboardEvent) {
+  if (props.disabled) return;
+
+  const delta = {
+    ArrowRight: 1,
+    ArrowUp: 1,
+    ArrowLeft: -1,
+    ArrowDown: -1,
+  }[e.key];
+
+  if (delta !== undefined) {
+    e.preventDefault();
+
+    emit("update:modelValue", clamp(props.modelValue + delta * props.step));
+  }
+
+  if (e.key === "Home") {
+    e.preventDefault();
+    emit("update:modelValue", props.min);
+  }
+
+  if (e.key === "End") {
+    e.preventDefault();
+    emit("update:modelValue", props.max);
+  }
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener("pointermove", onPointerMove);
+  window.removeEventListener("pointerup", onPointerUp);
+  window.removeEventListener("pointercancel", onPointerUp);
+});
+
+const thumbStyle = computed(() => ({
+  left: `${pct.value}%`,
+  top: "50%",
+  transform: `translateX(-50%) translateY(-50%) scale(${dragging.value ? 1.15 : 1})`,
+  transition: dragging.value ? "transform 80ms ease" : "left 75ms ease, transform 80ms ease",
+}));
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 select-none">
+    <div v-if="label || showValue" class="flex items-center justify-between">
+      <span v-if="label" class="text-label-large text-on-surface">
+        {{ label }}
+      </span>
+
+      <span v-if="showValue" class="tabular-nums text-label-large text-on-surface-variant">
+        {{ modelValue }}
+      </span>
+    </div>
+
+    <div
+      ref="trackEl"
+      role="slider"
+      tabindex="0"
+      :aria-valuenow="modelValue"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-disabled="disabled || undefined"
+      class="relative flex h-10 w-full touch-none cursor-pointer items-center outline-none"
+      :class="disabled && 'cursor-not-allowed opacity-[0.38]'"
+      @pointerdown="onPointerDown"
+      @keydown="onKeyDown"
+    >
+      <div class="relative h-1 w-full rounded-full" :class="colors[color]!.inactive">
+        <div
+          class="h-full rounded-full"
+          :class="colors[color]!.active"
+          :style="{
+            width: `${pct}%`,
+            transition: dragging ? 'none' : 'width 75ms ease',
+          }"
+        />
+      </div>
+
+      <div
+        class="pointer-events-none absolute h-5 w-5 rounded-full shadow-elevation-1"
+        :class="colors[color]!.thumb"
+        :style="thumbStyle"
+      />
+    </div>
+  </div>
+</template>