67 lines
2.5 KiB
Vue
Executable File
67 lines
2.5 KiB
Vue
Executable File
<template>
|
|
<div v-if="small">
|
|
<q-chip
|
|
dense class="cltexth4 chipbooked shadow-5 q-pa-sm2"
|
|
size="md"
|
|
:color="value > 0 ? `green` : value === 0 ? `gray` : `red`" text-color="white"
|
|
icon="fas fa-coins">
|
|
{{ tools.roundDec2(value) }} <span class="text-currency"> <em class="q-pa-xxs text-white rounded-borders shadow-2" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em></span>
|
|
</q-chip>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="value !== null" :class="`text-h5 ` + (small ? `bordo_stondato_small`: `bordo_stondato_stretto`) + ` full-width`"
|
|
:style="(!$q.screen.lt.sm && !small ? `min-width: 250px; ` : (small ? ` max-width: 120px;` : ``)) + (color_border ? `border-color: ` + color_border + `!important;`: '')">
|
|
<div class="text-center text-h7-dense text-italic text-grey-14">
|
|
<span v-if="small">
|
|
<em class="q-px-xs text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
|
|
</span>
|
|
<span v-else>{{ label }}</span>
|
|
</div>
|
|
<div>
|
|
<q-field
|
|
dense
|
|
borderless
|
|
:readonly="readonly"
|
|
type="number"
|
|
rounded
|
|
:class="!small ? `q-px-sm text-h5`: `q-px-xs text-h7`"
|
|
:color="value > 0 ? `green` : `red`"
|
|
>
|
|
<template v-slot:prepend>
|
|
<!--<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">-->
|
|
<q-btn v-if="tips && !small"
|
|
icon="fas fa-info"
|
|
color="primary" text-color="white"
|
|
round
|
|
size="sm"
|
|
@click="showingtooltip = !showingtooltip"
|
|
>
|
|
|
|
</q-btn>
|
|
<q-icon v-else name="fas fa-coins" :size="small ? `xs`: `sm`"/>
|
|
</template>
|
|
<template v-slot:control>
|
|
<div :class="`align_elem_right `+ (small ? `text-h7` : ``)">{{ valueextra }}{{ tools.roundDec2(value) }}
|
|
<q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{ tips }}</q-tooltip>
|
|
</div>
|
|
</template>
|
|
<template v-slot:append>
|
|
<div v-if="!small" :class="small ? `text-h7-dense` : `text-h7`">
|
|
<em class="q-px-sm text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
|
|
</div>
|
|
</template>
|
|
|
|
</q-field>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CCurrencyValue.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CCurrencyValue.scss';
|
|
</style>
|