@m3ui-vue/m3ui-vue 0.1.10 → 0.2.0

package/src/components/MNumberField.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+import MIcon from './MIcon.vue'
+import MIconButton from './MIconButton.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number | null
+    label: string
+    variant?: 'filled' | 'outlined'
+    min?: number
+    max?: number
+    step?: number
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    leadingIcon?: string
+    stepper?: boolean
+    fieldBg?: string
+  }>(),
+  {
+    variant: 'filled',
+    step: 1,
+    stepper: true,
+    modelValue: null,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [number | null] }>()
+
+const id = useId()
+const fieldBgEl = ref<HTMLElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg)
+
+const hasValue = computed(() => props.modelValue !== null && props.modelValue !== undefined)
+
+function clamp(val: number): number {
+  if (props.min !== undefined && val < props.min) return props.min
+  if (props.max !== undefined && val > props.max) return props.max
+  return val
+}
+
+function onInput(e: Event) {
+  const raw = (e.target as HTMLInputElement).value
+  if (raw === '') { emit('update:modelValue', null); return }
+  const n = Number(raw)
+  if (!Number.isNaN(n)) emit('update:modelValue', clamp(n))
+}
+
+function increment() {
+  if (props.disabled) return
+  const current = props.modelValue ?? 0
+  emit('update:modelValue', clamp(current + props.step))
+}
+
+function decrement() {
+  if (props.disabled) return
+  const current = props.modelValue ?? 0
+  emit('update:modelValue', clamp(current - props.step))
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowUp') { e.preventDefault(); increment() }
+  if (e.key === 'ArrowDown') { e.preventDefault(); decrement() }
+}
+
+const inputClasses = computed(() => {
+  const pl = props.leadingIcon ? 'pl-12' : 'pl-4'
+  const pr = props.stepper ? 'pr-24' : 'pr-4'
+  const base = [
+    'peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent',
+    'transition-[border-color,border-width] duration-150',
+    'disabled:cursor-not-allowed disabled:opacity-[0.38]',
+    'h-14', pl, pr,
+  ]
+  if (props.variant === 'outlined') {
+    return [...base,
+      'rounded-sm border bg-transparent py-4',
+      props.error
+        ? 'border-error focus:border-2 focus:border-error'
+        : 'border-outline hover:border-on-surface focus:border-2 focus:border-primary',
+    ].join(' ')
+  }
+  return [...base,
+    'rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2',
+    props.error
+      ? 'border-error focus:border-b-2 focus:border-error'
+      : 'border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary',
+  ].join(' ')
+})
+
+const labelClasses = computed(() => {
+  const left = props.leadingIcon
+    ? (props.variant === 'outlined' ? 'left-11' : 'left-12')
+    : (props.variant === 'outlined' ? 'left-3' : 'left-4')
+
+  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'
+  const base = [
+    'pointer-events-none absolute truncate transition-all duration-200',
+    left, 'right-4', `${unfloatedTop} -translate-y-1/2 text-body-large`,
+  ]
+
+  if (props.variant === 'outlined') {
+    return [...base,
+      'peer-focus:-top-2.5 peer-focus:translate-y-0 peer-focus:text-label-small peer-focus:right-auto peer-focus:max-w-[calc(100%-1.5rem)] peer-focus:bg-[var(--field-bg)] peer-focus:px-1',
+      'peer-[&:not(:placeholder-shown)]:-top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:right-auto peer-[&:not(:placeholder-shown)]:max-w-[calc(100%-1.5rem)]',
+      'peer-[&:not(:placeholder-shown)]:text-label-small peer-[&:not(:placeholder-shown)]:bg-[var(--field-bg)] peer-[&:not(:placeholder-shown)]:px-1',
+      props.error ? 'text-error peer-focus:text-error' : 'text-on-surface-variant peer-focus:text-primary',
+    ].join(' ')
+  }
+  return [...base,
+    'peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-label-small',
+    'peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-label-small',
+    props.error ? 'text-error peer-focus:text-error' : 'text-on-surface-variant peer-focus:text-primary',
+  ].join(' ')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      ref="fieldBgEl"
+      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 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+      >
+        <MIcon :name="leadingIcon" :size="20" />
+      </div>
+
+      <input
+        :id="id"
+        type="number"
+        :value="modelValue ?? ''"
+        :disabled="disabled"
+        :required="required"
+        :min="min"
+        :max="max"
+        :step="step"
+        placeholder=" "
+        :class="inputClasses"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <div v-if="stepper" class="absolute right-1 flex items-center gap-0.5" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
+        <MIconButton icon="remove" label="Decrease" :size="32" :disabled="disabled || (min !== undefined && (modelValue ?? 0) <= min)" @click="decrement" />
+        <MIconButton icon="add" label="Increase" :size="32" :disabled="disabled || (max !== undefined && (modelValue ?? 0) >= max)" @click="increment" />
+      </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>
+</template>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/MSelect.vue

@@ -3,10 +3,16 @@ import { computed, ref, useId, onMounted, onUnmounted } from 'vue'
 import MIcon from './MIcon.vue'
 import { useFieldBg } from '../composables/useFieldBg'
 
+export interface SelectOption {
+  label: string
+  value: unknown
+  disabled?: boolean
+}
+
 const props = withDefaults(
   defineProps<{
-    modelValue: string | number | null
-    options: { label: string; value: string | number; disabled?: boolean }[]
+    modelValue: unknown
+    options: SelectOption[]
     label?: string
     placeholder?: string
     variant?: 'filled' | 'outlined'
@@ -15,17 +21,19 @@ const props = withDefaults(
     hint?: string
     required?: boolean
     leadingIcon?: string
+    clearable?: boolean
     fieldBg?: string
   }>(),
   {
-    modelValue: null,
+    modelValue: undefined,
     variant: 'filled',
     disabled: false,
     required: false,
+    clearable: false,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [string | number] }>()
+const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
 
 const id = useId()
 const open = ref(false)
@@ -34,9 +42,15 @@ 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 !== '')
+function eq(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+const hasValue = computed(() => props.modelValue != null && props.modelValue !== '')
 const selectedLabel = computed(
-  () => props.options.find((o) => o.value === props.modelValue)?.label ?? '',
+  () => props.options.find((o) => eq(o.value, props.modelValue))?.label ?? '',
 )
 
 function computeDropPos() {
@@ -58,7 +72,7 @@ function toggle() {
   open.value = !open.value
 }
 
-function select(opt: { value: string | number; disabled?: boolean }) {
+function select(opt: SelectOption) {
   if (opt.disabled) return
   emit('update:modelValue', opt.value)
   open.value = false
@@ -89,7 +103,7 @@ function onKeydown(e: KeyboardEvent) {
   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)
+  const idx = opts.findIndex((o) => eq(o.value, props.modelValue))
   if (e.key === 'ArrowDown') {
     e.preventDefault()
     const next = opts[(idx + 1) % opts.length]
@@ -148,7 +162,9 @@ const labelClasses = computed(() => {
     ? '-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'
+  const unFloated = props.variant === 'filled'
+    ? 'top-[53%] -translate-y-1/2 text-body-large'
+    : 'top-1/2 -translate-y-1/2 text-body-large'
 
   return [
     'pointer-events-none absolute right-10 truncate transition-all duration-200',
@@ -196,8 +212,19 @@ const labelClasses = computed(() => {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
+      <!-- Clear button -->
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
+        :class="variant === 'filled' ? 'right-9 top-[57%] -translate-y-1/2' : 'right-9 top-[55%] -translate-y-1/2'"
+        @click.stop="emit('update:modelValue', undefined as any); open = false"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+
       <!-- Arrow icon -->
-      <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
+      <div class="pointer-events-none absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
         <MIcon
           :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
           :size="24"
@@ -227,19 +254,19 @@ const labelClasses = computed(() => {
         :style="dropPos"
       >
         <div
-          v-for="opt in options"
-          :key="opt.value"
+          v-for="(opt, i) in options"
+          :key="i"
           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' : '',
+            eq(opt.value, modelValue) ? 'bg-primary/8 text-primary font-medium' : '',
           ]"
           @click="select(opt)"
         >
           <MIcon
-            v-if="opt.value === modelValue"
+            v-if="eq(opt.value, modelValue)"
             name="check"
             :size="18"
             class="shrink-0 text-primary"

package/src/components/MTextField.vue

@@ -17,17 +17,14 @@ const props = withDefaults(
     rows?: number;
     autocomplete?: string;
     leadingIcon?: string;
-    /**
-     * Background color behind the label in outlined variant.
-     * Defaults to the page surface color. Pass e.g. 'var(--color-surface-container-low)'
-     * when the input is inside a card.
-     */
+    clearable?: boolean;
     fieldBg?: string;
   }>(),
   {
     type: "text",
     variant: "filled",
     rows: 3,
+    clearable: false,
   },
 );
 
@@ -39,8 +36,10 @@ const slots = useSlots();
 const fieldBgEl = ref<HTMLElement | null>(null);
 const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg);
 
+const showClear = computed(() => props.clearable && String(props.modelValue).length > 0 && !props.disabled)
+
 const inputClasses = computed(() => {
-  const hasTrailing = !!slots.trailing;
+  const hasTrailing = !!slots.trailing || props.clearable;
   const pl = props.leadingIcon ? "pl-12" : "pl-4";
   const pr = hasTrailing ? "pr-12" : "pr-4";
   const size = props.multiline ? "resize-y min-h-[56px]" : "h-14";
@@ -81,11 +80,12 @@ const labelClasses = computed(() => {
       ? "left-3"
       : "left-4";
 
+  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'
   const base = [
     "pointer-events-none absolute truncate transition-all duration-200",
     left,
     "right-4",
-    "top-1/2 -translate-y-1/2 text-body-large",
+    `${unfloatedTop} -translate-y-1/2 text-body-large`,
   ];
 
   if (props.variant === "outlined") {
@@ -133,10 +133,10 @@ function onInput(event: Event) {
       :class="variant === 'outlined' ? 'mt-2' : ''"
       :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
     >
-      <!-- Leading icon: centered in the 48px left zone (left-3.5 → center at 24px) -->
       <div
         v-if="leadingIcon"
-        class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -169,9 +169,18 @@ function onInput(event: Event) {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
-      <div v-if="$slots.trailing" class="absolute top-1/2 right-2 -translate-y-1/2">
+      <div v-if="$slots.trailing" class="absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
         <slot name="trailing" />
       </div>
+      <button
+        v-else-if="showClear"
+        type="button"
+        class="absolute right-3 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        @click="emit('update:modelValue', '')"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
     </div>
 
     <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>

package/src/components/_MDrawerItemList.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { defineComponent, inject, type PropType, type Ref } from 'vue'
+import type { DrawerItem } from './MNavigationDrawer.vue'
+import MIcon from './MIcon.vue'
+
+export default defineComponent({
+  name: 'MDrawerItemList',
+  components: { MIcon },
+  props: {
+    items: { type: Array as PropType<DrawerItem[]>, required: true },
+    selected: { type: [String, Number] as PropType<string | number>, default: undefined },
+    depth: { type: Number, default: 0 },
+  },
+  setup() {
+    const openItems = inject<Record<string | number, boolean>>('nd-open-items')!
+    const toggleItem = inject<(item: DrawerItem) => void>('nd-toggle-item')!
+    const selectItem = inject<(item: DrawerItem) => void>('nd-select-item')!
+    const collapsed = inject<Ref<boolean>>('nd-collapsed')!
+    return { openItems, toggleItem, selectItem, collapsed }
+  },
+  methods: {
+    itemTag(item: DrawerItem) {
+      return item.to && !item.disabled ? 'RouterLink' : 'button'
+    },
+    onClick(item: DrawerItem) {
+      if (item.children?.length) this.toggleItem(item)
+      this.selectItem(item)
+    },
+    itemStyle(item: DrawerItem): Record<string, string> {
+      const transition = 'padding 300ms cubic-bezier(0.2, 0, 0, 1)'
+      if (this.collapsed) {
+        const pad = `${(48 - this.iSize(item)) / 2}px`
+        return { paddingLeft: pad, paddingRight: pad, transition }
+      }
+      return { paddingLeft: `${this.depth * 1.25 + 3}rem`, paddingRight: '0.75rem', transition }
+    },
+    iSize(item: DrawerItem): number {
+      return item.iconSize ?? 20
+    },
+    lClass(item: DrawerItem): string {
+      return item.labelClass ?? 'text-label-medium'
+    },
+    onEnter(el: Element, done: () => void) {
+      const e = el as HTMLElement
+      e.style.overflow = 'hidden'
+      const h = e.scrollHeight
+      e.animate(
+        [{ height: '0px' }, { height: h + 'px' }],
+        { duration: 250, easing: 'cubic-bezier(0.2, 0, 0, 1)' },
+      ).onfinish = () => { e.style.overflow = ''; done() }
+    },
+    onLeave(el: Element, done: () => void) {
+      const e = el as HTMLElement
+      e.style.overflow = 'hidden'
+      const h = e.scrollHeight
+      e.animate(
+        [{ height: h + 'px' }, { height: '0px' }],
+        { duration: 200, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
+      ).onfinish = done
+    },
+  },
+})
+</script>
+
+<template>
+  <template v-for="item in items" :key="item.value">
+    <component
+      :is="itemTag(item)"
+      :to="item.to && !item.disabled ? item.to : undefined"
+      :type="item.to ? undefined : 'button'"
+      :title="collapsed ? item.label : undefined"
+      class="flex w-full shrink-0 items-center gap-2.5 overflow-hidden whitespace-nowrap rounded-full text-left transition-colors focus-visible:outline-none"
+      :class="[
+        item.py ?? 'py-1.5',
+        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',
+      ]"
+      :style="itemStyle(item)"
+      :disabled="item.disabled && !item.to"
+      @click="onClick(item)"
+    >
+      <MIcon v-if="item.icon" :name="item.icon" :size="iSize(item)" class="shrink-0" />
+      <span class="nd-label min-w-0 flex-1" :class="lClass(item)">{{ item.label }}</span>
+      <MIcon
+        v-if="item.children?.length"
+        :name="openItems[item.value] ? 'expand_less' : 'expand_more'"
+        :size="16"
+        class="nd-label shrink-0 text-on-surface-variant"
+      />
+    </component>
+
+    <Transition :css="false" @enter="onEnter" @leave="onLeave">
+      <div v-if="item.children?.length && openItems[item.value]">
+        <MDrawerItemList
+          :items="item.children"
+          :selected="selected"
+          :depth="depth + 1"
+        />
+      </div>
+    </Transition>
+  </template>
+</template>

package/src/index.ts

@@ -25,6 +25,7 @@ export { default as MBreadcrumbs } from './components/MBreadcrumbs.vue'
 export { default as MButton } from './components/MButton.vue'
 export { default as MCalendar } from './components/MCalendar.vue'
 export { default as MCard } from './components/MCard.vue'
+export { default as MCarousel } from './components/MCarousel.vue'
 export { default as MCenter } from './components/MCenter.vue'
 // MChart — import from '@m3ui-vue/m3ui-vue/chart'
 export { default as MCheckbox } from './components/MCheckbox.vue'
@@ -67,8 +68,12 @@ export { default as MLoadingOverlay } from './components/MLoadingOverlay.vue'
 export { default as MMasonry } from './components/MMasonry.vue'
 export { default as MMenu } from './components/MMenu.vue'
 export { default as MMenuItem } from './components/MMenuItem.vue'
+export { default as MMaskField } from './components/MMaskField.vue'
+export type { MaskPreset } from './components/MMaskField.vue'
 export { default as MMultiSelect } from './components/MMultiSelect.vue'
+export type { MultiSelectOption } from './components/MMultiSelect.vue'
 export { default as MNavigationBar } from './components/MNavigationBar.vue'
+export { default as MNumberField } from './components/MNumberField.vue'
 export { default as MNavigationDrawer } from './components/MNavigationDrawer.vue'
 export { default as MNavigationRail } from './components/MNavigationRail.vue'
 export { default as MOverlay } from './components/MOverlay.vue'
@@ -86,6 +91,7 @@ export { default as MScrollable } from './components/MScrollable.vue'
 export { default as MSection } from './components/MSection.vue'
 export { default as MSegmentedButton } from './components/MSegmentedButton.vue'
 export { default as MSelect } from './components/MSelect.vue'
+export type { SelectOption } from './components/MSelect.vue'
 export { default as MSideSheet } from './components/MSideSheet.vue'
 export { default as MSkeleton } from './components/MSkeleton.vue'
 export { default as MSlider } from './components/MSlider.vue'
@@ -122,8 +128,9 @@ export { emojiCategories, allEmojis, randomEmoji } from './data/emojis'
 export type { Placement } from './components/MAbsolute.vue'
 export type { BadgePosition, BadgeOverlap } from './components/MBadge.vue'
 export type { CalendarEvent } from './components/MCalendar.vue'
+export type { CarouselItem } from './components/MCarousel.vue'
 export type { ContextMenuItem } from './components/MContextMenu.vue'
-export type { DataTableColumn } from './components/MDataTable.vue'
+export type { DataTableColumn, DataTableFetchParams } from './components/MDataTable.vue'
 export type { DateRange } from './components/MDateRangePicker.vue'
 export type { DragDropItem } from './components/MDragDropList.vue'
 export type { UploadFile } from './components/MFileUpload.vue'