You've already forked AstralRinth
forked from didirus/AstralRinth
Project, Search, User redesign (#1281)
* New project page * fix silly icon tailwind classes * Start new versions page, add new ButtonStyled component * Pagination and finish mocking up versions page functionality * green download button * hover animation * New Modal, Avatar refactor, subpages in NavTabs * lint * Download modal * New user page + fix lint * fix ui lint * Download animation fix * Versions filter + finish project page * Improve consistency of buttons on home page * Fix ButtonStyled breaking * Fix margin on version summary * finish search, new modals, user + project page mobile * fix gallery image pages * New project header * Fix gallery tab showing improperly * Use auto direction + position for all popouts * Preliminary user page * test to see if this fixes login stuff * remove extra slash * Add version actions, move download button on versions page * Listed -> public * Shorten download modal selector height * Fix user menu open direction * Change breakpoint for header collapse * Only underline title * Tighten padding on stats a little * New nav * Make mobile breakpoint more consistent * fix header breakpoint regression * Add sign in button * Fix edit icon color * Fix margin at top of screen * Fix user bios and ad width * Fix user nav showing when there's only one type of project * Fix plural projects on user page & extract i18n * Remove ads on mobile for now * Fix overflow menu showing hidden items * NavTabs on mobile * Fix navbar z index * Search filter overhaul + negative filters * fix no-max-height * port version filters, fix following/collections, lint * hide promos * ui lint * Disable modal background animation to reduce reported motion sickness * Hide install with modrinth app button on mobile --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
Geometrically
1
packages/assets/icons/arrow-big-up-dash.svg
Normal file
1
packages/assets/icons/arrow-big-up-dash.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-big-up-dash"><path d="M9 19h6"/><path d="M9 15v-3H5l7-7 7 7h-4v3H9z"/></svg>
|
||||
|
After Width: | Height: | Size: 284 B |
1
packages/assets/icons/ban.svg
Normal file
1
packages/assets/icons/ban.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
1
packages/assets/icons/book-text.svg
Normal file
1
packages/assets/icons/book-text.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-text"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
1
packages/assets/icons/box-import.svg
Normal file
1
packages/assets/icons/box-import.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13v6M21 10V8c0-.7-.4-1.4-1-1.7l-7-4c-.6-.4-1.4-.4-2 0l-7 4c-.6.3-1 1-1 1.7v8c0 .7.4 1.4 1 1.7l7 4c.6.4 1.4.4 2 0l2-1.1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3.3 7 8.7 5 8.7-5M12 22V12M22 16l-3 3-3-3"/></svg>
|
||||
|
After Width: | Height: | Size: 472 B |
1
packages/assets/icons/braces.svg
Normal file
1
packages/assets/icons/braces.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>
|
||||
|
After Width: | Height: | Size: 380 B |
1
packages/assets/icons/collection.svg
Normal file
1
packages/assets/icons/collection.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-library"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7v10"/><path d="M11 7v10"/><path d="m15 7 2 10"/></svg>
|
||||
|
After Width: | Height: | Size: 334 B |
1
packages/assets/icons/compass.svg
Normal file
1
packages/assets/icons/compass.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/><circle cx="12" cy="12" r="10"/></svg>
|
||||
|
After Width: | Height: | Size: 352 B |
1
packages/assets/icons/crown.svg
Normal file
1
packages/assets/icons/crown.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown"><path d="m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"/></svg>
|
||||
|
After Width: | Height: | Size: 270 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 260 B After Width: | Height: | Size: 244 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 271 B |
1
packages/assets/icons/filter-x.svg
Normal file
1
packages/assets/icons/filter-x.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter-x"><path d="M13.013 3H2l8 9.46V19l4 2v-8.54l.9-1.055"/><path d="m22 3-5 5"/><path d="m17 3 5 5"/></svg>
|
||||
|
After Width: | Height: | Size: 313 B |
1
packages/assets/icons/game.svg
Normal file
1
packages/assets/icons/game.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
|
||||
|
After Width: | Height: | Size: 672 B |
1
packages/assets/icons/glasses.svg
Normal file
1
packages/assets/icons/glasses.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-glasses"><circle cx="6" cy="15" r="4"/><circle cx="18" cy="15" r="4"/><path d="M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M2.5 13 5 7c.7-1.3 1.4-2 3-2"/><path d="M21.5 13 19 7c-.7-1.3-1.5-2-3-2"/></svg>
|
||||
|
After Width: | Height: | Size: 407 B |
1
packages/assets/icons/newspaper.svg
Normal file
1
packages/assets/icons/newspaper.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-newspaper"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8V6Z"/></svg>
|
||||
|
After Width: | Height: | Size: 409 B |
1
packages/assets/icons/organization.svg
Normal file
1
packages/assets/icons/organization.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
|
||||
|
After Width: | Height: | Size: 456 B |
1
packages/assets/icons/package-open.svg
Normal file
1
packages/assets/icons/package-open.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-open"><path d="M12 22v-9"/><path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/><path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/><path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 646 B |
1
packages/assets/icons/window.svg
Normal file
1
packages/assets/icons/window.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-app-window"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>
|
||||
|
After Width: | Height: | Size: 325 B |
1
packages/assets/icons/wrench.svg
Normal file
1
packages/assets/icons/wrench.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
|
After Width: | Height: | Size: 381 B |
@@ -28,12 +28,17 @@ import _YouTubeIcon from './icons/youtube.svg?component'
|
||||
// Icons
|
||||
import _AlignLeftIcon from './icons/align-left.svg?component'
|
||||
import _ArchiveIcon from './icons/archive.svg?component'
|
||||
import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
|
||||
import _AsteriskIcon from './icons/asterisk.svg?component'
|
||||
import _BanIcon from './icons/ban.svg?component'
|
||||
import _BellIcon from './icons/bell.svg?component'
|
||||
import _BellRingIcon from './icons/bell-ring.svg?component'
|
||||
import _BookIcon from './icons/book.svg?component'
|
||||
import _BookTextIcon from './icons/book-text.svg?component'
|
||||
import _BookmarkIcon from './icons/bookmark.svg?component'
|
||||
import _BoxIcon from './icons/box.svg?component'
|
||||
import _BoxImportIcon from './icons/box-import.svg?component'
|
||||
import _BracesIcon from './icons/braces.svg?component'
|
||||
import _CalendarIcon from './icons/calendar.svg?component'
|
||||
import _CardIcon from './icons/card.svg?component'
|
||||
import _ChartIcon from './icons/chart.svg?component'
|
||||
@@ -47,9 +52,12 @@ import _ClientIcon from './icons/client.svg?component'
|
||||
import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
|
||||
import _CodeIcon from './icons/code.svg?component'
|
||||
import _CoinsIcon from './icons/coins.svg?component'
|
||||
import _CollectionIcon from './icons/collection.svg?component'
|
||||
import _CompassIcon from './icons/compass.svg?component'
|
||||
import _ContractIcon from './icons/contract.svg?component'
|
||||
import _CopyIcon from './icons/copy.svg?component'
|
||||
import _CopyrightIcon from './icons/copyright.svg?component'
|
||||
import _CrownIcon from './icons/crown.svg?component'
|
||||
import _CurrencyIcon from './icons/currency.svg?component'
|
||||
import _DashboardIcon from './icons/dashboard.svg?component'
|
||||
import _DownloadIcon from './icons/download.svg?component'
|
||||
@@ -62,10 +70,13 @@ import _EyeOffIcon from './icons/eye-off.svg?component'
|
||||
import _FileIcon from './icons/file.svg?component'
|
||||
import _FileTextIcon from './icons/file-text.svg?component'
|
||||
import _FilterIcon from './icons/filter.svg?component'
|
||||
import _FilterXIcon from './icons/filter-x.svg?component'
|
||||
import _FolderOpenIcon from './icons/folder-open.svg?component'
|
||||
import _FolderSearchIcon from './icons/folder-search.svg?component'
|
||||
import _GapIcon from './icons/gap.svg?component'
|
||||
import _GameIcon from './icons/game.svg?component'
|
||||
import _GitHubIcon from './icons/github.svg?component'
|
||||
import _GlassesIcon from './icons/glasses.svg?component'
|
||||
import _GlobeIcon from './icons/globe.svg?component'
|
||||
import _GridIcon from './icons/grid.svg?component'
|
||||
import _HamburgerIcon from './icons/hamburger.svg?component'
|
||||
@@ -95,7 +106,10 @@ import _MicrophoneIcon from './icons/microphone.svg?component'
|
||||
import _MoonIcon from './icons/moon.svg?component'
|
||||
import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
|
||||
import _MoreVerticalIcon from './icons/more-vertical.svg?component'
|
||||
import _NewspaperIcon from './icons/newspaper.svg?component'
|
||||
import _OmorphiaIcon from './icons/omorphia.svg?component'
|
||||
import _OrganizationIcon from './icons/organization.svg?component'
|
||||
import _PackageOpenIcon from './icons/package-open.svg?component'
|
||||
import _PaintBrushIcon from './icons/paintbrush.svg?component'
|
||||
import _PlayIcon from './icons/play.svg?component'
|
||||
import _PlusIcon from './icons/plus.svg?component'
|
||||
@@ -139,6 +153,8 @@ import _UserXIcon from './icons/user-x.svg?component'
|
||||
import _UsersIcon from './icons/users.svg?component'
|
||||
import _VersionIcon from './icons/version.svg?component'
|
||||
import _WikiIcon from './icons/wiki.svg?component'
|
||||
import _WindowIcon from './icons/window.svg?component'
|
||||
import _WrenchIcon from './icons/wrench.svg?component'
|
||||
import _XIcon from './icons/x.svg?component'
|
||||
import _XCircleIcon from './icons/x-circle.svg?component'
|
||||
import _ZoomInIcon from './icons/zoom-in.svg?component'
|
||||
@@ -181,12 +197,17 @@ export const WindowsIcon = _WindowsIcon
|
||||
export const YouTubeIcon = _YouTubeIcon
|
||||
export const AlignLeftIcon = _AlignLeftIcon
|
||||
export const ArchiveIcon = _ArchiveIcon
|
||||
export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
|
||||
export const AsteriskIcon = _AsteriskIcon
|
||||
export const BanIcon = _BanIcon
|
||||
export const BellIcon = _BellIcon
|
||||
export const BellRingIcon = _BellRingIcon
|
||||
export const BookIcon = _BookIcon
|
||||
export const BookTextIcon = _BookTextIcon
|
||||
export const BookmarkIcon = _BookmarkIcon
|
||||
export const BoxIcon = _BoxIcon
|
||||
export const BoxImportIcon = _BoxImportIcon
|
||||
export const BracesIcon = _BracesIcon
|
||||
export const CalendarIcon = _CalendarIcon
|
||||
export const ChartIcon = _ChartIcon
|
||||
export const CheckIcon = _CheckIcon
|
||||
@@ -199,9 +220,12 @@ export const ClientIcon = _ClientIcon
|
||||
export const ClipboardCopyIcon = _ClipboardCopyIcon
|
||||
export const CodeIcon = _CodeIcon
|
||||
export const CoinsIcon = _CoinsIcon
|
||||
export const CollectionIcon = _CollectionIcon
|
||||
export const CompassIcon = _CompassIcon
|
||||
export const ContractIcon = _ContractIcon
|
||||
export const CopyIcon = _CopyIcon
|
||||
export const CopyrightIcon = _CopyrightIcon
|
||||
export const CrownIcon = _CrownIcon
|
||||
export const CurrencyIcon = _CurrencyIcon
|
||||
export const DashboardIcon = _DashboardIcon
|
||||
export const DownloadIcon = _DownloadIcon
|
||||
@@ -215,10 +239,13 @@ export const EyeOffIcon = _EyeOffIcon
|
||||
export const FileIcon = _FileIcon
|
||||
export const FileTextIcon = _FileTextIcon
|
||||
export const FilterIcon = _FilterIcon
|
||||
export const FilterXIcon = _FilterXIcon
|
||||
export const FolderOpenIcon = _FolderOpenIcon
|
||||
export const FolderSearchIcon = _FolderSearchIcon
|
||||
export const GapIcon = _GapIcon
|
||||
export const GameIcon = _GameIcon
|
||||
export const GitHubIcon = _GitHubIcon
|
||||
export const GlassesIcon = _GlassesIcon
|
||||
export const GlobeIcon = _GlobeIcon
|
||||
export const GridIcon = _GridIcon
|
||||
export const HamburgerIcon = _HamburgerIcon
|
||||
@@ -248,7 +275,10 @@ export const MicrophoneIcon = _MicrophoneIcon
|
||||
export const MoonIcon = _MoonIcon
|
||||
export const MoreHorizontalIcon = _MoreHorizontalIcon
|
||||
export const MoreVerticalIcon = _MoreVerticalIcon
|
||||
export const NewspaperIcon = _NewspaperIcon
|
||||
export const OmorphiaIcon = _OmorphiaIcon
|
||||
export const OrganizationIcon = _OrganizationIcon
|
||||
export const PackageOpenIcon = _PackageOpenIcon
|
||||
export const PaintBrushIcon = _PaintBrushIcon
|
||||
export const PlayIcon = _PlayIcon
|
||||
export const PlusIcon = _PlusIcon
|
||||
@@ -291,6 +321,8 @@ export const UserXIcon = _UserXIcon
|
||||
export const UsersIcon = _UsersIcon
|
||||
export const VersionIcon = _VersionIcon
|
||||
export const WikiIcon = _WikiIcon
|
||||
export const WindowIcon = _WindowIcon
|
||||
export const WrenchIcon = _WrenchIcon
|
||||
export const XIcon = _XIcon
|
||||
export const XCircleIcon = _XCircleIcon
|
||||
export const ZoomInIcon = _ZoomInIcon
|
||||
|
||||
@@ -476,6 +476,11 @@ a,
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-large-round {
|
||||
padding: 0.75rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.btn-dropdown-animation {
|
||||
svg:last-child {
|
||||
transition: transform 0.125s ease-in-out;
|
||||
@@ -1085,7 +1090,8 @@ select {
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding-left: 0.5rem;
|
||||
padding-left: 7px;
|
||||
padding-top: 10px;
|
||||
font-size: 1rem;
|
||||
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
|
||||
@@ -135,7 +135,7 @@ input[type='number'] {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding: 0 2.5rem;
|
||||
padding: 0 0.5rem 0 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -45,8 +45,15 @@ html {
|
||||
--color-purple: #8e32f3;
|
||||
--color-gray: #595b61;
|
||||
|
||||
--color-red-highlight: rgba(203, 34, 69, 0.25);
|
||||
--color-orange-highlight: rgba(224, 131, 37, 0.25);
|
||||
--color-green-highlight: rgba(0, 175, 92, 0.25);
|
||||
--color-blue-highlight: rgba(31, 104, 192, 0.25);
|
||||
--color-purple-highlight: rgba(142, 50, 243, 0.25);
|
||||
--color-gray-highlight: rgba(89, 91, 97, 0.25);
|
||||
|
||||
--color-brand: var(--color-green);
|
||||
--color-brand-highlight: rgba(0, 175, 92, 0.25);
|
||||
--color-brand-highlight: var(--color-green-highlight);
|
||||
--color-brand-shadow: rgba(0, 175, 92, 0.7);
|
||||
|
||||
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
|
||||
@@ -83,6 +90,13 @@ html {
|
||||
--color-purple: #c78aff;
|
||||
--color-gray: #9fa4b3;
|
||||
|
||||
--color-red-highlight: rgba(255, 73, 110, 0.25);
|
||||
--color-orange-highlight: rgba(255, 163, 71, 0.25);
|
||||
--color-green-highlight: rgba(27, 217, 106, 0.25);
|
||||
--color-blue-highlight: rgba(79, 156, 255, 0.25);
|
||||
--color-purple-highlight: rgba(199, 138, 255, 0.25);
|
||||
--color-gray-highlight: rgba(159, 164, 179, 0.25);
|
||||
|
||||
--color-brand: var(--color-green);
|
||||
--color-brand-highlight: rgba(27, 217, 106, 0.25);
|
||||
--color-brand-shadow: rgba(27, 217, 106, 0.7);
|
||||
|
||||
@@ -2,9 +2,14 @@
|
||||
<img
|
||||
v-if="src"
|
||||
ref="img"
|
||||
:class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
|
||||
pixelated ? 'pixelated' : ''
|
||||
} ${raised ? 'raised' : ''}`"
|
||||
:style="`--_size: ${cssSize}`"
|
||||
class="`experimental-styles-within avatar"
|
||||
:class="{
|
||||
circle: circle,
|
||||
'no-shadow': noShadow,
|
||||
raised: raised,
|
||||
pixelated: raised,
|
||||
}"
|
||||
:src="src"
|
||||
:alt="alt"
|
||||
:loading="loading"
|
||||
@@ -12,9 +17,13 @@
|
||||
/>
|
||||
<svg
|
||||
v-else
|
||||
:class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
|
||||
raised ? 'raised' : ''
|
||||
}`"
|
||||
class="`experimental-styles-within avatar"
|
||||
:style="`--_size: ${cssSize}`"
|
||||
:class="{
|
||||
circle: circle,
|
||||
'no-shadow': noShadow,
|
||||
raised: raised,
|
||||
}"
|
||||
xml:space="preserve"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
@@ -35,12 +44,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const pixelated = ref(false)
|
||||
const img = ref(null)
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: null,
|
||||
@@ -51,10 +58,7 @@ defineProps({
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'sm',
|
||||
validator(value) {
|
||||
return ['xxs', 'xs', 'sm', 'md', 'lg', 'none'].includes(value)
|
||||
},
|
||||
default: '2rem',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
@@ -66,7 +70,7 @@ defineProps({
|
||||
},
|
||||
loading: {
|
||||
type: String,
|
||||
default: 'lazy',
|
||||
default: 'eager',
|
||||
},
|
||||
raised: {
|
||||
type: Boolean,
|
||||
@@ -74,58 +78,43 @@ defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const LEGACY_PRESETS = {
|
||||
xxs: '1.25rem',
|
||||
xs: '2.5rem',
|
||||
sm: '3rem',
|
||||
md: '6rem',
|
||||
lg: '9rem',
|
||||
}
|
||||
|
||||
const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
|
||||
|
||||
function updatePixelated() {
|
||||
pixelated.value = Boolean(img.value && img.value.naturalWidth && img.value.naturalWidth <= 96)
|
||||
if (img.value && img.value.naturalWidth && img.value.naturalWidth <= 96) {
|
||||
pixelated.value = true
|
||||
} else {
|
||||
pixelated.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
||||
min-height: var(--size) !important;
|
||||
min-width: var(--size) !important;
|
||||
@apply min-w-[--_size] min-h-[--_size] w-[--_size] h-[--_size];
|
||||
--_size: 2rem;
|
||||
|
||||
border: 1px solid var(--color-button-border);
|
||||
background-color: var(--color-button-bg);
|
||||
object-fit: cover;
|
||||
max-width: var(--size) !important;
|
||||
max-height: var(--size) !important;
|
||||
|
||||
&.size-xxs {
|
||||
--size: 1.25rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-card);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
&.size-xs {
|
||||
--size: 2.5rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-card);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
&.size-sm {
|
||||
--size: 3rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-card);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
&.size-md {
|
||||
--size: 6rem;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
&.size-lg {
|
||||
--size: 9rem;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
&.size-none {
|
||||
--size: unset;
|
||||
}
|
||||
object-fit: contain;
|
||||
border-radius: calc(16 / 96 * var(--_size));
|
||||
|
||||
&.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:not(.no-shadow) {
|
||||
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
||||
}
|
||||
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -80,6 +80,13 @@ const classes = computed(() => {
|
||||
:class="classes"
|
||||
:to="link"
|
||||
:target="external ? '_blank' : '_self'"
|
||||
@click="
|
||||
(event) => {
|
||||
if (action) {
|
||||
action(event)
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
|
||||
@@ -91,6 +98,13 @@ const classes = computed(() => {
|
||||
:class="classes"
|
||||
:href="link"
|
||||
:target="external ? '_blank' : '_self'"
|
||||
@click="
|
||||
(event) => {
|
||||
if (action) {
|
||||
action(event)
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
|
||||
|
||||
@@ -156,42 +156,97 @@ const colorVariables = computed(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.btn-wrapper {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Searches up to 4 children deep for valid button */
|
||||
.btn-wrapper :slotted(:is(button, a):first-child),
|
||||
.btn-wrapper :slotted(*) > :is(button, a):first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
|
||||
@apply flex flex-row items-center justify-center border-solid border-2 border-transparent active:scale-95 hover:brightness-125 focus-visible:brightness-125 bg-[--_bg] text-[--_text] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
|
||||
transition:
|
||||
scale 0.125s ease-in-out,
|
||||
background-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-wrapper.outline :slotted(:is(button, a):first-child),
|
||||
.btn-wrapper.outline :slotted(*) > :is(button, a):first-child,
|
||||
.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a):first-child,
|
||||
.btn-wrapper.outline :slotted(*) > *:first-child > *:first-child > :is(button, a):first-child {
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
/*noinspection CssUnresolvedCustomProperty*/
|
||||
.btn-wrapper :slotted(:is(button, a):first-child) > svg:first-child,
|
||||
.btn-wrapper :slotted(*) > :is(button, a):first-child > svg:first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a):first-child > svg:first-child,
|
||||
.btn-wrapper :slotted(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a):first-child
|
||||
> :is(button, a, .button-like):first-child {
|
||||
@apply flex flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
|
||||
transition:
|
||||
scale 0.125s ease-in-out,
|
||||
background-color 0.25s ease-in-out,
|
||||
color 0.25s ease-in-out;
|
||||
|
||||
&[disabled],
|
||||
&[disabled='true'],
|
||||
&.disabled,
|
||||
&.looks-disabled {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled='true'],
|
||||
&.disabled {
|
||||
@apply cursor-not-allowed;
|
||||
}
|
||||
|
||||
&:not([disabled]):not([disabled='true']):not(.disabled) {
|
||||
@apply active:scale-95 hover:brightness-125 focus-visible:brightness-125 hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text];
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper.outline :slotted(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper.outline :slotted(*) > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper.outline
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child {
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
/*noinspection CssUnresolvedCustomProperty*/
|
||||
.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg:first-child,
|
||||
.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg:first-child,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child
|
||||
> svg:first-child,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child
|
||||
> svg:first-child {
|
||||
min-width: var(--_icon-size, 1rem);
|
||||
min-height: var(--_icon-size, 1rem);
|
||||
}
|
||||
|
||||
.joined-buttons {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
|
||||
> .btn-wrapper:not(:first-child) {
|
||||
:slotted(:is(button, a, .button-like):first-child),
|
||||
:slotted(*) > :is(button, a, .button-like):first-child,
|
||||
:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
|
||||
:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
:slotted(:is(button, a, .button-like):first-child),
|
||||
:slotted(*) > :is(button, a, .button-like):first-child,
|
||||
:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
|
||||
:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* guys, I know this is nuts, I know */
|
||||
</style>
|
||||
|
||||
@@ -191,7 +191,7 @@ const isChildOfDropdown = (element) => {
|
||||
<style lang="scss" scoped>
|
||||
.animated-dropdown {
|
||||
width: 20rem;
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@@ -267,6 +267,10 @@ const isChildOfDropdown = (element) => {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
> label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.85);
|
||||
transition: filter 0.2s ease-in-out;
|
||||
|
||||
@@ -8,8 +8,12 @@
|
||||
>
|
||||
<slot></slot>
|
||||
<template #menu>
|
||||
<template v-for="(option, index) in options">
|
||||
<div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
|
||||
<template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
|
||||
<div
|
||||
v-if="option.divider"
|
||||
:key="`divider-${index}`"
|
||||
class="h-px mx-3 my-2 bg-button-bg"
|
||||
></div>
|
||||
<Button
|
||||
v-else
|
||||
:key="`option-${option.id}`"
|
||||
@@ -19,8 +23,8 @@
|
||||
transparent
|
||||
:action="
|
||||
option.action
|
||||
? () => {
|
||||
option.action()
|
||||
? (event) => {
|
||||
option.action(event)
|
||||
if (!option.remainOnClick) {
|
||||
close()
|
||||
}
|
||||
@@ -45,29 +49,56 @@
|
||||
</PopoutMenu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Button from './Button.vue'
|
||||
import PopoutMenu from './PopoutMenu.vue'
|
||||
|
||||
defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
interface BaseOption {
|
||||
shown?: boolean
|
||||
}
|
||||
|
||||
interface Divider extends BaseOption {
|
||||
divider?: boolean
|
||||
}
|
||||
|
||||
interface Item extends BaseOption {
|
||||
id: string
|
||||
action?: () => void
|
||||
link?: string
|
||||
external?: boolean
|
||||
color?:
|
||||
| 'primary'
|
||||
| 'danger'
|
||||
| 'secondary'
|
||||
| 'highlight'
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'purple'
|
||||
hoverFilled?: boolean
|
||||
hoverFilledOnly?: boolean
|
||||
remainOnClick?: boolean
|
||||
}
|
||||
|
||||
type Option = Divider | Item
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
options: Option[]
|
||||
disabled?: boolean
|
||||
position?: string
|
||||
direction?: string
|
||||
}>(),
|
||||
{
|
||||
options: () => [],
|
||||
disabled: false,
|
||||
position: 'auto',
|
||||
direction: 'auto',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div v-if="count > 1" class="paginates">
|
||||
<a
|
||||
:class="{ disabled: page === 1 }"
|
||||
:tabindex="page === 1 ? -1 : 0"
|
||||
class="left-arrow paginate has-icon"
|
||||
aria-label="Previous Page"
|
||||
:href="linkFunction(page - 1)"
|
||||
@click.prevent="page !== 1 ? switchPage(page - 1) : null"
|
||||
>
|
||||
<LeftArrowIcon />
|
||||
</a>
|
||||
<div v-if="count > 1" class="flex items-center gap-1">
|
||||
<ButtonStyled v-if="page > 1" circular type="transparent">
|
||||
<a
|
||||
aria-label="Previous Page"
|
||||
:href="linkFunction(page - 1)"
|
||||
@click.prevent="switchPage(page - 1)"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</a>
|
||||
</ButtonStyled>
|
||||
<div
|
||||
v-for="(item, index) in pages"
|
||||
:key="'page-' + item + '-' + index"
|
||||
@@ -19,39 +18,37 @@
|
||||
}"
|
||||
class="page-number-container"
|
||||
>
|
||||
<div v-if="item === '-'" class="has-icon">
|
||||
<div v-if="item === '-'">
|
||||
<GapIcon />
|
||||
</div>
|
||||
<a
|
||||
<ButtonStyled
|
||||
v-else
|
||||
:class="{
|
||||
'page-number current': page === item,
|
||||
shrink: item > 99,
|
||||
}"
|
||||
:href="linkFunction(item)"
|
||||
@click.prevent="page !== item ? switchPage(item) : null"
|
||||
circular
|
||||
:color="page === item ? 'brand' : 'standard'"
|
||||
:type="page === item ? 'standard' : 'transparent'"
|
||||
>
|
||||
{{ item }}
|
||||
</a>
|
||||
<a :href="linkFunction(item)" @click.prevent="page !== item ? switchPage(item) : null">
|
||||
{{ item }}
|
||||
</a>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
|
||||
<a
|
||||
:class="{
|
||||
disabled: page === pages[pages.length - 1],
|
||||
}"
|
||||
:tabindex="page === pages[pages.length - 1] ? -1 : 0"
|
||||
class="right-arrow paginate has-icon"
|
||||
aria-label="Next Page"
|
||||
:href="linkFunction(page + 1)"
|
||||
@click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
|
||||
>
|
||||
<RightArrowIcon />
|
||||
</a>
|
||||
<ButtonStyled v-if="page !== pages[pages.length - 1]" circular type="transparent">
|
||||
<a
|
||||
aria-label="Next Page"
|
||||
:href="linkFunction(page + 1)"
|
||||
@click.prevent="switchPage(page + 1)"
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
</a>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { GapIcon, LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
|
||||
import { GapIcon, ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
|
||||
import Button from './Button.vue'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
'switch-page': [page: number]
|
||||
@@ -61,7 +58,7 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
page: number
|
||||
count: number
|
||||
linkFunction: (page: number) => string | undefined
|
||||
linkFunction?: (page: number) => string | undefined
|
||||
}>(),
|
||||
{
|
||||
page: 1,
|
||||
@@ -73,24 +70,31 @@ const props = withDefaults(
|
||||
const pages = computed(() => {
|
||||
let pages: ('-' | number)[] = []
|
||||
|
||||
if (props.count > 7) {
|
||||
if (props.page + 3 >= props.count) {
|
||||
pages = [
|
||||
1,
|
||||
'-',
|
||||
props.count - 4,
|
||||
props.count - 3,
|
||||
props.count - 2,
|
||||
props.count - 1,
|
||||
props.count,
|
||||
]
|
||||
} else if (props.page > 5) {
|
||||
pages = [1, '-', props.page - 1, props.page, props.page + 1, '-', props.count]
|
||||
} else {
|
||||
pages = [1, 2, 3, 4, 5, '-', props.count]
|
||||
}
|
||||
} else {
|
||||
pages = Array.from({ length: props.count }, (_, i) => i + 1)
|
||||
const first = 1
|
||||
const last = props.count
|
||||
const current = props.page
|
||||
const prev = current - 1
|
||||
const next = current + 1
|
||||
const gap = '-'
|
||||
|
||||
if (prev > first) {
|
||||
pages.push(first)
|
||||
}
|
||||
if (prev > first + 1) {
|
||||
pages.push(gap)
|
||||
}
|
||||
if (prev >= first) {
|
||||
pages.push(prev)
|
||||
}
|
||||
pages.push(current)
|
||||
if (next <= last) {
|
||||
pages.push(next)
|
||||
}
|
||||
if (next < last - 1) {
|
||||
pages.push(gap)
|
||||
}
|
||||
if (next < last) {
|
||||
pages.push(last)
|
||||
}
|
||||
|
||||
return pages
|
||||
@@ -100,103 +104,3 @@ function switchPage(newPage: number) {
|
||||
emit('switch-page', Math.min(Math.max(newPage, 1), props.count))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.paginates {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-contrast);
|
||||
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
border-radius: 2rem;
|
||||
background: var(--color-raised-bg);
|
||||
cursor: pointer;
|
||||
|
||||
transition:
|
||||
opacity 0.5s ease-in-out,
|
||||
filter 0.2s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
outline 0.2s ease-in-out;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.page-number.current {
|
||||
background: var(--color-brand);
|
||||
color: var(--color-accent-contrast);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.paginate.disabled {
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover:not(&:disabled) {
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
&:active:not(&:disabled) {
|
||||
transform: scale(0.95);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.has-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.page-number-container,
|
||||
a,
|
||||
.has-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.paginates {
|
||||
height: 2em;
|
||||
margin: 0.5rem 0;
|
||||
> div,
|
||||
.has-icon {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.left-arrow {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.paginates {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 530px) {
|
||||
a {
|
||||
width: 2.5rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</button>
|
||||
<div
|
||||
class="popup-menu"
|
||||
:class="`position-${position}-${direction} ${dropdownVisible ? 'visible' : ''}`"
|
||||
:class="`position-${computedPosition}-${computedDirection} ${dropdownVisible ? 'visible' : ''}`"
|
||||
>
|
||||
<slot name="menu"> </slot>
|
||||
</div>
|
||||
@@ -28,11 +28,11 @@ const props = defineProps({
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
default: 'auto',
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
default: 'auto',
|
||||
},
|
||||
})
|
||||
defineOptions({
|
||||
@@ -42,6 +42,31 @@ defineOptions({
|
||||
const dropdownVisible = ref(false)
|
||||
const dropdown = ref(null)
|
||||
const dropdownButton = ref(null)
|
||||
const computedPosition = ref('bottom')
|
||||
const computedDirection = ref('left')
|
||||
|
||||
function updateDirection() {
|
||||
if (props.direction === 'auto') {
|
||||
if (dropdownButton.value) {
|
||||
const x = dropdownButton.value.getBoundingClientRect().left
|
||||
computedDirection.value = x < window.innerWidth / 2 ? 'right' : 'left'
|
||||
} else {
|
||||
computedDirection.value = 'left'
|
||||
}
|
||||
} else {
|
||||
computedDirection.value = props.direction
|
||||
}
|
||||
if (props.position === 'auto') {
|
||||
if (dropdownButton.value) {
|
||||
const y = dropdownButton.value.getBoundingClientRect().top
|
||||
computedPosition.value = y < window.innerHeight / 2 ? 'bottom' : 'top'
|
||||
} else {
|
||||
computedPosition.value = 'bottom'
|
||||
}
|
||||
} else {
|
||||
computedPosition.value = props.position
|
||||
}
|
||||
}
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (!props.disabled) {
|
||||
@@ -79,10 +104,15 @@ const handleClickOutside = (event) => {
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', handleClickOutside)
|
||||
window.addEventListener('resize', updateDirection)
|
||||
window.addEventListener('scroll', updateDirection)
|
||||
updateDirection()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('click', handleClickOutside)
|
||||
window.removeEventListener('resize', updateDirection)
|
||||
window.removeEventListener('scroll', updateDirection)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
138
packages/ui/src/components/base/ScrollablePanel.vue
Normal file
138
packages/ui/src/components/base/ScrollablePanel.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="scrollable-pane-wrapper" :class="{ 'max-height': !props.noMaxHeight }">
|
||||
<div
|
||||
class="wrapper-wrapper"
|
||||
:class="{
|
||||
'top-fade': !scrollableAtTop && !props.noMaxHeight,
|
||||
'bottom-fade': !scrollableAtBottom && !props.noMaxHeight,
|
||||
}"
|
||||
>
|
||||
<div ref="scrollablePane" class="scrollable-pane" @scroll="onScroll">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
noMaxHeight?: boolean
|
||||
}>(),
|
||||
{
|
||||
noMaxHeight: false,
|
||||
},
|
||||
)
|
||||
|
||||
const scrollableAtTop = ref(true)
|
||||
const scrollableAtBottom = ref(false)
|
||||
const scrollablePane = ref(null)
|
||||
let resizeObserver
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(function () {
|
||||
if (scrollablePane.value) {
|
||||
updateFade(
|
||||
scrollablePane.value.scrollTop,
|
||||
scrollablePane.value.offsetHeight,
|
||||
scrollablePane.value.scrollHeight,
|
||||
)
|
||||
}
|
||||
})
|
||||
resizeObserver.observe(scrollablePane.value)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect()
|
||||
}
|
||||
})
|
||||
function updateFade(scrollTop, offsetHeight, scrollHeight) {
|
||||
scrollableAtBottom.value = Math.ceil(scrollTop + offsetHeight) >= scrollHeight
|
||||
scrollableAtTop.value = scrollTop === 0
|
||||
}
|
||||
function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
|
||||
updateFade(scrollTop, offsetHeight, scrollHeight)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollable-pane-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&.max-height {
|
||||
max-height: 19rem;
|
||||
}
|
||||
}
|
||||
.wrapper-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
--_fade-height: 4rem;
|
||||
margin-bottom: var(--gap-sm);
|
||||
&.top-fade::before,
|
||||
&.bottom-fade::after {
|
||||
opacity: 1;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.125s ease;
|
||||
height: var(--_fade-height);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
top: 0;
|
||||
background-image: linear-gradient(
|
||||
var(--scrollable-pane-bg, var(--color-raised-bg)),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
&::after {
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(
|
||||
transparent,
|
||||
var(--scrollable-pane-bg, var(--color-raised-bg))
|
||||
);
|
||||
}
|
||||
}
|
||||
.scrollable-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
transition: all;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--gap-md);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--color-bg);
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 4px;
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
27
packages/ui/src/components/base/StatItem.vue
Normal file
27
packages/ui/src/components/base/StatItem.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-3">
|
||||
<slot></slot>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">{{ value }}</span>
|
||||
<span class="text-secondary">{{ label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
:slotted(*) {
|
||||
@apply h-6 w-6 text-secondary;
|
||||
}
|
||||
</style>
|
||||
@@ -21,7 +21,9 @@ export { default as Pagination } from './base/Pagination.vue'
|
||||
export { default as PopoutMenu } from './base/PopoutMenu.vue'
|
||||
export { default as ProjectCard } from './base/ProjectCard.vue'
|
||||
export { default as Promotion } from './base/Promotion.vue'
|
||||
export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
|
||||
export { default as Slider } from './base/Slider.vue'
|
||||
export { default as StatItem } from './base/StatItem.vue'
|
||||
export { default as Toggle } from './base/Toggle.vue'
|
||||
|
||||
// Branding
|
||||
@@ -51,3 +53,6 @@ export { default as SearchFilter } from './search/SearchFilter.vue'
|
||||
|
||||
// Billing
|
||||
export { default as PurchaseModal } from './billing/PurchaseModal.vue'
|
||||
|
||||
// Version
|
||||
export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<Modal ref="modal" :header="title" :noblur="noblur">
|
||||
<div class="modal-delete">
|
||||
<NewModal ref="modal" :noblur="noblur" danger>
|
||||
<template #title>
|
||||
<slot name="title">
|
||||
<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
|
||||
</slot>
|
||||
</template>
|
||||
<div>
|
||||
<div class="markdown-body" v-html="renderString(description)" />
|
||||
<label v-if="hasToType" for="confirmation" class="confirmation-label">
|
||||
<span>
|
||||
@@ -19,25 +24,30 @@
|
||||
@input="type"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group push-right">
|
||||
<button class="btn" @click="modal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-danger" :disabled="action_disabled" @click="proceed">
|
||||
<TrashIcon />
|
||||
{{ proceedLabel }}
|
||||
</button>
|
||||
<div class="flex gap-2 mt-6">
|
||||
<ButtonStyled color="red">
|
||||
<button :disabled="action_disabled" @click="proceed">
|
||||
<TrashIcon />
|
||||
{{ proceedLabel }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled>
|
||||
<button @click="modal.hide()">
|
||||
<XIcon />
|
||||
Cancel
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</NewModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { renderString } from '@modrinth/utils'
|
||||
import { ref } from 'vue'
|
||||
import { TrashIcon, XIcon } from '@modrinth/assets'
|
||||
import Modal from './Modal.vue'
|
||||
import NewModal from './NewModal.vue'
|
||||
import ButtonStyled from '../base/ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
confirmationText: {
|
||||
@@ -92,36 +102,3 @@ function show() {
|
||||
|
||||
defineExpose({ show })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.modal-delete {
|
||||
padding: var(--gap-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.markdown-body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.confirmation-label {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.confirmation-text {
|
||||
padding-right: 0.25ch;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.confirmation-input {
|
||||
input {
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-left: auto;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div v-if="open">
|
||||
<div
|
||||
v-if="open"
|
||||
:style="`${mouseX !== -1 ? `--_mouse-x: ${mouseX};` : ''} ${mouseY !== -1 ? `--_mouse-y: ${mouseY};` : ''}`"
|
||||
>
|
||||
<div
|
||||
:class="{ shown: visible }"
|
||||
class="tauri-overlay"
|
||||
@@ -10,15 +13,22 @@
|
||||
:class="{
|
||||
shown: visible,
|
||||
noblur: props.noblur,
|
||||
danger: danger,
|
||||
}"
|
||||
class="modal-overlay"
|
||||
@click="() => (closable ? hide() : {})"
|
||||
/>
|
||||
<div class="modal-container" :class="{ shown: visible }">
|
||||
<div class="modal-body flex flex-col bg-bg-raised rounded-2xl p-6">
|
||||
<div class="flex items-center pb-6 border-b-[1px] border-button-bg">
|
||||
<div class="flex flex-grow items-center gap-3">
|
||||
<slot name="title" />
|
||||
<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
|
||||
<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
|
||||
<div
|
||||
class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-button-bg max-w-full"
|
||||
>
|
||||
<div class="flex text-wrap break-words items-center gap-3 min-w-0">
|
||||
<slot name="title">
|
||||
<span v-if="header" class="text-lg font-extrabold text-contrast">
|
||||
{{ header }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<ButtonStyled v-if="closable" circular>
|
||||
<button @click="hide">
|
||||
@@ -26,8 +36,8 @@
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<slot> You just lost the game. </slot>
|
||||
<div class="overflow-y-auto p-6">
|
||||
<slot> You just lost the game.</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,27 +45,42 @@
|
||||
<div v-else></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { XIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
import ButtonStyled from '../base/ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
noblur: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
noblur?: boolean
|
||||
closable?: boolean
|
||||
danger?: boolean
|
||||
closeOnEsc?: boolean
|
||||
warnOnClose?: boolean
|
||||
header?: string
|
||||
}>(),
|
||||
{
|
||||
type: true,
|
||||
closable: true,
|
||||
danger: false,
|
||||
closeOnEsc: true,
|
||||
warnOnClose: false,
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
const open = ref(false)
|
||||
const visible = ref(false)
|
||||
|
||||
function show() {
|
||||
function show(event?: MouseEvent) {
|
||||
open.value = true
|
||||
window.addEventListener('mousedown', updateMousePosition)
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
if (event) {
|
||||
updateMousePosition(event)
|
||||
} else {
|
||||
mouseX.value = window.innerWidth / 2
|
||||
mouseY.value = window.innerHeight / 2
|
||||
}
|
||||
setTimeout(() => {
|
||||
visible.value = true
|
||||
}, 50)
|
||||
@@ -63,6 +88,8 @@ function show() {
|
||||
|
||||
function hide() {
|
||||
visible.value = false
|
||||
window.removeEventListener('mousedown', updateMousePosition)
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
setTimeout(() => {
|
||||
open.value = false
|
||||
}, 300)
|
||||
@@ -72,6 +99,22 @@ defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
|
||||
const mouseX = ref(-1)
|
||||
const mouseY = ref(-1)
|
||||
|
||||
function updateMousePosition(event: { clientX: number; clientY: number }) {
|
||||
mouseX.value = event.clientX
|
||||
mouseY.value = event.clientY
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (props.closeOnEsc && event.key === 'Escape') {
|
||||
hide()
|
||||
mouseX.value = window.innerWidth / 2
|
||||
mouseY.value = window.innerHeight / 2
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -91,15 +134,18 @@ defineExpose({
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
inset: -5rem;
|
||||
z-index: 19;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-out;
|
||||
background: linear-gradient(to bottom, rgba(27, 48, 42, 0.52) 0%, rgba(13, 21, 26, 0.95) 100%);
|
||||
transform: translateY(2rem) scale(0.8);
|
||||
border-radius: 120px;
|
||||
background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
|
||||
//transform: translate(
|
||||
// calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
|
||||
// calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
|
||||
// )
|
||||
// scaleX(0.8) scaleY(0.5);
|
||||
border-radius: 180px;
|
||||
filter: blur(5px);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
@@ -110,7 +156,7 @@ defineExpose({
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
backdrop-filter: blur(5px);
|
||||
transform: translateY(0) scale(1);
|
||||
transform: translate(0, 0) scaleX(1) scaleY(1);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
@@ -118,6 +164,10 @@ defineExpose({
|
||||
backdrop-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: linear-gradient(to bottom, rgba(43, 18, 26, 0.52) 0%, rgba(49, 10, 15, 0.95) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@@ -132,13 +182,19 @@ defineExpose({
|
||||
z-index: 21;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate(
|
||||
calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 16),
|
||||
calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 16)
|
||||
);
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
&.shown {
|
||||
visibility: visible;
|
||||
transform: translate(0, 0);
|
||||
|
||||
.modal-body {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
@@ -149,11 +205,11 @@ defineExpose({
|
||||
max-height: calc(100% - 2 * var(--gap-lg));
|
||||
max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: fit-content;
|
||||
pointer-events: auto;
|
||||
scale: 0.97;
|
||||
|
||||
transform: translateY(1rem);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { useVIntl, defineMessages } from '@vintl/vintl'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
channel: 'release' | 'beta' | 'alpha'
|
||||
large?: boolean
|
||||
}>(),
|
||||
{
|
||||
large: false,
|
||||
},
|
||||
)
|
||||
|
||||
const messages = defineMessages({
|
||||
releaseSymbol: {
|
||||
id: 'project.versions.channel.release.symbol',
|
||||
defaultMessage: 'R',
|
||||
},
|
||||
betaSymbol: {
|
||||
id: 'project.versions.channel.beta.symbol',
|
||||
defaultMessage: 'B',
|
||||
},
|
||||
alphaSymbol: {
|
||||
id: 'project.versions.channel.alpha.symbol',
|
||||
defaultMessage: 'A',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:style="`--_size: ${size};`"
|
||||
:class="`flex ${large ? 'text-lg w-[2.625rem] h-[2.625rem]' : 'text-sm w-9 h-9'} font-bold justify-center items-center rounded-full ${channel === 'release' ? 'bg-bg-green text-brand-green' : channel === 'beta' ? 'bg-bg-orange text-brand-orange' : 'bg-bg-red text-brand-red'}`"
|
||||
>
|
||||
{{ channel ? formatMessage(messages[`${channel}Symbol`]) : '?' }}
|
||||
</div>
|
||||
</template>
|
||||
246
packages/utils/index.d.ts
vendored
Normal file
246
packages/utils/index.d.ts
vendored
Normal file
@@ -0,0 +1,246 @@
|
||||
const BASE62_CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' as const;
|
||||
type Base62Char = typeof BASE62_CHARS[number];
|
||||
|
||||
declare global {
|
||||
type ModrinthId = `${Base62Char}`[];
|
||||
|
||||
type Environment = 'required' | 'optional' | 'unsupported' | 'unknown';
|
||||
|
||||
type RequestableStatus = 'approved' | 'archived' | 'unlisted' | 'private'
|
||||
type ApprovedStatus = RequestableStatus | 'scheduled'
|
||||
type UnapprovedStatus = 'draft' | 'processing' | 'rejected' | 'withheld'
|
||||
type ProjectStatus = ApprovedStatus | UnapprovedStatus | 'unknown'
|
||||
|
||||
type DonationPlatform =
|
||||
{ short: "patreon", name: "Patreon" }
|
||||
| { short: "bmac", name: "Buy Me A Coffee" }
|
||||
| { short: "paypal", name: "PayPal" }
|
||||
| { short: "github", name: "GitHub Sponsors" }
|
||||
| { short: "ko-fi", name: "Ko-fi" }
|
||||
|
|
||||
| { short: "other", name: "Other" }
|
||||
|
||||
type ProjectType = 'mod' | 'modpack' | 'resourcepack' | 'shader'
|
||||
type MonetizationStatus = 'monetized' | 'demonetized' | 'force-demonetized'
|
||||
|
||||
type GameVersion = string;
|
||||
type Platform = string;
|
||||
type Category = string;
|
||||
type CategoryOrPlatform = Category | Platform
|
||||
|
||||
interface DonationLink<T extends DonationPlatform> {
|
||||
id: T["short"],
|
||||
platform: T["name"],
|
||||
url: string
|
||||
}
|
||||
|
||||
interface GalleryImage {
|
||||
url: string,
|
||||
featured: boolean,
|
||||
created: string,
|
||||
ordering: number,
|
||||
|
||||
title?: string,
|
||||
description?: string,
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: ModrinthId,
|
||||
project_type: ProjectType,
|
||||
slug: string,
|
||||
title: string,
|
||||
description: string,
|
||||
status: ProjectStatus,
|
||||
requested_status: RequestableStatus,
|
||||
monetization_status: MonetizationStatus,
|
||||
|
||||
body: string,
|
||||
icon_url?: string,
|
||||
color?: number,
|
||||
|
||||
categories: Category[],
|
||||
additional_categories: Category[],
|
||||
|
||||
downloads: number,
|
||||
followers: number,
|
||||
|
||||
client_side: Environment,
|
||||
server_side: Environment,
|
||||
|
||||
team: ModrinthId,
|
||||
thread_id: ModrinthId,
|
||||
|
||||
issues_url?: string,
|
||||
source_url?: string,
|
||||
wiki_url?: string,
|
||||
discord_url?: string,
|
||||
donation_urls: DonationLink[],
|
||||
|
||||
published: string,
|
||||
updated: string,
|
||||
approved: string,
|
||||
queued: string,
|
||||
|
||||
game_versions: GameVersion[],
|
||||
loaders: Platform[],
|
||||
|
||||
versions: ModrinthId[],
|
||||
gallery?: GalleryImage[]
|
||||
|
||||
license: {
|
||||
id: string,
|
||||
name, string,
|
||||
url?: string,
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
interface SearchResult {
|
||||
id: ModrinthId,
|
||||
project_type: ProjectType,
|
||||
slug: string,
|
||||
title: string,
|
||||
description: string,
|
||||
monetization_status: MonetizationStatus,
|
||||
|
||||
icon_url?: string,
|
||||
color?: number,
|
||||
|
||||
categories: CategoryOrPlatform[],
|
||||
display_categories: CategoryOrPlatform[],
|
||||
versions: GameVersion[],
|
||||
latest_version: GameVersion,
|
||||
|
||||
downloads: number,
|
||||
follows: number,
|
||||
|
||||
client_side: Environment,
|
||||
server_side: Environment,
|
||||
|
||||
author: string,
|
||||
|
||||
date_created: string,
|
||||
date_modified: string,
|
||||
|
||||
gallery: string[]
|
||||
featured_gallery?: string[]
|
||||
|
||||
license: string,
|
||||
}
|
||||
|
||||
type DependencyType = 'required' | 'optional' | 'incompatible' | 'embedded'
|
||||
|
||||
interface VersionDependency {
|
||||
dependency_type: DependencyType,
|
||||
file_name?: string,
|
||||
}
|
||||
|
||||
interface ProjectDependency {
|
||||
dependency_type: DependencyType,
|
||||
project_id?: string,
|
||||
}
|
||||
|
||||
interface FileDependency {
|
||||
dependency_type: DependencyType,
|
||||
file_name?: string,
|
||||
}
|
||||
|
||||
type Dependency = VersionDependency | ProjectDependency | FileDependency
|
||||
type VersionChannel = 'release' | 'beta' | 'alpha'
|
||||
type VersionStatus = 'listed' | 'archived' | 'draft' | 'unlisted' | 'scheduled' | 'unknown'
|
||||
type FileType = 'required-resource-pack' | 'optional-resource-pack'
|
||||
|
||||
interface VersionFileHash {
|
||||
sha512: string,
|
||||
sha1: string,
|
||||
}
|
||||
|
||||
interface VersionFile {
|
||||
hashes: VersionFileHash[],
|
||||
url: string,
|
||||
filename: string,
|
||||
primary: boolean,
|
||||
size: number,
|
||||
file_type?: FileType
|
||||
}
|
||||
|
||||
interface Version {
|
||||
name: string,
|
||||
version_number: string,
|
||||
changelog?: string,
|
||||
dependencies: Dependency[],
|
||||
game_versions: GameVersion[],
|
||||
version_type: VersionChannel,
|
||||
loaders: Platform[],
|
||||
featured: boolean,
|
||||
status: VersionStatus,
|
||||
id: ModrinthId,
|
||||
project_id: ModrinthId,
|
||||
author_id: ModrinthId,
|
||||
date_published: string,
|
||||
downloads: number,
|
||||
files: VersionFile[],
|
||||
}
|
||||
|
||||
interface PayoutData {
|
||||
balance: number,
|
||||
payout_wallet: 'paypal' | 'venmo',
|
||||
payout_wallet_type: 'email' | 'phone' | 'user_handle',
|
||||
payout_address: string,
|
||||
}
|
||||
|
||||
type UserRole = 'admin' | 'moderator' | 'pyro' | 'developer'
|
||||
|
||||
enum UserBadge {
|
||||
MIDAS = 1 << 0,
|
||||
EARLY_MODPACK_ADOPTER = 1 << 1,
|
||||
EARLY_RESPACK_ADOPTER = 1 << 2,
|
||||
EARLY_PLUGIN_ADOPTER = 1 << 3,
|
||||
ALPHA_TESTER = 1 << 4,
|
||||
CONTRIBUTOR = 1 << 5,
|
||||
TRANSLATOR = 1 << 6,
|
||||
}
|
||||
|
||||
type UserBadges = number;
|
||||
|
||||
interface User {
|
||||
username: string,
|
||||
email?: string,
|
||||
bio?: string,
|
||||
payout_data?: PayoutData,
|
||||
id: ModrinthId,
|
||||
avatar_url: string,
|
||||
created: string,
|
||||
role: UserRole,
|
||||
badges: UserBadges,
|
||||
auth_providers?: string[],
|
||||
email_verified?: boolean,
|
||||
has_password?: boolean,
|
||||
has_totp?: boolean
|
||||
}
|
||||
|
||||
enum TeamMemberPermission {
|
||||
UPLOAD_VERSION = 1 << 0,
|
||||
DELETE_VERSION = 1 << 1,
|
||||
EDIT_DETAILS = 1 << 2,
|
||||
EDIT_BODY = 1 << 3,
|
||||
MANAGE_INVITES = 1 << 4,
|
||||
REMOVE_MEMBER = 1 << 5,
|
||||
EDIT_MEMBER = 1 << 6,
|
||||
DELETE_PROJECT = 1 << 7,
|
||||
VIEW_ANALYTICS = 1 << 8,
|
||||
VIEW_PAYOUTS = 1 << 9,
|
||||
}
|
||||
|
||||
type TeamMemberPermissions = number;
|
||||
|
||||
interface TeamMember {
|
||||
team_id: ModrinthId,
|
||||
user: User,
|
||||
role: string,
|
||||
permissions: TeamMemberPermissions,
|
||||
accepted: boolean,
|
||||
payouts_split: number,
|
||||
ordering: number,
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./index.ts",
|
||||
"types": "./index.ts",
|
||||
"types": "./index.d.ts",
|
||||
"scripts": {
|
||||
"lint": "eslint . && prettier --check .",
|
||||
"fix": "eslint . --fix && prettier --write ."
|
||||
|
||||
Reference in New Issue
Block a user