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

refs #6075 VnLabelValue created #68

Merged
jorgep merged 2 commits from 6075-createVnLabelValue into dev 2023-08-01 09:37:49 +00:00
Conversation 0 Commits 2 Files Changed 1 +46
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0d67ac4450 - Show all commits

46
src/components/ui/VnLabelValue.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup>
import { computed } from 'vue';
const $props = defineProps({
label: { type: String, default: '' },
value: {
type: [String, Boolean],
required: true,
alexm commented 2023-07-31 12:13:43 +00:00
Outdated
Review
Copy Link

Value no es required

Value no es required
jorgep commented 2023-07-31 12:35:55 +00:00
Outdated
Review
Copy Link

Que valor por defecto asigno: default: undefined?

Que valor por defecto asigno: default: undefined?
},
info: { type: String, default: '' },
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
alexm commented 2023-07-31 12:14:54 +00:00
Outdated
Review
Copy Link

Entonces aquí seria $props.value && typeof $props.value === 'boolean'
(Creo que asi si es true $props.value, devolvera typeof $props.value === 'boolean')

Entonces aquí seria $props.value && typeof $props.value === 'boolean' (Creo que asi si es true $props.value, devolvera typeof $props.value === 'boolean')
jorgep commented 2023-07-31 12:40:01 +00:00
Outdated
Review
Copy Link

Según el ticket, hay que comprobar si value es un valor booleano true o false, no si existe. Si existe no se muestra el check, se muestra el slot

Según el ticket, hay que comprobar si value es un valor booleano true o false, no si existe. Si existe no se muestra el check, se muestra el slot
</script>
<template>
<div class="vn-label-value">
<div class="label">
<slot name="label"></slot>
alexm commented 2023-07-31 12:21:42 +00:00
Outdated
Review
Copy Link

Segun ChatGPT: <div v-if="!$slots.label ">{{ $props.label }}</div>

Segun ChatGPT: `<div v-if="!$slots.label ">{{ $props.label }}</div>`
</div>
<div class="value">
<span v-if="isBooleanValue">
<QIcon :name="value ? `check` : `close`" :class="value ? `positive` : `negative`" />
</span>
<span v-else>
<slot name="value"></slot>
alexm commented 2023-07-31 12:27:05 +00:00
Outdated
Review
Copy Link

Segun ChatGPT:

{{ $props.value}}

Segun ChatGPT: <div v-if="!$slots.value">{{ $props.value}}</div>
</span>
</div>
<div class="info" v-if="$props.info">
<QIcon name="info">
<QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]" square>
{{ $props.info }}
</QTooltip>
</QIcon>
</div>
</div>
</template>
<style lang="scss" scoped>
alexm commented 2023-07-31 12:27:17 +00:00
Outdated
Review
Copy Link

Quitar css se puede hacer sin

Quitar css se puede hacer sin
@import '../../css/quasar.variables.scss';
.positive {
color: $positive
}
.negative {
color: $negative
}
</style>