Update all dependencies.

.eslintrc-auto-import.json

@@ -109,6 +109,18 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "toValue": true
   }
-}
+}

.github/ISSUE_TEMPLATE/report_issue.yml

@@ -1,6 +1,6 @@
 name: Issue report
 description: File a issue report for the application.
-labels: ['bug']
+labels: [bug]
 body:
   - type: input
     id: version

.github/ISSUE_TEMPLATE/request_feature.yml

@@ -1,6 +1,6 @@
 name: Feature request
 description: Suggest a feature to improve the application
-labels: ['enhancement']
+labels: [enhancement]
 body:
   - type: textarea
     id: feature-description
@@ -29,4 +29,4 @@ body:
         - label: I have written a short but informative title.
           required: true
         - label: I filled out all the requested information in this form.
-          required: true
+          required: true

.github/workflows/tests.yml

@@ -2,13 +2,13 @@ name: Tests
 
 on:
   push:
-    branches: 
+    branches:
       - main
       - stable
     paths-ignore:
       - '**.md'
   pull_request:
-    branches: 
+    branches:
       - main
 
 jobs:
@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: 20.x
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   printWidth: 80,
   singleQuote: true,
-  trailingComma: 'never'
+  trailingComma: 'never',
 }

.storybook/main.js

@@ -10,21 +10,21 @@ module.exports = {
       name: '@storybook/addon-postcss',
       options: {
         postcssLoaderOptions: {
-          implementation: require('postcss')
-        }
-      }
-    }
+          implementation: require('postcss'),
+        },
+      },
+    },
   ],
   framework: {
-    name: '@storybook/vue3-vite'
+    name: '@storybook/vue3-vite',
   },
   core: {
-    builder: '@storybook/builder-vite'
+    builder: '@storybook/builder-vite',
   },
   features: {
-    storyStoreV7: true
+    storyStoreV7: true,
   },
   docsPage: {
-    docs: 'automatic'
-  }
+    docs: 'automatic',
+  },
 }

.storybook/preview.js

@@ -11,9 +11,9 @@ const MockedRouterLink = defineComponent({
   methods: {
     log() {
       action('onNavigate')(this.to)
-    }
+    },
   },
-  template: '<a class="cursor-pointer" @click="log()"><slot/></a>'
+  template: '<a class="cursor-pointer" @click="log()"><slot/></a>',
 })
 
 setup((app) => {
@@ -30,14 +30,14 @@ export const globalTypes = {
       icon: 'globe',
       items: [
         { value: 'en-US', right: '🇺🇸', title: 'English' },
-        { value: 'pt-BR', right: '🇧🇷', title: 'Português (Brasil)' }
+        { value: 'pt-BR', right: '🇧🇷', title: 'Português (Brasil)' },
       ],
     },
   },
 }
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: { disable: true },
   controls: {
     matchers: {
@@ -50,32 +50,36 @@ export const parameters = {
     classTarget: 'html',
     stylePreview: true,
     dark: themes.dark,
-    light: themes.light
-  }
+    light: themes.light,
+  },
 }
 
-const withThemeProvider = (story) => ({
-  components: { story },
-  setup: () => {
-    onMounted(() => {
-      document.documentElement.style.height = '100vh'
+function withThemeProvider(story) {
+  return {
+    components: { story },
+    setup: () => {
+      onMounted(() => {
+        document.documentElement.style.height = '100vh'
 
-      const style = document.createElement('style')
-      style.textContent = 'html.dark { background-color: #0f172a; }'
-      document.head.appendChild(style)
-    })
-  },
-  template: `<story />`
-})
+        const style = document.createElement('style')
+        style.textContent = 'html.dark { background-color: #0f172a; }'
+        document.head.appendChild(style)
+      })
+    },
+    template: `<story />`,
+  }
+}
 
-const withLocaleProvider = (story, context) => ({
-  components: { story },
-  setup: () => {
-    const { locale } = useI18n()
+function withLocaleProvider(story, context) {
+  return {
+    components: { story },
+    setup: () => {
+      const { locale } = useI18n()
 
-    locale.value = context.globals.locale
-  },
-  template: `<story />`
-})
+      locale.value = context.globals.locale
+    },
+    template: `<story />`,
+  }
+}
 
 export const decorators = [withThemeProvider, withLocaleProvider]

README.md

@@ -1,9 +1,9 @@
 # Toshokan
 
-Toshokan is a progressive web app on top of Google Sheets written 
+Toshokan is a progressive web app on top of Google Sheets written
 in Vue.
 
-It compiles in a static HTML that works great on mobile and can 
+It compiles in a static HTML that works great on mobile and can
 be deployed anywhere.
 
 <p align="center">
@@ -29,16 +29,15 @@ static HTML under a custom domain with support to HTTPS.
 2. Don't rename it. It should be named `Toshokan`.
 3. Clone this repo, install the dependencies, setup the variables in `.env`
    and build the app.
-   
+
    ```console
    $ yarn install && yarn build
    ```
 4. Copy the content of `build` folder to your server.
-5. That's it! You can start adding books now. 
+5. That's it! You can start adding books now.
 
 ## License
 
 > You can check out the full license [here](LICENSE).
 
 This repository is licensed under the terms of the **MIT** license.
-

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' }, modules: 'auto' }]
-  ]
+    ['@babel/preset-env', { targets: { node: 'current' }, modules: 'auto' }],
+  ],
 }

docs/en-US/1.guide/1.instructions.md

@@ -25,7 +25,7 @@ Before the first use, you have to create the spreadsheet
 file in your Google Drive that will store your collection information.
 
 - Sign in with your Google Account at the [Google Drive] website.
-- Access [this sheet] and create a copy by clicking on 
+- Access [this sheet] and create a copy by clicking on
   **File → Make a copy**.
 - **Do not rename the file**, it should be named **Toshokan**.
 

docs/en-US/1.guide/2.searching.md

@@ -29,7 +29,7 @@ in the next section.
 ## Advanced mode
 
 The search in advanced mode allows you to specify which fields
-you want the query to be search, and even use some additional 
+you want the query to be search, and even use some additional
 time filters.
 
 The syntax is the same used in many other apps, such as Twitter or Discord.
@@ -110,4 +110,4 @@ that **does not have** the "tokyopop" match in the publisher field.
   are in the "novels" group.
 
 `group:manga -publisher:tokyopop`
-: Books in the "manga" group **and** aren't from the "tokyopop" publisher.
+: Books in the "manga" group **and** aren't from the "tokyopop" publisher.

docs/en-US/2.general/1.about.md

@@ -22,7 +22,7 @@ manga and comic books collection management websites and apps, such as:
 
 There also weren't any good tool (offline-based or not) that allowed the user
 to have full control over their collection data. Since none of the existing
-and well-populated database websites have an public API, the project would 
+and well-populated database websites have an public API, the project would
 need to depend on manual field filling, but that's a minor issue if you
 take in consideration the advantage of being the owner of your collection data.
 
@@ -82,11 +82,11 @@ We appreciate it!
 ## Business sponsoring
 
 If you have a business related to manga, comics or books (such as an store,
-for example) and want to sponsor the project monthly, please open an issue 
+for example) and want to sponsor the project monthly, please open an issue
 in our [GitHub repository] about it so we can discuss.
 
 By sponsoring the project, your logo will be included in the `README.md`
-file and in the front page and sidebars of the help center, depending 
+file and in the front page and sidebars of the help center, depending
 on plan choosed.
 
 We still haven't stablished the available plans, but please keep checking

docs/en-US/2.general/2.accessibility.md

@@ -89,4 +89,4 @@ If you find some issue during the access or some wrong implementation
 of an accessibility feature, please report it at the [repository
 on GitHub].
 
-[repository on GitHub]: https://github.com/alessandrojean/toshokan/issues/new/choose
+[repository on GitHub]: https://github.com/alessandrojean/toshokan/issues/new/choose

docs/pt-BR/1.guide/2.searching.md

@@ -116,5 +116,5 @@ da editora.
   sejam do grupo "novels".
 
 `grupo:mangás -editora:panini`
-: Livros que sejam do grupo "mangás" **e** não 
-  sejam da editora "panini".
+: Livros que sejam do grupo "mangás" **e** não
+  sejam da editora "panini".

docs/pt-BR/2.general/1.about.md

@@ -21,7 +21,7 @@ gerenciamento de coleção de mangás e quadrinhos, tais como:
 - Sem suporte para marcar como lido e histórico de leitura.
 
 Também não existia nenhum utilitário (_offline_ ou não) que permitia que
-o usuário tivesse total controle sobre os dados de sua coleção. Já que 
+o usuário tivesse total controle sobre os dados de sua coleção. Já que
 nenhum dos sites banco de dados existentes tem uma API pública, o projeto
 teria que depender em preenchimento manual, mas isto é um problema ínfimo
 levando em consideração a vantagem de realmente ser o dono dos seus dados.

eslint.config.js

@@ -0,0 +1,28 @@
+import process from 'node:process'
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  ignores: [
+    '*.md',
+    '.vscode/**',
+    '.husky/**',
+    'dist/**',
+    'node_modules/**',
+    '.netlify/**',
+  ],
+
+  typescript: true,
+  vue: true,
+
+  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/custom-event-name-casing': 'off',
+    'vue/prefer-separate-static-class': 'off',
+    'vue/no-dupe-keys': 'off',
+    'vue/no-extra-parens': 'off',
+    'style/brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    'curly': ['error', 'all'],
+  },
+})

index.html

@@ -34,7 +34,7 @@
   <body>
     <noscript>
       <strong>
-        Pedimos desculpas, mas o <%= htmlWebpackPlugin.options.title %> não funciona corretamente com o JavaScript desabilitado. Por favor, habilite-o para continuar.
+        Pedimos desculpas, mas o Toshokan não funciona corretamente com o JavaScript desabilitado. Por favor, habilite-o para continuar.
       </strong>
     </noscript>
     <div id="app"></div>