mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-21 01:01:41 +00:00
8446c94508
closes #965 Had to disable the eslint rule that was causing the bug. Disallows disabling driver mode when there are no other pipelines to swap to Also adds icons for saving and canceling name edits Adds the option to create a new pipeline in driver mode if there are no other pipelines Adds disable prop to the driver mode switch on the camera settings page
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import TooltippedLabel from "@/components/common/pv-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":
|
|
// Explicitly check that all rule props return true
|
|
if (!props.rules?.every((rule) => rule(localValue.value) === true)) return;
|
|
|
|
emit("onEnter", localValue.value);
|
|
break;
|
|
case "Escape":
|
|
emit("onEscape");
|
|
break;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<v-row dense align="center">
|
|
<v-col :cols="labelCols || 12 - inputCols">
|
|
<tooltipped-label :tooltip="tooltip" :label="label" />
|
|
</v-col>
|
|
|
|
<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="handleKeydown"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|