Port photo ui to vue

showbits-thermal-printer-ui/src/components/CPhotoButtonFlip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { RiCameraSwitchFill } from "@remixicon/vue";
+</script>
+
+<template>
+  <button>
+    <RiCameraSwitchFill size="48px" />
+  </button>
+</template>
+
+<style scoped>
+button {
+  padding: 8px;
+
+  color: white;
+  border: 5px solid white;
+  border-radius: 100px;
+  background-color: transparent;
+}
+
+button:enabled:active {
+  color: black;
+  background-color: white;
+}
+
+button:disabled {
+  --disabled: #444;
+  color: var(--disabled);
+  border-color: var(--disabled);
+}
+
+svg {
+  display: block;
+}
+</style>

showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { RiMultiImageFill } from "@remixicon/vue";
+</script>
+
+<template>
+  <label>
+    <RiMultiImageFill size="48px" />
+  </label>
+</template>
+
+<style scoped>
+label {
+  padding: 8px;
+
+  border: 5px solid white;
+  border-radius: 100px;
+  background-color: transparent;
+
+  color: white;
+}
+
+label:active {
+  background-color: white;
+  color: black;
+}
+
+svg {
+  display: block;
+}
+</style>

showbits-thermal-printer-ui/src/components/CPhotoButtonRecord.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts"></script>
+
+<template>
+  <button><div></div></button>
+</template>
+
+<style scoped>
+button {
+  width: 100px;
+  height: 100px;
+
+  --color: red;
+
+  border: 10px solid var(--color);
+  border-radius: 100px;
+  background-color: transparent;
+}
+
+button:enabled:active {
+  --color: white;
+}
+
+button:disabled {
+  --color: #444;
+}
+
+button div {
+  width: 60px;
+  height: 60px;
+  border-radius: 60px;
+  margin: auto;
+
+  background-color: var(--color);
+}
+</style>