Seekra/frontend
3
3
Fork 0
generated from Seekra/repository-template
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

style: format code using Prettier

Browse Source
This commit is contained in:
jakob.scheid
2026-08-09 13:09:39 +02:00
committed by Gitea
parent 6e0c14ac48
commit aecce32842
59 changed files with 9649 additions and 8795 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eslint.config.js
+3 -4
View File
@@ -11,8 +11,8 @@ export default defineConfig([
languageOptions: { languageOptions: {
globals: { globals: {
...globals.browser, ...globals.browser,
...globals.node ...globals.node,
} },
}, },
rules: { rules: {
'eqeqeq': 'error', 'eqeqeq': 'error',
@@ -44,8 +44,7 @@ export default defineConfig([
'object-shorthand': 'error', 'object-shorthand': 'error',
'prefer-template': 'error', 'prefer-template': 'error',
},
}
}, },
pluginVue.configs['flat/essential'], pluginVue.configs['flat/essential'],
]); ]);
index.html
+18 -8
View File
@@ -24,7 +24,19 @@ limitations under the License.
<noscript> <noscript>
<style> <style>
body { body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family:
'Inter',
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
} }
a { a {
@@ -40,17 +52,15 @@ limitations under the License.
</head> </head>
<body> <body>
<noscript> <noscript>
<h1> <h1>Seekra</h1>
Seekra <p>You need to enable JavaScript to use Seekra.</p>
</h1>
<p>
You need to enable JavaScript to use Seekra.
</p>
<section> <section>
<h2>Legal Content</h2> <h2>Legal Content</h2>
<ul> <ul>
<li> <li>
<a href="https://assets.seekra.jcloud-services.ddns.net/2026-08-04-76a067e/legal/legal_notice.html"> <a
href="https://assets.seekra.jcloud-services.ddns.net/2026-08-04-76a067e/legal/legal_notice.html"
>
Legal Notice Legal Notice
</a> </a>
</li> </li>
scripts/generate-license-files.js
+5 -16
View File
@@ -22,21 +22,16 @@ import { generateLicenseFile } from 'generate-license-file';
const packageJson = './package.json'; const packageJson = './package.json';
const packageJsonBackup = `${packageJson}~`; const packageJsonBackup = `${packageJson}~`;
await generateLicenseFile( await generateLicenseFile(packageJson, 'THIRD_PARTY_LICENSES');
packageJson,
'THIRD_PARTY_LICENSES'
);
const pkg = JSON.parse( const pkg = JSON.parse(await fs.readFile(packageJson, 'utf-8'));
await fs.readFile(packageJson, 'utf-8')
);
await fs.rename(packageJson, packageJsonBackup); await fs.rename(packageJson, packageJsonBackup);
const devPackage = { const devPackage = {
...pkg, ...pkg,
dependencies: pkg.devDependencies ?? {}, dependencies: pkg.devDependencies ?? {},
devDependencies: {} devDependencies: {},
}; };
/* /*
@@ -45,14 +40,8 @@ const devPackage = {
https://github.com/TobyAndToby/generate-license-file/issues/752 https://github.com/TobyAndToby/generate-license-file/issues/752
*/ */
await fs.writeFile( await fs.writeFile(packageJson, JSON.stringify(devPackage));
packageJson,
JSON.stringify(devPackage)
);
await generateLicenseFile( await generateLicenseFile(packageJson, './THIRD_PARTY_LICENSES_DEV');
packageJson,
'./THIRD_PARTY_LICENSES_DEV'
);
await fs.rename(packageJsonBackup, packageJson); await fs.rename(packageJsonBackup, packageJson);
src/App.vue
+3 -2
View File
@@ -33,7 +33,7 @@ const updateColorScheme = function updateColorScheme(newColorScheme) {
document.body.style.setProperty(colorScheme, { document.body.style.setProperty(colorScheme, {
auto: 'normal', auto: 'normal',
dark: 'dark', dark: 'dark',
light: 'light' light: 'light',
}); });
if (newColorScheme === 'dark') { if (newColorScheme === 'dark') {
document.body.classList.add('dark'); document.body.classList.add('dark');
@@ -72,7 +72,8 @@ onMounted(() => {
#app-wrapper { #app-wrapper {
--main-content-padding-x: 30px; --main-content-padding-x: 30px;
--main-content-padding-y: 40px; --main-content-padding-y: 40px;
--main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x); --main-content-padding: var(--main-content-padding-y)
var(--main-content-padding-x);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/config/env.js
+1 -1
View File
@@ -17,6 +17,6 @@ limitations under the License.
export const getAssetsUrl = function getAssetsUrl() { export const getAssetsUrl = function getAssetsUrl() {
return new URL( return new URL(
`${import.meta.env.VITE_ASSETS_BUILD_ID}/`, `${import.meta.env.VITE_ASSETS_BUILD_ID}/`,
import.meta.env.VITE_ASSETS_BASE_URL import.meta.env.VITE_ASSETS_BASE_URL,
).href; ).href;
}; };
src/features/colorScheme/components/ColorSchemeButton.vue
+11 -8
View File
@@ -26,19 +26,21 @@ const { getSetting, setSetting } = useSettings();
const colorScheme = computed(() => getSetting(['appearance', 'colorScheme'])); const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
const colorSchemeNextMapper = { const colorSchemeNextMapper = {
'light': 'dark', light: 'dark',
'dark': 'auto', dark: 'auto',
'auto': 'light' auto: 'light',
}; };
const colorSchemeIconMapper = { const colorSchemeIconMapper = {
'dark': 'crescent-moon', dark: 'crescent-moon',
'light': 'sun', light: 'sun',
'auto': 'circle-black-white' auto: 'circle-black-white',
}; };
const getTooltipTranslation = function getTooltipTranslation(colorScheme) { const getTooltipTranslation = function getTooltipTranslation(colorScheme) {
return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`); return t(
`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`,
);
}; };
const setColorScheme = function setColorScheme(newColorScheme) { const setColorScheme = function setColorScheme(newColorScheme) {
@@ -47,7 +49,8 @@ const setColorScheme = function setColorScheme(newColorScheme) {
</script> </script>
<template> <template>
<button class="color-scheme-button" <button
class="color-scheme-button"
@click="setColorScheme(colorSchemeNextMapper[colorScheme])" @click="setColorScheme(colorSchemeNextMapper[colorScheme])"
:aria-label="getTooltipTranslation(colorScheme)" :aria-label="getTooltipTranslation(colorScheme)"
:title="getTooltipTranslation(colorScheme)" :title="getTooltipTranslation(colorScheme)"
src/features/i18n/components/LanguageSwitchButton.vue
+10 -6
View File
@@ -44,8 +44,8 @@ const closeWrapperOnClickOutside = function closeWrapperOnClickOutside(e) {
if (languageDropdown.value) { if (languageDropdown.value) {
if (!languageDropdown.value.contains(e.target)) { if (!languageDropdown.value.contains(e.target)) {
close(); close();
}; }
}; }
}; };
const open = function open() { const open = function open() {
@@ -54,7 +54,7 @@ const open = function open() {
setTimeout(() => { setTimeout(() => {
document.addEventListener('click', closeWrapperOnClickOutside); document.addEventListener('click', closeWrapperOnClickOutside);
}, 0); }, 0);
}; }
}; };
</script> </script>
@@ -66,7 +66,9 @@ const open = function open() {
:aria-expanded="isOpen" :aria-expanded="isOpen"
aria-haspopup="listbox" aria-haspopup="listbox"
> >
<span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span> <span class="lang-code">{{
t(`preferences.locale.languages.${locale}`)
}}</span>
<span class="chevron" :class="{ open: isOpen }"> <span class="chevron" :class="{ open: isOpen }">
<UIIcon name="chevron-down" size="1em" /> <UIIcon name="chevron-down" size="1em" />
</span> </span>
@@ -78,7 +80,7 @@ const open = function open() {
class="language-dropdown" class="language-dropdown"
role="listbox" role="listbox"
:style="{ :style="{
bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)' // easier to add auto adaption to the available space bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)', // easier to add auto adaption to the available space
}" }"
> >
<li <li
@@ -89,7 +91,9 @@ const open = function open() {
:class="{ active: lang === locale }" :class="{ active: lang === locale }"
@click="selectLanguage(lang)" @click="selectLanguage(lang)"
> >
<span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span> <span class="lang-label">{{
t(`preferences.locale.languages.${lang}`)
}}</span>
</li> </li>
</ul> </ul>
</div> </div>
src/features/i18n/components/__tests__/LanguageSwitchButton.test.js
+6 -4
View File
@@ -30,7 +30,9 @@ describe('LanguageSwitchButton', () => {
expect(wrapper.find('.language-button').exists()).toBe(true); expect(wrapper.find('.language-button').exists()).toBe(true);
expect(wrapper.find('.language-dropdown').exists()).toBe(false); expect(wrapper.find('.language-dropdown').exists()).toBe(false);
expect(wrapper.find('.language-button').attributes('aria-expanded')).toBe('false'); expect(
wrapper.find('.language-button').attributes('aria-expanded'),
).toBe('false');
}); });
test('opens the dropdown when language button is clicked', async () => { test('opens the dropdown when language button is clicked', async () => {
@@ -52,12 +54,12 @@ describe('LanguageSwitchButton', () => {
const options = wrapper.findAll('.language-dropdown li'); const options = wrapper.findAll('.language-dropdown li');
const enOption = options.find(opt => opt.text().includes('en')); const enOption = options.find((opt) => opt.text().includes('en'));
await enOption.trigger('click'); await enOption.trigger('click');
expect(getSetting(LANGUAGE_PATH)).toBe('en'); expect(getSetting(LANGUAGE_PATH)).toBe('en');
expect(wrapper.find('.language-dropdown').exists()).toBe(false); expect(wrapper.find('.language-dropdown').exists()).toBe(false);
const deOption = options.find(opt => opt.text().includes('de')); const deOption = options.find((opt) => opt.text().includes('de'));
await deOption.trigger('click'); await deOption.trigger('click');
expect(getSetting(LANGUAGE_PATH)).toBe('de'); expect(getSetting(LANGUAGE_PATH)).toBe('de');
expect(wrapper.find('.language-dropdown').exists()).toBe(false); expect(wrapper.find('.language-dropdown').exists()).toBe(false);
@@ -69,7 +71,7 @@ describe('LanguageSwitchButton', () => {
await wrapper.find('.language-button').trigger('click'); await wrapper.find('.language-button').trigger('click');
expect(wrapper.find('.language-dropdown').exists()).toBe(true); expect(wrapper.find('.language-dropdown').exists()).toBe(true);
await new Promise(resolve => setTimeout(resolve, 0)); await new Promise((resolve) => setTimeout(resolve, 0));
const externalDiv = document.createElement('div'); const externalDiv = document.createElement('div');
document.body.appendChild(externalDiv); document.body.appendChild(externalDiv);
src/features/i18n/utils/__tests__/navigatorLanguage.test.js
+7 -4
View File
@@ -39,13 +39,16 @@ describe('navigatorLanguage', () => {
{ navigatorLanguage: 'en-US-u-ca-gregory', expected: 'en' }, { navigatorLanguage: 'en-US-u-ca-gregory', expected: 'en' },
{ navigatorLanguage: 'de-DE-u-co-phonebk', expected: 'de' }, { navigatorLanguage: 'de-DE-u-co-phonebk', expected: 'de' },
{ navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', expected: 'zh'} { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', expected: 'zh' },
])('returns language $expected with navigator language $navigatorLanguage', ({ navigatorLanguage, expected }) => { ])(
'returns language $expected with navigator language $navigatorLanguage',
({ navigatorLanguage, expected }) => {
Object.defineProperty(navigator, 'language', { Object.defineProperty(navigator, 'language', {
value: navigatorLanguage, value: navigatorLanguage,
configurable: true configurable: true,
}); });
expect(getNavigatorLanguage()).toBe(expected); expect(getNavigatorLanguage()).toBe(expected);
}); },
);
}); });
src/features/icons/components/UIIcon.vue
+4 -4
View File
@@ -21,17 +21,17 @@ import { computed } from 'vue';
const props = defineProps({ const props = defineProps({
name: { name: {
required: true, required: true,
type: String type: String,
}, },
size: { size: {
type: [Number, String], type: [Number, String],
default: 24 default: 24,
} },
}); });
const icons = import.meta.glob('@/assets/icons/*.svg', { const icons = import.meta.glob('@/assets/icons/*.svg', {
eager: true, eager: true,
import: 'default' import: 'default',
}); });
const icon = computed(() => icons[`/src/assets/icons/${props.name}.svg`]); const icon = computed(() => icons[`/src/assets/icons/${props.name}.svg`]);
src/features/legal/errors.js
+1 -1
View File
@@ -19,4 +19,4 @@ export class FetchError extends Error {
super(message); super(message);
this.name = 'FetchError'; this.name = 'FetchError';
} }
}; }
src/features/legal/services/__tests__/fetchLegalContent.test.js
+10 -16
View File
@@ -60,29 +60,25 @@ describe('fetchLegalContent', () => {
describe('getLegalNotice', () => { describe('getLegalNotice', () => {
describe('success', () => { describe('success', () => {
test('returns HTML body', async () => { test('returns HTML body', async () => {
fetchSpy.mockResolvedValue( fetchSpy.mockResolvedValue(new Response(exampleHtmlDocument));
new Response(exampleHtmlDocument)
);
expect( expect((await getLegalNotice()).trim()).toBe(
(await getLegalNotice()).trim() exampleHtmlWithLinkClass,
).toBe(exampleHtmlWithLinkClass); );
}); });
test('returns HTML <main>', async () => { test('returns HTML <main>', async () => {
fetchSpy.mockResolvedValue( fetchSpy.mockResolvedValue(
new Response(exampleHtmlDocumentWithMain) new Response(exampleHtmlDocumentWithMain),
); );
expect( expect((await getLegalNotice()).trim()).toBe(
(await getLegalNotice()).trim() exampleHtmlWithLinkClass,
).toBe(exampleHtmlWithLinkClass); );
}); });
test('does not fail on success status code', async () => { test('does not fail on success status code', async () => {
fetchSpy.mockResolvedValue( fetchSpy.mockResolvedValue(new Response(null, { status: 206 }));
new Response(null, { status: 206 })
);
await getLegalNotice(); await getLegalNotice();
}); });
@@ -95,9 +91,7 @@ describe('fetchLegalContent', () => {
}); });
test('throws FetchError on HTTP error', async () => { test('throws FetchError on HTTP error', async () => {
fetchSpy.mockResolvedValue( fetchSpy.mockResolvedValue(new Response(null, { status: 404 }));
new Response(null, { status: 404 })
);
await expect(getLegalNotice()).rejects.toThrow(FetchError); await expect(getLegalNotice()).rejects.toThrow(FetchError);
}); });
src/features/legal/services/fetchLegalContent.js
+5 -4
View File
@@ -30,15 +30,16 @@ const fetchHtml = async function fetchHtml(url, options) {
}; };
export const getLegalNotice = async function getLegalNotice() { export const getLegalNotice = async function getLegalNotice() {
const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href; const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl())
.href;
const html = await fetchHtml(legalNoticeUrl); const html = await fetchHtml(legalNoticeUrl);
const parser = new DOMParser(); const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html'); const doc = parser.parseFromString(html, 'text/html');
const legalNoticeContainer = doc.querySelector('main') ?? doc.body; const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
legalNoticeContainer.querySelectorAll('a').forEach( legalNoticeContainer
(link) => link.classList.add('link') .querySelectorAll('a')
); .forEach((link) => link.classList.add('link'));
return legalNoticeContainer.innerHTML; return legalNoticeContainer.innerHTML;
}; };
src/features/legal/views/__tests__/LegalNoticeView.test.js
+4 -2
View File
@@ -20,12 +20,14 @@ import { mountComponent } from '@/test-utils/mountComponent';
import { flushPromises } from '@vue/test-utils'; import { flushPromises } from '@vue/test-utils';
import { afterEach, describe, expect, test, vi } from 'vitest'; import { afterEach, describe, expect, test, vi } from 'vitest';
const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice')); const getLegalNotice = vi.hoisted(() =>
vi.fn().mockResolvedValue('legal notice'),
);
vi.mock('../../services/fetchLegalContent', async (importOriginal) => { vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
const actual = await importOriginal(); const actual = await importOriginal();
return { return {
...actual, ...actual,
getLegalNotice getLegalNotice,
}; };
}); });
src/features/nav/components/AppNavbar.vue
+3 -1
View File
@@ -33,7 +33,9 @@ import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButt
</ul> </ul>
</nav> </nav>
<div class="navbar-search-bar-wrapper-small-screens-wrapper"> <div class="navbar-search-bar-wrapper-small-screens-wrapper">
<NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" /> <NavbarSearchBarWrapper
class="navbar-search-bar-wrapper-small-screens"
/>
</div> </div>
</template> </template>
src/features/nav/components/NavbarSearchBarWrapper.vue
+12 -5
View File
@@ -22,15 +22,22 @@ import { useRoute } from 'vue-router';
const route = useRoute(); const route = useRoute();
const searchQueryModel = defineModel(); const searchQueryModel = defineModel();
watch(() => route.name, name => { watch(
searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : ''; () => route.name,
}); (name) => {
searchQueryModel.value =
name === 'searchResults' ? route.query.q || '' : '';
},
);
watch(() => route.query.q, q => { watch(
() => route.query.q,
(q) => {
if (route.name === 'searchResults') { if (route.name === 'searchResults') {
searchQueryModel.value = q || ''; searchQueryModel.value = q || '';
} }
}); },
);
</script> </script>
<template> <template>
src/features/search/components/SearchBar.vue
+13 -4
View File
@@ -30,7 +30,7 @@ const submitSearch = function submitSearch() {
if (props.autoSubmit !== undefined) { if (props.autoSubmit !== undefined) {
router.push({ router.push({
name: 'searchResults', name: 'searchResults',
query: { q: searchQuery.value } query: { q: searchQuery.value },
}); });
} }
}; };
@@ -52,7 +52,11 @@ const submitSearch = function submitSearch() {
:title="t('search.searchBar.submit')" :title="t('search.searchBar.submit')"
:aria-label="t('search.searchBar.submit')" :aria-label="t('search.searchBar.submit')"
> >
<UIIcon class="search-icon" name="magnifying-glass" size="1.1em" /> <UIIcon
class="search-icon"
name="magnifying-glass"
size="1.1em"
/>
</button> </button>
</div> </div>
</form> </form>
@@ -69,7 +73,10 @@ const submitSearch = function submitSearch() {
align-items: center; align-items: center;
border: 1.5px solid var(--border); border: 1.5px solid var(--border);
box-shadow: 0 0px 32px var(--blue-box-shadow); box-shadow: 0 0px 32px var(--blue-box-shadow);
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding)); border-radius: calc(
var(--content-height) * 0.5 + var(--submit-button-padding-y) +
var(--padding)
);
padding: var(--padding); padding: var(--padding);
padding-left: var(--padding-left); padding-left: var(--padding-left);
width: 100%; width: 100%;
@@ -90,7 +97,9 @@ const submitSearch = function submitSearch() {
font-size: 1rem; font-size: 1rem;
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y)); height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
width: calc(var(--content-height) + 2 * var(--submit-button-padding-y)); width: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y)); border-radius: calc(
var(--content-height) * 0.5 + var(--submit-button-padding-y)
);
border: none; border: none;
padding: var(--submit-button-padding-y) 20px; padding: var(--submit-button-padding-y) 20px;
background: var(--primary-color); background: var(--primary-color);
src/features/search/views/SearchResultsView.vue
+1 -2
View File
@@ -28,8 +28,7 @@ const { t } = useI18n();
<p>{{ t('error.tryAgainToAnotherTime') }}</p> <p>{{ t('error.tryAgainToAnotherTime') }}</p>
</div> </div>
</div> </div>
<div class="search-results-container"> <div class="search-results-container"></div>
</div>
</div> </div>
</template> </template>
src/features/settings/components/SettingsInput.vue
+15 -12
View File
@@ -24,11 +24,11 @@ const { t } = useI18n();
const props = defineProps({ const props = defineProps({
setting: { setting: {
required: true required: true,
}, },
path: { path: {
required: true required: true,
} },
}); });
const store = useSettingsStore(); const store = useSettingsStore();
@@ -41,22 +41,22 @@ const doneButtonInitial = ref(true);
const inputId = useId(); const inputId = useId();
const inputLabelId = useId(); const inputLabelId = useId();
const inputType = computed(() => ({ const inputType = computed(
() =>
({
number: 'number', number: 'number',
string: 'text' string: 'text',
}[props.setting.type] })[props.setting.type],
));
const hasChanged = computed(() =>
inputModel.value !== store.get(props.path)
); );
const hasChanged = computed(() => inputModel.value !== store.get(props.path));
watch(store, (newValue) => { watch(store, (newValue) => {
const newInputValue = newValue.get(props.path); const newInputValue = newValue.get(props.path);
if (inputModel.value === oldInputValue) { if (inputModel.value === oldInputValue) {
inputModel.value = newInputValue; inputModel.value = newInputValue;
oldInputValue = newInputValue; oldInputValue = newInputValue;
}; }
}); });
watch(inputModel, () => { watch(inputModel, () => {
@@ -129,7 +129,10 @@ const apply = function apply() {
} }
.input-container.done-button-shown .input { .input-container.done-button-shown .input {
width: calc(100% - 1.5 * var(--input-padding) - 26px - 0.75 * var(--input-height) + 1.5px); width: calc(
100% - 1.5 * var(--input-padding) - 26px - 0.75 * var(--input-height) +
1.5px
);
} }
.done-button { .done-button {
src/features/settings/components/SettingsPage.vue
+6 -6
View File
@@ -25,11 +25,11 @@ const { t } = useI18n();
const props = defineProps({ const props = defineProps({
setting: { setting: {
required: true required: true,
}, },
path: { path: {
required: true required: true,
} },
}); });
</script> </script>
@@ -78,15 +78,15 @@ const props = defineProps({
margin-bottom: calc(var(--size) - 0.2em); margin-bottom: calc(var(--size) - 0.2em);
} }
.section-heading[aria-level="2"] { .section-heading[aria-level='2'] {
--size: 1.8em; --size: 1.8em;
} }
.section-heading[aria-level="3"] { .section-heading[aria-level='3'] {
--size: 1.6em; --size: 1.6em;
} }
.section-heading[aria-level="4"] { .section-heading[aria-level='4'] {
--size: 1.4em; --size: 1.4em;
} }
</style> </style>
src/features/settings/components/SettingsPageLink.vue
+6 -4
View File
@@ -25,12 +25,12 @@ const { goToSettingsPage } = useSettingsPage();
const props = defineProps({ const props = defineProps({
target: { target: {
required: true, required: true,
type: String type: String,
}, },
displayName: { displayName: {
required: true, required: true,
type: String type: String,
} },
}); });
const followLink = function followLink() { const followLink = function followLink() {
@@ -42,7 +42,9 @@ const followLink = function followLink() {
<button <button
class="settings-button button settings-page-link" class="settings-button button settings-page-link"
:title="props.displayName" :title="props.displayName"
:aria-label="t('settings.pages.link.ariaLabel', { page: props.displayName })" :aria-label="
t('settings.pages.link.ariaLabel', { page: props.displayName })
"
@click="followLink" @click="followLink"
> >
{{ props.displayName }} {{ props.displayName }}
src/features/settings/components/SettingsSelection.vue
+20 -9
View File
@@ -44,19 +44,22 @@ const normalizeSelectedValue = function normalizeSelectedValue(value) {
const props = defineProps({ const props = defineProps({
setting: { setting: {
required: true required: true,
}, },
path: { path: {
required: true required: true,
} },
}); });
const store = useSettingsStore(); const store = useSettingsStore();
const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio'); const optionType = computed(() =>
props.setting.allowMultiple ? 'checkbox' : 'radio',
);
const selected = computed({ const selected = computed({
get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default), get: () =>
set: (value) => store.set(props.path, value) normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
set: (value) => store.set(props.path, value),
}); });
const labelId = useId(); const labelId = useId();
@@ -72,7 +75,11 @@ const labelId = useId();
<label <label
class="settings-button" class="settings-button"
:title="t(option.i18n)" :title="t(option.i18n)"
:aria-label="t('settings.selection.option.ariaLabel', { option: t(option.i18n) })" :aria-label="
t('settings.selection.option.ariaLabel', {
option: t(option.i18n),
})
"
> >
<input <input
:type="optionType" :type="optionType"
@@ -80,9 +87,13 @@ const labelId = useId();
:value="option.name" :value="option.name"
class="option-input" class="option-input"
v-model="selected" v-model="selected"
> />
<div class="option-check-mark-wrapper"> <div class="option-check-mark-wrapper">
<UIIcon class="option-check-mark" name="check-mark" size="1em" /> <UIIcon
class="option-check-mark"
name="check-mark"
size="1em"
/>
</div> </div>
<div class="input-label"> <div class="input-label">
{{ t(option.i18n) }} {{ t(option.i18n) }}
src/features/settings/components/SettingsSwitch.vue
+3 -3
View File
@@ -23,11 +23,11 @@ const { t } = useI18n();
const props = defineProps({ const props = defineProps({
setting: { setting: {
required: true required: true,
}, },
path: { path: {
required: true required: true,
} },
}); });
const labelId = useId(); const labelId = useId();
src/features/settings/components/__tests__/SettingsInput.test.js
+32 -17
View File
@@ -20,18 +20,29 @@ import { mountComponent } from '@/test-utils/mountComponent';
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
const getWrapper = function getWrapper({ type = 'string', i18n = 'input', defaultValue = undefined, piniaOptions = {} } = {}) { const getWrapper = function getWrapper({
return mountComponent(SettingsInput, { type = 'string',
i18n = 'input',
defaultValue = undefined,
piniaOptions = {},
} = {}) {
return mountComponent(
SettingsInput,
{
attrs: { attrs: {
setting: { setting: {
name: 'input', name: 'input',
default: defaultValue, default: defaultValue,
i18n, i18n,
type type,
}, },
path: 'input' path: 'input',
} },
}, {}, [], piniaOptions); },
{},
[],
piniaOptions,
);
}; };
describe('SettingsInput', () => { describe('SettingsInput', () => {
@@ -63,8 +74,8 @@ describe('SettingsInput', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.settings.input = value; store.settings.input = value;
} },
} },
}); });
const inputElement = stringSettingWrapper.find('input'); const inputElement = stringSettingWrapper.find('input');
@@ -76,7 +87,7 @@ describe('SettingsInput', () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
type: 'string', type: 'string',
i18n: 'input', i18n: 'input',
defaultValue: value defaultValue: value,
}); });
const inputElement = wrapper.find('input'); const inputElement = wrapper.find('input');
@@ -94,8 +105,8 @@ describe('SettingsInput', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.settings.input = storeValue; store.settings.input = storeValue;
} },
} },
}); });
const inputElement = wrapper.find('input'); const inputElement = wrapper.find('input');
@@ -191,18 +202,22 @@ describe('SettingsInput', () => {
test('shows correct translation', () => { test('shows correct translation', () => {
const translation = 'Text input'; const translation = 'Text input';
const wrapper = mountComponent(SettingsInput, { const wrapper = mountComponent(
SettingsInput,
{
attrs: { attrs: {
setting: { setting: {
name: 'input', name: 'input',
i18n: 'input', i18n: 'input',
type: 'string', type: 'string',
}, },
path: 'input' path: 'input',
} },
}, { },
input: translation {
}); input: translation,
},
);
const label = wrapper.find('label'); const label = wrapper.find('label');
expect(label.text()).toBe(translation); expect(label.text()).toBe(translation);
src/features/settings/components/__tests__/SettingsPage.test.js
+42 -25
View File
@@ -22,36 +22,45 @@ import SettingsSwitch from '../SettingsSwitch.vue';
import { mountComponent } from '@/test-utils/mountComponent.js'; import { mountComponent } from '@/test-utils/mountComponent.js';
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
const getWrapper = function getWrapper({
const getWrapper = function getWrapper({ content = [], translations = {}, piniaOptions = {} }) { content = [],
return mountComponent(SettingsPage, { translations = {},
piniaOptions = {},
}) {
return mountComponent(
SettingsPage,
{
attrs: { attrs: {
setting: { setting: {
name: 'section', name: 'section',
type: 'section', type: 'section',
i18n: 'section', i18n: 'section',
content content,
}, },
path: 'section' path: 'section',
} },
}, translations, [], piniaOptions); },
translations,
[],
piniaOptions,
);
}; };
const exampleSettings = [ const exampleSettings = [
{ {
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.section.b0' i18n: 'settings.section.b0',
}, },
{ {
type: 'number', type: 'number',
name: 'n0', name: 'n0',
i18n: 'settings.section.n0' i18n: 'settings.section.n0',
}, },
{ {
type: 'string', type: 'string',
name: 'st0', name: 'st0',
i18n: 'settings.section1.st0' i18n: 'settings.section1.st0',
}, },
{ {
type: 'selection', type: 'selection',
@@ -61,14 +70,14 @@ const exampleSettings = [
{ name: 'o0', i18n: 'settings.section.se0.o0' }, { name: 'o0', i18n: 'settings.section.se0.o0' },
{ name: 'o1', i18n: 'settings.section.se0.o1' }, { name: 'o1', i18n: 'settings.section.se0.o1' },
{ name: 'o2', i18n: 'settings.section.se0.o2' }, { name: 'o2', i18n: 'settings.section.se0.o2' },
{ name: 'o3', i18n: 'settings.section.se0.o3' } { name: 'o3', i18n: 'settings.section.se0.o3' },
] ],
}, },
{ {
type: 'section', type: 'section',
name: 's0', name: 's0',
i18n: 'settings.section.s0', i18n: 'settings.section.s0',
content: [] content: [],
}, },
{ {
type: 'section', type: 'section',
@@ -79,17 +88,17 @@ const exampleSettings = [
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.section.s1.b0', i18n: 'settings.section.s1.b0',
default: true default: true,
} },
] ],
} },
]; ];
describe('SettingsPage', () => { describe('SettingsPage', () => {
test('shows correct heading', () => { test('shows correct heading', () => {
const translation = 'Example section'; const translation = 'Example section';
const wrapper = getWrapper({ const wrapper = getWrapper({
translations: { section: translation } translations: { section: translation },
}); });
const heading = wrapper.find('.section-heading'); const heading = wrapper.find('.section-heading');
@@ -98,10 +107,9 @@ describe('SettingsPage', () => {
test('shows settings correctly', () => { test('shows settings correctly', () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
content: exampleSettings content: exampleSettings,
}); });
const settingsWrappers = wrapper.findAll('.setting'); const settingsWrappers = wrapper.findAll('.setting');
expect(settingsWrappers.length).toBe(exampleSettings.length); expect(settingsWrappers.length).toBe(exampleSettings.length);
@@ -110,8 +118,10 @@ describe('SettingsPage', () => {
const switchSetting = settingWrapper.findComponent(SettingsSwitch); const switchSetting = settingWrapper.findComponent(SettingsSwitch);
const inputSetting = settingWrapper.findComponent(SettingsInput); const inputSetting = settingWrapper.findComponent(SettingsInput);
const selectionSetting = settingWrapper.findComponent(SettingsSelection); const selectionSetting =
const settingsPageLink = settingWrapper.findComponent(SettingsPageLink); settingWrapper.findComponent(SettingsSelection);
const settingsPageLink =
settingWrapper.findComponent(SettingsPageLink);
let setting; let setting;
if (expectedSetting.type === 'bool') { if (expectedSetting.type === 'bool') {
@@ -121,7 +131,10 @@ describe('SettingsPage', () => {
expect(settingsPageLink.exists()).toBe(false); expect(settingsPageLink.exists()).toBe(false);
setting = switchSetting; setting = switchSetting;
} else if (expectedSetting.type === 'string' || expectedSetting.type === 'number') { } else if (
expectedSetting.type === 'string' ||
expectedSetting.type === 'number'
) {
expect(switchSetting.exists()).toBe(false); expect(switchSetting.exists()).toBe(false);
expect(inputSetting.exists()).toBe(true); expect(inputSetting.exists()).toBe(true);
expect(selectionSetting.exists()).toBe(false); expect(selectionSetting.exists()).toBe(false);
@@ -150,10 +163,14 @@ describe('SettingsPage', () => {
expectedSetting.type === 'selection' expectedSetting.type === 'selection'
) { ) {
expect(setting.props('setting')).toMatchObject(expectedSetting); expect(setting.props('setting')).toMatchObject(expectedSetting);
expect(setting.props('path')).toBe(`section.${expectedSetting.name}`); expect(setting.props('path')).toBe(
`section.${expectedSetting.name}`,
);
} else { } else {
expect(setting.props('displayName')).toBe(expectedSetting.i18n); expect(setting.props('displayName')).toBe(expectedSetting.i18n);
expect(setting.props('target')).toBe(`section.${expectedSetting.name}`); expect(setting.props('target')).toBe(
`section.${expectedSetting.name}`,
);
} }
}); });
}); });
src/features/settings/components/__tests__/SettingsPageLink.test.js
+5 -7
View File
@@ -22,21 +22,19 @@ import { createI18n } from 'vue-i18n';
const goToSettingsPage = vi.fn(); const goToSettingsPage = vi.fn();
vi.mock('../../composables/useSettingsPage.js', () => ({ vi.mock('../../composables/useSettingsPage.js', () => ({
useSettingsPage: () => ({ useSettingsPage: () => ({
goToSettingsPage goToSettingsPage,
}) }),
})); }));
const getWrapper = function getWrapper({ target, displayName }) { const getWrapper = function getWrapper({ target, displayName }) {
return mount(SettingsPageLink, { return mount(SettingsPageLink, {
attrs: { attrs: {
target, target,
displayName displayName,
}, },
global: { global: {
plugins: [ plugins: [createI18n()],
createI18n() },
]
}
}); });
}; };
src/features/settings/components/__tests__/SettingsSelection.test.js
+31 -22
View File
@@ -26,9 +26,11 @@ const getWrapper = function getWrapper({
allowMultiple = false, allowMultiple = false,
defaultValue = undefined, defaultValue = undefined,
translations = {}, translations = {},
piniaOptions = {} piniaOptions = {},
} = {}) { } = {}) {
return mountComponent(SettingsSelection, { return mountComponent(
SettingsSelection,
{
attrs: { attrs: {
setting: { setting: {
name: 'selection', name: 'selection',
@@ -36,11 +38,15 @@ const getWrapper = function getWrapper({
i18n, i18n,
options, options,
allowMultiple, allowMultiple,
default: defaultValue default: defaultValue,
}, },
path: 'selection' path: 'selection',
} },
}, translations, [], piniaOptions); },
translations,
[],
piniaOptions,
);
}; };
const getChecked = function getChecked(inputs) { const getChecked = function getChecked(inputs) {
@@ -50,7 +56,7 @@ const getChecked = function getChecked(inputs) {
const exampleOptions = [ const exampleOptions = [
{ name: 'o0', i18n: 'o0' }, { name: 'o0', i18n: 'o0' },
{ name: 'o1', i18n: 'o1' }, { name: 'o1', i18n: 'o1' },
{ name: 'o2', i18n: 'o2' } { name: 'o2', i18n: 'o2' },
]; ];
describe('SettingsSelection', () => { describe('SettingsSelection', () => {
@@ -81,8 +87,8 @@ describe('SettingsSelection', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.set('selection', 'o1'); store.set('selection', 'o1');
} },
} },
}); });
const inputs = wrapper.findAll('input'); const inputs = wrapper.findAll('input');
@@ -97,8 +103,8 @@ describe('SettingsSelection', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.set('selection', 'o1'); store.set('selection', 'o1');
} },
} },
}); });
const settings = useSettingsStore(); const settings = useSettingsStore();
@@ -123,9 +129,9 @@ describe('SettingsSelection', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.set('selection', ['o1', 'o2']); store.set('selection', ['o1', 'o2']);
}
}, },
allowMultiple: true },
allowMultiple: true,
}); });
const inputs = wrapper.findAll('input'); const inputs = wrapper.findAll('input');
@@ -136,7 +142,7 @@ describe('SettingsSelection', () => {
test('shows default value', () => { test('shows default value', () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
options: exampleOptions, options: exampleOptions,
defaultValue: 'o2' defaultValue: 'o2',
}); });
const inputs = wrapper.findAll('input'); const inputs = wrapper.findAll('input');
@@ -148,7 +154,7 @@ describe('SettingsSelection', () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
options: exampleOptions, options: exampleOptions,
defaultValue: ['o0', 'o1'], defaultValue: ['o0', 'o1'],
allowMultiple: true allowMultiple: true,
}); });
const inputs = wrapper.findAll('input'); const inputs = wrapper.findAll('input');
@@ -164,8 +170,8 @@ describe('SettingsSelection', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.set('selection', 'o1'); store.set('selection', 'o1');
} },
} },
}); });
const inputs = wrapper.findAll('input'); const inputs = wrapper.findAll('input');
@@ -212,20 +218,23 @@ describe('SettingsSelection', () => {
return setValue(input, false); return setValue(input, false);
}; };
const expectSelectionValue = function expectSelectionValue(value, options = exampleOptions) { const expectSelectionValue = function expectSelectionValue(
value,
options = exampleOptions,
) {
value.sort(); value.sort();
expect(store.get('selection').sort()).toStrictEqual(value); expect(store.get('selection').sort()).toStrictEqual(value);
const checkedInputs = getChecked(inputs); const checkedInputs = getChecked(inputs);
expect( expect(
options options
.map((option) => option.name) .map((option) => option.name)
.filter((_, i) => checkedInputs[i]) .filter((_, i) => checkedInputs[i]),
).toStrictEqual(value); ).toStrictEqual(value);
}; };
const wrapper = getWrapper({ const wrapper = getWrapper({
options: exampleOptions, options: exampleOptions,
allowMultiple: true allowMultiple: true,
}); });
const store = useSettingsStore(); const store = useSettingsStore();
@@ -283,8 +292,8 @@ describe('SettingsSelection', () => {
const translation = 'Selection setting'; const translation = 'Selection setting';
const wrapper = getWrapper({ const wrapper = getWrapper({
translations: { translations: {
selection: translation selection: translation,
} },
}); });
const label = wrapper.find('.label'); const label = wrapper.find('.label');
src/features/settings/components/__tests__/SettingsSwitch.test.js
+16 -10
View File
@@ -24,19 +24,25 @@ const getWrapper = function getWrapper({
i18n = 'switch1', i18n = 'switch1',
defaultValue = undefined, defaultValue = undefined,
translations = {}, translations = {},
piniaOptions = {} piniaOptions = {},
} = {}) { } = {}) {
return mountComponent(SettingsSwitch, { return mountComponent(
SettingsSwitch,
{
attrs: { attrs: {
setting: { setting: {
type: 'bool', type: 'bool',
name: 'switch', name: 'switch',
i18n, i18n,
default: defaultValue default: defaultValue,
}, },
path: 'switch' path: 'switch',
} },
}, translations, [], piniaOptions); },
translations,
[],
piniaOptions,
);
}; };
describe('SettingsSwitch', () => { describe('SettingsSwitch', () => {
@@ -61,7 +67,7 @@ describe('SettingsSwitch', () => {
test('shows default value', () => { test('shows default value', () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
defaultValue: true defaultValue: true,
}); });
const switchElement = wrapper.find('.switch-wrapper'); const switchElement = wrapper.find('.switch-wrapper');
@@ -75,8 +81,8 @@ describe('SettingsSwitch', () => {
setupStores: () => { setupStores: () => {
const store = useSettingsStore(); const store = useSettingsStore();
store.set('switch', false); store.set('switch', false);
} },
} },
}); });
const switchElement = wrapper.find('.switch-wrapper'); const switchElement = wrapper.find('.switch-wrapper');
@@ -116,7 +122,7 @@ describe('SettingsSwitch', () => {
const translation = 'Switch'; const translation = 'Switch';
const wrapper = getWrapper({ const wrapper = getWrapper({
translations: { switch1: translation } translations: { switch1: translation },
}); });
const label = wrapper.find('label'); const label = wrapper.find('label');
src/features/settings/composables/__tests__/useSettings.test.js
+9 -9
View File
@@ -33,17 +33,17 @@ vi.mock('../../config.js', () => ({
type: 'number', type: 'number',
i18n: '', i18n: '',
name: 'number', name: 'number',
default: settingDefaultValue default: settingDefaultValue,
}, },
{ {
type: 'bool', type: 'bool',
i18n: '', i18n: '',
name: 'bool' name: 'bool',
} },
] ],
} },
] ],
} },
})); }));
describe('useSettings', () => { describe('useSettings', () => {
@@ -85,7 +85,7 @@ beforeEach(() => {
setActivePinia( setActivePinia(
createTestingPinia({ createTestingPinia({
createSpy: vi.fn, createSpy: vi.fn,
stubActions: false stubActions: false,
}) }),
); );
}); });
src/features/settings/composables/__tests__/useSettingsPage.test.js
+4 -4
View File
@@ -20,8 +20,8 @@ import { describe, expect, test, vi } from 'vitest';
const pushRoute = vi.fn(); const pushRoute = vi.fn();
vi.mock('vue-router', () => ({ vi.mock('vue-router', () => ({
useRouter: () => ({ useRouter: () => ({
push: pushRoute push: pushRoute,
}) }),
})); }));
describe('useSettingsPage', () => { describe('useSettingsPage', () => {
@@ -32,8 +32,8 @@ describe('useSettingsPage', () => {
expect(pushRoute).toHaveBeenCalledWith({ expect(pushRoute).toHaveBeenCalledWith({
name: 'settings', name: 'settings',
params: { params: {
rest: ['a', 'b', 'c', 'd', 'e'] rest: ['a', 'b', 'c', 'd', 'e'],
} },
}); });
}); });
}); });
src/features/settings/composables/useSettings.js
+1 -3
View File
@@ -32,9 +32,7 @@ export const useSettings = function useSettings() {
return ( return (
settingsStore.get(key.join('.')) ?? settingsStore.get(key.join('.')) ??
getSettingRecursively( getSettingRecursively(key, settings.contents ?? [])?.default
key, settings.contents ?? []
)?.default
); );
}; };
src/features/settings/composables/useSettingsPage.js
+2 -2
View File
@@ -24,8 +24,8 @@ export const useSettingsPage = function useSettingsPage() {
return router.push({ return router.push({
name: 'settings', name: 'settings',
params: { params: {
rest: getSettingsPagePathSegments(pagePath) rest: getSettingsPagePathSegments(pagePath),
} },
}); });
}; };
src/features/settings/config.js
+13 -13
View File
@@ -40,10 +40,10 @@ export default {
default: defaultLanguage, default: defaultLanguage,
options: SUPPORTED_LANGUAGES.map((language) => ({ options: SUPPORTED_LANGUAGES.map((language) => ({
name: language, name: language,
i18n: `preferences.locale.languages.${language}` i18n: `preferences.locale.languages.${language}`,
})) })),
} },
] ],
}, },
{ {
name: 'appearance', name: 'appearance',
@@ -57,19 +57,19 @@ export default {
options: [ options: [
{ {
name: 'auto', name: 'auto',
i18n: 'settings.settings.appearance.contents.colorScheme.options.auto' i18n: 'settings.settings.appearance.contents.colorScheme.options.auto',
}, },
{ {
name: 'light', name: 'light',
i18n: 'settings.settings.appearance.contents.colorScheme.options.light' i18n: 'settings.settings.appearance.contents.colorScheme.options.light',
}, },
{ {
name: 'dark', name: 'dark',
i18n: 'settings.settings.appearance.contents.colorScheme.options.dark' i18n: 'settings.settings.appearance.contents.colorScheme.options.dark',
} },
] ],
} },
] ],
} },
] ],
}; };
src/features/settings/stores/settingsStore.js
+9 -5
View File
@@ -17,7 +17,9 @@ limitations under the License.
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { reactive } from 'vue'; import { reactive } from 'vue';
export const useSettingsStore = defineStore('settings', () => { export const useSettingsStore = defineStore(
'settings',
() => {
const settings = reactive({}); const settings = reactive({});
const set = function set(key, value) { const set = function set(key, value) {
@@ -33,10 +35,12 @@ export const useSettingsStore = defineStore('settings', () => {
}; };
const clear = function clear() { const clear = function clear() {
Object.keys(settings).forEach(key => delete settings[key]); Object.keys(settings).forEach((key) => delete settings[key]);
}; };
return { set, get, remove, clear, settings }; return { set, get, remove, clear, settings };
}, { },
persist: true {
}); persist: true,
},
);
src/features/settings/utils/__tests__/getSetting.test.js
+232 -168
View File
@@ -19,19 +19,23 @@ import { describe, test, expect } from 'vitest';
describe('getSetting', () => { describe('getSetting', () => {
test.for([ test.for([
({ settings: [], name: '', expected: undefined }), { settings: [], name: '', expected: undefined },
({ settings: [], name: 'a', expected: undefined }), { settings: [], name: 'a', expected: undefined },
({ settings: [ {
settings: [
{ {
type: 'bool', type: 'bool',
name: 'a', name: 'a',
i18n: 'a' i18n: 'a',
} },
], name: 'a', expected: { ],
name: 'a',
expected: {
type: 'bool', type: 'bool',
name: 'a', name: 'a',
i18n: 'a' i18n: 'a',
} }) },
},
])('returns $expected', ({ settings, name, expected }) => { ])('returns $expected', ({ settings, name, expected }) => {
expect(getSetting(name, settings)).toStrictEqual(expected); expect(getSetting(name, settings)).toStrictEqual(expected);
}); });
@@ -40,7 +44,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -50,7 +54,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -60,7 +64,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
}, },
{ {
type: 'section', type: 'section',
@@ -70,7 +74,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '4a', name: '4a',
i18n: '4a' i18n: '4a',
}, },
{ {
type: 'section', type: 'section',
@@ -80,7 +84,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '5a', name: '5a',
i18n: '5a' i18n: '5a',
}, },
{ {
type: 'section', type: 'section',
@@ -90,7 +94,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '6a', name: '6a',
i18n: '6a' i18n: '6a',
}, },
{ {
type: 'section', type: 'section',
@@ -100,40 +104,45 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '7a', name: '7a',
i18n: '7a' i18n: '7a',
} },
] ],
} },
] ],
} },
] ],
} },
] ],
} },
] ],
} },
] ],
} },
]; ];
test.for([ test.for([
({ settings: [], path: ['a'], expected: undefined }), { settings: [], path: ['a'], expected: undefined },
({ settings: [ {
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
} },
], path: ['1a'], expected: { ],
path: ['1a'],
expected: {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -143,20 +152,24 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
} },
] ],
} },
], path: ['1a'], expected: { ],
path: ['1a'],
expected: {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -166,20 +179,24 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
} },
] ],
} },
], path: ['1b', '2a'], expected: { ],
path: ['1b', '2a'],
expected: {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -189,27 +206,31 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'number', type: 'number',
name: '2b', name: '2b',
i18n: '2b', i18n: '2b',
default: 42 default: 42,
} },
] ],
} },
], path: ['1b', '2b'], expected: { ],
path: ['1b', '2b'],
expected: {
type: 'number', type: 'number',
name: '2b', name: '2b',
i18n: '2b', i18n: '2b',
default: 42 default: 42,
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -219,7 +240,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -229,22 +250,26 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b', '2b', '3a'], expected: { ],
path: ['1b', '2b', '3a'],
expected: {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -254,7 +279,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -264,13 +289,15 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b'], expected: { ],
path: ['1b'],
expected: {
type: 'section', type: 'section',
name: '1b', name: '1b',
i18n: '1b', i18n: '1b',
@@ -278,7 +305,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -288,17 +315,19 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} }), },
({ settings: [ },
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -308,7 +337,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -318,13 +347,15 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b', '2b'], expected: { ],
path: ['1b', '2b'],
expected: {
type: 'section', type: 'section',
name: '2b', name: '2b',
i18n: '2b', i18n: '2b',
@@ -332,16 +363,18 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} }), },
},
({ settings: [ {
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -351,7 +384,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -361,18 +394,22 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b', '2b', '3b'], expected: undefined }), ],
({ settings: [ path: ['1b', '2b', '3b'],
expected: undefined,
},
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -382,7 +419,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -392,18 +429,22 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b', '2a', '3a'], expected: undefined }), ],
({ settings: [ path: ['1b', '2a', '3a'],
expected: undefined,
},
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -413,7 +454,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -423,18 +464,22 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1b', '2c', '3a'], expected: undefined }), ],
({ settings: [ path: ['1b', '2c', '3a'],
expected: undefined,
},
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -444,7 +489,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -454,18 +499,22 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1a', '2b', '3a'], expected: undefined }), ],
({ settings: [ path: ['1a', '2b', '3a'],
expected: undefined,
},
{
settings: [
{ {
type: 'bool', type: 'bool',
name: '1a', name: '1a',
i18n: '1a' i18n: '1a',
}, },
{ {
type: 'section', type: 'section',
@@ -475,7 +524,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '2a', name: '2a',
i18n: '2a' i18n: '2a',
}, },
{ {
type: 'section', type: 'section',
@@ -485,19 +534,29 @@ describe('getSetting', () => {
{ {
type: 'string', type: 'string',
name: '3a', name: '3a',
i18n: '3a' i18n: '3a',
} },
] ],
} },
] ],
} },
], path: ['1c', '2b', '3a'], expected: undefined }), ],
({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b', '6b', '7a'], expected: { path: ['1c', '2b', '3a'],
expected: undefined,
},
{
settings: veryNestedSettingsList,
path: ['1b', '2b', '3b', '4b', '5b', '6b', '7a'],
expected: {
type: 'bool', type: 'bool',
name: '7a', name: '7a',
i18n: '7a' i18n: '7a',
} }), },
({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b'], expected: { },
{
settings: veryNestedSettingsList,
path: ['1b', '2b', '3b', '4b', '5b'],
expected: {
type: 'section', type: 'section',
name: '5b', name: '5b',
i18n: '5b', i18n: '5b',
@@ -505,7 +564,7 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '6a', name: '6a',
i18n: '6a' i18n: '6a',
}, },
{ {
type: 'section', type: 'section',
@@ -515,13 +574,18 @@ describe('getSetting', () => {
{ {
type: 'bool', type: 'bool',
name: '7a', name: '7a',
i18n: '7a' i18n: '7a',
} },
] ],
} },
] ],
} }), },
({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4ba', '5b', '6b', '7a'], expected: undefined }) },
{
settings: veryNestedSettingsList,
path: ['1b', '2b', '3b', '4ba', '5b', '6b', '7a'],
expected: undefined,
},
])('returns $expected', ({ settings, path, expected }) => { ])('returns $expected', ({ settings, path, expected }) => {
expect(getSettingRecursively(path, settings)).toStrictEqual(expected); expect(getSettingRecursively(path, settings)).toStrictEqual(expected);
}); });
src/features/settings/utils/__tests__/settingsPage.test.js
+13 -4
View File
@@ -47,15 +47,24 @@ describe('settingsPage', () => {
{ path: 'a1.#b.c/', expected: ['a1', 'b', 'c'] }, { path: 'a1.#b.c/', expected: ['a1', 'b', 'c'] },
{ path: 'a-1.#b.c/', expected: ['a-1', 'b', 'c'] }, { path: 'a-1.#b.c/', expected: ['a-1', 'b', 'c'] },
{ path: 'a-1.b@.c', expected: ['a-1', 'b', 'c'] }, { path: 'a-1.b@.c', expected: ['a-1', 'b', 'c'] },
{ path: '....@a/#...)!&§[b.#§c..d....', expected: ['a', 'b', 'c', 'd'] }, {
{ path: '....@a/#...)!&§[b.#§c..dä....', expected: ['a', 'b', 'c', 'd'] }, path: '....@a/#...)!&§[b.#§c..d....',
{ path: '..,...~..@a/#.+..)!&§[b.#§c..dä..)..', expected: ['a', 'b', 'c', 'd'] }, expected: ['a', 'b', 'c', 'd'],
},
{
path: '....@a/#...)!&§[b.#§c..dä....',
expected: ['a', 'b', 'c', 'd'],
},
{
path: '..,...~..@a/#.+..)!&§[b.#§c..dä..)..',
expected: ['a', 'b', 'c', 'd'],
},
{ path: 'a.@.b', expected: ['a', 'b'] }, { path: 'a.@.b', expected: ['a', 'b'] },
{ path: 1, expected: [] }, { path: 1, expected: [] },
{ path: false, expected: [] }, { path: false, expected: [] },
{ path: true, expected: [] }, { path: true, expected: [] },
{ path: null, expected: [] }, { path: null, expected: [] },
{ path: undefined, expected: [] } { path: undefined, expected: [] },
])('returns $expected', ({ path, expected }) => { ])('returns $expected', ({ path, expected }) => {
expect(getSettingsPagePathSegments(path)).toStrictEqual(expected); expect(getSettingsPagePathSegments(path)).toStrictEqual(expected);
}); });
src/features/settings/utils/__tests__/settingsValidator.test.js
+1047 -429
View File
File diff suppressed because it is too large Load Diff
src/features/settings/utils/getSetting.js
+8 -2
View File
@@ -18,7 +18,10 @@ export const getSetting = function getSetting(name, settings) {
return settings.filter((setting) => setting.name === name)[0]; return settings.filter((setting) => setting.name === name)[0];
}; };
export const getSettingRecursively = function getSettingRecursively(sectionPath, settings) { export const getSettingRecursively = function getSettingRecursively(
sectionPath,
settings,
) {
const oneSettingsLevel = function oneSettingsLevel(cursor, acc) { const oneSettingsLevel = function oneSettingsLevel(cursor, acc) {
const setting = getSetting(cursor[0], acc.content); const setting = getSetting(cursor[0], acc.content);
if (!setting) return; if (!setting) return;
@@ -28,7 +31,10 @@ export const getSettingRecursively = function getSettingRecursively(sectionPath,
const newCursor = cursor.slice(1, cursor.length); const newCursor = cursor.slice(1, cursor.length);
if (newCursor.length !== 0) { if (newCursor.length !== 0) {
return oneSettingsLevel(cursor.slice(1, cursor.length), setting); return oneSettingsLevel(
cursor.slice(1, cursor.length),
setting,
);
} else { } else {
return setting; return setting;
} }
src/features/settings/utils/settingsPage.js
+4 -4
View File
@@ -19,13 +19,13 @@ limitations under the License.
* @param {string} path - The settings page path. * @param {string} path - The settings page path.
* @returns {Array} The settings page path segments. * @returns {Array} The settings page path segments.
*/ */
export const getSettingsPagePathSegments = function getSettingsPagePathSegments(path) { export const getSettingsPagePathSegments = function getSettingsPagePathSegments(
path,
) {
if (typeof path !== 'string') return []; if (typeof path !== 'string') return [];
return path return path
.replace(/^\.+|\.+$/g, '') .replace(/^\.+|\.+$/g, '')
.split('.') .split('.')
.map( .map((segment) => segment.replace(/[^a-zA-Z0-9-]/g, ''))
(segment) => segment.replace(/[^a-zA-Z0-9-]/g, '')
)
.filter(Boolean); .filter(Boolean);
}; };
src/features/settings/utils/settingsValidator.js
+38 -14
View File
@@ -25,14 +25,19 @@ export const assertString = function assertString(value, path) {
export const assertType = function assertType(value, path) { export const assertType = function assertType(value, path) {
if (!VALID_TYPES.includes(value)) { if (!VALID_TYPES.includes(value)) {
throw new Error( throw new Error(
`[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}` `[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}`,
); );
} }
}; };
export const validateSelectionOptions = function validateSelectionOptions(options, path) { export const validateSelectionOptions = function validateSelectionOptions(
options,
path,
) {
if (!Array.isArray(options) || options.length === 0) { if (!Array.isArray(options) || options.length === 0) {
throw new Error(`[settings] "${path}.options" must be a non-empty array`); throw new Error(
`[settings] "${path}.options" must be a non-empty array`,
);
} }
options.forEach((opt, i) => { options.forEach((opt, i) => {
assertString(opt.name, `${path}.options[${i}].name`); assertString(opt.name, `${path}.options[${i}].name`);
@@ -51,7 +56,7 @@ export const validateEntry = function validateEntry(entry, path) {
throw new Error(`[settings] "${path}.content" must be an array`); throw new Error(`[settings] "${path}.content" must be an array`);
} }
entry.content.forEach((child, i) => entry.content.forEach((child, i) =>
validateEntry(child, `${path}.content[${i}]`) validateEntry(child, `${path}.content[${i}]`),
); );
return; return;
} }
@@ -59,7 +64,9 @@ export const validateEntry = function validateEntry(entry, path) {
if (entry.type === 'selection') { if (entry.type === 'selection') {
validateSelectionOptions(entry.options, path); validateSelectionOptions(entry.options, path);
if (typeof entry.allowMultiple !== 'boolean' && entry.allowMultiple) { if (typeof entry.allowMultiple !== 'boolean' && entry.allowMultiple) {
throw new Error(`[settings] "${path}.allowMultiple" must be a boolean`); throw new Error(
`[settings] "${path}.allowMultiple" must be a boolean`,
);
} }
} }
if (entry.default !== undefined) { if (entry.default !== undefined) {
@@ -75,30 +82,47 @@ export const validateEntry = function validateEntry(entry, path) {
if (entry.type === 'selection') { if (entry.type === 'selection') {
if (entry.allowMultiple) { if (entry.allowMultiple) {
if (!Array.isArray(entry.default)) { if (!Array.isArray(entry.default)) {
throw new Error(`[settings] "${path}.default" must be an array`); throw new Error(
`[settings] "${path}.default" must be an array`,
);
} }
const allOptions = entry.options.map((option) => option.name); const allOptions = entry.options.map((option) => option.name);
entry.default.forEach((defaultValue, index) => { entry.default.forEach((defaultValue, index) => {
if (typeof defaultValue !== 'string') { if (typeof defaultValue !== 'string') {
throw new Error(`[settings] "${path}.default[${index}]" must be a string`); throw new Error(
`[settings] "${path}.default[${index}]" must be a string`,
);
} }
if (!allOptions.includes(defaultValue)) { if (!allOptions.includes(defaultValue)) {
throw new Error(`[settings] option "${path}.default[${index}]" does not exist`); throw new Error(
`[settings] option "${path}.default[${index}]" does not exist`,
);
} }
}); });
} else { } else {
if (typeof entry.default !== 'string') { if (typeof entry.default !== 'string') {
throw new Error(`[settings] "${path}.default" must be a string`); throw new Error(
`[settings] "${path}.default" must be a string`,
);
} }
if (!entry.options.map((option) => option.name).includes(entry.default)) { if (
throw new Error(`[settings] option "${path}.default" does not exist`); !entry.options
.map((option) => option.name)
.includes(entry.default)
) {
throw new Error(
`[settings] option "${path}.default" does not exist`,
);
} }
} }
} }
} }
}; };
export const validateFirstLevelSection = function validateFirstLevelSection(section, path) { export const validateFirstLevelSection = function validateFirstLevelSection(
section,
path,
) {
assertString(section.name); assertString(section.name);
assertString(section.i18n); assertString(section.i18n);
@@ -107,7 +131,7 @@ export const validateFirstLevelSection = function validateFirstLevelSection(sect
} }
section.content.forEach((entry, i) => section.content.forEach((entry, i) =>
validateEntry(entry, `${path}.content[${i}]`) validateEntry(entry, `${path}.content[${i}]`),
); );
}; };
@@ -124,6 +148,6 @@ export const validateSettingsConfig = function validateSettingsConfig(raw) {
throw new Error('[settings] "contents" must be an array'); throw new Error('[settings] "contents" must be an array');
} }
raw.contents.forEach((entry, i) => raw.contents.forEach((entry, i) =>
validateFirstLevelSection(entry, `contents[${i}]`) validateFirstLevelSection(entry, `contents[${i}]`),
); );
}; };
src/features/settings/views/SettingsView.vue
+9 -6
View File
@@ -15,7 +15,6 @@ limitations under the License.
--> -->
<script setup> <script setup>
import SettingsPage from '../components/SettingsPage.vue'; import SettingsPage from '../components/SettingsPage.vue';
import settingsConfiguration from '../config.js'; import settingsConfiguration from '../config.js';
import { getSettingRecursively } from '../utils/getSetting.js'; import { getSettingRecursively } from '../utils/getSetting.js';
@@ -31,9 +30,7 @@ const router = useRouter();
const settings = settingsConfiguration.contents; const settings = settingsConfiguration.contents;
const activePath = computed(() => { const activePath = computed(() => {
const segments = route.path const segments = route.path.split('/').filter(Boolean);
.split('/')
.filter(Boolean);
return segments.slice(1, segments.length); return segments.slice(1, segments.length);
}); });
@@ -50,7 +47,9 @@ const updateSettings = async function updateSettings() {
watch(route, (newRoute) => updateSettings(newRoute)); watch(route, (newRoute) => updateSettings(newRoute));
onMounted(updateSettings); onMounted(updateSettings);
const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen(toggleSidebarFunction) { const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen(
toggleSidebarFunction,
) {
if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction(); if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
}; };
</script> </script>
@@ -69,7 +68,11 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen(toggleSid
<RouterLink <RouterLink
:to="`/settings/${section.name}`" :to="`/settings/${section.name}`"
class="button button-link link sidebar-section" class="button button-link link sidebar-section"
:class="{ active: activeSection && activeSection.name === section.name }" :class="{
active:
activeSection &&
activeSection.name === section.name,
}"
@click="toggleSidebarIfSmallScreen(toggleSidebar)" @click="toggleSidebarIfSmallScreen(toggleSidebar)"
> >
{{ t(section.i18n) }} {{ t(section.i18n) }}
src/features/settings/views/__tests__/SettingsView.test.js
+60 -52
View File
@@ -23,7 +23,7 @@ const settingsHoisted = vi.hoisted(() => [
{ {
name: 's0', name: 's0',
i18n: 'settings.s0', i18n: 'settings.s0',
content: [] content: [],
}, },
{ {
name: 's1', name: 's1',
@@ -32,17 +32,17 @@ const settingsHoisted = vi.hoisted(() => [
{ {
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.s1.b0' i18n: 'settings.s1.b0',
}, },
{ {
type: 'number', type: 'number',
name: 'n0', name: 'n0',
i18n: 'settings.s1.n0' i18n: 'settings.s1.n0',
}, },
{ {
type: 'string', type: 'string',
name: 'st0', name: 'st0',
i18n: 'settings.s1.st0' i18n: 'settings.s1.st0',
}, },
{ {
type: 'selection', type: 'selection',
@@ -52,14 +52,14 @@ const settingsHoisted = vi.hoisted(() => [
{ name: 'o0', i18n: 'settings.s1.se0.o0' }, { name: 'o0', i18n: 'settings.s1.se0.o0' },
{ name: 'o1', i18n: 'settings.s1.se0.o1' }, { name: 'o1', i18n: 'settings.s1.se0.o1' },
{ name: 'o2', i18n: 'settings.s1.se0.o2' }, { name: 'o2', i18n: 'settings.s1.se0.o2' },
{ name: 'o3', i18n: 'settings.s1.se0.o3' } { name: 'o3', i18n: 'settings.s1.se0.o3' },
] ],
}, },
{ {
type: 'section', type: 'section',
name: 's0', name: 's0',
i18n: 'settings.s1.s0', i18n: 'settings.s1.s0',
content: [] content: [],
}, },
{ {
type: 'section', type: 'section',
@@ -70,11 +70,11 @@ const settingsHoisted = vi.hoisted(() => [
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.s1.s1.b0', i18n: 'settings.s1.s1.b0',
default: true default: true,
} },
] ],
} },
] ],
}, },
{ {
name: 's2', name: 's2',
@@ -89,11 +89,11 @@ const settingsHoisted = vi.hoisted(() => [
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.s2.s0.b0', i18n: 'settings.s2.s0.b0',
default: true default: true,
} },
] ],
} },
] ],
}, },
{ {
name: 's3', name: 's3',
@@ -103,9 +103,9 @@ const settingsHoisted = vi.hoisted(() => [
type: 'section', type: 'section',
name: 's0', name: 's0',
i18n: 'settings.s3.s0', i18n: 'settings.s3.s0',
content: [] content: [],
} },
] ],
}, },
{ {
name: 's4', name: 's4',
@@ -119,10 +119,10 @@ const settingsHoisted = vi.hoisted(() => [
{ name: 'o0', i18n: 'settings.s4.se0.o0' }, { name: 'o0', i18n: 'settings.s4.se0.o0' },
{ name: 'o1', i18n: 'settings.s4.se0.o1' }, { name: 'o1', i18n: 'settings.s4.se0.o1' },
{ name: 'o2', i18n: 'settings.s4.se0.o2' }, { name: 'o2', i18n: 'settings.s4.se0.o2' },
{ name: 'o3', i18n: 'settings.s4.se0.o3' } { name: 'o3', i18n: 'settings.s4.se0.o3' },
] ],
} },
] ],
}, },
{ {
name: 's5', name: 's5',
@@ -131,9 +131,9 @@ const settingsHoisted = vi.hoisted(() => [
{ {
type: 'string', type: 'string',
name: 'st0', name: 'st0',
i18n: 'settings.s5.st0' i18n: 'settings.s5.st0',
} },
] ],
}, },
{ {
name: 's6', name: 's6',
@@ -142,9 +142,9 @@ const settingsHoisted = vi.hoisted(() => [
{ {
type: 'number', type: 'number',
name: 'n0', name: 'n0',
i18n: 'settings.s6.n0' i18n: 'settings.s6.n0',
} },
] ],
}, },
{ {
name: 's7', name: 's7',
@@ -153,9 +153,9 @@ const settingsHoisted = vi.hoisted(() => [
{ {
type: 'bool', type: 'bool',
name: 'b0', name: 'b0',
i18n: 'settings.s7.b0' i18n: 'settings.s7.b0',
} },
] ],
}, },
{ {
name: 's8', name: 's8',
@@ -181,16 +181,16 @@ const settingsHoisted = vi.hoisted(() => [
name: 'se0', name: 'se0',
i18n: 'settings.s8.s0.s0.s0.se0', i18n: 'settings.s8.s0.s0.s0.se0',
allowMultiple: true, allowMultiple: true,
options: [] options: [],
} },
] ],
} },
] ],
} },
] ],
} },
] ],
} },
]); ]);
const settings = settingsHoisted.values(); const settings = settingsHoisted.values();
@@ -198,7 +198,7 @@ const originalCurrentSection = 's0';
let currentSection = originalCurrentSection; let currentSection = originalCurrentSection;
vi.mock('../../config.js', () => ({ vi.mock('../../config.js', () => ({
default: { contents: settingsHoisted } default: { contents: settingsHoisted },
})); }));
vi.mock('vue-router', async (importOriginal) => { vi.mock('vue-router', async (importOriginal) => {
@@ -206,8 +206,8 @@ vi.mock('vue-router', async (importOriginal) => {
return { return {
...actual, ...actual,
useRoute: () => ({ useRoute: () => ({
path: `/settings/${currentSection}` path: `/settings/${currentSection}`,
}) }),
}; };
}); });
@@ -221,8 +221,8 @@ describe('SettingsView', () => {
const translation = 'Settings'; const translation = 'Settings';
const wrapper = getWrapper({ const wrapper = getWrapper({
translations: { translations: {
'preferences.settings': translation 'preferences.settings': translation,
} },
}); });
const header = wrapper.find('header'); const header = wrapper.find('header');
@@ -242,8 +242,12 @@ describe('SettingsView', () => {
expect(sidebarItem.text()).toBe(setting.i18n); expect(sidebarItem.text()).toBe(setting.i18n);
const link = sidebarItem.find('*'); const link = sidebarItem.find('*');
expect(link.attributes('href')).toBe(`/settings/${setting.name}`); expect(link.attributes('href')).toBe(
expect(link.classes('active')).toBe(setting.name === currentSection); `/settings/${setting.name}`,
);
expect(link.classes('active')).toBe(
setting.name === currentSection,
);
}); });
}); });
}); });
@@ -257,7 +261,9 @@ describe('SettingsView', () => {
await nextTick(); await nextTick();
const mainContent = wrapper.find('.settings-main-content'); const mainContent = wrapper.find('.settings-main-content');
const mainContentNoSection = wrapper.find('.main-content--no-section'); const mainContentNoSection = wrapper.find(
'.main-content--no-section',
);
expect(mainContent.exists()).toBe(false); expect(mainContent.exists()).toBe(false);
expect(mainContentNoSection.exists()).toBe(true); expect(mainContentNoSection.exists()).toBe(true);
@@ -268,7 +274,9 @@ describe('SettingsView', () => {
await nextTick(); await nextTick();
const mainContent = wrapper.find('.settings-main-content'); const mainContent = wrapper.find('.settings-main-content');
const mainContentNoSection = wrapper.find('.main-content--no-section'); const mainContentNoSection = wrapper.find(
'.main-content--no-section',
);
expect(mainContent.exists()).toBe(true); expect(mainContent.exists()).toBe(true);
expect(mainContentNoSection.exists()).toBe(false); expect(mainContentNoSection.exists()).toBe(false);
src/features/sidebar/components/AppSidebar.vue
+7 -4
View File
@@ -18,11 +18,11 @@ limitations under the License.
import SidebarExpandButton from './SidebarExpandButton.vue'; import SidebarExpandButton from './SidebarExpandButton.vue';
const props = defineProps({ const props = defineProps({
'expanded': { expanded: {
default: false, default: false,
required: false, required: false,
type: Boolean type: Boolean,
} },
}); });
const emit = defineEmits(['toggleExpanded']); const emit = defineEmits(['toggleExpanded']);
@@ -34,7 +34,10 @@ const toggleSidebar = function toggleSidebar() {
<template> <template>
<nav class="sidebar" :class="{ expanded }"> <nav class="sidebar" :class="{ expanded }">
<div class="sidebar-controls"> <div class="sidebar-controls">
<SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" /> <SidebarExpandButton
@click="toggleSidebar"
class="sidebar-expand-button"
/>
</div> </div>
<div class="sidebar-content" v-show="props.expanded"> <div class="sidebar-content" v-show="props.expanded">
<slot /> <slot />
src/i18n.js
+6 -14
View File
@@ -18,24 +18,14 @@ import { createI18n } from 'vue-i18n';
export const fallbackLocale = 'en'; export const fallbackLocale = 'en';
export const LANGUAGES_RTL = ['ar'];
export const LANGUAGES_RTL = [ export const SUPPORTED_LANGUAGES = ['en', 'de', 'fr', 'es', 'pt', 'it'];
'ar'
];
export const SUPPORTED_LANGUAGES = [
'en',
'de',
'fr',
'es',
'pt',
'it'
];
export const i18n = createI18n({ export const i18n = createI18n({
legacy: false, legacy: false,
locale: fallbackLocale, locale: fallbackLocale,
fallbackLocale, fallbackLocale,
messages: {} messages: {},
}); });
const loadedLanguages = new Set(); const loadedLanguages = new Set();
@@ -61,5 +51,7 @@ export const loadLanguage = async function loadLanguage(locale) {
export const setLocale = async function setLocale(locale) { export const setLocale = async function setLocale(locale) {
await loadLanguage(locale); await loadLanguage(locale);
document.documentElement.lang = locale; document.documentElement.lang = locale;
document.documentElement.dir = LANGUAGES_RTL.includes(locale) ? 'rtl' : 'ltr'; document.documentElement.dir = LANGUAGES_RTL.includes(locale)
? 'rtl'
: 'ltr';
}; };
src/layouts/LeftSidebarLayout.vue
+14 -7
View File
@@ -20,11 +20,11 @@ import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButt
import { ref } from 'vue'; import { ref } from 'vue';
const props = defineProps({ const props = defineProps({
'expanded': { expanded: {
default: false, default: false,
required: false, required: false,
type: Boolean type: Boolean,
} },
}); });
const expanded = ref(props.expanded); const expanded = ref(props.expanded);
@@ -37,9 +37,16 @@ const toggleSidebar = function toggleSidebar() {
<template> <template>
<div class="layout-container" :class="{ expanded }"> <div class="layout-container" :class="{ expanded }">
<div class="sidebar-expand-button-container"> <div class="sidebar-expand-button-container">
<SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" /> <SidebarExpandButton
class="sidebar-expand-button"
@click="toggleSidebar"
/>
</div> </div>
<AppSidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar"> <AppSidebar
@toggle-expanded="toggleSidebar"
:expanded="expanded"
class="sidebar"
>
<slot name="sidebar" :toggleSidebar="toggleSidebar" /> <slot name="sidebar" :toggleSidebar="toggleSidebar" />
</AppSidebar> </AppSidebar>
<main class="main-content"> <main class="main-content">
@@ -54,8 +61,8 @@ const toggleSidebar = function toggleSidebar() {
grid-template-columns: calc(32px + 2em) 1fr; grid-template-columns: calc(32px + 2em) 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-areas: grid-template-areas:
"sidebar-expand sidebar-expand" 'sidebar-expand sidebar-expand'
"sidebar main-content"; 'sidebar main-content';
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
src/main.js
+18 -14
View File
@@ -33,21 +33,29 @@ import { getAssetsUrl } from './config/env';
import { validateSettingsConfig } from './features/settings/utils/settingsValidator'; import { validateSettingsConfig } from './features/settings/utils/settingsValidator';
(async () => { (async () => {
const fonts = rawFonts.map((font) => new FontFace( const fonts = rawFonts.map(
(font) =>
new FontFace(
font.family ?? '', font.family ?? '',
Array.isArray(font.source) Array.isArray(font.source)
? font.source.map( ? font.source
(source) => `url('${source.url .map(
? new URL(source.url, getAssetsUrl()).href (source) =>
`url('${
source.url
? new URL(source.url, getAssetsUrl())
.href
: '' : ''
}') format('${source.format ?? ''}')` }') format('${source.format ?? ''}')`,
).join(',') )
.join(',')
: '', : '',
{ {
weight: font.weight ?? undefined, weight: font.weight ?? undefined,
style: font.style ?? undefined style: font.style ?? undefined,
} },
)); ),
);
await Promise.all(fonts.map((font) => font.load())); await Promise.all(fonts.map((font) => font.load()));
fonts.forEach((font) => document.fonts.add(font)); fonts.forEach((font) => document.fonts.add(font));
@@ -58,9 +66,5 @@ import { validateSettingsConfig } from './features/settings/utils/settingsValida
validateSettingsConfig(settings); validateSettingsConfig(settings);
createApp(App) createApp(App).use(router).use(i18n).use(pinia).mount('#app');
.use(router)
.use(i18n)
.use(pinia)
.mount('#app');
})(); })();
src/router/index.js
+12 -13
View File
@@ -23,50 +23,49 @@ import SearchView from '@/views/SearchView.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'startPage', name: 'startPage',
component: SearchView component: SearchView,
}, },
{ {
path: '/search', path: '/search',
name: 'searchResults', name: 'searchResults',
component: SearchResultsView, component: SearchResultsView,
props: route => ({ props: (route) => ({
searchQuery: route.query.q searchQuery: route.query.q,
}), }),
meta: { meta: {
title: (route) => route.query.q title: (route) => route.query.q,
} },
}, },
{ {
path: '/legal/notice', path: '/legal/notice',
name: 'legalNotice', name: 'legalNotice',
component: LegalNoticeView, component: LegalNoticeView,
meta: { meta: {
title: () => i18n.global.t('legal.notice.title') title: () => i18n.global.t('legal.notice.title'),
} },
}, },
{ {
path: '/settings/:rest(.*)*', path: '/settings/:rest(.*)*',
name: 'settings', name: 'settings',
component: SettingsView, component: SettingsView,
meta: { meta: {
title: () => i18n.global.t('preferences.settings') title: () => i18n.global.t('preferences.settings'),
} },
}, },
{ {
path: '/:pathMatch(.*)*', path: '/:pathMatch(.*)*',
name: 'notFound', name: 'notFound',
component: NotFound component: NotFound,
}, },
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes routes,
}); });
export const updatePageTitle = function updatePageTitle(route) { export const updatePageTitle = function updatePageTitle(route) {
@@ -89,7 +88,7 @@ router.beforeEach((route) => {
path: route.path.replace(/\/+$/, ''), path: route.path.replace(/\/+$/, ''),
query: route.query, query: route.query,
hash: route.hash, hash: route.hash,
replace: true replace: true,
}; };
} }
}); });
src/styles/common.css
+15 -2
View File
@@ -19,7 +19,19 @@ body {
color: var(--dark); color: var(--dark);
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family:
'Inter',
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
} }
.link { .link {
@@ -27,7 +39,8 @@ body {
color: var(--dark); color: var(--dark);
} }
.link:hover:not(.button-link), .link:focus-visible:not(.button-link) { .link:hover:not(.button-link),
.link:focus-visible:not(.button-link) {
outline: none; outline: none;
text-decoration: underline; text-decoration: underline;
} }
src/styles/variables/colors.css
+2 -2
View File
@@ -102,7 +102,7 @@ body {
--dark: var(--white); --dark: var(--white);
--light: var(--black); --light: var(--black);
--light-d-1: oklch(0.10 0 0); --light-d-1: oklch(0.1 0 0);
--light-d-2: var(--black-l-2); --light-d-2: var(--black-l-2);
--light-d-3: var(--black-l-3); --light-d-3: var(--black-l-3);
--light-d-4: var(--black-l-4); --light-d-4: var(--black-l-4);
@@ -136,7 +136,7 @@ body.dark {
--dark: var(--white); --dark: var(--white);
--light: var(--black); --light: var(--black);
--light-d-1: oklch(0.10 0 0); --light-d-1: oklch(0.1 0 0);
--light-d-2: var(--black-l-2); --light-d-2: var(--black-l-2);
--light-d-3: var(--black-l-3); --light-d-3: var(--black-l-3);
--light-d-4: var(--black-l-4); --light-d-4: var(--black-l-4);
src/test-utils/mountComponent.js
+14 -15
View File
@@ -20,29 +20,32 @@ import { vi } from 'vitest';
import { createI18n } from 'vue-i18n'; import { createI18n } from 'vue-i18n';
import { createMemoryHistory, createRouter } from 'vue-router'; import { createMemoryHistory, createRouter } from 'vue-router';
export const mountComponent = function mountComponent(component, options = {}, i18nMessages = {}, routes = [], piniaOptions = {}) { export const mountComponent = function mountComponent(
const { component,
setupStores, options = {},
...testingPiniaOptions i18nMessages = {},
} = piniaOptions; routes = [],
piniaOptions = {},
) {
const { setupStores, ...testingPiniaOptions } = piniaOptions;
const i18n = createI18n({ const i18n = createI18n({
legacy: false, legacy: false,
locale: 'en', locale: 'en',
messages: { messages: {
en: i18nMessages en: i18nMessages,
} },
}); });
const router = createRouter({ const router = createRouter({
history: createMemoryHistory(), history: createMemoryHistory(),
routes routes,
}); });
const testingPinia = createTestingPinia({ const testingPinia = createTestingPinia({
...testingPiniaOptions, ...testingPiniaOptions,
stubActions: false, stubActions: false,
createSpy: vi.fn createSpy: vi.fn,
}); });
if (setupStores) { if (setupStores) {
@@ -51,12 +54,8 @@ export const mountComponent = function mountComponent(component, options = {}, i
return mount(component, { return mount(component, {
global: { global: {
plugins: [ plugins: [i18n, router, testingPinia],
i18n,
router,
testingPinia
],
}, },
...options ...options,
}); });
}; };
src/utils/__tests__/cssDimensions.test.js
+17 -5
View File
@@ -111,14 +111,26 @@ describe('cssDimensions', () => {
{ dimension: 'calc(42vh)', expected: 'calc(42vh)' }, { dimension: 'calc(42vh)', expected: 'calc(42vh)' },
{ dimension: 'min(42px, 1em)', expected: 'min(42px, 1em)' }, { dimension: 'min(42px, 1em)', expected: 'min(42px, 1em)' },
{ dimension: 'max(42px, 5rem)', expected: 'max(42px, 5rem)' }, { dimension: 'max(42px, 5rem)', expected: 'max(42px, 5rem)' },
{ dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' }, {
dimension: 'clamp(42vh, 23vw, 13cap)',
expected: 'clamp(42vh, 23vw, 13cap)',
},
{ dimension: 'calc(42px-1em)', expected: 'calc(42px-1em)' }, { dimension: 'calc(42px-1em)', expected: 'calc(42px-1em)' },
{ dimension: 'min(42px,1em)', expected: 'min(42px,1em)' }, { dimension: 'min(42px,1em)', expected: 'min(42px,1em)' },
{ dimension: 'max(42px,5rem)', expected: 'max(42px,5rem)' }, { dimension: 'max(42px,5rem)', expected: 'max(42px,5rem)' },
{ dimension: 'clamp(42vh,23vw,13cap)', expected: 'clamp(42vh,23vw,13cap)' }, {
{ dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' } dimension: 'clamp(42vh,23vw,13cap)',
])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => { expected: 'clamp(42vh,23vw,13cap)',
},
{
dimension: 'clamp( 42vh,23vw,13cap )',
expected: 'clamp( 42vh,23vw,13cap )',
},
])(
'ensureUnit returns $expected with input $dimension',
({ dimension, expected }) => {
expect(ensureUnit(dimension)).toBe(expected); expect(ensureUnit(dimension)).toBe(expected);
}); },
);
}); });
src/views/SearchView.vue
+6 -1
View File
@@ -35,7 +35,12 @@ const searchQuery = ref('');
</header> </header>
<div class="search-container"> <div class="search-container">
<SearchBar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit /> <SearchBar
v-model="searchQuery"
ref="searchbar"
class="search-bar"
auto-submit
/>
</div> </div>
</div> </div>
</template> </template>
vite.config.js
+7 -7
View File
@@ -22,21 +22,21 @@ import { createHtmlPlugin } from 'vite-plugin-html';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
build: { build: {
target: 'es2020' target: 'es2020',
}, },
plugins: [ plugins: [
vue(), vue(),
createHtmlPlugin({ createHtmlPlugin({
minify: true minify: true,
}) }),
], ],
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, './src') '@': path.resolve(__dirname, './src'),
} },
}, },
test: { test: {
globals: false, globals: false,
environment: 'jsdom' environment: 'jsdom',
} },
}); });