Send Coins

src/components/CCurrencyValue/CCurrencyValue.ts

@@ -0,0 +1,64 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import { date, useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+
+export default defineComponent({
+  name: 'CCurrencyValue',
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tips: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    symbol: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const showingtooltip = ref(false)
+
+    function created() {
+      // created
+    }
+
+
+    onMounted(created)
+
+    return {
+      showingtooltip,
+      t,
+      $q,
+    }
+  },
+})

src/components/CCurrencyValue/CCurrencyValue.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="value !== null" class="text-h5 bordo_stondato_stretto full-width">
+    <div class="text-center text-h7-dense text-italic text-grey-14">
+      {{ label }}
+    </div>
+    <div>
+      <q-field
+        dense
+        borderless
+        :readonly="readonly"
+        type="number"
+        rounded
+        class="q-px-sm text-h5"
+        color="green"
+      >
+        <template v-slot:prepend>
+            <!--<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">-->
+            <q-btn v-if="tips"
+                   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="sm"/>
+        </template>
+        <template v-slot:control>
+          <div class="align_elem_right">{{ value }}
+            <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{tips}}</q-tooltip>
+          </div>
+        </template>
+        <template v-slot:append>
+          <div class="text-h5">
+            <em class="q-px-sm text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
+          </div>
+        </template>
+
+      </q-field>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CCurrencyValue.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CCurrencyValue.scss';
+</style>

src/components/CCurrencyValue/index.ts

@@ -0,0 +1 @@
+export {default as CCurrencyValue} from './CCurrencyValue.vue'