@m3ui-vue/m3ui-vue 0.3.0 → 0.4.0

package/src/components/MListItem.vue

@@ -51,6 +51,7 @@ const isExpanded = computed(() => internalExpanded.value)
 const list = inject<{
   dense: ComputedRef<boolean>
   nav: ComputedRef<boolean>
+  segmented: ComputedRef<boolean>
   selectable: ComputedRef<boolean>
   selected: ComputedRef<string | number | null | undefined>
   dividers: ComputedRef<boolean | 'inset'>
@@ -102,18 +103,23 @@ const iconContainerClasses: Record<string, string> = {
 
 const isDense = computed(() => list?.dense.value ?? false)
 const isNav = computed(() => list?.nav.value ?? false)
+const isSegmented = computed(() => list?.segmented.value ?? false)
 const hasDivider = computed(() => list?.dividers.value ?? false)
 
 const containerClasses = computed(() => [
   'mli-row relative flex w-full items-center gap-4 text-left',
-  isNav.value ? 'rounded-full px-4' : 'px-4',
+  isSegmented.value
+    ? 'rounded-xl bg-surface-container px-4'
+    : isNav.value ? 'rounded-full px-4' : 'px-4',
   isDense.value
     ? 'py-1'
     : resolvedLines.value === 3 ? 'py-3' : 'py-2',
   isClickable.value && !props.disabled && 'cursor-pointer transition-colors duration-150 hover:bg-on-surface/8 active:bg-on-surface/12',
-  isActive.value && (isNav.value
+  isActive.value && (isSegmented.value
     ? 'bg-secondary-container text-on-secondary-container'
-    : 'bg-on-surface/8'),
+    : isNav.value
+      ? 'bg-secondary-container text-on-secondary-container'
+      : 'bg-on-surface/8'),
   props.disabled && 'opacity-[0.38] pointer-events-none',
 ])
 

package/src/components/MMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -48,11 +48,15 @@ function close() {
   open.value = false
 }
 
+provide('m-menu-close', close)
 defineExpose({ close, open })
 
 function onOutsideClick(e: MouseEvent) {
   const t = e.target as Node
-  if (!triggerEl.value?.contains(t) && !dropdownEl.value?.contains(t)) close()
+  if (triggerEl.value?.contains(t)) return
+  if (dropdownEl.value?.contains(t)) return
+  if ((t as Element).closest?.('.m3-submenu')) return
+  close()
 }
 
 function onScroll(e: Event) {
@@ -102,11 +106,12 @@ const origin = computed(() =>
       <div
         v-if="open"
         ref="dropdownEl"
-        class="fixed z-500 min-w-48 overflow-y-auto overflow-x-hidden rounded-xs bg-surface-container py-1 shadow-elevation-2"
+        class="fixed z-500 min-w-48 overflow-hidden rounded-lg bg-surface-container shadow-elevation-2"
         :style="{ ...dropStyle, transformOrigin: origin }"
-        @click="close"
       >
-        <slot />
+        <div class="overflow-y-auto py-1" :style="{ maxHeight: dropStyle.maxHeight }">
+          <slot :close="close" />
+        </div>
       </div>
     </Transition>
   </Teleport>

package/src/components/MMenuItem.vue

@@ -1,20 +1,103 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject, ref, useSlots } from 'vue'
 import MIcon from './MIcon.vue'
 
-const props = withDefaults(defineProps<{ icon?: string; to?: string | Record<string, any> }>(), {})
+const props = withDefaults(defineProps<{
+  icon?: string
+  to?: string | Record<string, any>
+  disabled?: boolean
+  danger?: boolean
+}>(), {
+  disabled: false,
+  danger: false,
+})
 
+const emit = defineEmits<{ click: [] }>()
+
+const slots = useSlots()
 const tag = computed(() => props.to ? 'RouterLink' : 'button')
+const hasChildren = computed(() => !!slots.children)
+const menuClose = inject<(() => void) | null>('m-menu-close', null)
+
+function handleClick() {
+  if (props.disabled || hasChildren.value) return
+  emit('click')
+  menuClose?.()
+}
+const showSub = ref(false)
+const itemEl = ref<HTMLElement>()
+const subStyle = ref<Record<string, string>>({})
+
+function onMouseEnter() {
+  if (!hasChildren.value || props.disabled) return
+  showSub.value = true
+  if (!itemEl.value) return
+  const rect = itemEl.value.getBoundingClientRect()
+  const right = rect.right + 200 > window.innerWidth
+  subStyle.value = {
+    position: 'fixed',
+    top: `${rect.top}px`,
+    ...(right
+      ? { right: `${window.innerWidth - rect.left}px` }
+      : { left: `${rect.right}px` }),
+    zIndex: '501',
+  }
+}
+
+function onMouseLeave(e: MouseEvent) {
+  const related = e.relatedTarget as Element | null
+  if (related?.closest('.m3-submenu')) return
+  showSub.value = false
+}
+
+function onSubLeave(e: MouseEvent) {
+  const related = e.relatedTarget as Element | null
+  if (related?.closest('.m3-submenu') || itemEl.value?.contains(related as Node)) return
+  showSub.value = false
+}
 </script>
 
 <template>
-  <component
-    :is="tag"
-    :to="to || undefined"
-    :type="to ? undefined : 'button'"
-    class="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left text-body-large text-on-surface hover:bg-on-surface/8"
+  <div
+    ref="itemEl"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
-    <MIcon v-if="icon" :name="icon" :size="20" class="text-on-surface-variant" />
-    <slot />
-  </component>
+    <component
+      :is="tag"
+      :to="to || undefined"
+      :type="to ? undefined : 'button'"
+      class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-body-large transition-colors"
+      :class="[
+        disabled ? 'cursor-not-allowed opacity-[0.38] text-on-surface' : 'cursor-pointer',
+        !disabled && danger ? 'text-error hover:bg-error/8' : '',
+        !disabled && !danger ? 'text-on-surface hover:bg-on-surface/8' : '',
+      ]"
+      :disabled="disabled || undefined"
+      @click="handleClick"
+    >
+      <MIcon v-if="icon" :name="icon" :size="20" class="shrink-0" :class="danger ? 'text-error' : 'text-on-surface-variant'" />
+      <span class="flex-1"><slot /></span>
+      <MIcon v-if="hasChildren" name="chevron_right" :size="18" class="shrink-0 text-on-surface-variant" />
+    </component>
+
+    <!-- Submenu -->
+    <Teleport v-if="hasChildren" to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-100"
+        enter-from-class="opacity-0"
+        leave-active-class="transition-opacity duration-75"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="showSub"
+          class="m3-submenu min-w-44 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2"
+          :style="subStyle"
+          @mouseleave="onSubLeave"
+        >
+          <slot name="children" />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
 </template>

package/src/components/MMultiAutocomplete.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, useId, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
 import MCheckbox from './MCheckbox.vue'
 import { useFieldBg } from '../composables/useFieldBg'
 import { useLocale } from '../composables/useLocale'
@@ -13,6 +14,7 @@ const props = withDefaults(
     label?: string
     placeholder?: string
     variant?: 'filled' | 'outlined'
+    mode?: 'docked' | 'modal'
     disabled?: boolean
     error?: string
     hint?: string
@@ -27,6 +29,7 @@ const props = withDefaults(
   {
     modelValue: () => [],
     variant: 'filled',
+    mode: 'docked',
     disabled: false,
     required: false,
     clearable: false,
@@ -40,6 +43,8 @@ const emit = defineEmits<{ 'update:modelValue': [unknown[]] }>()
 const locale = useLocale()
 const id = useId()
 const open = ref(false)
+const modalOpen = ref(false)
+const modalSearch = ref('')
 const search = ref('')
 const highlightIndex = ref(-1)
 const fieldEl = ref<HTMLElement | null>(null)
@@ -126,8 +131,23 @@ function computeDropPos() {
   }
 }
 
+const modalFilteredOptions = computed(() => {
+  let opts = props.options
+  if (props.hideSelected) {
+    opts = opts.filter((o) => !includes(props.modelValue, o.value))
+  }
+  if (!modalSearch.value) return opts
+  const q = modalSearch.value.toLowerCase()
+  return opts.filter((o) => o.label.toLowerCase().includes(q))
+})
+
 function openDropdown() {
   if (props.disabled || open.value) return
+  if (props.mode === 'modal') {
+    modalOpen.value = true
+    modalSearch.value = ''
+    return
+  }
   computeDropPos()
   open.value = true
   highlightIndex.value = -1
@@ -135,10 +155,16 @@ function openDropdown() {
 
 function closeDropdown() {
   open.value = false
+  modalOpen.value = false
   search.value = ''
+  modalSearch.value = ''
   highlightIndex.value = -1
 }
 
+watch(modalOpen, (v) => {
+  document.body.style.overflow = v ? 'hidden' : ''
+})
+
 function onInputFocus() {
   openDropdown()
 }
@@ -157,6 +183,7 @@ function onInput(e: Event) {
 }
 
 function onOutsideClick(e: MouseEvent) {
+  if (modalOpen.value) return
   const t = e.target as Node
   if (!fieldEl.value?.contains(t) && !dropdownEl.value?.contains(t)) closeDropdown()
 }
@@ -164,13 +191,7 @@ function onOutsideClick(e: MouseEvent) {
 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) {
-    closeDropdown()
-    return
-  }
-  computeDropPos()
+  closeDropdown()
 }
 
 function onKeydown(e: KeyboardEvent) {
@@ -235,6 +256,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('mousedown', onOutsideClick)
   window.removeEventListener('scroll', onScroll, true)
+  document.body.style.overflow = ''
 })
 
 watch(filteredOptions, () => {
@@ -388,9 +410,10 @@ const labelClasses = computed(() => {
       <!-- Arrow icon -->
       <div class="pointer-events-none absolute right-2 top-4">
         <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>
@@ -399,7 +422,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"
@@ -410,7 +433,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 shadow-elevation-2"
         :style="dropPos"
@@ -442,5 +465,76 @@ const labelClasses = computed(() => {
         </div>
       </div>
     </Transition>
+
+    <!-- Modal -->
+    <Transition name="m3-mac-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="closeDropdown"
+      >
+        <div class="mac-modal-box flex max-h-[80vh] w-full max-w-sm flex-col overflow-hidden rounded-[28px] bg-surface-container-high shadow-elevation-3">
+          <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="closeDropdown" />
+          </div>
+
+          <div class="px-6 pb-3">
+            <div class="flex items-center gap-2 rounded-full bg-surface-container-highest px-3 py-2">
+              <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
+              <input
+                v-model="modalSearch"
+                type="text"
+                :placeholder="locale.search"
+                class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
+              />
+            </div>
+          </div>
+
+          <div class="h-px bg-outline-variant" />
+
+          <div class="flex-1 overflow-y-auto py-2">
+            <label
+              v-for="(opt, i) in modalFilteredOptions"
+              :key="i"
+              class="flex cursor-pointer items-center gap-4 px-6 py-3 transition-colors hover:bg-on-surface/8"
+              :class="opt.disabled ? 'cursor-not-allowed opacity-38' : ''"
+            >
+              <MCheckbox
+                :model-value="includes(modelValue, 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="!modalFilteredOptions.length"
+              class="px-6 py-4 text-center text-body-medium text-on-surface-variant"
+            >
+              {{ resolvedNoResultsText }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </Teleport>
 </template>
+
+<style scoped>
+.m3-mac-modal-enter-active,
+.m3-mac-modal-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-mac-modal-enter-from,
+.m3-mac-modal-leave-to {
+  opacity: 0;
+}
+.m3-mac-modal-enter-active .mac-modal-box,
+.m3-mac-modal-leave-active .mac-modal-box {
+  transition: transform 0.15s ease;
+}
+.m3-mac-modal-enter-from .mac-modal-box,
+.m3-mac-modal-leave-to .mac-modal-box {
+  transform: scale(0.95);
+}
+</style>

package/src/components/MMultiSelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, useId, onMounted, onUnmounted, nextTick } from 'vue'
+import { computed, ref, useId, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
 import MCheckbox from './MCheckbox.vue'
 import { useFieldBg } from '../composables/useFieldBg'
 import { useLocale } from '../composables/useLocale'
@@ -20,6 +21,7 @@ const props = withDefaults(
     label?: string
     placeholder?: string
     variant?: 'filled' | 'outlined'
+    mode?: 'docked' | 'modal'
     disabled?: boolean
     error?: string
     hint?: string
@@ -36,6 +38,7 @@ const props = withDefaults(
   {
     modelValue: () => [],
     variant: 'filled',
+    mode: 'docked',
     disabled: false,
     required: false,
     searchable: true,
@@ -49,6 +52,8 @@ const emit = defineEmits<{ 'update:modelValue': [unknown[]] }>()
 
 const id = useId()
 const open = ref(false)
+const modalOpen = ref(false)
+const modalSearch = ref('')
 const search = ref('')
 const fieldEl = ref<HTMLElement | null>(null)
 const { resolvedFieldBg } = useFieldBg(fieldEl, () => props.fieldBg)
@@ -128,6 +133,11 @@ function computeDropPos() {
 
 async function openDropdown() {
   if (props.disabled) return
+  if (props.mode === 'modal') {
+    modalOpen.value = true
+    modalSearch.value = ''
+    return
+  }
   computeDropPos()
   open.value = true
   search.value = ''
@@ -137,10 +147,27 @@ async function openDropdown() {
 
 function close() {
   open.value = false
+  modalOpen.value = false
   search.value = ''
+  modalSearch.value = ''
 }
 
+const modalFilteredOptions = computed(() => {
+  let opts = props.options
+  if (props.hideSelected) {
+    opts = opts.filter((o) => !includes(props.modelValue, o.value))
+  }
+  if (!modalSearch.value) return opts
+  const q = modalSearch.value.toLowerCase()
+  return opts.filter((o) => o.label.toLowerCase().includes(q))
+})
+
+watch(modalOpen, (v) => {
+  document.body.style.overflow = v ? 'hidden' : ''
+})
+
 function onOutsideClick(e: MouseEvent) {
+  if (modalOpen.value) return
   const t = e.target as Node
   if (!fieldEl.value?.contains(t) && !dropdownEl.value?.contains(t)) close()
 }
@@ -148,13 +175,7 @@ function onOutsideClick(e: MouseEvent) {
 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()
+  close()
 }
 
 onMounted(() => {
@@ -164,6 +185,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('mousedown', onOutsideClick)
   window.removeEventListener('scroll', onScroll, true)
+  document.body.style.overflow = ''
 })
 
 const triggerClasses = computed(() => {
@@ -298,9 +320,10 @@ const labelClasses = computed(() => {
 
       <div class="pointer-events-none absolute right-2 top-4">
         <MIcon
-          :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
+          name="arrow_drop_down"
           :size="24"
-          class="text-on-surface-variant"
+          class="text-on-surface-variant transition-transform duration-200"
+          :class="open || modalOpen ? 'rotate-180' : ''"
         />
       </div>
     </div>
@@ -309,7 +332,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"
@@ -320,12 +343,11 @@ 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 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" />
@@ -361,5 +383,76 @@ const labelClasses = computed(() => {
         </div>
       </div>
     </Transition>
+
+    <!-- Modal -->
+    <Transition name="m3-ms-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="close"
+      >
+        <div class="ms-modal-box flex max-h-[80vh] w-full max-w-sm flex-col overflow-hidden rounded-[28px] bg-surface-container-high shadow-elevation-3">
+          <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="close" />
+          </div>
+
+          <div v-if="searchable" class="px-6 pb-3">
+            <div class="flex items-center gap-2 rounded-full bg-surface-container-highest px-3 py-2">
+              <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
+              <input
+                v-model="modalSearch"
+                type="text"
+                :placeholder="searchPlaceholder ?? locale.search"
+                class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
+              />
+            </div>
+          </div>
+
+          <div class="h-px bg-outline-variant" />
+
+          <div class="flex-1 overflow-y-auto py-2">
+            <label
+              v-for="(opt, i) in modalFilteredOptions"
+              :key="i"
+              class="flex cursor-pointer items-center gap-4 px-6 py-3 transition-colors hover:bg-on-surface/8"
+              :class="opt.disabled ? 'cursor-not-allowed opacity-38' : ''"
+            >
+              <MCheckbox
+                :model-value="includes(modelValue, 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="!modalFilteredOptions.length"
+              class="px-6 py-4 text-center text-body-medium text-on-surface-variant"
+            >
+              {{ noResultsText ?? locale.noResults }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
   </Teleport>
 </template>
+
+<style scoped>
+.m3-ms-modal-enter-active,
+.m3-ms-modal-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-ms-modal-enter-from,
+.m3-ms-modal-leave-to {
+  opacity: 0;
+}
+.m3-ms-modal-enter-active .ms-modal-box,
+.m3-ms-modal-leave-active .ms-modal-box {
+  transition: transform 0.15s ease;
+}
+.m3-ms-modal-enter-from .ms-modal-box,
+.m3-ms-modal-leave-to .ms-modal-box {
+  transform: scale(0.95);
+}
+</style>