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

alexm · 2025-03-25T11:51:34Z

alexm commented

2025-03-25 11:51:34 +00:00

No description provided.

alexm added 1 commit 2025-03-25 11:51:35 +00:00

gitea/salix-front/pipeline/pr-dev Something is wrong with the build of this commit Details

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

alexm reviewed 2025-03-25 11:52:27 +00:00

src/components/common/VnLogValue.vue

						
				@ -22,0 +15,4 @@

				    <VnJsonValue :value="value.val" />

				    <span

				        v-if="(value.id || typeof value.val == 'number') && descriptor"

				        style="margin-left: 2px"

alexm commented

2025-03-25 11:52:27 +00:00

q-ml-xs es demasiado

alexm reviewed 2025-03-25 11:52:51 +00:00

src/components/common/VnLogValue.vue

						
				@ -22,0 +21,4 @@

				            name="launch"

				            class="link"

				            :data-cy="'iconLaunch-' + $props.name"

				            style="padding-bottom: 2px"

alexm commented

2025-03-25 11:52:51 +00:00

Sino se desalinea

alexm requested review from jsegarra 2025-03-25 11:53:06 +00:00

alexm added 1 commit 2025-03-25 12:02:09 +00:00

gitea/salix-front/pipeline/pr-dev This commit looks good Details

8bc68dd731 Merge branch 'dev' into 6994-fix_vnLogValue_whenIsString

jsegarra approved these changes 2025-03-25 13:06:43 +00:00

jsegarra reviewed 2025-03-25 13:08:16 +00:00

src/components/common/VnLogValue.vue

						
				@ -20,2 +15,2 @@

				    />

				    <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

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

alexm commented

2025-03-25 13:45:45 +00:00

¡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

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

alexm commented

2025-03-26 06:30:17 +00:00