40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<template>
|
|
<input v-model="name" type="text" class="mb-3 form-control" placeholder="Name" aria-label="name" />
|
|
<ColorPicker v-model="color" />
|
|
<hr>
|
|
<div class="d-flex flex-row align-items-center">
|
|
<label v-if="name">Preview:</label>
|
|
<span class="fw-bold ms-1" :style="{ color: color ?? '#000000' }">{{ name }}</span>
|
|
<button @click="save" class="btn btn-primary ms-auto">Save</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject, ref } from 'vue'
|
|
import { useMercuryStore } from '../../stores/mercuryStore'
|
|
import Colors from '../../common/colors'
|
|
import ColorPicker from './ColorPicker.vue'
|
|
|
|
const requestUserData = inject('requestUserData')
|
|
const mercuryStore = useMercuryStore()
|
|
|
|
const name = ref()
|
|
const color = ref(Colors.Random())
|
|
|
|
// Set initial username.
|
|
if (mercuryStore.user?.name) {
|
|
name.value = mercuryStore.user.name
|
|
}
|
|
|
|
// Set initial color.
|
|
if (mercuryStore.user?.color) {
|
|
color.value = mercuryStore.user.color
|
|
}
|
|
|
|
function save() {
|
|
mercuryStore.setUserName(name.value)
|
|
mercuryStore.setUserColor(color.value)
|
|
requestUserData()
|
|
}
|
|
</script>
|