vault backup: 2023-06-01 21:15:19

This commit is contained in:
baalajimaestro 2023-06-01 21:15:19 +05:30
parent 19c9718f91
commit 3670a0bc99
Signed by: baalajimaestro
GPG key ID: F93C394FE9BBAFD5
8 changed files with 282 additions and 250 deletions

View file

@ -41968,12 +41968,12 @@ function instance9($$self, $$props, $$invalidate) {
plugin.setState(0 /* idle */); plugin.setState(0 /* idle */);
return false; return false;
} }
plugin.gitManager.commit(commitMessage).then(() => { plugin.promiseQueue.addTask(() => plugin.gitManager.commit(commitMessage).then(() => {
if (commitMessage !== plugin.settings.commitMessage) { if (commitMessage !== plugin.settings.commitMessage) {
$$invalidate(2, commitMessage = ""); $$invalidate(2, commitMessage = "");
} }
plugin.setUpAutoBackup(); plugin.setUpAutoBackup();
}).finally(triggerRefresh2); }).finally(triggerRefresh2));
} }
}); });
} }
@ -41981,11 +41981,11 @@ function instance9($$self, $$props, $$invalidate) {
return __awaiter(this, void 0, void 0, function* () { return __awaiter(this, void 0, void 0, function* () {
$$invalidate(5, loading = true); $$invalidate(5, loading = true);
if (status2) { if (status2) {
plugin.createBackup(false, false, commitMessage).then(() => { plugin.promiseQueue.addTask(() => plugin.createBackup(false, false, commitMessage).then(() => {
if (commitMessage !== plugin.settings.commitMessage) { if (commitMessage !== plugin.settings.commitMessage) {
$$invalidate(2, commitMessage = ""); $$invalidate(2, commitMessage = "");
} }
}).finally(triggerRefresh2); }).finally(triggerRefresh2));
} }
}); });
} }
@ -42039,26 +42039,26 @@ function instance9($$self, $$props, $$invalidate) {
} }
function stageAll() { function stageAll() {
$$invalidate(5, loading = true); $$invalidate(5, loading = true);
plugin.gitManager.stageAll({ status: status2 }).finally(triggerRefresh2); plugin.promiseQueue.addTask(() => plugin.gitManager.stageAll({ status: status2 }).finally(triggerRefresh2));
} }
function unstageAll() { function unstageAll() {
$$invalidate(5, loading = true); $$invalidate(5, loading = true);
plugin.gitManager.unstageAll({ status: status2 }).finally(triggerRefresh2); plugin.promiseQueue.addTask(() => plugin.gitManager.unstageAll({ status: status2 }).finally(triggerRefresh2));
} }
function push2() { function push2() {
$$invalidate(5, loading = true); $$invalidate(5, loading = true);
plugin.push().finally(triggerRefresh2); plugin.promiseQueue.addTask(() => plugin.push().finally(triggerRefresh2));
} }
function pull2() { function pull2() {
$$invalidate(5, loading = true); $$invalidate(5, loading = true);
plugin.pullChangesFromRemote().finally(triggerRefresh2); plugin.promiseQueue.addTask(() => plugin.pullChangesFromRemote().finally(triggerRefresh2));
} }
function discard() { function discard() {
new DiscardModal(view.app, false, plugin.gitManager.getVaultPath("/")).myOpen().then((shouldDiscard) => { new DiscardModal(view.app, false, plugin.gitManager.getVaultPath("/")).myOpen().then((shouldDiscard) => {
if (shouldDiscard === true) { if (shouldDiscard === true) {
plugin.gitManager.discardAll({ status: plugin.cachedStatus }).finally(() => { plugin.promiseQueue.addTask(() => plugin.gitManager.discardAll({ status: plugin.cachedStatus }).finally(() => {
dispatchEvent(new CustomEvent("git-refresh")); dispatchEvent(new CustomEvent("git-refresh"));
}); }));
} }
}); });
} }

View file

@ -5,5 +5,5 @@
"isDesktopOnly": false, "isDesktopOnly": false,
"fundingUrl": "https://ko-fi.com/vinzent", "fundingUrl": "https://ko-fi.com/vinzent",
"js": "main.js", "js": "main.js",
"version": "2.20.0" "version": "2.20.1"
} }

View file

@ -3737,9 +3737,18 @@ class CSSSettingsManager {
Object.keys(config).forEach((settingId) => { Object.keys(config).forEach((settingId) => {
const setting = config[settingId]; const setting = config[settingId];
if (setting.type === SettingType.CLASS_TOGGLE) { if (setting.type === SettingType.CLASS_TOGGLE) {
if (this.getSetting(section, settingId)) {
document.body.classList.remove(setting.id); document.body.classList.remove(setting.id);
} }
else if (setting.type === SettingType.CLASS_SELECT) {
const multiToggle = setting;
multiToggle.options.forEach((v) => {
if (typeof v === 'string') {
document.body.classList.remove(v);
}
else {
document.body.classList.remove(v.value);
}
});
} }
}); });
}); });
@ -3767,6 +3776,7 @@ class CSSSettingsManager {
` `
.trim() .trim()
.replace(/[\r\n\s]+/g, ' '); .replace(/[\r\n\s]+/g, ' ');
this.plugin.app.workspace.trigger('css-change', { source: 'style-settings' });
} }
setConfig(settings) { setConfig(settings) {
this.config = {}; this.config = {};
@ -3819,16 +3829,22 @@ class CSSSettingsManager {
setSetting(sectionId, settingId, value) { setSetting(sectionId, settingId, value) {
this.settings[`${sectionId}@@${settingId}`] = value; this.settings[`${sectionId}@@${settingId}`] = value;
this.save(); this.save();
this.removeClasses();
this.initClasses();
} }
setSettings(settings) { setSettings(settings) {
Object.keys(settings).forEach((id) => { Object.keys(settings).forEach((id) => {
this.settings[id] = settings[id]; this.settings[id] = settings[id];
}); });
this.removeClasses();
this.initClasses();
return this.save(); return this.save();
} }
clearSetting(sectionId, settingId) { clearSetting(sectionId, settingId) {
delete this.settings[`${sectionId}@@${settingId}`]; delete this.settings[`${sectionId}@@${settingId}`];
this.save(); this.save();
this.removeClasses();
this.initClasses();
} }
clearSection(sectionId) { clearSection(sectionId) {
Object.keys(this.settings).forEach((key) => { Object.keys(this.settings).forEach((key) => {
@ -3838,6 +3854,8 @@ class CSSSettingsManager {
} }
}); });
this.save(); this.save();
this.removeClasses();
this.initClasses();
} }
export(section, config) { export(section, config) {
new ExportModal(this.plugin.app, this.plugin, section, config).open(); new ExportModal(this.plugin.app, this.plugin, section, config).open();
@ -8027,13 +8045,6 @@ function createDescription(description, def, defLabel) {
} }
return fragment; return fragment;
} }
let timer;
function customDebounce(cb, timeout = 300) {
clearTimeout(timer);
timer = setTimeout(() => {
cb();
}, timeout);
}
var fuzzysort = createCommonjsModule(function (module) { var fuzzysort = createCommonjsModule(function (module) {
((root, UMD) => { ((root, UMD) => {
@ -8579,16 +8590,28 @@ var fuzzysort = createCommonjsModule(function (module) {
// TODO: (perf) prepareSearch seems slow // TODO: (perf) prepareSearch seems slow
}); });
class AbstractSettingComponent { class AbstractSettingComponent extends obsidian.Component {
constructor(sectionId, sectionName, setting, settingsManager, isView) { constructor(parent, sectionId, sectionName, setting, settingsManager, isView) {
super();
this.childEl = null;
this.parent = parent;
this.sectionId = sectionId; this.sectionId = sectionId;
this.sectionName = sectionName; this.sectionName = sectionName;
this.setting = setting; this.setting = setting;
this.settingsManager = settingsManager; this.settingsManager = settingsManager;
this.isView = isView; this.isView = isView;
this.onInit();
} }
onInit() { } get containerEl() {
return this.parent instanceof HTMLElement
? this.parent
: this.parent.childEl;
}
onload() {
this.render();
}
onunload() {
this.destroy();
}
/** /**
* Matches the Component against `str`. A perfect match returns 0, no match returns negative infinity. * Matches the Component against `str`. A perfect match returns 0, no match returns negative infinity.
* *
@ -8614,10 +8637,10 @@ class AbstractSettingComponent {
const resetTooltip = 'Restore default'; const resetTooltip = 'Restore default';
class ClassToggleSettingComponent extends AbstractSettingComponent { class ClassToggleSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(description !== null && description !== void 0 ? description : ''); this.settingEl.setDesc(description !== null && description !== void 0 ? description : '');
this.settingEl.addToggle((toggle) => { this.settingEl.addToggle((toggle) => {
@ -8625,12 +8648,6 @@ class ClassToggleSettingComponent extends AbstractSettingComponent {
toggle.setValue(value !== undefined ? !!value : !!this.setting.default); toggle.setValue(value !== undefined ? !!value : !!this.setting.default);
toggle.onChange((value) => { toggle.onChange((value) => {
this.settingsManager.setSetting(this.sectionId, this.setting.id, value); this.settingsManager.setSetting(this.sectionId, this.setting.id, value);
if (value) {
document.body.classList.add(this.setting.id);
}
else {
document.body.classList.remove(this.setting.id);
}
}); });
this.toggleComponent = toggle; this.toggleComponent = toggle;
}); });
@ -8639,12 +8656,6 @@ class ClassToggleSettingComponent extends AbstractSettingComponent {
b.onClick(() => { b.onClick(() => {
const value = !!this.setting.default; const value = !!this.setting.default;
this.toggleComponent.setValue(value); this.toggleComponent.setValue(value);
if (value) {
document.body.classList.add(this.setting.id);
}
else {
document.body.classList.remove(this.setting.id);
}
this.settingsManager.clearSetting(this.sectionId, this.setting.id); this.settingsManager.clearSetting(this.sectionId, this.setting.id);
}); });
b.setTooltip(resetTooltip); b.setTooltip(resetTooltip);
@ -8658,7 +8669,7 @@ class ClassToggleSettingComponent extends AbstractSettingComponent {
} }
class ClassMultiToggleSettingComponent extends AbstractSettingComponent { class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting.default !== 'string') { if (typeof this.setting.default !== 'string') {
@ -8666,7 +8677,7 @@ class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
} }
let prevValue = this.getPreviousValue(); let prevValue = this.getPreviousValue();
const defaultLabel = this.getDefaultOptionLabel(); const defaultLabel = this.getDefaultOptionLabel();
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default, defaultLabel)); this.settingEl.setDesc(createDescription(description, this.setting.default, defaultLabel));
this.settingEl.addDropdown((dropdown) => { this.settingEl.addDropdown((dropdown) => {
@ -8684,12 +8695,6 @@ class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
dropdown.setValue(prevValue); dropdown.setValue(prevValue);
dropdown.onChange((value) => { dropdown.onChange((value) => {
this.settingsManager.setSetting(this.sectionId, this.setting.id, value); this.settingsManager.setSetting(this.sectionId, this.setting.id, value);
if (value !== 'none') {
document.body.classList.add(value);
}
if (prevValue) {
document.body.classList.remove(prevValue);
}
prevValue = value; prevValue = value;
}); });
this.dropdownComponent = dropdown; this.dropdownComponent = dropdown;
@ -8697,14 +8702,7 @@ class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
this.settingEl.addExtraButton((b) => { this.settingEl.addExtraButton((b) => {
b.setIcon('reset'); b.setIcon('reset');
b.onClick(() => { b.onClick(() => {
const value = this.setting.default || 'none';
this.dropdownComponent.setValue(this.setting.default || 'none'); this.dropdownComponent.setValue(this.setting.default || 'none');
if (value !== 'none') {
document.body.classList.add(value);
}
if (prevValue) {
document.body.classList.remove(prevValue);
}
this.settingsManager.clearSetting(this.sectionId, this.setting.id); this.settingsManager.clearSetting(this.sectionId, this.setting.id);
}); });
b.setTooltip(resetTooltip); b.setTooltip(resetTooltip);
@ -8749,13 +8747,13 @@ class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
} }
class VariableTextSettingComponent extends AbstractSettingComponent { class VariableTextSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting.default !== 'string') { if (typeof this.setting.default !== 'string') {
return console.error(`${t('Error:')} ${title} ${t('missing default value')}`); return console.error(`${t('Error:')} ${title} ${t('missing default value')}`);
} }
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default)); this.settingEl.setDesc(createDescription(description, this.setting.default));
this.settingEl.addText((text) => { this.settingEl.addText((text) => {
@ -8787,13 +8785,13 @@ class VariableTextSettingComponent extends AbstractSettingComponent {
} }
class VariableNumberSettingComponent extends AbstractSettingComponent { class VariableNumberSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting.default !== 'number') { if (typeof this.setting.default !== 'number') {
return console.error(`${t('Error:')} ${title} ${t('missing default value')}`); return console.error(`${t('Error:')} ${title} ${t('missing default value')}`);
} }
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default.toString(10))); this.settingEl.setDesc(createDescription(description, this.setting.default.toString(10)));
this.settingEl.addText((text) => { this.settingEl.addText((text) => {
@ -8823,13 +8821,13 @@ class VariableNumberSettingComponent extends AbstractSettingComponent {
} }
class VariableNumberSliderSettingComponent extends AbstractSettingComponent { class VariableNumberSliderSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting.default !== 'number') { if (typeof this.setting.default !== 'number') {
return console.error(`${t('Error:')} ${title} ${t('missing default value')}`); return console.error(`${t('Error:')} ${title} ${t('missing default value')}`);
} }
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default.toString(10))); this.settingEl.setDesc(createDescription(description, this.setting.default.toString(10)));
this.settingEl.addSlider((slider) => { this.settingEl.addSlider((slider) => {
@ -8860,14 +8858,14 @@ class VariableNumberSliderSettingComponent extends AbstractSettingComponent {
} }
class VariableSelectSettingComponent extends AbstractSettingComponent { class VariableSelectSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting.default !== 'string') { if (typeof this.setting.default !== 'string') {
return console.error(`${t('Error:')} ${title} ${t('missing default value')}`); return console.error(`${t('Error:')} ${title} ${t('missing default value')}`);
} }
const defaultLabel = this.getDefaultOptionLabel(); const defaultLabel = this.getDefaultOptionLabel();
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default, defaultLabel)); this.settingEl.setDesc(createDescription(description, this.setting.default, defaultLabel));
this.settingEl.addDropdown((dropdown) => { this.settingEl.addDropdown((dropdown) => {
@ -8932,7 +8930,7 @@ var pickr_min = createCommonjsModule(function (module, exports) {
var Pickr = /*@__PURE__*/getDefaultExportFromCjs(pickr_min); var Pickr = /*@__PURE__*/getDefaultExportFromCjs(pickr_min);
class VariableColorSettingComponent extends AbstractSettingComponent { class VariableColorSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
var _a; var _a;
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
@ -8954,16 +8952,16 @@ class VariableColorSettingComponent extends AbstractSettingComponent {
if (value !== undefined) { if (value !== undefined) {
swatches.push(value); swatches.push(value);
} }
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
this.settingEl.setDesc(createDescription(description, this.setting.default)); this.settingEl.setDesc(createDescription(description, this.setting.default));
// fix, so that the color is correctly shown before the color picker has been opened // fix, so that the color is correctly shown before the color picker has been opened
const defaultColor = value !== undefined ? value : this.setting.default; const defaultColor = value !== undefined ? value : this.setting.default;
containerEl.style.setProperty('--pcr-color', defaultColor); this.containerEl.style.setProperty('--pcr-color', defaultColor);
this.pickr = Pickr.create(getPickrSettings({ this.pickr = Pickr.create(getPickrSettings({
isView: this.isView, isView: this.isView,
el: this.settingEl.controlEl.createDiv({ cls: 'picker' }), el: this.settingEl.controlEl.createDiv({ cls: 'picker' }),
containerEl: containerEl, containerEl: this.containerEl,
swatches: swatches, swatches: swatches,
opacity: this.setting.opacity, opacity: this.setting.opacity,
defaultColor: defaultColor, defaultColor: defaultColor,
@ -8977,7 +8975,9 @@ class VariableColorSettingComponent extends AbstractSettingComponent {
}); });
this.pickr.on('show', () => { this.pickr.on('show', () => {
const { result } = this.pickr.getRoot().interaction; const { result } = this.pickr.getRoot().interaction;
requestAnimationFrame(() => requestAnimationFrame(() => result.select())); activeWindow.requestAnimationFrame(() => {
activeWindow.requestAnimationFrame(() => result.select());
});
}); });
this.pickr.on('cancel', onPickrCancel); this.pickr.on('cancel', onPickrCancel);
this.settingEl.addExtraButton((b) => { this.settingEl.addExtraButton((b) => {
@ -8999,7 +8999,7 @@ class VariableColorSettingComponent extends AbstractSettingComponent {
} }
class VariableThemedColorSettingComponent extends AbstractSettingComponent { class VariableThemedColorSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
if (typeof this.setting['default-light'] !== 'string' || if (typeof this.setting['default-light'] !== 'string' ||
@ -9028,7 +9028,7 @@ class VariableThemedColorSettingComponent extends AbstractSettingComponent {
if (valueDark !== undefined) { if (valueDark !== undefined) {
swatchesDark.push(valueDark); swatchesDark.push(valueDark);
} }
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setName(title); this.settingEl.setName(title);
// Construct description // Construct description
this.settingEl.descEl.createSpan({}, (span) => { this.settingEl.descEl.createSpan({}, (span) => {
@ -9051,9 +9051,9 @@ class VariableThemedColorSettingComponent extends AbstractSettingComponent {
cls: 'themed-color-wrapper', cls: 'themed-color-wrapper',
}); });
// Create light color picker // Create light color picker
this.createColorPickerLight(wrapper, containerEl, swatchesLight, valueLight, idLight); this.createColorPickerLight(wrapper, this.containerEl, swatchesLight, valueLight, idLight);
// Create dark color picker // Create dark color picker
this.createColorPickerDark(wrapper, containerEl, swatchesDark, valueDark, idDark); this.createColorPickerDark(wrapper, this.containerEl, swatchesDark, valueDark, idDark);
this.settingEl.settingEl.dataset.id = this.setting.id; this.settingEl.settingEl.dataset.id = this.setting.id;
} }
destroy() { destroy() {
@ -9081,7 +9081,7 @@ class VariableThemedColorSettingComponent extends AbstractSettingComponent {
})); }));
this.pickrLight.on('show', () => { this.pickrLight.on('show', () => {
const { result } = this.pickrLight.getRoot().interaction; const { result } = this.pickrLight.getRoot().interaction;
requestAnimationFrame(() => requestAnimationFrame(() => result.select())); activeWindow.requestAnimationFrame(() => activeWindow.requestAnimationFrame(() => result.select()));
}); });
this.pickrLight.on('save', (color, instance) => this.onSave(idLight, color, instance)); this.pickrLight.on('save', (color, instance) => this.onSave(idLight, color, instance));
this.pickrLight.on('cancel', onPickrCancel); this.pickrLight.on('cancel', onPickrCancel);
@ -9110,7 +9110,7 @@ class VariableThemedColorSettingComponent extends AbstractSettingComponent {
})); }));
this.pickrDark.on('show', () => { this.pickrDark.on('show', () => {
const { result } = this.pickrDark.getRoot().interaction; const { result } = this.pickrDark.getRoot().interaction;
requestAnimationFrame(() => requestAnimationFrame(() => result.select())); activeWindow.requestAnimationFrame(() => activeWindow.requestAnimationFrame(() => result.select()));
}); });
this.pickrDark.on('save', (color, instance) => this.onSave(idDark, color, instance)); this.pickrDark.on('save', (color, instance) => this.onSave(idDark, color, instance));
this.pickrDark.on('cancel', onPickrCancel); this.pickrDark.on('cancel', onPickrCancel);
@ -9132,17 +9132,17 @@ class VariableThemedColorSettingComponent extends AbstractSettingComponent {
} }
class InfoTextSettingComponent extends AbstractSettingComponent { class InfoTextSettingComponent extends AbstractSettingComponent {
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setClass('style-settings-info-text'); this.settingEl.setClass('style-settings-info-text');
if (title) { if (title) {
this.settingEl.setName(title); this.settingEl.setName(title);
} }
if (description) { if (description) {
if (this.setting.markdown) { if (this.setting.markdown) {
obsidian.MarkdownRenderer.renderMarkdown(description, this.settingEl.descEl, '', undefined); obsidian.MarkdownRenderer.renderMarkdown(description, this.settingEl.descEl, '', this);
this.settingEl.descEl.addClass('style-settings-markdown'); this.settingEl.descEl.addClass('style-settings-markdown');
} }
else { else {
@ -9157,52 +9157,84 @@ class InfoTextSettingComponent extends AbstractSettingComponent {
} }
} }
function createSettingComponent(sectionId, sectionName, setting, settingsManager, isView) { function createSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView) {
if (setting.type === SettingType.HEADING) { if (setting.type === SettingType.HEADING) {
return new HeadingSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new HeadingSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.INFO_TEXT) { else if (setting.type === SettingType.INFO_TEXT) {
return new InfoTextSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new InfoTextSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.CLASS_TOGGLE) { else if (setting.type === SettingType.CLASS_TOGGLE) {
return new ClassToggleSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new ClassToggleSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.CLASS_SELECT) { else if (setting.type === SettingType.CLASS_SELECT) {
return new ClassMultiToggleSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new ClassMultiToggleSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_TEXT) { else if (setting.type === SettingType.VARIABLE_TEXT) {
return new VariableTextSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableTextSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_NUMBER) { else if (setting.type === SettingType.VARIABLE_NUMBER) {
return new VariableNumberSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableNumberSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_NUMBER_SLIDER) { else if (setting.type === SettingType.VARIABLE_NUMBER_SLIDER) {
return new VariableNumberSliderSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableNumberSliderSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_SELECT) { else if (setting.type === SettingType.VARIABLE_SELECT) {
return new VariableSelectSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableSelectSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_COLOR) { else if (setting.type === SettingType.VARIABLE_COLOR) {
return new VariableColorSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableColorSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else if (setting.type === SettingType.VARIABLE_THEMED_COLOR) { else if (setting.type === SettingType.VARIABLE_THEMED_COLOR) {
return new VariableThemedColorSettingComponent(sectionId, sectionName, setting, settingsManager, isView); return new VariableThemedColorSettingComponent(parent, sectionId, sectionName, setting, settingsManager, isView);
} }
else { else {
return undefined; return undefined;
} }
} }
function buildSettingComponentTree(opts) {
const { containerEl, isView, sectionId, settings, settingsManager, sectionName, } = opts;
const root = new HeadingSettingComponent(containerEl, sectionId, sectionName, settings[0], settingsManager, isView);
let currentHeading = root;
for (const setting of settings.splice(1)) {
if (setting.type === 'heading') {
const newHeading = setting;
if (newHeading.level < currentHeading.setting.level) {
while (newHeading.level < currentHeading.setting.level) {
currentHeading = currentHeading.parent;
}
if (currentHeading.setting.id === root.setting.id) {
currentHeading = currentHeading.addSettingChild(newHeading);
}
else {
currentHeading = currentHeading.parent.addSettingChild(newHeading);
}
}
else if (newHeading.level === currentHeading.setting.level) {
currentHeading = currentHeading.parent.addSettingChild(newHeading);
}
else {
currentHeading = currentHeading.addSettingChild(newHeading);
}
}
else {
currentHeading.addSettingChild(setting);
}
}
return root;
}
class HeadingSettingComponent extends AbstractSettingComponent { class HeadingSettingComponent extends AbstractSettingComponent {
onInit() { constructor() {
super(...arguments);
this.children = []; this.children = [];
this.filteredChildren = []; this.filteredChildren = [];
this.filterMode = false; this.filterMode = false;
this.filterResultCount = 0; this.filterResultCount = 0;
} }
render(containerEl) { render() {
const title = getTitle(this.setting); const title = getTitle(this.setting);
const description = getDescription(this.setting); const description = getDescription(this.setting);
this.settingEl = new obsidian.Setting(containerEl); this.settingEl = new obsidian.Setting(this.containerEl);
this.settingEl.setHeading(); this.settingEl.setHeading();
this.settingEl.setClass('style-settings-heading'); this.settingEl.setClass('style-settings-heading');
this.settingEl.setName(title); this.settingEl.setName(title);
@ -9214,28 +9246,28 @@ class HeadingSettingComponent extends AbstractSettingComponent {
}); });
obsidian.setIcon(iconContainer, 'right-triangle'); obsidian.setIcon(iconContainer, 'right-triangle');
this.settingEl.nameEl.prepend(iconContainer); this.settingEl.nameEl.prepend(iconContainer);
if (this.filterMode) { this.resultsEl = this.settingEl.nameEl.createSpan({
this.settingEl.nameEl.createSpan({
cls: 'style-settings-filter-result-count', cls: 'style-settings-filter-result-count',
text: `${this.filterResultCount} Results`, text: this.filterMode ? `${this.filterResultCount} Results` : undefined,
}); });
}
this.settingEl.settingEl.addEventListener('click', () => { this.settingEl.settingEl.addEventListener('click', () => {
this.toggleVisible(); this.toggleVisible();
}); });
this.addResetButton(); this.addResetButton();
this.addExportButton(); this.addExportButton();
this.childEl = containerEl.createDiv({ cls: 'style-settings-container' }); this.childEl = this.containerEl.createDiv({
cls: 'style-settings-container',
});
this.setCollapsed(this.setting.collapsed); this.setCollapsed(this.setting.collapsed);
} }
destroy() { destroy() {
var _a; var _a;
if (!this.setting.collapsed) { this.removeChildren();
this.destroyChildren();
}
(_a = this.settingEl) === null || _a === void 0 ? void 0 : _a.settingEl.remove(); (_a = this.settingEl) === null || _a === void 0 ? void 0 : _a.settingEl.remove();
this.childEl.remove();
} }
filter(filterString) { filter(filterString) {
var _a;
this.filteredChildren = []; this.filteredChildren = [];
this.filterResultCount = 0; this.filterResultCount = 0;
for (const child of this.children) { for (const child of this.children) {
@ -9254,10 +9286,18 @@ class HeadingSettingComponent extends AbstractSettingComponent {
} }
} }
this.filterMode = true; this.filterMode = true;
this.setting.collapsed = false; if (this.filterResultCount) {
this.setCollapsed(false);
}
else {
this.setCollapsed(true);
}
this.renderChildren();
(_a = this.resultsEl) === null || _a === void 0 ? void 0 : _a.setText(`${this.filterResultCount} Results`);
return this.filterResultCount; return this.filterResultCount;
} }
clearFilter() { clearFilter() {
var _a;
this.filteredChildren = []; this.filteredChildren = [];
for (const child of this.children) { for (const child of this.children) {
if (child.setting.type === SettingType.HEADING) { if (child.setting.type === SettingType.HEADING) {
@ -9265,36 +9305,37 @@ class HeadingSettingComponent extends AbstractSettingComponent {
} }
} }
this.filterMode = false; this.filterMode = false;
this.setting.collapsed = true; this.setCollapsed(true);
this.renderChildren();
(_a = this.resultsEl) === null || _a === void 0 ? void 0 : _a.empty();
} }
renderChildren() { renderChildren() {
this.destroyChildren(); this.removeChildren();
if (this.filterMode) { if (this.filterMode) {
for (const child of this.filteredChildren) { for (const child of this.filteredChildren) {
child.render(this.childEl); this.addChild(child);
} }
} }
else { else {
for (const child of this.children) { for (const child of this.children) {
child.render(this.childEl); this.addChild(child);
} }
} }
} }
destroyChildren() { removeChildren() {
var _a;
for (const child of this.children) { for (const child of this.children) {
child.destroy(); this.removeChild(child);
} }
(_a = this.childEl) === null || _a === void 0 ? void 0 : _a.empty();
} }
toggleVisible() { toggleVisible() {
this.setCollapsed(!this.setting.collapsed); this.setCollapsed(!this.setting.collapsed);
} }
setCollapsed(collapsed) { setCollapsed(collapsed) {
var _a;
this.setting.collapsed = collapsed; this.setting.collapsed = collapsed;
this.settingEl.settingEl.toggleClass('is-collapsed', collapsed); (_a = this.settingEl) === null || _a === void 0 ? void 0 : _a.settingEl.toggleClass('is-collapsed', collapsed);
if (collapsed) { if (collapsed) {
this.destroyChildren(); this.removeChildren();
} }
else { else {
this.renderChildren(); this.renderChildren();
@ -9322,14 +9363,11 @@ class HeadingSettingComponent extends AbstractSettingComponent {
}); });
}); });
} }
addChild(child) { addSettingChild(child) {
const newSettingComponent = createSettingComponent(this.sectionId, this.sectionName, child, this.settingsManager, this.isView); const newSettingComponent = createSettingComponent(this, this.sectionId, this.sectionName, child, this.settingsManager, this.isView);
if (!newSettingComponent) { if (!newSettingComponent) {
return undefined; return undefined;
} }
if (newSettingComponent.setting.type === SettingType.HEADING) {
newSettingComponent.parent = this;
}
this.children.push(newSettingComponent); this.children.push(newSettingComponent);
return newSettingComponent; return newSettingComponent;
} }
@ -9344,40 +9382,10 @@ class HeadingSettingComponent extends AbstractSettingComponent {
return children; return children;
} }
} }
function buildSettingComponentTree(opts) {
const { isView, sectionId, settings, settingsManager, sectionName } = opts;
const root = new HeadingSettingComponent(sectionId, sectionName, settings[0], settingsManager, isView);
let currentHeading = root;
for (const setting of settings.splice(1)) {
if (setting.type === 'heading') {
const newHeading = setting;
if (newHeading.level < currentHeading.setting.level) {
while (newHeading.level < currentHeading.setting.level) {
currentHeading = currentHeading.parent;
}
if (currentHeading.setting.id === root.setting.id) {
currentHeading = currentHeading.addChild(newHeading);
}
else {
currentHeading = currentHeading.parent.addChild(newHeading);
}
}
else if (newHeading.level === currentHeading.setting.level) {
currentHeading = currentHeading.parent.addChild(newHeading);
}
else {
currentHeading = currentHeading.addChild(newHeading);
}
}
else {
currentHeading.addChild(setting);
}
}
return root;
}
class SettingsMarkup { class SettingsMarkup extends obsidian.Component {
constructor(app, plugin, containerEl, isView) { constructor(app, plugin, containerEl, isView) {
super();
this.settingsComponentTrees = []; this.settingsComponentTrees = [];
this.filterString = ''; this.filterString = '';
this.settings = []; this.settings = [];
@ -9387,23 +9395,31 @@ class SettingsMarkup {
this.containerEl = containerEl; this.containerEl = containerEl;
this.isView = !!isView; this.isView = !!isView;
} }
onload() {
this.display();
}
onunload() {
this.settingsComponentTrees = [];
}
display() { display() {
this.generate(this.settings); this.generate(this.settings);
} }
removeChildren() {
for (const settingsComponentTree of this.settingsComponentTrees) {
this.removeChild(settingsComponentTree);
}
}
/** /**
* Recursively destroys all setting elements. * Recursively destroys all setting elements.
*/ */
cleanup() { cleanup() {
var _a; var _a;
for (const settingsComponentTree of this.settingsComponentTrees) { this.removeChildren();
settingsComponentTree.destroy();
}
(_a = this.settingsContainerEl) === null || _a === void 0 ? void 0 : _a.empty(); (_a = this.settingsContainerEl) === null || _a === void 0 ? void 0 : _a.empty();
} }
setSettings(settings, errorList) { setSettings(settings, errorList) {
this.settings = settings; this.settings = settings;
this.errorList = errorList; this.errorList = errorList;
this.plugin.settingsManager.setConfig(settings);
if (this.containerEl.parentNode) { if (this.containerEl.parentNode) {
this.generate(settings); this.generate(settings);
} }
@ -9479,8 +9495,7 @@ class SettingsMarkup {
// move the search component from the back to the front // move the search component from the back to the front
setting.nameEl.appendChild(setting.controlEl.lastChild); setting.nameEl.appendChild(setting.controlEl.lastChild);
searchComponent.setValue(this.filterString); searchComponent.setValue(this.filterString);
searchComponent.onChange((value) => { searchComponent.onChange(obsidian.debounce((value) => {
customDebounce(() => {
this.filterString = value; this.filterString = value;
if (value) { if (value) {
this.filter(); this.filter();
@ -9488,8 +9503,7 @@ class SettingsMarkup {
else { else {
this.clearFilter(); this.clearFilter();
} }
}, 250); }, 250, true));
});
searchComponent.setPlaceholder('Search Style Settings...'); searchComponent.setPlaceholder('Search Style Settings...');
}); });
this.settingsContainerEl = containerEl.createDiv(); this.settingsContainerEl = containerEl.createDiv();
@ -9504,20 +9518,21 @@ class SettingsMarkup {
collapsed: (_a = s.collapsed) !== null && _a !== void 0 ? _a : true, collapsed: (_a = s.collapsed) !== null && _a !== void 0 ? _a : true,
resetFn: () => { resetFn: () => {
plugin.settingsManager.clearSection(s.id); plugin.settingsManager.clearSection(s.id);
this.generate(this.settings); this.rerender();
}, },
}, },
...s.settings, ...s.settings,
]; ];
try { try {
const settingsComponentTree = buildSettingComponentTree({ const settingsComponentTree = buildSettingComponentTree({
containerEl: this.settingsContainerEl,
isView: this.isView, isView: this.isView,
sectionId: s.id, sectionId: s.id,
sectionName: s.name, sectionName: s.name,
settings: options, settings: options,
settingsManager: plugin.settingsManager, settingsManager: plugin.settingsManager,
}); });
settingsComponentTree.render(this.settingsContainerEl); this.addChild(settingsComponentTree);
this.settingsComponentTrees.push(settingsComponentTree); this.settingsComponentTrees.push(settingsComponentTree);
} }
catch (e) { catch (e) {
@ -9529,39 +9544,45 @@ class SettingsMarkup {
* Recursively filter all setting elements based on `filterString` and then re-renders. * Recursively filter all setting elements based on `filterString` and then re-renders.
*/ */
filter() { filter() {
this.cleanup();
for (const settingsComponentTree of this.settingsComponentTrees) { for (const settingsComponentTree of this.settingsComponentTrees) {
settingsComponentTree.filter(this.filterString); settingsComponentTree.filter(this.filterString);
settingsComponentTree.render(this.settingsContainerEl);
} }
} }
/** /**
* Recursively clears the filter and then re-renders. * Recursively clears the filter and then re-renders.
*/ */
clearFilter() { clearFilter() {
this.cleanup();
for (const settingsComponentTree of this.settingsComponentTrees) { for (const settingsComponentTree of this.settingsComponentTrees) {
settingsComponentTree.clearFilter(); settingsComponentTree.clearFilter();
settingsComponentTree.render(this.settingsContainerEl);
} }
} }
rerender() { rerender() {
for (const settingsComponentTree of this.settingsComponentTrees) { this.cleanup();
settingsComponentTree.render(this.settingsContainerEl); this.display();
}
} }
} }
class CSSSettingsTab extends obsidian.PluginSettingTab { class CSSSettingsTab extends obsidian.PluginSettingTab {
constructor(app, plugin) { constructor(app, plugin) {
super(app, plugin); super(app, plugin);
this.settingsMarkup = new SettingsMarkup(app, plugin, this.containerEl); this.plugin = plugin;
}
setSettings(settings, errorList) {
this.settings = settings;
this.errorList = errorList;
if (this.settingsMarkup) {
this.settingsMarkup.setSettings(settings, errorList);
}
} }
display() { display() {
this.settingsMarkup.display(); this.settingsMarkup = this.plugin.addChild(new SettingsMarkup(this.app, this.plugin, this.containerEl));
if (this.settings) {
this.settingsMarkup.setSettings(this.settings, this.errorList);
}
} }
hide() { hide() {
this.settingsMarkup.cleanup(); this.plugin.removeChild(this.settingsMarkup);
this.settingsMarkup = null;
} }
} }
@ -9570,7 +9591,22 @@ class SettingsView extends obsidian.ItemView {
constructor(plugin, leaf) { constructor(plugin, leaf) {
super(leaf); super(leaf);
this.plugin = plugin; this.plugin = plugin;
this.settingsMarkup = new SettingsMarkup(plugin.app, plugin, this.contentEl, true); }
setSettings(settings, errorList) {
this.settings = settings;
this.errorList = errorList;
if (this.settingsMarkup) {
this.settingsMarkup.setSettings(settings, errorList);
}
}
onload() {
this.settingsMarkup = this.addChild(new SettingsMarkup(this.plugin.app, this.plugin, this.contentEl, true));
if (this.settings) {
this.settingsMarkup.setSettings(this.settings, this.errorList);
}
}
onunload() {
this.settingsMarkup = null;
} }
getViewType() { getViewType() {
return viewType; return viewType;
@ -9581,16 +9617,6 @@ class SettingsView extends obsidian.ItemView {
getDisplayText() { getDisplayText() {
return 'Style Settings'; return 'Style Settings';
} }
onOpen() {
return __awaiter(this, void 0, void 0, function* () {
return this.settingsMarkup.display();
});
}
onClose() {
return __awaiter(this, void 0, void 0, function* () {
return this.settingsMarkup.cleanup();
});
}
} }
class CSSSettingsPlugin extends obsidian.Plugin { class CSSSettingsPlugin extends obsidian.Plugin {
@ -9615,8 +9641,10 @@ class CSSSettingsPlugin extends obsidian.Plugin {
this.activateView(); this.activateView();
}, },
}); });
this.registerEvent(this.app.workspace.on('css-change', () => { this.registerEvent(this.app.workspace.on('css-change', (data) => {
if ((data === null || data === void 0 ? void 0 : data.source) !== 'style-settings') {
this.parseCSS(); this.parseCSS();
}
})); }));
this.registerEvent(this.app.workspace.on('parse-style-settings', () => { this.registerEvent(this.app.workspace.on('parse-style-settings', () => {
this.parseCSS(); this.parseCSS();
@ -9625,6 +9653,13 @@ class CSSSettingsPlugin extends obsidian.Plugin {
this.darkEl = document.body.createDiv('theme-dark style-settings-ref'); this.darkEl = document.body.createDiv('theme-dark style-settings-ref');
document.body.classList.add('css-settings-manager'); document.body.classList.add('css-settings-manager');
this.parseCSS(); this.parseCSS();
this.app.workspace.onLayoutReady(() => {
if (this.settingsList) {
this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => {
leaf.view.setSettings(this.settingsList, this.errorList);
});
}
});
}); });
} }
getCSSVar(id) { getCSSVar(id) {
@ -9635,6 +9670,7 @@ class CSSSettingsPlugin extends obsidian.Plugin {
} }
parseCSS() { parseCSS() {
clearTimeout(this.debounceTimer); clearTimeout(this.debounceTimer);
this.debounceTimer = activeWindow.setTimeout(() => {
this.settingsList = []; this.settingsList = [];
this.errorList = []; this.errorList = [];
// remove registered theme commands (sadly undocumented API) // remove registered theme commands (sadly undocumented API)
@ -9643,7 +9679,7 @@ class CSSSettingsPlugin extends obsidian.Plugin {
this.app.commands.removeCommand(command.id); this.app.commands.removeCommand(command.id);
} }
this.commandList = []; this.commandList = [];
this.debounceTimer = window.setTimeout(() => { this.settingsManager.removeClasses();
const styleSheets = document.styleSheets; const styleSheets = document.styleSheets;
for (let i = 0, len = styleSheets.length; i < len; i++) { for (let i = 0, len = styleSheets.length; i < len; i++) {
const sheet = styleSheets.item(i); const sheet = styleSheets.item(i);
@ -9651,10 +9687,11 @@ class CSSSettingsPlugin extends obsidian.Plugin {
} }
// compatability with Settings Search Plugin // compatability with Settings Search Plugin
this.registerSettingsToSettingsSearch(); this.registerSettingsToSettingsSearch();
this.settingsTab.settingsMarkup.setSettings(this.settingsList, this.errorList); this.settingsTab.setSettings(this.settingsList, this.errorList);
this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => { this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => {
leaf.view.settingsMarkup.setSettings(this.settingsList, this.errorList); leaf.view.setSettings(this.settingsList, this.errorList);
}); });
this.settingsManager.setConfig(this.settingsList);
this.settingsManager.initClasses(); this.settingsManager.initClasses();
this.registerSettingCommands(); this.registerSettingCommands();
}, 100); }, 100);
@ -9775,12 +9812,6 @@ class CSSSettingsPlugin extends obsidian.Plugin {
callback: () => { callback: () => {
const value = !this.settingsManager.getSetting(section.id, setting.id); const value = !this.settingsManager.getSetting(section.id, setting.id);
this.settingsManager.setSetting(section.id, setting.id, value); this.settingsManager.setSetting(section.id, setting.id, value);
if (value) {
document.body.classList.add(setting.id);
}
else {
document.body.classList.remove(setting.id);
}
this.settingsTab.settingsMarkup.rerender(); this.settingsTab.settingsMarkup.rerender();
for (const leaf of this.app.workspace.getLeavesOfType(viewType)) { for (const leaf of this.app.workspace.getLeavesOfType(viewType)) {
leaf.view.settingsMarkup.rerender(); leaf.view.settingsMarkup.rerender();
@ -9795,7 +9826,6 @@ class CSSSettingsPlugin extends obsidian.Plugin {
this.darkEl = null; this.darkEl = null;
document.body.classList.remove('css-settings-manager'); document.body.classList.remove('css-settings-manager');
this.settingsManager.cleanup(); this.settingsManager.cleanup();
this.settingsTab.settingsMarkup.cleanup();
this.deactivateView(); this.deactivateView();
this.unregisterSettingsFromSettingsSearch(); this.unregisterSettingsFromSettingsSearch();
} }
@ -9810,7 +9840,7 @@ class CSSSettingsPlugin extends obsidian.Plugin {
type: viewType, type: viewType,
active: true, active: true,
}); });
leaf.view.settingsMarkup.setSettings(this.settingsList, this.errorList); leaf.view.setSettings(this.settingsList, this.errorList);
}); });
} }
} }

View file

@ -1,7 +1,7 @@
{ {
"id": "obsidian-style-settings", "id": "obsidian-style-settings",
"name": "Style Settings", "name": "Style Settings",
"version": "1.0.3", "version": "1.0.6",
"minAppVersion": "0.11.5", "minAppVersion": "0.11.5",
"description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.", "description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
"author": "mgmeyers", "author": "mgmeyers",

View file

@ -6,6 +6,7 @@
"PDFIndexing": false, "PDFIndexing": false,
"imagesIndexing": false, "imagesIndexing": false,
"splitCamelCase": false, "splitCamelCase": false,
"openInNewPane": false,
"ribbonIcon": true, "ribbonIcon": true,
"showExcerpt": true, "showExcerpt": true,
"renderLineReturnInExcerpts": true, "renderLineReturnInExcerpts": true,

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,7 @@
{ {
"id": "omnisearch", "id": "omnisearch",
"name": "Omnisearch", "name": "Omnisearch",
"version": "1.14.0", "version": "1.14.2",
"minAppVersion": "1.0.0", "minAppVersion": "1.0.0",
"description": "A search engine that just works", "description": "A search engine that just works",
"author": "Simon Cambier", "author": "Simon Cambier",

View file

@ -18,6 +18,7 @@
} }
.omnisearch-result__title { .omnisearch-result__title {
white-space: pre-wrap;
align-items: center; align-items: center;
display: flex; display: flex;
gap: 5px; gap: 5px;