Bilibili-Evolved/registry/lib/components/style/custom-font-family/index.ts

107 lines
2.5 KiB
TypeScript

import { defineComponentMetadata } from '@/components/define'
import { addComponentListener } from '@/core/settings'
import { fontFamilyDefaultValue, coverOptionsName, coverOptionsDefaultValue } from './data'
const docElement = document.documentElement
const kebabName = 'custom-font-family'
const camelName = 'customFontFamily'
const name = camelName
const displayName = '自定义字体'
const tags = [componentsTags.style, componentsTags.general]
const entry = () => {
addComponentListener(
`${name}.fontFamily`,
(value: string) => {
if (!value) {
docElement.setAttribute(`${kebabName}--detect--is-input-empty`, 'true')
return
}
docElement.style.setProperty(`--${kebabName}--options--font-family`, `${value}`)
docElement.setAttribute(`${kebabName}--detect--is-input-empty`, 'false')
},
true,
)
addComponentListener(
`${name}.disableTitlePunctuationTextIndent`,
(value: boolean) => {
docElement.setAttribute(
`${kebabName}--options--disable-title-punctuation-text-indent`,
`${value}`,
)
},
true,
)
for (const coverOptionName of coverOptionsName) {
addComponentListener(
`${name}.${coverOptionName.camel}`,
(value: boolean) => {
docElement.setAttribute(`${kebabName}--options--${coverOptionName.kebab}`, `${value}`)
},
true,
)
}
}
const options = {
fontFamily: {
displayName: '字体',
defaultValue: fontFamilyDefaultValue,
hidden: true,
},
disableTitlePunctuationTextIndent: {
displayName: '禁用标题标点符号缩进',
defaultValue: true,
},
}
const invokeCoverOptions = () => {
for (const coverOptionName of coverOptionsName) {
options[coverOptionName.camel] = {
displayName: coverOptionName.display,
defaultValue: coverOptionsDefaultValue[coverOptionName.camel],
hidden: true,
}
}
}
invokeCoverOptions()
const extraOptions = () => import('./extra-options/Entry.vue').then(m => m.default)
const instantStyles = [
{
name: `${kebabName}--style--set-font-family`, // style 标签 id
style: () => import('./set-font-family.scss'),
important: true,
},
{
name: `${kebabName}--style--disable-title-punctuation-text-indent`,
style: () => import('./disable-title-punctuation-text-indent.scss'),
important: true,
},
]
const author = {
name: 'Tinhone',
link: 'https://github.com/Tinhone',
}
export const component = defineComponentMetadata({
name,
displayName,
tags,
entry,
options,
extraOptions,
instantStyles,
author,
})