Skip to content

Commit ec5aa8c

Browse files
JanLungeJanLunge
committed
changed multiselect element
1 parent 2287ae5 commit ec5aa8c

File tree

13 files changed

+112
-89
lines changed

13 files changed

+112
-89
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"@electron-toolkit/utils": "^1.0.2",
2626
"@mdi/font": "^7.1.96",
2727
"@viselect/vue": "^3.2.5",
28-
"@vueform/multiselect": "^2.5.8",
2928
"@vueuse/core": "^9.12.0",
3029
"@wlard/vue-class-store": "^3.0.0",
3130
"daisyui": "^2.50.0",
@@ -36,6 +35,7 @@
3635
"sass": "^1.58.0",
3736
"tailwindcss": "^3.2.6",
3837
"ulid": "^2.3.0",
38+
"vue-multiselect": "^3.0.0-beta.1",
3939
"vue-router": "^4.1.6"
4040
},
4141
"devDependencies": {

‎src/renderer/src/components/EncoderLayer.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<input
88
v-model="keyboardStore.encoderKeymap[lindex][eindex][0]"
99
type="text"
10-
class="input-bordered input"
10+
class="input-bordered input input-sm"
1111
/>
1212
<input
1313
v-model="keyboardStore.encoderKeymap[lindex][eindex][1]"
1414
type="text"
15-
class="input-bordered input"
15+
class="input-bordered input input-sm"
1616
/>
1717
</div>
1818
</template>

‎src/renderer/src/components/EncoderSetup.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<template>
22
<div>
3-
<p>Encoder setup is currently WIP</p>
43
<div
54
v-for="(encoder, eindex) in keyboardStore.encoders"
65
class="my-2 p-4 bg-base-300 grid gap-4"
76
>
87
<div class="flex gap-4 justify-between">
9-
<p>Encoder {{ eindex }}</p>
8+
<p class="font-bold text-lg">Encoder {{ eindex }}</p>
109
<button class="btn btn-xs btn-error" @click="removeEncoder(eindex)">
11-
remove encoder
10+
<i class="mdi mdi-delete"></i> remove encoder
1211
</button>
1312
</div>
14-
<div class="flex items-center gap-4 mb-4">
13+
<div class="flex items-center gap-4 mb-2">
1514
<label>Pad A</label>
1615
<input
1716
type="text"
18-
class="input input-bordered"
17+
class="input input-bordered input-sm"
1918
v-model="encoder.pad_a"
2019
placeholder="14"
2120
/>
@@ -24,7 +23,7 @@
2423
<label>Pad B</label>
2524
<input
2625
type="text"
27-
class="input input-bordered"
26+
class="input input-bordered input-sm"
2827
v-model="encoder.pad_b"
2928
placeholder="14"
3029
/>
@@ -39,7 +38,7 @@
3938
</div>
4039
</div>
4140
<div class="btn btn-sm btn-primary mt-2" @click="addEncoder">
42-
add Encoder
41+
<i class="mdi mdi-plus"></i>add Encoder
4342
</div>
4443
</div>
4544
</template>

‎src/renderer/src/components/KeyCap.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,19 @@ import { computed, ref, watch } from 'vue'
8383
import { selectedLayer, selectedKeys, keyboardStore } from '../store'
8484
import { matrixPositionToIndex, renderLabel } from '../helpers'
8585
86-
const props = defineProps(['keyData', 'keyIndex', 'mode'])
86+
const props = defineProps(['keyData', 'keyIndex', 'mode', 'keymap', 'matrixWidth'])
8787
defineEmits(['selected'])
8888
8989
const keyGap = 4
9090
// hide normal labels and show the keymap thing
9191
const action = computed(() => {
9292
if (props.mode === 'layout') return //String(props.keyData.matrix)
93-
const matrixWidth = keyboardStore.cols
94-
const keyIndex = matrixPositionToIndex({ pos: props.keyData.matrix, matrixWidth })
95-
if (!keyboardStore.keymap[selectedLayer.value]) return 'l missing'
96-
const keyCode = keyboardStore.keymap[selectedLayer.value][keyIndex]
93+
const keyIndex = matrixPositionToIndex({
94+
pos: props.keyData.matrix,
95+
matrixWidth: props.matrixWidth
96+
})
97+
if (!props.keymap[selectedLayer.value]) return 'l missing'
98+
const keyCode = props.keymap[selectedLayer.value][keyIndex]
9799
// resolve readable character
98100
if (!keyCode || keyCode === 'KC.TRNS') return '▽'
99101
return keyCode

‎src/renderer/src/components/KeyboardLayout.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
:key-data="key"
3737
:key-index="keyIndex"
3838
:mode="mode"
39+
:keymap="keymap"
40+
:matrix-width="matrixWidth"
3941
>
4042
</key-cap>
4143
</div>
@@ -51,7 +53,7 @@ import { SelectionArea } from '@viselect/vue'
5153
import type { SelectionEvent } from '@viselect/vue'
5254
import { isNumber } from '@vueuse/core'
5355
import { useDebounceFn } from '@vueuse/core'
54-
const props = defineProps(['keyLayout', 'mode'])
56+
const props = defineProps(['keyLayout', 'keymap', 'mode', 'matrixWidth'])
5557
// mode can be layout or keymap
5658
5759
// find right edge
@@ -133,6 +135,10 @@ const moving = ref(false)
133135
const moveStart = ref({ x: 0, y: 0 })
134136
const writtenDelta = ref({ x: 0, y: 0 })
135137
const onStart = ({ event, selection }: SelectionEvent) => {
138+
if (props.mode === 'static') {
139+
selection.cancel()
140+
return
141+
}
136142
if (event?.shiftKey && props.mode === 'layout') {
137143
if (event instanceof MouseEvent) {
138144
// save start point
@@ -160,6 +166,9 @@ const onMove = ({
160166
},
161167
event
162168
}: SelectionEvent) => {
169+
if(props.mode==='static'){
170+
return
171+
}
163172
if (event?.shiftKey && props.mode === 'layout') {
164173
if (event instanceof MouseEvent) {
165174
// console.log(event, selection);

‎src/renderer/src/components/KeyboardName.vue‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,26 @@
22
<div class="mt-8">
33
<div class="mb-4">
44
<p class="mb-2 text-sm">Name</p>
5-
<input v-model="keyboardStore.name" type="text" class="input-bordered input" />
5+
<input v-model="keyboardStore.name" type="text" class="input-bordered input w-full" />
66
</div>
77
<div class="mb-4">
88
<p class="mb-2 text-sm">Manufacturer</p>
9-
<input v-model="keyboardStore.manufacturer" type="text" class="input-bordered input" />
9+
<input v-model="keyboardStore.manufacturer" type="text" class="input-bordered input w-full" />
1010
</div>
1111
<div class="mb-4">
1212
<p class="mb-2 text-sm">Description</p>
13-
<input v-model="keyboardStore.description" type="text" class="input-bordered input" />
13+
<textarea v-model="keyboardStore.description" type="text" class="textarea-bordered textarea w-full" />
1414
</div>
1515
<div class="mb-4">
1616
<p class="mb-2 text-sm">Tags</p>
17-
<Multiselect
17+
<VueMultiselect
1818
v-model="keyboardStore.tags"
19-
mode="tags"
20-
:searchable="true"
21-
:create-option="false"
2219
:options="keyboardTags"
23-
:close-on-select="false"
24-
track-by="name"
25-
label="name"
20+
:multiple="true"
21+
:taggable="true"
22+
@tag="addTag"
2623
>
27-
<template #tag="{ option, handleTagRemove, disabled }">
28-
<div
29-
class="multiselect-tag is-user"
30-
:class="{
31-
'is-disabled': disabled
32-
}"
33-
>
34-
{{ option.name }}
35-
<span
36-
v-if="!disabled"
37-
class="multiselect-tag-remove"
38-
@mousedown.prevent="handleTagRemove(option, $event)"
39-
>
40-
<span class="multiselect-tag-remove-icon"></span>
41-
</span>
42-
</div>
43-
</template>
44-
</Multiselect>
24+
</VueMultiselect>
4525
</div>
4626
<div class="flex justify-center mt-8">
4727
<button v-if="initialSetup" class="btn-primary btn" @click="$emit('next')">next</button>
@@ -51,12 +31,17 @@
5131

5232
<script lang="ts" setup>
5333
import { keyboardStore } from '../store'
54-
import Multiselect from '@vueform/multiselect'
55-
34+
import VueMultiselect from 'vue-multiselect'
5635
defineProps(['initialSetup'])
57-
const keyboardTags = [{ value: '65%', name: '65%', type: 'formfactor' }]
36+
const keyboardTags = ['65%']
5837
38+
const addTag = (tag) => {
39+
console.log(tag)
40+
keyboardStore.tags.push(tag)
5941
42+
}
6043
</script>
6144

62-
<style lang="scss" scoped></style>
45+
<style lang="scss" >
46+
@import 'vue-multiselect/dist/vue-multiselect.css'
47+
</style>

‎src/renderer/src/components/KeymapEditor.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@
2626
</div>
2727
</div>
2828
</div>
29-
<keyboard-layout :key-layout="keyboardStore.keys" />
29+
<keyboard-layout
30+
:key-layout="keyboardStore.keys"
31+
:keymap="keyboardStore.keymap"
32+
:matrix-width="keyboardStore.cols"
33+
/>
3034
<div v-if="selectedKeys.size !== 0" class="my-4">
3135
<p>Keycode Options for Selected Key(s)</p>
3236
<div class="flex gap-2">

‎src/renderer/src/components/LayoutEditor.vue‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<template>
22
<div class="flex gap-2">
3-
4-
<div class="btn-sm btn mb-4 p-2" @click="showConverter"><i class="mdi mdi-import"></i>Import from KLE</div>
5-
<div class="btn-sm btn mb-4 p-2" @click="showRawPogOutput"><i class="mdi mdi-export"></i>export from pog</div>
6-
3+
<div class="btn-sm btn mb-4 p-2" @click="showConverter">
4+
<i class="mdi mdi-import"></i>Import from KLE
5+
</div>
6+
<div class="btn-sm btn mb-4 p-2" @click="showRawPogOutput">
7+
<i class="mdi mdi-export"></i>export from pog
8+
</div>
79
</div>
810
<div v-if="converterVisible">
911
<div class="flex gap-2">
@@ -31,26 +33,38 @@
3133
style="line-height: 1rem"
3234
rows="8"
3335
></textarea>
34-
3536
</div>
3637
<div class="mt-2 flex flex-col gap-2">
3738
<span class="text-warning">this will overwrite your existing layout</span>
3839
<button class="btn-primary btn-sm btn my-4" @click="convert">convert to pog.json</button>
3940
</div>
4041
<hr />
4142
</div>
42-
<div v-if="showRawPogLayout">
43-
<textarea class="textarea textarea-bordered w-full" v-model="pogOutput"></textarea>
44-
</div>
43+
<div v-if="showRawPogLayout">
44+
<textarea v-model="pogOutput" class="textarea-bordered textarea w-full"></textarea>
45+
</div>
4546
<div>
4647
<div class="flex justify-between">
4748
<div class="flex gap-1">
48-
<button class="btn-sm btn btn-primary" @click="addKey"><i class="mdi mdi-plus"></i>add key</button>
49-
<button class="btn-sm btn btn-primary" @click="removeKey" :disabled="selectedKeys.size === 0"><i class="mdi mdi-trash-can"></i>remove key</button>
49+
<button class="btn-primary btn-sm btn" @click="addKey">
50+
<i class="mdi mdi-plus"></i>add key
51+
</button>
52+
<button
53+
class="btn-primary btn-sm btn"
54+
:disabled="selectedKeys.size === 0"
55+
@click="removeKey"
56+
>
57+
<i class="mdi mdi-trash-can"></i>remove key
58+
</button>
5059
</div>
5160
</div>
5261

53-
<keyboard-layout :key-layout="keyboardStore.keys" mode="layout" />
62+
<keyboard-layout
63+
:key-layout="keyboardStore.keys"
64+
:keymap="keyboardStore.keymap"
65+
:matrix-width="keyboardStore.cols"
66+
mode="layout"
67+
/>
5468
<div class="flex">
5569
<div class="w-1/2 border-r">
5670
<variant-switcher></variant-switcher>
@@ -66,7 +80,7 @@
6680
<script lang="ts" setup>
6781
import { cleanupKeymap, KleToPog, selectNextKey, selectPrevKey } from '../helpers'
6882
import { onMounted, ref } from 'vue'
69-
import { selectedKeys, keyboardStore, Key, keyboardHistory } from '../store'
83+
import { selectedKeys, keyboardStore, Key, keyboardHistory, addToHistory } from '../store'
7084
import KeyboardLayout from './KeyboardLayout.vue'
7185
import { isNumber, onKeyStroke } from '@vueuse/core'
7286
import KeyLayoutInfo from './KeyLayoutInfo.vue'
@@ -76,7 +90,7 @@ import VariantSwitcher from './VariantSwitcher.vue'
7690
// const router = useRouter()
7791
const kleInput = ref('')
7892
const showRawPogLayout = ref(false)
79-
const pogOutput = ref("")
93+
const pogOutput = ref('')
8094
selectedKeys.value.clear()
8195
const emit = defineEmits(['next'])
8296
const props = defineProps(['initialSetup'])
@@ -85,7 +99,7 @@ const showConverter = () => {
8599
converterVisible.value = !converterVisible.value
86100
}
87101
const showRawPogOutput = () => {
88-
showRawPogLayout.value= !showRawPogLayout.value
102+
showRawPogLayout.value = !showRawPogLayout.value
89103
// export
90104
pogOutput.value = JSON.stringify(keyboardStore.getKeys(), null, 4)
91105
}
@@ -130,13 +144,8 @@ const setupDone = () => {
130144
JSON.stringify({ pogConfig: keyboardStore.serialize(), writeFirmware: false })
131145
)
132146
// save config to localstorage
133-
keyboardHistory.value.push({
134-
id: keyboardStore.id,
135-
path: keyboardStore.path,
136-
name: keyboardStore.name,
137-
tags: keyboardStore.tags,
138-
description: keyboardStore.description
139-
})
147+
addToHistory(keyboardStore)
148+
140149
emit('next')
141150
}
142151
@@ -183,8 +192,8 @@ const addKey = () => {
183192
}
184193
185194
const removeKey = () => {
186-
const keys = [...selectedKeys.value].map(key => keyboardStore.keys[key].id)
187-
keyboardStore.removeKeys({ids:keys})
195+
const keys = [...selectedKeys.value].map((key) => keyboardStore.keys[key].id)
196+
keyboardStore.removeKeys({ ids: keys })
188197
selectedKeys.value.clear()
189198
}
190199

‎src/renderer/src/helpers/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,7 @@ export const renderLabel = (keycode: string) => {
259259
LEFT: { icon: 'mdi-arrow-left' },
260260
DOWN: { icon: 'mdi-arrow-down' },
261261
RIGHT: { icon: 'mdi-arrow-right' },
262+
GRV: {label: '`'},
262263

263264
// Layer
264265
MO: { label: 'MO' },

‎src/renderer/src/screens/KeyboardConfigurator.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<h1 class="mb-8 text-center text-5xl font-bold" contenteditable="true">{{ currentRouteName }}</h1>
2727
<router-view></router-view>
2828
<div class="flex justify-center py-4">
29-
<div class="btn-primary btn-sm btn" @click="saveKeymap">Save python code to Keyboard</div>
29+
<div class="btn-primary btn-sm btn" @click="saveKeymap"><i class="mdi mdi-content-save"></i>Save python code to Keyboard</div>
3030
</div>
3131
</div>
3232
</div>

0 commit comments

Comments
 (0)