thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Add submitOnBlur property to text fields

Browse source
This commit is contained in:
thepaperpilot 2022-09-05 12:34:38 -05:00
parent e91d971532
commit e754b01dca
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/fields/Text.vue
View file

@ -9,7 +9,7 @@
v-model="value" v-model="value"
:placeholder="placeholder" :placeholder="placeholder"
:maxHeight="maxHeight" :maxHeight="maxHeight"
@blur="submit" @blur="blur"
ref="field" ref="field"
/> />
<input <input
@ -18,7 +18,7 @@
v-model="value" v-model="value"
:placeholder="placeholder" :placeholder="placeholder"
:class="{ fullWidth: !title }" :class="{ fullWidth: !title }"
@blur="submit" @blur="blur"
ref="field" ref="field"
/> />
</div> </div>
@ -28,26 +28,25 @@
<script setup lang="ts"> <script setup lang="ts">
import "components/common/fields.css"; import "components/common/fields.css";
import type { CoercableComponent } from "features/feature"; import type { CoercableComponent } from "features/feature";
import { coerceComponent } from "util/vue"; import { computeOptionalComponent } from "util/vue";
import { computed, onMounted, shallowRef, toRefs, unref } from "vue"; import { computed, onMounted, shallowRef, toRef, unref } from "vue";
import VueTextareaAutosize from "vue-textarea-autosize"; import VueTextareaAutosize from "vue-textarea-autosize";
const _props = defineProps<{ const props = defineProps<{
title?: CoercableComponent; title?: CoercableComponent;
modelValue?: string; modelValue?: string;
textArea?: boolean; textArea?: boolean;
placeholder?: string; placeholder?: string;
maxHeight?: number; maxHeight?: number;
submitOnBlur?: boolean;
}>(); }>();
const props = toRefs(_props);
const emit = defineEmits<{ const emit = defineEmits<{
(e: "update:modelValue", value: string): void; (e: "update:modelValue", value: string): void;
(e: "submit"): void; (e: "submit"): void;
(e: "cancel"): void;
}>(); }>();
const titleComponent = computed( const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
() => props.title?.value && coerceComponent(unref(props.title.value), "span")
);
const field = shallowRef<HTMLElement | null>(null); const field = shallowRef<HTMLElement | null>(null);
onMounted(() => { onMounted(() => {
@ -66,6 +65,14 @@ const value = computed({
function submit() { function submit() {
emit("submit"); emit("submit");
} }
function blur() {
if (props.submitOnBlur !== false) {
emit("submit");
} else {
emit("cancel");
}
}
</script> </script>
<style scoped> <style scoped>