qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use a bit saner way of exporting from setup() into template

Browse source
This commit is contained in:
Henry Jameson 2024-10-11 21:11:29 +03:00
parent 1ec1ba8d3e
commit 14fdd34964
1 changed files with 68 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

200
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -78,18 +78,18 @@ export default {
const allEditedRules = reactive({}) const allEditedRules = reactive({})
// ## Meta stuff // ## Meta stuff
const name = ref('') exports.name = ref('')
const author = ref('') exports.author = ref('')
const license = ref('') exports.license = ref('')
const website = ref('') exports.website = ref('')
const metaOut = computed(() => { const metaOut = computed(() => {
return [ return [
'@meta {', '@meta {',
` name: ${name.value};`, ` name: ${exports.name.value};`,
` author: ${author.value};`, ` author: ${exports.author.value};`,
` license: ${license.value};`, ` license: ${exports.license.value};`,
` website: ${website.value};`, ` website: ${exports.website.value};`,
'}' '}'
].join('\n') ].join('\n')
}) })
@ -122,6 +122,7 @@ export default {
border: '#d8e6f9' border: '#d8e6f9'
} }
]) ])
exports.palettes = palettes
// This is kinda dumb but you cannot "replace" reactive() object // This is kinda dumb but you cannot "replace" reactive() object
// and so v-model simply fails when you try to chage (increase only?) // and so v-model simply fails when you try to chage (increase only?)
@ -133,6 +134,7 @@ export default {
palettes.splice(0, palettes.length) palettes.splice(0, palettes.length)
palettes.push(...e) palettes.push(...e)
} }
exports.onPalettesUpdate = onPalettesUpdate
const selectedPaletteId = ref(0) const selectedPaletteId = ref(0)
const selectedPalette = computed({ const selectedPalette = computed({
@ -143,7 +145,10 @@ export default {
palettes[selectedPaletteId.value] = newPalette palettes[selectedPaletteId.value] = newPalette
} }
}) })
const getNewPalette = () => ({ exports.selectedPaletteId = selectedPaletteId
exports.selectedPalette = selectedPalette
exports.getNewPalette = () => ({
name: 'new palette', name: 'new palette',
bg: '#121a24', bg: '#121a24',
fg: '#182230', fg: '#182230',
@ -177,26 +182,31 @@ export default {
key => [key, componentsContext(key).default] key => [key, componentsContext(key).default]
).filter(([key, component]) => !component.virtual && !component.notEditable) ).filter(([key, component]) => !component.virtual && !component.notEditable)
) )
exports.componentsMap = componentsMap
const componentKeys = [...componentsMap.keys()] const componentKeys = [...componentsMap.keys()]
exports.componentKeys = componentKeys
// selection basis // selection basis
const selectedComponentKey = ref(componentsMap.keys().next().value) const selectedComponentKey = ref(componentsMap.keys().next().value)
exports.selectedComponentKey = selectedComponentKey
const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value)) const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
const selectedComponentName = computed(() => selectedComponent.value.name) const selectedComponentName = computed(() => selectedComponent.value.name)
const selectedComponentVariants = computed(() => { exports.selectedComponentVariants = computed(() => {
return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) }) return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
}) })
const selectedComponentStatesAll = computed(() => { const selectedComponentStatesAll = computed(() => {
return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) }) return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
}) })
const selectedComponentStates = computed(() => { exports.selectedComponentStates = computed(() => {
return selectedComponentStatesAll.value.filter(x => x !== 'normal') return selectedComponentStatesAll.value.filter(x => x !== 'normal')
}) })
// selection // selection
const selectedVariant = ref('normal') const selectedVariant = ref('normal')
exports.selectedVariant = selectedVariant
const selectedState = reactive(new Set()) const selectedState = reactive(new Set())
const updateSelectedStates = (state, v) => { exports.selectedState = selectedState
exports.updateSelectedStates = (state, v) => {
if (v) { if (v) {
selectedState.add(state) selectedState.add(state)
} else { } else {
@ -262,7 +272,7 @@ export default {
// Checkging whether component can support some "directives" which // Checkging whether component can support some "directives" which
// are actually virtual subcomponents, i.e. Text, Link etc // are actually virtual subcomponents, i.e. Text, Link etc
const componentHas = (subComponent) => { exports.componentHas = (subComponent) => {
return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent) return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
} }
@ -315,23 +325,24 @@ export default {
}) })
// All the editable stuff for the component // All the editable stuff for the component
const editedBackgroundColor = getEditedElement(null, 'background') exports.editedBackgroundColor = getEditedElement(null, 'background')
const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF') exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
const editedOpacity = getEditedElement(null, 'opacity') exports.editedOpacity = getEditedElement(null, 'opacity')
const isOpacityPresent = isElementPresent(null, 'opacity', 1) exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
const editedTextColor = getEditedElement('Text', 'textColor') exports.editedTextColor = getEditedElement('Text', 'textColor')
const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000') exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
const editedTextAuto = getEditedElement('Text', 'textAuto') exports.editedTextAuto = getEditedElement('Text', 'textAuto')
const isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000') exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
const editedLinkColor = getEditedElement('Link', 'textColor') exports.editedLinkColor = getEditedElement('Link', 'textColor')
const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080') exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
const editedIconColor = getEditedElement('Icon', 'textColor') exports.editedIconColor = getEditedElement('Icon', 'textColor')
const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090') exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
const editedBorderColor = getEditedElement('Border', 'textColor') exports.editedBorderColor = getEditedElement('Border', 'textColor')
const isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090') exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
// TODO this is VERY primitive right now, need to make it // TODO this is VERY primitive right now, need to make it
// support variables, fallbacks etc. // support variables, fallbacks etc.
const getContrast = (bg, text) => { exports.getContrast = (bg, text) => {
try { try {
const bgRgb = hex2rgb(bg) const bgRgb = hex2rgb(bg)
const textRgb = hex2rgb(text) const textRgb = hex2rgb(text)
@ -369,20 +380,23 @@ export default {
// Shadow is partially edited outside the ShadowControl // Shadow is partially edited outside the ShadowControl
// for better space utilization // for better space utilization
const editedShadow = getEditedElement(null, 'shadow', normalizeShadows) const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
exports.editedShadow = editedShadow
const editedSubShadowId = ref(null) const editedSubShadowId = ref(null)
exports.editedSubShadowId = editedSubShadowId
const editedSubShadow = computed(() => { const editedSubShadow = computed(() => {
if (editedShadow.value == null || editedSubShadowId.value == null) return null if (editedShadow.value == null || editedSubShadowId.value == null) return null
return editedShadow.value[editedSubShadowId.value] return editedShadow.value[editedSubShadowId.value]
}) })
const isShadowPresent = isElementPresent(null, 'shadow', []) exports.editedSubShadow = editedSubShadow
const onSubShadow = (id) => { exports.isShadowPresent = isElementPresent(null, 'shadow', [])
exports.onSubShadow = (id) => {
if (id != null) { if (id != null) {
editedSubShadowId.value = id editedSubShadowId.value = id
} else { } else {
editedSubShadow.value = null editedSubShadow.value = null
} }
} }
const updateSubShadow = (axis, value) => { exports.updateSubShadow = (axis, value) => {
if (!editedSubShadow.value || editedSubShadowId.value == null) return if (!editedSubShadow.value || editedSubShadowId.value == null) return
const newEditedShadow = [...editedShadow.value] const newEditedShadow = [...editedShadow.value]
@ -393,13 +407,13 @@ export default {
editedShadow.value = newEditedShadow editedShadow.value = newEditedShadow
} }
const isShadowTabOpen = ref(false) exports.isShadowTabOpen = ref(false)
const onTabSwitch = (tab) => { exports.onTabSwitch = (tab) => {
isShadowTabOpen.value = tab === 'shadow' exports.isShadowTabOpen.value = tab === 'shadow'
} }
// component preview // component preview
const editorHintStyle = computed(() => { exports.editorHintStyle = computed(() => {
const editorHint = selectedComponent.value.editor const editorHint = selectedComponent.value.editor
const styles = [] const styles = []
if (editorHint && Object.keys(editorHint).length > 0) { if (editorHint && Object.keys(editorHint).length > 0) {
@ -422,7 +436,7 @@ export default {
.replace(':focus', '.preview-focus') .replace(':focus', '.preview-focus')
.replace(':focus-within', '.preview-focus-within') .replace(':focus-within', '.preview-focus-within')
.replace(':disabled', '.preview-disabled') .replace(':disabled', '.preview-disabled')
const previewClass = computed(() => { exports.previewClass = computed(() => {
const selectors = [] const selectors = []
if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') { if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
selectors.push(selectedComponent.value.variants[selectedVariant.value]) selectors.push(selectedComponent.value.variants[selectedVariant.value])
@ -436,7 +450,8 @@ export default {
return selectors.map(x => x.substring(1)).join('') return selectors.map(x => x.substring(1)).join('')
}) })
const previewRules = reactive([]) const previewRules = reactive([])
const previewCss = computed(() => { exports.previewRules = previewRules
exports.previewCss = computed(() => {
try { try {
const scoped = getCssRules(previewRules).map(simulatePseudoSelectors) const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
return scoped.join('\n') return scoped.join('\n')
@ -556,23 +571,25 @@ export default {
} }
}) })
const virtualDirectives = reactive(allCustomVirtualDirectives) const virtualDirectives = reactive(allCustomVirtualDirectives)
exports.virtualDirectives = virtualDirectives
const onVirtualDirectivesUpdate = (e) => { exports.onVirtualDirectivesUpdate = (e) => {
virtualDirectives.splice(0, virtualDirectives.length) virtualDirectives.splice(0, virtualDirectives.length)
virtualDirectives.push(...e) virtualDirectives.push(...e)
} }
const selectedVirtualDirectiveId = ref(0) const selectedVirtualDirectiveId = ref(0)
exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
const selectedVirtualDirective = computed({ const selectedVirtualDirective = computed({
get () { get () {
return virtualDirectives[selectedVirtualDirectiveId.value] return virtualDirectives[selectedVirtualDirectiveId.value]
}, },
set (value) { set (value) {
console.log('SET', value)
virtualDirectives[selectedVirtualDirectiveId.value].value = value virtualDirectives[selectedVirtualDirectiveId.value].value = value
} }
}) })
const selectedVirtualDirectiveValType = computed({ exports.selectedVirtualDirective = selectedVirtualDirective
exports.selectedVirtualDirectiveValType = computed({
get () { get () {
return virtualDirectives[selectedVirtualDirectiveId.value].valType return virtualDirectives[selectedVirtualDirectiveId.value].valType
}, },
@ -590,7 +607,7 @@ export default {
} }
} }
}) })
const selectedVirtualDirectiveParsed = computed({ exports.selectedVirtualDirectiveParsed = computed({
get () { get () {
switch (selectedVirtualDirective.value.valType) { switch (selectedVirtualDirective.value.valType) {
case 'shadow': { case 'shadow': {
@ -621,7 +638,7 @@ export default {
} }
}) })
const getNewVirtualDirective = () => ({ exports.getNewVirtualDirective = () => ({
name: 'newDirective', name: 'newDirective',
valType: 'generic', valType: 'generic',
value: 'foobar' value: 'foobar'
@ -636,7 +653,8 @@ export default {
} }
const overallPreviewRules = ref() const overallPreviewRules = ref()
const updateOverallPreview = () => { exports.overallPreviewRules = overallPreviewRules
exports.updateOverallPreview = () => {
try { try {
// This normally would be handled by Root but since we pass something // This normally would be handled by Root but since we pass something
// else we have to make do ourselves // else we have to make do ourselves
@ -686,10 +704,10 @@ export default {
const metaIn = editorComponents.find(x => x.component === '@meta').directives const metaIn = editorComponents.find(x => x.component === '@meta').directives
const palettesIn = editorComponents.filter(x => x.component === '@palette') const palettesIn = editorComponents.filter(x => x.component === '@palette')
name.value = metaIn.name exports.name.value = metaIn.name
license.value = metaIn.license exports.license.value = metaIn.license
author.value = metaIn.author exports.author.value = metaIn.author
website.value = metaIn.website exports.website.value = metaIn.website
onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives }))) onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
console.log('PALETTES', palettesIn) console.log('PALETTES', palettesIn)
@ -713,96 +731,14 @@ export default {
].join('\n\n') ].join('\n\n')
}) })
const exportStyle = () => { exports.exportStyle = () => {
styleExporter.exportData() styleExporter.exportData()
} }
const importStyle = () => { exports.importStyle = () => {
styleImporter.importData() styleImporter.importData()
} }
return { return exports
// ## Meta
name,
author,
license,
website,
// ## Palette
palettes,
onPalettesUpdate,
selectedPalette,
selectedPaletteId,
getNewPalette,
// ## Components
componentKeys,
componentsMap,
// selection basis
selectedComponent,
selectedComponentName,
selectedComponentKey,
selectedComponentVariants,
selectedComponentStates,
// selection
selectedVariant,
selectedState,
updateSelectedStates,
// component directives
componentHas,
// component colors
editedBackgroundColor,
isBackgroundColorPresent,
editedOpacity,
isOpacityPresent,
editedTextColor,
isTextColorPresent,
editedTextAuto,
isTextAutoPresent,
editedLinkColor,
isLinkColorPresent,
editedIconColor,
isIconColorPresent,
editedBorderColor,
isBorderColorPresent,
getContrast,
// component shadow
editedShadow,
editedSubShadow,
isShadowPresent,
onSubShadow,
updateSubShadow,
isShadowTabOpen,
onTabSwitch,
// component preview
editorHintStyle,
previewCss,
previewClass,
// overall preview
overallPreviewRules,
updateOverallPreview,
// ## Variables
virtualDirectives,
onVirtualDirectivesUpdate,
selectedVirtualDirective,
selectedVirtualDirectiveId,
selectedVirtualDirectiveParsed,
selectedVirtualDirectiveValType,
getNewVirtualDirective,
// ## Export and Import
exportStyle,
importStyle,
...exports
}
} }
} }