@maz-ui/translations 4.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LouisMazel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,262 @@
+# @maz-ui/translations
+
+Simple and lightweight translation system for Maz-UI components.
+
+## Installation
+
+```bash
+npm install @maz-ui/translations
+```
+
+## Features
+
+- 🌍 **Simple internationalization** for Maz-UI components
+- 🔄 **Reactive locale switching**
+- 📝 **Variable interpolation** in translations
+- 🎯 **TypeScript support** with full type safety
+- 🔧 **Plugin-based** integration with Vue applications
+- 📦 **Lightweight** - minimal bundle size impact
+- 🎨 **Customizable** - override default translations easily
+
+## Usage
+
+### Basic Configuration
+
+```typescript
+import { MazTranslationsPlugin } from '@maz-ui/translations'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+app.use(MazTranslationsPlugin, {
+  locale: 'fr',
+  translations: {
+    fr: {
+      select: { noOptions: 'Aucune option disponible' },
+      input: { required: 'Ce champ est requis' }
+    },
+    es: {
+      select: { noOptions: 'No hay opciones disponibles' },
+      input: { required: 'Este campo es obligatorio' }
+    }
+  }
+})
+```
+
+### In Vue Components
+
+```vue
+<script setup>
+import { useTranslations } from '@maz-ui/translations'
+
+const { t, locale, setLocale } = useTranslations()
+
+// Basic usage
+const message = t('select.noOptions')
+
+// With variables
+const welcomeMessage = t('input.welcome', { name: 'John' })
+
+// Change language
+function switchLanguage(lang) {
+  setLocale(lang)
+}
+</script>
+
+<template>
+  <div>
+    <p>{{ t('select.noOptions') }}</p>
+    <p>{{ t('input.welcome', { name: 'User' }) }}</p>
+
+    <div class="language-switcher">
+      <button @click="setLocale('en')">
+        English
+      </button>
+      <button @click="setLocale('fr')">
+        Français
+      </button>
+      <button @click="setLocale('es')">
+        Español
+      </button>
+    </div>
+
+    <p>Current locale: {{ locale }}</p>
+  </div>
+</template>
+```
+
+### Variable Interpolation
+
+The translation system supports variable interpolation using curly braces:
+
+```typescript
+// Configuration
+const translations = {
+  en: {
+    welcome: 'Hello {name}!',
+    itemCount: 'You have {count} {count, plural, one {item} other {items}}'
+  }
+}
+
+// Usage
+t('welcome', { name: 'John' }) // "Hello John!"
+t('itemCount', { count: 1 }) // "You have 1 item"
+t('itemCount', { count: 5 }) // "You have 5 items"
+```
+
+### Advanced Usage
+
+#### Manual Instance Creation
+
+```typescript
+import { createMazTranslations } from '@maz-ui/translations'
+
+const i18n = createMazTranslations({
+  locale: 'en',
+  translations: {
+    en: { /* your translations */ },
+    fr: { /* your translations */ }
+  }
+})
+
+// Use directly
+const message = i18n.t('select.noOptions')
+```
+
+#### Custom Translation Keys
+
+```typescript
+// Define your own translation structure
+const customTranslations = {
+  en: {
+    navigation: {
+      home: 'Home',
+      about: 'About',
+      contact: 'Contact'
+    },
+    form: {
+      validation: {
+        required: 'This field is required',
+        email: 'Please enter a valid email'
+      }
+    }
+  }
+}
+```
+
+## API Reference
+
+### `useTranslations()`
+
+Returns an object with:
+
+- **`t(key, variables?)`** - Translation function
+  - `key`: Translation key (dot notation supported)
+  - `variables`: Optional object with variable substitutions
+  - Returns: Translated string or key if not found
+
+- **`locale`** - Current locale (reactive ref)
+  - Type: `Ref<string>`
+  - Reactive property that updates when locale changes
+
+- **`setLocale(locale)`** - Change current locale
+  - `locale`: New locale string
+  - Triggers reactivity for all components using translations
+
+### Plugin Options
+
+```typescript
+interface MazTranslationsOptions {
+  locale?: string // Default locale (default: 'en')
+  translations?: Record<string, Partial<MazTranslations>> // Custom translations
+}
+```
+
+### Type Definitions
+
+```typescript
+interface MazTranslationsInstance {
+  locale: Ref<string>
+  t: (key: string, variables?: Record<string, any>) => string
+  setLocale: (locale: string) => void
+}
+
+interface MazTranslations {
+  select: { noOptions: string }
+  input: { required: string }
+  datePicker: { placeholder: string }
+  // ... other component translations
+}
+```
+
+## Default Translations
+
+The package includes default English translations for Maz-UI components. You can override any of these by providing your own translations.
+
+### Default Structure
+
+```typescript
+const defaultTranslations = {
+  select: {
+    noOptions: 'No options available'
+  },
+  input: {
+    required: 'This field is required'
+  },
+  datePicker: {
+    placeholder: 'Select date...'
+  }
+}
+```
+
+### Adding New Languages
+
+```typescript
+app.use(MazTranslationsPlugin, {
+  locale: 'fr',
+  translations: {
+    fr: {
+      select: { noOptions: 'Aucune option disponible' },
+      input: { required: 'Ce champ est requis' },
+      datePicker: { placeholder: 'Sélectionner une date...' }
+    },
+    de: {
+      select: { noOptions: 'Keine Optionen verfügbar' },
+      input: { required: 'Dieses Feld ist erforderlich' },
+      datePicker: { placeholder: 'Datum auswählen...' }
+    }
+  }
+})
+```
+
+### Handle Pluralization
+
+```typescript
+// Simple approach
+const simpleTranslations = {
+  en: {
+    itemCount: '{count} item(s)'
+  }
+}
+
+// Better approach
+const betterTranslations = {
+  en: {
+    itemCountSingular: '{count} item',
+    itemCountPlural: '{count} items'
+  }
+}
+```
+
+## Contributing
+
+Contributions are welcome! Please ensure:
+
+- New translations follow the existing key structure
+- TypeScript types are properly updated
+- Tests are added for new features
+- Documentation is updated accordingly
+
+## License
+
+MIT License - see LICENSE file for details.

package/dist/chunks/de.mjs

@@ -0,0 +1,81 @@
+const de = {
+  selectCountry: {
+    searchPlaceholder: "Land suchen"
+  },
+  inputPhoneNumber: {
+    countrySelect: {
+      placeholder: "L\xE4ndercode",
+      error: "Land w\xE4hlen",
+      searchPlaceholder: "Land suchen"
+    },
+    phoneInput: {
+      placeholder: "Telefonnummer",
+      example: "Beispiel: {example}"
+    }
+  },
+  dropzone: {
+    dragAndDrop: "Dateien ablegen",
+    selectFile: "Datei ausw\xE4hlen",
+    divider: "oder",
+    fileMaxCount: "Maximal {count} Dateien",
+    fileMaxSize: "Maximal {size} MB",
+    fileTypes: "Erlaubte Dateitypen: {types}"
+  },
+  datePicker: {
+    shortcuts: {
+      lastSevenDays: "Letzte 7 Tage",
+      lastThirtyDays: "Letzte 30 Tage",
+      thisWeek: "Diese Woche",
+      lastWeek: "Letzte Woche",
+      thisMonth: "Dieser Monat",
+      thisYear: "Dieses Jahr",
+      lastYear: "Letztes Jahr"
+    }
+  },
+  dropdown: {
+    screenReaderDescription: "Dropdown-Men\xFC \xF6ffnen"
+  },
+  select: {
+    searchPlaceholder: "Suchen"
+  },
+  table: {
+    noResults: "Keine Ergebnisse",
+    actionColumnTitle: "Aktionen",
+    searchByInput: {
+      all: "Alle",
+      placeholder: "Suchen nach"
+    },
+    searchInput: {
+      placeholder: "Suchen"
+    },
+    pagination: {
+      all: "Alle",
+      rowsPerPage: "Zeilen pro Seite",
+      of: "von"
+    }
+  },
+  pagination: {
+    navAriaLabel: "Seitennavigation",
+    screenReader: {
+      firstPage: "Erste Seite, Seite {page}",
+      previousPage: "Vorherige Seite, Seite {page}",
+      page: "Seite {page}",
+      nextPage: "N\xE4chste Seite, Seite {page}",
+      lastPage: "Letzte Seite, Seite {page}"
+    }
+  },
+  carousel: {
+    ariaLabel: {
+      previousButton: "Zu vorherigen Elementen scrollen",
+      nextButton: "Zu n\xE4chsten Elementen scrollen"
+    }
+  },
+  checklist: {
+    noResultsFound: "Keine Ergebnisse gefunden",
+    searchInput: {
+      placeholder: "Suchen"
+    }
+  }
+};
+
+export { de as default };

package/dist/chunks/en.mjs

@@ -0,0 +1,144 @@
+const en = {
+  /**
+   * This is the translation for the input phone number component.
+   * The keys are:
+   * - countrySelect: The translation for the country select.
+   * - phoneInput: The translation for the phone input.
+   */
+  selectCountry: {
+    searchPlaceholder: "Search country"
+  },
+  inputPhoneNumber: {
+    /**
+     * This is the translation for the country select component.
+     * The keys are:
+     * - placeholder: The translation for the placeholder text.
+     * - error: The translation for the error text.
+     * - searchPlaceholder: The translation for the search placeholder text.
+     */
+    countrySelect: {
+      placeholder: "Country code",
+      error: "Choose country",
+      searchPlaceholder: "Search the country"
+    },
+    /**
+     * This is the translation for the phone input component.
+     * The keys are:
+     * - placeholder: The translation for the placeholder text.
+     * - example: The translation for the example text.
+     */
+    phoneInput: {
+      placeholder: "Phone number",
+      example: "Example: {example}"
+    }
+  },
+  /**
+   * This is the translation for the dropzone component.
+   * The keys are:
+   * - dragAndDrop: The translation for the drag and drop text.
+   * - selectFile: The translation for the select file button.
+   * - divider: The translation for the divider text.
+   * - fileMaxCount: The translation for the maximum number of files.
+   * - fileMaxSize: The translation for the maximum size of the files.
+   * - fileTypes: The translation for the allowed file types.
+   */
+  dropzone: {
+    dragAndDrop: "Drop your files",
+    selectFile: "Select file",
+    divider: "or",
+    fileMaxCount: "Maximum {count} files",
+    fileMaxSize: "Maximum {size} MB",
+    fileTypes: "Allowed file types: {types}"
+  },
+  /**
+   * This is the translation for the date picker component.
+   * The keys are:
+   * - shortcuts: The translation for the shortcuts.
+   */
+  datePicker: {
+    shortcuts: {
+      lastSevenDays: "Last 7 days",
+      lastThirtyDays: "Last 30 days",
+      thisWeek: "This week",
+      lastWeek: "Last week",
+      thisMonth: "This month",
+      thisYear: "This year",
+      lastYear: "Last year"
+    }
+  },
+  /**
+   * This is the translation for the dropdown component.
+   * The keys are:
+   * - screenReaderDescription: The translation for the screen reader description.
+   */
+  dropdown: {
+    screenReaderDescription: "Open menu dropdown"
+  },
+  /**
+   * This is the translation for the select component.
+   * The keys are:
+   * - searchPlaceholder: The translation for the search placeholder text.
+   */
+  select: {
+    searchPlaceholder: "Search"
+  },
+  /**
+   * This is the translation for the table component.
+   * The keys are:
+   * - noResults: The translation for the no results text.
+   * - actionColumnTitle: The translation for the action column title.
+   * - searchByInput: The translation for the search by input.
+   * - searchInput: The translation for the search input.
+   * - pagination: The translation for the pagination component.
+   */
+  table: {
+    noResults: "No results",
+    actionColumnTitle: "Actions",
+    searchByInput: {
+      all: "All",
+      placeholder: "Search by"
+    },
+    searchInput: {
+      placeholder: "Search"
+    },
+    pagination: {
+      all: "All",
+      rowsPerPage: "Rows per page",
+      of: "of"
+    }
+  },
+  /**
+   * This is the translation for the pagination component.
+   * The keys are:
+   * - navAriaLabel: The aria-label for the navigation (nav) element.
+   * - screenReader.firstPage: The translation for the first page button (screen reader).
+   * - screenReader.previousPage: The translation for the previous page button (screen reader).
+   * - screenReader.page: The translation for the current page button (screen reader).
+   * - screenReader.nextPage: The translation for the next page button (screen reader).
+   * - screenReader.lastPage: The translation for the last page button (screen reader).
+   */
+  pagination: {
+    navAriaLabel: "page navigation",
+    screenReader: {
+      firstPage: "First Page, page {page}",
+      previousPage: "Previous Page, page {page}",
+      page: "Page {page}",
+      nextPage: "Next Page, page {page}",
+      lastPage: "Last Page, page {page}"
+    }
+  },
+  carousel: {
+    ariaLabel: {
+      previousButton: "Scroll to previous items",
+      nextButton: "Scroll to next items"
+    }
+  },
+  checklist: {
+    noResultsFound: "No results found",
+    searchInput: {
+      placeholder: "Search"
+    }
+  }
+};
+
+export { en as default };

package/dist/chunks/es.mjs

@@ -0,0 +1,81 @@
+const es = {
+  selectCountry: {
+    searchPlaceholder: "Buscar pa\xEDs"
+  },
+  inputPhoneNumber: {
+    countrySelect: {
+      placeholder: "C\xF3digo de pa\xEDs",
+      error: "Elegir pa\xEDs",
+      searchPlaceholder: "Buscar pa\xEDs"
+    },
+    phoneInput: {
+      placeholder: "N\xFAmero de tel\xE9fono",
+      example: "Ejemplo: {example}"
+    }
+  },
+  dropzone: {
+    dragAndDrop: "Arrastra tus archivos",
+    selectFile: "Seleccionar archivo",
+    divider: "o",
+    fileMaxCount: "M\xE1ximo {count} archivos",
+    fileMaxSize: "M\xE1ximo {size} MB",
+    fileTypes: "Tipos de archivo permitidos: {types}"
+  },
+  datePicker: {
+    shortcuts: {
+      lastSevenDays: "\xDAltimos 7 d\xEDas",
+      lastThirtyDays: "\xDAltimos 30 d\xEDas",
+      thisWeek: "Esta semana",
+      lastWeek: "Semana pasada",
+      thisMonth: "Este mes",
+      thisYear: "Este a\xF1o",
+      lastYear: "A\xF1o pasado"
+    }
+  },
+  dropdown: {
+    screenReaderDescription: "Abrir men\xFA desplegable"
+  },
+  select: {
+    searchPlaceholder: "Buscar"
+  },
+  table: {
+    noResults: "Sin resultados",
+    actionColumnTitle: "Acciones",
+    searchByInput: {
+      all: "Todos",
+      placeholder: "Buscar por"
+    },
+    searchInput: {
+      placeholder: "Buscar"
+    },
+    pagination: {
+      all: "Todos",
+      rowsPerPage: "Filas por p\xE1gina",
+      of: "de"
+    }
+  },
+  pagination: {
+    navAriaLabel: "navegaci\xF3n de p\xE1ginas",
+    screenReader: {
+      firstPage: "Primera p\xE1gina, p\xE1gina {page}",
+      previousPage: "P\xE1gina anterior, p\xE1gina {page}",
+      page: "P\xE1gina {page}",
+      nextPage: "P\xE1gina siguiente, p\xE1gina {page}",
+      lastPage: "\xDAltima p\xE1gina, p\xE1gina {page}"
+    }
+  },
+  carousel: {
+    ariaLabel: {
+      previousButton: "Desplazar a elementos anteriores",
+      nextButton: "Desplazar a elementos siguientes"
+    }
+  },
+  checklist: {
+    noResultsFound: "No se encontraron resultados",
+    searchInput: {
+      placeholder: "Buscar"
+    }
+  }
+};
+
+export { es as default };

package/dist/chunks/fr.mjs

@@ -0,0 +1,81 @@
+const fr = {
+  selectCountry: {
+    searchPlaceholder: "Rechercher un pays"
+  },
+  inputPhoneNumber: {
+    countrySelect: {
+      placeholder: "Code pays",
+      error: "Choisir le pays",
+      searchPlaceholder: "Rechercher un pays"
+    },
+    phoneInput: {
+      placeholder: "Num\xE9ro de t\xE9l\xE9phone",
+      example: "Exemple: {example}"
+    }
+  },
+  dropzone: {
+    dragAndDrop: "D\xE9poser vos fichiers",
+    selectFile: "S\xE9lectionner un fichier",
+    divider: "ou",
+    fileMaxCount: "Maximum {count} fichiers",
+    fileMaxSize: "Maximum {size} MB",
+    fileTypes: "Types de fichiers autoris\xE9s: {types}"
+  },
+  datePicker: {
+    shortcuts: {
+      lastSevenDays: "Derniers 7 jours",
+      lastThirtyDays: "Derniers 30 jours",
+      thisWeek: "Cette semaine",
+      lastWeek: "Semaine pr\xE9c\xE9dente",
+      thisMonth: "Ce mois",
+      thisYear: "Cette ann\xE9e",
+      lastYear: "Ann\xE9e pr\xE9c\xE9dente"
+    }
+  },
+  checklist: {
+    noResultsFound: "Aucun r\xE9sultat trouv\xE9",
+    searchInput: {
+      placeholder: "Rechercher..."
+    }
+  },
+  carousel: {
+    ariaLabel: {
+      previousButton: "Scroller vers la gauche",
+      nextButton: "Scroller vers la droite"
+    }
+  },
+  dropdown: {
+    screenReaderDescription: "Ouvrir le menu d\xE9roulant"
+  },
+  select: {
+    searchPlaceholder: "Rechercher"
+  },
+  pagination: {
+    navAriaLabel: "Navigation",
+    screenReader: {
+      firstPage: "Premi\xE8re page",
+      previousPage: "Page pr\xE9c\xE9dente",
+      page: "Page {page}",
+      nextPage: "Page suivante",
+      lastPage: "Derni\xE8re page"
+    }
+  },
+  table: {
+    actionColumnTitle: "Actions",
+    noResults: "Aucun r\xE9sultat",
+    searchByInput: {
+      all: "Tous",
+      placeholder: "Rechercher par"
+    },
+    searchInput: {
+      placeholder: "Rechercher"
+    },
+    pagination: {
+      all: "Tous",
+      rowsPerPage: "Lignes par page",
+      of: "sur"
+    }
+  }
+};
+
+export { fr as default };