[PhotonClient] Vite and Typescript complete refactor (#884)

photon-client/src/components/common/cv-input.vue

@@ -1,64 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+
+const props = withDefaults(defineProps<{
+  label?: string,
+  tooltip?: string,
+  // TODO fully update v-model usage in custom components on Vue3 update
+  value: string,
+  disabled?: boolean,
+  errorMessage?: string,
+  placeholder?: string,
+  labelCols?: number,
+  inputCols?: number,
+  rules?: ((v: string) => boolean | string)[]
+}>(), {
+  disabled: false,
+  inputCols: 8
+});
+
+const emit = defineEmits<{
+  (e: "input", value: string): void
+  (e: "onEnter", value: string): void
+  (e: "onEscape"): void
+}>();
+
+const localValue = computed({
+  get: () => props.value,
+  set: v => emit("input", v)
+});
+
+
+const handleKeydown = ({ key }) => {
+  switch (key) {
+    case "Enter":
+      if(!(props.rules || []).some(v => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
+        emit("onEnter", localValue.value);
+      }
+      break;
+    case "Escape":
+      emit("onEscape");
+      break;
+  }
+};
+
+</script>
+
 <template>
   <div>
     <v-row
       dense
       align="center"
     >
-      <v-col :cols="labelCols || (12 - (inputCols || 8))">
+      <v-col :cols="labelCols || (12 - inputCols)">
         <tooltipped-label
           :tooltip="tooltip"
-          :text="name"
+          :label="label"
         />
       </v-col>
-      <v-col :cols="inputCols || 8">
+
+      <v-col :cols="inputCols">
         <v-text-field
           v-model="localValue"
           dark
           dense
           color="accent"
+          :placeholder="placeholder"
           :disabled="disabled"
           :error-messages="errorMessage"
           :rules="rules"
           class="mt-1 pt-2"
-          @keydown="handleKeyboard"
+          @keydown="handleKeydown"
         />
       </v-col>
     </v-row>
   </div>
 </template>
-
-<script>
-    import TooltippedLabel from "./cv-tooltipped-label";
-
-    export default {
-        name: 'Input',
-        components: {
-          TooltippedLabel
-        },
-        // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'labelCols', 'rules', 'tooltip'],
-        data() {
-            return {}
-        },
-        computed: {
-            localValue: {
-                get() {
-                    return this.value;
-                },
-                set(value) {
-                    this.$emit('input', value);
-                }
-            }
-        },
-        methods: {
-            handleKeyboard(event) {
-                if (event.key === "Enter") {
-                    this.$emit("Enter");
-                }
-            }
-        }
-    }
-</script>
-
-<style lang="css" scoped>
-</style>