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

81
showbits-thermal-printer-ui/src/components/CSegmentText.vue
View file

@ -1,81 +0,0 @@
<script setup lang="ts">
import { useApiRequest } from "@/apiRequest";
import { computed, ref, type StyleValue, useTemplateRef } from "vue";
import CSegmentError from "./CSegmentError.vue";
const { disabled, error, makeRequest } = useApiRequest();
const form = useTemplateRef<HTMLFormElement>("form");
const text = ref("");
const forceWrap = ref(false);
const feed = ref(true);
// Emulate how typst is wrapping text.
const textareaStyle = computed<StyleValue>(() =>
forceWrap.value ? { wordBreak: "break-all" } : { overflowWrap: "normal" },
);
// Ctrl+Enter in textarea should submit form.
function textareaKeypress(ev: KeyboardEvent): void {
if (ev.ctrlKey && ev.key === "Enter") {
form.value?.requestSubmit();
}
}
function submit() {
const data = new URLSearchParams();
data.append("text", text.value);
data.append("force_wrap", String(forceWrap.value));
data.append("feed", String(feed.value));
void makeRequest("/api/text", data);
}
</script>
<template>
<form ref="form" @submit.prevent="submit">
<h2>Text</h2>
<!-- For some reason one col = 2 characters. -->
<textarea
v-model="text"
rows="10"
cols="24"
:style="textareaStyle"
:disabled
@keypress="textareaKeypress"
></textarea>
<div class="wide">
<label>
<input v-model="forceWrap" type="checkbox" :disabled />
Force-Wrap
</label>
<label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
</div>
<button :disabled>Print</button>
<CSegmentError :message="error" />
</form>
</template>
<style scoped>
form {
display: flex;
flex-direction: column;
gap: 16px;
}
textarea {
align-self: center;
width: fit-content;
/* Prevent manual resizing from changing the width. */
min-width: fit-content;
max-width: fit-content;
}
.wide {
display: flex;
flex-direction: column;
}
</style>