Merge pull request #341 from vuejs-jp/enhance/eslint-lint-fix

Enhance/eslint lint fix

Author: jiyuujin

apps/web/.eslintrc.cjs

@@ -23,6 +23,8 @@ module.exports = {
           'privacy',
           'register',
           'share',
+          'sharemap',
+          'tokusho',
           'users',
           '[id]',
         ],

apps/web/app/components/admin/AttendeeList.vue

@@ -95,7 +95,7 @@ const handleConfirm = (attendee?: Attendee) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminAttendeeItem :attendee="attendees.filter((s) => s.id === attendeeId)[0]" @close="handleDialog" />
   </VFDialog>
 </template>

apps/web/app/components/admin/JobList.vue

@@ -62,7 +62,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminJobItem
       :job="jobs.filter((s) => s.id === jobId)[0]"
       :sponsors

apps/web/app/components/admin/Page.vue

@@ -115,7 +115,7 @@ const pageText = props.page.replace(/^[a-z]/g, function (val) {
       <AdminStaffList :staffs="staffs?.data" />
       <AdminAdminUserList :admin-users="adminUsers?.data" />
     </div>
-    <VFDialog v-if="showDialog">
+    <VFDialog v-if="showDialog" open>
       <AdminSpeakerItem v-if="page === 'speaker'" @close="handleDialog" />
       <AdminSponsorItem v-if="page === 'sponsor'" :speakers="speakers?.data" @close="handleDialog" />
       <AdminJobItem v-if="page === 'job'" :sponsors="sponsors?.data" @close="handleDialog" />

apps/web/app/components/admin/SpeakerList.vue

@@ -95,7 +95,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminSpeakerItem :speaker="speakers.filter((s) => s.id === speakerId)[0]" @close="handleDialog" />
   </VFDialog>
 </template>

apps/web/app/components/admin/SponsorList.vue

@@ -101,7 +101,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminSponsorItem
       :sponsor="sponsors.filter((s) => s.id === sponsorId)[0]"
       :speakers="speakers"

apps/web/app/components/admin/StaffList.vue

@@ -74,7 +74,7 @@ const handleDialog = (id?: string) => {
       </td>
     </tr>
   </table>
-  <VFDialog v-if="showDialog">
+  <VFDialog v-if="showDialog" open>
     <AdminStaffItem
       :staff="staffs.filter((s) => s.id === staffId)[0]"
       @close="handleDialog"

apps/web/app/composables/useInvitation.ts

@@ -17,6 +17,7 @@ export function useInvitation() {
   })
 
   async function publish(type: 'invite' | 'delete', target: string) {
+    // eslint-disable-next-line no-undef
     await $fetch(`/api/${type}-user`, {
       method: 'post',
       headers: {

apps/web/app/server/api/speakers.get.ts

@@ -1,4 +1,5 @@
 import db from '../db'
+import { useRuntimeConfig } from '#imports'
 import { defineEventHandler } from 'h3'
 import type { PanelerInfo, Speaker, SpeakerInfo } from '@vuejs-jp/model'
 import { serverSupabaseClient } from '#supabase/server'

apps/web/app/server/api/sponsors.get.ts

@@ -1,4 +1,5 @@
 import db from '../db'
+import { useRuntimeConfig } from '#imports'
 import { defineEventHandler } from 'h3'
 import type { Sponsor, SponsorInfo } from '@vuejs-jp/model'
 import { serverSupabaseClient } from '#supabase/server'

apps/web/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
+import { defineNuxtConfig } from 'nuxt/config'
 import svgLoader from 'vite-svg-loader'
 import { conferenceTitle } from './app/utils/constants'
 import { generalOg, twitterOg } from './app/utils/og.constants'

packages/eslint-config/base.js

@@ -1,4 +1,5 @@
 module.exports = {
+  env: { browser: true, jest: true, node: true },
   extends: [
     'eslint:recommended',
     'eslint-config-turbo',
@@ -9,6 +10,7 @@ module.exports = {
     parser: '@typescript-eslint/parser',
   },
   rules: {
+    'no-unused-vars': 'off',
     quotes: ['error', 'single', { avoidEscape: true }],
     semi: ['error', 'never'],
     'object-curly-spacing': ['error', 'always'],

packages/ui/.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
           'Avatar',
           'Button',
           'Comment',
+          'Credit',
           'Date',
           'Dialog',
           'Header',
@@ -23,9 +24,19 @@ module.exports = {
           'Tag',
           'Time',
           'Title',
+          'Track',
           'Typography',
         ],
       },
     ],
-  }
+    'vuejs-accessibility/label-has-for': [
+      'error',
+      {
+        'required': {
+          'some': ['nesting', 'id'],
+        },
+        'allowChildren': false,
+      },
+    ],
+  },
 }

packages/ui/components/common/Comment.vue

@@ -33,13 +33,8 @@ onMounted(() => {
 
 <template>
   <p class="comment">
-    <span
-      class="comment-main"
-      :style="{
-        '--main-color': textColor(color),
-      }"
-      v-html="titleText"
-    />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span class="comment-main" :style="{ '--main-color': textColor(color) }" v-html="titleText" />
   </p>
 </template>
 

packages/ui/components/common/CssResetButton.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="ButtonHTMLAttributes">
+// eslint-disable-next-line vue/valid-define-props
 const props = defineProps()
 </script>
 

packages/ui/components/common/Dialog.stories.ts

@@ -6,6 +6,7 @@ export default {
   component: Dialog,
   args: {
     default: '<strong>Go!</strong>',
+    open: true,
   },
   argTypes: {
     default: {

packages/ui/components/common/Dialog.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 type Props = {
-  arialabel?: string
-  ariaModal?: boolean
+  open: boolean
+}
+const props = defineProps<Props>()
+
+const dialog = ref<HTMLDialogElement>()
+const visible = ref(props.open)
+
+const showModal = () => {
+  dialog.value?.showModal()
+  visible.value = true
 }
-withDefaults(defineProps<Props>(), {
-  arialabel: '',
-  ariaModal: false,
+
+defineExpose({
+  show: showModal,
+  close: (returnVal?: string): void => dialog.value?.close(returnVal),
+  visible,
 })
 </script>
+
 <template>
-  <div class="mask" @click="$emit('on-close')">
-    <div
-      role="dialog"
-      class="root"
-      :aria-label="arialabel"
-      :aria-modal="ariaModal"
-      @click="(e) => e.stopPropagation()"
-    >
+  <dialog ref="dialog" :open class="mask">
+    <form v-if="visible" method="dialog" class="root">
       <slot />
-    </div>
-  </div>
+    </form>
+  </dialog>
 </template>
 
 <style scoped>

packages/ui/components/date/Date.vue

@@ -11,6 +11,9 @@ export type DateProps = {
 }
 
 withDefaults(defineProps<DateProps>(), {
+  prefixYear: '',
+  suffixYear: '',
+  dayOfWeek: '',
   color: 'vue-blue',
 })
 

packages/ui/components/event/EventFrame.vue

@@ -26,6 +26,7 @@ onMounted(function () {
 <template>
   <div class="event-frame-root">
     <div class="event-frame-content" :class="paddingClass">
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <h3 :id="id" :class="fontClass" v-html="titleText" />
       <slot name="content" />
     </div>

packages/ui/components/namecard/IntegrationDialog.vue

@@ -17,7 +17,7 @@ function handleLinkButton(provider: Extract<AuthProvider, 'github' | 'google'>)
 </script>
 
 <template>
-  <Dialog :aria-label="title" :aria-modal="true" @on-close="$emit('on-close')">
+  <Dialog open>
     <div class="dialog-container">
       <h3 class="dialog-title">{{ title }}</h3>
       <slot />