refactor: Advanced mod list. Supporting dense view, batch selection, …

…sorting and warning for duplicated mods

xmcl-keystone-ui/.eslintrc.json

@@ -34,6 +34,7 @@
     "rules": {
         "tailwindcss/no-custom-classname": "off",
         "tailwindcss/migration-from-tailwind-2": "off",
+        "tailwindcss/enforces-shorthand": "off",
         "vue/no-mutating-props": "off",
         "vue/multi-word-component-names": "off",
         "vue/no-v-text-v-html-on-component": "off",

xmcl-keystone-ui/locales/de.yaml

@@ -698,6 +698,7 @@ mod:
     dass Sie sie löschen wollen? | Du wirst diese Mod und ihre Metadaten für
     immer verschwinden lassen. Sind Sie sicher, dass Sie dies tun wollen?
   deletionRestHint: Und der {rest} der Mods...
+  denseView: Dichte Sicht
   dropHint: Ziehen Sie die .jar/.litemod-Mod hierher und importieren Sie sie.
   enabled: 'Inklusive Mods: {count}'
   filter: Mod-Filter
@@ -706,6 +707,7 @@ mod:
   incompatible: Inkompatible Mods.
   manage: Mods verwalten
   maybeCompatible: Möglicherweise kompatibel.
+  mods: '{count} Mods'
   name: Mods | Mods
   noModLoaderHint: Vergessen Sie nicht, den Modloader zu aktivieren, um Mods zu verwenden!
   openLink: Link zur Mod öffnen {url}

xmcl-keystone-ui/locales/en.yaml

@@ -633,6 +633,7 @@ mod:
     delete it? | You will lose these mod & these metadata forever. Are you sure
     you want to do that?
   deletionRestHint: And {rest} more Mods...
+  denseView: Dense View
   dropHint: Drop mod's .jar/.litemod here to import.
   enabled: '{count} Mods enabled'
   filter: Filter Mods
@@ -642,6 +643,7 @@ mod:
   incompatible: Incompatible Mod.
   manage: Manage Mods
   maybeCompatible: Maybe Compatible.
+  mods: '{count} Mods'
   name: Mod | Mods
   noModLoaderHint: Don't forget to enable a modloader to use mods!
   openLink: Open the mod url {url}

xmcl-keystone-ui/locales/es-ES.yaml

@@ -454,6 +454,7 @@ mod:
     eliminarlo? | Perderás estos mods y sus metadatos para siempre. ¿Estás
     seguro de que deseas hacerlo?
   deletionRestHint: Y otros {rest} mods...
+  denseView: Vista densa
   dropHint: Arrastra el archivo .jar/.litemod del mod aquí para importarlo.
   enabled: '{count} Mods habilitados'
   filter: Filtrar Mods
@@ -462,6 +463,7 @@ mod:
   incompatible: Mod Incompatible.
   manage: Administrar Mods
   maybeCompatible: Posiblemente Compatible.
+  mods: '{count} modificaciones'
   name: Mod | Mods
   noModLoaderHint: ¡No olvides habilitar un modloader para usar mods!
   openLink: Abrir la URL del mod {url}

xmcl-keystone-ui/locales/fr.yaml

@@ -696,6 +696,7 @@ mod:
     vouloir le supprimer ? | Vous perdrez ces mods et ces métadonnées pour
     toujours. Êtes-vous sûr de vouloir faire ça?
   deletionRestHint: Et {rest} plus de Mods...
+  denseView: Vue dense
   dropHint: Déposez le fichier .jar/.litemod du mod ici pour l'importer.
   enabled: '{count} mods activés'
   filter: Mods de filtrage
@@ -704,6 +705,7 @@ mod:
   incompatible: Mod incompatible.
   manage: Gérer les Mods
   maybeCompatible: Peut-être compatibles.
+  mods: "{count}\_mods"
   name: Mod | Mods
   noModLoaderHint: N'oubliez pas d'activer un modloader pour utiliser les mods !
   openLink: Ouvrir l'url du mod {url}

xmcl-keystone-ui/locales/gl.yaml

@@ -249,6 +249,8 @@ me:
   modpacks: Os meus Modpacks
   versions: Versións instaladas
 mod:
+  denseView: Vista Densa
+  mods: '{count} Mods'
   searchOnCurseforge: Busca {name} en curseforge
 modInstall:
   noVersionSupported: Só os mods son compatibles con Minecraft {supported}.

xmcl-keystone-ui/locales/hu.yaml

@@ -654,6 +654,7 @@ mod:
     Ezt a modot és metaadatait örökre elveszíted. Biztos vagy benne, hogy hogy
     ezt akarod?
   deletionRestHint: És további {rest} mod...
+  denseView: Sűrű kilátás
   dropHint: A mod .jar/.litemod fájlt húzd ide az importáláshoz.
   enabled: '{count} Modok engedélyezve'
   filter: Modok szűrése
@@ -663,6 +664,7 @@ mod:
   incompatible: Inkompatibilis mod.
   manage: Modok kezelése
   maybeCompatible: Talán kompatibilis.
+  mods: '{count} Mod'
   name: Mod | Modok
   noModLoaderHint: Ne felejtsd el engedélyezni a modloadert a modok használatához!
   openLink: A mod url {url} megnyitása

xmcl-keystone-ui/locales/pl.yaml

@@ -662,6 +662,7 @@ mod:
     Utracisz ten mod i jego metadane na zawsze. Czy na pewno chcesz go usunąć? |
     Utracisz ten mod i jego metadane na zawsze. Czy na pewno chcesz to zrobić?
   deletionRestHint: I {rest} więcej modów...
+  denseView: Gęsty widok
   dropHint: Upuść .jar/.litemod moda tutaj, aby zaimportować.
   enabled: '{count} Modyfikacje włączone'
   filter: Modyfikacje filtra
@@ -671,6 +672,7 @@ mod:
   incompatible: Niekompatybilny mod.
   manage: Zarządzanie modami
   maybeCompatible: Może być kompatybilny.
+  mods: '{count} Mody'
   name: Mod | Mody
   noModLoaderHint: Nie zapomnij włączyć modloadera, aby korzystać z modów!
   openLink: Otwórz adres url moda {url}

xmcl-keystone-ui/locales/ru.yaml

@@ -629,6 +629,7 @@ mod:
     Вы навсегда потеряете этот мод и его метаданные. Точно хотите удалить его? |
     Вы потеряете этот мод и эти метаданные навсегда. Точно это сделать?
   deletionRestHint: И ещё {rest} модов...
+  denseView: Плотный просмотр
   dropHint: Перетащите мод .jar/.litemod сюда для импорта.
   enabled: 'Модов включено: {count}'
   filter: Фильтр модов
@@ -637,6 +638,7 @@ mod:
   incompatible: Несовместимый мод.
   manage: Управление модами
   maybeCompatible: Возможно совместим.
+  mods: '{count} Модов'
   name: Мод | Моды
   noModLoaderHint: Не забудьте включить modloader для использование модов!
   openLink: Открыть ссылку на мод {url}

xmcl-keystone-ui/locales/uk.yaml

@@ -636,6 +636,7 @@ mod:
     його? | Ви витратите цей мод и ці метадані назавжди. Впевнені що хочете це
     зробити?
   deletionRestHint: И ще {rest} модів...
+  denseView: Щільний вид
   dropHint: Перетягніть мод .jar/.litemod сюди для імпорту.
   enabled: 'Модів включенно: {count}'
   filter: Фільтр модов
@@ -644,6 +645,7 @@ mod:
   incompatible: Несумістні мод.
   manage: Управління модами
   maybeCompatible: Можливо сумісний.
+  mods: '{count} модів'
   name: Мод | Моди
   noModLoaderHint: Не забудьте увімкнути модлоадер для використання модів!
   openLink: Відкрити посилання на мод {url}

xmcl-keystone-ui/locales/zh-CN.yaml

@@ -633,6 +633,7 @@ mod:
   deletion: 删除模组
   deletionHint: 您将移除这个模组的文件和信息。您确定吗？| 您将移除这些模组的文件和信息。您确定吗？
   deletionRestHint: 等 {rest} 个模组……
+  denseView: 简略模式
   dropHint: 将模组 Jar 文件拖入此处来导入
   enabled: 一共启用了 {count} 个模组
   filter: 筛选模组
@@ -641,6 +642,7 @@ mod:
   incompatible: 可能不兼容当前版本。
   manage: 管理模组
   maybeCompatible: 也许兼容于当前版本。
+  mods: '{count} 个模组'
   name: 模组 | 模组
   noModLoaderHint: 请不要忘记选择模组加载器来加载模组
   openLink: 打开模组链接 {url}

xmcl-keystone-ui/locales/zh-TW.yaml

@@ -633,6 +633,7 @@ mod:
   deletion: 刪除模組
   deletionHint: 您將移除這個模組的檔案和資訊。您確定嗎？| 您將移除這些模組的檔案和資訊。您確定嗎？
   deletionRestHint: 等 {rest} 個模組……
+  denseView: 密集視圖
   dropHint: 將模組 Jar 檔案拖入此處來匯入
   enabled: 一共啟用了 {count} 個模組
   filter: 篩選模組
@@ -641,6 +642,7 @@ mod:
   incompatible: 可能不相容目前版本。
   manage: 管理模組
   maybeCompatible: 也許相容於目前版本。
+  mods: '{count} 個模組'
   name: 模組 | 模組
   noModLoaderHint: 請不要忘記選擇模組載入器來載入模組
   openLink: 開啟模組連結 {url}

xmcl-keystone-ui/src/components/MarketBase.vue

@@ -17,10 +17,10 @@
     >
       <template #left>
         <div
-          class="flex flex-grow-0 items-center px-4"
+          v-if="items.length > 0"
+          class="flex flex-grow-0 items-center "
         >
           <slot
-            v-if="items.length > 0"
             name="actions"
           />
         </div>
@@ -40,8 +40,11 @@
               :has-update="typeof item === 'string' ? false : !!plans[item.id]"
               :checked="typeof item === 'string' ? false : (selections[item.id] || false)"
               :selection-mode="typeof item === 'string' ? false : (selectionMode && item.installed && item.installed.length > 0)"
-              :selected="typeof item === 'string' ? false : ((selectedItem && selectedItem.id === item.id) || false)"
-              :on="{ click: () => onSelect(item) }"
+              :selected="typeof item === 'string' ? false : ((selectedItem && (selectedItem.id === item.id) || selections[item.id]) || false)"
+              :on="{
+                // @ts-ignore
+                click: (event) => onSelect(event, item)
+              }"
             />
           </template>
         </v-virtual-scroll>
@@ -51,6 +54,7 @@
         />
         <slot
           v-else-if="items.length === 0"
+          class="responsive-container"
           name="placeholder"
         />
       </template>
@@ -85,12 +89,14 @@ const props = defineProps<{
   plans: Record<string, UpgradePlan>
   items: (ProjectEntry | string)[]
   itemHeight: number
+  selectionMode?: boolean
   loading?: boolean
   error?: any
 }>()
 const emit = defineEmits<{
   (event: 'load'): void
   (event: 'drop', e: DragEvent): void
+  (event: 'update:selectionMode', v: boolean): void
 }>()
 
 const selectedId = useQuery('id')
@@ -125,8 +131,39 @@ const selectedCurseforgeId = computed(() => {
   return selectedItem.value?.curseforgeProjectId || selectedItem.value?.curseforge?.id || undefined
 })
 
-const onSelect = (i: ProjectEntry) => {
-  selectedId.value = i.id
+const onSelect = (event: MouseEvent, i: ProjectEntry) => {
+  if (props.selectionMode && i.installed.length > 0) {
+    // if ctrl is pressed
+    if (event.ctrlKey) {
+      selections.value = {
+        ...selections.value,
+        [i.id]: !selections.value[i.id],
+      }
+    } else if (event.shiftKey) {
+      // Select all items between the last selected item and this item
+      const list = props.items
+      const lastIndex = list.findIndex((item) => typeof item === 'object' && item.id === selectedId.value)
+      const currentIndex = list.findIndex((item) => typeof item === 'object' && item.id === i.id)
+      const start = Math.min(lastIndex, currentIndex)
+      const end = Math.max(lastIndex, currentIndex)
+      const _selections: Record<string, boolean> = {}
+      for (let i = start; i <= end; i++) {
+        const item = list[i]
+        if (typeof item === 'object') {
+          _selections[item.id] = true
+        }
+      }
+      selections.value = _selections
+    } else {
+      selectedId.value = i.id
+      selections.value = {
+        [i.id]: true,
+      }
+    }
+  } else {
+    selectedId.value = i.id
+    selections.value = {}
+  }
 }
 
 const onScroll = (e: Event) => {
@@ -137,14 +174,13 @@ const onScroll = (e: Event) => {
   }
 }
 
-const selectionMode = ref(false)
-const selections = ref({} as Record<string, boolean>)
+const selections = inject('selections', () => ref({} as Record<string, boolean>), true)
 const onKeyPress = (e: KeyboardEvent) => {
   // ctrl+a
   if (e.ctrlKey && e.key === 'a') {
     e.preventDefault()
     e.stopPropagation()
-    selectionMode.value = true
+    emit('update:selectionMode', true)
 
     const _selections: Record<string, boolean> = {}
     for (const item of props.items) {
@@ -157,7 +193,7 @@ const onKeyPress = (e: KeyboardEvent) => {
   }
   // esc
   if (e.key === 'Escape') {
-    selectionMode.value = false
+    emit('update:selectionMode', false)
     selections.value = {}
   }
 }
@@ -171,17 +207,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.search-text {
-  display: none;
-}
-
-@container (min-width: 260px) {
-  .search-text {
-    display: block;
-  }
-}
-
-.responsive-header {
+.responsive-container {
   container-type: size;
   width: 100%;
 }