@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MMultiSelect.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { computed, ref, useId, onMounted, onUnmounted, nextTick } from 'vue'
+import MIcon from './MIcon.vue'
+import MCheckbox from './MCheckbox.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+export interface MultiSelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: (string | number)[]
+    options: MultiSelectOption[]
+    label?: string
+    placeholder?: string
+    variant?: 'filled' | 'outlined'
+    disabled?: boolean
+    error?: string
+    hint?: string
+    required?: boolean
+    leadingIcon?: string
+    fieldBg?: string
+    searchable?: boolean
+    maxChips?: number
+  }>(),
+  {
+    modelValue: () => [],
+    variant: 'filled',
+    disabled: false,
+    required: false,
+    searchable: true,
+    maxChips: 3,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
+
+const id = useId()
+const open = ref(false)
+const search = ref('')
+const fieldEl = ref<HTMLElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
+const dropdownEl = ref<HTMLElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null)
+const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
+
+const hasValue = computed(() => props.modelValue.length > 0)
+
+const filteredOptions = computed(() => {
+  if (!search.value) return props.options
+  const q = search.value.toLowerCase()
+  return props.options.filter((o) => o.label.toLowerCase().includes(q))
+})
+
+const visibleChips = computed(() =>
+  props.modelValue.slice(0, props.maxChips).map((v) => ({
+    value: v,
+    label: props.options.find((o) => o.value === v)?.label ?? String(v),
+  })),
+)
+
+const overflowCount = computed(() => Math.max(0, props.modelValue.length - props.maxChips))
+
+function toggle(value: string | number) {
+  const current = props.modelValue
+  if (current.includes(value)) {
+    emit('update:modelValue', current.filter((v) => v !== value))
+  } else {
+    emit('update:modelValue', [...current, value])
+  }
+}
+
+function removeChip(value: string | number, e: Event) {
+  e.stopPropagation()
+  emit('update:modelValue', props.modelValue.filter((v) => v !== value))
+}
+
+function computeDropPos() {
+  if (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  dropPos.value = {
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+  }
+}
+
+async function openDropdown() {
+  if (props.disabled) return
+  computeDropPos()
+  open.value = true
+  search.value = ''
+  await nextTick()
+  searchInput.value?.focus()
+}
+
+function close() {
+  open.value = false
+  search.value = ''
+}
+
+function onOutsideClick(e: MouseEvent) {
+  const t = e.target as Node
+  if (!fieldEl.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 (!fieldEl.value) return
+  const rect = fieldEl.value.getBoundingClientRect()
+  if (rect.bottom < 0 || rect.top > window.innerHeight) {
+    close()
+    return
+  }
+  computeDropPos()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onOutsideClick)
+  window.addEventListener('scroll', onScroll, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onOutsideClick)
+  window.removeEventListener('scroll', onScroll, true)
+})
+
+const triggerClasses = computed(() => {
+  const base = [
+    'flex min-h-[56px] w-full cursor-pointer items-center gap-1.5 flex-wrap',
+    'transition-[border-color,border-width] duration-150',
+    props.leadingIcon ? 'pl-12 pr-10' : 'pl-4 pr-10',
+  ]
+
+  if (props.variant === 'outlined') {
+    return [
+      ...base,
+      'rounded-sm border bg-transparent py-2',
+      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,
+    'rounded-t-sm bg-surface-container-highest border-b pt-7 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 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-3.5 translate-y-0 text-label-small'
+
+  const unFloated = 'top-1/2 -translate-y-1/2 text-body-large'
+  const active = open.value || hasValue.value
+
+  return [
+    'pointer-events-none absolute right-10 truncate transition-all duration-200',
+    left,
+    active ? 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"
+    >
+      <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>
+
+      <!-- Trigger field -->
+      <div
+        :id="id"
+        :class="triggerClasses"
+        role="button"
+        :tabindex="disabled ? -1 : 0"
+        :aria-expanded="open"
+        :aria-haspopup="true"
+        @click="open ? close() : openDropdown()"
+        @keydown.enter.prevent="open ? close() : openDropdown()"
+        @keydown.space.prevent="open ? close() : openDropdown()"
+        @keydown.escape="close()"
+      >
+        <template v-if="hasValue">
+          <span
+            v-for="chip in visibleChips"
+            :key="chip.value"
+            class="inline-flex items-center gap-1 rounded-full bg-secondary-container px-2 py-0.5 text-label-small text-on-secondary-container"
+          >
+            {{ chip.label }}
+            <button
+              type="button"
+              class="flex h-4 w-4 items-center justify-center rounded-full hover:bg-on-secondary-container/20"
+              @click="removeChip(chip.value, $event)"
+            >
+              <MIcon name="close" :size="12" />
+            </button>
+          </span>
+          <span
+            v-if="overflowCount > 0"
+            class="rounded-full bg-surface-container-high px-2 py-0.5 text-label-small text-on-surface-variant"
+          >
+            +{{ overflowCount }}
+          </span>
+        </template>
+        <span v-else-if="!open" class="text-body-large text-on-surface-variant opacity-0">
+          {{ placeholder }}
+        </span>
+      </div>
+
+      <label :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <div class="pointer-events-none absolute right-2 top-7 -translate-y-1/2">
+        <MIcon
+          :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :size="24"
+          class="text-on-surface-variant"
+        />
+      </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 shadow-elevation-2"
+        :style="dropPos"
+      >
+        <!-- Search -->
+        <div v-if="searchable" class="sticky top-0 bg-surface-container px-3 py-2">
+          <div class="flex items-center gap-2 rounded-full bg-surface-container-high px-3 py-1.5">
+            <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
+            <input
+              ref="searchInput"
+              v-model="search"
+              type="text"
+              placeholder="Buscar..."
+              class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col py-1">
+          <label
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            class="flex cursor-pointer items-center gap-3 px-4 py-2 hover:bg-on-surface/8"
+            :class="opt.disabled ? 'cursor-not-allowed opacity-38' : ''"
+          >
+            <MCheckbox
+              :model-value="modelValue.includes(opt.value)"
+              :disabled="opt.disabled"
+              @update:model-value="!opt.disabled && toggle(opt.value)"
+            />
+            <span class="text-body-large text-on-surface">{{ opt.label }}</span>
+          </label>
+          <p
+            v-if="filteredOptions.length === 0"
+            class="px-4 py-3 text-center text-body-small text-on-surface-variant"
+          >
+            Sin resultados
+          </p>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MNavigationBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+import MBadge from './MBadge.vue'
+
+export interface NavBarItem {
+  value: string | number
+  label: string
+  icon: string
+  badge?: number
+  badgeDot?: boolean
+}
+
+withDefaults(defineProps<{
+  modelValue: string | number
+  items: NavBarItem[]
+}>(), {})
+
+defineEmits<{ 'update:modelValue': [string | number] }>()
+</script>
+
+<template>
+  <nav class="flex h-20 w-full items-center justify-around border-t border-outline-variant bg-surface-container">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      type="button"
+      class="group flex flex-1 cursor-pointer flex-col items-center justify-center gap-1 self-stretch transition-colors focus-visible:outline-none"
+      :class="
+        item.value === modelValue
+          ? 'text-on-secondary-container'
+          : 'text-on-surface-variant'
+      "
+      @click="$emit('update:modelValue', item.value)"
+    >
+      <!-- Pill indicator with icon -->
+      <span
+        class="inline-flex h-8 items-center justify-center rounded-2xl transition-all duration-200"
+        :class="
+          item.value === modelValue
+            ? 'w-16 bg-secondary-container'
+            : 'w-0 bg-secondary-container/0 group-hover:w-16 group-hover:bg-on-surface/8'
+        "
+      >
+        <MBadge v-if="item.badge != null" :count="item.badge">
+          <MIcon :name="item.icon" :size="24" />
+        </MBadge>
+        <MBadge v-else-if="item.badgeDot" dot>
+          <MIcon :name="item.icon" :size="24" />
+        </MBadge>
+        <MIcon v-else :name="item.icon" :size="24" />
+      </span>
+
+      <!-- Label -->
+      <span
+        class="text-label-medium transition-[font-weight] duration-150"
+        :class="item.value === modelValue ? 'font-bold' : 'font-medium'"
+      >
+        {{ item.label }}
+      </span>
+    </button>
+  </nav>
+</template>

package/src/components/MNavigationDrawer.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface DrawerItem {
+  value: string | number
+  label: string
+  icon?: string
+  badge?: string | number
+  disabled?: boolean
+}
+
+export interface DrawerSection {
+  title?: string
+  items: DrawerItem[]
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  selected?: string | number
+  sections: DrawerSection[]
+  title?: string
+  modal?: boolean
+}>(), { modal: true })
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  select: [string | number]
+}>()
+
+function close() { emit('update:modelValue', false) }
+function select(item: DrawerItem) {
+  if (item.disabled) return
+  emit('select', item.value)
+  if (props.modal) close()
+}
+
+watch(() => props.modelValue, (open) => {
+  if (open) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <!-- Modal variant -->
+  <Teleport v-if="modal" to="body">
+    <Transition name="nd" :duration="{ enter: 300, leave: 280 }">
+      <div v-if="modelValue" class="fixed inset-0 z-[100] flex">
+        <!-- Scrim -->
+        <div class="nd-scrim absolute inset-0 bg-black/40" @click="close" />
+
+        <!-- Panel -->
+        <nav class="nd-panel relative flex h-full w-72 max-w-[85vw] flex-col bg-surface-container shadow-elevation-3">
+          <!-- Header -->
+          <div v-if="title || $slots.header" class="shrink-0 px-5 pt-6 pb-2">
+            <slot name="header">
+              <h2 class="text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
+            </slot>
+          </div>
+
+          <!-- Sections -->
+          <div class="flex-1 overflow-y-auto px-3 py-2">
+            <template v-for="(section, si) in sections" :key="si">
+              <div v-if="si > 0" class="my-2 border-t border-outline-variant" />
+              <p v-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+                {{ section.title }}
+              </p>
+              <button
+                v-for="item in section.items"
+                :key="item.value"
+                type="button"
+                class="flex w-full items-center gap-3 rounded-full px-4 py-3 text-left transition-colors focus-visible:outline-none"
+                :class="[
+                  item.disabled
+                    ? 'cursor-not-allowed opacity-[0.38]'
+                    : item.value === selected
+                      ? 'bg-secondary-container text-on-secondary-container'
+                      : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+                ]"
+                :disabled="item.disabled"
+                @click="select(item)"
+              >
+                <MIcon v-if="item.icon" :name="item.icon" :size="24" />
+                <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
+                <span
+                  v-if="item.badge != null"
+                  class="text-label-medium text-on-surface-variant"
+                >
+                  {{ item.badge }}
+                </span>
+              </button>
+            </template>
+          </div>
+        </nav>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Standard (inline) variant -->
+  <nav
+    v-else
+    class="flex h-full w-72 flex-col border-r border-outline-variant bg-surface"
+  >
+    <div v-if="title || $slots.header" class="shrink-0 px-5 pt-6 pb-2">
+      <slot name="header">
+        <h2 class="text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
+      </slot>
+    </div>
+    <div class="flex-1 overflow-y-auto px-3 py-2">
+      <template v-for="(section, si) in sections" :key="si">
+        <div v-if="si > 0" class="my-2 border-t border-outline-variant" />
+        <p v-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+          {{ section.title }}
+        </p>
+        <button
+          v-for="item in section.items"
+          :key="item.value"
+          type="button"
+          class="flex w-full items-center gap-3 rounded-full px-4 py-3 text-left transition-colors focus-visible:outline-none"
+          :class="[
+            item.disabled
+              ? 'cursor-not-allowed opacity-[0.38]'
+              : item.value === selected
+                ? 'bg-secondary-container text-on-secondary-container'
+                : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+          ]"
+          :disabled="item.disabled"
+          @click="select(item)"
+        >
+          <MIcon v-if="item.icon" :name="item.icon" :size="24" />
+          <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
+          <span v-if="item.badge != null" class="text-label-medium text-on-surface-variant">
+            {{ item.badge }}
+          </span>
+        </button>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.nd-scrim {
+  transition: opacity 280ms ease;
+}
+.nd-enter-from .nd-scrim,
+.nd-leave-to .nd-scrim {
+  opacity: 0;
+}
+
+.nd-panel {
+  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nd-enter-from .nd-panel,
+.nd-leave-to .nd-panel {
+  transform: translateX(-100%);
+}
+</style>

package/src/components/MNavigationRail.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+import MBadge from './MBadge.vue'
+
+export interface NavRailItem {
+  value: string | number
+  label: string
+  icon: string
+  badge?: number
+  badgeDot?: boolean
+  disabled?: boolean
+}
+
+withDefaults(defineProps<{
+  modelValue: string | number
+  items: NavRailItem[]
+  alignment?: 'top' | 'center' | 'bottom'
+}>(), { alignment: 'top' })
+
+defineEmits<{ 'update:modelValue': [string | number] }>()
+</script>
+
+<template>
+  <nav class="flex h-full w-20 flex-col items-center border-r border-outline-variant bg-surface">
+    <!-- FAB slot -->
+    <div v-if="$slots.fab" class="flex shrink-0 items-center justify-center pt-3 pb-2">
+      <slot name="fab" />
+    </div>
+
+    <!-- Items -->
+    <div
+      class="flex flex-1 flex-col items-center gap-1 py-3"
+      :class="{
+        'justify-start': alignment === 'top',
+        'justify-center': alignment === 'center',
+        'justify-end': alignment === 'bottom',
+      }"
+    >
+      <button
+        v-for="item in items"
+        :key="item.value"
+        type="button"
+        class="group flex w-full cursor-pointer flex-col items-center justify-center gap-1 px-3 py-2 focus-visible:outline-none"
+        :class="item.disabled ? 'cursor-not-allowed opacity-[0.38]' : ''"
+        :disabled="item.disabled"
+        @click="!item.disabled && $emit('update:modelValue', item.value)"
+      >
+        <!-- Pill indicator -->
+        <span
+          class="inline-flex h-8 items-center justify-center rounded-2xl transition-all duration-200"
+          :class="
+            item.value === modelValue
+              ? 'w-14 bg-secondary-container text-on-secondary-container'
+              : 'w-14 bg-transparent text-on-surface-variant group-hover:bg-on-surface/8'
+          "
+        >
+          <MBadge v-if="item.badge != null" :count="item.badge">
+            <MIcon :name="item.icon" :size="24" />
+          </MBadge>
+          <MBadge v-else-if="item.badgeDot" dot>
+            <MIcon :name="item.icon" :size="24" />
+          </MBadge>
+          <MIcon v-else :name="item.icon" :size="24" />
+        </span>
+
+        <!-- Label -->
+        <span
+          class="max-w-[56px] truncate text-center text-label-medium"
+          :class="
+            item.value === modelValue
+              ? 'font-bold text-on-surface'
+              : 'font-medium text-on-surface-variant'
+          "
+        >
+          {{ item.label }}
+        </span>
+      </button>
+    </div>
+  </nav>
+</template>

package/src/components/MPagination.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIconButton from './MIconButton.vue'
+
+const props = defineProps<{ page: number; perPage: number; total: number }>()
+const emit = defineEmits<{ 'update:page': [number] }>()
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)))
+
+const rangeLabel = computed(() => {
+  if (props.total === 0) return '0 resultados'
+  const from = (props.page - 1) * props.perPage + 1
+  const to = Math.min(props.page * props.perPage, props.total)
+  return `${from}-${to} de ${props.total}`
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-between gap-4 text-body-medium text-on-surface-variant">
+    <span>{{ rangeLabel }}</span>
+    <div class="flex items-center gap-2">
+      <span>Página {{ page }} de {{ totalPages }}</span>
+      <MIconButton
+        icon="chevron_left"
+        label="Página anterior"
+        :disabled="page <= 1"
+        @click="emit('update:page', page - 1)"
+      />
+      <MIconButton
+        icon="chevron_right"
+        label="Página siguiente"
+        :disabled="page >= totalPages"
+        @click="emit('update:page', page + 1)"
+      />
+    </div>
+  </div>
+</template>