commit: eeb2dbcb604e269257b42d0bfa6c759730d42478
parent 0afe69ce28d48c201f21932d11fb763da5e7ec56
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Oct 2024 17:22:33 +0300
fix SelectMotion not working properly on palettes/vDirectives
Diffstat:
4 files changed, 54 insertions(+), 13 deletions(-)
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -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,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -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;
}
}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -302,15 +302,24 @@
</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"
/>
- <PaletteEditor
- class="list-edit-area"
- v-model="selectedPalette"
- />
+ <div class="list-edit-area">
+ <StringSetting
+ class="palette-name-input"
+ v-model="selectedPalette.name"
+ >
+ {{ $t('settings.style.themes3.palette.name_label') }}
+ </StringSetting>
+ <PaletteEditor
+ class="palette-editor-single"
+ v-model="selectedPalette"
+ />
+ </div>
</div>
<div
key="variables"
@@ -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"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -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",
