Impostata tastiera e visualizzazione, FIX mettere pulsante nell'header, ToDo Catturare valori dei componenti alla conferma del mess

feature_keyboard
reddigriz 2 years ago
parent 3e4630fe36
commit f760f81c38

@ -1,5 +1,5 @@
<template>
<button class="chat-preview">
<button class="chat-preview" name="chat-preview">
<div class="chat-picture">
<figure>
<img src="chat-picture" alt="chat-picture">

@ -1,5 +1,5 @@
<template>
<div class="keyboard" @click="selectWord">
<div class="keyboard" @click="selectedWord('⛸️')">
<p>I'm writing hereee</p>
</div>
</template>
@ -7,8 +7,8 @@
<script>
export default {
methods: {
selectedWord() {
this.$emit("selectedWord", "a");
selectedWord(word) {
this.$emit("selectedWord", word);
},
},
};

@ -1,6 +1,8 @@
<template>
<div class="keyboard-word">
<p>placeholder word</p>
<label for="word">
<input type="text" />
</label>
</div>
</template>

@ -1,28 +1,35 @@
<script setup>
import Keyboard from "./Keyboard.vue";
import KeyboardWord from "./KeyboardWord.vue";
import PhraseType from "./PhraseType.vue";
</script>
<template>
<div>
<KeyboardWord :key="soggetto" @click="test" />
<KeyboardWord :key="oggetto" @click="test" />
<KeyboardWord :key="verbo" @click="test" />
<button alt="Back" name="Back" @click="this.$emit('hideMessageHistory')"></button>
<KeyboardWord ref="subject" />
<KeyboardWord ref="object" />
<KeyboardWord ref="verb" />
<PhraseType />
<button name="confirm" @click="confirm">OK?</button>
<Keyboard @selectedWord="selectedWord" />
</div>
</template>
<script>
export default {
data() {
return { focus: "" };
},
methods: {
test(e) {
console.log(e);
selectedWord(e) {
console.log("selectedWord", e);
},
selectedWord() {
console.log("selectedWord");
confirm() {
var message = {
subject: this.$refs.subject.items,
object: this.$refs.object.items,
verb: this.$refs.verb.items,
tipo_frase: this.$refs.phraseType.items,
};
console.log(message);
},
},
};

@ -0,0 +1,33 @@
<template>
<div class="phrase-type-selection" @click="popup = true">
<p>+|-|?-|?+</p>
</div>
<div class="popup" v-if="popup">
<button name="phrase-type" value="+" @click="selectedPhraseType('+')">
+
</button>
<button name="phrase-type" value="-" @click="selectedPhraseType('-')">
-
</button>
<button name="phrase-type" value="?-" @click="selectedPhraseType('?-')">
?-
</button>
<button name="phrase-type" value="?+" @click="selectedPhraseType('?+')">
?+
</button>
</div>
</template>
<script>
export default {
data() {
return { phraseType: null, popup: false };
},
methods: {
selectedPhraseType(phraseType) {
this.phraseType = phraseType;
},
},
};
</script>
<style scoped></style>
Loading…
Cancel
Save