@m3ui-vue/m3ui-vue 0.1.11 → 0.2.1

package/src/components/MDataTable.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, useSlots, watch } from 'vue'
+import { computed, ref, useSlots, watch, onMounted } from 'vue'
 import MCheckbox from './MCheckbox.vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import MPagination from './MPagination.vue'
 import MChip from './MChip.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface DataTableColumn {
   key: string
@@ -43,9 +46,18 @@ const props = withDefaults(defineProps<{
   groupBy?: string
   columnToggle?: boolean
   exportable?: boolean
+  serverSide?: boolean
+  total?: number
+  page?: number
+  searchPlaceholder?: string
+  selectedText?: string
+  recordsText?: string
+  expandLabel?: string
+  columnsLabel?: string
+  exportLabel?: string
+  noGroupText?: string
 }>(), {
   loading: false,
-  emptyText: 'Sin resultados',
   rowKey: 'id',
   selectable: false,
   modelValue: () => [],
@@ -57,11 +69,24 @@ const props = withDefaults(defineProps<{
   stickyHeader: false,
   columnToggle: false,
   exportable: false,
+  serverSide: false,
+  total: 0,
+  page: 1,
 })
 
+export interface DataTableFetchParams {
+  page: number
+  perPage: number
+  search: string
+  sortKey: string
+  sortDir: 'asc' | 'desc' | ''
+}
+
 const emit = defineEmits<{
   'update:modelValue': [Record<string, any>[]]
+  'update:page': [number]
   rowClick: [Record<string, any>]
+  fetch: [DataTableFetchParams]
 }>()
 
 const slots = useSlots()
@@ -87,7 +112,16 @@ function toggleSort(key: string) {
   else { sortKey.value = ''; sortDir.value = '' }
 }
 
+const currentPage = computed({
+  get: () => props.serverSide ? (props.page ?? 1) : internalPage.value,
+  set: (val: number) => {
+    if (props.serverSide) emit('update:page', val)
+    else internalPage.value = val
+  },
+})
+
 const processedRows = computed(() => {
+  if (props.serverSide) return props.rows
   let result = props.rows
   if (search.value.trim()) {
     const q = search.value.toLowerCase()
@@ -112,20 +146,50 @@ const groupedRows = computed(() => {
   if (!props.groupBy) return null
   const map = new Map<string, Record<string, any>[]>()
   for (const row of processedRows.value) {
-    const key = String(row[props.groupBy] ?? 'Sin grupo')
+    const key = String(row[props.groupBy] ?? (props.noGroupText ?? locale.noGroup))
     if (!map.has(key)) map.set(key, [])
     map.get(key)!.push(row)
   }
   return map
 })
 
-const totalCount = computed(() => processedRows.value.length)
+const totalCount = computed(() => props.serverSide ? (props.total ?? 0) : processedRows.value.length)
 const visibleRows = computed(() => {
-  const start = (internalPage.value - 1) * props.perPage
+  if (props.serverSide) return props.rows
+  const start = (currentPage.value - 1) * props.perPage
   return processedRows.value.slice(start, start + props.perPage)
 })
 
-watch([search, sortKey, sortDir], () => { internalPage.value = 1 })
+watch([search, sortKey, sortDir], () => {
+  if (!props.serverSide) internalPage.value = 1
+})
+
+function emitFetch() {
+  emit('fetch', {
+    page: currentPage.value,
+    perPage: props.perPage,
+    search: search.value,
+    sortKey: sortKey.value,
+    sortDir: sortDir.value,
+  })
+}
+
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+  if (props.serverSide) emitFetch()
+})
+
+watch([search, sortKey, sortDir], () => {
+  if (!props.serverSide || !mounted.value) return
+  internalPage.value = 1
+  emitFetch()
+})
+
+watch(currentPage, () => {
+  if (!props.serverSide || !mounted.value) return
+  emitFetch()
+})
 
 const selected = computed({
   get: () => props.modelValue ?? [],
@@ -214,7 +278,7 @@ function colStyle(col: DataTableColumn) {
     >
       <div v-if="searchable" class="flex min-w-48 flex-1 items-center gap-2 rounded-full border border-outline-variant bg-surface-container px-3 py-1.5 transition-[border-color,box-shadow] duration-150 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/30">
         <MIcon name="search" :size="16" class="shrink-0 text-on-surface-variant" />
-        <input 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" />
+        <input v-model="search" type="text" :placeholder="searchPlaceholder ?? locale.search" class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant" />
         <button v-if="search" class="text-on-surface-variant transition-colors hover:text-on-surface" @click="search = ''">
           <MIcon name="close" :size="14" />
         </button>
@@ -224,13 +288,13 @@ function colStyle(col: DataTableColumn) {
 
       <Transition enter-active-class="transition-[opacity,transform] duration-150" enter-from-class="opacity-0 scale-90" leave-active-class="transition-[opacity,transform] duration-100" leave-to-class="opacity-0 scale-90">
         <span v-if="selectable && selected.length > 0" class="rounded-full bg-primary/12 px-3 py-1 text-label-small font-medium text-primary">
-          {{ selected.length }} seleccionado{{ selected.length !== 1 ? 's' : '' }}
+          {{ selected.length }} {{ selectedText ?? locale.selectedCount }}{{ selected.length !== 1 ? 's' : '' }}
         </span>
       </Transition>
 
       <!-- Column toggle -->
       <div v-if="columnToggle" class="relative">
-        <MIconButton icon="view_column" label="Columnas" :size="36" @click="showColMenu = !showColMenu" />
+        <MIconButton icon="view_column" :label="columnsLabel ?? locale.columns" :size="36" @click="showColMenu = !showColMenu" />
         <div v-if="showColMenu" class="absolute right-0 top-full z-10 mt-1 min-w-40 rounded-lg bg-surface-container py-2 shadow-elevation-3">
           <label v-for="col in columns" :key="col.key" class="flex cursor-pointer items-center gap-2 px-3 py-1.5 hover:bg-on-surface/4">
             <MCheckbox
@@ -242,7 +306,7 @@ function colStyle(col: DataTableColumn) {
         </div>
       </div>
 
-      <MIconButton v-if="exportable" icon="download" label="Exportar CSV" :size="36" @click="exportCSV" />
+      <MIconButton v-if="exportable" icon="download" :label="exportLabel ?? locale.exportCsv" :size="36" @click="exportCSV" />
     </div>
 
     <!-- Table -->
@@ -308,7 +372,7 @@ function colStyle(col: DataTableColumn) {
               <td :colspan="visibleColumns.length + extraCols" class="border-t border-outline-variant px-4 py-14 text-center">
                 <slot name="empty">
                   <MIcon name="search_off" :size="36" class="mb-2 text-on-surface-variant opacity-30" />
-                  <p class="text-body-medium text-on-surface-variant">{{ emptyText }}</p>
+                  <p class="text-body-medium text-on-surface-variant">{{ emptyText ?? locale.noResults }}</p>
                 </slot>
               </td>
             </tr>
@@ -330,7 +394,7 @@ function colStyle(col: DataTableColumn) {
                 <td v-if="hasExpand" class="px-2" :class="dense ? 'py-1' : 'py-2'" @click.stop>
                   <MIconButton
                     icon="expand_more"
-                    label="Expandir"
+                    :label="expandLabel ?? locale.expand"
                     :size="28"
                     :class="isExpanded(row) ? 'rotate-180' : ''"
                     class="transition-transform duration-200"
@@ -374,9 +438,9 @@ function colStyle(col: DataTableColumn) {
     <!-- Footer -->
     <div class="flex items-center justify-between gap-4 border-t border-outline-variant bg-surface-container-lowest px-4 py-2">
       <span class="text-label-small text-on-surface-variant">
-        {{ totalCount }} registro{{ totalCount !== 1 ? 's' : '' }}
+        {{ totalCount }} {{ recordsText ?? locale.recordCount }}{{ totalCount !== 1 ? 's' : '' }}
       </span>
-      <MPagination :page="internalPage" :per-page="perPage" :total="totalCount" @update:page="internalPage = $event" />
+      <MPagination :page="currentPage" :per-page="perPage" :total="totalCount" @update:page="currentPage = $event" />
     </div>
   </div>
 </template>

package/src/components/MDatePicker.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<{
   modelValue: string | null
@@ -15,7 +16,13 @@ const props = withDefaults(defineProps<{
   hint?: string
   locale?: string
   fieldBg?: string
-}>(), { locale: 'es-ES' })
+  prevMonthLabel?: string
+  nextMonthLabel?: string
+}>(), {
+  locale: 'es-ES',
+})
+
+const localeStrings = useLocale()
 
 const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
 
@@ -173,7 +180,7 @@ onUnmounted(() => {
       >
         <MIcon name="calendar_today" :size="20" class="shrink-0 text-on-surface-variant" />
         <span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
-        <span v-else class="flex-1 text-on-surface-variant">{{ placeholder || label || 'Seleccionar fecha' }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ placeholder || label || localeStrings.selectDate }}</span>
         <MIcon
           v-if="modelValue"
           name="close"
@@ -210,9 +217,9 @@ onUnmounted(() => {
         >
           <!-- Header -->
           <div class="mb-3 flex items-center justify-between">
-            <MIconButton icon="chevron_left" label="Mes anterior" :size="36" @click="prevMonth" />
+            <MIconButton icon="chevron_left" :label="prevMonthLabel ?? localeStrings.previousMonth" :size="36" @click="prevMonth" />
             <span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
-            <MIconButton icon="chevron_right" label="Mes siguiente" :size="36" @click="nextMonth" />
+            <MIconButton icon="chevron_right" :label="nextMonthLabel ?? localeStrings.nextMonth" :size="36" @click="nextMonth" />
           </div>
 
           <!-- Weekday headers -->

package/src/components/MDateRangePicker.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, 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 DateRange {
   start: string | null
@@ -12,6 +13,7 @@ export interface DateRange {
 const props = withDefaults(defineProps<{
   modelValue: DateRange
   label?: string
+  placeholder?: string
   min?: string
   max?: string
   disabled?: boolean
@@ -19,7 +21,15 @@ const props = withDefaults(defineProps<{
   hint?: string
   locale?: string
   fieldBg?: string
-}>(), { locale: 'es-ES' })
+  prevMonthLabel?: string
+  nextMonthLabel?: string
+  pickStartText?: string
+  pickEndText?: string
+}>(), {
+  locale: 'es-ES',
+})
+
+const localeStrings = useLocale()
 
 const emit = defineEmits<{ 'update:modelValue': [DateRange] }>()
 
@@ -184,7 +194,7 @@ onUnmounted(() => {
       >
         <MIcon name="date_range" :size="20" class="shrink-0 text-on-surface-variant" />
         <span v-if="displayValue" class="flex-1 text-on-surface">{{ displayValue }}</span>
-        <span v-else class="flex-1 text-on-surface-variant">{{ label || 'Seleccionar rango' }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ label || placeholder || localeStrings.selectRange }}</span>
         <MIcon
           v-if="modelValue.start || modelValue.end"
           name="close"
@@ -219,13 +229,13 @@ onUnmounted(() => {
           :style="dropPos"
         >
           <p class="mb-2 text-center text-label-medium text-on-surface-variant">
-            {{ picking === 'start' ? 'Selecciona inicio' : 'Selecciona fin' }}
+            {{ picking === 'start' ? (pickStartText ?? localeStrings.pickStart) : (pickEndText ?? localeStrings.pickEnd) }}
           </p>
 
           <div class="mb-3 flex items-center justify-between">
-            <MIconButton icon="chevron_left" label="Anterior" :size="36" @click="prevMonth" />
+            <MIconButton icon="chevron_left" :label="prevMonthLabel ?? localeStrings.previousMonth" :size="36" @click="prevMonth" />
             <span class="text-title-small font-medium capitalize text-on-surface">{{ monthLabel }}</span>
-            <MIconButton icon="chevron_right" label="Siguiente" :size="36" @click="nextMonth" />
+            <MIconButton icon="chevron_right" :label="nextMonthLabel ?? localeStrings.nextMonth" :size="36" @click="nextMonth" />
           </div>
 
           <div class="mb-1 grid grid-cols-7 gap-0.5 text-center">

package/src/components/MDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { watch } from 'vue'
 import MIconButton from './MIconButton.vue'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(
   defineProps<{
@@ -8,6 +9,7 @@ const props = withDefaults(
     title?: string
     maxWidth?: string
     persistent?: boolean
+    closeLabel?: string
   }>(),
   {
     maxWidth: 'max-w-md',
@@ -15,6 +17,8 @@ const props = withDefaults(
   },
 )
 
+const locale = useLocale()
+
 const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
 
 function close() {
@@ -56,7 +60,7 @@ watch(
             <h2 class="text-headline-small text-on-surface">
               <slot name="title">{{ title }}</slot>
             </h2>
-            <MIconButton v-if="!persistent" icon="close" label="Cerrar" @click="close" />
+            <MIconButton v-if="!persistent" icon="close" :label="closeLabel ?? locale.close" @click="close" />
           </div>
           <div class="overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant">
             <slot />

package/src/components/MFileUpload.vue

@@ -3,6 +3,9 @@ import { ref, computed } from 'vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import MSpinner from './MSpinner.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface UploadFile {
   file: File
@@ -18,8 +21,15 @@ const props = withDefaults(
     multiple?: boolean
     maxSize?: number
     disabled?: boolean
+    dropText?: string
+    selectText?: string
+    maxSizePrefix?: string
+    removeLabel?: string
   }>(),
-  { multiple: false, disabled: false },
+  {
+    multiple: false,
+    disabled: false,
+  },
 )
 
 const emit = defineEmits<{
@@ -128,14 +138,16 @@ function openPicker() {
         class="text-on-surface-variant"
       />
       <div class="text-center">
-        <p class="text-body-large text-on-surface">
-          Arrastra archivos aquí o <span class="font-medium text-primary">selecciona</span>
-        </p>
-        <p v-if="accept || maxSize" class="mt-1 text-body-small text-on-surface-variant">
-          <span v-if="accept">{{ accept }}</span>
-          <span v-if="accept && maxSize"> · </span>
-          <span v-if="maxSize">Máx. {{ formatSize(maxSize) }}</span>
-        </p>
+        <slot name="dropzone">
+          <p class="text-body-large text-on-surface">
+            {{ dropText ?? locale.dropText }} <span class="font-medium text-primary">{{ selectText ?? locale.selectText }}</span>
+          </p>
+          <p v-if="accept || maxSize" class="mt-1 text-body-small text-on-surface-variant">
+            <span v-if="accept">{{ accept }}</span>
+            <span v-if="accept && maxSize"> · </span>
+            <span v-if="maxSize">{{ maxSizePrefix ?? locale.maxSizePrefix }} {{ formatSize(maxSize) }}</span>
+          </p>
+        </slot>
       </div>
     </div>
 
@@ -187,7 +199,7 @@ function openPicker() {
         <MIcon v-else-if="entry.status === 'done'" name="check_circle" :size="20" class="text-success" />
         <MIcon v-else-if="entry.status === 'error'" name="error" :size="20" class="text-error" />
 
-        <MIconButton icon="close" label="Eliminar" :size="32" @click="removeFile(entry)" />
+        <MIconButton icon="close" :label="removeLabel ?? locale.remove" :size="32" @click="removeFile(entry)" />
       </div>
     </TransitionGroup>
   </div>

package/src/components/MInfiniteScroll.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import MSpinner from './MSpinner.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 const props = withDefaults(
   defineProps<{
@@ -15,8 +18,6 @@ const props = withDefaults(
     loading: false,
     disabled: false,
     threshold: 100,
-    loadingText: 'Cargando...',
-    endText: 'No hay más elementos',
     ended: false,
   },
 )
@@ -55,13 +56,17 @@ onBeforeUnmount(() => observer?.disconnect())
     <slot />
 
     <div ref="sentinelRef" class="flex items-center justify-center py-4">
-      <div v-if="loading" class="flex items-center gap-3">
-        <MSpinner :size="20" class="text-primary" />
-        <span class="text-body-medium text-on-surface-variant">{{ loadingText }}</span>
-      </div>
-      <p v-else-if="ended" class="text-body-small text-on-surface-variant">
-        {{ endText }}
-      </p>
+      <slot v-if="loading" name="loading">
+        <div class="flex items-center gap-3">
+          <MSpinner :size="20" class="text-primary" />
+          <span class="text-body-medium text-on-surface-variant">{{ loadingText ?? locale.loadingMore }}</span>
+        </div>
+      </slot>
+      <slot v-else-if="ended" name="end">
+        <p class="text-body-small text-on-surface-variant">
+          {{ endText ?? locale.noMoreItems }}
+        </p>
+      </slot>
       <slot v-else name="idle" />
     </div>
   </div>

package/src/components/MMaskField.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, ref, useId, watch } from 'vue'
+import MIcon from './MIcon.vue'
+import { useFieldBg } from '../composables/useFieldBg'
+
+export type MaskPreset = 'credit-card' | 'phone' | 'date' | 'time' | 'cpf' | 'cnpj' | 'zip'
+
+const PRESETS: Record<MaskPreset, string> = {
+  'credit-card': '#### #### #### ####',
+  phone: '(###) ###-####',
+  date: '##/##/####',
+  time: '##:##',
+  cpf: '###.###.###-##',
+  cnpj: '##.###.###/####-##',
+  zip: '#####-####',
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label: string
+    mask: string | MaskPreset
+    variant?: 'filled' | 'outlined'
+    error?: string
+    hint?: string
+    disabled?: boolean
+    required?: boolean
+    leadingIcon?: string
+    clearable?: boolean
+    fieldBg?: string
+  }>(),
+  {
+    variant: 'filled',
+    clearable: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const id = useId()
+const fieldBgEl = ref<HTMLElement | null>(null)
+const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg)
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const resolvedMask = computed(() => PRESETS[props.mask as MaskPreset] ?? props.mask)
+
+const showClear = computed(() => props.clearable && props.modelValue.length > 0 && !props.disabled)
+
+function rawToMasked(raw: string, mask: string): string {
+  let result = ''
+  let ri = 0
+  for (let mi = 0; mi < mask.length && ri < raw.length; mi++) {
+    if (mask[mi] === '#') {
+      result += raw[ri++]
+    } else {
+      result += mask[mi]
+      if (raw[ri] === mask[mi]) ri++
+    }
+  }
+  return result
+}
+
+function maskedToRaw(masked: string): string {
+  const mask = resolvedMask.value
+  let raw = ''
+  for (let i = 0; i < masked.length && i < mask.length; i++) {
+    if (mask[i] === '#') raw += masked[i]
+  }
+  return raw
+}
+
+function onInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  const raw = input.value.replace(/[^\d]/g, '')
+  const masked = rawToMasked(raw, resolvedMask.value)
+  emit('update:modelValue', masked)
+
+  requestAnimationFrame(() => {
+    if (inputEl.value) inputEl.value.value = masked
+  })
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Backspace' && props.modelValue.length > 0) {
+    const raw = maskedToRaw(props.modelValue)
+    if (raw.length > 0) {
+      e.preventDefault()
+      const newRaw = raw.slice(0, -1)
+      const masked = rawToMasked(newRaw, resolvedMask.value)
+      emit('update:modelValue', masked)
+      requestAnimationFrame(() => {
+        if (inputEl.value) inputEl.value.value = masked
+      })
+    }
+  }
+}
+
+const hasTrailing = computed(() => props.clearable)
+
+const inputClasses = computed(() => {
+  const pl = props.leadingIcon ? 'pl-12' : 'pl-4'
+  const pr = hasTrailing.value ? 'pr-12' : '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"
+        ref="inputEl"
+        type="text"
+        inputmode="numeric"
+        :value="modelValue"
+        :disabled="disabled"
+        :required="required"
+        placeholder=" "
+        :class="inputClasses"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+
+      <label :for="id" :class="labelClasses">
+        {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
+      </label>
+
+      <button
+        v-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>
+    <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
+  </div>
+</template>