Добавление типографики и других элементов управления, связанных со стилем, в элемент ui vue js ⇐ Php

[Anonymous]

Я работаю над плагином WordPress, созданным на vue js и использующим структуру элемента пользовательского интерфейса. Я хочу добавить в него несколько элементов настройки, чтобы пользователь мог легко настроить всю типографику плагина и другие стили. Я добавил палитру цветов, чтобы изменять цвета моего плагина в соответствии с потребностями пользователя. теперь я хочу добавить элемент управления типографикой, но когда я просматриваю документацию по элементу пользовательского интерфейса, там нет поля для типографики, есть компонент с именем типографика, но мы не можем его использовать.
Я хочу сделать его похожим на элемент в Elementor, который — это элементы управления типографикой, в которых есть другие элементы управления, такие как высота строки, межбуквенный интервал и т. д. Я также пытался сделать его индивидуальным, но это не работает. на моей панели не отображается никаких элементов управления.
Мне действительно нужна помощь в этом вопросе.
Я пытался настроить его с помощью vue js, но это не работает. вот код vue.




Font Family


{{ font }}





Font Size




{{ unit }}







Font Weight


{{ label }}





Text Transform


{{ label }}





Font Style


{{ label }}





Line Height




{{ unit }}







Letter Spacing




{{ unit }}







Text Color






export default {
props: {
value: {
type: Object,
default: () => ({}),
},
default: {
type: Object,
default: () => ({
font_family: 'Arial',
font_size: { size: 16, unit: 'px' },
font_weight: '400',
text_transform: '',
font_style: 'normal',
line_height: { size: 1.5, unit: '' },
letter_spacing: { size: 0, unit: 'px' },
color: '#000000',
}),
},
},
data() {
return {
typography: { ...this.default, ...this.value },
fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Georgia', 'Tahoma', 'Courier New', 'Impact'],
units: ['px', 'em', 'rem', '%'],
fontWeights: {
'': 'Default',
'100': 'Thin (100)',
'200': 'Extra Light (200)',
'300': 'Light (300)',
'400': 'Normal (400)',
'500': 'Medium (500)',
'600': 'Semi Bold (600)',
'700': 'Bold (700)',
'800': 'Extra Bold (800)',
'900': 'Black (900)',
},
textTransforms: {
'': 'Default',
'uppercase': 'UPPERCASE',
'lowercase': 'lowercase',
'capitalize': 'Capitalize',
},
fontStyles: {
'': 'Default',
'normal': 'Normal',
'italic': 'Italic',
'oblique': 'Oblique',
},
};
},
watch: {
value: {
deep: true,
immediate: true,
handler(newVal) {
this.typography = { ...this.default, ...newVal };
},
},
typography: {
deep: true,
handler(newVal) {
this.$emit('input', newVal);
},
},
},
};


а вот php-код:


Подробнее здесь: https://stackoverflow.com/questions/792 ... -ui-vue-js