@m3ui-vue/m3ui-vue 0.2.0 → 0.2.1

package/src/components/MTransferList.vue

@@ -3,6 +3,9 @@ import { computed, ref } from 'vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import MCheckbox from './MCheckbox.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface TransferItem {
   value: string | number
@@ -16,7 +19,15 @@ const props = withDefaults(defineProps<{
   sourceTitle?: string
   targetTitle?: string
   filterable?: boolean
-}>(), { sourceTitle: 'Disponibles', targetTitle: 'Seleccionados', filterable: false })
+  searchPlaceholder?: string
+  emptyText?: string
+  moveAllRightLabel?: string
+  moveRightLabel?: string
+  moveLeftLabel?: string
+  moveAllLeftLabel?: string
+}>(), {
+  filterable: false,
+})
 
 const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
 
@@ -83,14 +94,14 @@ function moveAllLeft() {
     <!-- Source list -->
     <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
       <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
-        <span class="text-label-large font-medium text-on-surface">{{ sourceTitle }}</span>
+        <span class="text-label-large font-medium text-on-surface">{{ sourceTitle ?? locale.available }}</span>
         <span class="text-label-small text-on-surface-variant">{{ sourceItems.length }}</span>
       </div>
       <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
         <input
           v-model="sourceSearch"
           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/50"
         />
       </div>
@@ -106,9 +117,11 @@ function moveAllLeft() {
           <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
           <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
         </button>
-        <p v-if="!sourceItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
-          Sin elementos
-        </p>
+        <slot v-if="!sourceItems.length" name="source-empty">
+          <p class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+            {{ emptyText ?? locale.noItems }}
+          </p>
+        </slot>
       </div>
     </div>
 
@@ -116,14 +129,14 @@ function moveAllLeft() {
     <div class="flex flex-col items-center justify-center gap-1">
       <MIconButton
         icon="keyboard_double_arrow_right"
-        label="Mover todos a la derecha"
+        :label="moveAllRightLabel ?? locale.moveAllRight"
         :size="36"
         :disabled="!sourceItems.length"
         @click="moveAllRight"
       />
       <MIconButton
         icon="chevron_right"
-        label="Mover seleccionados a la derecha"
+        :label="moveRightLabel ?? locale.moveRight"
         variant="tonal"
         :size="36"
         :disabled="!checkedSource.size"
@@ -131,7 +144,7 @@ function moveAllLeft() {
       />
       <MIconButton
         icon="chevron_left"
-        label="Mover seleccionados a la izquierda"
+        :label="moveLeftLabel ?? locale.moveLeft"
         variant="tonal"
         :size="36"
         :disabled="!checkedTarget.size"
@@ -139,7 +152,7 @@ function moveAllLeft() {
       />
       <MIconButton
         icon="keyboard_double_arrow_left"
-        label="Mover todos a la izquierda"
+        :label="moveAllLeftLabel ?? locale.moveAllLeft"
         :size="36"
         :disabled="!targetItems.length"
         @click="moveAllLeft"
@@ -149,14 +162,14 @@ function moveAllLeft() {
     <!-- Target list -->
     <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
       <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
-        <span class="text-label-large font-medium text-on-surface">{{ targetTitle }}</span>
+        <span class="text-label-large font-medium text-on-surface">{{ targetTitle ?? locale.selected }}</span>
         <span class="text-label-small text-on-surface-variant">{{ targetItems.length }}</span>
       </div>
       <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
         <input
           v-model="targetSearch"
           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/50"
         />
       </div>
@@ -172,9 +185,11 @@ function moveAllLeft() {
           <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
           <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
         </button>
-        <p v-if="!targetItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
-          Sin elementos
-        </p>
+        <slot v-if="!targetItems.length" name="target-empty">
+          <p class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+            {{ emptyText ?? locale.noItems }}
+          </p>
+        </slot>
       </div>
     </div>
   </div>

package/src/composables/useColorPalette.ts

@@ -7,26 +7,36 @@ export interface Palette {
 }
 
 export const palettes: Palette[] = [
-  { id: 'purple',      label: 'Morado',        seed: '#6750A4' },
-  { id: 'indigo',      label: 'Índigo',        seed: '#4355B9' },
-  { id: 'navy',        label: 'Marino',        seed: '#354BA0' },
-  { id: 'blue',        label: 'Azul',          seed: '#005AC1' },
-  { id: 'cyan',        label: 'Cian',          seed: '#006874' },
-  { id: 'teal',        label: 'Teal',          seed: '#006B5F' },
-  { id: 'green',       label: 'Verde',         seed: '#386A20' },
-  { id: 'lime',        label: 'Lima',          seed: '#4C6706' },
-  { id: 'olive',       label: 'Oliva',         seed: '#636118' },
-  { id: 'amber',       label: 'Ámbar',         seed: '#785900' },
-  { id: 'sand',        label: 'Arena',         seed: '#715C2E' },
-  { id: 'orange',      label: 'Naranja',       seed: '#8B5000' },
-  { id: 'deep-orange', label: 'Naranja oscuro', seed: '#96480A' },
-  { id: 'brown',       label: 'Marrón',        seed: '#6E4C32' },
-  { id: 'red',         label: 'Rojo',          seed: '#B82000' },
-  { id: 'coral',       label: 'Coral',         seed: '#A03530' },
-  { id: 'crimson',     label: 'Carmesí',       seed: '#9C4068' },
-  { id: 'pink',        label: 'Rosa',          seed: '#9C4057' },
-  { id: 'violet',      label: 'Violeta',       seed: '#7C39A4' },
-  { id: 'slate',       label: 'Pizarra',       seed: '#4A6269' },
+  { id: 'purple',      label: 'Purple',      seed: '#6750A4' },
+  { id: 'indigo',      label: 'Indigo',      seed: '#4355B9' },
+  { id: 'navy',        label: 'Navy',        seed: '#354BA0' },
+  { id: 'blue',        label: 'Blue',        seed: '#005AC1' },
+  { id: 'cyan',        label: 'Cyan',        seed: '#006874' },
+  { id: 'teal',        label: 'Teal',        seed: '#006B5F' },
+  { id: 'green',       label: 'Green',       seed: '#386A20' },
+  { id: 'lime',        label: 'Lime',        seed: '#4C6706' },
+  { id: 'olive',       label: 'Olive',       seed: '#636118' },
+  { id: 'amber',       label: 'Amber',       seed: '#785900' },
+  { id: 'sand',        label: 'Sand',        seed: '#715C2E' },
+  { id: 'orange',      label: 'Orange',      seed: '#8B5000' },
+  { id: 'deep-orange', label: 'Deep Orange', seed: '#96480A' },
+  { id: 'brown',       label: 'Brown',       seed: '#6E4C32' },
+  { id: 'red',         label: 'Red',         seed: '#B82000' },
+  { id: 'coral',       label: 'Coral',       seed: '#A03530' },
+  { id: 'crimson',     label: 'Crimson',     seed: '#9C4068' },
+  { id: 'pink',        label: 'Pink',        seed: '#9C4057' },
+  { id: 'violet',      label: 'Violet',      seed: '#7C39A4' },
+  { id: 'slate',       label: 'Slate',       seed: '#4A6269' },
+  { id: 'graphite',    label: 'Graphite',    seed: '#5C5C5C' },
+  { id: 'charcoal',    label: 'Charcoal',    seed: '#3C3C3C' },
+  { id: 'steel',       label: 'Steel',       seed: '#5A6A72' },
+  { id: 'ash',         label: 'Ash',         seed: '#6B6560' },
+  { id: 'iron',        label: 'Iron',        seed: '#505864' },
+  { id: 'fog',         label: 'Fog',         seed: '#625E6E' },
+  { id: 'pewter',      label: 'Pewter',      seed: '#5A6360' },
+  { id: 'smoke',       label: 'Smoke',       seed: '#4D5C66' },
+  { id: 'stone',       label: 'Stone',       seed: '#68635A' },
+  { id: 'zinc',        label: 'Zinc',        seed: '#585B5E' },
 ]
 
 const current = ref(localStorage.getItem('m3-palette') ?? 'purple')

package/src/composables/useLocale.ts

@@ -0,0 +1,181 @@
+import { inject, type InjectionKey } from 'vue'
+
+export interface M3Locale {
+  // Common
+  search: string
+  noResults: string
+  close: string
+  cancel: string
+  confirm: string
+  loading: string
+
+  // Navigation
+  previous: string
+  next: string
+  today: string
+  more: string
+
+  // Tables
+  selectedCount: string
+  recordCount: string
+  expand: string
+  columns: string
+  exportCsv: string
+  noGroup: string
+
+  // Tour
+  finish: string
+
+  // File upload
+  dropText: string
+  selectText: string
+  maxSizePrefix: string
+  remove: string
+
+  // Pickers
+  selectDate: string
+  selectTime: string
+  selectRange: string
+  pickStart: string
+  pickEnd: string
+  previousMonth: string
+  nextMonth: string
+
+  // Scheduler
+  dayView: string
+  weekView: string
+
+  // Transfer list
+  available: string
+  selected: string
+  noItems: string
+  moveAllRight: string
+  moveRight: string
+  moveLeft: string
+  moveAllLeft: string
+
+  // Command palette / Spotlight
+  searchCommand: string
+  navigateHint: string
+  selectHint: string
+  openHint: string
+  closeHint: string
+
+  // Infinite scroll
+  loadingMore: string
+  noMoreItems: string
+
+  // Rich text editor
+  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
+  insert: string
+}
+
+export const defaultLocale: M3Locale = {
+  search: 'Search...',
+  noResults: 'No results',
+  close: 'Close',
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  loading: 'Loading',
+
+  previous: 'Previous',
+  next: 'Next',
+  today: 'Today',
+  more: 'more',
+
+  selectedCount: 'selected',
+  recordCount: 'record',
+  expand: 'Expand',
+  columns: 'Columns',
+  exportCsv: 'Export CSV',
+  noGroup: 'No group',
+
+  finish: 'Finish',
+
+  dropText: 'Drop files here or',
+  selectText: 'browse',
+  maxSizePrefix: 'Max.',
+  remove: 'Remove',
+
+  selectDate: 'Select date',
+  selectTime: 'Select time',
+  selectRange: 'Select range',
+  pickStart: 'Select start',
+  pickEnd: 'Select end',
+  previousMonth: 'Previous month',
+  nextMonth: 'Next month',
+
+  dayView: 'Day',
+  weekView: 'Week',
+
+  available: 'Available',
+  selected: 'Selected',
+  noItems: 'No items',
+  moveAllRight: 'Move all right',
+  moveRight: 'Move selected right',
+  moveLeft: 'Move selected left',
+  moveAllLeft: 'Move all left',
+
+  searchCommand: 'Search command...',
+  navigateHint: 'navigate',
+  selectHint: 'select',
+  openHint: 'open',
+  closeHint: 'close',
+
+  loadingMore: 'Loading...',
+  noMoreItems: 'No more items',
+
+  bold: 'Bold',
+  italic: 'Italic',
+  underline: 'Underline',
+  strikethrough: 'Strikethrough',
+  highlight: 'Highlight',
+  bulletList: 'Bullet list',
+  orderedList: 'Ordered list',
+  blockquote: 'Blockquote',
+  code: 'Code',
+  alignLeft: 'Align left',
+  alignCenter: 'Align center',
+  alignRight: 'Align right',
+  undo: 'Undo',
+  redo: 'Redo',
+  link: 'Link',
+  image: 'Image',
+  paragraph: 'Paragraph',
+  heading1: 'Heading 1',
+  heading2: 'Heading 2',
+  heading3: 'Heading 3',
+  insertLink: 'Insert link',
+  insertImage: 'Insert image',
+  imageUrlLabel: 'Image URL',
+  insert: 'Insert',
+}
+
+export const M3_LOCALE_KEY: InjectionKey<Partial<M3Locale>> = Symbol('m3-locale')
+
+export function useLocale(): M3Locale {
+  const provided = inject(M3_LOCALE_KEY, {})
+  return { ...defaultLocale, ...provided }
+}

package/src/index.ts

@@ -10,6 +10,8 @@ export type { Palette } from './composables/useColorPalette'
 export { useToast } from './composables/useToast'
 export type { Toast, ToastVariant, ToastPosition, ToastAction, ToastOptions } from './composables/useToast'
 export { useFieldBg } from './composables/useFieldBg'
+export { useLocale, defaultLocale } from './composables/useLocale'
+export type { M3Locale } from './composables/useLocale'
 
 // Components
 export { default as MAbsolute } from './components/MAbsolute.vue'

package/src/locales/de.ts

@@ -0,0 +1,93 @@
+import type { M3Locale } from '../composables/useLocale'
+
+export const deLocale: M3Locale = {
+  // Common
+  search: 'Suchen...',
+  noResults: 'Keine Ergebnisse',
+  close: 'Schließen',
+  cancel: 'Abbrechen',
+  confirm: 'Bestätigen',
+  loading: 'Laden',
+
+  // Navigation
+  previous: 'Zurück',
+  next: 'Weiter',
+  today: 'Heute',
+  more: 'mehr',
+
+  // Tables
+  selectedCount: 'ausgewählt',
+  recordCount: 'Datensatz',
+  expand: 'Erweitern',
+  columns: 'Spalten',
+  exportCsv: 'CSV exportieren',
+  noGroup: 'Keine Gruppe',
+
+  // Tour
+  finish: 'Fertig',
+
+  // File upload
+  dropText: 'Dateien hierher ziehen oder',
+  selectText: 'durchsuchen',
+  maxSizePrefix: 'Max.',
+  remove: 'Entfernen',
+
+  // Pickers
+  selectDate: 'Datum auswählen',
+  selectTime: 'Uhrzeit auswählen',
+  selectRange: 'Bereich auswählen',
+  pickStart: 'Anfang auswählen',
+  pickEnd: 'Ende auswählen',
+  previousMonth: 'Vorheriger Monat',
+  nextMonth: 'Nächster Monat',
+
+  // Scheduler
+  dayView: 'Tag',
+  weekView: 'Woche',
+
+  // Transfer list
+  available: 'Verfügbar',
+  selected: 'Ausgewählt',
+  noItems: 'Keine Elemente',
+  moveAllRight: 'Alle nach rechts verschieben',
+  moveRight: 'Auswahl nach rechts verschieben',
+  moveLeft: 'Auswahl nach links verschieben',
+  moveAllLeft: 'Alle nach links verschieben',
+
+  // Command palette / Spotlight
+  searchCommand: 'Befehl suchen...',
+  navigateHint: 'navigieren',
+  selectHint: 'auswählen',
+  openHint: 'öffnen',
+  closeHint: 'schließen',
+
+  // Infinite scroll
+  loadingMore: 'Laden...',
+  noMoreItems: 'Keine weiteren Elemente',
+
+  // Rich text editor
+  bold: 'Fett',
+  italic: 'Kursiv',
+  underline: 'Unterstrichen',
+  strikethrough: 'Durchgestrichen',
+  highlight: 'Hervorheben',
+  bulletList: 'Aufzählungsliste',
+  orderedList: 'Nummerierte Liste',
+  blockquote: 'Zitat',
+  code: 'Code',
+  alignLeft: 'Linksbündig',
+  alignCenter: 'Zentriert',
+  alignRight: 'Rechtsbündig',
+  undo: 'Rückgängig',
+  redo: 'Wiederholen',
+  link: 'Link',
+  image: 'Bild',
+  paragraph: 'Absatz',
+  heading1: 'Überschrift 1',
+  heading2: 'Überschrift 2',
+  heading3: 'Überschrift 3',
+  insertLink: 'Link einfügen',
+  insertImage: 'Bild einfügen',
+  imageUrlLabel: 'Bild-URL',
+  insert: 'Einfügen',
+}

package/src/locales/es.ts

@@ -0,0 +1,93 @@
+import type { M3Locale } from '../composables/useLocale'
+
+export const esLocale: M3Locale = {
+  // Common
+  search: 'Buscar...',
+  noResults: 'Sin resultados',
+  close: 'Cerrar',
+  cancel: 'Cancelar',
+  confirm: 'Confirmar',
+  loading: 'Cargando',
+
+  // Navigation
+  previous: 'Anterior',
+  next: 'Siguiente',
+  today: 'Hoy',
+  more: 'más',
+
+  // Tables
+  selectedCount: 'seleccionados',
+  recordCount: 'registro',
+  expand: 'Expandir',
+  columns: 'Columnas',
+  exportCsv: 'Exportar CSV',
+  noGroup: 'Sin grupo',
+
+  // Tour
+  finish: 'Finalizar',
+
+  // File upload
+  dropText: 'Arrastra archivos aquí o',
+  selectText: 'explorar',
+  maxSizePrefix: 'Máx.',
+  remove: 'Eliminar',
+
+  // Pickers
+  selectDate: 'Seleccionar fecha',
+  selectTime: 'Seleccionar hora',
+  selectRange: 'Seleccionar rango',
+  pickStart: 'Seleccionar inicio',
+  pickEnd: 'Seleccionar fin',
+  previousMonth: 'Mes anterior',
+  nextMonth: 'Mes siguiente',
+
+  // Scheduler
+  dayView: 'Día',
+  weekView: 'Semana',
+
+  // Transfer list
+  available: 'Disponibles',
+  selected: 'Seleccionados',
+  noItems: 'Sin elementos',
+  moveAllRight: 'Mover todos a la derecha',
+  moveRight: 'Mover seleccionados a la derecha',
+  moveLeft: 'Mover seleccionados a la izquierda',
+  moveAllLeft: 'Mover todos a la izquierda',
+
+  // Command palette / Spotlight
+  searchCommand: 'Buscar comando...',
+  navigateHint: 'navegar',
+  selectHint: 'seleccionar',
+  openHint: 'abrir',
+  closeHint: 'cerrar',
+
+  // Infinite scroll
+  loadingMore: 'Cargando...',
+  noMoreItems: 'No hay más elementos',
+
+  // Rich text editor
+  bold: 'Negrita',
+  italic: 'Cursiva',
+  underline: 'Subrayado',
+  strikethrough: 'Tachado',
+  highlight: 'Resaltar',
+  bulletList: 'Lista con viñetas',
+  orderedList: 'Lista ordenada',
+  blockquote: 'Cita',
+  code: 'Código',
+  alignLeft: 'Alinear a la izquierda',
+  alignCenter: 'Centrar',
+  alignRight: 'Alinear a la derecha',
+  undo: 'Deshacer',
+  redo: 'Rehacer',
+  link: 'Enlace',
+  image: 'Imagen',
+  paragraph: 'Párrafo',
+  heading1: 'Encabezado 1',
+  heading2: 'Encabezado 2',
+  heading3: 'Encabezado 3',
+  insertLink: 'Insertar enlace',
+  insertImage: 'Insertar imagen',
+  imageUrlLabel: 'URL de la imagen',
+  insert: 'Insertar',
+}

package/src/locales/fr.ts

@@ -0,0 +1,93 @@
+import type { M3Locale } from '../composables/useLocale'
+
+export const frLocale: M3Locale = {
+  // Common
+  search: 'Rechercher...',
+  noResults: 'Aucun résultat',
+  close: 'Fermer',
+  cancel: 'Annuler',
+  confirm: 'Confirmer',
+  loading: 'Chargement',
+
+  // Navigation
+  previous: 'Précédent',
+  next: 'Suivant',
+  today: "Aujourd'hui",
+  more: 'plus',
+
+  // Tables
+  selectedCount: 'sélectionnés',
+  recordCount: 'enregistrement',
+  expand: 'Développer',
+  columns: 'Colonnes',
+  exportCsv: 'Exporter CSV',
+  noGroup: 'Sans groupe',
+
+  // Tour
+  finish: 'Terminer',
+
+  // File upload
+  dropText: 'Déposez les fichiers ici ou',
+  selectText: 'parcourir',
+  maxSizePrefix: 'Max.',
+  remove: 'Supprimer',
+
+  // Pickers
+  selectDate: 'Sélectionner la date',
+  selectTime: "Sélectionner l'heure",
+  selectRange: 'Sélectionner la plage',
+  pickStart: 'Sélectionner le début',
+  pickEnd: 'Sélectionner la fin',
+  previousMonth: 'Mois précédent',
+  nextMonth: 'Mois suivant',
+
+  // Scheduler
+  dayView: 'Jour',
+  weekView: 'Semaine',
+
+  // Transfer list
+  available: 'Disponibles',
+  selected: 'Sélectionnés',
+  noItems: 'Aucun élément',
+  moveAllRight: 'Tout déplacer à droite',
+  moveRight: 'Déplacer la sélection à droite',
+  moveLeft: 'Déplacer la sélection à gauche',
+  moveAllLeft: 'Tout déplacer à gauche',
+
+  // Command palette / Spotlight
+  searchCommand: 'Rechercher une commande...',
+  navigateHint: 'naviguer',
+  selectHint: 'sélectionner',
+  openHint: 'ouvrir',
+  closeHint: 'fermer',
+
+  // Infinite scroll
+  loadingMore: 'Chargement...',
+  noMoreItems: "Plus d'éléments",
+
+  // Rich text editor
+  bold: 'Gras',
+  italic: 'Italique',
+  underline: 'Souligné',
+  strikethrough: 'Barré',
+  highlight: 'Surligner',
+  bulletList: 'Liste à puces',
+  orderedList: 'Liste numérotée',
+  blockquote: 'Citation',
+  code: 'Code',
+  alignLeft: 'Aligner à gauche',
+  alignCenter: 'Centrer',
+  alignRight: 'Aligner à droite',
+  undo: 'Annuler',
+  redo: 'Rétablir',
+  link: 'Lien',
+  image: 'Image',
+  paragraph: 'Paragraphe',
+  heading1: 'Titre 1',
+  heading2: 'Titre 2',
+  heading3: 'Titre 3',
+  insertLink: 'Insérer un lien',
+  insertImage: 'Insérer une image',
+  imageUrlLabel: "URL de l'image",
+  insert: 'Insérer',
+}

package/src/locales/index.ts

@@ -0,0 +1,8 @@
+export { esLocale } from './es'
+export { frLocale } from './fr'
+export { ptLocale } from './pt'
+export { deLocale } from './de'
+export { jaLocale } from './ja'
+export { zhLocale } from './zh'
+export { koLocale } from './ko'
+export type { M3Locale } from '../composables/useLocale'