commit: 92f724de36dbbe54897fc09a579b81d2133c349b
parent b55aeb54f659cf1cdb7f1f006447c99def0d583d
Author: Henry Jameson <me@hjkos.com>
Date: Sat, 26 Oct 2024 19:48:15 +0300
Separate virtual directives tab into separate files
Diffstat:
5 files changed, 237 insertions(+), 193 deletions(-)
diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue
@@ -72,6 +72,7 @@ const moveUp = () => {
const moveDnValid = computed(() => {
return props.selectedId < props.modelValue.length - 1
})
+
const moveDn = () => {
const newModel = [...props.modelValue]
const movable = newModel.splice(props.selectedId.value, 1)[0]
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, computed, watch, provide } from 'vue'
import { get, set } from 'lodash'
import Select from 'src/components/select/select.vue'
@@ -15,12 +15,14 @@ import Tooltip from 'src/components/tooltip/tooltip.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import Preview from '../theme_tab/theme_preview.vue'
+import VirtualDirectivesTab from './virtual_directives_tab.vue'
+
import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
import {
getCssRules,
getScopedVersion
} from 'src/services/theme_data/css_utils.js'
-import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
import {
rgb2hex,
@@ -70,7 +72,8 @@ export default {
PaletteEditor,
OpacityInput,
ContrastRatio,
- Preview
+ Preview,
+ VirtualDirectivesTab
},
setup () {
const exports = {}
@@ -147,6 +150,7 @@ export default {
})
exports.selectedPaletteId = selectedPaletteId
exports.selectedPalette = selectedPalette
+ provide('selectedPalette', selectedPalette)
exports.getNewPalette = () => ({
name: 'new palette',
@@ -313,10 +317,6 @@ export default {
usedRule = get(fallback, path)
}
- if (directive === 'shadow') {
- console.log('EDITED', usedRule)
- console.log('PP', postProcess(usedRule))
- }
return postProcess(usedRule)
},
set (value) {
@@ -378,6 +378,7 @@ export default {
return null
})
}
+ provide('normalizeShadows', normalizeShadows)
// Shadow is partially edited outside the ShadowControl
// for better space utilization
@@ -571,7 +572,6 @@ export default {
updateSelectedComponent
)
- // ## Variables
const allCustomVirtualDirectives = [...componentsMap.values()]
.map(c => {
return c
@@ -590,117 +590,21 @@ export default {
value: valVal.trim()
}
})
- const virtualDirectives = reactive(allCustomVirtualDirectives)
- exports.virtualDirectives = virtualDirectives
- exports.onVirtualDirectivesUpdate = (e) => {
- virtualDirectives.splice(0, virtualDirectives.length)
- virtualDirectives.push(...e)
+ const virtualDirectives = ref(allCustomVirtualDirectives)
+ exports.virtualDirectives = virtualDirectives
+ exports.updateVirtualDirectives = (value) => {
+ virtualDirectives.value = value
}
- const selectedVirtualDirectiveId = ref(0)
- exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
-
- const selectedVirtualDirective = computed({
- get () {
- return virtualDirectives[selectedVirtualDirectiveId.value]
- },
- set (value) {
- virtualDirectives[selectedVirtualDirectiveId.value].value = value
- }
- })
- exports.selectedVirtualDirective = selectedVirtualDirective
-
- exports.selectedVirtualDirectiveValType = computed({
- get () {
- return virtualDirectives[selectedVirtualDirectiveId.value].valType
- },
- set (value) {
- const newValType = value
- let newValue
- switch (value) {
- case 'shadow':
- newValue = '0 0 0 #000000 / 1'
- break
- case 'color':
- newValue = '#000000'
- break
- default:
- newValue = 'none'
- }
- const newName = virtualDirectives[selectedVirtualDirectiveId.value].name
- virtualDirectives[selectedVirtualDirectiveId.value] = {
- name: newName,
- value: newValue,
- valType: newValType
- }
- }
- })
-
- const draftVirtualDirectiveValid = ref(true)
- const draftVirtualDirective = ref({})
- exports.draftVirtualDirective = draftVirtualDirective
-
- watch(
- selectedVirtualDirective,
- (directive) => {
- switch (directive.valType) {
- case 'shadow': {
- if (Array.isArray(directive.value)) {
- draftVirtualDirective.value = normalizeShadows(directive.value)
- } else {
- const splitShadow = directive.value.split(/,/g).map(x => x.trim())
- draftVirtualDirective.value = normalizeShadows(splitShadow)
- }
- break
- }
- case 'color':
- draftVirtualDirective.value = directive.value
- break
- default:
- draftVirtualDirective.value = directive.value
- break
- }
- },
- { immediate: true }
- )
-
- watch(
- draftVirtualDirective,
- (directive) => {
- try {
- switch (selectedVirtualDirective.value.valType) {
- case 'shadow': {
- virtualDirectives[selectedVirtualDirectiveId.value].value =
- directive.map(x => serializeShadow(x)).join(', ')
- break
- }
- default:
- virtualDirectives[selectedVirtualDirectiveId.value].value = directive
- }
- draftVirtualDirectiveValid.value = true
- } catch (e) {
- console.error('Invalid virtual directive value', e)
- draftVirtualDirectiveValid.value = false
- }
- },
- { immediate: true }
- )
-
const virtualDirectivesOut = computed(() => {
return [
'Root {',
- ...virtualDirectives.map(vd => ` --${vd.name}: ${vd.valType} | ${vd.value};`),
+ ...virtualDirectives.value.map(vd => ` --${vd.name}: ${vd.valType} | ${vd.value};`),
'}'
].join('\n')
})
- exports.getNewVirtualDirective = () => ({
- name: 'newDirective',
- valType: 'generic',
- value: 'foobar'
- })
-
exports.computeColor = (color) => {
const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
if (computedColor) {
@@ -708,6 +612,7 @@ export default {
}
return null
}
+ provide('computeColor', exports.computeColor)
exports.contrast = computed(() => {
return getContrast(
@@ -735,7 +640,7 @@ export default {
const virtualDirectivesRule = {
component: 'Root',
directives: Object.fromEntries(
- virtualDirectives.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+ virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
)
}
@@ -782,14 +687,13 @@ export default {
exports.author.value = metaIn.author
exports.website.value = metaIn.website
- virtualDirectives.splice(0, virtualDirectives.length)
const newVirtualDirectives = Object
.entries(rootComponent.directives)
.map(([name, value]) => {
const [valType, valVal] = value.split('|').map(x => x.trim())
return { name: name.substring(2), valType, value: valVal }
})
- virtualDirectives.push(...newVirtualDirectives)
+ virtualDirectives.value = newVirtualDirectives
onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -355,89 +355,13 @@
/>
</div>
</div>
- <div
+ <VirtualDirectivesTab
key="variables"
:label="$t('settings.style.themes3.editor.variables_tab')"
- class="setting-item list-editor variables-editor"
- >
- <label
- class="list-select-label"
- for="variables-selector"
- >
- {{ $t('settings.style.themes3.editor.variables.label') }}
- {{ ' ' }}
- </label>
- <Select
- id="variables-selector"
- v-model="selectedVirtualDirectiveId"
- class="list-select"
- size="20"
- >
- <option
- v-for="(p, index) in virtualDirectives"
- :key="p.name"
- :value="index"
- >
- {{ p.name }}
- </option>
- </Select>
- <SelectMotion
- class="list-select-movement"
- :modelValue="virtualDirectives"
- @update:modelValue="onVirtualDirectivesUpdate"
- :selected-id="selectedVirtualDirectiveId"
- :get-add-value="getNewVirtualDirective"
- @update:selectedId="e => selectedVirtualDirectiveId = e"
- />
- <div class="list-edit-area">
- <div class="variable-selector">
- <label
- class="variable-name-label"
- for="variables-selector"
- >
- {{ $t('settings.style.themes3.editor.variables.name_label') }}
- {{ ' ' }}
- </label>
- <input
- class="input"
- v-model="selectedVirtualDirective.name"
- >
- <label
- class="variable-type-label"
- for="variables-selector"
- >
- {{ $t('settings.style.themes3.editor.variables.type_label') }}
- {{ ' ' }}
- </label>
- <Select
- v-model="selectedVirtualDirectiveValType"
- >
- <option value='shadow'>
- {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
- </option>
- <option value='color'>
- {{ $t('settings.style.themes3.editor.variables.type_color') }}
- </option>
- <option value='generic'>
- {{ $t('settings.style.themes3.editor.variables.type_generic') }}
- </option>
- </Select>
- </div>
- <ShadowControl
- v-if="selectedVirtualDirectiveValType === 'shadow'"
- v-model="draftVirtualDirective"
- :static-vars="selectedPalette"
- :compact="true"
- />
- <ColorInput
- v-if="selectedVirtualDirectiveValType === 'color'"
- v-model="draftVirtualDirective"
- :fallback="computeColor(draftVirtualDirective)"
- :label="$t('settings.style.themes3.editor.variables.virtual_color')"
- :hide-optional-checkbox="true"
- />
- </div>
- </div>
+ :model-value="virtualDirectives"
+ @update:modelValue="updateVirtualDirectives"
+ :normalize-shadows="normalizeShadows"
+ />
</tab-switcher>
</div>
</template>
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
@@ -0,0 +1,132 @@
+import { ref, computed, watch, inject } from 'vue'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+export default {
+ components: {
+ Select,
+ SelectMotion,
+ ShadowControl,
+ ColorInput
+ },
+ props: ['modelValue'],
+ emits: ['update:modelValue'],
+ setup (props, context) {
+ const exports = {}
+ const emit = context.emit
+
+ exports.emit = emit
+ exports.computeColor = inject('computeColor')
+ exports.selectedPalette = inject('selectedPalette')
+
+ const selectedVirtualDirectiveId = ref(0)
+ exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
+
+ const selectedVirtualDirective = computed({
+ get () {
+ return props.modelValue[selectedVirtualDirectiveId.value]
+ },
+ set (value) {
+ const newVD = [...props.modelValue]
+ newVD[selectedVirtualDirectiveId.value] = value
+
+ emit('update:modelValue', newVD)
+ }
+ })
+ exports.selectedVirtualDirective = selectedVirtualDirective
+
+ exports.selectedVirtualDirectiveValType = computed({
+ get () {
+ return props.modelValue[selectedVirtualDirectiveId.value].valType
+ },
+ set (value) {
+ const newValType = value
+ let newValue
+ switch (value) {
+ case 'shadow':
+ newValue = '0 0 0 #000000 / 1'
+ break
+ case 'color':
+ newValue = '#000000'
+ break
+ default:
+ newValue = 'none'
+ }
+ const newName = props.modelValue[selectedVirtualDirectiveId.value].name
+ props.modelValue[selectedVirtualDirectiveId.value] = {
+ name: newName,
+ value: newValue,
+ valType: newValType
+ }
+ }
+ })
+
+ const draftVirtualDirectiveValid = ref(true)
+ const draftVirtualDirective = ref({})
+ exports.draftVirtualDirective = draftVirtualDirective
+ const normalizeShadows = inject('normalizeShadows')
+
+ watch(
+ selectedVirtualDirective,
+ (directive) => {
+ switch (directive.valType) {
+ case 'shadow': {
+ if (Array.isArray(directive.value)) {
+ draftVirtualDirective.value = normalizeShadows(directive.value)
+ } else {
+ const splitShadow = directive.value.split(/,/g).map(x => x.trim())
+ draftVirtualDirective.value = normalizeShadows(splitShadow)
+ }
+ break
+ }
+ case 'color':
+ draftVirtualDirective.value = directive.value
+ break
+ default:
+ draftVirtualDirective.value = directive.value
+ break
+ }
+ },
+ { immediate: true }
+ )
+
+ watch(
+ draftVirtualDirective,
+ (directive) => {
+ try {
+ switch (selectedVirtualDirective.value.valType) {
+ case 'shadow': {
+ props.modelValue[selectedVirtualDirectiveId.value].value =
+ directive.map(x => serializeShadow(x)).join(', ')
+ break
+ }
+ default:
+ props.modelValue[selectedVirtualDirectiveId.value].value = directive
+ }
+ draftVirtualDirectiveValid.value = true
+ } catch (e) {
+ console.error('Invalid virtual directive value', e)
+ draftVirtualDirectiveValid.value = false
+ }
+ },
+ { immediate: true }
+ )
+
+ exports.getNewVirtualDirective = () => ({
+ name: 'newDirective',
+ valType: 'generic',
+ value: 'foobar'
+ })
+
+ return exports
+ }
+}
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -0,0 +1,83 @@
+<script src="./virtual_directives_tab.js"></script>
+
+<template>
+<div class="setting-item list-editor variables-editor">
+ <label
+ class="list-select-label"
+ for="variables-selector"
+ >
+ {{ $t('settings.style.themes3.editor.variables.label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ id="variables-selector"
+ v-model="selectedVirtualDirectiveId"
+ class="list-select"
+ size="20"
+ >
+ <option
+ v-for="(p, index) in modelValue"
+ :key="p.name"
+ :value="index"
+ >
+ {{ p.name }}
+ </option>
+ </Select>
+ <SelectMotion
+ class="list-select-movement"
+ :model-value="modelValue"
+ @update:modelValue="e => emit('update:modelValue', e)"
+ :selected-id="selectedVirtualDirectiveId"
+ @update:selectedId="e => selectedVirtualDirectiveId = e"
+ :get-add-value="getNewVirtualDirective"
+ />
+ <div class="list-edit-area">
+ <div class="variable-selector">
+ <label
+ class="variable-name-label"
+ for="variables-selector"
+ >
+ {{ $t('settings.style.themes3.editor.variables.name_label') }}
+ {{ ' ' }}
+ </label>
+ <input
+ class="input"
+ v-model="selectedVirtualDirective.name"
+ >
+ <label
+ class="variable-type-label"
+ for="variables-selector"
+ >
+ {{ $t('settings.style.themes3.editor.variables.type_label') }}
+ {{ ' ' }}
+ </label>
+ <Select
+ v-model="selectedVirtualDirectiveValType"
+ >
+ <option value='shadow'>
+ {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+ </option>
+ <option value='color'>
+ {{ $t('settings.style.themes3.editor.variables.type_color') }}
+ </option>
+ <option value='generic'>
+ {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+ </option>
+ </Select>
+ </div>
+ <ShadowControl
+ v-if="selectedVirtualDirectiveValType === 'shadow'"
+ v-model="draftVirtualDirective"
+ :static-vars="selectedPalette"
+ :compact="true"
+ />
+ <ColorInput
+ v-if="selectedVirtualDirectiveValType === 'color'"
+ v-model="draftVirtualDirective"
+ :fallback="computeColor(draftVirtualDirective)"
+ :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+ :hide-optional-checkbox="true"
+ />
+ </div>
+</div>
+</template>
