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 @@
-
Keyboard Bindings
-
-
- Source |
- Key |
- Command |
- |
- |
-
+
+
+
+
+
+
+
+ Source |
+ Key |
+ Command |
+ |
+ |
+
+
-
+
@@ -128,10 +149,20 @@
diff --git a/src/css/application.sass b/src/css/application.sass
index 0c9634f..01b95fe 100644
--- a/src/css/application.sass
+++ b/src/css/application.sass
@@ -1,3 +1,4 @@
@import "reset"
@import "font"
@import "base"
+@import "autocomplete"
diff --git a/src/css/autocomplete.sass b/src/css/autocomplete.sass
new file mode 100644
index 0000000..0979886
--- /dev/null
+++ b/src/css/autocomplete.sass
@@ -0,0 +1,44 @@
+@import "./src/css/include.sass"
+
+
+.p-component
+ --p-inputtext-background: #fff
+ --p-inputtext-border-color: #ccc
+ --p-inputtext-border-radius: 3px
+ --p-inputtext-padding-y: 4px
+ --p-inputtext-padding-x: 4px
+ --p-inputtext-focus-border-color: var(--p-inputtext-border-color)
+ --p-inputtext-hover-border-color: var(--p-inputtext-border-color)
+ --p-inputtext-active-border-color: var(--p-inputtext-border-color)
+
+ --p-autocomplete-dropdown-border-color: var(--p-inputtext-border-color)
+ --p-autocomplete-dropdown-border-radius: var(--p-inputtext-border-radius)
+ --p-autocomplete-dropdown-hover-border-color: var(--p-inputtext-hover-border-color)
+ --p-autocomplete-dropdown-active-border-color: var(--p-inputtext-active-border-color)
+ --p-autocomplete-option-focus-background: #f1f1f1
+
+ +dark-mode
+ --p-inputtext-background: #202020
+ --p-inputtext-border-color: #444
+ --p-autocomplete-option-focus-background: #555
+ --p-autocomplete-option-focus-color: #fff
+
+.p-inputtext.p-inputtext
+ font-size: 12px
+
+.p-autocomplete-list-container
+ background: #fff
+ border: 1px solid #f1f1f1
+ padding: 6px 0
+ border-radius: 3px
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
+ +dark-mode
+ color: rgba(255,255,255, 0.8)
+ background: #333
+ border: 1px solid #2a2a2a
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)
+
+ .p-autocomplete-list > li
+ padding: 6px 10px
+ b
+ font-weight: bold
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4d53fd6..e790ce7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import './css/application.sass'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config';
import App from './components/App.vue'
import { loadCurrencies } from './currency'
@@ -13,6 +14,7 @@ const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
+app.use(PrimeVue)
app.mount('#app').$nextTick(() => {
// hide loading screen
postMessage({ payload: 'removeLoading' }, '*')
diff --git a/webapp/main.js b/webapp/main.js
index f02d793..5ff191c 100644
--- a/webapp/main.js
+++ b/webapp/main.js
@@ -2,6 +2,7 @@ import '../src/css/application.sass'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config';
import App from '../src/components/App.vue'
import { loadCurrencies } from '../src/currency'
@@ -9,6 +10,7 @@ import { loadCurrencies } from '../src/currency'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
+app.use(PrimeVue)
app.mount('#app')
//console.log("test:", app.hej.test)