vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: focus on fields label after adding it

Browse source
This commit is contained in:
Shariq Ansari 2023-10-31 12:05:30 +05:30
parent 748ffbe4e4
commit b345ad5fe0
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frappe/public/js/form_builder/components/EditableInput.vue
View file

@ -5,13 +5,13 @@ let store = useStore();
const props = defineProps({
text: {
type: String
type: String,
},
placeholder: {
default: __("No Label")
default: __("No Label"),
},
empty_label: {
default: __("No Label")
default: __("No Label"),
},
});
@ -35,6 +35,8 @@ function focus_on_label() {
nextTick(() => input_text.value.focus());
}
}
defineExpose({ focus_on_label });
</script>
<template>
@ -48,12 +50,12 @@ function focus_on_label() {
:placeholder="placeholder"
:value="text"
:style="{ width: hidden_span_width }"
@input="event => $emit('update:modelValue', event.target.value)"
@input="(event) => $emit('update:modelValue', event.target.value)"
@keydown.enter="editing = false"
@blur="editing = false"
@click.stop
/>
<span v-else-if="text" v-html="text" ></span>
<span v-else-if="text" v-html="text"></span>
<i v-else class="text-muted">
{{ empty_label }}
</i>

6
frappe/public/js/form_builder/components/Field.vue
View file

@ -2,12 +2,13 @@
import EditableInput from "./EditableInput.vue";
import { useStore } from "../store";
import { move_children_to_parent, clone_field } from "../utils";
import { ref, computed } from "vue";
import { ref, computed, onMounted } from "vue";
import AddFieldButton from "./AddFieldButton.vue";
const props = defineProps(["column", "field"]);
const store = useStore();
const label_input = ref(null);
const hovered = ref(false);
const selected = computed(() => store.selected(props.field.df.name));
const component = computed(() => {
@ -55,6 +56,8 @@ function duplicate_field() {
props.column.fields.splice(index + 1, 0, duplicate_field);
store.form.selected_field = duplicate_field.df;
}
onMounted(() => label_input.value.focus_on_label());
</script>
<template>
@ -74,6 +77,7 @@ function duplicate_field() {
<template #label>
<div class="field-label">
<EditableInput
ref="label_input"
:text="field.df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${field.df.fieldtype})`"