-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rewrite the router navigation guard. Convert Vue SFC to script setup syntax. Convert Book Vue SFC to script setup syntax. Convert Dialog Vue SFC to script setup syntax. Add Prettier. Lint the files with ESLint and Prettier. Convert Prettier file to JavaScript. Undo hiding the loading indicator. Update dependencies. Fix empty header in search dialog on mobile. Fix dialogs wrong z-order in sm breakpoint. Increase filter dialog height in mobile. Add missing fade transitions and fix imports. Show header anchors on focus too. Bump the version to release.
- Loading branch information
1 parent
664d4f5
commit 36099b7
Showing
176 changed files
with
8,877 additions
and
9,601 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,28 @@ | ||
| module.exports = { | ||
| root: true, | ||
| plugins: ['jest'], | ||
| plugins: ['jest', 'prettier'], | ||
| env: { | ||
| browser: true, | ||
| node: true, | ||
| 'jest/globals': true | ||
| }, | ||
| extends: [ | ||
| 'plugin:vue/vue3-essential', | ||
| '@vue/standard' | ||
| ], | ||
| extends: ['plugin:vue/vue3-essential', 'prettier'], | ||
| parser: 'vue-eslint-parser', | ||
| parserOptions: { | ||
| parser: '@babel/eslint-parser' | ||
| }, | ||
| rules: { | ||
| 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | ||
| 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', | ||
| 'vue/multi-word-component-names': 'off' | ||
| 'vue/multi-word-component-names': 'off', | ||
| 'prettier/prettier': [ | ||
| 'warn', | ||
| { | ||
| semi: false, | ||
| printWidth: 80, | ||
| singleQuote: true, | ||
| trailingComma: 'none' | ||
| } | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| #!/bin/sh | ||
| . "$(dirname "$0")/_/husky.sh" | ||
|
|
||
| npm run lint | ||
| npm run test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| module.exports = { | ||
| printWidth: 80, | ||
| singleQuote: true, | ||
| trailingComma: 'never' | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,110 +1,89 @@ | ||
| <script setup> | ||
| import { computed, nextTick, ref, watch } from 'vue' | ||
| import { useRoute } from 'vue-router' | ||
| import { useI18n } from 'vue-i18n' | ||
| import { useAuthStore } from './stores/auth' | ||
| import { useStore } from '@/stores/main' | ||
| import FadeTransition from '@/components/transitions/FadeTransition.vue' | ||
| import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue' | ||
| import ReloadDialog from '@/components/dialogs/ReloadDialog.vue' | ||
| const authStore = useAuthStore() | ||
| const mainStore = useStore() | ||
| const { t, locale } = useI18n({ useScope: 'global' }) | ||
| const authStarted = computed(() => authStore.started) | ||
| const hasCriticalError = computed(() => mainStore.hasCriticalError) | ||
| const route = useRoute() | ||
| const jumpToMain = ref(null) | ||
| const navigationHelpText = ref('') | ||
| const appStarted = ref(false) | ||
| function focusOnJumpLink() { | ||
| if (jumpToMain.value && appStarted.value) { | ||
| jumpToMain.value.focus() | ||
| appStarted.value = true | ||
| } | ||
| } | ||
| function changeNavigationHelpText(pageTitle) { | ||
| navigationHelpText.value = t('a11y.pageChanged', { pageTitle }) | ||
| } | ||
| watch( | ||
| () => route.fullPath, | ||
| () => { | ||
| nextTick(() => { | ||
| setTimeout(() => { | ||
| changeNavigationHelpText(route.meta.title()) | ||
| focusOnJumpLink() | ||
| }, 500) | ||
| }) | ||
| } | ||
| ) | ||
| watch(locale, (newLocale) => { | ||
| document.title = route.meta.title() + ' | ' + t('app.name') | ||
| document.documentElement.lang = newLocale | ||
| localStorage.setItem('locale', newLocale) | ||
| }) | ||
| const showLoadingIndicator = computed(() => { | ||
| return !authStarted.value && !hasCriticalError.value | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <transition | ||
| leave-active-class="transition motion-reduce:transition-none duration-200 ease-in" | ||
| leave-from-class="opacity-100" | ||
| leave-to-class="opacity-0" | ||
| enter-active-class="transition motion-reduce:transition-none duration-200 ease-out" | ||
| enter-from-class="opacity-0" | ||
| enter-to-class="opacity-100" | ||
| > | ||
| <FadeTransition> | ||
| <div | ||
| v-if="!authStarted && !hasCriticalError" | ||
| v-if="showLoadingIndicator" | ||
| class="z-50 absolute w-full h-full flex flex-col justify-center items-center bg-opacity-90 bg-gray-100 dark:bg-gray-900" | ||
| > | ||
| <span aria-hidden="true"> | ||
| <LoadingSpinIcon class="motion-safe:animate-spin h-10 w-10 mx-auto text-primary-500" aria-hidden="true" /> | ||
| <LoadingSpinIcon | ||
| class="motion-safe:animate-spin h-10 w-10 mx-auto text-primary-500" | ||
| aria-hidden="true" | ||
| /> | ||
| </span> | ||
| <p class="font-display font-medium sm:text-lg mt-6 dark:text-gray-200"> | ||
| {{ t('app.starting') }} | ||
| </p> | ||
| </div> | ||
| </transition> | ||
| </FadeTransition> | ||
| <a href="#main-content" class="jump-to" ref="jumpToMain"> | ||
| {{ t('a11y.jumpToMain') }} | ||
| </a> | ||
| <p class="sr-only" aria-live="polite" aria-hidden="true"> | ||
| {{ navigationHelpText }} | ||
| </p> | ||
| <router-view v-slot="{ Component }"> | ||
| <transition | ||
| mode="out-in" | ||
| enter-active-class="transition motion-reduce:transition-none duration-500 ease-out" | ||
| enter-from-class="opacity-0" | ||
| enter-to-class="opacity-100 " | ||
| leave-active-class="transition motion-reduce:transition-none duration-300 ease-in" | ||
| leave-from-class="opacity-100" | ||
| leave-to-class="opacity-0" | ||
| > | ||
| <FadeTransition> | ||
| <component :is="Component" /> | ||
| </transition> | ||
| </FadeTransition> | ||
| </router-view> | ||
|
|
||
| <ReloadDialog /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { computed, nextTick, ref, watch } from 'vue' | ||
| import { useRoute } from 'vue-router' | ||
| import { useI18n } from 'vue-i18n' | ||
| import { useAuthStore } from './stores/auth' | ||
| import { useStore } from '@/stores/main' | ||
| import LoadingSpinIcon from '@/components/icons/LoadingSpinIcon.vue' | ||
| import ReloadDialog from '@/components/dialogs/ReloadDialog.vue' | ||
| export default { | ||
| components: { | ||
| LoadingSpinIcon, | ||
| ReloadDialog | ||
| }, | ||
| setup () { | ||
| const authStore = useAuthStore() | ||
| const mainStore = useStore() | ||
| const { t, locale } = useI18n({ useScope: 'global' }) | ||
| const authStarted = computed(() => authStore.started) | ||
| const hasCriticalError = computed(() => mainStore.hasCriticalError) | ||
| const route = useRoute() | ||
| const jumpToMain = ref(null) | ||
| const navigationHelpText = ref('') | ||
| const appStarted = ref(false) | ||
| function focusOnJumpLink () { | ||
| if (jumpToMain.value && appStarted.value) { | ||
| jumpToMain.value.focus() | ||
| appStarted.value = true | ||
| } | ||
| } | ||
| function changeNavigationHelpText (pageTitle) { | ||
| navigationHelpText.value = t('a11y.pageChanged', { pageTitle }) | ||
| } | ||
| watch(() => route.fullPath, () => { | ||
| nextTick(() => { | ||
| setTimeout(() => { | ||
| changeNavigationHelpText(route.meta.title()) | ||
| focusOnJumpLink() | ||
| }, 500) | ||
| }) | ||
| }) | ||
| watch(locale, newLocale => { | ||
| document.title = route.meta.title() + ' | ' + t('app.name') | ||
| document.documentElement.lang = newLocale | ||
| localStorage.setItem('locale', newLocale) | ||
| }) | ||
| return { | ||
| authStarted, | ||
| hasCriticalError, | ||
| jumpToMain, | ||
| navigationHelpText, | ||
| t | ||
| } | ||
| } | ||
| } | ||
| </script> |
Oops, something went wrong.