verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 81 Releases Wiki Activity

fix(VnLog): refs #6994 simplify value binding and improve descriptor handling #1636

Merged
alexm merged 8 commits from 6994-fix_vnLogValue_whenIsString into dev 2025-03-26 08:29:36 +00:00
Conversation 0 Commits 8 Files Changed 3 +21 -17
3 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/VnLog.vue
View File

@ -561,9 +561,7 @@ watch(
}}:
</span>
<VnLogValue
:value="
value.val.val
"
:value="value.val"
:name="value.name"
/>
</QItem>
@ -616,7 +614,7 @@ watch(
{{ prop.nameI18n }}:
</span>
<VnLogValue
:value="prop.val.val"
:value="prop.val"
:name="prop.name"
/>
<span
@ -647,7 +645,7 @@ watch(
</span>
<span v-if="log.action == 'update'">
<VnLogValue
:value="prop.old.val"
:value="prop.old"
:name="prop.name"
/>
<span
@ -658,7 +656,7 @@ watch(
</span>
→
<VnLogValue
:value="prop.val.val"
:value="prop.val"
:name="prop.name"
/>
<span
@ -670,7 +668,7 @@ watch(
</span>
<span v-else="prop.old.val">
<VnLogValue
:value="prop.val.val"
:value="prop.val"
:name="prop.name"
/>
<span

24
src/components/common/VnLogValue.vue
View File

@ -5,18 +5,24 @@ import { computed } from 'vue';
const descriptorStore = useDescriptorStore();
const $props = defineProps({
name: { type: [String], default: undefined },
value: { type: Object, default: () => {} },
name: { type: String, default: undefined },
});
const descriptor = computed(() => descriptorStore.has($props.name));
</script>
<template>
<VnJsonValue v-bind="$attrs" />
<QIcon
name="launch"
class="link"
v-if="$attrs.value && descriptor"
:data-cy="'iconLaunch-' + $props.name"
/>
<component :is="descriptor" :id="$attrs.value" v-if="$attrs.value && descriptor" />
<VnJsonValue :value="value.val" />
<span
jsegarra commented 2025-03-25 13:08:16 +00:00
Review
Copy Link

es correcto que sea un span, no deberia ser un div?

es correcto que sea un span, no deberia ser un div?
alexm commented 2025-03-25 13:45:45 +00:00
Review
Copy Link

¡Buena pregunta! 🙌

🧩 span vs div — ¿cuál es la diferencia?

Ambos son elementos HTML genéricos, pero su principal diferencia está en cómo se comportan visualmente y cómo se usan en el flujo del contenido.

🆚 Diferencia clave:

Característica div span
🧱 Tipo de elemento Block-level (bloque) Inline (en línea)
🖼 Ocupa toda la línea Sí No
📐 Acepta ancho/alto ✅ Sí ⚠️ No siempre (depende)
🧩 Uso principal Agrupar secciones completas Aplicar estilo a texto

🔍 ¿Qué significa eso?

🔷 div (block-level)

  • Se usa para estructurar bloques enteros de contenido.
  • Ocupa todo el ancho disponible.
  • Puede contener otros div, span, elementos de formulario, etc.

📦 Ejemplo:

<div>
  <h2>Título</h2>
  <p>Contenido dentro del div</p>
</div>

🔹 span (inline)

  • Se usa para estilizar partes pequeñas de texto u otros elementos inline.
  • No inicia una nueva línea.
  • No acepta fácilmente width y height (a menos que lo hagas display: inline-block o block).

📍 Ejemplo:

<p>El estado es <span class="positivo">activo</span>.</p>

✅ ¿Cuándo usar cada uno?

Necesitas... Usa
Agrupar componentes o secciones de la UI div
Estilizar una palabra o fragmento de texto span
Crear un layout con columnas/filas div
Cambiar color/fuente de parte de una frase span

🧪 Bonus: ejemplo visual

<div style="background: lightblue;">Este es un div</div>
<span style="background: yellow;">Este es un span</span> y este texto sigue en la misma línea.

¿Quieres que te muestre una demo en vivo o un ejemplo real usando Quasar con div vs span?

¡Buena pregunta! 🙌 ### 🧩 `span` vs `div` — ¿cuál es la diferencia? Ambos son elementos **HTML genéricos**, pero su principal diferencia está en **cómo se comportan visualmente** y **cómo se usan en el flujo del contenido**. --- ## 🆚 Diferencia clave: | Característica | `div` | `span` | |-----------------------|------------------------------|----------------------------| | 🧱 Tipo de elemento | **Block-level** (bloque) | **Inline** (en línea) | | 🖼 Ocupa toda la línea| Sí | No | | 📐 Acepta ancho/alto | ✅ Sí | ⚠️ No siempre (depende) | | 🧩 Uso principal | Agrupar secciones completas | Aplicar estilo a texto | --- ## 🔍 ¿Qué significa eso? ### 🔷 `div` (block-level) - Se usa para **estructurar bloques enteros** de contenido. - Ocupa todo el ancho disponible. - Puede contener otros `div`, `span`, elementos de formulario, etc. 📦 Ejemplo: ```html <div> <h2>Título</h2> <p>Contenido dentro del div</p> </div> ``` --- ### 🔹 `span` (inline) - Se usa para **estilizar partes pequeñas** de texto u otros elementos inline. - **No inicia una nueva línea**. - No acepta fácilmente `width` y `height` (a menos que lo hagas `display: inline-block` o `block`). 📍 Ejemplo: ```html <p>El estado es <span class="positivo">activo</span>.</p> ``` --- ## ✅ ¿Cuándo usar cada uno? | Necesitas... | Usa | |---------------------------------------------------|-----| | Agrupar componentes o secciones de la UI | `div` | | Estilizar una palabra o fragmento de texto | `span` | | Crear un layout con columnas/filas | `div` | | Cambiar color/fuente de parte de una frase | `span` | --- ## 🧪 Bonus: ejemplo visual ```html <div style="background: lightblue;">Este es un div</div> <span style="background: yellow;">Este es un span</span> y este texto sigue en la misma línea. ``` --- ¿Quieres que te muestre una demo en vivo o un ejemplo real usando `Quasar` con `div` vs `span`?
jsegarra commented 2025-03-25 21:58:02 +00:00
Review
Copy Link

Por tanto, no hay texto y agrupa bloque de QIcon y component...cambiamos?

Por tanto, no hay texto y agrupa bloque de QIcon y component...cambiamos?
alexm commented 2025-03-26 06:30:17 +00:00
Review
Copy Link
  • Se usa para estilizar partes pequeñas de texto u otros elementos inline.
  • No inicia una nueva línea.
- Se usa para estilizar partes pequeñas de texto u otros elementos inline. - No inicia una nueva línea.
v-if="(value.id || typeof value.val == 'number') && descriptor"
style="margin-left: 2px"
alexm commented 2025-03-25 11:52:27 +00:00
Review
Copy Link

q-ml-xs es demasiado

q-ml-xs es demasiado
>
<QIcon
name="launch"
class="link"
:data-cy="'iconLaunch-' + $props.name"
style="padding-bottom: 2px"
alexm commented 2025-03-25 11:52:51 +00:00
Review
Copy Link

Sino se desalinea

Sino se desalinea
/>
<component :is="descriptor" :id="value.id ?? value.val" />
</span>
</template>

2
src/stores/useDescriptorStore.js
View File

@ -11,7 +11,7 @@ export const useDescriptorStore = defineStore('descriptorStore', () => {
const files = import.meta.glob(`/src/**/*DescriptorProxy.vue`);
const moduleParser = {
account: 'user',
client: 'customer',
customer: 'client',
};
for (const file in files) {
const name = file.split('/').at(-1).slice(0, -19).toLowerCase();