feat(ui): add multi-select and bulk actions for packages #1672
+532
−57
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <script setup lang="ts"> | ||
| const { selectedPackages, selectedPackagesParam, clearSelectedPackages } = usePackageSelection() | ||
|
|
||
| const shortcutKey = 'b' | ||
| const actionBar = useTemplateRef('actionBarRef') | ||
| onKeyStroke( | ||
| e => { | ||
| const target = e.target as HTMLElement | ||
| const isCheckbox = target.hasAttribute('data-package-card-checkbox') | ||
| return isKeyWithoutModifiers(e, shortcutKey) && (!isEditableElement(target) || isCheckbox) | ||
| }, | ||
| e => { | ||
| if (selectedPackages.value.length === 0) { | ||
| return | ||
| } | ||
|
|
||
| e.preventDefault() | ||
| actionBar.value?.focus() | ||
| }, | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <Transition name="action-bar-slide" appear> | ||
| <div | ||
| v-if="selectedPackages.length" | ||
| class="fixed bottom-10 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none" | ||
| > | ||
| <div | ||
| ref="actionBarRef" | ||
| tabindex="-1" | ||
| aria-keyshortcuts="b" | ||
| class="pointer-events-auto bg-bg shadow-2xl shadow-accent/20 border-2 border-accent/60 p-3 min-w-[300px] rounded-xl flex gap-3 items-center justify-between animate-in ring-1 ring-accent/30" | ||
| > | ||
| <div aria-live="polite" aria-atomic="true" class="sr-only"> | ||
| {{ $t('action_bar.selection', selectedPackages.length) }}. | ||
| {{ $t('action_bar.shortcut', { key: shortcutKey }) }}. | ||
| </div> | ||
|
|
||
| <div class="flex items-center gap-2"> | ||
| <span class="text-fg font-semibold text-sm flex items-center gap-1.5"> | ||
| <i class="i-ph:check-circle-fill text-accent text-base" aria-hidden="true"></i> | ||
| {{ $t('action_bar.selection', selectedPackages.length) }} | ||
| </span> | ||
| <button | ||
| @click="clearSelectedPackages" | ||
| class="flex items-center ms-1 text-fg-muted hover:(text-fg bg-accent/10) p-1.5 rounded-lg transition-colors" | ||
| aria-label="Close action bar" | ||
| > | ||
| <span class="i-lucide:x text-sm" aria-hidden="true" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <LinkBase | ||
| :to="{ name: 'compare', query: { packages: selectedPackagesParam } }" | ||
| variant="button-secondary" | ||
| classicon="i-lucide:git-compare" | ||
| > | ||
| {{ $t('package.links.compare') }} | ||
| </LinkBase> | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| /* Action bar slide/fade animation */ | ||
| .action-bar-slide-enter-active, | ||
| .action-bar-slide-leave-active { | ||
| transition: | ||
| opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), | ||
| transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); | ||
| } | ||
| .action-bar-slide-enter-from, | ||
| .action-bar-slide-leave-to { | ||
| opacity: 0; | ||
| transform: translateY(40px) scale(0.98); | ||
| } | ||
| .action-bar-slide-enter-to, | ||
| .action-bar-slide-leave-from { | ||
| opacity: 1; | ||
| transform: translateY(0) scale(1); | ||
| } | ||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -179,7 +179,8 @@ defineExpose({ | |
| <template #default="{ item, index }"> | ||
| <div class="pb-4"> | ||
| <PackageCard | ||
| :key="item.package.name" | ||
| :result="item" | ||
| :heading-level="headingLevel" | ||
| :show-publisher="showPublisher" | ||
| :index="index" | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -43,6 +43,7 @@ const pageSize = defineModel<PageSize>('pageSize', { required: true }) | |
|
|
||
| const emit = defineEmits<{ | ||
| 'toggleColumn': [columnId: ColumnId] | ||
| 'toggleSelection': [] | ||
| 'resetColumns': [] | ||
| 'clearFilter': [chip: FilterChip] | ||
| 'clearAllFilters': [] | ||
|
|
@@ -110,6 +111,8 @@ const sortKeyLabelKeys = computed<Record<SortKey, string>>(() => ({ | |
| function getSortKeyLabelKey(key: SortKey): string { | ||
| return sortKeyLabelKeys.value[key] | ||
| } | ||
|
|
||
| const { selectedPackages, clearSelectedPackages } = usePackageSelection() | ||
| </script> | ||
|
|
||
| <template> | ||
|
|
@@ -211,6 +214,26 @@ function getSortKeyLabelKey(key: SortKey): string { | |
|
|
||
| <ViewModeToggle v-model="viewMode" /> | ||
| </div> | ||
|
|
||
| <div | ||
| class="flex items-center order-3 sm:border-is sm:border-fg-subtle/20 sm:ps-3" | ||
| v-if="selectedPackages.length" | ||
| > | ||
| <ButtonBase | ||
| variant="secondary" | ||
| @click="emit('toggleSelection')" | ||
| classicon="i-lucide:package-check" | ||
| > | ||
| {{ t('filters.view_selected') }} ({{ selectedPackages.length }}) | ||
| </ButtonBase> | ||
| <button | ||
| @click="clearSelectedPackages" | ||
| aria-label="Close action bar" | ||
| class="flex items-center ms-2" | ||
| > | ||
| <span class="i-lucide:x text-sm" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <script setup lang="ts"> | ||
| const props = defineProps<{ | ||
| packageName: string | ||
| checked: boolean | ||
| disabled?: boolean | ||
| }>() | ||
|
|
||
| const emit = defineEmits<{ | ||
| (e: 'change', packageName: string): void | ||
| }>() | ||
|
|
||
| const { t } = useI18n() | ||
| const disabledText = t('package.card.select_maximum', MAX_PACKAGE_SELECTION) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="relative z-1"> | ||
| <label> | ||
| <span class="sr-only" v-if="disabled">{{ disabledText }}</span> | ||
| <span class="sr-only" v-else> {{ $t('package.card.select') }}: {{ packageName }} </span> | ||
|
|
||
| <TooltipApp v-if="disabled" :text="disabledText" position="top"> | ||
| <input | ||
| class="opacity-0 group-hover:opacity-100 size-4 accent-accent border border-fg-muted/30 hover:cursor-not-allowed" | ||
| :class="{ 'opacity-100! disabled:opacity-30!': isTouchDevice() }" | ||
| type="checkbox" | ||
| :disabled | ||
| /> | ||
| </TooltipApp> | ||
|
|
||
| <input | ||
| v-else | ||
| data-package-card-checkbox | ||
| class="opacity-0 group-focus-within:opacity-100 checked:opacity-100 group-hover:opacity-100 size-4 cursor-pointer accent-accent border border-fg-muted/30 hover:border-accent transition-colors disabled:group-hover:opacity-30 disabled:hover:cursor-not-allowed" | ||
| :class="{ 'opacity-100! disabled:opacity-30!': isTouchDevice() }" | ||
| type="checkbox" | ||
| :checked | ||
| :disabled | ||
| @change="emit('change', packageName)" | ||
| /> | ||
| </label> | ||
| </div> | ||
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ | ||
| viewMode?: ViewMode | ||
| }>() | ||
MatteoGabriele marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const { selectedPackages, clearSelectedPackages, selectedPackagesParam, closeSelectionView } = | ||
| usePackageSelection() | ||
|
|
||
| const { data, pending } = useAsyncData( | ||
| async () => { | ||
| const results = await Promise.all( | ||
| selectedPackages.value.map(name => | ||
| $fetch(`/api/registry/package-meta/${encodeURIComponent(name)}`) | ||
| .then(response => ({ package: response })) | ||
| .catch(() => []), | ||
| ), | ||
| ) | ||
| return results as NpmSearchResult[] | ||
| }, | ||
| { | ||
| default: () => [], | ||
| }, | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <section> | ||
| <header class="mb-6 flex items-center justify-between"> | ||
| <button | ||
| type="button" | ||
| class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70" | ||
| @click="closeSelectionView" | ||
| :aria-label="$t('nav.back')" | ||
| > | ||
| <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" /> | ||
| <span class="hidden sm:inline">{{ $t('nav.back') }}</span> | ||
| </button> | ||
| <div class="flex items-center gap-2"> | ||
| <ButtonBase variant="secondary" @click="clearSelectedPackages"> | ||
| {{ $t('filters.clear_all') }} | ||
| </ButtonBase> | ||
| <LinkBase | ||
| :to="{ name: 'compare', query: { packages: selectedPackagesParam } }" | ||
| variant="button-primary" | ||
| classicon="i-lucide:git-compare" | ||
| > | ||
| {{ $t('package.links.compare') }} | ||
| </LinkBase> | ||
| </div> | ||
| </header> | ||
|
|
||
| <p class="text-fg-muted text-sm font-mono"> | ||
| {{ $t('action_bar.selection', selectedPackages.length) }} | ||
| </p> | ||
|
|
||
| <div class="mt-6"> | ||
| <div v-if="pending" class="flex items-center justify-center py-12"> | ||
| <LoadingSpinner :text="$t('common.loading')" /> | ||
| </div> | ||
| <PackageList | ||
| v-else-if="data?.length" | ||
| :view-mode="viewMode" | ||
| :results="data" | ||
| heading-level="h2" | ||
| /> | ||
| <p v-else class="text-fg-muted text-sm"> | ||
| {{ $t('filters.table.no_packages') }} | ||
| </p> | ||
| </div> | ||
| </section> | ||
| </template> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.