@m3ui-vue/m3ui-vue 0.3.1 → 0.4.1

package/src/components/MNotificationHost.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNotification } from '../composables/useNotification'
+import MIcon from './MIcon.vue'
+import MSpinner from './MSpinner.vue'
+
+const { notifications, position, dismiss } = useNotification()
+
+const isTop = computed(() => position.value.startsWith('top'))
+
+const containerClass = computed(() => {
+  const base = 'pointer-events-none fixed z-[300] flex flex-col'
+  switch (position.value) {
+    case 'top-left': return `${base} top-4 left-4 items-start`
+    case 'top-center': return `${base} top-4 left-1/2 -translate-x-1/2 items-center`
+    case 'top-right': return `${base} top-4 right-4 items-end`
+    case 'bottom-left': return `${base} bottom-4 left-4 items-start`
+    case 'bottom-right': return `${base} bottom-4 right-4 items-end`
+    default: return `${base} bottom-4 left-1/2 -translate-x-1/2 items-center`
+  }
+})
+
+const variantStyles: Record<string, { bg: string; icon: string; iconName: string }> = {
+  info: {
+    bg: 'bg-inverse-surface text-inverse-on-surface',
+    icon: 'text-inverse-on-surface/70',
+    iconName: 'info',
+  },
+  success: {
+    bg: 'bg-inverse-surface text-inverse-on-surface',
+    icon: 'text-[#4ade80]',
+    iconName: 'check_circle',
+  },
+  warning: {
+    bg: 'bg-inverse-surface text-inverse-on-surface',
+    icon: 'text-[#fcd34d]',
+    iconName: 'warning',
+  },
+  error: {
+    bg: 'bg-inverse-surface text-inverse-on-surface',
+    icon: 'text-[#f87171]',
+    iconName: 'error',
+  },
+}
+
+const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.info!
+</script>
+
+<template>
+  <div :class="containerClass">
+    <TransitionGroup :name="isTop ? 'm3-notif-top' : 'm3-notif-bot'">
+      <div v-for="n in notifications" :key="n.id" class="notif-row w-full min-w-56 max-w-sm">
+        <div
+          class="notif-inner pointer-events-auto flex items-center gap-2.5 rounded px-4 py-3 shadow-elevation-2"
+          :class="getStyle(n.variant).bg"
+        >
+          <MSpinner v-if="n.loading" :size="18" class="shrink-0" />
+          <MIcon
+            v-else
+            :name="n.icon ?? getStyle(n.variant).iconName"
+            :size="18"
+            class="shrink-0"
+            :class="getStyle(n.variant).icon"
+          />
+          <p class="flex-1 text-body-medium leading-snug">{{ n.message }}</p>
+          <div class="flex shrink-0 items-center gap-1">
+            <button
+              v-if="n.action"
+              type="button"
+              class="cursor-pointer rounded px-2 py-1 text-label-medium font-semibold text-inverse-primary transition-colors hover:bg-inverse-on-surface/10"
+              @click="n.action!.onClick(); dismiss(n.id)"
+            >
+              {{ n.action.label }}
+            </button>
+            <button
+              v-if="n.closable !== false"
+              type="button"
+              class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-inverse-on-surface/50 transition-colors hover:bg-inverse-on-surface/10"
+              @click="dismiss(n.id)"
+            >
+              <MIcon name="close" :size="16" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+.notif-row {
+  display: grid;
+  grid-template-rows: 1fr;
+  padding-bottom: 6px;
+}
+.notif-row > .notif-inner {
+  min-height: 0;
+}
+
+.m3-notif-bot-enter-active {
+  transition: grid-template-rows 200ms ease, padding-bottom 200ms ease;
+  overflow: hidden;
+}
+.m3-notif-bot-enter-active > .notif-inner {
+  transition: opacity 150ms ease, transform 200ms ease;
+}
+.m3-notif-bot-enter-from {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-notif-bot-enter-from > .notif-inner {
+  opacity: 0;
+  transform: translateY(12px) scale(0.95);
+}
+
+.m3-notif-bot-leave-active {
+  transition: grid-template-rows 250ms ease, padding-bottom 250ms ease;
+  overflow: hidden;
+}
+.m3-notif-bot-leave-active > .notif-inner {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-notif-bot-leave-to {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-notif-bot-leave-to > .notif-inner {
+  opacity: 0;
+  transform: scale(0.93);
+}
+
+.m3-notif-top-enter-active {
+  transition: grid-template-rows 200ms ease, padding-bottom 200ms ease;
+  overflow: hidden;
+}
+.m3-notif-top-enter-active > .notif-inner {
+  transition: opacity 150ms ease, transform 200ms ease;
+}
+.m3-notif-top-enter-from {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-notif-top-enter-from > .notif-inner {
+  opacity: 0;
+  transform: translateY(-12px) scale(0.95);
+}
+
+.m3-notif-top-leave-active {
+  transition: grid-template-rows 250ms ease, padding-bottom 250ms ease;
+  overflow: hidden;
+}
+.m3-notif-top-leave-active > .notif-inner {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-notif-top-leave-to {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-notif-top-leave-to > .notif-inner {
+  opacity: 0;
+  transform: scale(0.93);
+}
+</style>

package/src/components/MSelect.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, useId, onMounted, onUnmounted } from 'vue'
+import { computed, ref, useId, onMounted, onUnmounted, watch } from 'vue'
 import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
 
 export interface SelectOption {
   label: string
@@ -16,6 +18,7 @@ const props = withDefaults(
     label?: string
     placeholder?: string
     variant?: 'filled' | 'outlined'
+    mode?: 'docked' | 'modal'
     disabled?: boolean
     error?: string
     hint?: string
@@ -27,6 +30,7 @@ const props = withDefaults(
   {
     modelValue: undefined,
     variant: 'filled',
+    mode: 'docked',
     disabled: false,
     required: false,
     clearable: false,
@@ -35,8 +39,10 @@ const props = withDefaults(
 
 const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
 
+const locale = useLocale()
 const id = useId()
 const open = ref(false)
+const modalOpen = ref(false)
 const fieldEl = ref<HTMLElement | null>(null)
 const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
 const dropdownEl = ref<HTMLElement | null>(null)
@@ -68,6 +74,10 @@ function computeDropPos() {
 
 function toggle() {
   if (props.disabled) return
+  if (props.mode === 'modal') {
+    modalOpen.value = !modalOpen.value
+    return
+  }
   if (!open.value) computeDropPos()
   open.value = !open.value
 }
@@ -76,6 +86,7 @@ function select(opt: SelectOption) {
   if (opt.disabled) return
   emit('update:modelValue', opt.value)
   open.value = false
+  modalOpen.value = false
 }
 
 function onOutsideClick(e: MouseEvent) {
@@ -85,23 +96,14 @@ function onOutsideClick(e: MouseEvent) {
 
 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()
+  open.value = false
 }
 
 function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') { open.value = false; return }
+  if (e.key === 'Escape') { open.value = false; modalOpen.value = false; return }
   if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); return }
-  if (!open.value) return
+  if (!open.value && !modalOpen.value) return
   const opts = props.options.filter((o) => !o.disabled)
   const idx = opts.findIndex((o) => eq(o.value, props.modelValue))
   if (e.key === 'ArrowDown') {
@@ -116,6 +118,16 @@ function onKeydown(e: KeyboardEvent) {
   }
 }
 
+watch(modalOpen, (v) => {
+  if (v) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+function closeModal() { modalOpen.value = false }
+
 onMounted(() => {
   document.addEventListener('mousedown', onOutsideClick)
   window.addEventListener('scroll', onScroll, true)
@@ -123,6 +135,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('mousedown', onOutsideClick)
   window.removeEventListener('scroll', onScroll, true)
+  document.body.style.overflow = ''
 })
 
 const triggerClasses = computed(() => {
@@ -226,9 +239,10 @@ const labelClasses = computed(() => {
       <!-- Arrow icon -->
       <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 flex h-6 items-center">
         <MIcon
-          :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
+          name="arrow_drop_down"
           :size="24"
           class="text-on-surface-variant transition-transform duration-200"
+          :class="open || modalOpen ? 'rotate-180' : ''"
         />
       </div>
     </div>
@@ -237,7 +251,7 @@ const labelClasses = computed(() => {
     <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 -->
+  <!-- Docked dropdown -->
   <Teleport to="body">
     <Transition
       enter-active-class="transition-[opacity,transform] duration-150"
@@ -248,7 +262,7 @@ const labelClasses = computed(() => {
       leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
     >
       <div
-        v-if="open"
+        v-if="open && mode === 'docked'"
         ref="dropdownEl"
         class="fixed z-500 max-h-60 overflow-auto rounded-sm bg-surface-container py-1 shadow-elevation-2"
         :style="dropPos"
@@ -282,5 +296,74 @@ const labelClasses = computed(() => {
         </p>
       </div>
     </Transition>
+
+    <!-- Modal -->
+    <Transition name="m3-select-modal">
+      <div
+        v-if="modalOpen && mode === 'modal'"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+        @click.self="closeModal"
+      >
+        <div class="select-modal-box flex max-h-[80vh] w-full max-w-sm flex-col overflow-hidden rounded-[28px] bg-surface-container-high shadow-elevation-3">
+          <!-- Header -->
+          <div class="flex items-center justify-between px-6 pt-6 pb-4">
+            <h2 class="text-headline-small text-on-surface">{{ label || placeholder }}</h2>
+            <MIconButton icon="close" :label="locale.close" @click="closeModal" />
+          </div>
+
+          <div class="h-px bg-outline-variant" />
+
+          <!-- Options list -->
+          <div class="flex-1 overflow-y-auto py-2">
+            <div
+              v-for="(opt, i) in options"
+              :key="i"
+              class="flex cursor-pointer items-center gap-4 px-6 py-3.5 text-body-large transition-colors"
+              :class="[
+                opt.disabled
+                  ? 'cursor-not-allowed opacity-38 text-on-surface'
+                  : 'text-on-surface hover:bg-on-surface/8',
+                eq(opt.value, modelValue) ? 'bg-primary/8' : '',
+              ]"
+              @click="select(opt)"
+            >
+              <MIcon
+                :name="eq(opt.value, modelValue) ? 'radio_button_checked' : 'radio_button_unchecked'"
+                :size="20"
+                :class="eq(opt.value, modelValue) ? 'text-primary' : 'text-on-surface-variant'"
+              />
+              <span :class="eq(opt.value, modelValue) ? 'text-primary font-medium' : ''">
+                {{ opt.label }}
+              </span>
+            </div>
+            <p
+              v-if="!options.length"
+              class="px-6 py-4 text-center text-body-medium text-on-surface-variant"
+            >
+              Sin opciones
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </Teleport>
 </template>
+
+<style scoped>
+.m3-select-modal-enter-active,
+.m3-select-modal-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-select-modal-enter-from,
+.m3-select-modal-leave-to {
+  opacity: 0;
+}
+.m3-select-modal-enter-active .select-modal-box,
+.m3-select-modal-leave-active .select-modal-box {
+  transition: transform 0.15s ease;
+}
+.m3-select-modal-enter-from .select-modal-box,
+.m3-select-modal-leave-to .select-modal-box {
+  transform: scale(0.95);
+}
+</style>