diff --git a/.gitignore b/.gitignore index 2bb9842..a01c5e9 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,3 @@ node_modules .idea/ *.log public/assets/fonts -/.vscode/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..d066795 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,13 @@ +{ + "recommendations": [ + "antfu.iconify", + "antfu.unocss", + "antfu.vite", + "antfu.goto-alias", + "csstools.postcss", + "dbaeumer.vscode-eslint", + "vue.volar", + "lokalise.i18n-ally", + "streetsidesoftware.code-spell-checker" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3aac95e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,47 @@ +{ + "cSpell.words": ["Vite", "unocss", "vueuse", "vitejs"], + "i18n-ally.sourceLanguage": "en", + "i18n-ally.keystyle": "nested", + "i18n-ally.localesPaths": "locales", + "i18n-ally.sortKeys": true, + + // Disable the default formatter + "prettier.enable": false, + "editor.formatOnSave": false, + + // Auto fix + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" + }, + + // Silent the stylistic rules in you IDE, but still auto fix them + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off" }, + { "rule": "format/*", "severity": "off" }, + { "rule": "*-indent", "severity": "off" }, + { "rule": "*-spacing", "severity": "off" }, + { "rule": "*-spaces", "severity": "off" }, + { "rule": "*-order", "severity": "off" }, + { "rule": "*-dangle", "severity": "off" }, + { "rule": "*-newline", "severity": "off" }, + { "rule": "*quotes", "severity": "off" }, + { "rule": "*semi", "severity": "off" } + ], + + // The following is optional. + // It's better to put under project setting `.vscode/settings.json` + // to avoid conflicts with working with different eslint configs + // that does not support all formats. + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "json", + "jsonc", + "yaml" + ] +} diff --git a/package.json b/package.json index a8f1f2b..9c5d932 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "@unocss/reset": "catalog:frontend", "@vueuse/core": "catalog:frontend", "nprogress": "catalog:frontend", - "pinia": "catalog:frontend", "vue": "catalog:frontend", "vue-i18n": "catalog:frontend", "vue-router": "catalog:frontend" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1889044..025eb5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,9 +104,6 @@ catalogs: nprogress: specifier: ^0.2.0 version: 0.2.0 - pinia: - specifier: ^3.0.1 - version: 3.0.4 vue: specifier: ^3.5.13 version: 3.5.30 @@ -145,9 +142,6 @@ importers: nprogress: specifier: catalog:frontend version: 0.2.0 - pinia: - specifier: catalog:frontend - version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)) vue: specifier: catalog:frontend version: 3.5.30(typescript@5.9.3) @@ -1808,9 +1802,6 @@ packages: '@vue/devtools-api@6.6.4': resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==} - '@vue/devtools-api@7.7.9': - resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==} - '@vue/devtools-core@7.7.9': resolution: {integrity: sha512-48jrBSwG4GVQRvVeeXn9p9+dlx+ISgasM7SxZZKczseohB0cBz+ITKr4YbLWjmJdy45UHL7UMPlR4Y0CWTRcSQ==} peerDependencies: @@ -3588,15 +3579,6 @@ packages: engines: {node: '>=0.10'} hasBin: true - pinia@3.0.4: - resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==} - peerDependencies: - typescript: '>=4.5.0' - vue: ^3.5.11 - peerDependenciesMeta: - typescript: - optional: true - pkg-types@1.3.1: resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==} @@ -6122,10 +6104,6 @@ snapshots: '@vue/devtools-api@6.6.4': {} - '@vue/devtools-api@7.7.9': - dependencies: - '@vue/devtools-kit': 7.7.9 - '@vue/devtools-core@7.7.9(vite@6.4.1(@types/node@25.4.0)(jiti@2.6.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.30(typescript@5.9.3))': dependencies: '@vue/devtools-kit': 7.7.9 @@ -8238,13 +8216,6 @@ snapshots: pidtree@0.6.0: {} - pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)): - dependencies: - '@vue/devtools-api': 7.7.9 - vue: 3.5.30(typescript@5.9.3) - optionalDependencies: - typescript: 5.9.3 - pkg-types@1.3.1: dependencies: confbox: 0.1.8 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 32c75e1..7bda9c4 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -42,7 +42,6 @@ catalogs: '@unocss/reset': ^66.1.0-beta.7 '@vueuse/core': ^13.0.0 nprogress: ^0.2.0 - pinia: ^3.0.1 vue: ^3.5.13 vue-i18n: ^11.1.2 vue-router: ^4.5.0 diff --git a/src/composables/useScrollbarWidth.ts b/src/composables/useScrollbarWidth.ts new file mode 100644 index 0000000..18e3073 --- /dev/null +++ b/src/composables/useScrollbarWidth.ts @@ -0,0 +1,38 @@ +// source code: https://github.com/vueuse/vueuse/issues/4262 +import type { Ref } from 'vue' +import { onMounted, onUnmounted, ref } from 'vue' + +// Calculates scrollbar width for an HTML element reactively. +// This is needed for gutter layout happening on Chrome & Opera. +export default function useScrollbarWidth( + elementRef: Ref, +): Ref { + const scrollbarWidth = ref(0) + let resizeObserver: ResizeObserver + + function calc() { + const scrollEl = elementRef.value! + scrollbarWidth.value = scrollEl.offsetWidth - scrollEl.clientWidth + } + + onMounted(() => { + const element = elementRef.value! + + // initial calculation + calc() + + // recalculate whenever window size or zoom level changes + window.addEventListener('resize', calc, false) + + // recalculate whenever element size changes + resizeObserver = new ResizeObserver(calc) + resizeObserver.observe(element) + }) + + onUnmounted(() => { + window.removeEventListener('resize', calc) + resizeObserver.disconnect() + }) + + return scrollbarWidth +} diff --git a/src/keys/scroll.ts b/src/keys/scroll.ts index 14ebb46..c990784 100644 --- a/src/keys/scroll.ts +++ b/src/keys/scroll.ts @@ -1,3 +1,10 @@ import type { UseScrollReturn } from '@vueuse/core' +interface ScrollbarWidthCtx { + // uses MaybeRef for injector default value + scrollbarWidth: MaybeRef + setScrollbarWidth: (value: number) => void +} + export const scrollKey: InjectionKey = Symbol('kei-chan is injecting scrolling') +export const scrollbarWidthKey: InjectionKey = Symbol('kei-chan is injecting scrollbar width') diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 3ffd7cf..4e70718 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -1,16 +1,17 @@