Add Generic infoBox help sign, convert valuePair to script setup

This commit is contained in:
Matthias 2022-12-15 20:28:13 +01:00
parent ebcd28b1e3
commit ea5805dcb4
2 changed files with 26 additions and 20 deletions

View File

@ -0,0 +1,14 @@
<template>
<div :title="hint">
<InfoIcon :size="18" />
</div>
</template>
<script setup>
import InfoIcon from 'vue-material-design-icons/InformationOutline.vue';
defineProps({
hint: { type: String, required: true },
});
</script>
<style lang="scss" scoped></style>

View File

@ -1,31 +1,23 @@
<template> <template>
<div class="row"> <div class="d-flex">
<label :class="classLabel">{{ description }}</label> <div class="d-flex justify-content-between me-2" :class="classLabel">
<label>{{ description }}</label>
<InfoBox v-if="help" :hint="help" />
</div>
<div :class="classValue"> <div :class="classValue">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import InfoBox from '@/components/general/InfoBox.vue';
export default defineComponent({ defineProps({
name: 'ValuePair', description: { type: String, required: true },
props: { help: { type: String, default: '', required: false },
description: { classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
type: String, classValue: { type: String, default: 'col-8' },
required: true,
},
classLabel: {
type: String,
default: 'col-4 fw-bold mb-0',
},
classValue: {
type: String,
default: 'col-8',
},
},
}); });
</script> </script>