Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add editor focus scroll

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-12 16:33:21 +02:00
parent b223644ac5
commit 738d51ffa2
4 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
vuejs/client/input.css
View file

@ -291,7 +291,7 @@ body {
}
.input-editor {
@apply min-h-[200px] w-full;
@apply z-10 min-h-[200px] w-full;
}
.disabled.input-editor {
@ -303,11 +303,11 @@ body {
}
.input-clipboard-container {
@apply rounded-full absolute flex w-full h-full;
@apply z-20 rounded-full absolute flex;
}
.editor.input-clipboard-container {
@apply top-2 right-2;
@apply top-2 right-4;
}
.pw-input.input-clipboard-container {
@ -323,11 +323,11 @@ body {
}
.input-clipboard-button {
@apply transition-all h-5.5 w-5.5 md:h-6 md:w-6 absolute flex block top-0 right-0 text-gray-500 hover:text-gray-900 transition duration-300 ease-in-out cursor-pointer focus:outline-none focus:ring-0 rounded-full hover:bg-gray-100 z-10;
@apply transition-all h-5.5 w-5.5 md:h-6 md:w-6 absolute flex block top-0 right-0 text-gray-500 hover:text-gray-900 transition duration-300 ease-in-out cursor-pointer rounded-full hover:bg-gray-100 z-10;
}
.copied.input-clipboard-button {
@apply opacity-100;
@apply focus:ring-0 opacity-100;
}
.not-copied.input-clipboard-button {

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

23
vuejs/client/src/components/Form/Raw.vue
View file

@ -3,10 +3,10 @@ import { defineProps, reactive, onMounted, computed } from "vue";
import Container from "@components/Widget/Container.vue";
import Title from "@components/Widget/Title.vue";
import Subtitle from "@components/Widget/Subtitle.vue";
import Input from "@components/Forms/Field/Input.vue";
import Editor from "@components/Forms/Field/Editor.vue";
import Button from "@components/Widget/Button.vue";
import { v4 as uuidv4 } from "uuid";
import { isItemKeyword } from "@utils/form.js";
/**
@name Form/Advanced.vue
@description This component is used to create a complete advanced form with plugin selection.
@ -59,6 +59,21 @@ const props = defineProps({
},
});
const data = reactive({
format: computed(() => {
const dataStr = JSON.stringify(props.template);
// Add a new line after the comma
return dataStr.replace(/,/g, ",\n");
}),
});
const editorData = {
value: data.format,
name: "test-editor",
label: "Test editor",
columns: { pc: 12, tablet: 12, mobile: 12 },
};
const buttonSave = {
id: uuidv4(),
text: "action_save",
@ -80,9 +95,7 @@ const buttonSave = {
<Title type="card" :title="'dashboard_raw_mode'" />
<Subtitle type="card" :subtitle="'dashboard_raw_mode_subtitle'" />
<Container class="col-span-12 w-full">
<div>
{{ props.template }}
</div>
<Editor v-bind="editorData" />
</Container>
<Button v-bind="buttonSave" />
</Container>

4
vuejs/client/src/components/Forms/Field/Editor.vue
View file

@ -282,6 +282,10 @@ onMounted(() => {
const editorArea = document.querySelector("textarea.ace_text-input");
editorArea.tabIndex = contentIndex;
editorArea.setAttribute("name", props.name);
editorArea.addEventListener("focus", (e) => {
const editorRange = editorEl.editor.getSelectionRange();
editorEl.editor.gotoLine(editorRange.start.row, editorRange.start.column);
});
} catch (e) {}
});