diff --git a/package-lock.json b/package-lock.json index ec72df2..94ceacf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,6 +55,7 @@ "fs-jetpack": "^5.1.0", "lezer-elixir": "^1.1.2", "prettier": "^3.3.2", + "primevue": "^4.3.3", "rollup-plugin-license": "^3.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -1382,6 +1383,70 @@ "node": ">=18" } }, + "node_modules/@primeuix/styled": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.5.1.tgz", + "integrity": "sha512-5Ftw/KSauDPClQ8F2qCyCUF7cIUEY4yLNikf0rKV7Vsb8zGYNK0dahQe7CChaR6M2Kn+NA2DSBSk76ZXqj6Uog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/utils": "^0.5.3" + }, + "engines": { + "node": ">=12.11.0" + } + }, + "node_modules/@primeuix/styles": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.0.3.tgz", + "integrity": "sha512-yHj/Q+fosJ1736Ty5lRbpqhKa9piou+xZPPppNHUDshq0+XhrFwDGggvPGmDAJyUIM+ChM/Nj8lPY/AwTNXAkg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.5.1" + } + }, + "node_modules/@primeuix/utils": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.3.tgz", + "integrity": "sha512-7SGh7734wcF1/uK6RzO6Z6CBjGQ97GDHfpyl2F1G/c7R0z9hkT/V72ypDo82AWcCS7Ta07oIjDpOCTkSVZuEGQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.11.0" + } + }, + "node_modules/@primevue/core": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.3.tgz", + "integrity": "sha512-kSkN5oourG7eueoFPIqiNX3oDT/f0I5IRK3uOY/ytz+VzTZp5yuaCN0Nt42ZQpVXjDxMxDvUhIdaXVrjr58NhQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.5.0", + "@primeuix/utils": "^0.5.1" + }, + "engines": { + "node": ">=12.11.0" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@primevue/icons": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.3.3.tgz", + "integrity": "sha512-ouQaxHyeFB6MSfEGGbjaK5Qv9efS1xZGetZoU5jcPm090MSYLFtroP1CuK3lZZAQals06TZ6T6qcoNukSHpK5w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/utils": "^0.5.1", + "@primevue/core": "4.3.3" + }, + "engines": { + "node": ">=12.11.0" + } + }, "node_modules/@replit/codemirror-lang-csharp": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/@replit/codemirror-lang-csharp/-/codemirror-lang-csharp-6.2.0.tgz", @@ -5329,6 +5394,23 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/primevue": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.3.tgz", + "integrity": "sha512-nooYVoEz5CdP3EhUkD6c3qTdRmpLHZh75fBynkUkl46K8y5rksHTjdSISiDijwTA5STQIOkyqLb+RM+HQ6nC1Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.5.0", + "@primeuix/styles": "^1.0.0", + "@primeuix/utils": "^0.5.1", + "@primevue/core": "4.3.3", + "@primevue/icons": "4.3.3" + }, + "engines": { + "node": ">=12.11.0" + } + }, "node_modules/progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", diff --git a/package.json b/package.json index c605f9a..9676e2e 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "fs-jetpack": "^5.1.0", "lezer-elixir": "^1.1.2", "prettier": "^3.3.2", + "primevue": "^4.3.3", "rollup-plugin-license": "^3.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", diff --git a/src/components/settings/AddKeyBind.vue b/src/components/settings/AddKeyBind.vue new file mode 100644 index 0000000..5050332 --- /dev/null +++ b/src/components/settings/AddKeyBind.vue @@ -0,0 +1,195 @@ + + + + + \ No newline at end of file diff --git a/src/components/settings/KeyBindRow.vue b/src/components/settings/KeyBindRow.vue index c436e43..b815cab 100644 --- a/src/components/settings/KeyBindRow.vue +++ b/src/components/settings/KeyBindRow.vue @@ -42,9 +42,11 @@ {{ commandLabel }} - + @@ -80,14 +82,13 @@ background-color: rgba(0,0,0, 0.05) +dark-mode background-color: rgba(0,0,0, 0.25) - button + button.delete padding: 0 10px height: 22px font-size: 12px background: none border: none border-radius: 2px - margin-right: 2px cursor: pointer background: #ddd &:hover @@ -96,13 +97,4 @@ background: #555 &:hover background: #666 - //&.delete - // background: #e95050 - // &:hover - // background: #ce4848 - // +dark-mode - // &.delete - // background: #ae1e1e - // &:hover - // background: #bf2222 diff --git a/src/components/settings/KeyboardBindings.vue b/src/components/settings/KeyboardBindings.vue index c3a3e36..b4b9216 100644 --- a/src/components/settings/KeyboardBindings.vue +++ b/src/components/settings/KeyboardBindings.vue @@ -5,6 +5,7 @@ import { DEFAULT_KEYMAP, EMACS_KEYMAP } from "@/src/editor/keymap" import { useSettingsStore } from "@/src/stores/settings-store" import KeyBindRow from "./KeyBindRow.vue" + import AddKeyBind from "./AddKeyBind.vue" export default { props: [ @@ -12,43 +13,26 @@ "modelValue", ], components: { - KeyBindRow, draggable, + KeyBindRow, + AddKeyBind, }, data() { return { keymap: this.modelValue, - //fixedKeymap: [], + addKeyBinding: false, } }, mounted() { - /*const defaultKeymap = this.settings.keymap === "emacs" ? EMACS_KEYMAP : DEFAULT_KEYMAP - this.fixedKeymap = defaultKeymap.map((km) => { - return { - key: km.key, - command: km.command, - isDefault: true, - } - })*/ - /* - const keymap = this.settings.keymap === "emacs" ? EMACS_KEYMAP : DEFAULT_KEYMAP - this.testKeymap = [ - ...this.userKeys, - {"key": "Mod-Enter", command: "yay"}, - {"key": "Mod-Enter n", command: "nay"}, - {"key": "Ctrl-o", command: null}, - ] - - this.fixedKeymap = keymap.map((km) => { - return { - key: km.key, - command: km.command, - isDefault: true, - isOverridden: km.key in this.userKeys, - } - })*/ + + }, + + watch: { + addKeyBinding(newValue) { + this.$emit("addKeyBindingDialogVisible", newValue) + }, }, computed: { @@ -76,7 +60,24 @@ methods: { onDragEnd(event) { - console.log("onDragEnd", this.testKeymap) + this.$emit("update:modelValue", this.keymap) + }, + + onSaveKeyBinding(event) { + this.keymap = [ + { + key: event.key, + command: event.command, + }, + ...this.keymap, + ] + //console.log("keymap", this.keymap) + this.$emit("update:modelValue", this.keymap) + this.addKeyBinding = false + }, + + deleteKeyBinding(index) { + this.keymap = this.keymap.toSpliced(index, 1) this.$emit("update:modelValue", this.keymap) }, }, @@ -85,15 +86,33 @@