generated from Seekra/repository-template
Compare commits
20 Commits
main
..
17072dbc5a
| Author | SHA1 | Date | |
|---|---|---|---|
|
17072dbc5a
|
|||
|
1d90612bbd
|
|||
|
f322f19f9e
|
|||
|
d0dc66940a
|
|||
|
8ff26f4bb8
|
|||
|
12f67f17ed
|
|||
|
8850732ec6
|
|||
|
940eb84202
|
|||
|
c2a9d80cf5
|
|||
|
8fc2b14ef1
|
|||
|
6731b1981b
|
|||
|
4584fd92d1
|
|||
|
42bd37e9e4
|
|||
|
d9906c782f
|
|||
|
c1ce580ed7
|
|||
|
e0419d57cc
|
|||
|
751b2663b3
|
|||
|
c53d98a95c
|
|||
|
4d612f2c19
|
|||
|
4d8521c130
|
@@ -17,7 +17,6 @@
|
|||||||
"vue-router": "^5.0.6"
|
"vue-router": "^5.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/test-utils": "^2.4.6",
|
|
||||||
"@vitejs/plugin-vue": "^6.0.6",
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
"jsdom": "^29.1.1",
|
"jsdom": "^29.1.1",
|
||||||
"vite": "^8.0.10",
|
"vite": "^8.0.10",
|
||||||
|
|||||||
+2
-5
@@ -42,18 +42,15 @@ watch(colorScheme, val => updateColorScheme(val))
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#app-wrapper {
|
.main-content {
|
||||||
--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);
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 48rem) {
|
@media (max-width: 48rem) {
|
||||||
#app-wrapper {
|
.main-content {
|
||||||
--main-content-padding-x: 15px;
|
--main-content-padding-x: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,114 +0,0 @@
|
|||||||
/*
|
|
||||||
Copyright 2026 Seekra
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { expect, test, describe, vi, beforeEach } from 'vitest';
|
|
||||||
import { mount } from '@vue/test-utils';
|
|
||||||
import LanguageSwitchButton from '../LanguageSwitchButton.vue';
|
|
||||||
import { loadLanguage } from '@/i18n';
|
|
||||||
|
|
||||||
vi.mock('@/i18n', () => ({
|
|
||||||
loadLanguage: vi.fn(() => Promise.resolve()),
|
|
||||||
LANGUAGES_RTL: ['ar', 'he'],
|
|
||||||
SUPPORTED_LANGUAGES: ['en', 'de', 'ar']
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('vue-i18n', () => ({
|
|
||||||
useI18n: () => ({
|
|
||||||
t: (key) => key,
|
|
||||||
locale: { value: 'de' }
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('@/features/icons/components/Icon.vue', () => ({
|
|
||||||
default: {
|
|
||||||
name: 'Icon',
|
|
||||||
template: '<span>Icon</span>'
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('LanguageSwitchButton.vue', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
localStorage.clear();
|
|
||||||
document.documentElement.lang = '';
|
|
||||||
document.documentElement.dir = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders correctly with initial state closed', () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-button').exists()).toBe(true);
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
expect(wrapper.find('.language-button').attributes('aria-expanded')).toBe('false');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('opens the dropdown when language button is clicked', async () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
const button = wrapper.find('.language-button');
|
|
||||||
|
|
||||||
await button.trigger('click');
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(true);
|
|
||||||
expect(button.attributes('aria-expanded')).toBe('true');
|
|
||||||
});
|
|
||||||
|
|
||||||
const languageTestCases = [
|
|
||||||
{ code: 'en', expectedDir: 'ltr' },
|
|
||||||
{ code: 'de', expectedDir: 'ltr' },
|
|
||||||
{ code: 'ar', expectedDir: 'rtl' }
|
|
||||||
];
|
|
||||||
|
|
||||||
test.for(languageTestCases)('selectLanguage($code) sets localStorage, html attributes and changes layout direction to $expectedDir', async ({ code, expectedDir }) => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton);
|
|
||||||
|
|
||||||
await wrapper.find('.language-button').trigger('click');
|
|
||||||
|
|
||||||
const options = wrapper.findAll('.language-dropdown li');
|
|
||||||
const optionToClick = options.find(opt => opt.text().includes(code));
|
|
||||||
|
|
||||||
await optionToClick.trigger('click');
|
|
||||||
|
|
||||||
expect(loadLanguage).toHaveBeenCalledWith(code);
|
|
||||||
expect(localStorage.getItem('locale')).toBe(code);
|
|
||||||
expect(document.documentElement.lang).toBe(code);
|
|
||||||
expect(document.documentElement.dir).toBe(expectedDir);
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('closes the dropdown when clicking outside the component', async () => {
|
|
||||||
const wrapper = mount(LanguageSwitchButton, {
|
|
||||||
attachTo: document.body
|
|
||||||
});
|
|
||||||
|
|
||||||
await wrapper.find('.language-button').trigger('click');
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(true);
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 0));
|
|
||||||
|
|
||||||
const externalDiv = document.createElement('div');
|
|
||||||
document.body.appendChild(externalDiv);
|
|
||||||
|
|
||||||
const clickEvent = new MouseEvent('click', { bubbles: true });
|
|
||||||
externalDiv.dispatchEvent(clickEvent);
|
|
||||||
|
|
||||||
await wrapper.vm.$nextTick();
|
|
||||||
|
|
||||||
expect(wrapper.find('.language-dropdown').exists()).toBe(false);
|
|
||||||
|
|
||||||
wrapper.unmount();
|
|
||||||
externalDiv.remove();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -42,7 +42,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 18px var(--main-content-padding-x);
|
padding: 18px 40px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -73,8 +73,7 @@ const submitSearch = function () {
|
|||||||
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: calc(100% - var(--padding-left));
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-wrapper input {
|
.search-wrapper input {
|
||||||
@@ -84,7 +83,6 @@ const submitSearch = function () {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
|
height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
|
||||||
padding-left: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-button {
|
.search-button {
|
||||||
|
|||||||
@@ -53,6 +53,10 @@ limitations under the License.
|
|||||||
* @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
|
* @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} SettingsConfig
|
||||||
|
* @property {SettingConfigEntry[]} contents
|
||||||
|
*/
|
||||||
/**
|
/**
|
||||||
* @typedef {{ type: 'bool', name: string, i18n: string, description?: string, default: boolean }} BoolSettingConfig
|
* @typedef {{ type: 'bool', name: string, i18n: string, description?: string, default: boolean }} BoolSettingConfig
|
||||||
* @typedef {{ type: 'number', name: string, i18n: string, description?: string, default: number }} NumberSettingConfig
|
* @typedef {{ type: 'number', name: string, i18n: string, description?: string, default: number }} NumberSettingConfig
|
||||||
@@ -60,6 +64,5 @@ limitations under the License.
|
|||||||
* @typedef {{ type: 'selection', name: string, i18n: string, description?: string, default: string | string[], allowMultiple?: boolean, options: SelectionOption[] }} SelectionSettingConfig
|
* @typedef {{ type: 'selection', name: string, i18n: string, description?: string, default: string | string[], allowMultiple?: boolean, options: SelectionOption[] }} SelectionSettingConfig
|
||||||
* @typedef {{ type: 'section', name: string, i18n?: string, description?: string, content: SettingConfigEntry[] }} SectionSettingConfig
|
* @typedef {{ type: 'section', name: string, i18n?: string, description?: string, content: SettingConfigEntry[] }} SectionSettingConfig
|
||||||
* @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
|
* @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
|
||||||
* @typedef {{ contents: SettingConfigEntry[] }} FirstLevelSettingConfigEntry
|
* @typedef {{ contents: SettingConfigEntry[] }} SettingsConfig
|
||||||
* @typedef {{ contents: FirstLevelSettingConfigEntry[] }} SettingsConfig
|
|
||||||
*/
|
*/
|
||||||
@@ -33,6 +33,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
{ raw: {
|
{ raw: {
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'general',
|
name: 'general',
|
||||||
i18n: 'settings.settings.general',
|
i18n: 'settings.settings.general',
|
||||||
content: [
|
content: [
|
||||||
@@ -48,6 +49,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
{ raw: {
|
{ raw: {
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'general',
|
name: 'general',
|
||||||
i18n: 'settings.settings.general',
|
i18n: 'settings.settings.general',
|
||||||
content: [
|
content: [
|
||||||
@@ -59,6 +61,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'copyOfGeneral',
|
name: 'copyOfGeneral',
|
||||||
i18n: 'settings.settings.copyOfGeneral',
|
i18n: 'settings.settings.copyOfGeneral',
|
||||||
content: [
|
content: [
|
||||||
@@ -74,6 +77,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
{ raw: {
|
{ raw: {
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'general',
|
name: 'general',
|
||||||
i18n: 'settings.settings.general',
|
i18n: 'settings.settings.general',
|
||||||
content: [
|
content: [
|
||||||
@@ -85,6 +89,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'copyOfGeneral',
|
name: 'copyOfGeneral',
|
||||||
i18n: 'settings.settings.copyOfGeneral',
|
i18n: 'settings.settings.copyOfGeneral',
|
||||||
content: [
|
content: [
|
||||||
@@ -97,6 +102,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'aSection',
|
name: 'aSection',
|
||||||
i18n: 'settings.settings.aSection',
|
i18n: 'settings.settings.aSection',
|
||||||
content: [
|
content: [
|
||||||
@@ -135,6 +141,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
{ raw: {
|
{ raw: {
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'general',
|
name: 'general',
|
||||||
i18n: 'settings.settings.general',
|
i18n: 'settings.settings.general',
|
||||||
content: [
|
content: [
|
||||||
@@ -146,6 +153,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'copyOfGeneral',
|
name: 'copyOfGeneral',
|
||||||
i18n: 'settings.settings.copyOfGeneral',
|
i18n: 'settings.settings.copyOfGeneral',
|
||||||
content: [
|
content: [
|
||||||
@@ -158,6 +166,7 @@ describe('validateSettingsConfig', () => {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
type: 'section',
|
||||||
name: 'aSection',
|
name: 'aSection',
|
||||||
i18n: 'settings.settings.aSection',
|
i18n: 'settings.settings.aSection',
|
||||||
content: [
|
content: [
|
||||||
@@ -194,74 +203,6 @@ describe('validateSettingsConfig', () => {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
}, expected: true },
|
}, expected: true },
|
||||||
{ raw: {
|
|
||||||
contents: [
|
|
||||||
{
|
|
||||||
type: 'bool',
|
|
||||||
name: 'aStandaloneBooleanSetting',
|
|
||||||
i18n: 'settings.settings.aStandaloneBooleanSetting',
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'general',
|
|
||||||
i18n: 'settings.settings.general',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'bool',
|
|
||||||
name: 'Enable feature 42',
|
|
||||||
i18n: 'settings.settings.general.enableFeature42'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'copyOfGeneral',
|
|
||||||
i18n: 'settings.settings.copyOfGeneral',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'bool',
|
|
||||||
name: 'Enable feature 42',
|
|
||||||
default: false,
|
|
||||||
i18n: 'settings.settings.general.enableFeature42'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'aSection',
|
|
||||||
i18n: 'settings.settings.aSection',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'bool',
|
|
||||||
name: 'Enable feature 43',
|
|
||||||
i18n: 'settings.settings.aSection.enableFeature43'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'selection',
|
|
||||||
name: 'language',
|
|
||||||
i18n: 'settings.settings.aSection.language.label',
|
|
||||||
default: 'en',
|
|
||||||
allowMultiple: false,
|
|
||||||
options: [
|
|
||||||
{ name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
|
|
||||||
{ name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'section',
|
|
||||||
name: 'section2',
|
|
||||||
i18n: 'settings.settings.aSection.section2.label',
|
|
||||||
content: [
|
|
||||||
{
|
|
||||||
type: 'string',
|
|
||||||
name: 'string',
|
|
||||||
i18n: 'settings.settings.aSection.sections.string',
|
|
||||||
default: 'str'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}, expected: false },
|
|
||||||
{ raw: {
|
{ raw: {
|
||||||
contents: [
|
contents: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -83,19 +83,6 @@ export const validateEntry = function validateEntry (entry, path) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const validateFirstLevelSection = function validateFirstLevelSection (section, path) {
|
|
||||||
assertString(section.name);
|
|
||||||
assertString(section.i18n);
|
|
||||||
|
|
||||||
if (!Array.isArray(section.content)) {
|
|
||||||
throw new Error(`[settings] "${path}.content" must be an array`);
|
|
||||||
};
|
|
||||||
|
|
||||||
section.content.forEach((entry, i) =>
|
|
||||||
validateEntry(entry, `${path}.content[${i}]`)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Validates a raw settings config object.
|
* Validates a raw settings config object.
|
||||||
* @param {unknown} raw
|
* @param {unknown} raw
|
||||||
@@ -110,7 +97,7 @@ export 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}]`)
|
validateEntry(entry, `contents[${i}]`)
|
||||||
);
|
);
|
||||||
return { valid: true, config: raw };
|
return { valid: true, config: raw };
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
+3
-6
@@ -16,18 +16,15 @@ limitations under the License.
|
|||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import { i18n, loadLanguage } from './i18n'
|
import { i18n, loadLanguage } from './i18n';
|
||||||
import getCurrentLanguage from './utils/currentLanguage'
|
import getCurrentLanguage from './utils/currentLanguage';
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
||||||
import './styles/common.css'
|
import './styles/common.css'
|
||||||
import './styles/variables/colors.css'
|
import './styles/variables/colors.css'
|
||||||
|
|
||||||
(async () => {
|
await loadLanguage(getCurrentLanguage());
|
||||||
await loadLanguage(getCurrentLanguage())
|
|
||||||
|
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(router)
|
.use(router)
|
||||||
.use(i18n)
|
.use(i18n)
|
||||||
.mount('#app')
|
.mount('#app')
|
||||||
})()
|
|
||||||
@@ -43,7 +43,7 @@ const { t } = useI18n();
|
|||||||
.error-message{
|
.error-message{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.75rem;
|
font-size: 2vw;
|
||||||
}
|
}
|
||||||
#link {
|
#link {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -68,9 +68,8 @@ const submitSearch = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.slogan{
|
.slogan{
|
||||||
margin-top: 1rem;
|
margin: 0;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
|
|||||||
Reference in New Issue
Block a user