feat: ctrl+shift+n to add new field & delete/backspace to delete the field when it in on focus

This commit is contained in:
Shariq Ansari 2023-10-31 20:51:41 +05:30
parent d95b3b6fb0
commit ca2152d56c
2 changed files with 21 additions and 1 deletions

View file

@ -124,6 +124,8 @@ function add_new_field(field) {
watch(selected, (val) => {
if (!val) show.value = false;
});
defineExpose({ open: toggle_fieldtype_options });
</script>
<style lang="scss" scoped>

View file

@ -4,10 +4,28 @@ import { useStore } from "../store";
import { move_children_to_parent, clone_field } from "../utils";
import { ref, computed, onMounted } from "vue";
import AddFieldButton from "./AddFieldButton.vue";
import { useMagicKeys, whenever } from "@vueuse/core";
const props = defineProps(["column", "field"]);
const store = useStore();
const add_field_ref = ref(null);
// cmd/ctrl + shift + n to open the add field autocomplete
const { ctrl_shift_n, Backspace } = useMagicKeys();
whenever(ctrl_shift_n, (value) => {
if (value && selected.value) {
add_field_ref.value.open();
}
});
// delete/backspace to delete the field
whenever(Backspace, (value) => {
if (value && selected.value) {
remove_field();
}
});
const label_input = ref(null);
const hovered = ref(false);
const selected = computed(() => store.selected(props.field.df.name));
@ -93,7 +111,7 @@ onMounted(() => selected.value && label_input.value.focus_on_label());
</template>
<template #actions>
<div class="field-actions" :hidden="store.read_only">
<AddFieldButton :column="column" :field="field">
<AddFieldButton ref="add_field_ref" :column="column" :field="field">
<div v-html="frappe.utils.icon('add', 'sm')" />
</AddFieldButton>
<button