fix SelectMotion not working properly on palettes/vDirectives

This commit is contained in:
Henry Jameson 2024-10-11 17:22:33 +03:00
parent 0afe69ce28
commit eeb2dbcb60
4 changed files with 54 additions and 13 deletions

View file

@ -121,9 +121,22 @@ export default {
border: '#d8e6f9'
}
])
// This is kinda dumb but you cannot "replace" reactive() object
// and so v-model simply fails when you try to chage (increase only?)
// length of the array. Since linter complains about mutating modelValue
// inside SelectMotion, the next best thing is to just wipe existing array
// and replace it with new one.
const onPalettesUpdate = (e) => {
palettes.splice(0, palettes.length)
palettes.push(...e)
}
const selectedPaletteId = ref(0)
const selectedPalette = computed({
get () {
console.log(palettes, toValue(palettes))
return palettes[selectedPaletteId.value]
},
set (newPalette) {
@ -542,6 +555,12 @@ export default {
}
})
const virtualDirectives = reactive(allCustomVirtualDirectives)
const onVirtualDirectivesUpdate = (e) => {
virtualDirectives.splice(0, virtualDirectives.length)
virtualDirectives.push(...e)
}
const selectedVirtualDirectiveId = ref(0)
const selectedVirtualDirective = computed({
get () {
@ -601,7 +620,7 @@ export default {
}
})
const getNewDirective = () => ({
const getNewVirtualDirective = () => ({
name: 'newDirective',
valType: 'generic',
value: 'foobar'
@ -656,13 +675,15 @@ export default {
const editorComponents = parsed.filter(x => x.component.startsWith('@'))
const rules = parsed.filter(x => !x.component.startsWith('@'))
const metaIn = editorComponents.find(x => x.component === '@meta').directives
const palettesIn = editorComponents.filter(x => x.component === '@palette').directives
const palettesIn = editorComponents.filter(x => x.component === '@palette')
name.value = metaIn.name
license.value = metaIn.license
author.value = metaIn.author
website.value = metaIn.website
console.log('PALETTES', palettesIn)
Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
rules.forEach(rule => {
@ -699,6 +720,7 @@ export default {
// ## Palette
palettes,
onPalettesUpdate,
selectedPalette,
selectedPaletteId,
getNewPalette,
@ -757,11 +779,12 @@ export default {
// ## Variables
virtualDirectives,
onVirtualDirectivesUpdate,
selectedVirtualDirective,
selectedVirtualDirectiveId,
selectedVirtualDirectiveParsed,
selectedVirtualDirectiveValType,
getNewDirective,
getNewVirtualDirective,
// ## Export and Import
exportStyle,

View file

@ -159,7 +159,14 @@
width: min-content;
.list-edit-area {
display: grid;
align-self: baseline;
grid-template-rows: subgrid;
grid-template-columns: 1fr;
}
.palette-editor-single {
grid-row: 2 / span 2;
}
}

View file

@ -302,16 +302,25 @@
</Select>
<SelectMotion
class="list-select-movement"
v-model="palettes"
:get-add-value="getNewPalette"
:modelValue="palettes"
@update:modelValue="onPalettesUpdate"
:selected-id="selectedPaletteId"
:get-add-value="getNewPalette"
@update:selectedId="e => selectedPaletteId = e"
/>
<div class="list-edit-area">
<StringSetting
class="palette-name-input"
v-model="selectedPalette.name"
>
{{ $t('settings.style.themes3.palette.name_label') }}
</StringSetting>
<PaletteEditor
class="list-edit-area"
class="palette-editor-single"
v-model="selectedPalette"
/>
</div>
</div>
<div
key="variables"
:label="$t('settings.style.themes3.editor.variables_tab')"
@ -328,7 +337,7 @@
id="variables-selector"
v-model="selectedVirtualDirectiveId"
class="list-select"
size="9"
size="20"
>
<option
v-for="(p, index) in virtualDirectives"
@ -340,7 +349,8 @@
</Select>
<SelectMotion
class="list-select-movement"
v-model="virtualDirectives"
:modelValue="virtualDirectives"
@update:modelValue="onVirtualDirectivesUpdate"
:selected-id="selectedVirtualDirectiveId"
:get-add-value="getNewVirtualDirective"
@update:selectedId="e => selectedVirtualDirectiveId = e"

View file

@ -757,7 +757,8 @@
"themes3": {
"define": "Override",
"palette": {
"label": "Palettes",
"label": "Color schemes",
"name_label": "Color scheme name",
"import": "Import",
"export": "Export",
"bg": "Panel background",
@ -803,7 +804,7 @@
"no-auto": "Disabled"
},
"component_tab": "Components style",
"palette_tab": "Color presets",
"palette_tab": "Color schemes",
"variables_tab": "Variables (Advanced)",
"variables": {
"label": "Variables",