feat: 一部のコンポーネントを chika3742/mhy-material-components で共通化

nuxt/components/bookmark/character-card.vue

@@ -3,6 +3,7 @@ import * as _ from "lodash"
 import {Bookmark, LevelingBookmark} from "~/types/bookmark/bookmark"
 import {CharacterIdWithVariant} from "~/types/strings"
 import {reactive} from "#imports"
+import {isBookmarkableExp} from "~/types/bookmarkable-ingredient"
 
 interface Props {
   character: CharacterIdWithVariant
@@ -82,17 +83,22 @@ const detailsDialog = reactive({
 
       <div class="pa-2 d-flex flex-column" style="gap: 8px">
         <section v-if="groupedBookmarks.characterMaterials.length >= 1">
-          <v-row no-gutters style="gap: 8px">
-            <MaterialCard
+          <div class="d-flex g-2 flex-wrap">
+            <MaterialItem
               v-for="(materials, mId) in _.groupBy(groupedBookmarks.characterMaterials, 'materialId') as Record<string, (Bookmark.CharacterMaterial | Bookmark.Exp)[]>"
               :key="mId"
-              :initial-selected-exp-item="(materials[0] as any).selectedItem"
+              :initial-selected-exp-item="isBookmarkableExp(materials[0]) ? materials[0].selectedItem : undefined"
               :items="materials"
               :purpose-types="['ascension', 'basicAttack', 'skill', 'talent', 'ultimate']"
-              show-details-button
-              @click:details-button="detailsDialog.items = groupedBookmarks.characterMaterials; detailsDialog.show = true"
             />
-          </v-row>
+            <v-btn
+              :text="tx('common.details')"
+              class="align-self-center"
+              prepend-icon="mdi-loupe"
+              variant="text"
+              @click="detailsDialog.items = groupedBookmarks.characterMaterials; detailsDialog.show = true"
+            />
+          </div>
         </section>
 
         <section v-if="Object.keys(groupedBookmarks.lightCones).length >= 1">
@@ -107,17 +113,23 @@ const detailsDialog = reactive({
                 lines="two"
                 rounded
               />
-              <v-row class="ml-2 mt-2" no-gutters style="gap: 8px">
-                <MaterialCard
+              <div class="d-flex g-2 flex-wrap ml-4 mt-2">
+                <MaterialItem
                   v-for="(materials, mId) in _.groupBy(lcMaterials, 'materialId') as Record<string, (Bookmark.LightConeMaterial | Bookmark.Exp)[]>"
                   :key="mId"
-                  :initial-selected-exp-item="(materials[0] as any).selectedItem"
+                  :initial-selected-exp-item="isBookmarkableExp(materials[0]) ? materials[0].selectedItem : undefined"
                   :items="materials"
                   :purpose-types="['ascension']"
-                  show-details-button
-                  @click:details-button="detailsDialog.items = lcMaterials; detailsDialog.show = true"
                 />
-              </v-row>
+
+                <v-btn
+                  :text="tx('common.details')"
+                  class="align-self-center"
+                  prepend-icon="mdi-loupe"
+                  variant="text"
+                  @click="detailsDialog.items = lcMaterials; detailsDialog.show = true"
+                />
+              </div>
             </div>
           </div>
         </section>

nuxt/components/bookmark/details-dialog.vue

@@ -105,7 +105,7 @@ router.beforeEach(() => {
                     </v-btn>
                   </v-row>
                   <div class="material-cards-container">
-                    <MaterialCard
+                    <MaterialItem
                       v-for="item in __items.sort(materialSortFunc)"
                       :key="item.id"
                       :initial-selected-exp-item="isBookmarkableExp(item) ? item.selectedItem : undefined"

nuxt/components/bookmark/list.vue

@@ -48,7 +48,7 @@ const saveCharacterSort = (ev: Sortable.SortableEvent) => {
         :key="characterId"
         :data-character-id="characterId"
         :bookmarks="characterBookmarks"
-        :character="characterId"
+        :character="characterId as string"
       />
     </Draggable>
 

nuxt/components/grouped-list.vue

@@ -7,6 +7,7 @@ const props = withDefaults(defineProps<{
   categoryI18nKey: string
   itemI18nKey: string
   linkBasePath: string
+  preserveQuery?: boolean
   hasSubtitle?: boolean
 }>(), {
   hasSubtitle: false,
@@ -48,6 +49,7 @@ const opened = computed({
         :item="item"
         :item-i18n-key="itemI18nKey"
         :link-base-path="linkBasePath"
+        :preserve-query="preserveQuery"
         :lines="hasSubtitle ? 'two' : 'one'"
       >
         <template #subtitle>

nuxt/components/item-list-item.vue

@@ -2,6 +2,7 @@
 withDefaults(defineProps<{
   item: Record<string, unknown> & { id: string, rarity: number }
   linkBasePath: string
+  preserveQuery?: boolean
   itemI18nKey: string
   imageFunc: (id: string) => string
   lines?: "one" | "two"
@@ -11,14 +12,20 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <v-list-item :lines="lines" :to="localePath(`${linkBasePath}/${item.id}`)">
+  <v-list-item
+    :lines="lines"
+    :to="localePath({
+      path: `${linkBasePath}/${item.id}`,
+      query: preserveQuery ? $route.query : {},
+    })"
+  >
     <template #prepend>
       <v-img :src="imageFunc(item.id)" aspect-ratio="1" class="mr-2" width="45px" />
     </template>
 
     <v-row align="center" no-gutters style="gap: 8px">
       <v-list-item-title>{{ tx(`${itemI18nKey}.${item.id}`) }}</v-list-item-title>
-      <v-chip :color="`rank${item.rarity}`" size="small">
+      <v-chip :color="`rarity-${item.rarity}`" size="small">
         <v-icon>mdi-star</v-icon>
         {{ item.rarity }}
       </v-chip>