Merge pull request #53 from miyaoka/refactor-class

refactor: classでtemplate literalを使わないようにする

src/components/menu/LiveFilterButton.vue

@@ -15,10 +15,18 @@ const hasLiveEvents = computed(() => eventListStore.onLiveEventList.length > 0);
     @click="searchStore.toggleLiveOnly"
   >
     <i
-      :class="`size-8 ${searchStore.isLiveOnly ? 'text-red-700 i-eva-radio-fill' : 'i-eva-radio-outline'}`"
+      class="size-8"
+      :class="{
+        'i-eva-radio-fill text-red-700': searchStore.isLiveOnly,
+        'i-eva-radio-outline': !searchStore.isLiveOnly,
+      }"
     />
     <p
-      :class="`absolute ${hasLiveEvents ? 'bg-red-700' : 'bg-gray-700'} -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs text-white`"
+      class="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl bg-red-700 px-1 text-xs text-white"
+      :class="{
+        'bg-red-700': hasLiveEvents,
+        'bg-gray-700': !hasLiveEvents,
+      }"
     >
       {{ eventListStore.onLiveEventList.length }}
     </p>

src/components/menu/MultiSelectButton.vue

@@ -7,13 +7,19 @@ const focusStore = useFocusStore();
 <template>
   <button
     class="relative flex size-11 items-center justify-center rounded-full border shadow-md"
-    :class="`${focusStore.isMultiSelectMode ? 'bg-green-600 text-white' : 'bg-white text-black'}`"
+    :class="{
+      'bg-green-600 text-white': focusStore.isMultiSelectMode,
+      'bg-white text-black': !focusStore.isMultiSelectMode,
+    }"
     title="multiple select"
     @click="focusStore.toggleMultiSelectMode"
   >
     <i
       class="size-8"
-      :class="`${focusStore.isMultiSelectMode ? 'i-mdi-checkbox-multiple-marked-outline' : ' i-mdi-checkbox-multiple-outline'}`"
+      :class="{
+        'i-mdi-checkbox-multiple-marked-outline': focusStore.isMultiSelectMode,
+        'i-mdi-checkbox-multiple-outline': !focusStore.isMultiSelectMode,
+      }"
     />
   </button>
 </template>

src/components/menu/SearchFilter.vue

@@ -65,7 +65,11 @@ watch(
   >
     <form
       @submit.prevent="onSubmit"
-      :class="`h-full transition-[width] ${isInput ? 'w-56' : 'w-0'}`"
+      class="h-full transition-[width]"
+      :class="{
+        'w-56': isInput,
+        'w-0': !isInput,
+      }"
     >
       <input
         class="size-full rounded-l-full p-2 pl-4"
@@ -81,7 +85,10 @@ watch(
       @mousedown="onMousedown"
       title="search"
     >
-      <i :class="`${isInput ? 'i-mdi-close' : 'i-mdi-search'} size-8 text-gray-800`" />
+      <i
+        class="size-8 text-gray-800"
+        :class="{ 'i-mdi-close': isInput, 'i-mdi-search': !isInput }"
+      />
     </button>
   </div>
 </template>

src/components/menu/addedEvent/AddedEventButton.vue

@@ -24,10 +24,16 @@ const unreadCount = computed(
     @click="popover.togglePopover"
     title="recently added events"
   >
-    <i :class="`${popover.isShow.value ? 'i-mdi-sparkles' : 'i-mdi-sparkles-outline'} size-8`" />
+    <i
+      class="size-8"
+      :class="{
+        'i-mdi-sparkles': popover.isShow.value,
+        'i-mdi-sparkles-outline': !popover.isShow.value,
+      }"
+    />
     <p
       v-if="unreadCount > 0"
-      :class="`absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl bg-red-700 px-1 text-xs text-white`"
+      class="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl bg-red-700 px-1 text-xs text-white"
     >
       {{ unreadCount }}
     </p>

src/components/menu/bookmarkedEvent/BookmarkedEventButton.vue

@@ -32,10 +32,16 @@ const bookmarkCount = computed(() => bookmarkEventList.value.length);
     @click="popover.togglePopover"
     title="bookmarked events"
   >
-    <i :class="`${popover.isShow.value ? 'i-mdi-bookmark' : 'i-mdi-bookmark-outline'} size-8`" />
+    <i
+      class="size-8"
+      :class="{
+        'i-mdi-bookmark': popover.isShow.value,
+        'i-mdi-bookmark-outline': !popover.isShow.value,
+      }"
+    />
     <p
       v-if="bookmarkCount > 0"
-      :class="`absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl bg-red-700 px-1 text-xs text-white`"
+      class="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-xl bg-red-700 px-1 text-xs text-white"
     >
       {{ bookmarkCount }}
     </p>

src/components/menu/keywordList/KeywordListButton.vue

@@ -12,7 +12,11 @@ const popover = usePopover();
     title="popular keywords"
   >
     <i
-      :class="`${popover.isShow.value ? 'i-f7-ellipses-bubble-fill' : 'i-f7-ellipses-bubble'} size-8`"
+      class="size-8"
+      :class="{
+        'i-f7-ellipses-bubble-fill': popover.isShow.value,
+        'i-f7-ellipses-bubble': !popover.isShow.value,
+      }"
     />
   </button>
 

src/components/menu/keywordList/KeywordListPopover.vue

@@ -120,7 +120,13 @@ const selectedItem = computed(() => {
             :value="group"
             class="sr-only"
           />
-          <i :class="`${group === 'keyword' ? 'i-mdi-chat-outline' : 'i-mdi-hashtag'} size-4`" />
+          <i
+            class="size-4"
+            :class="{
+              'i-mdi-chat-outline': group === 'keyword',
+              'i-mdi-hashtag': group !== 'keyword',
+            }"
+          />
           <span>
             {{ group }}
           </span>

src/components/streams/LiverEventCard.vue

@@ -98,7 +98,12 @@ function setSearchString(str: string) {
   >
     <a :href="liverEvent.url" target="_blank" @click="onClickCard">
       <div
-        :class="`absolute left-0 z-10 flex flex-row items-center gap-1 ${isFinished ? 'bg-gray-300 text-gray-700' : liverEvent.isLive ? 'bg-red-600 text-white' : 'bg-gray-800 text-white'} -top-0 -translate-y-1/2 rounded-full px-2 font-bold shadow`"
+        class="absolute -top-0 left-0 z-10 flex -translate-y-1/2 flex-row items-center gap-1 rounded-full px-2 font-bold shadow"
+        :class="{
+          'bg-red-600 text-white': liverEvent.isLive,
+          'bg-gray-300 text-gray-700': isFinished,
+          'bg-gray-800 text-white': !liverEvent.isLive && !isFinished,
+        }"
       >
         <i v-if="liverEvent.isLive" class="i-mdi-play-circle size-5" />
         <span>{{ timeDisplay }}</span>
@@ -107,7 +112,7 @@ function setSearchString(str: string) {
             {{ `(${liveDurationLabel.fixed}h)` }}
           </span>
           <div class="flex items-center opacity-50">
-            <i v-for="time in liveDurationLabel.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
+            <i v-for="time in liveDurationLabel.count" :key="time" class="i-mdi-clock size-4" />
           </div>
         </template>
       </div>
@@ -192,7 +197,10 @@ function setSearchString(str: string) {
         <div
           v-if="firstHash"
           class="absolute bottom-0 right-0 flex max-w-[50%] flex-row gap-1 overflow-hidden rounded-tl-[10px] p-1 shadow-md"
-          :class="`${hasHoveredHash ? 'bg-amber-600 text-amber-100' : 'bg-blue-600 text-blue-100'}`"
+          :class="{
+            'bg-amber-600 text-amber-100': hasHoveredHash,
+            'bg-blue-600 text-blue-100': !hasHoveredHash,
+          }"
           @contextmenu.prevent="setSearchString(firstHash)"
         >
           <span class="whitespace-nowrap text-xs">#{{ firstHash }}</span>

src/components/streams/LiverEventDateSection.vue

@@ -48,7 +48,13 @@ const sectionInfo = computed(() => {
           </button>
 
           <button
-            :class="`border-0 rounded-lg flex flex-row items-center gap-1 px-2 py-1 shadow-md ${sectionInfo.dateDiff === 0 ? 'bg-yellow-400 text-black hover:bg-yellow-300 border-yellow-100' : 'bg-gray-700 text-white hover:bg-gray-900 border-gray-300'}`"
+            class="flex flex-row items-center gap-1 rounded-lg border-0 px-2 py-1 shadow-md"
+            :class="{
+              'border-yellow-100 bg-yellow-400 text-black hover:bg-yellow-300':
+                sectionInfo.dateDiff === 0,
+              'border-gray-300 bg-gray-700 text-white hover:bg-gray-900':
+                sectionInfo.dateDiff !== 0,
+            }"
             @click="scrollToSectionTop(dateSection.time)"
           >
             <span class="text-base font-bold">

src/components/streams/detail/LiverEventDetailPopover.vue

@@ -159,10 +159,18 @@ async function onClickNotify(id: string) {
             title="add bookmark"
           >
             <div
-              :class="`size-10 place-items-center bg-white rounded-full grid  border-2 group-hover/fav:bg-gray-100 ${hasBookmark ? 'border-green-800' : 'border-gray-400'} `"
+              class="grid size-10 place-items-center rounded-full border-2 bg-white group-hover/fav:bg-gray-100"
+              :class="{
+                'border-green-800': hasBookmark,
+                'border-gray-400': !hasBookmark,
+              }"
             >
               <i
-                :class="`size-7 ${hasBookmark ? 'i-mdi-bookmark text-green-600' : 'i-mdi-bookmark-outline  text-gray-400'}`"
+                class="size-7"
+                :class="{
+                  'i-mdi-bookmark text-green-600': hasBookmark,
+                  'i-mdi-bookmark-outline text-gray-400': !hasBookmark,
+                }"
               />
             </div>
           </button>
@@ -173,12 +181,18 @@ async function onClickNotify(id: string) {
             title="add notification"
           >
             <div
-              :class="`size-10 place-items-center bg-white rounded-full grid  border-2 border-gray-400 group-hover/fav:bg-gray-100
-              ${hasNotify ? 'border-yellow-800' : 'border-gray-400'}
-              `"
+              class="grid size-10 place-items-center rounded-full border-2 border-gray-400 bg-white group-hover/fav:bg-gray-100"
+              :class="{
+                'border-yellow-800': hasNotify,
+                'border-gray-400': !hasNotify,
+              }"
             >
               <i
-                :class="`size-7 ${hasNotify ? 'i-mdi-bell text-yellow-600' : 'i-mdi-bell-outline text-gray-400'}`"
+                class="size-7"
+                :class="{
+                  'i-mdi-bell text-yellow-600': hasNotify,
+                  'i-mdi-bell-outline text-gray-400': !hasNotify,
+                }"
               />
             </div>
           </button>