@m3ui-vue/m3ui-vue 0.2.0 → 0.2.1

package/src/components/MMultiSelect.vue

@@ -3,6 +3,9 @@ import { computed, ref, useId, onMounted, onUnmounted, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
 import MCheckbox from './MCheckbox.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface MultiSelectOption {
   label: string
@@ -26,6 +29,8 @@ const props = withDefaults(
     searchable?: boolean
     maxChips?: number
     clearable?: boolean
+    searchPlaceholder?: string
+    noResultsText?: string
   }>(),
   {
     modelValue: () => [],
@@ -299,7 +304,7 @@ const labelClasses = computed(() => {
               ref="searchInput"
               v-model="search"
               type="text"
-              placeholder="Buscar..."
+              :placeholder="searchPlaceholder ?? locale.search"
               class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
             />
           </div>
@@ -319,12 +324,11 @@ const labelClasses = computed(() => {
             />
             <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>
+          <slot v-if="filteredOptions.length === 0" name="no-results">
+            <p class="px-4 py-3 text-center text-body-small text-on-surface-variant">
+              {{ noResultsText ?? locale.noResults }}
+            </p>
+          </slot>
         </div>
       </div>
     </Transition>

package/src/components/MRichTextEditor.vue

@@ -6,6 +6,37 @@ import MMenuItem from './MMenuItem.vue'
 import MDialog from './MDialog.vue'
 import MTextField from './MTextField.vue'
 import MButton from './MButton.vue'
+import { useLocale } from '../composables/useLocale'
+
+export interface RichTextEditorLabels {
+  bold?: string
+  italic?: string
+  underline?: string
+  strikethrough?: string
+  highlight?: string
+  bulletList?: string
+  orderedList?: string
+  blockquote?: string
+  code?: string
+  alignLeft?: string
+  alignCenter?: string
+  alignRight?: string
+  undo?: string
+  redo?: string
+  link?: string
+  image?: string
+  paragraph?: string
+  heading1?: string
+  heading2?: string
+  heading3?: string
+  insertLink?: string
+  insertImage?: string
+  imageUrlLabel?: string
+  cancel?: string
+  insert?: string
+}
+
+const locale = useLocale()
 
 const props = withDefaults(
   defineProps<{
@@ -13,10 +44,40 @@ const props = withDefaults(
     placeholder?: string
     disabled?: boolean
     minHeight?: string
+    labels?: RichTextEditorLabels
   }>(),
-  { placeholder: 'Escribe aquí...', disabled: false, minHeight: '200px' },
+  { disabled: false, minHeight: '200px' },
 )
 
+const l = computed<Required<RichTextEditorLabels>>(() => ({
+  bold: locale.bold,
+  italic: locale.italic,
+  underline: locale.underline,
+  strikethrough: locale.strikethrough,
+  highlight: locale.highlight,
+  bulletList: locale.bulletList,
+  orderedList: locale.orderedList,
+  blockquote: locale.blockquote,
+  code: locale.code,
+  alignLeft: locale.alignLeft,
+  alignCenter: locale.alignCenter,
+  alignRight: locale.alignRight,
+  undo: locale.undo,
+  redo: locale.redo,
+  link: locale.link,
+  image: locale.image,
+  paragraph: locale.paragraph,
+  heading1: locale.heading1,
+  heading2: locale.heading2,
+  heading3: locale.heading3,
+  insertLink: locale.insertLink,
+  insertImage: locale.insertImage,
+  imageUrlLabel: locale.imageUrlLabel,
+  cancel: locale.cancel,
+  insert: locale.insert,
+  ...props.labels,
+}))
+
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
 
 const ready = ref(false)
@@ -68,7 +129,7 @@ onMounted(async () => {
       Link.configure({ openOnClick: false }),
       Image,
       Highlight.configure({ multicolor: true }),
-      Placeholder.configure({ placeholder: props.placeholder }),
+      Placeholder.configure({ placeholder: props.placeholder ?? 'Start writing...' }),
       TextStyle,
       Color,
     ],
@@ -79,26 +140,26 @@ onMounted(async () => {
 
   toolGroups.value = [
     [
-      { icon: 'format_bold', label: 'Negrita', action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },
-      { icon: 'format_italic', label: 'Cursiva', action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },
-      { icon: 'format_underlined', label: 'Subrayado', action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },
-      { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },
-      { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },
+      { icon: 'format_bold', label: l.value.bold, action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },
+      { icon: 'format_italic', label: l.value.italic, action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },
+      { icon: 'format_underlined', label: l.value.underline, action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },
+      { icon: 'format_strikethrough', label: l.value.strikethrough, action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },
+      { icon: 'ink_highlighter', label: l.value.highlight, action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },
     ],
     [
-      { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },
-      { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },
-      { icon: 'format_quote', label: 'Cita', action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },
-      { icon: 'code', label: 'Código', action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },
+      { icon: 'format_list_bulleted', label: l.value.bulletList, action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },
+      { icon: 'format_list_numbered', label: l.value.orderedList, action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },
+      { icon: 'format_quote', label: l.value.blockquote, action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },
+      { icon: 'code', label: l.value.code, action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },
     ],
     [
-      { icon: 'format_align_left', label: 'Izquierda', action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },
-      { icon: 'format_align_center', label: 'Centro', action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },
-      { icon: 'format_align_right', label: 'Derecha', action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },
+      { icon: 'format_align_left', label: l.value.alignLeft, action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },
+      { icon: 'format_align_center', label: l.value.alignCenter, action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },
+      { icon: 'format_align_right', label: l.value.alignRight, action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },
     ],
     [
-      { icon: 'undo', label: 'Deshacer', action: () => editor.chain().focus().undo().run() },
-      { icon: 'redo', label: 'Rehacer', action: () => editor.chain().focus().redo().run() },
+      { icon: 'undo', label: l.value.undo, action: () => editor.chain().focus().undo().run() },
+      { icon: 'redo', label: l.value.redo, action: () => editor.chain().focus().redo().run() },
     ],
   ]
 
@@ -120,11 +181,11 @@ const imageUrl = ref('')
 
 const headingLabel = computed(() => {
   const e = editorRef.value
-  if (!e) return 'Párrafo'
-  if (e.isActive('heading', { level: 1 })) return 'Título 1'
-  if (e.isActive('heading', { level: 2 })) return 'Título 2'
-  if (e.isActive('heading', { level: 3 })) return 'Título 3'
-  return 'Párrafo'
+  if (!e) return l.value.paragraph
+  if (e.isActive('heading', { level: 1 })) return l.value.heading1
+  if (e.isActive('heading', { level: 2 })) return l.value.heading2
+  if (e.isActive('heading', { level: 3 })) return l.value.heading3
+  return l.value.paragraph
 })
 
 function setHeading(level: 0 | 1 | 2 | 3) {
@@ -171,10 +232,10 @@ function confirmImage() {
             <MIcon name="arrow_drop_down" :size="20" />
           </button>
         </template>
-        <MMenuItem @click="setHeading(0)">Párrafo</MMenuItem>
-        <MMenuItem @click="setHeading(1)">Título 1</MMenuItem>
-        <MMenuItem @click="setHeading(2)">Título 2</MMenuItem>
-        <MMenuItem @click="setHeading(3)">Título 3</MMenuItem>
+        <MMenuItem @click="setHeading(0)">{{ l.paragraph }}</MMenuItem>
+        <MMenuItem @click="setHeading(1)">{{ l.heading1 }}</MMenuItem>
+        <MMenuItem @click="setHeading(2)">{{ l.heading2 }}</MMenuItem>
+        <MMenuItem @click="setHeading(3)">{{ l.heading3 }}</MMenuItem>
       </MMenu>
 
       <div class="mx-1 h-6 w-px bg-outline-variant" />
@@ -198,7 +259,7 @@ function confirmImage() {
 
       <button
         type="button"
-        title="Enlace"
+        :title="l.link"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8"
         @click="openLinkDialog"
       >
@@ -206,7 +267,7 @@ function confirmImage() {
       </button>
       <button
         type="button"
-        title="Imagen"
+        :title="l.image"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8"
         @click="openImageDialog"
       >
@@ -222,20 +283,20 @@ function confirmImage() {
     />
 
     <!-- Link dialog -->
-    <MDialog v-model="linkDialogOpen" title="Insertar enlace">
+    <MDialog v-model="linkDialogOpen" :title="l.insertLink">
       <MTextField v-model="linkUrl" label="URL" placeholder=" " @keydown.enter="confirmLink" />
       <template #actions>
-        <MButton variant="text" @click="linkDialogOpen = false">Cancelar</MButton>
-        <MButton @click="confirmLink">Insertar</MButton>
+        <MButton variant="text" @click="linkDialogOpen = false">{{ l.cancel }}</MButton>
+        <MButton @click="confirmLink">{{ l.insert }}</MButton>
       </template>
     </MDialog>
 
     <!-- Image dialog -->
-    <MDialog v-model="imageDialogOpen" title="Insertar imagen">
-      <MTextField v-model="imageUrl" label="URL de la imagen" placeholder=" " @keydown.enter="confirmImage" />
+    <MDialog v-model="imageDialogOpen" :title="l.insertImage">
+      <MTextField v-model="imageUrl" :label="l.imageUrlLabel" placeholder=" " @keydown.enter="confirmImage" />
       <template #actions>
-        <MButton variant="text" @click="imageDialogOpen = false">Cancelar</MButton>
-        <MButton @click="confirmImage">Insertar</MButton>
+        <MButton variant="text" @click="imageDialogOpen = false">{{ l.cancel }}</MButton>
+        <MButton @click="confirmImage">{{ l.insert }}</MButton>
       </template>
     </MDialog>
   </div>

package/src/components/MScheduler.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import MIconButton from './MIconButton.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface SchedulerEvent {
   id: string | number
@@ -17,6 +20,11 @@ const props = withDefaults(
     startHour?: number
     endHour?: number
     locale?: string
+    prevLabel?: string
+    nextLabel?: string
+    todayLabel?: string
+    dayViewLabel?: string
+    weekViewLabel?: string
   }>(),
   {
     events: () => [],
@@ -135,14 +143,14 @@ const eventColors: Record<string, string> = {
     <!-- Header -->
     <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-3">
       <div class="flex items-center gap-1">
-        <MIconButton icon="chevron_left" label="Anterior" :size="36" @click="navigate(-1)" />
-        <MIconButton icon="chevron_right" label="Siguiente" :size="36" @click="navigate(1)" />
+        <MIconButton icon="chevron_left" :label="prevLabel ?? locale.previous" :size="36" @click="navigate(-1)" />
+        <MIconButton icon="chevron_right" :label="nextLabel ?? locale.next" :size="36" @click="navigate(1)" />
         <button
           type="button"
           class="ml-2 cursor-pointer rounded-full border border-outline px-3 py-1 text-label-medium text-on-surface transition-colors hover:bg-on-surface/8"
           @click="goToday"
         >
-          Hoy
+          {{ todayLabel ?? locale.today }}
         </button>
       </div>
 
@@ -157,7 +165,7 @@ const eventColors: Record<string, string> = {
           :class="currentView === v ? 'bg-secondary-container text-on-secondary-container shadow-elevation-1' : 'text-on-surface-variant hover:bg-on-surface/8'"
           @click="currentView = v"
         >
-          {{ v === 'day' ? 'Día' : 'Semana' }}
+          {{ v === 'day' ? (dayViewLabel ?? locale.dayView) : (weekViewLabel ?? locale.weekView) }}
         </button>
       </div>
     </div>

package/src/components/MSnackbar.vue

@@ -2,6 +2,13 @@
 import { computed } from "vue";
 import { useToast } from "../composables/useToast";
 import MIcon from "./MIcon.vue";
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  closeAriaLabel?: string
+}>()
+
+const locale = useLocale()
 
 const { toasts, position, dismiss } = useToast();
 
@@ -117,7 +124,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
               type="button"
               class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors"
               :class="t.color ? 'text-white/60 hover:bg-white/15' : getVariantStyle(t.variant).close"
-              aria-label="Cerrar"
+              :aria-label="closeAriaLabel ?? locale.close"
               @click="dismiss(t.id)"
             >
               <MIcon name="close" :size="18" />

package/src/components/MSpinner.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useLocale } from '../composables/useLocale';
 
 const props = withDefaults(
   defineProps<{
     size?: number;
     wavy?: boolean;
+    label?: string;
   }>(),
   { size: 20, wavy: false },
 );
 
+const locale = useLocale();
+
 const STROKE = 3;
 const BUMPS = 9;
 
@@ -56,7 +60,7 @@ const wavyData = computed(() => {
     class="inline-flex shrink-0 items-center justify-center"
     :style="{ width: `${size}px`, height: `${size}px` }"
     role="status"
-    aria-label="Cargando"
+    :aria-label="label ?? locale.loading"
   >
     <!-- Standard circular spinner -->
     <span

package/src/components/MSpotlightSearch.vue

@@ -2,6 +2,9 @@
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import MIcon from './MIcon.vue'
 import MSpinner from './MSpinner.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface SpotlightResult {
   id: string | number
@@ -20,12 +23,13 @@ const props = withDefaults(
     noResultsText?: string
     hotkey?: string
     debounce?: number
+    navigateHint?: string
+    openHint?: string
+    closeHint?: string
   }>(),
   {
     results: () => [],
-    placeholder: 'Buscar...',
     loading: false,
-    noResultsText: 'No se encontraron resultados',
     hotkey: '/',
     debounce: 0,
   },
@@ -148,7 +152,7 @@ onBeforeUnmount(() => {
               ref="inputRef"
               v-model="query"
               type="text"
-              :placeholder="placeholder"
+              :placeholder="placeholder ?? locale.search"
               class="h-14 flex-1 bg-transparent text-title-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
               @keydown="onKeydown"
             />
@@ -198,20 +202,20 @@ onBeforeUnmount(() => {
             </template>
             <div v-else-if="!loading" class="flex flex-col items-center gap-2 py-10">
               <MIcon name="search_off" :size="40" class="text-on-surface-variant/40" />
-              <p class="text-body-medium text-on-surface-variant">{{ noResultsText }}</p>
+              <p class="text-body-medium text-on-surface-variant">{{ noResultsText ?? locale.noResults }}</p>
             </div>
           </div>
 
           <!-- Hints -->
           <div class="flex items-center gap-4 border-t border-outline-variant px-5 py-2">
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> navegar
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> {{ navigateHint ?? locale.navigateHint }}
             </span>
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> abrir
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> {{ openHint ?? locale.openHint }}
             </span>
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> cerrar
+              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> {{ closeHint ?? locale.closeHint }}
             </span>
           </div>
         </div>

package/src/components/MTable.vue

@@ -3,6 +3,9 @@ import { computed, onMounted, ref, watch } from 'vue'
 import MCheckbox from './MCheckbox.vue'
 import MIcon from './MIcon.vue'
 import MPagination from './MPagination.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface TableColumn {
   key: string
@@ -38,10 +41,11 @@ const props = withDefaults(
     serverSide?: boolean
     total?: number
     page?: number
+    searchPlaceholder?: string
+    selectedText?: string
   }>(),
   {
     loading: false,
-    emptyText: 'Sin resultados',
     rowKey: 'id',
     selectable: false,
     modelValue: () => [],
@@ -228,7 +232,7 @@ const hasActions = computed(() => !!slots['row-actions'])
         <input
           v-model="search"
           type="text"
-          placeholder="Buscar..."
+          :placeholder="searchPlaceholder ?? locale.search"
           class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
         />
         <button
@@ -254,7 +258,7 @@ const hasActions = computed(() => !!slots['row-actions'])
           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>
     </div>
@@ -346,7 +350,7 @@ const hasActions = computed(() => !!slots['row-actions'])
               >
                 <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>

package/src/components/MTimePicker.vue

@@ -2,10 +2,12 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import MIcon from './MIcon.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<{
   modelValue: string | null
   label?: string
+  placeholder?: string
   disabled?: boolean
   error?: string
   hint?: string
@@ -14,6 +16,8 @@ const props = withDefaults(defineProps<{
   fieldBg?: string
 }>(), { minuteStep: 5, use24h: true })
 
+const locale = useLocale()
+
 const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
 
 const open = ref(false)
@@ -129,7 +133,7 @@ onUnmounted(() => {
       >
         <MIcon name="schedule" :size="20" class="shrink-0 text-on-surface-variant" />
         <span v-if="displayValue" class="flex-1 font-mono text-on-surface">{{ displayValue }}</span>
-        <span v-else class="flex-1 text-on-surface-variant">{{ label || 'Seleccionar hora' }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ label || placeholder || locale.selectTime }}</span>
         <MIcon
           v-if="modelValue"
           name="close"

package/src/components/MTour.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import MButton from './MButton.vue'
 import MIcon from './MIcon.vue'
+import { useLocale } from '../composables/useLocale'
 
 export interface TourStep {
   target: string
@@ -10,13 +11,15 @@ export interface TourStep {
   placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    steps: TourStep[]
-  }>(),
-  {},
-)
+const props = defineProps<{
+  modelValue: boolean
+  steps: TourStep[]
+  prevLabel?: string
+  nextLabel?: string
+  finishLabel?: string
+}>()
+
+const locale = useLocale()
 
 const emit = defineEmits<{
   'update:modelValue': [boolean]
@@ -237,11 +240,11 @@ onBeforeUnmount(() => { stopListeners(); clearHighlight() })
             variant="text"
             @click="goPrev"
           >
-            Anterior
+            {{ prevLabel ?? locale.previous }}
           </MButton>
           <span v-else />
           <MButton @click="goNext">
-            {{ isLast ? 'Finalizar' : 'Siguiente' }}
+            {{ isLast ? (finishLabel ?? locale.finish) : (nextLabel ?? locale.next) }}
           </MButton>
         </div>
       </div>