Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename components

Browse source 
I'm already using the term "document" on the Rust side. Makes sense to
call it the same in the UI.
This commit is contained in:
Joscha 2025-03-03 20:15:41 +01:00
parent aaa1a916da
commit 5275a84dac
10 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

80
showbits-thermal-printer-ui/src/components/CSegment.vue
View file

@ -1,80 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import CSegmentCalendar from "./CSegmentCalendar.vue";
import CSegmentEgg from "./CSegmentEgg.vue";
import CSegmentText from "./CSegmentText.vue";
import CSegmentTictactoe from "./CSegmentTictactoe.vue";
import CSegmentCells from "./CSegmentCells.vue";
import CSegmentChat from "./CSegmentChat.vue";
import CSegmentImage from "./CSegmentImage.vue";
const mode = ref<
"calendar" | "chat" | "cells" | "egg" | "image" | "text" | "tictactoe"
>();
</script>
<template>
<div class="outer">
<button v-if="mode" class="close" @click="mode = undefined">X</button>
<CSegmentCalendar v-if="mode === 'calendar'" />
<CSegmentChat v-if="mode === 'chat'" />
<CSegmentCells v-if="mode === 'cells'" />
<CSegmentEgg v-if="mode === 'egg'" />
<CSegmentImage v-if="mode === 'image'" />
<CSegmentText v-if="mode === 'text'" />
<CSegmentTictactoe v-if="mode === 'tictactoe'" />
<hr v-if="mode !== undefined" />
<section>
<p>What do you want to print?</p>
<div class="list">
<button @click="mode = 'calendar'">Calendar</button>
<button @click="mode = 'cells'">Cellular Automaton</button>
<button @click="mode = 'chat'">Chat Message</button>
<button @click="mode = 'egg'">Easter Egg</button>
<button @click="mode = 'image'">Image</button>
<button @click="mode = 'text'">Text</button>
<button @click="mode = 'tictactoe'">Tic Tac Toe</button>
</div>
</section>
</div>
</template>
<style scoped>
.outer {
position: relative;
}
.close {
position: absolute;
top: 0;
right: 0;
color: white;
background-color: black;
border: 2px solid black;
padding: 0 4px;
}
.close:hover {
background-color: #444;
}
.close:active {
background-color: #666;
}
hr {
border: none;
border-top: 2px groove white;
margin: 32px -32px;
}
p {
margin-bottom: 1ch;
}
.list {
display: flex;
flex-wrap: wrap;
gap: 1ch;
}
</style>