@m3ui-vue/m3ui-vue 0.5.0 → 0.5.2

package/src/components/MJsonEditor.vue

@@ -2,6 +2,16 @@
 import { ref, computed, watch } from 'vue'
 import MCodeEditor from './MCodeEditor.vue'
 import MIcon from './MIcon.vue'
+import { useLocale } from '../composables/useLocale'
+
+export interface JsonEditorLabels {
+  valid?: string
+  invalid?: string
+  format?: string
+  minify?: string
+}
+
+const locale = useLocale()
 
 const props = withDefaults(
   defineProps<{
@@ -9,6 +19,7 @@ const props = withDefaults(
     readonly?: boolean
     minHeight?: string
     maxHeight?: string
+    labels?: JsonEditorLabels
   }>(),
   {
     readonly: false,
@@ -17,6 +28,14 @@ const props = withDefaults(
   },
 )
 
+const l = computed<Required<JsonEditorLabels>>(() => ({
+  valid: locale.jsonValid,
+  invalid: locale.jsonInvalid,
+  format: locale.jsonFormat,
+  minify: locale.jsonMinify,
+  ...props.labels,
+}))
+
 const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
 
 const rawText = ref(JSON.stringify(props.modelValue, null, 2))
@@ -25,11 +44,18 @@ const parseError = ref<string | null>(null)
 const isValid = computed(() => !parseError.value)
 
 watch(() => props.modelValue, (val) => {
-  const incoming = JSON.stringify(val, null, 2)
-  if (incoming !== rawText.value) {
-    rawText.value = incoming
-    parseError.value = null
+  let current: unknown
+  try {
+    current = JSON.parse(rawText.value)
+  } catch {
+    current = undefined
   }
+  // Only resync from outside when the actual data changed, not just its formatting —
+  // otherwise the round-trip from formatJson/minifyJson emitting would immediately
+  // overwrite the newly (re)formatted text with a pretty-printed copy.
+  if (JSON.stringify(current) === JSON.stringify(val)) return
+  rawText.value = JSON.stringify(val, null, 2)
+  parseError.value = null
 })
 
 function onTextUpdate(text: string) {
@@ -84,28 +110,28 @@ function minifyJson() {
             :class="isValid ? 'bg-success-container text-on-success-container' : 'bg-error-container text-on-error-container'"
           >
             <MIcon :name="isValid ? 'check_circle' : 'error'" :size="14" />
-            {{ isValid ? 'Válido' : 'Inválido' }}
+            {{ isValid ? l.valid : l.invalid }}
           </span>
 
           <button
             v-if="!readonly"
             type="button"
-            title="Formatear"
+            :title="l.format"
             class="flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
             @click="formatJson"
           >
             <MIcon name="format_indent_increase" :size="16" />
-            Formatear
+            {{ l.format }}
           </button>
           <button
             v-if="!readonly"
             type="button"
-            title="Minificar"
+            :title="l.minify"
             class="flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
             @click="minifyJson"
           >
             <MIcon name="compress" :size="16" />
-            Minificar
+            {{ l.minify }}
           </button>
         </div>
       </template>

package/src/components/MJsonViewer.vue

@@ -1,18 +1,33 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import MIcon from './MIcon.vue'
+import { useLocale } from '../composables/useLocale'
+
+export interface JsonViewerLabels {
+  elements?: string
+  fields?: string
+}
+
+const locale = useLocale()
 
 const props = withDefaults(
   defineProps<{
     data: unknown
     rootName?: string
     expandDepth?: number
+    labels?: JsonViewerLabels
     /** @internal — used by recursive instances */
     _depth?: number
   }>(),
   { rootName: 'root', expandDepth: 2, _depth: 0 },
 )
 
+const l = computed<Required<JsonViewerLabels>>(() => ({
+  elements: locale.jsonElements,
+  fields: locale.jsonFields,
+  ...props.labels,
+}))
+
 const expanded = ref(props._depth < props.expandDepth)
 
 const dataType = computed(() => {
@@ -73,7 +88,7 @@ function formatValue(val: unknown) {
         <span v-if="_depth === 0 || rootName" class="text-tertiary">{{ _depth === 0 ? rootName : '' }}</span>
         <span class="text-on-surface-variant">{{ bracketOpen }}</span>
         <span v-if="!expanded" class="text-on-surface-variant/60">
-          {{ childCount }} {{ dataType === 'array' ? 'elementos' : 'campos' }}
+          {{ childCount }} {{ dataType === 'array' ? l.elements : l.fields }}
         </span>
         <span v-if="!expanded" class="text-on-surface-variant">{{ bracketClose }}</span>
       </button>
@@ -89,6 +104,7 @@ function formatValue(val: unknown) {
             :data="entry.value"
             :root-name="entry.key"
             :expand-depth="expandDepth"
+            :labels="labels"
             :_depth="_depth + 1"
           />
           <!-- Primitive value -->

package/src/components/MNotificationHost.vue

@@ -53,7 +53,7 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
         <Transition name="m3-badge">
           <span
             v-if="n.count >= 2"
-            class="absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
+            class="notif-count-badge absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
           >
             <Transition name="m3-count" mode="out-in">
               <span :key="n.count">{{ n.count }}</span>
@@ -110,10 +110,10 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
 
 .m3-notif-bot-enter-active {
   transition: grid-template-rows 200ms ease, padding-bottom 200ms ease;
-  overflow: hidden;
 }
 .m3-notif-bot-enter-active > .notif-inner {
   transition: opacity 150ms ease, transform 200ms ease;
+  overflow: hidden;
 }
 .m3-notif-bot-enter-from {
   grid-template-rows: 0fr;
@@ -126,10 +126,10 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
 
 .m3-notif-bot-leave-active {
   transition: grid-template-rows 250ms ease, padding-bottom 250ms ease;
-  overflow: hidden;
 }
 .m3-notif-bot-leave-active > .notif-inner {
   transition: opacity 150ms ease, transform 150ms ease;
+  overflow: hidden;
 }
 .m3-notif-bot-leave-to {
   grid-template-rows: 0fr;
@@ -139,13 +139,20 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
   opacity: 0;
   transform: scale(0.93);
 }
+.m3-notif-bot-leave-active > .notif-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-notif-bot-leave-to > .notif-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 .m3-notif-top-enter-active {
   transition: grid-template-rows 200ms ease, padding-bottom 200ms ease;
-  overflow: hidden;
 }
 .m3-notif-top-enter-active > .notif-inner {
   transition: opacity 150ms ease, transform 200ms ease;
+  overflow: hidden;
 }
 .m3-notif-top-enter-from {
   grid-template-rows: 0fr;
@@ -158,10 +165,10 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
 
 .m3-notif-top-leave-active {
   transition: grid-template-rows 250ms ease, padding-bottom 250ms ease;
-  overflow: hidden;
 }
 .m3-notif-top-leave-active > .notif-inner {
   transition: opacity 150ms ease, transform 150ms ease;
+  overflow: hidden;
 }
 .m3-notif-top-leave-to {
   grid-template-rows: 0fr;
@@ -171,6 +178,13 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
   opacity: 0;
   transform: scale(0.93);
 }
+.m3-notif-top-leave-active > .notif-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-notif-top-leave-to > .notif-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 .m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
 .m3-badge-leave-active  { transition: opacity 0.15s ease, transform 0.15s ease; }

package/src/components/MSnackbar.vue

@@ -94,7 +94,7 @@ const getVariantStyle = (variant: string): VariantStyle =>
         <Transition name="m3-badge">
           <span
             v-if="t.count >= 2"
-            class="absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
+            class="toast-count-badge absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
           >
             <Transition name="m3-count" mode="out-in">
               <span :key="t.count">{{ t.count }}</span>
@@ -178,7 +178,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-bot-enter-active > .toast-inner {
   transition:
@@ -198,7 +197,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-bot-leave-active > .toast-inner {
   transition:
@@ -213,13 +211,19 @@ const getVariantStyle = (variant: string): VariantStyle =>
   opacity: 0;
   transform: scale(0.92);
 }
+.m3-toast-bot-leave-active > .toast-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-toast-bot-leave-to > .toast-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 /* ─── Top toasts ────────────────────────────────────────────────── */
 .m3-toast-top-enter-active {
   transition:
     grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-top-enter-active > .toast-inner {
   transition:
@@ -239,7 +243,6 @@ const getVariantStyle = (variant: string): VariantStyle =>
   transition:
     grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
     padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
-  overflow: hidden;
 }
 .m3-toast-top-leave-active > .toast-inner {
   transition:
@@ -254,6 +257,13 @@ const getVariantStyle = (variant: string): VariantStyle =>
   opacity: 0;
   transform: scale(0.92);
 }
+.m3-toast-top-leave-active > .toast-count-badge {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.m3-toast-top-leave-to > .toast-count-badge {
+  opacity: 0;
+  transform: scale(0.5);
+}
 
 /* badge appear/disappear */
 .m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }

package/src/composables/useLocale.ts

@@ -90,6 +90,16 @@ export interface M3Locale {
   insertImage: string
   imageUrlLabel: string
   insert: string
+
+  // JSON editor
+  jsonValid: string
+  jsonInvalid: string
+  jsonFormat: string
+  jsonMinify: string
+
+  // JSON viewer
+  jsonElements: string
+  jsonFields: string
 }
 
 export const defaultLocale: M3Locale = {
@@ -171,6 +181,14 @@ export const defaultLocale: M3Locale = {
   insertImage: 'Insert image',
   imageUrlLabel: 'Image URL',
   insert: 'Insert',
+
+  jsonValid: 'Valid',
+  jsonInvalid: 'Invalid',
+  jsonFormat: 'Format',
+  jsonMinify: 'Minify',
+
+  jsonElements: 'elements',
+  jsonFields: 'fields',
 }
 
 export const M3_LOCALE_KEY: InjectionKey<MaybeRef<Partial<M3Locale>>> = Symbol('m3-locale')

package/src/locales/de.ts

@@ -90,4 +90,14 @@ export const deLocale: M3Locale = {
   insertImage: 'Bild einfügen',
   imageUrlLabel: 'Bild-URL',
   insert: 'Einfügen',
+
+  // JSON editor
+  jsonValid: 'Gültig',
+  jsonInvalid: 'Ungültig',
+  jsonFormat: 'Formatieren',
+  jsonMinify: 'Minimieren',
+
+  // JSON viewer
+  jsonElements: 'Elemente',
+  jsonFields: 'Felder',
 }

package/src/locales/es.ts

@@ -90,4 +90,14 @@ export const esLocale: M3Locale = {
   insertImage: 'Insertar imagen',
   imageUrlLabel: 'URL de la imagen',
   insert: 'Insertar',
+
+  // JSON editor
+  jsonValid: 'Válido',
+  jsonInvalid: 'Inválido',
+  jsonFormat: 'Formatear',
+  jsonMinify: 'Minificar',
+
+  // JSON viewer
+  jsonElements: 'elementos',
+  jsonFields: 'campos',
 }

package/src/locales/fr.ts

@@ -90,4 +90,14 @@ export const frLocale: M3Locale = {
   insertImage: 'Insérer une image',
   imageUrlLabel: "URL de l'image",
   insert: 'Insérer',
+
+  // JSON editor
+  jsonValid: 'Valide',
+  jsonInvalid: 'Invalide',
+  jsonFormat: 'Formater',
+  jsonMinify: 'Minifier',
+
+  // JSON viewer
+  jsonElements: 'éléments',
+  jsonFields: 'champs',
 }

package/src/locales/ja.ts

@@ -90,4 +90,14 @@ export const jaLocale: M3Locale = {
   insertImage: '画像を挿入',
   imageUrlLabel: '画像 URL',
   insert: '挿入',
+
+  // JSON editor
+  jsonValid: '有効',
+  jsonInvalid: '無効',
+  jsonFormat: '整形',
+  jsonMinify: '圧縮',
+
+  // JSON viewer
+  jsonElements: '要素',
+  jsonFields: 'フィールド',
 }

package/src/locales/ko.ts

@@ -90,4 +90,14 @@ export const koLocale: M3Locale = {
   insertImage: '이미지 삽입',
   imageUrlLabel: '이미지 URL',
   insert: '삽입',
+
+  // JSON editor
+  jsonValid: '유효함',
+  jsonInvalid: '유효하지 않음',
+  jsonFormat: '서식 지정',
+  jsonMinify: '압축',
+
+  // JSON viewer
+  jsonElements: '요소',
+  jsonFields: '필드',
 }

package/src/locales/pt.ts

@@ -90,4 +90,14 @@ export const ptLocale: M3Locale = {
   insertImage: 'Inserir imagem',
   imageUrlLabel: 'URL da imagem',
   insert: 'Inserir',
+
+  // JSON editor
+  jsonValid: 'Válido',
+  jsonInvalid: 'Inválido',
+  jsonFormat: 'Formatar',
+  jsonMinify: 'Minificar',
+
+  // JSON viewer
+  jsonElements: 'elementos',
+  jsonFields: 'campos',
 }

package/src/locales/zh.ts

@@ -90,4 +90,14 @@ export const zhLocale: M3Locale = {
   insertImage: '插入图片',
   imageUrlLabel: '图片 URL',
   insert: '插入',
+
+  // JSON editor
+  jsonValid: '有效',
+  jsonInvalid: '无效',
+  jsonFormat: '格式化',
+  jsonMinify: '压缩',
+
+  // JSON viewer
+  jsonElements: '个元素',
+  jsonFields: '个字段',
 }