feat：移除了弹窗，服务器添加sls
This commit is contained in:
1
packages/ui/.prettierignore
Normal file
1
packages/ui/.prettierignore
Normal file
@ -0,0 +1 @@
|
||||
src/locales/**
|
||||
0
packages/ui/AGENTS.md
Normal file
0
packages/ui/AGENTS.md
Normal file
91
packages/ui/CLAUDE.md
Normal file
91
packages/ui/CLAUDE.md
Normal file
@ -0,0 +1,91 @@
|
||||
# Architecture
|
||||
|
||||
The shared UI package used by both `apps/website` (Nuxt 3) and `apps/app-frontend` (Vue 3 + Tauri). Components here must be platform-agnostic — use dependency injection for platform-specific behavior.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Vue components organized by feature domain
|
||||
├── composables/ # Vue 3 composition API hooks
|
||||
├── layouts/ # Self-contained page layouts (see below)
|
||||
├── providers/ # Dependency injection contexts (createContext pattern)
|
||||
├── utils/ # Utility functions and constants
|
||||
├── pages/ # Cross platform page components
|
||||
├── locales/ # 34 language locale files (FormatJS)
|
||||
├── styles/ # Tailwind CSS utilities
|
||||
```
|
||||
|
||||
Each subdirectory under `components/` has an `index.ts` barrel file. All public API is re-exported from the root `index.ts`.
|
||||
|
||||
### `src/layouts/`
|
||||
|
||||
Self-contained page layouts shared across frontends. Split into two categories:
|
||||
|
||||
- **`shared/`** — Reusable layout modules with their own components, composables, providers, and types. Each module is a self-contained unit (e.g. `shared/content-tab/` contains the content/mods tab layout with its own `layout.vue`, `components/`, `composables/`, `providers/`, and `types.ts`).
|
||||
- **`wrapped/`** — Page-level Vue components that mirror route structures. These are full page implementations consumed by the desktop application and, where appropriate, the website.
|
||||
|
||||
Files inside `layouts/` use the `#ui/*` import alias (resolved via the `"imports"` field in `package.json`) to reference other `src/` modules like `#ui/components/base/ButtonStyled.vue` or `#ui/composables/i18n`.
|
||||
|
||||
# Code Guidelines
|
||||
|
||||
### Tailwind Configuration
|
||||
|
||||
All frontend packages share a Tailwind preset at `packages/tooling-config/tailwind/tailwind-preset.ts`. This package's `tailwind.config.ts` extends it:
|
||||
|
||||
```ts
|
||||
import preset from '@modrinth/tooling-config/tailwind/tailwind-preset.ts'
|
||||
```
|
||||
|
||||
CSS custom properties are defined in `packages/assets/styles/variables.scss` with light, dark, and OLED theme variants.
|
||||
|
||||
### Color Usage Rules
|
||||
|
||||
**Use `surface-*` variables for backgrounds — never aliased `bg-*` color variables:**
|
||||
|
||||
| Token | Usage |
|
||||
| ---------------- | ----------------------------------------- |
|
||||
| `bg-surface-1` | Deepest background layer |
|
||||
| `bg-surface-1.5` | Odd row background (tables) |
|
||||
| `bg-surface-2` | Even row background, secondary panels |
|
||||
| `bg-surface-3` | Headers, floating bar backgrounds, inputs |
|
||||
| `bg-surface-4` | Cards, elevated surfaces |
|
||||
| `bg-surface-5` | Borders, dividers |
|
||||
|
||||
**For text colors:**
|
||||
|
||||
| Class | Usage |
|
||||
| ---------------- | -------------------------------- |
|
||||
| `text-contrast` | Primary headings |
|
||||
| `text-primary` | Default body text |
|
||||
| `text-secondary` | Reduced emphasis, secondary info |
|
||||
|
||||
**Brand and semantic colors** not all exposed as Figma variables — refer to `packages/assets/styles/variables.scss` for the full set:
|
||||
|
||||
- `bg-{color}`, `text-{color}` etc. — Primary brand colors
|
||||
- `bg-{color}-highlight` — 25% opacity semantic highlights
|
||||
|
||||
**Color palette** (each with shades 50–950): red, orange, green, blue, purple, gray. Platform-specific colors also exist (fabric, forge, quilt, neoforge, etc.).
|
||||
|
||||
## Dependency Injection
|
||||
|
||||
This package defines the DI layer using `createContext` from `src/providers/index.ts`. See the `dependency-injection` skill (`.claude/skills/dependency-injection/SKILL.md`) for full documentation.
|
||||
|
||||
Key providers exported from this package:
|
||||
|
||||
- `provideModrinthClient` / `injectModrinthClient` — API client
|
||||
- `provideNotificationManager` / `injectNotificationManager` — Notifications
|
||||
|
||||
## Vue Template Rules
|
||||
|
||||
### Multi-statement event handlers
|
||||
|
||||
Never use newline-separated statements in Vue template event handlers like `@click`. Vue's template compiler cannot parse multi-line expressions separated only by newlines. Always use semicolons on a single line:
|
||||
|
||||
```vue
|
||||
<!-- BAD: will cause "Unexpected token" parse error -->
|
||||
@click=" foo = true $emit('bar') "
|
||||
|
||||
<!-- GOOD -->
|
||||
@click="foo = true; $emit('bar')"
|
||||
```
|
||||
30
packages/ui/COPYING.md
Normal file
30
packages/ui/COPYING.md
Normal file
@ -0,0 +1,30 @@
|
||||
# Copying
|
||||
|
||||
The source code of Modrinth's UI library is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
|
||||
|
||||
## Modrinth logo
|
||||
|
||||
The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
|
||||
|
||||
> All rights reserved. © 2020-2025 Rinth, Inc.
|
||||
|
||||
This includes, but may not be limited to, the following files:
|
||||
|
||||
- src/components/brand/\*
|
||||
- src/components/servers/ModrinthServersIcon.vue
|
||||
|
||||
## External logos
|
||||
|
||||
The following files are owned by their respective copyright holders and must be used within each of their Brand Guidelines:
|
||||
|
||||
- src/components/servers/MedalBackgroundImage.vue
|
||||
|
||||
## LogShare-Web-UI log viewer
|
||||
|
||||
The log viewer (log highlighting engine, virtualized log viewport, and console toolbar) is adapted from [LogShare-Web-UI](https://github.com/NingZeStudio/LogShare-Web-UI), the frontend of the LogShare.CN log analysis platform, at commit `b5ae2dc`. LogShare-Web-UI is distributed under the MIT License, Copyright (c) 2024 LogShare.CN Team; a verbatim copy of that license is provided in [third-party/licenses/MIT.txt](../../third-party/licenses/MIT.txt).
|
||||
|
||||
The following files are adapted from LogShare-Web-UI:
|
||||
|
||||
- `src/layouts/shared/console/composables/log-highlight.ts` — regex rules, Trie pre-filtering, LRU caching and HTML coloring logic ported from `src/lib/logParser.worker.ts`, with colors from `src/assets/LogsAnalysis.css`
|
||||
- `src/layouts/shared/console/components/LogViewport.vue` — interaction and layout modeled after `src/views/LogView.vue` (line numbers, level filtering, line wrapping, font size, search highlighting, fullscreen)
|
||||
- `src/layouts/shared/console/layout.vue` — console toolbar arrangement modeled after `src/views/LogView.vue`
|
||||
674
packages/ui/LICENSE
Normal file
674
packages/ui/LICENSE
Normal file
@ -0,0 +1,674 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users. We, the Free Software Foundation, use the
|
||||
GNU General Public License for most of our software; it applies also to
|
||||
any other work released this way by its authors. You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
authors of previous versions.
|
||||
|
||||
Some devices are designed to deny users access to install or run
|
||||
modified versions of the software inside them, although the manufacturer
|
||||
can do so. This is fundamentally incompatible with the aim of
|
||||
protecting users' freedom to change the software. The systematic
|
||||
pattern of such abuse occurs in the area of products for individuals to
|
||||
use, which is precisely where it is most unacceptable. Therefore, we
|
||||
have designed this version of the GPL to prohibit the practice for those
|
||||
products. If such problems arise substantially in other domains, we
|
||||
stand ready to extend this provision to those domains in future versions
|
||||
of the GPL, as needed to protect the freedom of users.
|
||||
|
||||
Finally, every program is threatened constantly by software patents.
|
||||
States should not allow patents to restrict development and use of
|
||||
software on general-purpose computers, but in those that do, we wish to
|
||||
avoid the special danger that patents applied to a free program could
|
||||
make it effectively proprietary. To prevent this, the GPL assures that
|
||||
patents cannot be used to render the program non-free.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU Affero General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, your program's commands
|
||||
might be different; for a GUI interface, you would use an "about box".
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU GPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
|
||||
The GNU General Public License does not permit incorporating your program
|
||||
into proprietary programs. If your program is a subroutine library, you
|
||||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<https://www.gnu.org/licenses/why-not-lgpl.html>.
|
||||
3
packages/ui/eslint.config.mjs
Normal file
3
packages/ui/eslint.config.mjs
Normal file
@ -0,0 +1,3 @@
|
||||
import baseConfig from '@modrinth/tooling-config/eslint/nuxt.mjs'
|
||||
|
||||
export default baseConfig
|
||||
6
packages/ui/index.ts
Normal file
6
packages/ui/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export * from './src/components'
|
||||
export * from './src/composables'
|
||||
export * from './src/layouts'
|
||||
export * from './src/locales'
|
||||
export * from './src/providers'
|
||||
export * from './src/utils'
|
||||
89
packages/ui/package.json
Normal file
89
packages/ui/package.json
Normal file
@ -0,0 +1,89 @@
|
||||
{
|
||||
"name": "@modrinth/ui",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"main": "./index.ts",
|
||||
"types": "./index.ts",
|
||||
"imports": {
|
||||
"#ui/*": "./src/*"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./index.ts",
|
||||
"default": "./index.ts"
|
||||
},
|
||||
"./src/*": "./src/*"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint . && prettier --check .",
|
||||
"test": "node --test \"src/**/*.test.ts\"",
|
||||
"fix": "eslint . --fix && prettier --write .",
|
||||
"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace",
|
||||
"intl:prune-local": "pnpm -w scripts i18n-icu-contract prune-local --scope packages/ui"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^6.2.12",
|
||||
"@modrinth/tooling-config": "workspace:*",
|
||||
"@stripe/stripe-js": "^7.3.1",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"stripe": "^18.1.1",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.4.6",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-component-type-helpers": "^3.1.8",
|
||||
"vue-router": "^4.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.3.2",
|
||||
"@codemirror/lang-markdown": "^6.2.3",
|
||||
"@codemirror/language": "^6.9.3",
|
||||
"@codemirror/state": "^6.3.2",
|
||||
"@codemirror/view": "^6.22.1",
|
||||
"@modrinth/api-client": "workspace:*",
|
||||
"@modrinth/assets": "workspace:*",
|
||||
"@modrinth/utils": "workspace:*",
|
||||
"@sfirew/minecraft-motd-parser": "^1.1.6",
|
||||
"@tanstack/vue-query": "5.90.7",
|
||||
"@tauri-apps/plugin-dialog": "^2.2.1",
|
||||
"@tresjs/cientos": "^4.3.0",
|
||||
"@tresjs/core": "^4.3.4",
|
||||
"@tresjs/post-processing": "^2.4.0",
|
||||
"@types/dompurify": "^3.0.5",
|
||||
"@types/markdown-it": "^14.1.1",
|
||||
"@types/three": "^0.172.0",
|
||||
"@vintl/how-ago": "^3.0.1",
|
||||
"@vueuse/core": "^11.1.0",
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-search": "^0.16.0",
|
||||
"@xterm/xterm": "^6.0.0",
|
||||
"ace-builds": "^1.43.5",
|
||||
"apexcharts": "^4.0.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"dompurify": "^3.1.7",
|
||||
"es-toolkit": "^1.44.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"floating-vue": "^5.2.2",
|
||||
"fuse.js": "^6.6.2",
|
||||
"highlight.js": "^11.9.0",
|
||||
"intl-messageformat": "^10.7.7",
|
||||
"jszip": "^3.10.1",
|
||||
"lru-cache": "^11.2.4",
|
||||
"markdown-it": "^13.0.2",
|
||||
"motion-v": "^2.2.1",
|
||||
"overlayscrollbars": "^2.15.1",
|
||||
"postprocessing": "^6.37.6",
|
||||
"qrcode.vue": "^3.4.1",
|
||||
"three": "^0.172.0",
|
||||
"vue-i18n": "^10.0.0",
|
||||
"vue-select": "4.0.0-beta.6",
|
||||
"vue-typed-virtual-list": "^1.0.10",
|
||||
"vue3-ace-editor": "^2.2.4",
|
||||
"vue3-apexcharts": "^1.5.2",
|
||||
"xss": "^1.0.14"
|
||||
},
|
||||
"web-types": "../../web-types.json"
|
||||
}
|
||||
6
packages/ui/postcss.config.js
Normal file
6
packages/ui/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
150
packages/ui/src/components/base/Accordion.vue
Normal file
150
packages/ui/src/components/base/Accordion.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div v-bind="$attrs">
|
||||
<div v-if="divider && (!!slots.title || !!slots.button)" class="flex items-center gap-4 mb-4">
|
||||
<button
|
||||
:class="
|
||||
buttonClass ??
|
||||
'group flex items-center gap-1 bg-transparent m-0 p-0 border-none cursor-pointer'
|
||||
"
|
||||
@click="() => (forceOpen ? undefined : toggledOpen ? close() : open())"
|
||||
>
|
||||
<slot name="button" :open="isOpen">
|
||||
<div
|
||||
class="flex items-center gap-1 whitespace-nowrap transition-colors text-primary group-hover:text-contrast"
|
||||
>
|
||||
<slot name="title" :open="isOpen" />
|
||||
<DropdownIcon
|
||||
v-if="!forceOpen"
|
||||
class="size-5 transition-transform duration-300 shrink-0 text-secondary group-hover:text-primary"
|
||||
:class="{ 'rotate-180': isOpen }"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
</button>
|
||||
<hr class="h-px w-full border-none bg-divider" aria-hidden="true" />
|
||||
</div>
|
||||
<button
|
||||
v-else-if="!!slots.title || !!slots.button"
|
||||
:class="buttonClass ?? 'flex flex-col gap-2 bg-transparent m-0 p-0 border-none'"
|
||||
@click="() => (forceOpen ? undefined : toggledOpen ? close() : open())"
|
||||
>
|
||||
<slot name="button" :open="isOpen">
|
||||
<div class="flex items-center gap-1 w-full text-contrast">
|
||||
<slot name="title" :open="isOpen" />
|
||||
<DropdownIcon
|
||||
v-if="!forceOpen"
|
||||
class="ml-auto size-5 transition-transform duration-300 shrink-0 text-contrast"
|
||||
:class="{ 'rotate-180': isOpen }"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="summary" />
|
||||
</button>
|
||||
<div
|
||||
class="accordion-content"
|
||||
:class="{ open: isOpen, 'overflow-visible': overflowVisible && showOverflow }"
|
||||
@transitionend="onTransitionEnd"
|
||||
>
|
||||
<div>
|
||||
<div :class="contentClass ? contentClass : ''" :inert="!isOpen">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DropdownIcon } from '@modrinth/assets'
|
||||
import { computed, ref, useSlots, watch } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
openByDefault?: boolean
|
||||
type?: 'standard' | 'outlined' | 'transparent'
|
||||
buttonClass?: string
|
||||
contentClass?: string
|
||||
titleWrapperClass?: string
|
||||
forceOpen?: boolean
|
||||
overflowVisible?: boolean
|
||||
divider?: boolean
|
||||
}>(),
|
||||
{
|
||||
type: 'standard',
|
||||
openByDefault: false,
|
||||
buttonClass: null,
|
||||
contentClass: null,
|
||||
titleWrapperClass: null,
|
||||
forceOpen: false,
|
||||
overflowVisible: false,
|
||||
divider: false,
|
||||
},
|
||||
)
|
||||
|
||||
const toggledOpen = ref(props.openByDefault)
|
||||
const isOpen = computed(() => toggledOpen.value || props.forceOpen)
|
||||
const showOverflow = ref(props.openByDefault)
|
||||
const emit = defineEmits(['onOpen', 'onClose'])
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
watch(
|
||||
() => props.openByDefault,
|
||||
(newValue) => {
|
||||
if (newValue !== toggledOpen.value) {
|
||||
toggledOpen.value = newValue
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function open() {
|
||||
toggledOpen.value = true
|
||||
emit('onOpen')
|
||||
}
|
||||
function close() {
|
||||
showOverflow.value = false
|
||||
toggledOpen.value = false
|
||||
emit('onClose')
|
||||
}
|
||||
function onTransitionEnd() {
|
||||
if (isOpen.value) {
|
||||
showOverflow.value = true
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
isOpen: toggledOpen,
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.accordion-content {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s cubic-bezier(0, 0.6, 0.3, 1);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.accordion-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-content.open {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.accordion-content > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-content.overflow-visible > div {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
203
packages/ui/src/components/base/Admonition.vue
Normal file
203
packages/ui/src/components/base/Admonition.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'relative grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-start gap-x-2 rounded-2xl border border-solid p-4 text-contrast',
|
||||
progress != null ? 'overflow-hidden pb-5' : '',
|
||||
typeClasses[type],
|
||||
]"
|
||||
>
|
||||
<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
|
||||
<component :is="getSeverityIcon(type)" :class="['h-6 w-6 flex-none', iconClasses[type]]" />
|
||||
</slot>
|
||||
<div class="col-start-2 flex min-w-0 flex-1 flex-col gap-2">
|
||||
<div
|
||||
v-if="header || $slots.header || normalizedTimestamp"
|
||||
class="flex flex-wrap items-center gap-2 text-lg font-semibold leading-6"
|
||||
>
|
||||
<slot name="header">{{ header }}</slot>
|
||||
<span
|
||||
v-if="normalizedTimestamp"
|
||||
v-tooltip="timestampTooltip"
|
||||
class="flex items-center gap-1.5 text-base font-medium leading-normal text-secondary"
|
||||
>
|
||||
<ClockIcon class="size-4" />
|
||||
{{ relativeTimeLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-normal text-contrast/85 leading-tight [overflow-wrap:anywhere]">
|
||||
<slot>{{ body }}</slot>
|
||||
</div>
|
||||
<div v-if="showActionsUnderneath || $slots.actions" class="mt-2">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots['top-right-actions'] || dismissible"
|
||||
class="col-start-3 row-start-1 flex shrink-0 items-center gap-2 self-start"
|
||||
>
|
||||
<slot name="top-right-actions" />
|
||||
<ButtonStyled
|
||||
v-if="dismissible"
|
||||
circular
|
||||
type="transparent"
|
||||
:color="buttonColors[type]"
|
||||
hover-color-fill="background"
|
||||
>
|
||||
<button type="button" aria-label="Dismiss" @click="$emit('dismiss')">
|
||||
<XIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
<div
|
||||
v-if="progress != null"
|
||||
class="absolute inset-x-0 bottom-0 h-1 overflow-hidden"
|
||||
:class="progressTrackClasses[type]"
|
||||
role="progressbar"
|
||||
:aria-valuenow="waiting ? undefined : Math.round(normalizedProgress * 100)"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-r-full transition-[width] duration-200 ease-in-out"
|
||||
:class="[
|
||||
progressFillClasses[progressColor ?? type],
|
||||
{ 'admonition-progress--waiting': waiting },
|
||||
]"
|
||||
:style="waiting ? undefined : { width: `${normalizedProgress * 100}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ClockIcon, XIcon } from '@modrinth/assets'
|
||||
import { useNow } from '@vueuse/core'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { useFormatDateTime, useRelativeTime } from '../../composables'
|
||||
import { getSeverityIcon } from '../../utils'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?: 'info' | 'warning' | 'critical' | 'success' | 'moderation' | 'circle-warning'
|
||||
header?: string
|
||||
body?: string
|
||||
showActionsUnderneath?: boolean
|
||||
dismissible?: boolean
|
||||
progress?: number
|
||||
progressColor?: 'info' | 'warning' | 'critical' | 'success' | 'blue' | 'green' | 'red'
|
||||
waiting?: boolean
|
||||
/** Accepts a Date, an ISO string, or a millisecond Unix timestamp. */
|
||||
timestamp?: Date | string | number
|
||||
}>(),
|
||||
{
|
||||
type: 'info',
|
||||
header: '',
|
||||
body: '',
|
||||
showActionsUnderneath: false,
|
||||
dismissible: false,
|
||||
progress: undefined,
|
||||
progressColor: undefined,
|
||||
waiting: false,
|
||||
timestamp: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
defineEmits<{
|
||||
dismiss: []
|
||||
}>()
|
||||
|
||||
const relativeTime = useRelativeTime()
|
||||
const formatDateTime = useFormatDateTime({
|
||||
dateStyle: 'long',
|
||||
timeStyle: 'short',
|
||||
})
|
||||
const now = useNow({ interval: 1000 })
|
||||
|
||||
const normalizedProgress = computed(() => Math.min(Math.max(props.progress ?? 0, 0), 1))
|
||||
|
||||
const normalizedTimestamp = computed(() => {
|
||||
const t = props.timestamp
|
||||
if (t == null) return null
|
||||
if (t instanceof Date) return t.toISOString()
|
||||
if (typeof t === 'number') return new Date(t).toISOString()
|
||||
return t
|
||||
})
|
||||
|
||||
const relativeTimeLabel = computed(() => {
|
||||
void now.value
|
||||
const t = normalizedTimestamp.value
|
||||
return t ? relativeTime(t) : ''
|
||||
})
|
||||
|
||||
const timestampTooltip = computed(() => {
|
||||
const t = normalizedTimestamp.value
|
||||
return t ? formatDateTime(t) : ''
|
||||
})
|
||||
|
||||
const typeClasses = {
|
||||
info: 'border-brand-blue bg-bg-blue',
|
||||
warning: 'border-brand-orange bg-bg-orange',
|
||||
'circle-warning': 'border-brand-orange bg-bg-orange',
|
||||
critical: 'border-brand-red bg-bg-red',
|
||||
success: 'border-brand-green bg-bg-green',
|
||||
moderation: 'border-brand-orange bg-bg-orange',
|
||||
}
|
||||
|
||||
const iconClasses = {
|
||||
info: 'text-brand-blue',
|
||||
warning: 'text-brand-orange',
|
||||
'circle-warning': 'text-brand-orange',
|
||||
critical: 'text-brand-red',
|
||||
success: 'text-brand-green',
|
||||
moderation: 'text-brand-orange',
|
||||
}
|
||||
|
||||
const buttonColors = {
|
||||
info: 'blue',
|
||||
warning: 'orange',
|
||||
'circle-warning': 'orange',
|
||||
critical: 'red',
|
||||
success: 'green',
|
||||
moderation: 'orange',
|
||||
} as const
|
||||
|
||||
const progressTrackClasses = {
|
||||
info: 'bg-brand-blue/20',
|
||||
warning: 'bg-brand-orange/20',
|
||||
'circle-warning': 'bg-brand-orange/20',
|
||||
critical: 'bg-brand-red/20',
|
||||
success: 'bg-brand-green/20',
|
||||
moderation: 'bg-brand-orange/20',
|
||||
}
|
||||
|
||||
const progressFillClasses = {
|
||||
info: 'bg-brand-blue',
|
||||
warning: 'bg-brand-orange',
|
||||
'circle-warning': 'bg-brand-orange',
|
||||
critical: 'bg-brand-red',
|
||||
success: 'bg-brand-green',
|
||||
blue: 'bg-brand-blue',
|
||||
green: 'bg-brand-green',
|
||||
red: 'bg-brand-red',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admonition-progress--waiting {
|
||||
animation: admonition-progress-waiting 1s linear infinite;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
@keyframes admonition-progress-waiting {
|
||||
0% {
|
||||
left: -20%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
packages/ui/src/components/base/AppearingProgressBar.vue
Normal file
143
packages/ui/src/components/base/AppearingProgressBar.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-300 ease-out"
|
||||
enter-from-class="opacity-0 max-h-0"
|
||||
enter-to-class="opacity-100 max-h-20"
|
||||
leave-active-class="transition-all duration-200 ease-in"
|
||||
leave-from-class="opacity-100 max-h-20"
|
||||
leave-to-class="opacity-0 max-h-0"
|
||||
>
|
||||
<div v-if="isVisible" class="w-full">
|
||||
<div class="mb-2 flex justify-between text-sm">
|
||||
<Transition name="phrase-fade" mode="out-in">
|
||||
<span :key="currentPhrase" class="text-md font-semibold">{{ currentPhrase }}</span>
|
||||
</Transition>
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="text-secondary">{{ Math.round(progress) }}%</span>
|
||||
<span class="text-xs text-secondary"
|
||||
>{{ formatBytes(currentValue) }} / {{ formatBytes(maxValue) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-2 w-full rounded-full bg-divider">
|
||||
<div
|
||||
class="h-2 animate-pulse bg-brand rounded-full transition-all duration-300 ease-out"
|
||||
:style="{ width: `${progress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import { useFormatBytes } from '#ui/composables'
|
||||
|
||||
interface Props {
|
||||
maxValue: number
|
||||
currentValue: number
|
||||
tips?: string[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tips: () => [
|
||||
'Removing Herobrine...',
|
||||
'Feeding parrots...',
|
||||
'Teaching villagers new trades...',
|
||||
'Convincing creepers to be friendly...',
|
||||
'Polishing diamonds...',
|
||||
'Training wolves to fetch...',
|
||||
'Building pixel art...',
|
||||
'Explaining redstone to beginners...',
|
||||
'Collecting all the cats...',
|
||||
'Negotiating with endermen...',
|
||||
'Planting suspicious stew ingredients...',
|
||||
'Calibrating TNT blast radius...',
|
||||
'Teaching chickens to fly...',
|
||||
'Sorting inventory alphabetically...',
|
||||
'Convincing iron golems to smile...',
|
||||
],
|
||||
})
|
||||
|
||||
const formatBytes = useFormatBytes()
|
||||
|
||||
const currentPhrase = ref('')
|
||||
const usedPhrases = ref(new Set<number>())
|
||||
let phraseInterval: NodeJS.Timeout | null = null
|
||||
|
||||
const progress = computed(() => {
|
||||
if (props.maxValue === 0) return 0
|
||||
return Math.min((props.currentValue / props.maxValue) * 100, 100)
|
||||
})
|
||||
|
||||
const isVisible = computed(() => props.maxValue > 0 && props.currentValue >= 0)
|
||||
|
||||
function getNextPhrase() {
|
||||
if (usedPhrases.value.size >= props.tips.length) {
|
||||
const currentPhraseIndex = props.tips.indexOf(currentPhrase.value)
|
||||
usedPhrases.value.clear()
|
||||
if (currentPhraseIndex !== -1) {
|
||||
usedPhrases.value.add(currentPhraseIndex)
|
||||
}
|
||||
}
|
||||
const availableIndices = props.tips
|
||||
.map((_, index) => index)
|
||||
.filter((index) => !usedPhrases.value.has(index))
|
||||
|
||||
const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)]
|
||||
usedPhrases.value.add(randomIndex)
|
||||
|
||||
return props.tips[randomIndex]
|
||||
}
|
||||
|
||||
function startPhraseRotation() {
|
||||
if (phraseInterval) {
|
||||
clearInterval(phraseInterval)
|
||||
}
|
||||
|
||||
currentPhrase.value = getNextPhrase()
|
||||
phraseInterval = setInterval(() => {
|
||||
currentPhrase.value = getNextPhrase()
|
||||
}, 4500)
|
||||
}
|
||||
|
||||
function stopPhraseRotation() {
|
||||
if (phraseInterval) {
|
||||
clearInterval(phraseInterval)
|
||||
phraseInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(isVisible, (newVisible) => {
|
||||
if (newVisible) {
|
||||
startPhraseRotation()
|
||||
} else {
|
||||
stopPhraseRotation()
|
||||
usedPhrases.value.clear()
|
||||
}
|
||||
})
|
||||
|
||||
watch(progress, (newProgress) => {
|
||||
if (newProgress >= 100) {
|
||||
stopPhraseRotation()
|
||||
currentPhrase.value = 'Installing modpack...'
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPhraseRotation()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.phrase-fade-enter-active,
|
||||
.phrase-fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.phrase-fade-enter-from,
|
||||
.phrase-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
153
packages/ui/src/components/base/AutoBrandIcon.vue
Normal file
153
packages/ui/src/components/base/AutoBrandIcon.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
AppleIcon,
|
||||
BlueskyIcon,
|
||||
BuyMeACoffeeIcon,
|
||||
CurseForgeIcon,
|
||||
DiscordIcon,
|
||||
FacebookIcon,
|
||||
GithubIcon,
|
||||
InstagramIcon,
|
||||
KoFiIcon,
|
||||
MastodonIcon,
|
||||
ModrinthIcon,
|
||||
OpenCollectiveIcon,
|
||||
PatreonIcon,
|
||||
PayPalIcon,
|
||||
RedditIcon,
|
||||
ReelsIcon,
|
||||
SnapchatIcon,
|
||||
ThreadsIcon,
|
||||
TikTokIcon,
|
||||
TumblrIcon,
|
||||
TwitchIcon,
|
||||
TwitterIcon,
|
||||
WindowsIcon,
|
||||
YouTubeGaming,
|
||||
YouTubeIcon,
|
||||
YouTubeShortsIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
keyword: string
|
||||
}>()
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: AppleIcon,
|
||||
keywords: ['apple'],
|
||||
},
|
||||
{
|
||||
icon: BlueskyIcon,
|
||||
keywords: ['bluesky', 'bsky', 'blue sky'],
|
||||
},
|
||||
{
|
||||
icon: BuyMeACoffeeIcon,
|
||||
keywords: ['buymeacoffee', 'bmac', 'buy me a coffee'],
|
||||
},
|
||||
{
|
||||
icon: DiscordIcon,
|
||||
keywords: ['discord'],
|
||||
},
|
||||
{
|
||||
icon: FacebookIcon,
|
||||
keywords: ['facebook', 'fb', 'face book'],
|
||||
},
|
||||
{
|
||||
icon: GithubIcon,
|
||||
keywords: ['github', 'gh', 'git hub'],
|
||||
},
|
||||
{
|
||||
icon: ThreadsIcon,
|
||||
keywords: ['threads'],
|
||||
},
|
||||
{
|
||||
icon: InstagramIcon,
|
||||
keywords: ['instagram', 'ig', 'insta'],
|
||||
},
|
||||
{
|
||||
icon: KoFiIcon,
|
||||
keywords: ['ko-fi', 'kofi', 'ko fi'],
|
||||
},
|
||||
{
|
||||
icon: MastodonIcon,
|
||||
keywords: ['mastodon'],
|
||||
},
|
||||
{
|
||||
icon: OpenCollectiveIcon,
|
||||
keywords: ['opencollective', 'open collective'],
|
||||
},
|
||||
{
|
||||
icon: PatreonIcon,
|
||||
keywords: ['patreon'],
|
||||
},
|
||||
{
|
||||
icon: PayPalIcon,
|
||||
keywords: ['paypal', 'pay pal'],
|
||||
},
|
||||
{
|
||||
icon: RedditIcon,
|
||||
keywords: ['reddit'],
|
||||
},
|
||||
{
|
||||
icon: ReelsIcon,
|
||||
keywords: ['reels', 'instagram reels', 'facebook reels'],
|
||||
},
|
||||
{
|
||||
icon: SnapchatIcon,
|
||||
keywords: ['snapchat'],
|
||||
},
|
||||
{
|
||||
icon: TikTokIcon,
|
||||
keywords: ['tiktok', 'tik', 'tok'],
|
||||
},
|
||||
{
|
||||
icon: TumblrIcon,
|
||||
keywords: ['tumblr'],
|
||||
},
|
||||
{
|
||||
icon: TwitchIcon,
|
||||
keywords: ['twitch', 'twitch.tv'],
|
||||
},
|
||||
{
|
||||
icon: WindowsIcon,
|
||||
keywords: ['windows', 'microsoft'],
|
||||
},
|
||||
{
|
||||
icon: YouTubeIcon,
|
||||
keywords: ['youtube', 'yt'],
|
||||
},
|
||||
{
|
||||
icon: YouTubeShortsIcon,
|
||||
keywords: ['shorts', 'youtube shorts'],
|
||||
},
|
||||
{
|
||||
icon: YouTubeGaming,
|
||||
keywords: ['youtube gaming'],
|
||||
},
|
||||
{
|
||||
icon: CurseForgeIcon,
|
||||
keywords: ['curseforge', 'cf', 'curse', 'curse forge'],
|
||||
},
|
||||
{
|
||||
icon: ModrinthIcon,
|
||||
keywords: ['modrinth', 'mod rinth', 'modrith', 'mr'],
|
||||
},
|
||||
{
|
||||
icon: TwitterIcon,
|
||||
keywords: ['twitter', 'x.com', 'x'],
|
||||
},
|
||||
]
|
||||
|
||||
const selectedService = computed(() =>
|
||||
services.find((service) =>
|
||||
service.keywords.some((keyword) => props.keyword.toLowerCase().includes(keyword)),
|
||||
),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="selectedService?.icon" v-if="selectedService" />
|
||||
<slot v-else />
|
||||
</template>
|
||||
50
packages/ui/src/components/base/AutoLink.vue
Normal file
50
packages/ui/src/components/base/AutoLink.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<router-link
|
||||
v-if="
|
||||
(typeof to === 'object' && (to?.path || to?.query)) ||
|
||||
(typeof to === 'string' && to?.startsWith('/'))
|
||||
"
|
||||
:to="to"
|
||||
v-bind="$attrs"
|
||||
:class="linkClass"
|
||||
>
|
||||
<slot />
|
||||
</router-link>
|
||||
<a
|
||||
v-else-if="typeof to === 'string' && to?.startsWith('http')"
|
||||
:href="to"
|
||||
v-bind="$attrs"
|
||||
:class="linkClass"
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
<button
|
||||
v-else-if="typeof to === 'function'"
|
||||
v-bind="$attrs"
|
||||
class="inline bg-transparent border-none p-0 m-0 cursor-pointer"
|
||||
:class="linkClass"
|
||||
@click="to()"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
<span v-else v-bind="$attrs">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
to: any
|
||||
linkClass?: string
|
||||
}>(),
|
||||
{
|
||||
linkClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
</script>
|
||||
194
packages/ui/src/components/base/Avatar.vue
Normal file
194
packages/ui/src/components/base/Avatar.vue
Normal file
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<img
|
||||
v-if="src && !failed"
|
||||
ref="img"
|
||||
class="avatar shrink-0"
|
||||
:style="`--_size: ${cssSize}`"
|
||||
:class="{
|
||||
circle: circle,
|
||||
'no-shadow': noShadow,
|
||||
raised: raised,
|
||||
pixelated: pixelated || autoPixelated,
|
||||
unframed: unframed || autoUnframed,
|
||||
}"
|
||||
:src="src"
|
||||
:alt="alt"
|
||||
:loading="loading"
|
||||
@load="updatePixelated"
|
||||
@error="onError"
|
||||
/>
|
||||
<svg
|
||||
v-else
|
||||
class="avatar shrink-0"
|
||||
:style="`--_size: ${cssSize}${tint ? `;--_tint:oklch(50% 75% ${tint})` : ''}`"
|
||||
:class="{
|
||||
tint: tint,
|
||||
circle: circle,
|
||||
'no-shadow': noShadow,
|
||||
raised: raised,
|
||||
unframed: unframed || autoUnframed,
|
||||
}"
|
||||
xml:space="preserve"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-miterlimit="1.5"
|
||||
clip-rule="evenodd"
|
||||
viewBox="0 0 104 104"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill="none" d="M0 0h103.4v103.4H0z" />
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#9a9a9a"
|
||||
stroke-width="5"
|
||||
d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useTemplateRef, watch } from 'vue'
|
||||
|
||||
const autoPixelated = ref(false)
|
||||
const autoUnframed = ref(false)
|
||||
const img = useTemplateRef<HTMLImageElement>('img')
|
||||
const failed = ref(false)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
src?: string | null
|
||||
alt?: string
|
||||
size?: string
|
||||
circle?: boolean
|
||||
noShadow?: boolean
|
||||
loading?: 'eager' | 'lazy'
|
||||
raised?: boolean
|
||||
tintBy?: string | null
|
||||
pixelated?: boolean
|
||||
unframed?: boolean
|
||||
unframedNaturalWidth?: number
|
||||
}>(),
|
||||
{
|
||||
src: null,
|
||||
alt: '',
|
||||
size: '2rem',
|
||||
circle: false,
|
||||
noShadow: false,
|
||||
loading: 'eager',
|
||||
raised: false,
|
||||
tintBy: null,
|
||||
pixelated: false,
|
||||
unframed: false,
|
||||
unframedNaturalWidth: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const LEGACY_PRESETS: Record<string, string> = {
|
||||
xxs: '1.25rem',
|
||||
xs: '2.5rem',
|
||||
sm: '3rem',
|
||||
md: '6rem',
|
||||
lg: '9rem',
|
||||
}
|
||||
|
||||
const cssSize = computed(() => LEGACY_PRESETS[props.size] ?? props.size)
|
||||
|
||||
watch(
|
||||
() => props.src,
|
||||
() => {
|
||||
failed.value = false
|
||||
autoUnframed.value = false
|
||||
},
|
||||
)
|
||||
|
||||
function onError(e) {
|
||||
console.log('Avatar image failed to load:', props.src, e)
|
||||
failed.value = true
|
||||
}
|
||||
|
||||
function updatePixelated() {
|
||||
autoUnframed.value = Boolean(
|
||||
img.value &&
|
||||
props.unframedNaturalWidth !== undefined &&
|
||||
img.value.naturalWidth === props.unframedNaturalWidth,
|
||||
)
|
||||
|
||||
if (img.value && img.value.naturalWidth && img.value.naturalWidth < 32) {
|
||||
autoPixelated.value = true
|
||||
} else {
|
||||
autoPixelated.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tint = computed(() => {
|
||||
if (props.tintBy) {
|
||||
return hash(props.tintBy) % 360
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
function hash(str: string): number {
|
||||
let hash = 0
|
||||
for (let i = 0, len = str.length; i < len; i++) {
|
||||
const chr = str.charCodeAt(i)
|
||||
hash = (hash << 5) - hash + chr
|
||||
hash |= 0
|
||||
}
|
||||
return hash
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
--_size: 2rem;
|
||||
|
||||
border: 1px solid var(--surface-5);
|
||||
background-color: var(--color-button-bg);
|
||||
object-fit: contain;
|
||||
border-radius: calc(16 / 96 * var(--_override-size, var(--_size)));
|
||||
position: relative;
|
||||
height: var(--_override-size, var(--_size));
|
||||
width: var(--_override-size, var(--_size));
|
||||
min-height: var(--_override-size, var(--_size));
|
||||
min-width: var(--_override-size, var(--_size));
|
||||
|
||||
&.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:not(.no-shadow) {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.pixelated {
|
||||
image-rendering: pixelated;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&.unframed {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:not(.no-shadow) {
|
||||
filter: drop-shadow(var(--shadow-card-filter));
|
||||
}
|
||||
}
|
||||
|
||||
&.raised {
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
&.tint {
|
||||
background-color: color-mix(in oklch, var(--color-button-bg) 100%, var(--_tint) 5%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
268
packages/ui/src/components/base/Badge.vue
Normal file
268
packages/ui/src/components/base/Badge.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<span :class="'version-badge ' + color + ' type--' + type">
|
||||
<template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
|
||||
|
||||
<!-- User roles -->
|
||||
<template v-else-if="type === 'admin'">
|
||||
<ModrinthIcon aria-hidden="true" /> {{ formatMessage(messages.modrinthTeamLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'moderator'">
|
||||
<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.moderatorLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'creator'">
|
||||
<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.creatorLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Project statuses -->
|
||||
<template v-else-if="type === 'approved'">
|
||||
<GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'approved-general'">
|
||||
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'unlisted'">
|
||||
<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'withheld'">
|
||||
<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'private'">
|
||||
<LockIcon aria-hidden="true" /> {{ formatMessage(messages.privateLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'scheduled'">
|
||||
<CalendarIcon aria-hidden="true" /> {{ formatMessage(messages.scheduledLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'draft'">
|
||||
<FileTextIcon aria-hidden="true" /> {{ formatMessage(messages.draftLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'archived'">
|
||||
<ArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.archivedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'rejected'">
|
||||
<XIcon aria-hidden="true" /> {{ formatMessage(messages.rejectedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'processing'">
|
||||
<UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.underReviewLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Team members -->
|
||||
<template v-else-if="type === 'accepted'">
|
||||
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.acceptedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'pending'">
|
||||
<UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.pendingLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Transaction statuses (pending, processing reused) -->
|
||||
<template v-else-if="type === 'processed'">
|
||||
<CheckIcon aria-hidden="true" /> {{ formatMessage(messages.processedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'failed'">
|
||||
<XIcon aria-hidden="true" /> {{ formatMessage(messages.failedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'returned'">
|
||||
<XIcon aria-hidden="true" /> {{ formatMessage(messages.returnedLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Report status -->
|
||||
<template v-else-if="type === 'closed'">
|
||||
<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Technical review verdicts -->
|
||||
<template v-else-if="type === 'safe'">
|
||||
<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'unsafe'">
|
||||
<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Other -->
|
||||
<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArchiveIcon,
|
||||
BoxIcon,
|
||||
BugIcon,
|
||||
CalendarIcon,
|
||||
CheckIcon,
|
||||
FileTextIcon,
|
||||
GlobeIcon,
|
||||
LinkIcon,
|
||||
LockIcon,
|
||||
ModrinthIcon,
|
||||
ScaleIcon,
|
||||
ShieldCheckIcon,
|
||||
UpdatedIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { capitalizeString } from '@modrinth/utils'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
|
||||
const messages = defineMessages({
|
||||
acceptedLabel: {
|
||||
id: 'omorphia.component.badge.label.accepted',
|
||||
defaultMessage: 'Accepted',
|
||||
},
|
||||
approvedLabel: {
|
||||
id: 'omorphia.component.badge.label.approved',
|
||||
defaultMessage: 'Approved',
|
||||
},
|
||||
archivedLabel: {
|
||||
id: 'omorphia.component.badge.label.archived',
|
||||
defaultMessage: 'Archived',
|
||||
},
|
||||
closedLabel: {
|
||||
id: 'omorphia.component.badge.label.closed',
|
||||
defaultMessage: 'Closed',
|
||||
},
|
||||
creatorLabel: {
|
||||
id: 'omorphia.component.badge.label.creator',
|
||||
defaultMessage: 'Creator',
|
||||
},
|
||||
draftLabel: {
|
||||
id: 'omorphia.component.badge.label.draft',
|
||||
defaultMessage: 'Draft',
|
||||
},
|
||||
failedLabel: {
|
||||
id: 'omorphia.component.badge.label.failed',
|
||||
defaultMessage: 'Failed',
|
||||
},
|
||||
listedLabel: {
|
||||
id: 'omorphia.component.badge.label.listed',
|
||||
defaultMessage: 'Public',
|
||||
},
|
||||
moderatorLabel: {
|
||||
id: 'omorphia.component.badge.label.moderator',
|
||||
defaultMessage: 'Moderator',
|
||||
},
|
||||
modrinthTeamLabel: {
|
||||
id: 'omorphia.component.badge.label.modrinth-team',
|
||||
defaultMessage: 'Modrinth Team',
|
||||
},
|
||||
pendingLabel: {
|
||||
id: 'omorphia.component.badge.label.pending',
|
||||
defaultMessage: 'Pending',
|
||||
},
|
||||
privateLabel: {
|
||||
id: 'omorphia.component.badge.label.private',
|
||||
defaultMessage: 'Private',
|
||||
},
|
||||
processedLabel: {
|
||||
id: 'omorphia.component.badge.label.processed',
|
||||
defaultMessage: 'Processed',
|
||||
},
|
||||
rejectedLabel: {
|
||||
id: 'omorphia.component.badge.label.rejected',
|
||||
defaultMessage: 'Rejected',
|
||||
},
|
||||
returnedLabel: {
|
||||
id: 'omorphia.component.badge.label.returned',
|
||||
defaultMessage: 'Returned',
|
||||
},
|
||||
safeLabel: {
|
||||
id: 'omorphia.component.badge.label.safe',
|
||||
defaultMessage: 'Pass',
|
||||
},
|
||||
scheduledLabel: {
|
||||
id: 'omorphia.component.badge.label.scheduled',
|
||||
defaultMessage: 'Scheduled',
|
||||
},
|
||||
underReviewLabel: {
|
||||
id: 'omorphia.component.badge.label.under-review',
|
||||
defaultMessage: 'Under review',
|
||||
},
|
||||
unlistedLabel: {
|
||||
id: 'omorphia.component.badge.label.unlisted',
|
||||
defaultMessage: 'Unlisted',
|
||||
},
|
||||
unsafeLabel: {
|
||||
id: 'omorphia.component.badge.label.unsafe',
|
||||
defaultMessage: 'Fail',
|
||||
},
|
||||
withheldLabel: {
|
||||
id: 'omorphia.component.badge.label.withheld',
|
||||
defaultMessage: 'Unlisted by staff',
|
||||
},
|
||||
})
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
defineProps<{
|
||||
type: string
|
||||
color?: string
|
||||
}>()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.version-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
width: fit-content;
|
||||
--badge-color: var(--color-gray);
|
||||
color: var(--badge-color);
|
||||
|
||||
.circle {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
background-color: var(--badge-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&.type--closed,
|
||||
&.type--withheld,
|
||||
&.type--rejected,
|
||||
&.type--returned,
|
||||
&.type--failed,
|
||||
&.type--unsafe,
|
||||
&.red {
|
||||
--badge-color: var(--color-red);
|
||||
}
|
||||
|
||||
&.type--pending,
|
||||
&.type--moderator,
|
||||
&.type--processing,
|
||||
&.type--scheduled,
|
||||
&.orange {
|
||||
--badge-color: var(--color-orange);
|
||||
}
|
||||
|
||||
&.type--accepted,
|
||||
&.type--admin,
|
||||
&.type--processed,
|
||||
&.type--approved-general,
|
||||
&.type--safe,
|
||||
&.green {
|
||||
--badge-color: var(--color-green);
|
||||
}
|
||||
|
||||
&.type--creator,
|
||||
&.type--approved,
|
||||
&.blue {
|
||||
--badge-color: var(--color-blue);
|
||||
}
|
||||
|
||||
&.type--unlisted,
|
||||
&.purple {
|
||||
--badge-color: var(--color-purple);
|
||||
}
|
||||
|
||||
&.type--private,
|
||||
&.gray {
|
||||
--badge-color: var(--color-gray);
|
||||
}
|
||||
|
||||
&::first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
packages/ui/src/components/base/BaseTerminal.vue
Normal file
307
packages/ui/src/components/base/BaseTerminal.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-full w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
|
||||
>
|
||||
<div ref="wrapperRef" class="relative min-h-0 flex-1 overflow-hidden pb-2 pt-1">
|
||||
<div ref="containerRef" class="size-full" />
|
||||
<Transition name="terminal-loading-fade">
|
||||
<div
|
||||
v-if="loading"
|
||||
class="pointer-events-none absolute inset-0 z-20 animate-bpulse bg-surface-3"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
<div v-if="!isAtBottom" class="absolute bottom-4 right-4 z-10">
|
||||
<ButtonStyled circular type="highlight" size="large">
|
||||
<button class="!shadow-2xl" aria-label="Scroll to bottom" @click="scrollToBottom">
|
||||
<ChevronDownIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showInput"
|
||||
ref="inputRef"
|
||||
class="border-t border-solid border-b-0 border-x-0 border-surface-4 bg-surface-3 p-4"
|
||||
>
|
||||
<StyledInput
|
||||
v-model="commandInput"
|
||||
v-tooltip="disableInput ? disableInputTooltip : undefined"
|
||||
:icon="TerminalSquareIcon"
|
||||
:placeholder="disableInput ? disabledInputPlaceholder : 'Send a command'"
|
||||
:disabled="disableInput"
|
||||
wrapper-class="w-full"
|
||||
input-class="!h-10"
|
||||
@keydown.enter="submitCommand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronDownIcon, TerminalSquareIcon } from '@modrinth/assets'
|
||||
import type { Terminal } from '@xterm/xterm'
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
|
||||
import StyledInput from '#ui/components/base/StyledInput.vue'
|
||||
import { useTerminal } from '#ui/composables/terminal'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
scrollback?: number
|
||||
showInput?: boolean
|
||||
disableInput?: boolean
|
||||
disableInputTooltip?: string
|
||||
disabledInputPlaceholder?: string
|
||||
fullscreen?: boolean
|
||||
emptyStateType?: 'server' | 'instance'
|
||||
loading?: boolean
|
||||
}>(),
|
||||
{
|
||||
scrollback: Infinity,
|
||||
showInput: false,
|
||||
disableInput: false,
|
||||
disableInputTooltip: undefined,
|
||||
disabledInputPlaceholder: 'Server is not running',
|
||||
fullscreen: false,
|
||||
emptyStateType: undefined,
|
||||
loading: false,
|
||||
},
|
||||
)
|
||||
|
||||
const EMPTY_STATE_BUBBLES: Record<string, string[]> = {
|
||||
server: [
|
||||
' ______________________________________________________',
|
||||
' / 欢迎使用 Axolotl 服务器！ \\',
|
||||
'| 点击启动按钮即可启动服务器！ |',
|
||||
' \\______________________________________________________/',
|
||||
],
|
||||
instance: ['请点击右上角 开始游戏 按钮', '即可接收实时日志'],
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
command: [command: string]
|
||||
ready: [terminal: Terminal]
|
||||
}>()
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const wrapperRef = ref<HTMLElement | null>(null)
|
||||
const inputRef = ref<HTMLElement | null>(null)
|
||||
const commandInput = ref('')
|
||||
|
||||
const snappedHeight = ref<number | null>(null)
|
||||
|
||||
const showingEmptyState = ref(false)
|
||||
|
||||
const {
|
||||
terminal,
|
||||
searchAddon,
|
||||
isAtBottom,
|
||||
write,
|
||||
writeln,
|
||||
clear,
|
||||
reset,
|
||||
fit: rawFit,
|
||||
scrollToBottom,
|
||||
} = useTerminal({
|
||||
container: containerRef,
|
||||
scrollback: props.scrollback,
|
||||
onReady: (term) => {
|
||||
nextTick(() => {
|
||||
snapToRows()
|
||||
})
|
||||
emit('ready', term)
|
||||
},
|
||||
})
|
||||
|
||||
function writeEmptyState() {
|
||||
if (!terminal.value || !props.emptyStateType) return
|
||||
terminal.value.reset()
|
||||
const bubble = EMPTY_STATE_BUBBLES[props.emptyStateType]
|
||||
if (bubble) {
|
||||
for (const line of bubble) {
|
||||
terminal.value.writeln(line)
|
||||
}
|
||||
}
|
||||
showingEmptyState.value = true
|
||||
}
|
||||
|
||||
function clearEmptyState() {
|
||||
if (!showingEmptyState.value) return
|
||||
terminal.value?.reset()
|
||||
showingEmptyState.value = false
|
||||
}
|
||||
|
||||
function getWrapperMargins() {
|
||||
if (!wrapperRef.value) return 0
|
||||
const style = getComputedStyle(wrapperRef.value)
|
||||
return parseFloat(style.marginTop) + parseFloat(style.marginBottom)
|
||||
}
|
||||
|
||||
function snapToRows() {
|
||||
if (!props.fullscreen) {
|
||||
snappedHeight.value = null
|
||||
return
|
||||
}
|
||||
const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
|
||||
if (!screen) {
|
||||
snappedHeight.value = null
|
||||
return
|
||||
}
|
||||
const inputH = inputRef.value?.offsetHeight ?? 0
|
||||
const borderW = 2
|
||||
snappedHeight.value = screen.offsetHeight + getWrapperMargins() + inputH + borderW
|
||||
}
|
||||
|
||||
let resizeDebounce: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function handleWindowResize() {
|
||||
if (!props.fullscreen) return
|
||||
if (resizeDebounce) clearTimeout(resizeDebounce)
|
||||
snappedHeight.value = null
|
||||
resizeDebounce = setTimeout(() => {
|
||||
rawFit()
|
||||
nextTick(() => snapToRows())
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function handleDocumentPointerDown(event: PointerEvent) {
|
||||
if (!terminal.value?.hasSelection()) return
|
||||
const target = event.target as Node | null
|
||||
if (target && containerRef.value?.contains(target)) return
|
||||
terminal.value.clearSelection()
|
||||
}
|
||||
|
||||
function handleDocumentKeyDown(event: KeyboardEvent) {
|
||||
if (!event.metaKey || event.key.toLowerCase() !== 'a') return
|
||||
const target = event.target as Node | null
|
||||
const active = document.activeElement
|
||||
if (
|
||||
!(target && containerRef.value?.contains(target)) &&
|
||||
!(active && containerRef.value?.contains(active))
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
terminal.value?.selectAll()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleWindowResize)
|
||||
document.addEventListener('pointerdown', handleDocumentPointerDown)
|
||||
document.addEventListener('keydown', handleDocumentKeyDown, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleWindowResize)
|
||||
document.removeEventListener('pointerdown', handleDocumentPointerDown)
|
||||
document.removeEventListener('keydown', handleDocumentKeyDown, true)
|
||||
if (resizeDebounce) clearTimeout(resizeDebounce)
|
||||
})
|
||||
|
||||
function fit() {
|
||||
rawFit()
|
||||
snapToRows()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.fullscreen,
|
||||
() => {
|
||||
if (props.fullscreen) {
|
||||
nextTick(() => {
|
||||
rawFit()
|
||||
nextTick(() => snapToRows())
|
||||
})
|
||||
} else {
|
||||
snappedHeight.value = null
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const submitCommand = () => {
|
||||
if (props.disableInput) return
|
||||
const cmd = commandInput.value.trim()
|
||||
if (!cmd) return
|
||||
emit('command', cmd)
|
||||
commandInput.value = ''
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
write,
|
||||
writeln,
|
||||
clear,
|
||||
reset,
|
||||
fit,
|
||||
scrollToBottom,
|
||||
terminal,
|
||||
searchAddon,
|
||||
isAtBottom,
|
||||
commandInput,
|
||||
showingEmptyState,
|
||||
writeEmptyState,
|
||||
clearEmptyState,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes bpulse {
|
||||
50% {
|
||||
filter: brightness(75%);
|
||||
}
|
||||
}
|
||||
.animate-bpulse {
|
||||
animation: bpulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.xterm {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.xterm-viewport {
|
||||
background-color: var(--surface-2) !important;
|
||||
}
|
||||
|
||||
.xterm .xterm-screen {
|
||||
width: 100%;
|
||||
margin-left: 8px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.xterm .xterm-rows {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.xterm .xterm-decoration-container {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.xterm .xterm-decoration-container > div {
|
||||
box-sizing: content-box !important;
|
||||
margin-left: -12px !important;
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.xterm-scrollable-element > .scrollbar.vertical {
|
||||
width: 8px !important;
|
||||
}
|
||||
|
||||
.xterm-scrollable-element > .scrollbar.vertical > div {
|
||||
width: 6px !important;
|
||||
border-radius: 8px !important;
|
||||
contain: layout style !important;
|
||||
}
|
||||
|
||||
.terminal-loading-fade-enter-active,
|
||||
.terminal-loading-fade-leave-active {
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
|
||||
.terminal-loading-fade-enter-from,
|
||||
.terminal-loading-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
58
packages/ui/src/components/base/BigOptionButton.vue
Normal file
58
packages/ui/src/components/base/BigOptionButton.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<button
|
||||
class="group flex w-full hover:cursor-pointer gap-3 rounded-[20px] p-3 text-left transition-all hover:brightness-110 active:scale-[0.98] border-none"
|
||||
:class="['items-center', selected ? 'bg-brand-highlight' : 'bg-surface-4']"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<div
|
||||
v-if="!noIconBox"
|
||||
class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl"
|
||||
:class="[
|
||||
noIconBorder ? '' : 'border border-solid',
|
||||
noIconBorder ? '' : selected ? 'border-brand' : 'border-surface-5',
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
class="size-8 text-secondary"
|
||||
:class="selected ? '!stroke-brand' : ''"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex size-12 shrink-0 items-center justify-center">
|
||||
<component
|
||||
:is="icon"
|
||||
class="size-7 text-secondary"
|
||||
:class="selected ? '!stroke-brand' : ''"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<span class="text-base font-semibold text-contrast">{{ title }}</span>
|
||||
<span class="text-left text-sm font-medium text-primary">{{ description }}</span>
|
||||
<span v-if="note" class="text-left text-xs text-tertiary">{{ note }}</span>
|
||||
</div>
|
||||
<ChevronRightIcon
|
||||
class="size-5 shrink-0 text-secondary opacity-0 transition-opacity duration-100 group-hover:opacity-100"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@modrinth/assets'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
icon: Component
|
||||
title: string
|
||||
description: string
|
||||
note?: string
|
||||
selected?: boolean
|
||||
noIconBox?: boolean
|
||||
noIconBorder?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'click'): void
|
||||
}>()
|
||||
</script>
|
||||
5
packages/ui/src/components/base/BulletDivider.vue
Normal file
5
packages/ui/src/components/base/BulletDivider.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-w-1.5 min-h-1.5 max-h-1.5 max-w-1.5 mx-0.5 rounded-full bg-surface-5 inline-block my-auto align-middle"
|
||||
></div>
|
||||
</template>
|
||||
143
packages/ui/src/components/base/Button.vue
Normal file
143
packages/ui/src/components/base/Button.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import ExternalIcon from '@modrinth/assets/icons/external.svg?component'
|
||||
import UnknownIcon from '@modrinth/assets/icons/unknown.svg?component'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
link: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
external: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
download: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
action: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
iconOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
large: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hoverFilled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hoverFilledOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const accentedButton = computed(() =>
|
||||
['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color),
|
||||
)
|
||||
|
||||
const classes = computed(() => {
|
||||
const color = props.color
|
||||
return {
|
||||
'icon-only': props.iconOnly,
|
||||
'btn-large': props.large,
|
||||
'btn-danger': color === 'danger',
|
||||
'btn-primary': color === 'primary',
|
||||
'btn-secondary': color === 'secondary',
|
||||
'btn-highlight': color === 'highlight',
|
||||
'btn-red': color === 'red',
|
||||
'btn-orange': color === 'orange',
|
||||
'btn-green': color === 'green',
|
||||
'btn-blue': color === 'blue',
|
||||
'btn-purple': color === 'purple',
|
||||
'btn-gray': color === 'gray',
|
||||
'btn-transparent': props.transparent,
|
||||
'btn-hover-filled': props.hoverFilled,
|
||||
'btn-hover-filled-only': props.hoverFilledOnly,
|
||||
'btn-outline': props.outline,
|
||||
'color-accent-contrast': accentedButton,
|
||||
disabled: props.disabled,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
v-if="link && link.startsWith('/')"
|
||||
class="btn"
|
||||
:class="classes"
|
||||
:to="disabled ? '' : link"
|
||||
:target="external ? '_blank' : '_self'"
|
||||
@click="
|
||||
(event) => {
|
||||
if (disabled) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
if (action) {
|
||||
action(event)
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
|
||||
<UnknownIcon v-if="!$slots.default" />
|
||||
</router-link>
|
||||
<a
|
||||
v-else-if="link"
|
||||
class="btn"
|
||||
:class="classes"
|
||||
:href="disabled ? undefined : link"
|
||||
:download="download || undefined"
|
||||
:target="external ? '_blank' : '_self'"
|
||||
@click="
|
||||
(event) => {
|
||||
if (disabled) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
if (action) {
|
||||
action(event)
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
|
||||
<UnknownIcon v-if="!$slots.default" />
|
||||
</a>
|
||||
<button v-else class="btn" :class="classes" :disabled="disabled" @click="action">
|
||||
<slot />
|
||||
<UnknownIcon v-if="!$slots.default" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:where(button) {
|
||||
background: none;
|
||||
color: var(--color-base);
|
||||
}
|
||||
</style>
|
||||
393
packages/ui/src/components/base/ButtonStyled.vue
Normal file
393
packages/ui/src/components/base/ButtonStyled.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
|
||||
size?: 'standard' | 'large' | 'small'
|
||||
circular?: boolean
|
||||
type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
|
||||
colorFill?: 'auto' | 'background' | 'text' | 'none'
|
||||
hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
|
||||
highlightedStyle?: 'main-nav-primary' | 'main-nav-secondary'
|
||||
highlighted?: boolean
|
||||
}>(),
|
||||
{
|
||||
color: 'standard',
|
||||
size: 'standard',
|
||||
circular: false,
|
||||
type: 'standard',
|
||||
colorFill: 'auto',
|
||||
hoverColorFill: 'auto',
|
||||
highlightedStyle: 'main-nav-primary',
|
||||
highlighted: false,
|
||||
},
|
||||
)
|
||||
|
||||
const highlightedColorVar = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'brand':
|
||||
return 'var(--color-brand-highlight)'
|
||||
case 'red':
|
||||
return 'var(--color-red-highlight)'
|
||||
case 'orange':
|
||||
return 'var(--color-orange-highlight)'
|
||||
case 'green':
|
||||
return 'var(--color-green-highlight)'
|
||||
case 'medal-promo':
|
||||
case 'blue':
|
||||
return 'var(--color-blue-highlight)'
|
||||
case 'purple':
|
||||
return 'var(--color-purple-highlight)'
|
||||
case 'standard':
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const colorVar = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'brand':
|
||||
return 'var(--color-brand)'
|
||||
case 'red':
|
||||
return 'var(--color-red)'
|
||||
case 'orange':
|
||||
return 'var(--color-orange)'
|
||||
case 'green':
|
||||
return 'var(--color-green)'
|
||||
case 'blue':
|
||||
return 'var(--color-blue)'
|
||||
case 'purple':
|
||||
return 'var(--color-purple)'
|
||||
case 'medal-promo':
|
||||
return 'var(--medal-promotion-text-orange)'
|
||||
case 'standard':
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const height = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '3rem'
|
||||
} else if (props.size === 'small') {
|
||||
return '1.5rem'
|
||||
}
|
||||
return '2.25rem'
|
||||
})
|
||||
|
||||
const width = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return props.circular ? '3rem' : 'auto'
|
||||
} else if (props.size === 'small') {
|
||||
return props.circular ? '1.5rem' : 'auto'
|
||||
}
|
||||
return props.circular ? '2.25rem' : 'auto'
|
||||
})
|
||||
|
||||
const paddingX = computed(() => {
|
||||
let padding = props.circular ? '0.5rem' : '0.75rem'
|
||||
if (props.size === 'large') {
|
||||
padding = props.circular ? '0.75rem' : '1rem'
|
||||
} else if (props.size === 'small') {
|
||||
padding = props.circular ? '0.125rem' : '0.5rem'
|
||||
}
|
||||
return `calc(${padding} - 0.125rem)`
|
||||
})
|
||||
|
||||
const paddingY = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '0.75rem'
|
||||
}
|
||||
return '0.5rem'
|
||||
})
|
||||
|
||||
const gap = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '0.5rem'
|
||||
} else if (props.size === 'small') {
|
||||
return '0.25rem'
|
||||
}
|
||||
return '0.375rem'
|
||||
})
|
||||
|
||||
const fontWeight = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '800'
|
||||
}
|
||||
return '600'
|
||||
})
|
||||
|
||||
const radius = computed(() => {
|
||||
if (props.circular) {
|
||||
return '99999px'
|
||||
}
|
||||
|
||||
if (props.size === 'large') {
|
||||
return '1rem'
|
||||
} else if (props.size === 'small') {
|
||||
return '0.5rem'
|
||||
}
|
||||
return '0.75rem'
|
||||
})
|
||||
|
||||
const iconSize = computed(() => {
|
||||
if (props.size === 'large') {
|
||||
return '1.5rem'
|
||||
} else if (props.size === 'small') {
|
||||
return '1rem'
|
||||
}
|
||||
return '1.25rem'
|
||||
})
|
||||
|
||||
function setColorFill(
|
||||
colors: { bg: string; text: string },
|
||||
fill: 'background' | 'text' | 'none',
|
||||
): { bg: string; text: string } {
|
||||
if (colorVar.value) {
|
||||
if (fill === 'background') {
|
||||
if (props.type === 'highlight' && highlightedColorVar.value) {
|
||||
colors.bg = highlightedColorVar.value
|
||||
colors.text = 'var(--color-contrast)'
|
||||
} else if (props.type === 'highlight-colored-text' && highlightedColorVar.value) {
|
||||
colors.bg = highlightedColorVar.value
|
||||
colors.text = colorVar.value
|
||||
} else {
|
||||
colors.bg = colorVar.value
|
||||
colors.text = 'var(--color-accent-contrast)'
|
||||
}
|
||||
} else if (fill === 'text') {
|
||||
colors.text = colorVar.value
|
||||
}
|
||||
}
|
||||
return colors
|
||||
}
|
||||
|
||||
const colorVariables = computed(() => {
|
||||
const defaultShadow =
|
||||
props.type === 'standard' || props.type === 'highlight' || props.highlighted
|
||||
? 'var(--shadow-button)'
|
||||
: 'none'
|
||||
|
||||
if (props.highlighted) {
|
||||
const colors = {
|
||||
bg:
|
||||
props.highlightedStyle === 'main-nav-primary'
|
||||
? 'var(--color-button-bg-selected)'
|
||||
: 'var(--color-button-bg)',
|
||||
text:
|
||||
props.highlightedStyle === 'main-nav-primary'
|
||||
? 'var(--color-button-text-selected)'
|
||||
: 'var(--color-contrast)',
|
||||
icon:
|
||||
props.type === 'chip'
|
||||
? 'var(--color-contrast)'
|
||||
: props.highlightedStyle === 'main-nav-primary'
|
||||
? 'var(--color-button-text-selected)'
|
||||
: 'var(--color-contrast)',
|
||||
}
|
||||
const hoverColors = JSON.parse(JSON.stringify(colors))
|
||||
const boxShadow =
|
||||
props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
|
||||
return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon}; --_box-shadow: ${boxShadow};`
|
||||
}
|
||||
|
||||
let colors = {
|
||||
bg: 'var(--color-button-bg)',
|
||||
text: 'var(--color-base)',
|
||||
}
|
||||
let hoverColors = JSON.parse(JSON.stringify(colors))
|
||||
|
||||
if (props.type === 'outlined') {
|
||||
hoverColors.bg = 'transparent'
|
||||
}
|
||||
|
||||
if (props.type === 'outlined' || props.type === 'transparent') {
|
||||
colors.bg = 'transparent'
|
||||
colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
|
||||
hoverColors = setColorFill(
|
||||
hoverColors,
|
||||
props.hoverColorFill === 'auto' ? 'text' : props.hoverColorFill,
|
||||
)
|
||||
} else if (props.type === 'chip') {
|
||||
// Chip type uses highlight-colored-text styling when colored
|
||||
if (colorVar.value && highlightedColorVar.value) {
|
||||
colors.bg = highlightedColorVar.value
|
||||
colors.text = colorVar.value
|
||||
hoverColors.bg = highlightedColorVar.value
|
||||
hoverColors.text = colorVar.value
|
||||
}
|
||||
} else {
|
||||
colors = setColorFill(colors, props.colorFill === 'auto' ? 'background' : props.colorFill)
|
||||
hoverColors = setColorFill(
|
||||
hoverColors,
|
||||
props.hoverColorFill === 'auto' ? 'background' : props.hoverColorFill,
|
||||
)
|
||||
}
|
||||
|
||||
const boxShadow =
|
||||
props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
|
||||
return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_box-shadow: ${boxShadow};`
|
||||
})
|
||||
|
||||
const fontSize = computed(() => {
|
||||
if (props.size === 'small') {
|
||||
return 'text-sm'
|
||||
}
|
||||
return 'text-base'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="btn-wrapper contents"
|
||||
:class="[
|
||||
{ outline: type === 'outlined', transparent: type === 'transparent', chip: type === 'chip' },
|
||||
fontSize,
|
||||
]"
|
||||
:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};--_outline-color:${color === 'standard' && type === 'outlined' ? 'var(--surface-5)' : 'currentColor'}`"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* Searches up to 4 children deep for valid button */
|
||||
.btn-wrapper :deep(:is(button, a, .button-like):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, .button-like):first-child {
|
||||
@apply flex touch-manipulation cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
|
||||
box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
|
||||
transition:
|
||||
scale 0.125s ease-in-out,
|
||||
background-color 0.25s ease-in-out,
|
||||
color 0.25s ease-in-out,
|
||||
filter 0.25s ease-in-out;
|
||||
|
||||
svg:first-child {
|
||||
color: var(--_icon, var(--_text));
|
||||
transition: color 0.25s ease-in-out;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&[disabled]:not([disabled='false']),
|
||||
&[disabled='true'],
|
||||
&.disabled,
|
||||
&.looks-disabled {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
&[disabled]:not([disabled='false']),
|
||||
&[disabled='true'],
|
||||
&.disabled {
|
||||
@apply cursor-not-allowed;
|
||||
}
|
||||
|
||||
&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
|
||||
@apply hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text];
|
||||
|
||||
&:hover svg:first-child,
|
||||
&:focus-visible svg:first-child {
|
||||
color: var(--_hover-icon, var(--_hover-text));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper:not(.chip) :deep(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper:not(.chip) :slotted(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper:not(.chip) :slotted(*) > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper:not(.chip) :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper:not(.chip)
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child {
|
||||
&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
|
||||
@apply active:scale-95;
|
||||
}
|
||||
}
|
||||
|
||||
.disable-advanced-rendering {
|
||||
.btn-wrapper:not(.outline):not(.transparent) :deep(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper:not(.outline):not(.transparent) :slotted(:is(button, a, .button-like):first-child),
|
||||
.btn-wrapper:not(.outline):not(.transparent)
|
||||
:slotted(*)
|
||||
> :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper:not(.outline):not(.transparent)
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child {
|
||||
@apply border border-[rgba(0,0,0,0.2)];
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper.outline :deep(:is(button, a, .button-like):first-child),
|
||||
.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-[--_outline-color,currentColor];
|
||||
}
|
||||
|
||||
/*noinspection CssUnresolvedCustomProperty*/
|
||||
.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg,
|
||||
.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg,
|
||||
.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg,
|
||||
.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child > svg,
|
||||
.btn-wrapper
|
||||
:slotted(*)
|
||||
> *:first-child
|
||||
> *:first-child
|
||||
> :is(button, a, .button-like):first-child
|
||||
> svg {
|
||||
display: block;
|
||||
width: var(--_icon-size, 1rem);
|
||||
height: var(--_icon-size, 1rem);
|
||||
min-width: var(--_icon-size, 1rem);
|
||||
min-height: var(--_icon-size, 1rem);
|
||||
}
|
||||
|
||||
.joined-buttons {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
|
||||
> .btn-wrapper:not(:first-child) {
|
||||
:deep(:is(button, a, .button-like):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) {
|
||||
:deep(:is(button, a, .button-like):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-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* guys, I know this is nuts, I know */
|
||||
</style>
|
||||
57
packages/ui/src/components/base/Card.vue
Normal file
57
packages/ui/src/components/base/Card.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { DropdownIcon } from '@modrinth/assets'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const props = defineProps({
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
defaultCollapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
noAutoBody: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
collapsed: props.defaultCollapsed,
|
||||
})
|
||||
|
||||
function toggleCollapsed() {
|
||||
state.collapsed = !state.collapsed
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div v-if="!!$slots.header || collapsible" class="header flex">
|
||||
<slot name="header"></slot>
|
||||
<div v-if="collapsible" class="btn-group ml-auto">
|
||||
<ButtonStyled circular>
|
||||
<button @click="toggleCollapsed">
|
||||
<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-if="!state.collapsed" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
:deep(h1, h2, h3, h4) {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--gap-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
74
packages/ui/src/components/base/Checkbox.vue
Normal file
74
packages/ui/src/components/base/Checkbox.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="group bg-transparent border-none p-0 m-0 flex items-center text-left gap-3 checkbox-outer outline-offset-4 text-contrast"
|
||||
:disabled="disabled"
|
||||
:class="
|
||||
disabled
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'cursor-pointer hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness]'
|
||||
"
|
||||
:aria-label="description || label || undefined"
|
||||
:aria-checked="indeterminate ? 'mixed' : modelValue"
|
||||
role="checkbox"
|
||||
@click="toggle"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 aspect-square rounded-md flex shrink-0 items-center justify-center border-[1px] border-solid"
|
||||
:class="{
|
||||
'bg-brand border-button-border text-brand-inverted': modelValue,
|
||||
'bg-surface-2 border-divider-dark text-primary': !modelValue,
|
||||
'checkbox-shadow group-active:scale-95': !disabled,
|
||||
}"
|
||||
>
|
||||
<MinusIcon v-if="indeterminate" aria-hidden="true" stroke-width="3" />
|
||||
<CheckIcon v-else-if="modelValue" aria-hidden="true" stroke-width="3" />
|
||||
</span>
|
||||
<!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
|
||||
<span v-if="label" :class="labelClass" aria-hidden="true">
|
||||
{{ label }}
|
||||
</span>
|
||||
<slot v-else />
|
||||
</button>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, MinusIcon } from '@modrinth/assets'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [modelValue: boolean, event?: MouseEvent]
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
label?: string
|
||||
labelClass?: HTMLAttributes['class']
|
||||
disabled?: boolean
|
||||
description?: string
|
||||
modelValue: boolean
|
||||
clickEvent?: () => void
|
||||
indeterminate?: boolean
|
||||
}>(),
|
||||
{
|
||||
label: '',
|
||||
labelClass: '',
|
||||
disabled: false,
|
||||
description: '',
|
||||
modelValue: false,
|
||||
clickEvent: () => {},
|
||||
indeterminate: false,
|
||||
},
|
||||
)
|
||||
|
||||
function toggle(event: MouseEvent) {
|
||||
if (!props.disabled) {
|
||||
emit('update:modelValue', !props.modelValue, event)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkbox-shadow {
|
||||
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
</style>
|
||||
101
packages/ui/src/components/base/Chips.vue
Normal file
101
packages/ui/src/components/base/Chips.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="chips flex gap-2 flex-wrap" role="radiogroup" :aria-label="ariaLabel">
|
||||
<Button
|
||||
v-for="item in items"
|
||||
:key="formatLabel(item)"
|
||||
v-tooltip="isDisabled(item) ? getDisabledTooltip(item) : undefined"
|
||||
role="radio"
|
||||
:aria-checked="selected === item"
|
||||
:disabled="isDisabled(item)"
|
||||
class="btn !brightness-100 hover:!brightness-125"
|
||||
:class="{
|
||||
selected: selected === item,
|
||||
capitalize: capitalize,
|
||||
'!px-2.5 !py-1.5': size === 'small',
|
||||
}"
|
||||
@click="toggleItem(item)"
|
||||
>
|
||||
<CheckIcon v-if="selected === item && !hideCheckmarkIcon" />
|
||||
<span>{{ formatLabel(item) }}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
import { CheckIcon } from '@modrinth/assets'
|
||||
|
||||
import Button from './Button.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
items: T[]
|
||||
formatLabel?: (item: T) => string
|
||||
neverEmpty?: boolean
|
||||
capitalize?: boolean
|
||||
size?: 'standard' | 'small'
|
||||
ariaLabel?: string
|
||||
disabledItems?: T[]
|
||||
disabledTooltip?: string | ((item: T) => string | undefined)
|
||||
hideCheckmarkIcon?: boolean
|
||||
}>(),
|
||||
{
|
||||
neverEmpty: true,
|
||||
// Intentional any type, as this default should only be used for primitives (string or number)
|
||||
formatLabel: (item) => item.toString(),
|
||||
capitalize: true,
|
||||
size: 'standard',
|
||||
},
|
||||
)
|
||||
|
||||
const selected = defineModel<T | null>()
|
||||
|
||||
// If one always has to be selected, default to the first one
|
||||
if (props.items.length > 0 && props.neverEmpty && !selected.value) {
|
||||
selected.value = props.items[0]
|
||||
}
|
||||
|
||||
function isDisabled(item: T): boolean {
|
||||
return props.disabledItems?.includes(item) ?? false
|
||||
}
|
||||
|
||||
function getDisabledTooltip(item: T): string | undefined {
|
||||
return typeof props.disabledTooltip === 'function'
|
||||
? props.disabledTooltip(item)
|
||||
: props.disabledTooltip
|
||||
}
|
||||
|
||||
function toggleItem(item: T) {
|
||||
if (isDisabled(item)) return
|
||||
if (selected.value === item && !props.neverEmpty) {
|
||||
selected.value = null
|
||||
} else {
|
||||
selected.value = item
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chips {
|
||||
.btn {
|
||||
border: 1px solid transparent;
|
||||
&.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0.25rem solid var(--color-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--color-brand);
|
||||
background-color: var(--color-brand-highlight);
|
||||
border: 1px solid var(--color-brand);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
packages/ui/src/components/base/Collapsible.vue
Normal file
122
packages/ui/src/components/base/Collapsible.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div
|
||||
class="accordion-content"
|
||||
:class="[
|
||||
baseClass ?? '',
|
||||
{
|
||||
open: isOpen,
|
||||
'no-transition': !shouldAnimate,
|
||||
'overflow-visible': overflowVisible && isFullyOpen,
|
||||
},
|
||||
]"
|
||||
:style="isHidden ? { display: 'none' } : {}"
|
||||
@transitionend="onTransitionEnd"
|
||||
>
|
||||
<div v-bind="$attrs" :inert="collapsed">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
baseClass?: string
|
||||
collapsed: boolean
|
||||
overflowVisible?: boolean
|
||||
}>()
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const shouldAnimate = ref(false)
|
||||
const isHidden = ref(props.collapsed)
|
||||
const isOpen = ref(!props.collapsed)
|
||||
const isFullyOpen = ref(!props.collapsed)
|
||||
|
||||
onMounted(() => {
|
||||
requestAnimationFrame(() => {
|
||||
shouldAnimate.value = true
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.collapsed,
|
||||
async (collapsed) => {
|
||||
if (!collapsed) {
|
||||
// Opening
|
||||
isHidden.value = false
|
||||
isFullyOpen.value = false
|
||||
|
||||
if (!shouldAnimate.value) {
|
||||
isOpen.value = true
|
||||
isFullyOpen.value = true
|
||||
return
|
||||
}
|
||||
|
||||
// Wait for display: none removal to take effect, then animate open
|
||||
await nextTick()
|
||||
requestAnimationFrame(() => {
|
||||
isOpen.value = true
|
||||
})
|
||||
} else {
|
||||
// Closing
|
||||
// Remove overflow-visible so content is clipped during animation
|
||||
isFullyOpen.value = false
|
||||
|
||||
if (!shouldAnimate.value) {
|
||||
isOpen.value = false
|
||||
isHidden.value = true
|
||||
return
|
||||
}
|
||||
|
||||
// Wait a frame for overflow: hidden to apply, THEN start closing
|
||||
await nextTick()
|
||||
requestAnimationFrame(() => {
|
||||
isOpen.value = false
|
||||
})
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function onTransitionEnd(e: TransitionEvent) {
|
||||
if (e.target !== e.currentTarget) return
|
||||
if (props.collapsed) {
|
||||
isHidden.value = true
|
||||
} else {
|
||||
isFullyOpen.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.accordion-content {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.accordion-content.no-transition {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.accordion-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-content.open {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.accordion-content > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-content.overflow-visible > div {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
196
packages/ui/src/components/base/CollapsibleAdmonition.vue
Normal file
196
packages/ui/src/components/base/CollapsibleAdmonition.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<Transition name="collapsible-admonition">
|
||||
<div
|
||||
v-if="!dismissed"
|
||||
:data-type="type"
|
||||
class="collapsible-admonition flex flex-col rounded-2xl border border-solid text-contrast overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="flex w-full cursor-pointer items-center gap-6 p-4"
|
||||
:class="headerBgClasses[type]"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<div class="flex flex-1 items-center gap-3">
|
||||
<TriangleAlertIcon :class="['h-5 w-5 flex-none', iconClasses[type]]" />
|
||||
<span class="text-base font-semibold text-contrast">
|
||||
<slot name="header">{{ header }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ButtonStyled circular type="highlight-colored-text" :color="buttonColors[type]">
|
||||
<button aria-label="Toggle" @click.stop="expanded = !expanded">
|
||||
<ChevronDownIcon
|
||||
class="h-4 w-4 transition-transform duration-300"
|
||||
:class="expanded && 'rotate-180'"
|
||||
/>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-if="dismissible"
|
||||
circular
|
||||
type="highlight-colored-text"
|
||||
:color="buttonColors[type]"
|
||||
>
|
||||
<button aria-label="Dismiss" @click.stop="handleDismiss">
|
||||
<XIcon class="h-4 w-4" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid transition-[grid-template-rows] duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<slot>
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="collapsible-admonition__item collapsible-admonition__item--bordered flex flex-col gap-1 p-4"
|
||||
>
|
||||
<p class="m-0 text-base font-semibold text-contrast">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<div
|
||||
v-for="(desc, di) in item.descriptions"
|
||||
:key="di"
|
||||
class="flex items-start gap-1.5"
|
||||
>
|
||||
<LightBulbIcon :class="['mt-0.5 h-5 w-5 flex-none', iconClasses[type]]" />
|
||||
<span class="text-base text-contrast/85">{{ desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronDownIcon, LightBulbIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
export interface CollapsibleAdmonitionItem {
|
||||
title: string
|
||||
descriptions?: string[]
|
||||
}
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
type?: 'info' | 'warning' | 'critical' | 'success'
|
||||
header?: string
|
||||
items?: CollapsibleAdmonitionItem[]
|
||||
dismissible?: boolean
|
||||
}>(),
|
||||
{
|
||||
type: 'critical',
|
||||
header: '',
|
||||
items: () => [],
|
||||
dismissible: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
dismiss: []
|
||||
}>()
|
||||
|
||||
const expanded = defineModel<boolean>({ default: false })
|
||||
const dismissed = ref(false)
|
||||
|
||||
function handleDismiss() {
|
||||
dismissed.value = true
|
||||
emit('dismiss')
|
||||
}
|
||||
|
||||
const headerBgClasses = {
|
||||
info: 'bg-bg-blue',
|
||||
warning: 'bg-bg-orange',
|
||||
critical: 'bg-bg-red',
|
||||
success: 'bg-bg-green',
|
||||
}
|
||||
|
||||
const iconClasses = {
|
||||
info: 'text-brand-blue',
|
||||
warning: 'text-brand-orange',
|
||||
critical: 'text-brand-red',
|
||||
success: 'text-brand-green',
|
||||
}
|
||||
|
||||
const buttonColors: Record<string, 'blue' | 'orange' | 'red' | 'green'> = {
|
||||
info: 'blue',
|
||||
warning: 'orange',
|
||||
critical: 'red',
|
||||
success: 'green',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.collapsible-admonition[data-type='critical'] {
|
||||
border-color: rgba(255, 73, 110, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='critical'] .collapsible-admonition__item {
|
||||
background: rgba(255, 73, 110, 0.1);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='critical'] .collapsible-admonition__item--bordered {
|
||||
border-top: 1px solid rgba(255, 73, 110, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='info'] {
|
||||
border-color: rgba(47, 158, 255, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='info'] .collapsible-admonition__item {
|
||||
background: rgba(47, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='info'] .collapsible-admonition__item--bordered {
|
||||
border-top: 1px solid rgba(47, 158, 255, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='warning'] {
|
||||
border-color: rgba(255, 163, 71, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='warning'] .collapsible-admonition__item {
|
||||
background: rgba(255, 163, 71, 0.1);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='warning'] .collapsible-admonition__item--bordered {
|
||||
border-top: 1px solid rgba(255, 163, 71, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='success'] {
|
||||
border-color: rgba(27, 217, 106, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='success'] .collapsible-admonition__item {
|
||||
background: rgba(27, 217, 106, 0.1);
|
||||
}
|
||||
|
||||
.collapsible-admonition[data-type='success'] .collapsible-admonition__item--bordered {
|
||||
border-top: 1px solid rgba(27, 217, 106, 0.6);
|
||||
}
|
||||
|
||||
.collapsible-admonition-enter-active,
|
||||
.collapsible-admonition-leave-active {
|
||||
transition:
|
||||
opacity 300ms ease-in-out,
|
||||
transform 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.collapsible-admonition-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.collapsible-admonition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
80
packages/ui/src/components/base/CollapsibleRegion.vue
Normal file
80
packages/ui/src/components/base/CollapsibleRegion.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="relative overflow-hidden">
|
||||
<div
|
||||
class="collapsible-region-content"
|
||||
:class="{ open: !collapsed }"
|
||||
:style="{ '--collapsed-height': collapsedHeight }"
|
||||
>
|
||||
<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="collapsed"
|
||||
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
|
||||
:class="gradientTo"
|
||||
/>
|
||||
|
||||
<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
|
||||
<ExpandIcon v-if="collapsed" />
|
||||
<CollapseIcon v-else />
|
||||
{{ collapsed ? expandText : collapseText }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
expandText?: string
|
||||
collapseText?: string
|
||||
collapsedHeight?: string
|
||||
gradientTo?: string
|
||||
}>(),
|
||||
{
|
||||
expandText: 'Expand',
|
||||
collapseText: 'Collapse',
|
||||
collapsedHeight: '8rem',
|
||||
gradientTo: 'to-surface-2',
|
||||
},
|
||||
)
|
||||
|
||||
const collapsed = defineModel<boolean>('collapsed', { default: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.collapsible-region-content {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s linear;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.collapsible-region-content {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-region-content.open {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.collapsible-region-content > div {
|
||||
overflow: hidden;
|
||||
min-height: var(--collapsed-height);
|
||||
transition: min-height 0.3s linear;
|
||||
}
|
||||
|
||||
.collapsible-region-content.open > div {
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
1007
packages/ui/src/components/base/Combobox.vue
Normal file
1007
packages/ui/src/components/base/Combobox.vue
Normal file
File diff suppressed because it is too large
Load Diff
45
packages/ui/src/components/base/ContentPageHeader.vue
Normal file
45
packages/ui/src/components/base/ContentPageHeader.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 border-0 border-b border-solid border-divider pb-4">
|
||||
<div class="flex flex-wrap items-start gap-4 max-md:flex-col">
|
||||
<div class="flex min-w-0 flex-1 gap-4">
|
||||
<slot name="icon" />
|
||||
<div class="flex min-w-0 flex-col gap-2 justify-center">
|
||||
<div class="flex flex-col gap-1.5 justify-center">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h1 class="m-0 text-2xl font-semibold leading-none text-contrast">
|
||||
<slot name="title" />
|
||||
</h1>
|
||||
<slot name="title-suffix" />
|
||||
</div>
|
||||
<p
|
||||
v-if="$slots.summary"
|
||||
class="m-0 max-w-[44rem] empty:hidden"
|
||||
:class="[disableLineClamp ? '' : 'line-clamp-2']"
|
||||
>
|
||||
<slot name="summary" />
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="$slots.stats" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
|
||||
<slot name="stats" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.stats" class="flex justify-between md:hidden">
|
||||
<div class="flex flex-wrap gap-3 empty:hidden">
|
||||
<slot name="stats" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
disableLineClamp?: boolean
|
||||
}
|
||||
|
||||
const { disableLineClamp } = defineProps<Props>()
|
||||
</script>
|
||||
33
packages/ui/src/components/base/CopyCode.vue
Normal file
33
packages/ui/src/components/base/CopyCode.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<button
|
||||
class="!m-0 inline-flex w-fit select-text items-center gap-2 rounded-[10px] bg-[var(--color-button-bg)] px-2 py-1 font-mono text-sm text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[1.25] active:scale-95 active:brightness-[0.8] motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
|
||||
:title="formatMessage(copiedMessage)"
|
||||
@click="copyText"
|
||||
>
|
||||
<span>{{ text }}</span>
|
||||
<CheckIcon v-if="copied" />
|
||||
<ClipboardCopyIcon v-else />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, ClipboardCopyIcon } from '@modrinth/assets'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { defineMessage, useVIntl } from '../../composables/i18n'
|
||||
|
||||
const copiedMessage = defineMessage({
|
||||
id: 'omorphia.component.copy.action.copy',
|
||||
defaultMessage: 'Copy code to clipboard',
|
||||
})
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const props = defineProps<{ text: string }>()
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
async function copyText() {
|
||||
await navigator.clipboard.writeText(props.text)
|
||||
copied.value = true
|
||||
}
|
||||
</script>
|
||||
1931
packages/ui/src/components/base/DatePicker.vue
Normal file
1931
packages/ui/src/components/base/DatePicker.vue
Normal file
File diff suppressed because it is too large
Load Diff
34
packages/ui/src/components/base/DoubleIcon.vue
Normal file
34
packages/ui/src/components/base/DoubleIcon.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="double-icon">
|
||||
<slot name="primary" />
|
||||
<div class="secondary">
|
||||
<slot name="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.double-icon {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
|
||||
.secondary {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--spacing-card-xs);
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
line-height: 0;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
packages/ui/src/components/base/DropArea.vue
Normal file
139
packages/ui/src/components/base/DropArea.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
ref="dropAreaRef"
|
||||
class="drop-area"
|
||||
@drop.stop.prevent="handleDrop"
|
||||
@dragenter.prevent="allowDrag"
|
||||
@dragover.prevent="allowDrag"
|
||||
@dragleave.prevent="hideDropArea"
|
||||
/>
|
||||
</Teleport>
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
import { injectNotificationManager } from '../../providers'
|
||||
|
||||
const { addNotification } = injectNotificationManager()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
accept?: string
|
||||
}>(),
|
||||
{
|
||||
accept: '*',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const dropAreaRef = ref<HTMLDivElement>()
|
||||
|
||||
const hideDropArea = () => {
|
||||
if (dropAreaRef.value) {
|
||||
dropAreaRef.value.style.visibility = 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
hideDropArea()
|
||||
|
||||
const files = event.dataTransfer?.files
|
||||
if (!files || files.length === 0) return
|
||||
|
||||
const file = files[0]
|
||||
|
||||
if (!matchesAccept({ getAsFile: () => file } as DataTransferItem, props.accept)) {
|
||||
addNotification({
|
||||
title: 'Invalid file',
|
||||
text: `The file "${file.name}" is not a valid file type for this project.`,
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
emit('change', files)
|
||||
}
|
||||
|
||||
function matchesAccept(file: DataTransferItem, accept?: string): boolean {
|
||||
if (!accept || accept.trim() === '') return true
|
||||
|
||||
const fileType = file.type // e.g. "image/png"
|
||||
const fileName = file.getAsFile()?.name.toLowerCase() ?? ''
|
||||
|
||||
return accept
|
||||
.split(',')
|
||||
.map((t) => t.trim().toLowerCase())
|
||||
.some((token) => {
|
||||
// .png, .jpg
|
||||
if (token.startsWith('.')) {
|
||||
return fileName.endsWith(token)
|
||||
}
|
||||
|
||||
// image/*
|
||||
if (token.endsWith('/*')) {
|
||||
const base = token.slice(0, -1) // "image/"
|
||||
return fileType.startsWith(base)
|
||||
}
|
||||
|
||||
// image/png
|
||||
return fileType === token
|
||||
})
|
||||
}
|
||||
|
||||
const allowDrag = (event: DragEvent) => {
|
||||
const item = event.dataTransfer?.items?.[0]
|
||||
if (!item || item.kind !== 'file') return
|
||||
|
||||
event.preventDefault()
|
||||
event.dataTransfer!.dropEffect = 'copy'
|
||||
|
||||
if (dropAreaRef.value) {
|
||||
dropAreaRef.value.style.visibility = 'visible'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('dragenter', allowDrag)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('dragenter', allowDrag)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drop-area {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
visibility: hidden;
|
||||
background-color: hsla(0, 0%, 0%, 0.5);
|
||||
transition:
|
||||
visibility 0.2s ease-in-out,
|
||||
background-color 0.1s ease-in-out;
|
||||
display: flex;
|
||||
&::before {
|
||||
--indent: 4rem;
|
||||
content: ' ';
|
||||
position: relative;
|
||||
top: var(--indent);
|
||||
left: var(--indent);
|
||||
width: calc(100% - (2 * var(--indent)));
|
||||
height: calc(100% - (2 * var(--indent)));
|
||||
border-radius: 1rem;
|
||||
border: 0.25rem dashed var(--color-button-bg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1895
packages/ui/src/components/base/DropdownFilterBar.vue
Normal file
1895
packages/ui/src/components/base/DropdownFilterBar.vue
Normal file
File diff suppressed because it is too large
Load Diff
434
packages/ui/src/components/base/DropdownSelect.vue
Normal file
434
packages/ui/src/components/base/DropdownSelect.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div
|
||||
ref="dropdown"
|
||||
tabindex="0"
|
||||
role="combobox"
|
||||
:aria-expanded="dropdownVisible"
|
||||
class="animated-dropdown"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@focusout="onBlur"
|
||||
@mousedown.prevent
|
||||
@keydown.enter.prevent="toggleDropdown"
|
||||
@keydown.up.prevent="focusPreviousOption"
|
||||
@keydown.down.prevent="focusNextOptionOrOpen"
|
||||
>
|
||||
<div
|
||||
class="selected"
|
||||
:class="{
|
||||
disabled: disabled,
|
||||
'render-down': dropdownVisible && !effectiveRenderUp && !disabled,
|
||||
'render-up': dropdownVisible && effectiveRenderUp && !disabled,
|
||||
}"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="min-w-0 overflow-hidden">
|
||||
<slot :selected="selectedOption">
|
||||
<span>
|
||||
{{ selectedOption }}
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
|
||||
</div>
|
||||
<div class="options-wrapper" :class="{ down: !effectiveRenderUp, up: effectiveRenderUp }">
|
||||
<transition name="options">
|
||||
<div
|
||||
v-show="dropdownVisible"
|
||||
class="options"
|
||||
role="listbox"
|
||||
:class="{ down: !effectiveRenderUp, up: effectiveRenderUp }"
|
||||
:style="automaticMenuStyle"
|
||||
>
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
ref="optionElements"
|
||||
tabindex="-1"
|
||||
role="option"
|
||||
:class="{ 'selected-option': selectedValue === option }"
|
||||
:aria-selected="selectedValue === option"
|
||||
class="option"
|
||||
@click="selectOption(option, index)"
|
||||
@keydown.space.prevent="selectOption(option, index)"
|
||||
>
|
||||
<input
|
||||
:id="`${name}-${index}`"
|
||||
v-model="radioValue"
|
||||
type="radio"
|
||||
:value="option"
|
||||
:name="name"
|
||||
/>
|
||||
<label :for="`${name}-${index}`">{{ getOptionLabel(option) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { DropdownIcon } from '@modrinth/assets'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import { dropdownPlacement } from './dropdown-placement'
|
||||
|
||||
const OPTION_HEIGHT_REM = 3
|
||||
const DEFAULT_MAX_MENU_HEIGHT_REM = 18.75
|
||||
const SAFE_GAP_REM = 0.5
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
defaultValue: {
|
||||
type: [String, Number, Object],
|
||||
default: null,
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number, Object],
|
||||
default: null,
|
||||
},
|
||||
renderUp: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autoPlacement: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
displayName: {
|
||||
type: Function,
|
||||
default: undefined,
|
||||
},
|
||||
maxVisibleOptions: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
})
|
||||
|
||||
function getOptionLabel(option) {
|
||||
return props.displayName?.(option) ?? option
|
||||
}
|
||||
|
||||
const emit = defineEmits(['input', 'change', 'update:modelValue'])
|
||||
|
||||
const dropdownVisible = ref(false)
|
||||
const selectedValue = ref(props.modelValue || props.defaultValue)
|
||||
const focusedOptionIndex = ref(null)
|
||||
const dropdown = ref(null)
|
||||
const optionElements = ref(null)
|
||||
const automaticRenderUp = ref(false)
|
||||
const automaticAvailableHeight = ref(null)
|
||||
const effectiveRenderUp = computed(() =>
|
||||
props.autoPlacement ? automaticRenderUp.value : props.renderUp,
|
||||
)
|
||||
const automaticMenuStyle = computed(() =>
|
||||
props.autoPlacement && automaticAvailableHeight.value !== null
|
||||
? { maxHeight: `${automaticAvailableHeight.value}px` }
|
||||
: undefined,
|
||||
)
|
||||
|
||||
function cssPixels(property, fallback = 0) {
|
||||
const value = Number.parseFloat(
|
||||
getComputedStyle(document.documentElement).getPropertyValue(property),
|
||||
)
|
||||
return Number.isFinite(value) ? value : fallback
|
||||
}
|
||||
|
||||
function updatePlacement() {
|
||||
if (!props.autoPlacement || !dropdown.value) return
|
||||
const rect = dropdown.value.getBoundingClientRect()
|
||||
const rootFontSize = cssPixels('font-size', 16)
|
||||
const maxMenuHeight =
|
||||
(props.maxVisibleOptions ?? DEFAULT_MAX_MENU_HEIGHT_REM / OPTION_HEIGHT_REM) *
|
||||
OPTION_HEIGHT_REM *
|
||||
rootFontSize
|
||||
const expectedMenuHeight = Math.min(
|
||||
props.options.length * OPTION_HEIGHT_REM * rootFontSize,
|
||||
maxMenuHeight,
|
||||
)
|
||||
const placement = dropdownPlacement({
|
||||
viewportHeight: window.innerHeight,
|
||||
controlTop: rect.top,
|
||||
controlBottom: rect.bottom,
|
||||
floatingActionBarClearance: cssPixels('--floating-action-bar-clearance'),
|
||||
safeGap: SAFE_GAP_REM * rootFontSize,
|
||||
expectedMenuHeight,
|
||||
})
|
||||
automaticRenderUp.value = placement.renderUp
|
||||
automaticAvailableHeight.value = Math.min(expectedMenuHeight, placement.availableHeight)
|
||||
}
|
||||
|
||||
function schedulePlacementUpdate() {
|
||||
if (!dropdownVisible.value) return
|
||||
void nextTick(updatePlacement)
|
||||
}
|
||||
|
||||
const selectedOption = computed(() => {
|
||||
return getOptionLabel(selectedValue.value) ?? props.placeholder ?? 'Select an option'
|
||||
})
|
||||
|
||||
const radioValue = computed({
|
||||
get() {
|
||||
return props.modelValue || selectedValue.value
|
||||
},
|
||||
set(newValue) {
|
||||
emit('update:modelValue', newValue)
|
||||
selectedValue.value = newValue
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
selectedValue.value = newValue
|
||||
},
|
||||
)
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (!props.disabled) {
|
||||
if (!dropdownVisible.value) updatePlacement()
|
||||
dropdownVisible.value = !dropdownVisible.value
|
||||
dropdown.value.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const selectOption = (option, index) => {
|
||||
radioValue.value = option
|
||||
emit('change', { option, index })
|
||||
dropdownVisible.value = false
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
if (!props.disabled) {
|
||||
updatePlacement()
|
||||
focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value)
|
||||
dropdownVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!props.autoPlacement) return
|
||||
window.addEventListener('resize', schedulePlacementUpdate)
|
||||
window.addEventListener('scroll', schedulePlacementUpdate, true)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (!props.autoPlacement) return
|
||||
window.removeEventListener('resize', schedulePlacementUpdate)
|
||||
window.removeEventListener('scroll', schedulePlacementUpdate, true)
|
||||
})
|
||||
|
||||
watch(() => props.options.length, schedulePlacementUpdate)
|
||||
|
||||
const onBlur = (event) => {
|
||||
if (!isChildOfDropdown(event.relatedTarget)) {
|
||||
dropdownVisible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const focusPreviousOption = () => {
|
||||
if (!props.disabled) {
|
||||
if (!dropdownVisible.value) {
|
||||
toggleDropdown()
|
||||
}
|
||||
focusedOptionIndex.value =
|
||||
(focusedOptionIndex.value + props.options.length - 1) % props.options.length
|
||||
optionElements.value[focusedOptionIndex.value].focus()
|
||||
}
|
||||
}
|
||||
|
||||
const focusNextOptionOrOpen = () => {
|
||||
if (!props.disabled) {
|
||||
if (!dropdownVisible.value) {
|
||||
toggleDropdown()
|
||||
}
|
||||
focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length
|
||||
optionElements.value[focusedOptionIndex.value].focus()
|
||||
}
|
||||
}
|
||||
|
||||
const isChildOfDropdown = (element) => {
|
||||
let currentNode = element
|
||||
while (currentNode) {
|
||||
if (currentNode === dropdown.value) {
|
||||
return true
|
||||
}
|
||||
currentNode = currentNode.parentNode
|
||||
}
|
||||
return false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.animated-dropdown {
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.selected {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--gap-sm) var(--gap-lg);
|
||||
background-color: var(--color-button-bg);
|
||||
gap: var(--gap-md);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow:
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
|
||||
transition: 0.05s;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:not(.render-down):not(.render-up) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.render-up {
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
}
|
||||
|
||||
&.render-down {
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
filter: brightness(1.25);
|
||||
transition: filter 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
z-index: 10;
|
||||
max-height: v-bind('maxVisibleOptions ? `calc(${maxVisibleOptions} * 3rem)` : "18.75rem"');
|
||||
overflow-y: auto;
|
||||
box-shadow:
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
|
||||
.option {
|
||||
background-color: var(--color-button-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--gap-md);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
> label {
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.85);
|
||||
transition: filter 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
filter: brightness(0.85);
|
||||
transition: filter 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&.selected-option {
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-accent-contrast);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options-enter-active,
|
||||
.options-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.options-enter-from,
|
||||
.options-leave-to {
|
||||
// this is not 100% due to a safari bug
|
||||
&.up {
|
||||
transform: translateY(99.999%);
|
||||
}
|
||||
|
||||
&.down {
|
||||
transform: translateY(-99.999%);
|
||||
}
|
||||
}
|
||||
|
||||
.options-enter-to,
|
||||
.options-leave-from {
|
||||
&.up {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
z-index: 9;
|
||||
|
||||
&.up {
|
||||
top: 0;
|
||||
transform: translateY(-99.999%);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
&.down {
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
packages/ui/src/components/base/DropzoneFileInput.vue
Normal file
134
packages/ui/src/components/base/DropzoneFileInput.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full cursor-pointer border-none bg-transparent p-0 text-left"
|
||||
:class="[props.disabled ? 'cursor-not-allowed opacity-50' : '']"
|
||||
:disabled="props.disabled"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-col items-center justify-center border-2 border-dashed bg-surface-4 text-contrast transition-colors',
|
||||
size === 'small' ? 'p-5' : size === 'medium' ? 'p-10' : 'p-12',
|
||||
size === 'small' ? 'gap-2' : 'gap-4',
|
||||
size === 'small' ? 'rounded-2xl' : 'rounded-3xl',
|
||||
'border-surface-5',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-if="!noIconBox"
|
||||
:class="[
|
||||
'grid place-content-center text-brand border-brand border-solid border bg-highlight-green',
|
||||
size === 'small' ? 'w-10 h-10' : 'h-14 w-14',
|
||||
size === 'small' ? 'rounded-xl' : 'rounded-2xl',
|
||||
]"
|
||||
>
|
||||
<FolderUpIcon
|
||||
aria-hidden="true"
|
||||
:class="['text-brand', size === 'small' ? 'w-6 h-6' : 'w-8 h-8']"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="grid place-content-center">
|
||||
<FolderUpIcon
|
||||
aria-hidden="true"
|
||||
:class="['text-secondary', size === 'small' ? 'w-6 h-6' : 'w-8 h-8']"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center gap-1 text-contrast text-center">
|
||||
<div class="text-contrast font-medium text-pretty">{{ primaryPrompt }}</div>
|
||||
<span v-if="secondaryPrompt" class="text-primary text-sm text-pretty">{{
|
||||
secondaryPrompt
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FolderUpIcon } from '@modrinth/assets'
|
||||
|
||||
import { useDebugLogger } from '#ui/composables/debug-logger'
|
||||
|
||||
const debug = useDebugLogger('DropzoneFileInput')
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'change', paths: string[]): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
primaryPrompt?: string | null
|
||||
secondaryPrompt?: string | null
|
||||
multiple?: boolean
|
||||
accept?: string
|
||||
disabled?: boolean
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
directory?: boolean
|
||||
noIconBox?: boolean
|
||||
}>(),
|
||||
{
|
||||
primaryPrompt: 'Drop files here or click to upload',
|
||||
secondaryPrompt: 'Only supported file types will be accepted',
|
||||
size: 'large',
|
||||
directory: false,
|
||||
noIconBox: false,
|
||||
},
|
||||
)
|
||||
|
||||
async function handleClick() {
|
||||
debug('handleClick called, disabled:', props.disabled)
|
||||
if (props.disabled) {
|
||||
debug('disabled, returning')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
debug('importing @tauri-apps/plugin-dialog')
|
||||
const { open } = await import('@tauri-apps/plugin-dialog')
|
||||
debug('open function imported')
|
||||
|
||||
if (props.directory) {
|
||||
debug('directory mode')
|
||||
const result = await open({ directory: true, multiple: false })
|
||||
debug('open result:', result)
|
||||
const path = typeof result === 'string' ? result : (result?.path ?? null)
|
||||
debug('extracted path:', path)
|
||||
if (path) {
|
||||
debug('emitting change with path:', [path])
|
||||
emit('change', [path])
|
||||
} else {
|
||||
debug('no path selected')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const filters = props.accept
|
||||
? [
|
||||
{
|
||||
name: props.accept || 'Files',
|
||||
extensions: props.accept.split(',').map((ext) => ext.trim().replace(/^\./, '')),
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
debug('filters:', filters)
|
||||
|
||||
const result = await open({ multiple: props.multiple ?? false, filters })
|
||||
debug('open result:', result)
|
||||
const paths = Array.isArray(result) ? result : [result]
|
||||
const pickedPaths = paths
|
||||
.map((entry) => (typeof entry === 'string' ? entry : entry?.path))
|
||||
.filter((p): p is string => !!p)
|
||||
debug('pickedPaths:', pickedPaths)
|
||||
|
||||
if (pickedPaths.length > 0) {
|
||||
debug('emitting change with pickedPaths:', pickedPaths)
|
||||
emit('change', pickedPaths)
|
||||
} else {
|
||||
debug('no valid paths selected')
|
||||
}
|
||||
} catch (err) {
|
||||
debug('error in handleClick:', err)
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
packages/ui/src/components/base/EmptyState.vue
Normal file
60
packages/ui/src/components/base/EmptyState.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="mx-auto flex flex-col items-center p-6 text-center">
|
||||
<component :is="illustration" v-if="illustration" class="h-[200px] w-auto" />
|
||||
<div class="flex flex-col items-center gap-1.5">
|
||||
<span class="text-2xl font-semibold text-contrast">
|
||||
<slot name="heading">{{ heading }}</slot>
|
||||
</span>
|
||||
<span v-if="$slots.description || description" class="text-secondary">
|
||||
<slot name="description">{{ description }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="$slots.actions" class="mt-8 flex gap-2">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DoneIllustration,
|
||||
EmptyIllustration,
|
||||
EmptyInboxIllustration,
|
||||
ErrorIllustration,
|
||||
NoConnectionIllustration,
|
||||
NoCreditCardIllustration,
|
||||
NoDocumentsIllustration,
|
||||
NoGPSIllustration,
|
||||
NoImagesIllustration,
|
||||
NoItemsCartIllustration,
|
||||
NoMessagesIllustration,
|
||||
NoSearchResultIllustration,
|
||||
NoTasksIllustration,
|
||||
} from '@modrinth/assets'
|
||||
import type { Component } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const illustrationMap: Record<string, Component> = {
|
||||
done: DoneIllustration,
|
||||
empty: EmptyIllustration,
|
||||
'empty-inbox': EmptyInboxIllustration,
|
||||
error: ErrorIllustration,
|
||||
'no-connection': NoConnectionIllustration,
|
||||
'no-credit-card': NoCreditCardIllustration,
|
||||
'no-documents': NoDocumentsIllustration,
|
||||
'no-gps': NoGPSIllustration,
|
||||
'no-images': NoImagesIllustration,
|
||||
'no-items-cart': NoItemsCartIllustration,
|
||||
'no-messages': NoMessagesIllustration,
|
||||
'no-search-result': NoSearchResultIllustration,
|
||||
'no-tasks': NoTasksIllustration,
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
type?: keyof typeof illustrationMap
|
||||
heading?: string
|
||||
description?: string
|
||||
}>()
|
||||
|
||||
const illustration = computed(() => (props.type ? illustrationMap[props.type] : undefined))
|
||||
</script>
|
||||
115
packages/ui/src/components/base/EnvironmentIndicator.vue
Normal file
115
packages/ui/src/components/base/EnvironmentIndicator.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<span v-if="typeOnly" class="environment">
|
||||
<InfoIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.typeLabel, { type: type }) }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="
|
||||
!['resourcepack', 'shader'].includes(type) &&
|
||||
!(type === 'plugin' && search) &&
|
||||
!categories.includes('datapack')
|
||||
"
|
||||
class="environment"
|
||||
>
|
||||
<template v-if="clientSide === 'optional' && serverSide === 'optional'">
|
||||
<GlobeIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.clientOrServerLabel) }}
|
||||
</template>
|
||||
<template v-else-if="clientSide === 'required' && serverSide === 'required'">
|
||||
<GlobeIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.clientAndServerLabel) }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
(clientSide === 'optional' || clientSide === 'required') &&
|
||||
(serverSide === 'optional' || serverSide === 'unsupported')
|
||||
"
|
||||
>
|
||||
<ClientIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.clientLabel) }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
(serverSide === 'optional' || serverSide === 'required') &&
|
||||
(clientSide === 'optional' || clientSide === 'unsupported')
|
||||
"
|
||||
>
|
||||
<ServerIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.serverLabel) }}
|
||||
</template>
|
||||
<template v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'">
|
||||
<GlobeIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.unsupportedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="alwaysShow">
|
||||
<InfoIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.typeLabel, { type: type }) }}
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ClientIcon, GlobeIcon, InfoIcon, ServerIcon } from '@modrinth/assets'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
|
||||
const messages = defineMessages({
|
||||
clientLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.client',
|
||||
defaultMessage: 'Client',
|
||||
},
|
||||
clientAndServerLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.client-and-server',
|
||||
defaultMessage: 'Client and server',
|
||||
},
|
||||
clientOrServerLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.client-or-server',
|
||||
defaultMessage: 'Client or server',
|
||||
},
|
||||
serverLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.server',
|
||||
defaultMessage: 'Server',
|
||||
},
|
||||
typeLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.type',
|
||||
defaultMessage: 'A {type}',
|
||||
},
|
||||
unsupportedLabel: {
|
||||
id: 'omorphia.component.environment-indicator.label.unsupported',
|
||||
defaultMessage: 'Unsupported',
|
||||
},
|
||||
})
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
type: string
|
||||
serverSide?: string
|
||||
clientSide?: string
|
||||
typeOnly?: boolean
|
||||
alwaysShow?: boolean
|
||||
search?: boolean
|
||||
categories?: string[]
|
||||
}>(),
|
||||
{
|
||||
type: 'mod',
|
||||
serverSide: '',
|
||||
clientSide: '',
|
||||
typeOnly: false,
|
||||
alwaysShow: false,
|
||||
search: false,
|
||||
categories: () => [],
|
||||
},
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.environment {
|
||||
display: flex;
|
||||
color: var(--color-text) !important;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
svg {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
packages/ui/src/components/base/ErrorInformationCard.vue
Normal file
121
packages/ui/src/components/base/ErrorInformationCard.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-8 shadow-xl">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="grid place-content-center rounded-full bg-bg-orange p-4">
|
||||
<component :is="icon" class="size-12 text-orange" />
|
||||
</div>
|
||||
<h1 class="m-0 mb-2 w-fit text-4xl font-bold">{{ title }}</h1>
|
||||
</div>
|
||||
<div v-if="!description">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
<p v-else class="text-lg text-secondary">{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="errorDetails" class="my-4 w-full rounded-lg border border-divider bg-bg-raised">
|
||||
<div class="divide-y divide-divider">
|
||||
<div
|
||||
v-for="detail in errorDetails.filter((detail) => detail.type !== 'hidden')"
|
||||
:key="detail.label"
|
||||
class="px-4 py-3"
|
||||
>
|
||||
<div v-if="detail.type === 'inline'" class="flex items-center justify-between">
|
||||
<span class="font-medium text-secondary">{{ detail.label }}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="rounded-lg bg-code-bg px-2 py-1 text-sm text-code-text">
|
||||
{{ detail.value }}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="detail.type === 'block'" class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-secondary">{{ detail.label }}</span>
|
||||
</div>
|
||||
<div class="w-full overflow-hidden rounded-lg bg-code-bg p-3">
|
||||
<code
|
||||
class="block w-full overflow-x-auto break-words text-sm text-code-text whitespace-pre-wrap"
|
||||
>
|
||||
{{ detail.value }}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex !w-full flex-row gap-4">
|
||||
<ButtonStyled
|
||||
v-if="action"
|
||||
size="large"
|
||||
:color="action.color || 'brand'"
|
||||
:disabled="action.disabled"
|
||||
@click="action.onClick"
|
||||
>
|
||||
<button class="!w-full">
|
||||
<component :is="action.icon" v-if="action.icon && !action.showAltIcon" class="size-4" />
|
||||
<component
|
||||
:is="action.altIcon"
|
||||
v-else-if="action.icon && action.showAltIcon"
|
||||
class="size-4"
|
||||
/>
|
||||
{{ action.label }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
|
||||
<ButtonStyled v-if="errorDetails" size="large" color="standard" @click="copyErrorInformation">
|
||||
<button class="!w-full">
|
||||
<CopyIcon v-if="!infoCopied" class="size-4" />
|
||||
<CheckIcon v-else class="size-4" />
|
||||
Copy Information
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, CopyIcon } from '@modrinth/assets'
|
||||
import type { Component } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const infoCopied = ref(false)
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
description?: string
|
||||
icon: Component
|
||||
errorDetails?: {
|
||||
label?: string
|
||||
value?: string
|
||||
type?: 'inline' | 'block' | 'hidden'
|
||||
}[]
|
||||
action?: {
|
||||
label: string
|
||||
onClick: () => void
|
||||
color?: 'brand' | 'standard' | 'red' | 'orange' | 'blue'
|
||||
disabled?: boolean
|
||||
icon?: Component
|
||||
altIcon?: Component
|
||||
showAltIcon?: boolean
|
||||
}
|
||||
}>()
|
||||
|
||||
const copyErrorInformation = async () => {
|
||||
if (!props.errorDetails || props.errorDetails.length === 0) return
|
||||
|
||||
const formattedErrorInfo = props.errorDetails
|
||||
.filter((detail) => detail.label && detail.value)
|
||||
.map((detail) => `${detail.label}: ${detail.value}`)
|
||||
.join('\n\n')
|
||||
|
||||
await navigator.clipboard.writeText(formattedErrorInfo)
|
||||
infoCopied.value = true
|
||||
setTimeout(() => {
|
||||
infoCopied.value = false
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
104
packages/ui/src/components/base/FileInput.vue
Normal file
104
packages/ui/src/components/base/FileInput.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<label :class="{ 'long-style': longStyle }" @drop.prevent="handleDrop" @dragover.prevent>
|
||||
<slot />
|
||||
{{ prompt }}
|
||||
<input
|
||||
type="file"
|
||||
:multiple="multiple"
|
||||
:accept="accept"
|
||||
:disabled="disabled"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { fileIsValid } from '@modrinth/utils'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useFormatBytes } from '../../composables'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
prompt?: string
|
||||
multiple?: boolean
|
||||
accept?: string
|
||||
/**
|
||||
* The max file size in bytes
|
||||
*/
|
||||
maxSize?: number | null
|
||||
showIcon?: boolean
|
||||
shouldAlwaysReset?: boolean
|
||||
longStyle?: boolean
|
||||
disabled?: boolean
|
||||
}>(),
|
||||
{
|
||||
prompt: 'Select file',
|
||||
multiple: false,
|
||||
showIcon: true,
|
||||
shouldAlwaysReset: false,
|
||||
longStyle: false,
|
||||
disabled: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{ change: [files: File[]] }>()
|
||||
|
||||
const formatBytes = useFormatBytes()
|
||||
|
||||
const files = ref<File[]>([])
|
||||
|
||||
function addFiles(incoming: FileList, shouldNotReset = false) {
|
||||
if (!shouldNotReset || props.shouldAlwaysReset) {
|
||||
files.value = Array.from(incoming)
|
||||
}
|
||||
const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
|
||||
files.value = files.value.filter((file) => fileIsValid(file, validationOptions, formatBytes))
|
||||
if (files.value.length > 0) {
|
||||
emit('change', files.value)
|
||||
}
|
||||
}
|
||||
|
||||
function handleDrop(e: DragEvent) {
|
||||
addFiles(e.dataTransfer!.files)
|
||||
}
|
||||
|
||||
function handleChange(e: Event) {
|
||||
const input = e.target as HTMLInputElement
|
||||
if (!input.files) return
|
||||
addFiles(input.files)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
label {
|
||||
flex-direction: unset;
|
||||
max-height: unset;
|
||||
&:focus-within {
|
||||
outline: 0.25rem solid var(--color-focus-ring);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
}
|
||||
input {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
&.long-style {
|
||||
display: flex;
|
||||
padding: 1.5rem 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-gap: 0.5rem;
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
border: dashed 2px var(--color-secondary);
|
||||
cursor: pointer;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
604
packages/ui/src/components/base/FileTreeSelect.vue
Normal file
604
packages/ui/src/components/base/FileTreeSelect.vue
Normal file
@ -0,0 +1,604 @@
|
||||
<template>
|
||||
<div class="flex w-full min-w-0 flex-col gap-2">
|
||||
<div
|
||||
class="flex w-full min-w-0 flex-col rounded-[20px] border border-solid border-surface-4 shadow-sm overflow-clip"
|
||||
>
|
||||
<div
|
||||
class="flex h-10 w-full min-w-0 select-none flex-row items-center justify-between bg-surface-3 px-3 text-sm font-medium"
|
||||
>
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2">
|
||||
<Checkbox
|
||||
:model-value="allVisibleSelected"
|
||||
:indeterminate="someVisibleSelected && !allVisibleSelected"
|
||||
:disabled="visibleSelectableEntries.length === 0"
|
||||
@update:model-value="toggleAllVisible"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="flex min-w-0 appearance-none items-center gap-1.5 border-0 bg-transparent p-0 font-semibold hover:text-primary"
|
||||
:class="sortField === 'name' ? 'text-contrast' : 'text-secondary'"
|
||||
@click="handleSort('name')"
|
||||
>
|
||||
<span class="min-w-0 truncate">{{ formatMessage(messages.name) }}</span>
|
||||
<ChevronUpIcon
|
||||
v-if="sortField === 'name' && !sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ChevronDownIcon
|
||||
v-if="sortField === 'name' && sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-2 flex shrink-0 items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
class="hidden w-[92px] appearance-none items-center gap-1 border-0 bg-transparent p-0 text-left font-semibold hover:text-primary sm:flex"
|
||||
:class="sortField === 'size' ? 'text-contrast' : 'text-secondary'"
|
||||
@click="handleSort('size')"
|
||||
>
|
||||
<span>{{ formatMessage(messages.size) }}</span>
|
||||
<ChevronUpIcon
|
||||
v-if="sortField === 'size' && !sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ChevronDownIcon
|
||||
v-if="sortField === 'size' && sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="hidden w-[132px] appearance-none items-center gap-1 border-0 bg-transparent p-0 text-left font-semibold hover:text-primary sm:flex"
|
||||
:class="sortField === 'modified' ? 'text-contrast' : 'text-secondary'"
|
||||
@click="handleSort('modified')"
|
||||
>
|
||||
<span>{{ formatMessage(messages.modified) }}</span>
|
||||
<ChevronUpIcon
|
||||
v-if="sortField === 'modified' && !sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ChevronDownIcon
|
||||
v-if="sortField === 'modified' && sortDesc"
|
||||
class="size-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<span class="size-4 shrink-0" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isHomePath"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="group flex w-full min-w-0 cursor-pointer select-none items-center gap-2 border-0 border-t border-solid border-surface-4 bg-surface-2 px-3 py-2 text-left hover:bg-surface-2.5 focus:!outline-none"
|
||||
@click="navigateTo(parentPath)"
|
||||
@keydown="(event) => event.key === 'Enter' && navigateTo(parentPath)"
|
||||
>
|
||||
<span class="size-5 shrink-0" aria-hidden="true" />
|
||||
<div class="flex size-4 shrink-0 items-center justify-center text-secondary">
|
||||
<UndoIcon class="size-4 group-hover:text-contrast group-focus:text-contrast" />
|
||||
</div>
|
||||
<span
|
||||
class="min-w-0 flex-1 truncate text-sm font-medium text-primary group-hover:text-contrast group-focus:text-contrast"
|
||||
>
|
||||
{{ formatMessage(messages.parentFolder) }}
|
||||
</span>
|
||||
<div class="ml-2 flex shrink-0 items-center gap-4">
|
||||
<span class="hidden w-[92px] text-left text-sm text-secondary sm:block" />
|
||||
<span class="hidden w-[132px] text-left text-sm text-secondary sm:block" />
|
||||
<span class="size-4 shrink-0" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="entries.length === 0"
|
||||
class="flex items-center gap-2 bg-surface-2 px-3 py-2 text-sm text-secondary"
|
||||
>
|
||||
<FileIcon class="size-4 shrink-0" />
|
||||
<span>{{ formatMessage(messages.emptyFolderTitle) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(entry, i) in entries"
|
||||
:key="`${entry.type}:${entry.path}`"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="group flex w-full min-w-0 select-none items-center gap-2 border-0 border-t border-solid border-surface-4 px-3 py-2 text-left first:border-t-0 focus:!outline-none"
|
||||
:class="[
|
||||
getRowBackgroundClass(i + (isHomePath ? 0 : 1)),
|
||||
entry.disabled && entry.type === 'file'
|
||||
? 'cursor-not-allowed opacity-50'
|
||||
: 'cursor-pointer hover:bg-surface-2.5',
|
||||
]"
|
||||
@click="selectEntry(entry)"
|
||||
@keydown="(event) => event.key === 'Enter' && selectEntry(entry)"
|
||||
>
|
||||
<Checkbox
|
||||
class="shrink-0"
|
||||
:model-value="entry.checked"
|
||||
:indeterminate="entry.indeterminate"
|
||||
:disabled="entry.disabled"
|
||||
:description="entry.name"
|
||||
@click.stop
|
||||
@update:model-value="toggleEntry(entry, $event)"
|
||||
/>
|
||||
<div class="flex size-4 shrink-0 items-center justify-center text-secondary">
|
||||
<component
|
||||
:is="entry.icon"
|
||||
class="size-4 group-hover:text-contrast group-focus:text-contrast"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
:ref="(element) => setEntryNameRef(entry.path, element)"
|
||||
v-tooltip="truncatedTooltip(entryNameRefs[entry.path], entry.name)"
|
||||
class="min-w-0 flex-1 truncate text-sm font-medium text-primary group-hover:text-contrast group-focus:text-contrast"
|
||||
>
|
||||
{{ entry.name }}
|
||||
</span>
|
||||
<div class="ml-2 flex shrink-0 items-center gap-4">
|
||||
<span class="hidden w-[92px] truncate text-left text-sm text-secondary sm:block">
|
||||
{{ formatSize(entry) }}
|
||||
</span>
|
||||
<span class="hidden w-[132px] truncate text-left text-sm text-secondary sm:block">
|
||||
{{ formatModified(entry) }}
|
||||
</span>
|
||||
<ChevronRightIcon
|
||||
class="size-4 shrink-0 text-secondary group-hover:text-contrast group-focus:text-contrast"
|
||||
:class="{ invisible: entry.type !== 'directory' }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in fillerRowCount"
|
||||
:key="`filler:${row}`"
|
||||
class="flex w-full min-w-0 select-none items-center gap-2 border-0 border-t border-solid border-surface-4 px-3 py-2 text-left"
|
||||
:class="getRowBackgroundClass(visibleRowCount + row - 1)"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="size-5 shrink-0" />
|
||||
<span class="size-4 shrink-0" />
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium opacity-0">.</span>
|
||||
<div class="ml-2 flex shrink-0 items-center gap-4">
|
||||
<span class="hidden w-[92px] text-left text-sm sm:block" />
|
||||
<span class="hidden w-[132px] text-left text-sm sm:block" />
|
||||
<span class="size-4 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
ChevronUpIcon,
|
||||
FileIcon,
|
||||
UndoIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { type Component, type ComponentPublicInstance, computed, ref, watch } from 'vue'
|
||||
|
||||
import { useFormatBytes } from '../../composables/format-bytes'
|
||||
import { useFormatDateTime } from '../../composables/format-date-time'
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
import { getDirectoryIcon, getFileIcon } from '../../utils/auto-icons'
|
||||
import { truncatedTooltip } from '../../utils/truncate'
|
||||
import Checkbox from './Checkbox.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const messages = defineMessages({
|
||||
name: {
|
||||
id: 'files.table-header.name',
|
||||
defaultMessage: 'Name',
|
||||
},
|
||||
size: {
|
||||
id: 'files.table-header.size',
|
||||
defaultMessage: 'Size',
|
||||
},
|
||||
modified: {
|
||||
id: 'files.table-header.modified',
|
||||
defaultMessage: 'Modified',
|
||||
},
|
||||
itemCount: {
|
||||
id: 'files.row.item-count',
|
||||
defaultMessage: '{count, plural, one {# item} other {# items}}',
|
||||
},
|
||||
parentFolder: {
|
||||
id: 'files.row.parent-folder',
|
||||
defaultMessage: 'Parent folder',
|
||||
},
|
||||
emptyFolderTitle: {
|
||||
id: 'files.layout.empty-folder-title',
|
||||
defaultMessage: 'This folder is empty',
|
||||
},
|
||||
})
|
||||
|
||||
export type FileTreeSelectItem = {
|
||||
path: string
|
||||
type?: 'directory' | 'file'
|
||||
disabled?: boolean
|
||||
size?: number
|
||||
modified?: number
|
||||
count?: number
|
||||
}
|
||||
|
||||
type NormalizedFileTreeSelectItem = FileTreeSelectItem & {
|
||||
name: string
|
||||
normalizedPath: string
|
||||
}
|
||||
|
||||
type FileTreeSelectEntry = {
|
||||
path: string
|
||||
name: string
|
||||
type: 'directory' | 'file'
|
||||
icon: Component
|
||||
checked: boolean
|
||||
indeterminate: boolean
|
||||
disabled: boolean
|
||||
size?: number
|
||||
modified?: number
|
||||
count?: number
|
||||
item?: NormalizedFileTreeSelectItem
|
||||
}
|
||||
|
||||
type FileTreeSelectSortField = 'name' | 'size' | 'modified'
|
||||
|
||||
const formatBytes = useFormatBytes()
|
||||
const formatDateTime = useFormatDateTime({
|
||||
year: '2-digit',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
items: FileTreeSelectItem[]
|
||||
modelValue: string[]
|
||||
}>(),
|
||||
{
|
||||
items: () => [],
|
||||
modelValue: () => [],
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
(e: 'navigate', path: string): void
|
||||
}>()
|
||||
|
||||
const currentPath = ref('')
|
||||
const sortField = ref<FileTreeSelectSortField>('name')
|
||||
const sortDesc = ref(false)
|
||||
const entryNameRefs = ref<Record<string, HTMLElement | null>>({})
|
||||
const isHomePath = computed(() => currentPath.value === '')
|
||||
const parentPath = computed(() => currentPath.value.split('/').slice(0, -1).join('/'))
|
||||
const initialMinimumRowCount = ref(0)
|
||||
|
||||
const normalizedItems = computed(() => {
|
||||
const items = new Map<string, NormalizedFileTreeSelectItem>()
|
||||
for (const item of props.items) {
|
||||
const normalizedPath = normalizePath(item.path)
|
||||
if (!normalizedPath) continue
|
||||
items.set(normalizedPath, {
|
||||
...item,
|
||||
path: item.path,
|
||||
name: getName(normalizedPath),
|
||||
normalizedPath,
|
||||
})
|
||||
}
|
||||
return [...items.values()]
|
||||
})
|
||||
|
||||
const selectedPaths = computed(() => new Set(props.modelValue.map((path) => normalizePath(path))))
|
||||
|
||||
const folderPaths = computed(() => {
|
||||
const paths = new Set<string>()
|
||||
for (const item of normalizedItems.value) {
|
||||
const segments = item.normalizedPath.split('/')
|
||||
for (let i = 1; i < segments.length; i++) {
|
||||
paths.add(segments.slice(0, i).join('/'))
|
||||
}
|
||||
if (item.type === 'directory') {
|
||||
paths.add(item.normalizedPath)
|
||||
}
|
||||
}
|
||||
return paths
|
||||
})
|
||||
|
||||
const entries = computed<FileTreeSelectEntry[]>(() => {
|
||||
const directories = new Map<string, FileTreeSelectEntry>()
|
||||
const files: FileTreeSelectEntry[] = []
|
||||
const currentSegments = currentPath.value ? currentPath.value.split('/') : []
|
||||
|
||||
for (const item of normalizedItems.value) {
|
||||
const segments = item.normalizedPath.split('/')
|
||||
if (!isInCurrentPath(segments, currentSegments)) continue
|
||||
|
||||
const remaining = segments.slice(currentSegments.length)
|
||||
if (remaining.length > 1) {
|
||||
const directoryName = remaining[0]
|
||||
const directoryPath = [...currentSegments, directoryName].join('/')
|
||||
if (!directories.has(directoryPath)) {
|
||||
directories.set(directoryPath, buildDirectoryEntry(directoryPath, directoryName))
|
||||
}
|
||||
} else if (remaining.length === 1) {
|
||||
if (item.type === 'directory') {
|
||||
directories.set(
|
||||
item.normalizedPath,
|
||||
buildDirectoryEntry(item.normalizedPath, item.name, item),
|
||||
)
|
||||
} else {
|
||||
files.push(buildFileEntry(item))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [...directories.values(), ...files].sort(compareEntries)
|
||||
})
|
||||
|
||||
const visibleSelectableEntries = computed(() => entries.value.filter((entry) => !entry.disabled))
|
||||
|
||||
const visibleSelectablePaths = computed(() => {
|
||||
const paths = new Set<string>()
|
||||
for (const entry of visibleSelectableEntries.value) {
|
||||
for (const path of getEntrySelectablePaths(entry)) {
|
||||
paths.add(path)
|
||||
}
|
||||
}
|
||||
return [...paths]
|
||||
})
|
||||
|
||||
const allVisibleSelected = computed(
|
||||
() =>
|
||||
visibleSelectablePaths.value.length > 0 &&
|
||||
visibleSelectablePaths.value.every((path) => selectedPaths.value.has(path)),
|
||||
)
|
||||
|
||||
const someVisibleSelected = computed(() =>
|
||||
visibleSelectablePaths.value.some((path) => selectedPaths.value.has(path)),
|
||||
)
|
||||
|
||||
const visibleRowCount = computed(
|
||||
() => entries.value.length + (isHomePath.value ? 0 : 1) + (entries.value.length === 0 ? 1 : 0),
|
||||
)
|
||||
|
||||
const fillerRowCount = computed(() =>
|
||||
Math.max(0, initialMinimumRowCount.value - visibleRowCount.value),
|
||||
)
|
||||
|
||||
watch(
|
||||
normalizedItems,
|
||||
() => {
|
||||
if (currentPath.value && !folderPaths.value.has(currentPath.value)) {
|
||||
currentPath.value = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
visibleRowCount,
|
||||
(rowCount) => {
|
||||
if (isHomePath.value && rowCount > 1 && initialMinimumRowCount.value === 0) {
|
||||
initialMinimumRowCount.value = rowCount
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
isHomePath,
|
||||
() => {
|
||||
if (isHomePath.value && visibleRowCount.value > 1 && initialMinimumRowCount.value === 0) {
|
||||
initialMinimumRowCount.value = visibleRowCount.value
|
||||
}
|
||||
},
|
||||
{ flush: 'post' },
|
||||
)
|
||||
|
||||
function normalizePath(path: string) {
|
||||
return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
|
||||
}
|
||||
|
||||
function getName(path: string) {
|
||||
return path.split('/').pop() ?? path
|
||||
}
|
||||
|
||||
function isInCurrentPath(segments: string[], currentSegments: string[]) {
|
||||
if (segments.length <= currentSegments.length) return false
|
||||
return currentSegments.every((segment, index) => segments[index] === segment)
|
||||
}
|
||||
|
||||
function handleSort(field: FileTreeSelectSortField) {
|
||||
if (sortField.value === field) {
|
||||
sortDesc.value = !sortDesc.value
|
||||
} else {
|
||||
sortField.value = field
|
||||
sortDesc.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getRowBackgroundClass(index: number) {
|
||||
return index % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'
|
||||
}
|
||||
|
||||
function compareEntries(a: FileTreeSelectEntry, b: FileTreeSelectEntry) {
|
||||
if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
|
||||
|
||||
switch (sortField.value) {
|
||||
case 'modified':
|
||||
return sortDesc.value
|
||||
? getModifiedSortValue(a) - getModifiedSortValue(b)
|
||||
: getModifiedSortValue(b) - getModifiedSortValue(a)
|
||||
case 'size':
|
||||
return sortDesc.value
|
||||
? getSizeSortValue(a) - getSizeSortValue(b)
|
||||
: getSizeSortValue(b) - getSizeSortValue(a)
|
||||
default:
|
||||
return sortDesc.value
|
||||
? b.name.localeCompare(a.name, undefined, { numeric: true, sensitivity: 'base' })
|
||||
: a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
|
||||
}
|
||||
}
|
||||
|
||||
function getSizeSortValue(entry: FileTreeSelectEntry) {
|
||||
return entry.type === 'directory' ? (entry.count ?? 0) : (entry.size ?? 0)
|
||||
}
|
||||
|
||||
function getModifiedSortValue(entry: FileTreeSelectEntry) {
|
||||
return entry.modified ?? 0
|
||||
}
|
||||
|
||||
function getFolderDescendants(path: string) {
|
||||
return normalizedItems.value.filter((item) => item.normalizedPath.startsWith(`${path}/`))
|
||||
}
|
||||
|
||||
function getFolderChildCount(path: string) {
|
||||
const children = new Set<string>()
|
||||
const prefix = `${path}/`
|
||||
for (const item of normalizedItems.value) {
|
||||
if (!item.normalizedPath.startsWith(prefix)) continue
|
||||
|
||||
const relativePath = item.normalizedPath.slice(prefix.length)
|
||||
const [childName] = relativePath.split('/')
|
||||
if (childName) {
|
||||
children.add(childName)
|
||||
}
|
||||
}
|
||||
return children.size
|
||||
}
|
||||
|
||||
function getLatestModified(items: NormalizedFileTreeSelectItem[]) {
|
||||
const modified = items
|
||||
.map((item) => item.modified)
|
||||
.filter((value): value is number => typeof value === 'number' && Number.isFinite(value))
|
||||
|
||||
if (modified.length === 0) return undefined
|
||||
return Math.max(...modified)
|
||||
}
|
||||
|
||||
function buildDirectoryEntry(
|
||||
path: string,
|
||||
name: string,
|
||||
item?: NormalizedFileTreeSelectItem,
|
||||
): FileTreeSelectEntry {
|
||||
const descendants = getFolderDescendants(path).filter((item) => !item.disabled)
|
||||
const selectedCount = descendants.filter((item) =>
|
||||
selectedPaths.value.has(item.normalizedPath),
|
||||
).length
|
||||
const selected = selectedPaths.value.has(path)
|
||||
|
||||
return {
|
||||
path,
|
||||
name,
|
||||
type: 'directory',
|
||||
icon: getDirectoryIcon(name),
|
||||
checked: selected || (descendants.length > 0 && selectedCount === descendants.length),
|
||||
indeterminate: !selected && selectedCount > 0 && selectedCount < descendants.length,
|
||||
disabled: item?.disabled ?? descendants.length === 0,
|
||||
modified: item?.modified ?? getLatestModified(descendants),
|
||||
count: item?.count ?? getFolderChildCount(path),
|
||||
item,
|
||||
}
|
||||
}
|
||||
|
||||
function buildFileEntry(item: NormalizedFileTreeSelectItem): FileTreeSelectEntry {
|
||||
return {
|
||||
path: item.normalizedPath,
|
||||
name: item.name,
|
||||
type: 'file',
|
||||
icon: getFileIcon(item.name),
|
||||
checked: selectedPaths.value.has(item.normalizedPath),
|
||||
indeterminate: false,
|
||||
disabled: item.disabled ?? false,
|
||||
size: item.size,
|
||||
modified: item.modified,
|
||||
item,
|
||||
}
|
||||
}
|
||||
|
||||
function navigateTo(path: string) {
|
||||
currentPath.value = path
|
||||
emit('navigate', path)
|
||||
}
|
||||
|
||||
function setEntryNameRef(path: string, element: Element | ComponentPublicInstance | null) {
|
||||
if (element instanceof HTMLElement) {
|
||||
entryNameRefs.value[path] = element
|
||||
} else {
|
||||
entryNameRefs.value[path] = null
|
||||
}
|
||||
}
|
||||
|
||||
function selectEntry(entry: FileTreeSelectEntry) {
|
||||
if (entry.type === 'directory') {
|
||||
navigateTo(entry.path)
|
||||
} else {
|
||||
toggleEntry(entry, !entry.checked)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleEntry(entry: FileTreeSelectEntry, selected: boolean) {
|
||||
if (entry.disabled) return
|
||||
|
||||
const nextSelectedPaths = new Set(selectedPaths.value)
|
||||
const paths = getEntrySelectablePaths(entry)
|
||||
|
||||
for (const path of paths) {
|
||||
if (selected) {
|
||||
nextSelectedPaths.add(path)
|
||||
} else {
|
||||
nextSelectedPaths.delete(path)
|
||||
}
|
||||
}
|
||||
|
||||
emit('update:modelValue', [...nextSelectedPaths])
|
||||
}
|
||||
|
||||
function getEntrySelectablePaths(entry: FileTreeSelectEntry) {
|
||||
if (entry.type === 'directory') {
|
||||
return entry.item?.type === 'directory'
|
||||
? [entry.path]
|
||||
: getFolderDescendants(entry.path)
|
||||
.filter((item) => !item.disabled)
|
||||
.map((item) => item.normalizedPath)
|
||||
}
|
||||
|
||||
return [entry.path]
|
||||
}
|
||||
|
||||
function toggleAllVisible(selected: boolean) {
|
||||
const nextSelectedPaths = new Set(selectedPaths.value)
|
||||
for (const path of visibleSelectablePaths.value) {
|
||||
if (selected) {
|
||||
nextSelectedPaths.add(path)
|
||||
} else {
|
||||
nextSelectedPaths.delete(path)
|
||||
}
|
||||
}
|
||||
|
||||
emit('update:modelValue', [...nextSelectedPaths])
|
||||
}
|
||||
|
||||
function formatSize(entry: FileTreeSelectEntry) {
|
||||
if (entry.type === 'directory') {
|
||||
return formatMessage(messages.itemCount, { count: entry.count ?? 0 })
|
||||
}
|
||||
|
||||
if (entry.size === undefined) return ''
|
||||
return formatBytes(entry.size)
|
||||
}
|
||||
|
||||
function formatModified(entry: FileTreeSelectEntry) {
|
||||
if (entry.modified === undefined) return ''
|
||||
return formatDateTime(new Date(entry.modified * 1000))
|
||||
}
|
||||
</script>
|
||||
57
packages/ui/src/components/base/FilterBar.vue
Normal file
57
packages/ui/src/components/base/FilterBar.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="(showAllOptions && options.length > 0) || options.length > 1"
|
||||
class="flex flex-wrap gap-1 items-center"
|
||||
>
|
||||
<FilterIcon class="text-secondary h-5 w-5 mr-1" />
|
||||
<button
|
||||
v-for="filter in options"
|
||||
:key="`filter-${filter.id}`"
|
||||
:class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
|
||||
@click="toggleFilter(filter.id)"
|
||||
>
|
||||
{{ formatMessage(filter.message) }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FilterIcon } from '@modrinth/assets'
|
||||
import { watch } from 'vue'
|
||||
|
||||
import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
export type FilterBarOption = {
|
||||
id: string
|
||||
message: MessageDescriptor
|
||||
}
|
||||
|
||||
const selectedFilters = defineModel<string[]>({ required: true })
|
||||
|
||||
const props = defineProps<{
|
||||
options: FilterBarOption[]
|
||||
showAllOptions?: boolean
|
||||
}>()
|
||||
|
||||
watch(
|
||||
() => props.options,
|
||||
() => {
|
||||
for (let i = 0; i < selectedFilters.value.length; i++) {
|
||||
const option = selectedFilters.value[i]
|
||||
if (!props.options.some((x) => x.id === option)) {
|
||||
selectedFilters.value.splice(i, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function toggleFilter(option: string) {
|
||||
if (selectedFilters.value.includes(option)) {
|
||||
selectedFilters.value.splice(selectedFilters.value.indexOf(option), 1)
|
||||
} else {
|
||||
selectedFilters.value.push(option)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
53
packages/ui/src/components/base/FilterPills.vue
Normal file
53
packages/ui/src/components/base/FilterPills.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-1.5">
|
||||
<FilterIcon class="size-5 text-secondary" />
|
||||
<button
|
||||
:class="pillClass(modelValue.length === 0)"
|
||||
:aria-pressed="modelValue.length === 0"
|
||||
@click="modelValue = []"
|
||||
>
|
||||
<slot name="all"> All </slot>
|
||||
</button>
|
||||
<button
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
:class="pillClass(modelValue.includes(option.id))"
|
||||
:aria-pressed="modelValue.includes(option.id)"
|
||||
@click="toggle(option.id)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FilterIcon } from '@modrinth/assets'
|
||||
|
||||
export interface FilterPillOption {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const modelValue = defineModel<string[]>({ required: true })
|
||||
|
||||
defineProps<{
|
||||
options: FilterPillOption[]
|
||||
}>()
|
||||
|
||||
function pillClass(active: boolean) {
|
||||
return [
|
||||
'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
|
||||
active
|
||||
? 'border-brand bg-brand-highlight text-brand'
|
||||
: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
|
||||
]
|
||||
}
|
||||
|
||||
function toggle(id: string) {
|
||||
if (modelValue.value.includes(id)) {
|
||||
modelValue.value = modelValue.value.filter((f) => f !== id)
|
||||
} else {
|
||||
modelValue.value = [...modelValue.value, id]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
310
packages/ui/src/components/base/FloatingActionBar.vue
Normal file
310
packages/ui/src/components/base/FloatingActionBar.vue
Normal file
@ -0,0 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import { useModalStack } from '../../composables/modal-stack'
|
||||
import { injectPageContext } from '../../providers'
|
||||
|
||||
const visibleFloatingActionBars = new Map<symbol, number>()
|
||||
|
||||
function updateFloatingActionBarDocumentState() {
|
||||
if (typeof document === 'undefined') return
|
||||
|
||||
document.body.classList.toggle('floating-action-bar-shown', visibleFloatingActionBars.size > 0)
|
||||
const clearance = Math.max(0, ...visibleFloatingActionBars.values())
|
||||
if (clearance > 0) {
|
||||
document.documentElement.style.setProperty('--floating-action-bar-clearance', `${clearance}px`)
|
||||
} else {
|
||||
document.documentElement.style.removeProperty('--floating-action-bar-clearance')
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
shown: boolean
|
||||
ariaLabel?: string
|
||||
hideWhenModalOpen?: boolean
|
||||
position?: 'bottom' | 'top'
|
||||
allowOverflow?: boolean
|
||||
}>()
|
||||
|
||||
const INTERCOM_BUBBLE_GAP = 8
|
||||
|
||||
const barEl = ref<HTMLElement | null>(null)
|
||||
const toolbarEl = ref<HTMLElement | null>(null)
|
||||
const compact = ref(false)
|
||||
|
||||
const { stackCount } = useModalStack()
|
||||
const pageContext = injectPageContext(null)
|
||||
const shown = computed(() => props.shown && (!props.hideWhenModalOpen || stackCount.value === 0))
|
||||
const floatingActionBarId = Symbol('floating-action-bar')
|
||||
const intercomBubbleClearanceRequestId = Symbol('floating-action-bar')
|
||||
const zIndex = computed(() => 100 + stackCount.value * 10 + 7)
|
||||
const leftOffset = computed(
|
||||
() => pageContext?.floatingActionBarOffsets?.left.value ?? 'var(--left-bar-width, 0px)',
|
||||
)
|
||||
const scrollbarWidth = ref(0)
|
||||
|
||||
const rightOffset = computed(() => {
|
||||
const base = pageContext?.floatingActionBarOffsets?.right.value ?? 'var(--right-bar-width, 0px)'
|
||||
if (stackCount.value > 0) {
|
||||
return `calc(${base} + ${scrollbarWidth.value}px)`
|
||||
}
|
||||
return base
|
||||
})
|
||||
const barStyle = computed(() => ({
|
||||
zIndex: zIndex.value,
|
||||
'--floating-action-bar-left-offset': leftOffset.value,
|
||||
'--floating-action-bar-right-offset': rightOffset.value,
|
||||
}))
|
||||
|
||||
const barClasses = computed(() => ({
|
||||
'bottom-0': !props.position || props.position === 'bottom',
|
||||
'top-12': props.position === 'top',
|
||||
}))
|
||||
|
||||
function checkCompact() {
|
||||
const el = toolbarEl.value
|
||||
if (!el) return
|
||||
|
||||
const clone = el.cloneNode(true) as HTMLElement
|
||||
clone.classList.remove('bar-compact')
|
||||
clone.style.position = 'absolute'
|
||||
clone.style.visibility = 'hidden'
|
||||
clone.style.pointerEvents = 'none'
|
||||
clone.style.width = `${el.offsetWidth}px`
|
||||
|
||||
el.parentElement!.appendChild(clone)
|
||||
const needsCompact = clone.offsetHeight > 70
|
||||
clone.remove()
|
||||
|
||||
compact.value = needsCompact
|
||||
}
|
||||
|
||||
function clearIntercomBubbleClearance() {
|
||||
pageContext?.intercomBubble?.requestVerticalClearance(intercomBubbleClearanceRequestId, null)
|
||||
}
|
||||
|
||||
function updateIntercomBubbleClearance() {
|
||||
const intercomBubble = pageContext?.intercomBubble
|
||||
if (!intercomBubble) return
|
||||
|
||||
if (
|
||||
typeof window === 'undefined' ||
|
||||
!shown.value ||
|
||||
stackCount.value > 0 ||
|
||||
!barEl.value ||
|
||||
!toolbarEl.value
|
||||
) {
|
||||
clearIntercomBubbleClearance()
|
||||
return
|
||||
}
|
||||
|
||||
const barRect = barEl.value.getBoundingClientRect()
|
||||
const toolbarRight = barRect.left + toolbarEl.value.offsetLeft + toolbarEl.value.offsetWidth
|
||||
const bubbleLeft =
|
||||
window.innerWidth - intercomBubble.horizontalPadding.value - intercomBubble.width.value
|
||||
|
||||
if (toolbarRight + INTERCOM_BUBBLE_GAP <= bubbleLeft) {
|
||||
clearIntercomBubbleClearance()
|
||||
return
|
||||
}
|
||||
|
||||
const barStyle = window.getComputedStyle(barEl.value)
|
||||
const bottomOffset = Number.parseFloat(barStyle.bottom) || 0
|
||||
intercomBubble.requestVerticalClearance(
|
||||
intercomBubbleClearanceRequestId,
|
||||
Math.ceil(bottomOffset + barEl.value.offsetHeight + INTERCOM_BUBBLE_GAP),
|
||||
)
|
||||
}
|
||||
|
||||
function getBottomClearance() {
|
||||
if (
|
||||
typeof window === 'undefined' ||
|
||||
!barEl.value ||
|
||||
(props.position !== undefined && props.position !== 'bottom')
|
||||
) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return Math.max(0, Math.ceil(window.innerHeight - barEl.value.getBoundingClientRect().top))
|
||||
}
|
||||
|
||||
function updateFloatingActionBarState(isShown = shown.value) {
|
||||
if (isShown) {
|
||||
visibleFloatingActionBars.set(floatingActionBarId, getBottomClearance())
|
||||
} else {
|
||||
visibleFloatingActionBars.delete(floatingActionBarId)
|
||||
}
|
||||
|
||||
updateFloatingActionBarDocumentState()
|
||||
if (!isShown) {
|
||||
clearIntercomBubbleClearance()
|
||||
}
|
||||
}
|
||||
|
||||
let observer: ResizeObserver | null = null
|
||||
let updateFrame: number | null = null
|
||||
|
||||
function scheduleFloatingActionBarLayoutUpdate() {
|
||||
if (typeof window === 'undefined') return
|
||||
if (updateFrame !== null) {
|
||||
window.cancelAnimationFrame(updateFrame)
|
||||
}
|
||||
|
||||
updateFrame = window.requestAnimationFrame(() => {
|
||||
updateFrame = null
|
||||
updateFloatingActionBarState()
|
||||
updateIntercomBubbleClearance()
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
toolbarEl,
|
||||
(el) => {
|
||||
observer?.disconnect()
|
||||
if (!el) return
|
||||
observer = new ResizeObserver(() => {
|
||||
checkCompact()
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
})
|
||||
observer.observe(el.parentElement!)
|
||||
checkCompact()
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
shown,
|
||||
async (isShown) => {
|
||||
await nextTick()
|
||||
updateFloatingActionBarState(isShown)
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
[
|
||||
shown,
|
||||
leftOffset,
|
||||
rightOffset,
|
||||
stackCount,
|
||||
() => pageContext?.intercomBubble?.horizontalPadding.value,
|
||||
() => pageContext?.intercomBubble?.width.value,
|
||||
],
|
||||
() => scheduleFloatingActionBarLayoutUpdate(),
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function handleResize() {
|
||||
if (stackCount.value === 0) {
|
||||
scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth
|
||||
}
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
}
|
||||
|
||||
function handleTransitionEnd(event: TransitionEvent) {
|
||||
if (event.target === barEl.value && event.propertyName === 'bottom') {
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth
|
||||
window.addEventListener('resize', handleResize)
|
||||
scheduleFloatingActionBarLayoutUpdate()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect()
|
||||
window.removeEventListener('resize', handleResize)
|
||||
if (updateFrame !== null) {
|
||||
window.cancelAnimationFrame(updateFrame)
|
||||
}
|
||||
clearIntercomBubbleClearance()
|
||||
visibleFloatingActionBars.delete(floatingActionBarId)
|
||||
updateFloatingActionBarDocumentState()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="floating-action-bar" appear>
|
||||
<div
|
||||
v-if="shown"
|
||||
ref="barEl"
|
||||
class="floating-action-bar pointer-events-none drop-shadow-2xl fixed p-4"
|
||||
:class="barClasses"
|
||||
:style="barStyle"
|
||||
aria-live="polite"
|
||||
@transitionend.self="handleTransitionEnd"
|
||||
>
|
||||
<div
|
||||
ref="toolbarEl"
|
||||
role="toolbar"
|
||||
:aria-label="ariaLabel"
|
||||
class="pointer-events-auto relative flex items-center gap-1.5 rounded-[20px] bg-surface-3 border border-surface-5 border-solid mx-auto md:max-w-[60vw] px-3 py-2.5 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.3),0px_6px_10px_0px_rgba(0,0,0,0.15)]"
|
||||
:class="{
|
||||
'overflow-visible': allowOverflow,
|
||||
'overflow-clip': !allowOverflow,
|
||||
'bar-compact': compact,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.floating-action-bar {
|
||||
left: var(--floating-action-bar-left-offset, var(--left-bar-width, 0px));
|
||||
right: var(--floating-action-bar-right-offset, var(--right-bar-width, 0px));
|
||||
transition:
|
||||
bottom 0.25s ease-in-out,
|
||||
top 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-action-bar-enter-active {
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96),
|
||||
opacity 0.25s cubic-bezier(0.15, 1.4, 0.64, 0.96);
|
||||
}
|
||||
|
||||
.floating-action-bar-leave-active {
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.floating-action-bar-enter-from {
|
||||
transform: scale(0.5) translateY(-10rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.floating-action-bar-leave-to {
|
||||
transform: scale(0.96) translateY(-0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (any-hover: none) and (max-width: 640px) {
|
||||
.floating-action-bar.bottom-0 {
|
||||
bottom: var(--size-mobile-navbar-height);
|
||||
}
|
||||
|
||||
.expanded-mobile-nav .floating-action-bar.bottom-0 {
|
||||
bottom: var(--size-mobile-navbar-height-expanded);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.bar-compact .bar-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bar-compact .cq-show-icon {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
314
packages/ui/src/components/base/FloatingPanel.vue
Normal file
314
packages/ui/src/components/base/FloatingPanel.vue
Normal file
@ -0,0 +1,314 @@
|
||||
<script setup lang="ts">
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const PANEL_VIEWPORT_MARGIN = 8
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
|
||||
distance?: number
|
||||
disabled?: boolean
|
||||
buttonClass?: string
|
||||
panelClass?: string
|
||||
autoFocus?: boolean
|
||||
}>(),
|
||||
{
|
||||
placement: 'bottom-end',
|
||||
distance: 8,
|
||||
disabled: false,
|
||||
autoFocus: true,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
open: []
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const triggerRef = ref<HTMLElement>()
|
||||
const panelRef = ref<HTMLElement>()
|
||||
const rafId = ref<number | null>(null)
|
||||
|
||||
const openDirection = ref<'up' | 'down'>('down')
|
||||
const horizontalAlignment = ref<'start' | 'end'>('end')
|
||||
|
||||
const panelStyle = ref({
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
})
|
||||
|
||||
const transformOrigin = computed(() => {
|
||||
const vertical = openDirection.value === 'down' ? 'top' : 'bottom'
|
||||
const horizontal = horizontalAlignment.value === 'end' ? 'right' : 'left'
|
||||
return `${vertical} ${horizontal}`
|
||||
})
|
||||
|
||||
function determineOpenDirection(
|
||||
triggerRect: DOMRect,
|
||||
panelRect: DOMRect,
|
||||
viewportHeight: number,
|
||||
): 'up' | 'down' {
|
||||
const preferDown = props.placement.startsWith('bottom')
|
||||
|
||||
const hasSpaceBelow =
|
||||
triggerRect.bottom + props.distance + panelRect.height + PANEL_VIEWPORT_MARGIN <= viewportHeight
|
||||
const hasSpaceAbove =
|
||||
triggerRect.top - props.distance - panelRect.height - PANEL_VIEWPORT_MARGIN >= 0
|
||||
|
||||
if (preferDown) {
|
||||
return hasSpaceBelow ? 'down' : hasSpaceAbove ? 'up' : 'down'
|
||||
} else {
|
||||
return hasSpaceAbove ? 'up' : hasSpaceBelow ? 'down' : 'up'
|
||||
}
|
||||
}
|
||||
|
||||
function calculateVerticalPosition(
|
||||
triggerRect: DOMRect,
|
||||
panelRect: DOMRect,
|
||||
direction: 'up' | 'down',
|
||||
): number {
|
||||
return direction === 'up'
|
||||
? triggerRect.top - panelRect.height - props.distance
|
||||
: triggerRect.bottom + props.distance
|
||||
}
|
||||
|
||||
function calculateHorizontalPosition(
|
||||
triggerRect: DOMRect,
|
||||
panelRect: DOMRect,
|
||||
viewportWidth: number,
|
||||
): number {
|
||||
const alignEnd = props.placement.endsWith('end')
|
||||
let left: number
|
||||
|
||||
if (alignEnd) {
|
||||
left = triggerRect.right - panelRect.width
|
||||
} else {
|
||||
left = triggerRect.left
|
||||
}
|
||||
|
||||
if (left + panelRect.width > viewportWidth - PANEL_VIEWPORT_MARGIN) {
|
||||
left = Math.max(PANEL_VIEWPORT_MARGIN, viewportWidth - panelRect.width - PANEL_VIEWPORT_MARGIN)
|
||||
}
|
||||
if (left < PANEL_VIEWPORT_MARGIN) {
|
||||
left = PANEL_VIEWPORT_MARGIN
|
||||
}
|
||||
|
||||
return left
|
||||
}
|
||||
|
||||
async function updatePanelPosition() {
|
||||
if (!triggerRef.value || !panelRef.value) return
|
||||
|
||||
await nextTick()
|
||||
|
||||
const triggerRect = triggerRef.value.getBoundingClientRect()
|
||||
const panelRect = panelRef.value.getBoundingClientRect()
|
||||
const viewportHeight = window.innerHeight
|
||||
const viewportWidth = window.innerWidth
|
||||
|
||||
const direction = determineOpenDirection(triggerRect, panelRect, viewportHeight)
|
||||
const top = calculateVerticalPosition(triggerRect, panelRect, direction)
|
||||
const left = calculateHorizontalPosition(triggerRect, panelRect, viewportWidth)
|
||||
|
||||
panelStyle.value = {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`,
|
||||
}
|
||||
|
||||
openDirection.value = direction
|
||||
horizontalAlignment.value = props.placement.endsWith('end') ? 'end' : 'start'
|
||||
}
|
||||
|
||||
function startPositionTracking() {
|
||||
function track() {
|
||||
updatePanelPosition()
|
||||
rafId.value = requestAnimationFrame(track)
|
||||
}
|
||||
rafId.value = requestAnimationFrame(track)
|
||||
}
|
||||
|
||||
function stopPositionTracking() {
|
||||
if (rafId.value !== null) {
|
||||
cancelAnimationFrame(rafId.value)
|
||||
rafId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function focusPanelContent() {
|
||||
if (!panelRef.value) return
|
||||
|
||||
const focusable = panelRef.value.querySelector<HTMLElement>(
|
||||
'button:not([data-focus-trap]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
||||
)
|
||||
if (focusable) {
|
||||
focusable.focus()
|
||||
}
|
||||
}
|
||||
|
||||
async function open() {
|
||||
if (props.disabled || isOpen.value) return
|
||||
|
||||
isOpen.value = true
|
||||
emit('open')
|
||||
|
||||
await nextTick()
|
||||
await updatePanelPosition()
|
||||
startPositionTracking()
|
||||
|
||||
if (props.autoFocus) {
|
||||
setTimeout(() => {
|
||||
focusPanelContent()
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isOpen.value) return
|
||||
|
||||
stopPositionTracking()
|
||||
isOpen.value = false
|
||||
emit('close')
|
||||
|
||||
nextTick(() => {
|
||||
triggerRef.value?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
} else {
|
||||
open()
|
||||
}
|
||||
}
|
||||
|
||||
onClickOutside(
|
||||
panelRef,
|
||||
() => {
|
||||
close()
|
||||
},
|
||||
{ ignore: [triggerRef, '#teleports'] },
|
||||
)
|
||||
|
||||
function handleTriggerKeydown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
event.preventDefault()
|
||||
toggle()
|
||||
break
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
open()
|
||||
break
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
open()
|
||||
break
|
||||
case 'Escape':
|
||||
if (isOpen.value) {
|
||||
event.preventDefault()
|
||||
close()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function handlePanelKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault()
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
function handleWindowResize() {
|
||||
if (isOpen.value) {
|
||||
updatePanelPosition()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleWindowResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleWindowResize)
|
||||
stopPositionTracking()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
toggle,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative inline-block">
|
||||
<ButtonStyled v-bind="$attrs">
|
||||
<button
|
||||
ref="triggerRef"
|
||||
:class="buttonClass"
|
||||
:disabled="disabled"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="true"
|
||||
@click="toggle"
|
||||
@keydown="handleTriggerKeydown"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="floating-panel-enter-active"
|
||||
enter-from-class="floating-panel-enter-from"
|
||||
enter-to-class="floating-panel-enter-to"
|
||||
leave-active-class="floating-panel-leave-active"
|
||||
leave-from-class="floating-panel-leave-from"
|
||||
leave-to-class="floating-panel-leave-to"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="panelRef"
|
||||
class="fixed z-[9995] w-fit rounded-[14px] border border-surface-5 bg-surface-3 border-solid border-px p-3 shadow-2xl"
|
||||
:class="panelClass"
|
||||
:style="[panelStyle, { transformOrigin }]"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
@keydown="handlePanelKeydown"
|
||||
@mousedown.stop
|
||||
>
|
||||
<button class="sr-only" data-focus-trap @focusin="close"></button>
|
||||
<slot name="panel"></slot>
|
||||
<button class="sr-only" data-focus-trap @focusin="close"></button>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .floating-panel-enter-active,
|
||||
.floating-panel-leave-active {
|
||||
transition:
|
||||
transform 0.125s ease-in-out,
|
||||
opacity 0.125s ease-in-out;
|
||||
}
|
||||
|
||||
.floating-panel-enter-from,
|
||||
.floating-panel-leave-to {
|
||||
transform: scale(0.85);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.floating-panel-enter-to,
|
||||
.floating-panel-leave-from {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
} */
|
||||
</style>
|
||||
19
packages/ui/src/components/base/FormattedTag.vue
Normal file
19
packages/ui/src/components/base/FormattedTag.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { useVIntl } from '../../composables'
|
||||
import { formatTag } from '../../utils/tag-messages.ts'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const props = defineProps<{
|
||||
tag: string
|
||||
enforceType?: 'loader' | 'category'
|
||||
}>()
|
||||
|
||||
const message = computed(() => formatTag(formatMessage, props.tag, props.enforceType))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
{{ message }}
|
||||
</template>
|
||||
21
packages/ui/src/components/base/HeadingLink.vue
Normal file
21
packages/ui/src/components/base/HeadingLink.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<AutoLink
|
||||
:to="to"
|
||||
class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group w-fit"
|
||||
>
|
||||
<slot />
|
||||
<ChevronRightIcon
|
||||
class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
|
||||
/>
|
||||
</AutoLink>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@modrinth/assets'
|
||||
|
||||
import AutoLink from './AutoLink.vue'
|
||||
|
||||
defineProps<{
|
||||
to: unknown
|
||||
}>()
|
||||
</script>
|
||||
3
packages/ui/src/components/base/HorizontalRule.vue
Normal file
3
packages/ui/src/components/base/HorizontalRule.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div class="h-[1px] w-full bg-divider"></div>
|
||||
</template>
|
||||
542
packages/ui/src/components/base/I18nDebugPanel.vue
Normal file
542
packages/ui/src/components/base/I18nDebugPanel.vue
Normal file
@ -0,0 +1,542 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
MaximizeIcon,
|
||||
MinusIcon,
|
||||
ScanEyeIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
import { injectI18nDebug } from '../../composables/i18n-debug'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
import StyledInput from './StyledInput.vue'
|
||||
|
||||
const debugContext = injectI18nDebug()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const minimized = ref(false)
|
||||
const copiedKey = ref<string | null>(null)
|
||||
const highlightedEl = ref<Element | null>(null)
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null)
|
||||
const activeEntryIndex = ref(-1)
|
||||
const listContainerRef = ref<HTMLElement | null>(null)
|
||||
|
||||
// Dragging state
|
||||
const isDragging = ref(false)
|
||||
const panelPos = ref({ x: -1, y: -1 })
|
||||
const dragOffset = ref({ x: 0, y: 0 })
|
||||
|
||||
// Resize state
|
||||
const isResizing = ref(false)
|
||||
const panelWidth = ref(380)
|
||||
const panelHeight = ref(420)
|
||||
const resizeStart = ref({ x: 0, y: 0, w: 0, h: 0 })
|
||||
|
||||
const filteredEntries = computed(() => {
|
||||
if (!debugContext) return []
|
||||
const entries = Array.from(debugContext.registry.values())
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
if (!q) return entries
|
||||
return entries.filter((e) => e.key.toLowerCase().includes(q) || e.value.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
const keyCount = computed(() => debugContext?.registry.size ?? 0)
|
||||
|
||||
// Reset active index when search changes
|
||||
watch(searchQuery, () => {
|
||||
activeEntryIndex.value = -1
|
||||
})
|
||||
|
||||
function truncate(str: string, max: number): string {
|
||||
return str.length > max ? str.slice(0, max) + '\u2026' : str
|
||||
}
|
||||
|
||||
function highlightMatch(text: string, query: string): string {
|
||||
if (!query) return escapeHtml(text)
|
||||
const escaped = escapeHtml(text)
|
||||
const q = escapeHtml(query)
|
||||
const regex = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
|
||||
return escaped.replace(regex, '<mark class="bg-brand/20 text-brand rounded-sm px-0.5">$1</mark>')
|
||||
}
|
||||
|
||||
function escapeHtml(str: string): string {
|
||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
|
||||
function toggleKeyReveal() {
|
||||
if (debugContext) {
|
||||
debugContext.keyReveal.value = !debugContext.keyReveal.value
|
||||
}
|
||||
}
|
||||
|
||||
function toggleOverlay() {
|
||||
if (debugContext?.enabled.value) {
|
||||
document.body.classList.toggle('i18n-debug')
|
||||
}
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
if (debugContext) {
|
||||
debugContext.panelOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function highlightElement(key: string) {
|
||||
clearHighlight()
|
||||
const el = document.querySelector(`[data-i18n-key="${CSS.escape(key)}"]`)
|
||||
if (el) {
|
||||
highlightedEl.value = el
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
;(el as HTMLElement).style.outline = '2px solid var(--color-brand)'
|
||||
;(el as HTMLElement).style.outlineOffset = '3px'
|
||||
;(el as HTMLElement).style.borderRadius = '4px'
|
||||
}
|
||||
}
|
||||
|
||||
function clearHighlight() {
|
||||
if (highlightedEl.value) {
|
||||
;(highlightedEl.value as HTMLElement).style.outline = ''
|
||||
;(highlightedEl.value as HTMLElement).style.outlineOffset = ''
|
||||
;(highlightedEl.value as HTMLElement).style.borderRadius = ''
|
||||
highlightedEl.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function copyKey(key: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(key)
|
||||
copiedKey.value = key
|
||||
setTimeout(() => {
|
||||
copiedKey.value = null
|
||||
}, 2000)
|
||||
} catch {
|
||||
// clipboard not available
|
||||
}
|
||||
}
|
||||
|
||||
function onPanelKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
activeEntryIndex.value = Math.min(activeEntryIndex.value + 1, filteredEntries.value.length - 1)
|
||||
scrollActiveIntoView()
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
activeEntryIndex.value = Math.max(activeEntryIndex.value - 1, 0)
|
||||
scrollActiveIntoView()
|
||||
} else if (e.key === 'Enter' && activeEntryIndex.value >= 0) {
|
||||
e.preventDefault()
|
||||
const entry = filteredEntries.value[activeEntryIndex.value]
|
||||
if (entry) copyKey(entry.key)
|
||||
} else if (e.key === 'Escape') {
|
||||
if (searchQuery.value) {
|
||||
searchQuery.value = ''
|
||||
} else {
|
||||
closePanel()
|
||||
}
|
||||
} else if (e.key === '/' && document.activeElement !== searchInputRef.value) {
|
||||
e.preventDefault()
|
||||
searchInputRef.value?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function scrollActiveIntoView() {
|
||||
nextTick(() => {
|
||||
const activeEl = listContainerRef.value?.querySelector('[data-active="true"]')
|
||||
activeEl?.scrollIntoView({ block: 'nearest' })
|
||||
})
|
||||
}
|
||||
|
||||
// Drag handling
|
||||
function onHeaderMouseDown(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).closest('button')) return
|
||||
isDragging.value = true
|
||||
const panel = (e.currentTarget as HTMLElement).closest('.i18n-debug-panel') as HTMLElement
|
||||
if (panel) {
|
||||
const rect = panel.getBoundingClientRect()
|
||||
dragOffset.value = { x: e.clientX - rect.left, y: e.clientY - rect.top }
|
||||
}
|
||||
document.addEventListener('mousemove', onMouseMove)
|
||||
document.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
panelPos.value = {
|
||||
x: Math.max(0, Math.min(e.clientX - dragOffset.value.x, window.innerWidth - 100)),
|
||||
y: Math.max(0, Math.min(e.clientY - dragOffset.value.y, window.innerHeight - 60)),
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
isDragging.value = false
|
||||
document.removeEventListener('mousemove', onMouseMove)
|
||||
document.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
|
||||
// Resize handling
|
||||
function onResizeMouseDown(e: MouseEvent) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
isResizing.value = true
|
||||
resizeStart.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
w: panelWidth.value,
|
||||
h: panelHeight.value,
|
||||
}
|
||||
document.addEventListener('mousemove', onResizeMove)
|
||||
document.addEventListener('mouseup', onResizeUp)
|
||||
}
|
||||
|
||||
function onResizeMove(e: MouseEvent) {
|
||||
if (!isResizing.value) return
|
||||
const dx = e.clientX - resizeStart.value.x
|
||||
const dy = e.clientY - resizeStart.value.y
|
||||
panelWidth.value = Math.max(320, Math.min(600, resizeStart.value.w + dx))
|
||||
panelHeight.value = Math.max(280, Math.min(700, resizeStart.value.h + dy))
|
||||
}
|
||||
|
||||
function onResizeUp() {
|
||||
isResizing.value = false
|
||||
document.removeEventListener('mousemove', onResizeMove)
|
||||
document.removeEventListener('mouseup', onResizeUp)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearHighlight()
|
||||
document.removeEventListener('mousemove', onMouseMove)
|
||||
document.removeEventListener('mouseup', onMouseUp)
|
||||
document.removeEventListener('mousemove', onResizeMove)
|
||||
document.removeEventListener('mouseup', onResizeUp)
|
||||
})
|
||||
|
||||
const panelStyle = computed(() => {
|
||||
const base: Record<string, string> = {
|
||||
width: minimized.value ? 'auto' : `${panelWidth.value}px`,
|
||||
}
|
||||
if (panelPos.value.x >= 0 && panelPos.value.y >= 0) {
|
||||
base.left = `${panelPos.value.x}px`
|
||||
base.top = `${panelPos.value.y}px`
|
||||
base.right = 'auto'
|
||||
base.bottom = 'auto'
|
||||
} else {
|
||||
base.right = '20px'
|
||||
base.bottom = '20px'
|
||||
}
|
||||
return base
|
||||
})
|
||||
|
||||
const listMaxHeight = computed(() => `${panelHeight.value - 120}px`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
enter-from-class="opacity-0 translate-y-3 scale-95"
|
||||
enter-to-class="opacity-100 translate-y-0 scale-100"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
leave-from-class="opacity-100 translate-y-0 scale-100"
|
||||
leave-to-class="opacity-0 translate-y-3 scale-95"
|
||||
>
|
||||
<div
|
||||
v-if="debugContext?.panelOpen.value"
|
||||
tabindex="-1"
|
||||
class="i18n-debug-panel fixed z-[9998] flex flex-col overflow-hidden rounded-xl border-2 border-solid border-surface-5 bg-surface-2 shadow-2xl outline-none"
|
||||
:class="{
|
||||
'cursor-grabbing': isDragging,
|
||||
'select-none': isDragging || isResizing,
|
||||
}"
|
||||
:style="panelStyle"
|
||||
@keydown="onPanelKeydown"
|
||||
>
|
||||
<!-- Resize handle (bottom-right corner) -->
|
||||
<div
|
||||
v-if="!minimized"
|
||||
class="absolute -bottom-0.5 -right-0.5 z-10 h-4 w-4 cursor-se-resize"
|
||||
@mousedown="onResizeMouseDown"
|
||||
>
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
class="absolute bottom-1 right-1 text-secondary/40"
|
||||
>
|
||||
<circle cx="8.5" cy="8.5" r="1" fill="currentColor" />
|
||||
<circle cx="5" cy="8.5" r="1" fill="currentColor" />
|
||||
<circle cx="8.5" cy="5" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="flex items-center gap-2.5 px-3.5 py-2.5 cursor-move select-none border-b border-surface-5/50"
|
||||
@mousedown="onHeaderMouseDown"
|
||||
>
|
||||
<!-- Title group -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-6 w-6 items-center justify-center rounded-md bg-brand/10">
|
||||
<ScanEyeIcon class="h-3.5 w-3.5 text-brand" />
|
||||
</div>
|
||||
<span class="text-[13px] font-semibold tracking-tight text-primary">
|
||||
i18n Inspector
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Key count badge -->
|
||||
<div class="flex items-center gap-1 rounded-full bg-surface-5/50 px-2 py-0.5">
|
||||
<span class="text-[11px] font-medium tabular-nums text-secondary">
|
||||
{{ keyCount }} {{ keyCount === 1 ? 'key' : 'keys' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="ml-auto flex items-center gap-0.5">
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button
|
||||
v-tooltip="
|
||||
debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'
|
||||
"
|
||||
@click="toggleKeyReveal"
|
||||
>
|
||||
<component :is="debugContext?.keyReveal.value ? EyeOffIcon : EyeIcon" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button v-tooltip="'Toggle CSS debug overlay'" @click="toggleOverlay">
|
||||
<ScanEyeIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
|
||||
<div class="mx-0.5 h-4 w-px bg-surface-5/60" />
|
||||
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button
|
||||
v-tooltip="minimized ? 'Expand panel' : 'Minimize panel'"
|
||||
@click="minimized = !minimized"
|
||||
>
|
||||
<component :is="minimized ? MaximizeIcon : MinusIcon" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button v-tooltip="'Close inspector'" @click="closePanel">
|
||||
<XIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body (hidden when minimized) -->
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
enter-from-class="opacity-0 max-h-0"
|
||||
enter-to-class="opacity-100 max-h-[600px]"
|
||||
leave-active-class="transition-all duration-150 ease-in"
|
||||
leave-from-class="opacity-100 max-h-[600px]"
|
||||
leave-to-class="opacity-0 max-h-0"
|
||||
>
|
||||
<div v-if="!minimized" class="flex flex-col overflow-hidden w-full">
|
||||
<!-- Search -->
|
||||
<div class="px-3 py-2.5 !w-full">
|
||||
<StyledInput
|
||||
ref="searchInputRef"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search keys or values..."
|
||||
clearable
|
||||
:icon="SearchIcon"
|
||||
size="small"
|
||||
wrapper-class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Entry list -->
|
||||
<div
|
||||
ref="listContainerRef"
|
||||
class="overflow-y-auto overscroll-contain scroll-smooth"
|
||||
:style="{ maxHeight: listMaxHeight }"
|
||||
>
|
||||
<TransitionGroup
|
||||
move-class="transition-transform duration-200"
|
||||
enter-active-class="transition-all duration-150 ease-out"
|
||||
enter-from-class="opacity-0 -translate-x-2"
|
||||
enter-to-class="opacity-100 translate-x-0"
|
||||
leave-active-class="transition-all duration-100 ease-in absolute w-full"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-for="(entry, index) in filteredEntries"
|
||||
:key="entry.key"
|
||||
class="group relative flex items-center gap-2.5 px-3.5 py-2 transition-colors cursor-pointer"
|
||||
:class="[activeEntryIndex === index ? 'bg-brand/8' : 'hover:bg-surface-5/40']"
|
||||
:data-active="activeEntryIndex === index"
|
||||
@mouseenter="
|
||||
() => {
|
||||
highlightElement(entry.key)
|
||||
activeEntryIndex = index
|
||||
}
|
||||
"
|
||||
@mouseleave="clearHighlight"
|
||||
@click="copyKey(entry.key)"
|
||||
>
|
||||
<!-- Active indicator -->
|
||||
<div
|
||||
v-if="activeEntryIndex === index"
|
||||
class="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-brand transition-all"
|
||||
/>
|
||||
|
||||
<!-- Entry content -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div
|
||||
class="font-mono text-[12px] leading-relaxed text-primary truncate"
|
||||
:title="entry.key"
|
||||
v-html="highlightMatch(entry.key, searchQuery)"
|
||||
/>
|
||||
<div
|
||||
class="mt-0.5 text-[11px] leading-relaxed text-secondary truncate"
|
||||
:title="entry.value"
|
||||
v-html="highlightMatch(truncate(entry.value, 50), searchQuery)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<!-- Copied feedback -->
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-150 ease-out"
|
||||
enter-from-class="opacity-0 scale-90"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition-all duration-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0 scale-90"
|
||||
>
|
||||
<span
|
||||
v-if="copiedKey === entry.key"
|
||||
class="flex items-center gap-1 rounded-md bg-green/10 px-1.5 py-0.5 text-[10px] font-medium text-green"
|
||||
>
|
||||
<svg width="10" height="10" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M3 8.5L6.5 12L13 4"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Copied
|
||||
</span>
|
||||
</Transition>
|
||||
|
||||
<!-- Copy hint (shown on hover when not copied) -->
|
||||
<span
|
||||
v-if="copiedKey !== entry.key"
|
||||
class="text-[10px] text-secondary/0 transition-colors group-hover:text-secondary/60"
|
||||
>
|
||||
click to copy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-if="filteredEntries.length === 0"
|
||||
class="flex flex-col items-center justify-center px-4 py-10"
|
||||
>
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-5/40">
|
||||
<SearchIcon class="h-4 w-4 text-secondary/60" />
|
||||
</div>
|
||||
<p class="mt-3 text-[13px] font-medium text-primary">
|
||||
{{ searchQuery ? 'No matches found' : 'No keys registered' }}
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] text-secondary">
|
||||
{{
|
||||
searchQuery
|
||||
? 'Try a different search term'
|
||||
: 'Navigate the app to discover i18n keys'
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer status bar -->
|
||||
<div class="flex items-center justify-between border-t border-surface-5/50 px-3.5 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-green animate-pulse" />
|
||||
<span class="text-[11px] text-secondary"> Watching </span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[10px] text-secondary/60">
|
||||
<kbd
|
||||
class="rounded border border-surface-5/40 bg-surface-3/60 px-1 py-px text-[10px]"
|
||||
>↑</kbd
|
||||
>
|
||||
<kbd
|
||||
class="rounded border border-surface-5/40 bg-surface-3/60 px-1 py-px text-[10px]"
|
||||
>↓</kbd
|
||||
>
|
||||
navigate
|
||||
</span>
|
||||
<span class="text-[10px] text-secondary/60">
|
||||
<kbd
|
||||
class="rounded border border-surface-5/40 bg-surface-3/60 px-1 py-px text-[10px]"
|
||||
>↵</kbd
|
||||
>
|
||||
copy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.i18n-debug-panel {
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.03),
|
||||
0 2px 4px rgba(0, 0, 0, 0.04),
|
||||
0 12px 24px rgba(0, 0, 0, 0.12),
|
||||
0 24px 48px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.i18n-debug-panel ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.i18n-debug-panel ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.i18n-debug-panel ::-webkit-scrollbar-thumb {
|
||||
background: var(--surface-5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.i18n-debug-panel ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* Animate the pulse indicator */
|
||||
@keyframes soft-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: soft-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
76
packages/ui/src/components/base/IconSelect.vue
Normal file
76
packages/ui/src/components/base/IconSelect.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { EditIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
import { Avatar, OverflowMenu } from '../index'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const icon = defineModel<string | undefined>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'select' | 'reset' | 'remove'): void
|
||||
}>()
|
||||
|
||||
type IconSelectOption = 'select' | 'replace' | 'reset' | 'remove'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
options?: IconSelectOption[]
|
||||
}>(),
|
||||
{
|
||||
options: () => ['select', 'replace', 'reset', 'remove'],
|
||||
},
|
||||
)
|
||||
|
||||
const messages = defineMessages({
|
||||
editIcon: {
|
||||
id: 'icon-select.edit',
|
||||
defaultMessage: 'Edit icon',
|
||||
},
|
||||
selectIcon: {
|
||||
id: 'icon-select.select',
|
||||
defaultMessage: 'Select icon',
|
||||
},
|
||||
replaceIcon: {
|
||||
id: 'icon-select.replace',
|
||||
defaultMessage: 'Replace icon',
|
||||
},
|
||||
removeIcon: {
|
||||
id: 'icon-select.remove',
|
||||
defaultMessage: 'Remove icon',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<OverflowMenu
|
||||
v-tooltip="formatMessage(messages.editIcon)"
|
||||
class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
|
||||
:options="[
|
||||
{
|
||||
id: 'select',
|
||||
action: () => emit('select'),
|
||||
},
|
||||
{
|
||||
id: 'remove',
|
||||
color: 'danger',
|
||||
action: () => emit('remove'),
|
||||
shown: !!icon,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Avatar :src="icon" size="108px" class="!border-4 group-hover:brightness-75" no-shadow />
|
||||
<div class="absolute right-0 top-0 m-2">
|
||||
<div
|
||||
class="hovering-icon-shadow m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
|
||||
>
|
||||
<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<template #select>
|
||||
<UploadIcon />
|
||||
{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
|
||||
</template>
|
||||
<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
|
||||
</OverflowMenu>
|
||||
</template>
|
||||
27
packages/ui/src/components/base/InstanceRowCard.vue
Normal file
27
packages/ui/src/components/base/InstanceRowCard.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
name: string
|
||||
version?: string | null
|
||||
loader?: string | null
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
select: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="flex w-full items-center gap-3 rounded-xl border border-surface-4 bg-surface-2 p-3 text-left transition-all duration-200 hover:cursor-pointer hover:border-brand hover:bg-brand-highlight active:scale-[0.98]"
|
||||
@click="$emit('select')"
|
||||
>
|
||||
<slot name="prepend" />
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<span class="truncate text-sm font-semibold text-contrast">{{ name }}</span>
|
||||
<span v-if="version || loader" class="truncate text-xs text-secondary">
|
||||
{{ version ?? '—' }}<template v-if="loader"> · {{ loader }}</template>
|
||||
</span>
|
||||
</div>
|
||||
<slot name="append" />
|
||||
</button>
|
||||
</template>
|
||||
103
packages/ui/src/components/base/IntlFormatted.vue
Normal file
103
packages/ui/src/components/base/IntlFormatted.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import IntlMessageFormat, { type FormatXMLElementFn, type PrimitiveType } from 'intl-messageformat'
|
||||
import { computed, markRaw, useSlots, type VNode } from 'vue'
|
||||
|
||||
import type { MessageDescriptor } from '../../composables/i18n'
|
||||
import { injectI18nDebug } from '../../composables/i18n-debug'
|
||||
import { injectI18n } from '../../providers/i18n'
|
||||
|
||||
const props = defineProps<{
|
||||
messageId: MessageDescriptor
|
||||
values?: Record<string, PrimitiveType>
|
||||
}>()
|
||||
|
||||
const slots = useSlots()
|
||||
const { t, locale } = injectI18n()
|
||||
const debugContext = injectI18nDebug()
|
||||
|
||||
const debugEnabled = computed(() => debugContext?.enabled.value ?? false)
|
||||
const debugKeyReveal = computed(() => debugContext?.keyReveal.value ?? false)
|
||||
|
||||
const formattedParts = computed(() => {
|
||||
const key = props.messageId.id
|
||||
const translation = t(key, {}) as string
|
||||
|
||||
let msg: string
|
||||
if (translation && translation !== key) {
|
||||
msg = translation
|
||||
} else {
|
||||
msg = props.messageId.defaultMessage ?? key
|
||||
}
|
||||
|
||||
if (debugEnabled.value) {
|
||||
debugContext!.registry.set(key, {
|
||||
key,
|
||||
value: msg,
|
||||
defaultMessage: props.messageId.defaultMessage,
|
||||
timestamp: Date.now(),
|
||||
})
|
||||
if (debugKeyReveal.value) {
|
||||
return [`\u300C${key}\u300D`]
|
||||
}
|
||||
}
|
||||
|
||||
const slotHandlers: Record<string, FormatXMLElementFn<VNode>> = {}
|
||||
const slotNames = Object.keys(slots)
|
||||
|
||||
for (const slotName of slotNames) {
|
||||
const normalizedName = slotName.startsWith('~') ? slotName.slice(1) : slotName
|
||||
slotHandlers[normalizedName] = (chunks) => {
|
||||
const slot = slots[slotName]
|
||||
if (slot) {
|
||||
return markRaw(
|
||||
slot({
|
||||
children: chunks,
|
||||
}),
|
||||
) as VNode[]
|
||||
}
|
||||
return markRaw(chunks) as VNode[]
|
||||
}
|
||||
|
||||
msg = msg.replace(
|
||||
new RegExp(`\\{${normalizedName}\\}`, 'g'),
|
||||
`<${normalizedName}></${normalizedName}>`,
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
const formatter = new IntlMessageFormat(msg, locale.value)
|
||||
const result = formatter.format({
|
||||
...props.values,
|
||||
...slotHandlers,
|
||||
})
|
||||
|
||||
// ensure result array items are marked as raw if they're VNodes
|
||||
// prevents VNodes from entering the reactive system and SSR payload
|
||||
if (Array.isArray(result)) {
|
||||
return result.map((part) =>
|
||||
typeof part === 'object' && part !== null ? markRaw(part) : part,
|
||||
)
|
||||
}
|
||||
return [typeof result === 'object' && result !== null ? markRaw(result) : result]
|
||||
} catch {
|
||||
return [msg]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
v-if="debugEnabled && !debugKeyReveal"
|
||||
:data-i18n-key="messageId.id"
|
||||
style="display: contents"
|
||||
>
|
||||
<template v-for="(part, index) in formattedParts" :key="index">
|
||||
<component :is="() => part" v-if="typeof part === 'object'" />
|
||||
<template v-else>{{ part }}</template>
|
||||
</template>
|
||||
</span>
|
||||
<template v-for="(part, index) in formattedParts" v-else :key="index">
|
||||
<component :is="() => part" v-if="typeof part === 'object'" />
|
||||
<template v-else>{{ part }}</template>
|
||||
</template>
|
||||
</template>
|
||||
141
packages/ui/src/components/base/JoinedButtons.vue
Normal file
141
packages/ui/src/components/base/JoinedButtons.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="joined-buttons flex items-center">
|
||||
<ButtonStyled :color="color" :size="size">
|
||||
<button
|
||||
v-tooltip="primaryTooltip"
|
||||
:class="{ 'opacity-60': primaryMuted }"
|
||||
:disabled="primaryDisabledResolved"
|
||||
@click="handlePrimaryAction"
|
||||
>
|
||||
<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
|
||||
{{ primaryAction.label }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="dropdownActions.length > 0" :color="color" :size="size">
|
||||
<OverflowMenu
|
||||
class="btn-dropdown-animation !w-10"
|
||||
:options="dropdownOptions"
|
||||
:disabled="dropdownDisabledResolved"
|
||||
:tooltip="dropdownTooltip"
|
||||
>
|
||||
<DropdownIcon />
|
||||
<template v-for="action in dropdownActions" :key="action.id" #[action.id]>
|
||||
<component :is="action.icon" v-if="action.icon" aria-hidden="true" />
|
||||
{{ action.label }}
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DropdownIcon } from '@modrinth/assets'
|
||||
import type { Component } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { ButtonStyled, OverflowMenu } from '../index'
|
||||
|
||||
// TODO: This should be moved to a shared types file.
|
||||
type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
|
||||
|
||||
export interface JoinedButtonAction {
|
||||
id: string
|
||||
label: string
|
||||
icon?: Component
|
||||
action: () => void
|
||||
color?: Colors
|
||||
hoverFilled?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
actions: JoinedButtonAction[]
|
||||
color?: Colors
|
||||
size?: 'standard' | 'large' | 'small'
|
||||
disabled?: boolean
|
||||
primaryDisabled?: boolean
|
||||
dropdownDisabled?: boolean
|
||||
primaryMuted?: boolean
|
||||
primaryTooltip?: string
|
||||
dropdownTooltip?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'standard',
|
||||
size: 'standard',
|
||||
disabled: false,
|
||||
primaryDisabled: undefined,
|
||||
dropdownDisabled: undefined,
|
||||
primaryMuted: false,
|
||||
primaryTooltip: undefined,
|
||||
dropdownTooltip: undefined,
|
||||
})
|
||||
|
||||
const primaryDisabledResolved = computed(() => props.primaryDisabled ?? props.disabled)
|
||||
const dropdownDisabledResolved = computed(() => props.dropdownDisabled ?? props.disabled)
|
||||
|
||||
const primaryAction = computed(() => props.actions[0])
|
||||
|
||||
const dropdownActions = computed(() => props.actions.slice(1))
|
||||
|
||||
const colorMap: Record<
|
||||
Colors,
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'purple'
|
||||
| 'highlight'
|
||||
| 'primary'
|
||||
| 'danger'
|
||||
| 'secondary'
|
||||
| undefined
|
||||
> = {
|
||||
standard: 'secondary',
|
||||
brand: 'primary',
|
||||
red: 'red',
|
||||
orange: 'orange',
|
||||
green: 'green',
|
||||
blue: 'blue',
|
||||
purple: 'purple',
|
||||
}
|
||||
|
||||
const dropdownOptions = computed(() =>
|
||||
dropdownActions.value.map((action) => ({
|
||||
id: action.id,
|
||||
color: action.color ? colorMap[action.color] : undefined,
|
||||
action: action.action,
|
||||
hoverFilled: action.hoverFilled ?? true,
|
||||
})),
|
||||
)
|
||||
|
||||
function handlePrimaryAction() {
|
||||
if (primaryAction.value && !primaryDisabledResolved.value) {
|
||||
primaryAction.value.action()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.joined-buttons > :deep(.btn) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.joined-buttons > :deep(.btn:first-child) {
|
||||
border-top-left-radius: var(--radius-md);
|
||||
border-bottom-left-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.joined-buttons > :deep(.btn:last-child) {
|
||||
border-top-right-radius: var(--radius-md);
|
||||
border-bottom-right-radius: var(--radius-md);
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.joined-buttons > :deep(.btn:not(:last-child)) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.btn-dropdown-animation {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
</style>
|
||||
41
packages/ui/src/components/base/LargeRadioButton.vue
Normal file
41
packages/ui/src/components/base/LargeRadioButton.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<button
|
||||
role="radio"
|
||||
:aria-checked="selected"
|
||||
:aria-disabled="disabled"
|
||||
class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer rounded-xl"
|
||||
:class="
|
||||
(selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent') +
|
||||
(disabled
|
||||
? ' opacity-50'
|
||||
: ' active:scale-[0.98] hover:bg-button-bg hover:brightness-[--hover-brightness]')
|
||||
"
|
||||
:disabled="disabled"
|
||||
@click="emit('select')"
|
||||
>
|
||||
<RadioButtonCheckedIcon
|
||||
v-if="selected"
|
||||
class="text-brand h-5 w-5 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<RadioButtonIcon v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
<script setup lang="ts" generic="T">
|
||||
import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select'): void
|
||||
}>()
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
selected: boolean
|
||||
disabled?: boolean
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
148
packages/ui/src/components/base/LoadingBar.vue
Normal file
148
packages/ui/src/components/base/LoadingBar.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
import { injectLoadingState } from '#ui/providers/loading-state'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** Bar height in pixels. */
|
||||
height?: number
|
||||
/** Background gradient. Defaults to the brand green. */
|
||||
color?: string
|
||||
/** Total bar fill duration in ms (visual progress easing). */
|
||||
duration?: number
|
||||
/** Delay in ms before the bar becomes visible after a load begins. */
|
||||
throttle?: number
|
||||
/** CSS position. Use `absolute` when wrapping in a custom positioned container (e.g. desktop top-bar offset). */
|
||||
position?: 'fixed' | 'absolute'
|
||||
/** Top offset CSS value. */
|
||||
offsetTop?: string
|
||||
/** Left offset CSS value. */
|
||||
offsetLeft?: string
|
||||
/** Right offset CSS value. */
|
||||
offsetRight?: string
|
||||
}>(),
|
||||
{
|
||||
height: 2,
|
||||
color: 'var(--loading-bar-gradient)',
|
||||
duration: 1000,
|
||||
throttle: 0,
|
||||
position: 'fixed',
|
||||
offsetTop: '0',
|
||||
offsetLeft: '0',
|
||||
offsetRight: '0',
|
||||
},
|
||||
)
|
||||
|
||||
const loadingState = injectLoadingState(null)
|
||||
|
||||
const progress = ref(0)
|
||||
const isVisible = ref(false)
|
||||
const step = computed(() => 10000 / props.duration)
|
||||
|
||||
let _timer: ReturnType<typeof setInterval> | null = null
|
||||
let _throttle: ReturnType<typeof setTimeout> | null = null
|
||||
let _hideTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
let _resetTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function clearTimers() {
|
||||
if (_timer) clearInterval(_timer)
|
||||
if (_throttle) clearTimeout(_throttle)
|
||||
if (_hideTimeout) clearTimeout(_hideTimeout)
|
||||
if (_resetTimeout) clearTimeout(_resetTimeout)
|
||||
_timer = null
|
||||
_throttle = null
|
||||
_hideTimeout = null
|
||||
_resetTimeout = null
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
if (typeof window === 'undefined') return
|
||||
_timer = setInterval(() => {
|
||||
progress.value = Math.min(100, progress.value + step.value)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function start() {
|
||||
clearTimers()
|
||||
progress.value = 0
|
||||
if (props.throttle && typeof window !== 'undefined') {
|
||||
_throttle = setTimeout(() => {
|
||||
isVisible.value = true
|
||||
startTimer()
|
||||
}, props.throttle)
|
||||
} else {
|
||||
isVisible.value = true
|
||||
startTimer()
|
||||
}
|
||||
}
|
||||
|
||||
function finish() {
|
||||
progress.value = 100
|
||||
clearTimers()
|
||||
if (typeof window === 'undefined') {
|
||||
isVisible.value = false
|
||||
progress.value = 0
|
||||
return
|
||||
}
|
||||
_hideTimeout = setTimeout(() => {
|
||||
isVisible.value = false
|
||||
_resetTimeout = setTimeout(() => {
|
||||
progress.value = 0
|
||||
}, 400)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
if (loadingState) {
|
||||
watch(
|
||||
() => loadingState.pending.value && loadingState.barEnabled.value,
|
||||
(active) => {
|
||||
if (active) start()
|
||||
else finish()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
}
|
||||
|
||||
onBeforeUnmount(clearTimers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="modrinth-loading-bar"
|
||||
:style="{
|
||||
position: props.position,
|
||||
top: props.offsetTop,
|
||||
right: props.offsetRight,
|
||||
left: props.offsetLeft,
|
||||
pointerEvents: 'none',
|
||||
width: `${progress}%`,
|
||||
height: `${isVisible ? props.height : 0}px`,
|
||||
borderRadius: `${props.height}px`,
|
||||
background: props.color,
|
||||
backgroundSize: `${(100 / Math.max(progress, 0.01)) * 100}% auto`,
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transition: 'width 0.1s ease-in-out, height 0.1s ease-out, opacity 0.4s',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modrinth-loading-bar {
|
||||
z-index: 999999;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
packages/ui/src/components/base/LoadingIndicator.vue
Normal file
130
packages/ui/src/components/base/LoadingIndicator.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="w-full flex items-center justify-center flex-col gap-2">
|
||||
<div class="title">{{ formatMessage(messages.loadingLabel) }}</div>
|
||||
<div class="placeholder"></div>
|
||||
<div class="placeholder"></div>
|
||||
<div class="placeholder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineMessages, useVIntl } from '#ui/composables/i18n'
|
||||
|
||||
const messages = defineMessages({
|
||||
loadingLabel: {
|
||||
id: 'omorphia.component.loading-indicator.label',
|
||||
defaultMessage: 'Loading',
|
||||
},
|
||||
})
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
</script>
|
||||
<style scoped>
|
||||
.title {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-weight: bold;
|
||||
color: var(--color-contrast);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
animation: dots 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dots {
|
||||
0%,
|
||||
24.99% {
|
||||
content: '';
|
||||
}
|
||||
|
||||
25%,
|
||||
49.99% {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
50%,
|
||||
74.99% {
|
||||
content: '..';
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
content: '...';
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
opacity: 0.25;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-raised-bg);
|
||||
animation: pop 4s ease-in-out infinite;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
transparent 30%,
|
||||
rgba(196, 217, 237, 0.075) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
animation: shimmer 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2)::before {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(3)::before {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(4)::before {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop {
|
||||
from {
|
||||
opacity: 0.25;
|
||||
border-color: transparent;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
border-color: var(--color-button-bg);
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
50%,
|
||||
to {
|
||||
transform: translateX(80%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
packages/ui/src/components/base/ManySelect.vue
Normal file
149
packages/ui/src/components/base/ManySelect.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<ButtonStyled>
|
||||
<PopoutMenu
|
||||
v-if="options.length > 1 || showAlways"
|
||||
v-bind="$attrs"
|
||||
:disabled="disabled"
|
||||
:position="position"
|
||||
:direction="direction"
|
||||
:dropdown-id="dropdownId"
|
||||
:dropdown-class="dropdownClass"
|
||||
:tooltip="tooltip"
|
||||
@open="
|
||||
() => {
|
||||
searchQuery = ''
|
||||
}
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
<DropdownIcon class="h-5 w-5 text-secondary" />
|
||||
<template #menu>
|
||||
<StyledInput
|
||||
v-if="search"
|
||||
id="search-input"
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
:icon="SearchIcon"
|
||||
placeholder="Search..."
|
||||
type="text"
|
||||
wrapper-class="mb-2 w-full"
|
||||
@keydown.enter="
|
||||
() => {
|
||||
toggleOption(filteredOptions[0])
|
||||
}
|
||||
"
|
||||
/>
|
||||
<ScrollablePanel v-if="search">
|
||||
<Button
|
||||
v-for="(option, index) in filteredOptions"
|
||||
:key="`option-${index}`"
|
||||
:transparent="!manyValues.includes(option)"
|
||||
:action="() => toggleOption(option)"
|
||||
class="!w-full"
|
||||
:color="manyValues.includes(option) ? 'secondary' : 'default'"
|
||||
>
|
||||
<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
|
||||
<CheckIcon
|
||||
class="h-5 w-5 text-contrast ml-auto transition-opacity"
|
||||
:class="{ 'opacity-0': !manyValues.includes(option) }"
|
||||
/>
|
||||
</Button>
|
||||
</ScrollablePanel>
|
||||
<div v-else class="flex flex-col gap-1">
|
||||
<Button
|
||||
v-for="(option, index) in filteredOptions"
|
||||
:key="`option-${index}`"
|
||||
:transparent="!manyValues.includes(option)"
|
||||
:action="() => toggleOption(option)"
|
||||
class="!w-full"
|
||||
:color="manyValues.includes(option) ? 'secondary' : 'default'"
|
||||
>
|
||||
<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
|
||||
<CheckIcon
|
||||
class="h-5 w-5 text-contrast ml-auto transition-opacity"
|
||||
:class="{ 'opacity-0': !manyValues.includes(option) }"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { Button, ButtonStyled, PopoutMenu, StyledInput } from '../index'
|
||||
import ScrollablePanel from './ScrollablePanel.vue'
|
||||
|
||||
type Option = string | number | object
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: Option[]
|
||||
options: Option[]
|
||||
disabled?: boolean
|
||||
position?: string
|
||||
direction?: string
|
||||
displayName?: (option: Option) => string
|
||||
search?: boolean
|
||||
dropdownId?: string
|
||||
dropdownClass?: string
|
||||
showAlways?: boolean
|
||||
tooltip?: string
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
position: 'auto',
|
||||
direction: 'auto',
|
||||
displayName: undefined,
|
||||
search: false,
|
||||
dropdownId: '',
|
||||
dropdownClass: '',
|
||||
showAlways: false,
|
||||
tooltip: '',
|
||||
},
|
||||
)
|
||||
|
||||
function getOptionLabel(option: Option): string {
|
||||
return props.displayName?.(option) ?? (option as string)
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const selectedValues = ref(props.modelValue || [])
|
||||
const searchInput = ref()
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const manyValues = computed({
|
||||
get() {
|
||||
return props.modelValue || selectedValues.value
|
||||
},
|
||||
set(newValue) {
|
||||
emit('update:modelValue', newValue)
|
||||
emit('change', newValue)
|
||||
selectedValues.value = newValue
|
||||
},
|
||||
})
|
||||
|
||||
const filteredOptions = computed(() => {
|
||||
return props.options.filter(
|
||||
(x) =>
|
||||
!searchQuery.value ||
|
||||
getOptionLabel(x).toLowerCase().includes(searchQuery.value.toLowerCase()),
|
||||
)
|
||||
})
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
function toggleOption(id: Option) {
|
||||
if (manyValues.value.includes(id)) {
|
||||
manyValues.value = manyValues.value.filter((x) => x !== id)
|
||||
} else {
|
||||
manyValues.value = [...manyValues.value, id]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
1217
packages/ui/src/components/base/MarkdownEditor.vue
Normal file
1217
packages/ui/src/components/base/MarkdownEditor.vue
Normal file
File diff suppressed because it is too large
Load Diff
15
packages/ui/src/components/base/MinecraftFormattedText.vue
Normal file
15
packages/ui/src/components/base/MinecraftFormattedText.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { autoToHTML } from '@sfirew/minecraft-motd-parser'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
text: string
|
||||
}>()
|
||||
|
||||
const renderedText = computed(() => autoToHTML(props.text))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span v-html="renderedText" />
|
||||
</template>
|
||||
1584
packages/ui/src/components/base/MultiSelect.vue
Normal file
1584
packages/ui/src/components/base/MultiSelect.vue
Normal file
File diff suppressed because it is too large
Load Diff
458
packages/ui/src/components/base/MultiStageModal.vue
Normal file
458
packages/ui/src/components/base/MultiStageModal.vue
Normal file
@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<NewModal
|
||||
ref="modal"
|
||||
:scrollable="true"
|
||||
max-content-height="72vh"
|
||||
:on-hide="onModalHide"
|
||||
:closable="true"
|
||||
:close-on-click-outside="closeOnClickOutside"
|
||||
:width="resolvedMaxWidth"
|
||||
:fade="fade"
|
||||
:disable-close="resolveCtxFn(currentStage.disableClose, context)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex w-full min-w-0 items-center gap-3">
|
||||
<ButtonStyled
|
||||
v-if="backButtonVisible"
|
||||
class="shrink-0"
|
||||
type="outlined"
|
||||
circular
|
||||
size="small"
|
||||
>
|
||||
<button v-tooltip="backButtonLabel" :aria-label="backButtonLabel" @click="prevStage()">
|
||||
<ChevronLeftIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<div
|
||||
v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
|
||||
class="relative min-w-0 flex-1"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-bg-raised to-transparent z-10 transition-opacity duration-200"
|
||||
:class="showLeftShadow ? 'opacity-100' : 'opacity-0'"
|
||||
/>
|
||||
<div
|
||||
ref="breadcrumbScroller"
|
||||
class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide pr-6"
|
||||
@wheel.prevent="onBreadcrumbWheel"
|
||||
@scroll="updateScrollShadows"
|
||||
>
|
||||
<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
|
||||
<div
|
||||
:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
|
||||
class="flex w-max items-center"
|
||||
>
|
||||
<button
|
||||
class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max py-3 px-1"
|
||||
:class="{
|
||||
'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
|
||||
'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
|
||||
'opacity-50 cursor-not-allowed': cannotNavigateToStage(index),
|
||||
}"
|
||||
:disabled="cannotNavigateToStage(index)"
|
||||
@click="setStage(stage.id)"
|
||||
>
|
||||
{{ resolveCtxFn(stage.title, context) }}
|
||||
</button>
|
||||
<ChevronRightIcon
|
||||
v-if="index < breadcrumbStages.length - 1"
|
||||
class="h-5 w-5 text-secondary"
|
||||
stroke-width="3"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-bg-raised to-transparent z-10 transition-opacity duration-200"
|
||||
:class="showRightShadow ? 'opacity-100' : 'opacity-0'"
|
||||
/>
|
||||
</div>
|
||||
<span v-else class="min-w-0 flex-1 text-lg font-bold text-contrast sm:text-xl">{{
|
||||
resolvedTitle
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<progress
|
||||
v-if="nonProgressStage !== true && !disableProgress"
|
||||
:value="progressValue"
|
||||
max="100"
|
||||
class="w-full h-1 appearance-none border-none absolute top-0 left-0"
|
||||
></progress>
|
||||
|
||||
<component :is="currentStage?.stageContent" />
|
||||
|
||||
<template #actions>
|
||||
<div
|
||||
class="flex flex-col justify-end gap-2 sm:flex-row"
|
||||
:class="leftButtonConfig || rightButtonConfig || cancelButton ? 'mt-4' : ''"
|
||||
>
|
||||
<ButtonStyled v-if="leftButtonConfig" type="outlined">
|
||||
<button
|
||||
v-tooltip="leftButtonConfig.tooltip"
|
||||
:class="leftButtonConfig.buttonClass"
|
||||
:disabled="leftButtonConfig.disabled"
|
||||
@click="leftButtonConfig.onClick"
|
||||
>
|
||||
<component :is="leftButtonConfig.icon" />
|
||||
{{ leftButtonConfig.label }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="cancelButton" type="outlined">
|
||||
<button :disabled="cancelButton.disabled" @click="cancelButton.onClick">
|
||||
{{ cancelButton.label }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="rightButtonConfig" :color="rightButtonConfig.color">
|
||||
<button
|
||||
v-tooltip="rightButtonConfig.tooltip"
|
||||
:data-onboarding-id="rightButtonConfig.onboardingId"
|
||||
class="!shadow-none"
|
||||
:class="rightButtonConfig.buttonClass"
|
||||
:disabled="rightButtonConfig.disabled || rightButtonConfig.loading"
|
||||
@click="rightButtonConfig.onClick"
|
||||
>
|
||||
<SpinnerIcon
|
||||
v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'before'"
|
||||
class="animate-spin"
|
||||
/>
|
||||
<component
|
||||
:is="rightButtonConfig.icon"
|
||||
v-else-if="rightButtonConfig.iconPosition === 'before'"
|
||||
:class="rightButtonConfig.iconClass"
|
||||
/>
|
||||
{{ rightButtonConfig.label }}
|
||||
<SpinnerIcon
|
||||
v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'after'"
|
||||
class="animate-spin"
|
||||
/>
|
||||
<component
|
||||
:is="rightButtonConfig.icon"
|
||||
v-else-if="rightButtonConfig.iconPosition === 'after'"
|
||||
:class="rightButtonConfig.iconClass"
|
||||
/>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
</NewModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ChevronLeftIcon, ChevronRightIcon, SpinnerIcon } from '@modrinth/assets'
|
||||
import { ButtonStyled, commonMessages, NewModal, useVIntl } from '@modrinth/ui'
|
||||
import type { Component } from 'vue'
|
||||
import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
|
||||
|
||||
export interface StageButtonConfig {
|
||||
label?: string
|
||||
icon?: Component | null
|
||||
iconPosition?: 'before' | 'after'
|
||||
color?: InstanceType<typeof ButtonStyled>['$props']['color']
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
tooltip?: string
|
||||
iconClass?: string | null
|
||||
buttonClass?: string | null
|
||||
onboardingId?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export type MaybeCtxFn<T, R> = R | ((ctx: T) => R)
|
||||
|
||||
export interface StageConfigInput<T> {
|
||||
id: string
|
||||
stageContent: Component
|
||||
title: MaybeCtxFn<T, string>
|
||||
skip?: MaybeCtxFn<T, boolean>
|
||||
hideStageInBreadcrumb?: MaybeCtxFn<T, boolean>
|
||||
// Determines whether this stage shows the progress bar
|
||||
nonProgressStage?: MaybeCtxFn<T, boolean>
|
||||
cannotNavigateForward?: MaybeCtxFn<T, boolean>
|
||||
disableClose?: MaybeCtxFn<T, boolean>
|
||||
leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
|
||||
rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
|
||||
/** Max width for the modal content and header defined in px (e.g., '460px', '600px'). Defaults to '460px'. */
|
||||
maxWidth?: MaybeCtxFn<T, string>
|
||||
}
|
||||
|
||||
export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
|
||||
return typeof value === 'function' ? (value as (ctx: T) => R)(ctx) : value
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
stages: StageConfigInput<T>[]
|
||||
context: T
|
||||
breadcrumbs?: boolean
|
||||
fitContent?: boolean
|
||||
fade?: 'standard' | 'warning' | 'danger'
|
||||
disableProgress?: boolean
|
||||
closeOnClickOutside?: boolean
|
||||
/** Whether to show a back (previous stage) button at the left of the title. */
|
||||
backButtonEnabled?: MaybeCtxFn<T, boolean>
|
||||
/** Renders an extra outlined button at the bottom right, before the primary action. */
|
||||
cancelButton?: {
|
||||
label: string
|
||||
disabled?: boolean
|
||||
onClick: () => void
|
||||
} | null
|
||||
}>(),
|
||||
{
|
||||
closeOnClickOutside: false,
|
||||
backButtonEnabled: (() => false) as () => boolean,
|
||||
cancelButton: null,
|
||||
},
|
||||
)
|
||||
|
||||
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
|
||||
const currentStageIndex = ref<number>(0)
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const backButtonLabel = computed(() => formatMessage(commonMessages.backButton))
|
||||
const backButtonVisible = computed(
|
||||
() =>
|
||||
currentStageIndex.value > 0 && resolveCtxFn(props.backButtonEnabled ?? false, props.context),
|
||||
)
|
||||
|
||||
function show() {
|
||||
modal.value?.show()
|
||||
}
|
||||
|
||||
function hide() {
|
||||
modal.value?.hide()
|
||||
}
|
||||
|
||||
const setStage = (indexOrId: number | string) => {
|
||||
let index: number = 0
|
||||
if (typeof indexOrId === 'number') {
|
||||
index = indexOrId
|
||||
if (index < 0 || index >= props.stages.length) return
|
||||
} else {
|
||||
index = props.stages.findIndex((stage) => stage.id === indexOrId)
|
||||
if (index === -1) return
|
||||
}
|
||||
while (index < props.stages.length) {
|
||||
const skip = props.stages[index]?.skip
|
||||
if (!skip || !resolveCtxFn(skip, props.context)) break
|
||||
index++
|
||||
}
|
||||
if (index < props.stages.length) {
|
||||
currentStageIndex.value = index
|
||||
}
|
||||
}
|
||||
|
||||
const nextStage = () => {
|
||||
if (currentStageIndex.value === -1) return
|
||||
if (currentStageIndex.value >= props.stages.length - 1) return
|
||||
let nextIndex = currentStageIndex.value + 1
|
||||
while (nextIndex < props.stages.length) {
|
||||
const skip = props.stages[nextIndex]?.skip
|
||||
if (!skip || !resolveCtxFn(skip, props.context)) break
|
||||
nextIndex++
|
||||
}
|
||||
if (nextIndex < props.stages.length) {
|
||||
currentStageIndex.value = nextIndex
|
||||
}
|
||||
}
|
||||
|
||||
const prevStage = () => {
|
||||
if (currentStageIndex.value <= 0) return
|
||||
let prevIndex = currentStageIndex.value - 1
|
||||
while (prevIndex >= 0) {
|
||||
const skip = props.stages[prevIndex]?.skip
|
||||
if (!skip || !resolveCtxFn(skip, props.context)) break
|
||||
prevIndex--
|
||||
}
|
||||
if (prevIndex >= 0) {
|
||||
currentStageIndex.value = prevIndex
|
||||
}
|
||||
}
|
||||
|
||||
const currentStage = computed(() => props.stages[currentStageIndex.value])
|
||||
|
||||
const resolvedTitle = computed(() => {
|
||||
const stage = currentStage.value
|
||||
if (!stage) return ''
|
||||
return resolveCtxFn(stage.title, props.context)
|
||||
})
|
||||
|
||||
const leftButtonConfig = computed(() => {
|
||||
const stage = currentStage.value
|
||||
if (!stage) return null
|
||||
return resolveCtxFn(stage.leftButtonConfig, props.context)
|
||||
})
|
||||
|
||||
const rightButtonConfig = computed(() => {
|
||||
const stage = currentStage.value
|
||||
if (!stage) return null
|
||||
return resolveCtxFn(stage.rightButtonConfig, props.context)
|
||||
})
|
||||
|
||||
const nonProgressStage = computed(() => {
|
||||
const stage = currentStage.value
|
||||
if (!stage) return false
|
||||
return resolveCtxFn(stage.nonProgressStage, props.context)
|
||||
})
|
||||
|
||||
const resolvedMaxWidth = computed(() => {
|
||||
const stage = currentStage.value
|
||||
if (!stage?.maxWidth) return '560px'
|
||||
return resolveCtxFn(stage.maxWidth, props.context)
|
||||
})
|
||||
|
||||
const progressValue = computed(() => {
|
||||
const isProgressStage = (stage: StageConfigInput<T>) => {
|
||||
if (resolveCtxFn(stage.nonProgressStage, props.context)) return false
|
||||
const skip = stage.skip ? resolveCtxFn(stage.skip, props.context) : false
|
||||
return !skip
|
||||
}
|
||||
|
||||
const completedCount = props.stages
|
||||
.slice(0, currentStageIndex.value + 1)
|
||||
.filter(isProgressStage).length
|
||||
const totalCount = props.stages.filter(isProgressStage).length
|
||||
|
||||
return totalCount > 0 ? (completedCount / totalCount) * 100 : 0
|
||||
})
|
||||
|
||||
const breadcrumbScroller = ref<HTMLElement | null>(null)
|
||||
const breadcrumbRefs = ref<Map<string, HTMLElement>>(new Map())
|
||||
const showLeftShadow = ref(false)
|
||||
const showRightShadow = ref(false)
|
||||
|
||||
function setBreadcrumbRef(stageId: string, el: HTMLElement | null) {
|
||||
if (el) breadcrumbRefs.value.set(stageId, el)
|
||||
else breadcrumbRefs.value.delete(stageId)
|
||||
}
|
||||
|
||||
function scrollToCurrentBreadcrumb() {
|
||||
const stage = currentStage.value
|
||||
if (!stage || !breadcrumbScroller.value) return
|
||||
|
||||
const el = breadcrumbRefs.value.get(stage.id)
|
||||
if (!el) return
|
||||
|
||||
nextTick(() => {
|
||||
breadcrumbScroller.value?.scrollTo({
|
||||
left: el.offsetLeft - 50,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function updateScrollShadows() {
|
||||
const el = breadcrumbScroller.value
|
||||
if (!el) {
|
||||
showLeftShadow.value = false
|
||||
showRightShadow.value = false
|
||||
return
|
||||
}
|
||||
|
||||
showLeftShadow.value = el.scrollLeft > 0
|
||||
showRightShadow.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
|
||||
}
|
||||
|
||||
function onBreadcrumbWheel(e: WheelEvent) {
|
||||
if (!breadcrumbScroller.value) return
|
||||
|
||||
const el = breadcrumbScroller.value
|
||||
const canScrollHorizontally = el.scrollWidth > el.clientWidth
|
||||
|
||||
if (canScrollHorizontally) {
|
||||
// Support both horizontal and vertical scroll input
|
||||
const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
|
||||
el.scrollLeft += delta
|
||||
}
|
||||
}
|
||||
|
||||
// Stages that are not skipped (visible in breadcrumbs)
|
||||
const breadcrumbStages = computed(() => {
|
||||
return props.stages.filter((stage) => {
|
||||
const visibleStep =
|
||||
!resolveCtxFn(stage.skip, props.context) &&
|
||||
!resolveCtxFn(stage.nonProgressStage, props.context) &&
|
||||
!resolveCtxFn(stage.hideStageInBreadcrumb, props.context)
|
||||
return visibleStep
|
||||
})
|
||||
})
|
||||
|
||||
// Check if navigation to a breadcrumb stage is allowed
|
||||
// Navigation backwards is always allowed, but forward navigation requires all intermediate stages to allow it
|
||||
function cannotNavigateToStage(breadcrumbIndex: number): boolean {
|
||||
const targetStage = breadcrumbStages.value[breadcrumbIndex]
|
||||
if (!targetStage) return false
|
||||
|
||||
const targetStageIndex = props.stages.findIndex((s) => s.id === targetStage.id)
|
||||
if (targetStageIndex === -1) return false
|
||||
|
||||
// Always allow navigating to current or previous stages
|
||||
if (targetStageIndex <= currentStageIndex.value) return false
|
||||
|
||||
// For forward navigation, check all stages between current and target
|
||||
for (let i = currentStageIndex.value; i < targetStageIndex; i++) {
|
||||
const stage = props.stages[i]
|
||||
if (stage.skip && resolveCtxFn(stage.skip, props.context)) continue
|
||||
if (resolveCtxFn(stage.cannotNavigateForward, props.context)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
watch([breadcrumbStages, currentStageIndex], () => nextTick(() => updateScrollShadows()), {
|
||||
immediate: true,
|
||||
})
|
||||
|
||||
watch(currentStageIndex, () => {
|
||||
scrollToCurrentBreadcrumb()
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'refresh-data' | 'hide'): void
|
||||
}>()
|
||||
|
||||
function onModalHide() {
|
||||
emit('hide')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
setStage,
|
||||
nextStage,
|
||||
prevStage,
|
||||
currentStageIndex,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
progress {
|
||||
@apply bg-surface-3;
|
||||
background-color: var(--surface-3, rgb(30, 30, 30));
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@apply bg-surface-3;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
@apply bg-contrast;
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
@apply bg-contrast;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
393
packages/ui/src/components/base/NavTabs.vue
Normal file
393
packages/ui/src/components/base/NavTabs.vue
Normal file
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<nav
|
||||
v-if="filteredLinks.length > 1"
|
||||
ref="scrollContainer"
|
||||
class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
:class="{ 'drop-shadow-xl border border-solid border-surface-4': mode === 'navigation' }"
|
||||
>
|
||||
<template v-if="mode === 'navigation'">
|
||||
<RouterLink
|
||||
v-for="(link, index) in filteredLinks"
|
||||
v-show="link.shown ?? true"
|
||||
:key="link.href"
|
||||
ref="tabLinkElements"
|
||||
:replace="replace"
|
||||
:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
|
||||
:data-onboarding-id="link.onboardingId"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
|
||||
:class="getSSRFallbackClasses(index)"
|
||||
@click="saveSliderSnapshot(true)"
|
||||
@mouseenter="link.onHover?.()"
|
||||
@focus="link.onHover?.()"
|
||||
>
|
||||
<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
|
||||
<span class="text-nowrap" :class="getLabelClasses(index)">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(link, index) in filteredLinks"
|
||||
v-show="link.shown ?? true"
|
||||
:key="link.href"
|
||||
ref="tabLinkElements"
|
||||
type="button"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 border-0 bg-transparent px-4 py-2 text-inherit hover:cursor-pointer focus:rounded-full"
|
||||
:class="getSSRFallbackClasses(index)"
|
||||
@click="emit('tabClick', index, link)"
|
||||
>
|
||||
<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
|
||||
<span class="text-nowrap" :class="getLabelClasses(index)">
|
||||
{{ link.label }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Animated slider background -->
|
||||
<div
|
||||
v-if="sliderReady && currentActiveIndex !== -1"
|
||||
class="pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1"
|
||||
:class="[
|
||||
subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
|
||||
{ 'navtabs-transition': transitionsEnabled },
|
||||
]"
|
||||
:style="sliderStyle"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
interface Tab {
|
||||
label: string
|
||||
href: string
|
||||
shown?: boolean
|
||||
icon?: Component
|
||||
subpages?: string[]
|
||||
onHover?: () => void
|
||||
onboardingId?: string
|
||||
}
|
||||
|
||||
interface SliderSnapshot {
|
||||
left: number
|
||||
top: number
|
||||
right: number
|
||||
bottom: number
|
||||
savedAt: number
|
||||
preserveOnUnmount: boolean
|
||||
}
|
||||
|
||||
const sliderSnapshotMaxAge = 1000
|
||||
const navigationSliderSnapshots = new Map<string, SliderSnapshot>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
replace?: boolean
|
||||
links: Tab[]
|
||||
query?: string
|
||||
mode?: 'navigation' | 'local'
|
||||
activeIndex?: number
|
||||
}>(),
|
||||
{
|
||||
mode: 'navigation',
|
||||
query: undefined,
|
||||
activeIndex: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
tabClick: [index: number, tab: Tab]
|
||||
}>()
|
||||
|
||||
// DOM refs
|
||||
const scrollContainer = ref<HTMLElement | null>(null)
|
||||
const tabLinkElements = ref<HTMLElement[]>()
|
||||
|
||||
// Slider pos state
|
||||
const sliderLeft = ref(4)
|
||||
const sliderTop = ref(4)
|
||||
const sliderRight = ref(4)
|
||||
const sliderBottom = ref(4)
|
||||
|
||||
// active tab state
|
||||
const currentActiveIndex = ref(-1)
|
||||
const subpageSelected = ref(false)
|
||||
|
||||
// SSR state
|
||||
const sliderReady = ref(false)
|
||||
const transitionsEnabled = ref(false)
|
||||
|
||||
// Stagger delays for the trailing edges of the slider animation
|
||||
const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
|
||||
|
||||
const filteredLinks = computed(() => props.links.filter((link) => link.shown ?? true))
|
||||
const navigationGroupKey = computed(() =>
|
||||
props.mode === 'navigation'
|
||||
? filteredLinks.value.map((link) => link.href.split('?')[0]).join('|')
|
||||
: null,
|
||||
)
|
||||
|
||||
const sliderStyle = computed(() => ({
|
||||
left: `${sliderLeft.value}px`,
|
||||
top: `${sliderTop.value}px`,
|
||||
right: `${sliderRight.value}px`,
|
||||
bottom: `${sliderBottom.value}px`,
|
||||
opacity: sliderReady.value && currentActiveIndex.value !== -1 ? 1 : 0,
|
||||
}))
|
||||
|
||||
const leftDelay = computed(() => sliderDelays.value.left)
|
||||
const rightDelay = computed(() => sliderDelays.value.right)
|
||||
const topDelay = computed(() => sliderDelays.value.top)
|
||||
const bottomDelay = computed(() => sliderDelays.value.bottom)
|
||||
|
||||
const isActiveAndNotSubpage = computed(
|
||||
() => (index: number) => currentActiveIndex.value === index && !subpageSelected.value,
|
||||
)
|
||||
|
||||
function getSSRFallbackClasses(index: number) {
|
||||
if (sliderReady.value) return {}
|
||||
if (currentActiveIndex.value !== index) return {}
|
||||
|
||||
return {
|
||||
'rounded-full': true,
|
||||
'bg-button-bgSelected': !subpageSelected.value,
|
||||
'bg-button-bg': subpageSelected.value,
|
||||
}
|
||||
}
|
||||
|
||||
function getIconClasses(index: number) {
|
||||
return {
|
||||
'text-button-textSelected': isActiveAndNotSubpage.value(index),
|
||||
'text-secondary': !isActiveAndNotSubpage.value(index),
|
||||
}
|
||||
}
|
||||
|
||||
function getLabelClasses(index: number) {
|
||||
return {
|
||||
'text-button-textSelected': isActiveAndNotSubpage.value(index),
|
||||
'text-contrast': !isActiveAndNotSubpage.value(index),
|
||||
}
|
||||
}
|
||||
|
||||
function computeActiveIndex(): { index: number; isSubpage: boolean } {
|
||||
if (props.mode === 'local' && props.activeIndex !== undefined) {
|
||||
return {
|
||||
index: Math.min(props.activeIndex, filteredLinks.value.length - 1),
|
||||
isSubpage: false,
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
|
||||
const link = filteredLinks.value[i]
|
||||
const decodedPath = decodeURIComponent(route.path)
|
||||
const decodedHref = decodeURIComponent(link.href.split('?')[0])
|
||||
|
||||
if (props.query) {
|
||||
const queryValue = route.query[props.query]
|
||||
if (queryValue === link.href || (!queryValue && !link.href)) {
|
||||
return { index: i, isSubpage: false }
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
if (decodedPath === decodedHref) {
|
||||
return { index: i, isSubpage: false }
|
||||
}
|
||||
|
||||
const isSubpageMatch =
|
||||
(decodedPath.startsWith(decodedHref) &&
|
||||
(decodedPath.length === decodedHref.length || decodedPath[decodedHref.length] === '/')) ||
|
||||
link.subpages?.some((subpage) => decodedPath.includes(subpage))
|
||||
|
||||
if (isSubpageMatch) {
|
||||
return { index: i, isSubpage: true }
|
||||
}
|
||||
}
|
||||
|
||||
return { index: -1, isSubpage: false }
|
||||
}
|
||||
|
||||
function getTabElement(index: number): HTMLElement | null {
|
||||
if (index === -1) return null
|
||||
|
||||
const container = scrollContainer.value as HTMLElement | undefined
|
||||
if (!container) return null
|
||||
|
||||
const tabs = container.querySelectorAll('.button-animation')
|
||||
const element = tabs[index] as HTMLElement | undefined
|
||||
|
||||
if (!element) return null
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
function positionSlider() {
|
||||
const el = getTabElement(currentActiveIndex.value)
|
||||
if (!el?.offsetParent) return
|
||||
|
||||
const parent = el.offsetParent as HTMLElement
|
||||
const newPosition = {
|
||||
left: el.offsetLeft,
|
||||
top: el.offsetTop,
|
||||
right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
|
||||
bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
|
||||
}
|
||||
|
||||
const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
|
||||
|
||||
if (!sliderReady.value || isInitialPosition) {
|
||||
sliderLeft.value = newPosition.left
|
||||
sliderRight.value = newPosition.right
|
||||
sliderTop.value = newPosition.top
|
||||
sliderBottom.value = newPosition.bottom
|
||||
|
||||
sliderReady.value = true
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
transitionsEnabled.value = true
|
||||
})
|
||||
} else {
|
||||
animateSliderTo(newPosition)
|
||||
}
|
||||
}
|
||||
|
||||
function animateSliderTo(newPosition: {
|
||||
left: number
|
||||
top: number
|
||||
right: number
|
||||
bottom: number
|
||||
}) {
|
||||
const STAGGER_DELAY = '200ms'
|
||||
|
||||
sliderDelays.value = {
|
||||
left: newPosition.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
|
||||
right: newPosition.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
|
||||
top: newPosition.top < sliderTop.value ? '0ms' : STAGGER_DELAY,
|
||||
bottom: newPosition.top < sliderTop.value ? STAGGER_DELAY : '0ms',
|
||||
}
|
||||
|
||||
sliderLeft.value = newPosition.left
|
||||
sliderRight.value = newPosition.right
|
||||
sliderTop.value = newPosition.top
|
||||
sliderBottom.value = newPosition.bottom
|
||||
}
|
||||
|
||||
function saveSliderSnapshot(preserveOnUnmount = false) {
|
||||
const key = navigationGroupKey.value
|
||||
if (!key || !sliderReady.value || currentActiveIndex.value === -1) return
|
||||
|
||||
navigationSliderSnapshots.set(key, {
|
||||
left: sliderLeft.value,
|
||||
top: sliderTop.value,
|
||||
right: sliderRight.value,
|
||||
bottom: sliderBottom.value,
|
||||
savedAt: Date.now(),
|
||||
preserveOnUnmount,
|
||||
})
|
||||
}
|
||||
|
||||
async function updateActiveTab() {
|
||||
await nextTick()
|
||||
const { index, isSubpage } = computeActiveIndex()
|
||||
currentActiveIndex.value = index
|
||||
subpageSelected.value = isSubpage
|
||||
|
||||
if (index !== -1) {
|
||||
positionSlider()
|
||||
} else {
|
||||
sliderLeft.value = 0
|
||||
sliderRight.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
const initialActive = computeActiveIndex()
|
||||
currentActiveIndex.value = initialActive.index
|
||||
subpageSelected.value = initialActive.isSubpage
|
||||
|
||||
const restoredNavigationGroupKey = navigationGroupKey.value
|
||||
const navigationGroupSnapshot = restoredNavigationGroupKey
|
||||
? navigationSliderSnapshots.get(restoredNavigationGroupKey)
|
||||
: undefined
|
||||
const restoredSliderSnapshot =
|
||||
!!navigationGroupSnapshot && Date.now() - navigationGroupSnapshot.savedAt <= sliderSnapshotMaxAge
|
||||
if (restoredSliderSnapshot) {
|
||||
sliderLeft.value = navigationGroupSnapshot.left
|
||||
sliderTop.value = navigationGroupSnapshot.top
|
||||
sliderRight.value = navigationGroupSnapshot.right
|
||||
sliderBottom.value = navigationGroupSnapshot.bottom
|
||||
sliderReady.value = true
|
||||
transitionsEnabled.value = true
|
||||
navigationSliderSnapshots.delete(restoredNavigationGroupKey)
|
||||
} else if (restoredNavigationGroupKey) {
|
||||
navigationSliderSnapshots.delete(restoredNavigationGroupKey)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!restoredSliderSnapshot) {
|
||||
void updateActiveTab()
|
||||
return
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => void updateActiveTab())
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const key = navigationGroupKey.value
|
||||
const existingSnapshot = key ? navigationSliderSnapshots.get(key) : undefined
|
||||
if (
|
||||
existingSnapshot?.preserveOnUnmount &&
|
||||
Date.now() - existingSnapshot.savedAt <= sliderSnapshotMaxAge
|
||||
) {
|
||||
return
|
||||
}
|
||||
saveSliderSnapshot()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => [route.path, route.query],
|
||||
() => {
|
||||
if (props.mode === 'navigation') {
|
||||
updateActiveTab()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.activeIndex,
|
||||
() => {
|
||||
if (props.mode === 'local') {
|
||||
updateActiveTab()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.links,
|
||||
async () => {
|
||||
await nextTick()
|
||||
updateActiveTab()
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navtabs-transition {
|
||||
transition:
|
||||
left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
|
||||
right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
|
||||
top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
|
||||
bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
|
||||
opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
|
||||
}
|
||||
</style>
|
||||
128
packages/ui/src/components/base/OptionGroup.vue
Normal file
128
packages/ui/src/components/base/OptionGroup.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<nav
|
||||
ref="scrollContainer"
|
||||
class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
>
|
||||
<button
|
||||
v-for="(option, index) in options"
|
||||
:key="`option-group-${index}`"
|
||||
ref="optionButtons"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
|
||||
:class="{
|
||||
'text-button-textSelected': modelValue === option,
|
||||
'text-primary': modelValue !== option,
|
||||
}"
|
||||
@click="setOption(option)"
|
||||
>
|
||||
<slot :option="option" :selected="modelValue === option" />
|
||||
</button>
|
||||
<div
|
||||
class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
|
||||
:style="{
|
||||
left: sliderLeftPx,
|
||||
top: sliderTopPx,
|
||||
right: sliderRightPx,
|
||||
bottom: sliderBottomPx,
|
||||
opacity: initialized ? 1 : 0,
|
||||
}"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const modelValue = defineModel<T>({ required: true })
|
||||
|
||||
const props = defineProps<{
|
||||
options: T[]
|
||||
}>()
|
||||
|
||||
const scrollContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const sliderLeft = ref(4)
|
||||
const sliderTop = ref(4)
|
||||
const sliderRight = ref(4)
|
||||
const sliderBottom = ref(4)
|
||||
|
||||
const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
|
||||
const sliderTopPx = computed(() => `${sliderTop.value}px`)
|
||||
const sliderRightPx = computed(() => `${sliderRight.value}px`)
|
||||
const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
|
||||
|
||||
const optionButtons = ref()
|
||||
|
||||
const initialized = ref(false)
|
||||
|
||||
function setOption(option: T) {
|
||||
modelValue.value = option
|
||||
}
|
||||
|
||||
watch(modelValue, () => {
|
||||
startAnimation(props.options.indexOf(modelValue.value))
|
||||
})
|
||||
|
||||
function startAnimation(index: number) {
|
||||
const el = optionButtons.value[index]
|
||||
|
||||
if (!el || !el.offsetParent) return
|
||||
|
||||
const newValues = {
|
||||
left: el.offsetLeft,
|
||||
top: el.offsetTop,
|
||||
right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
|
||||
bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
|
||||
}
|
||||
|
||||
if (sliderLeft.value === 4 && sliderRight.value === 4) {
|
||||
sliderLeft.value = newValues.left
|
||||
sliderRight.value = newValues.right
|
||||
sliderTop.value = newValues.top
|
||||
sliderBottom.value = newValues.bottom
|
||||
} else {
|
||||
const delay = 200
|
||||
|
||||
if (newValues.left < sliderLeft.value) {
|
||||
sliderLeft.value = newValues.left
|
||||
setTimeout(() => {
|
||||
sliderRight.value = newValues.right
|
||||
}, delay)
|
||||
} else {
|
||||
sliderRight.value = newValues.right
|
||||
setTimeout(() => {
|
||||
sliderLeft.value = newValues.left
|
||||
}, delay)
|
||||
}
|
||||
|
||||
if (newValues.top < sliderTop.value) {
|
||||
sliderTop.value = newValues.top
|
||||
setTimeout(() => {
|
||||
sliderBottom.value = newValues.bottom
|
||||
}, delay)
|
||||
} else {
|
||||
sliderBottom.value = newValues.bottom
|
||||
setTimeout(() => {
|
||||
sliderTop.value = newValues.top
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
initialized.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startAnimation(props.options.indexOf(modelValue.value))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navtabs-transition {
|
||||
transition:
|
||||
all 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
</style>
|
||||
149
packages/ui/src/components/base/OverflowMenu.vue
Normal file
149
packages/ui/src/components/base/OverflowMenu.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<PopoutMenu
|
||||
ref="dropdown"
|
||||
v-bind="$attrs"
|
||||
:disabled="disabled"
|
||||
:dropdown-id="dropdownId"
|
||||
:tooltip="tooltip"
|
||||
:placement="placement"
|
||||
>
|
||||
<slot></slot>
|
||||
<template #menu>
|
||||
<slot name="menu-header" />
|
||||
<template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
|
||||
<div
|
||||
v-if="isDivider(option)"
|
||||
:key="`divider-${index}`"
|
||||
class="h-px mx-[0.625rem] my-2 bg-surface-5"
|
||||
></div>
|
||||
<Button
|
||||
v-else
|
||||
:key="`option-${option.id}`"
|
||||
v-tooltip="option.tooltip"
|
||||
:color="option.color ? option.color : 'default'"
|
||||
:hover-filled="option.hoverFilled"
|
||||
:hover-filled-only="option.hoverFilledOnly"
|
||||
transparent
|
||||
:v-close-popper="!option.remainOnClick"
|
||||
:action="
|
||||
option.action
|
||||
? (event: MouseEvent) => {
|
||||
option.action?.(event)
|
||||
if (!option.remainOnClick) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
"
|
||||
:link="option.link ? option.link : undefined"
|
||||
:download="option.download ? option.download : undefined"
|
||||
:external="option.external ? option.external : false"
|
||||
:disabled="option.disabled"
|
||||
@click="
|
||||
() => {
|
||||
if (option.link && !option.remainOnClick) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-if="!$slots[option.id]">
|
||||
<component :is="option.icon" v-if="option.icon" class="size-5" />
|
||||
{{ option.id }}
|
||||
</template>
|
||||
<slot :name="option.id"></slot>
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type Component, type Ref, ref } from 'vue'
|
||||
|
||||
import Button from './Button.vue'
|
||||
import PopoutMenu from './PopoutMenu.vue'
|
||||
|
||||
interface BaseOption {
|
||||
shown?: boolean
|
||||
}
|
||||
|
||||
interface Divider extends BaseOption {
|
||||
divider?: boolean
|
||||
}
|
||||
|
||||
interface Item extends BaseOption {
|
||||
id: string
|
||||
icon?: Component
|
||||
action?: (event?: MouseEvent) => void
|
||||
link?: string
|
||||
download?: string
|
||||
external?: boolean
|
||||
color?:
|
||||
| 'primary'
|
||||
| 'danger'
|
||||
| 'secondary'
|
||||
| 'highlight'
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'purple'
|
||||
hoverFilled?: boolean
|
||||
hoverFilledOnly?: boolean
|
||||
remainOnClick?: boolean
|
||||
disabled?: boolean
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
export type Option = Divider | Item
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
options: Option[]
|
||||
disabled?: boolean
|
||||
dropdownId?: string
|
||||
tooltip?: string
|
||||
placement?: string
|
||||
}>(),
|
||||
{
|
||||
options: () => [],
|
||||
disabled: false,
|
||||
dropdownId: undefined,
|
||||
tooltip: undefined,
|
||||
placement: 'bottom-end',
|
||||
},
|
||||
)
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const dropdown: Ref<InstanceType<typeof PopoutMenu> | null> = ref(null)
|
||||
|
||||
const close = () => {
|
||||
dropdown.value?.hide()
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
dropdown.value?.show()
|
||||
}
|
||||
|
||||
function isDivider(option: BaseOption): option is Divider {
|
||||
return 'divider' in option
|
||||
}
|
||||
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
--text-color: var(--color-base);
|
||||
--background-color: transparent;
|
||||
justify-content: flex-start;
|
||||
padding: 0.55rem 0.625rem;
|
||||
}
|
||||
</style>
|
||||
112
packages/ui/src/components/base/Page.vue
Normal file
112
packages/ui/src/components/base/Page.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rightSidebar: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="omorphia__page flex flex-col px-3"
|
||||
:class="{
|
||||
'right-sidebar': rightSidebar,
|
||||
'has-sidebar': !!$slots.sidebar,
|
||||
'has-header': !!$slots.header,
|
||||
'has-footer': !!$slots.footer,
|
||||
}"
|
||||
>
|
||||
<div v-if="!!$slots.header" class="header">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div v-if="!!$slots.sidebar" class="sidebar lg:min-w-80 lg:w-80">
|
||||
<slot name="sidebar" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-if="!!$slots.footer" class="footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.omorphia__page {
|
||||
.header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.omorphia__page {
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
column-gap: 0.75rem;
|
||||
|
||||
&.has-sidebar {
|
||||
display: grid;
|
||||
grid-template:
|
||||
'sidebar content' auto
|
||||
'footer content' auto
|
||||
'dummy content' 1fr
|
||||
/ 20rem 1fr;
|
||||
|
||||
&.has-header {
|
||||
grid-template:
|
||||
'header header' auto
|
||||
'sidebar content' auto
|
||||
'footer content' auto
|
||||
'dummy content' 1fr
|
||||
/ 20rem 1fr;
|
||||
}
|
||||
|
||||
&.right-sidebar {
|
||||
grid-template:
|
||||
'content sidebar' auto
|
||||
'content footer' auto
|
||||
'content dummy' 1fr
|
||||
/ 1fr 20rem;
|
||||
|
||||
&.has-header {
|
||||
grid-template:
|
||||
'header header' auto
|
||||
'content sidebar' auto
|
||||
'content footer' auto
|
||||
'content dummy' 1fr
|
||||
/ 1fr 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: calc(60rem - 0.75rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 80rem) {
|
||||
.omorphia__page.has-sidebar {
|
||||
.content {
|
||||
width: calc(60rem - 0.75rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
packages/ui/src/components/base/PageHeader.vue
Normal file
11
packages/ui/src/components/base/PageHeader.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-[min-content_1fr_auto] gap-4">
|
||||
<slot name="icon" />
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<slot name="title" />
|
||||
<slot name="summary" />
|
||||
<slot name="stats" />
|
||||
</div>
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</template>
|
||||
125
packages/ui/src/components/base/Pagination.vue
Normal file
125
packages/ui/src/components/base/Pagination.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div v-if="count > 1" class="flex items-center gap-1">
|
||||
<ButtonStyled v-if="page > 1" circular type="transparent">
|
||||
<a
|
||||
v-if="linkFunction"
|
||||
aria-label="Previous Page"
|
||||
:href="linkFunction(page - 1)"
|
||||
@click.prevent="switchPage(page - 1)"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</a>
|
||||
<button v-else aria-label="Previous Page" @click="switchPage(page - 1)">
|
||||
<ChevronLeftIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<div
|
||||
v-for="(item, index) in pages"
|
||||
:key="'page-' + item + '-' + index"
|
||||
:class="{
|
||||
'page-number': page !== item,
|
||||
shrink: item !== '-' && item > 99,
|
||||
}"
|
||||
class="page-number-container"
|
||||
>
|
||||
<div v-if="item === '-'" class="rotate-90 grid place-content-center">
|
||||
<EllipsisVerticalIcon />
|
||||
</div>
|
||||
<ButtonStyled
|
||||
v-else
|
||||
circular
|
||||
:color="page === item ? 'brand' : 'standard'"
|
||||
:type="page === item ? 'highlight' : 'transparent'"
|
||||
>
|
||||
<a
|
||||
v-if="linkFunction"
|
||||
:href="linkFunction(item)"
|
||||
:class="page === item ? '!text-brand' : ''"
|
||||
@click.prevent="page !== item ? switchPage(item) : null"
|
||||
>
|
||||
{{ item }}
|
||||
</a>
|
||||
<button
|
||||
v-else
|
||||
:class="page === item ? '!text-brand' : ''"
|
||||
@click="page !== item ? switchPage(item) : null"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
|
||||
<ButtonStyled v-if="page !== pages[pages.length - 1]" circular type="transparent">
|
||||
<a
|
||||
v-if="linkFunction"
|
||||
aria-label="Next Page"
|
||||
:href="linkFunction(page + 1)"
|
||||
@click.prevent="switchPage(page + 1)"
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
</a>
|
||||
<button v-else aria-label="Next Page" @click="switchPage(page + 1)">
|
||||
<ChevronRightIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ChevronLeftIcon, ChevronRightIcon, EllipsisVerticalIcon } from '@modrinth/assets'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
'switch-page': [page: number]
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
page: number
|
||||
count: number
|
||||
linkFunction?: (page: number) => string | undefined
|
||||
}>(),
|
||||
{
|
||||
page: 1,
|
||||
count: 1,
|
||||
},
|
||||
)
|
||||
|
||||
const pages = computed(() => {
|
||||
const pages: ('-' | number)[] = []
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
function switchPage(newPage: number) {
|
||||
emit('switch-page', Math.min(Math.max(newPage, 1), props.count))
|
||||
}
|
||||
</script>
|
||||
29
packages/ui/src/components/base/PaperChannelBadge.vue
Normal file
29
packages/ui/src/components/base/PaperChannelBadge.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<span
|
||||
v-if="channel === 'ALPHA'"
|
||||
class="rounded-full bg-bg-red px-2 text-sm font-bold text-red"
|
||||
:class="{ 'shrink-0': affix }"
|
||||
>
|
||||
{{ formatMessage(commonMessages.alpha) }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="channel === 'BETA'"
|
||||
class="rounded-full bg-bg-orange px-2 text-sm font-bold text-orange"
|
||||
:class="{ 'shrink-0': affix }"
|
||||
>
|
||||
{{ formatMessage(commonMessages.beta) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useVIntl } from '#ui/composables/i18n'
|
||||
import { commonMessages } from '#ui/utils/common-messages'
|
||||
|
||||
defineProps<{
|
||||
channel: 'ALPHA' | 'BETA' | null | undefined
|
||||
/** When true, prevents the badge from shrinking in flex rows (e.g. search field affix). */
|
||||
affix?: boolean
|
||||
}>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
</script>
|
||||
99
packages/ui/src/components/base/PopoutMenu.vue
Normal file
99
packages/ui/src/components/base/PopoutMenu.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<Dropdown
|
||||
ref="dropdown"
|
||||
no-auto-focus
|
||||
:aria-id="dropdownId || null"
|
||||
:placement="placement"
|
||||
:container="container"
|
||||
:class="dropdownClass"
|
||||
@apply-hide="focusTrigger"
|
||||
>
|
||||
<button ref="trigger" v-bind="$attrs" v-tooltip="tooltip">
|
||||
<slot></slot>
|
||||
</button>
|
||||
<template #popper="{ hide: hideFunction }">
|
||||
<button class="dummy-button" @focusin="hideAndFocusTrigger(hideFunction)"></button>
|
||||
<div ref="menu" class="contents">
|
||||
<slot name="menu"> </slot>
|
||||
</div>
|
||||
<button class="dummy-button" @focusin="hideAndFocusTrigger(hideFunction)"></button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dropdown } from 'floating-vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const trigger = ref()
|
||||
const menu = ref()
|
||||
const dropdown = ref()
|
||||
|
||||
defineProps({
|
||||
dropdownId: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
dropdownClass: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
tooltip: {
|
||||
type: String,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom-end',
|
||||
required: false,
|
||||
},
|
||||
container: {
|
||||
type: [String, Object, Boolean],
|
||||
default: 'body',
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
function hideAndFocusTrigger(hide) {
|
||||
hide()
|
||||
focusTrigger()
|
||||
}
|
||||
|
||||
function focusTrigger() {
|
||||
trigger.value.focus()
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
function hide() {
|
||||
dropdown.value.hide()
|
||||
}
|
||||
|
||||
function show() {
|
||||
dropdown.value.show()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
hide,
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.dummy-button {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
22
packages/ui/src/components/base/PreviewSelectButton.vue
Normal file
22
packages/ui/src/components/base/PreviewSelectButton.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
checked: boolean
|
||||
}>(),
|
||||
{
|
||||
checked: false,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="" role="button" @click="() => {}">
|
||||
<slot name="preview" />
|
||||
<div>
|
||||
<RadioButtonIcon v-if="!checked" class="w-4 h-4" />
|
||||
<RadioButtonCheckedIcon v-else class="w-4 h-4" />
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
190
packages/ui/src/components/base/ProgressBar.vue
Normal file
190
packages/ui/src/components/base/ProgressBar.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<script setup lang="ts">
|
||||
import SpinnerIcon from '@modrinth/assets/icons/spinner.svg'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
progress: number
|
||||
max?: number
|
||||
color?: 'brand' | 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'gray'
|
||||
waiting?: boolean
|
||||
fullWidth?: boolean
|
||||
striped?: boolean
|
||||
gradientBorder?: boolean
|
||||
label?: string
|
||||
labelClass?: string
|
||||
showProgress?: boolean
|
||||
}>(),
|
||||
{
|
||||
max: 1,
|
||||
color: 'brand',
|
||||
waiting: false,
|
||||
fullWidth: false,
|
||||
striped: false,
|
||||
gradientBorder: true,
|
||||
showProgress: false,
|
||||
},
|
||||
)
|
||||
|
||||
const colors = {
|
||||
brand: {
|
||||
fg: 'bg-brand',
|
||||
bg: 'bg-brand-highlight',
|
||||
},
|
||||
green: {
|
||||
fg: 'bg-green',
|
||||
bg: 'bg-bg-green',
|
||||
},
|
||||
red: {
|
||||
fg: 'bg-red',
|
||||
bg: 'bg-bg-red',
|
||||
},
|
||||
orange: {
|
||||
fg: 'bg-orange',
|
||||
bg: 'bg-bg-orange',
|
||||
},
|
||||
blue: {
|
||||
fg: 'bg-blue',
|
||||
bg: 'bg-bg-blue',
|
||||
},
|
||||
purple: {
|
||||
fg: 'bg-purple',
|
||||
bg: 'bg-bg-purple',
|
||||
},
|
||||
gray: {
|
||||
fg: 'bg-gray',
|
||||
bg: 'bg-bg-gray',
|
||||
},
|
||||
}
|
||||
|
||||
const percent = computed(() => props.progress / props.max)
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex w-full flex-col gap-2" :class="fullWidth ? '' : 'max-w-[15rem]'">
|
||||
<div v-if="label || showProgress" class="flex items-center justify-between">
|
||||
<span v-if="label" :class="labelClass">{{ label }}</span>
|
||||
<div v-if="showProgress" class="flex items-center gap-1 text-sm text-secondary">
|
||||
<span>{{ Math.round(percent * 100) }}%</span>
|
||||
<slot name="progress-icon">
|
||||
<SpinnerIcon class="size-5 animate-spin" aria-hidden="true" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="progressbar"
|
||||
:aria-valuenow="waiting ? undefined : Math.round(percent * 100)"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-label="label || undefined"
|
||||
class="flex h-2 w-full overflow-hidden rounded-full"
|
||||
:class="[colors[props.color].bg]"
|
||||
>
|
||||
<div
|
||||
class="rounded-full progress-bar"
|
||||
:class="[
|
||||
colors[props.color].fg,
|
||||
{ 'progress-bar--waiting': waiting },
|
||||
{ 'progress-bar--gradient-border': gradientBorder },
|
||||
striped ? `progress-bar--striped--${color}` : '',
|
||||
]"
|
||||
:style="!waiting ? { width: `${percent * 100}%` } : {}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.progress-bar {
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-bar--waiting {
|
||||
animation: progress-bar-waiting 1s linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes progress-bar-waiting {
|
||||
0% {
|
||||
left: -50%;
|
||||
width: 20%;
|
||||
}
|
||||
50% {
|
||||
width: 60%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar--gradient-border {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
|
||||
border-radius: inherit;
|
||||
mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: xor;
|
||||
padding: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
%progress-bar--striped-common {
|
||||
background-attachment: scroll;
|
||||
background-position: 0 0;
|
||||
background-size: 9.38px 9.38px;
|
||||
}
|
||||
|
||||
@mixin striped-background($color-variable) {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
$color-variable 11.54%,
|
||||
transparent 11.54%,
|
||||
transparent 50%,
|
||||
$color-variable 50%,
|
||||
$color-variable 61.54%,
|
||||
transparent 61.54%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.progress-bar--striped--brand {
|
||||
@include striped-background(var(--color-brand));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--green {
|
||||
@include striped-background(var(--color-green));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--red {
|
||||
@include striped-background(var(--color-red));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--orange {
|
||||
@include striped-background(var(--color-orange));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--blue {
|
||||
@include striped-background(var(--color-blue));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--purple {
|
||||
@include striped-background(var(--color-purple));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
|
||||
.progress-bar--striped--gray {
|
||||
@include striped-background(var(--color-divider-dark));
|
||||
@extend %progress-bar--striped-common;
|
||||
}
|
||||
</style>
|
||||
58
packages/ui/src/components/base/ProgressSpinner.vue
Normal file
58
packages/ui/src/components/base/ProgressSpinner.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
progress: number
|
||||
max?: number
|
||||
}>(),
|
||||
{
|
||||
max: 1,
|
||||
},
|
||||
)
|
||||
|
||||
const percent = computed(() => props.progress / props.max)
|
||||
</script>
|
||||
<template>
|
||||
<span class="relative flex items-center justify-center">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="absolute"
|
||||
>
|
||||
<circle opacity="0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
</svg>
|
||||
<svg
|
||||
:style="{ '--_progress': `${percent * 100}%` }"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="absolute progress-circle"
|
||||
>
|
||||
<circle opacity="0.75" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@property --_progress {
|
||||
syntax: '<percentage>';
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
transition: --_progress 0.125s ease-in-out;
|
||||
mask-image: conic-gradient(
|
||||
black 0%,
|
||||
black var(--_progress),
|
||||
transparent calc(var(--_progress) + 1%),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
51
packages/ui/src/components/base/RadialHeader.vue
Normal file
51
packages/ui/src/components/base/RadialHeader.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :style="colorClasses" class="radial-header relative" v-bind="$attrs">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="radial-header-divider" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
|
||||
}>(),
|
||||
{
|
||||
color: 'brand',
|
||||
},
|
||||
)
|
||||
|
||||
const colorClasses = computed(
|
||||
() =>
|
||||
`--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
|
||||
)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.radial-header {
|
||||
background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
#ffffff00 0%,
|
||||
var(--_radial-border) 50%,
|
||||
#ffffff00 100%
|
||||
);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
packages/ui/src/components/base/RadioButtons.vue
Normal file
48
packages/ui/src/components/base/RadioButtons.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1">
|
||||
<button
|
||||
v-for="(item, index) in items"
|
||||
:key="`radio-button-${index}`"
|
||||
class="p-0 py-2 px-2 border-0 font-medium flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
|
||||
:class="{
|
||||
'text-contrast bg-button-bg': selected === item,
|
||||
'text-primary bg-transparent': selected !== item,
|
||||
}"
|
||||
@click="selected = item"
|
||||
>
|
||||
<RadioButtonCheckedIcon v-if="selected === item" class="text-brand h-5 w-5" />
|
||||
<RadioButtonIcon v-else class="h-5 w-5" />
|
||||
<slot :item="item" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts" generic="T">
|
||||
import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: T
|
||||
items: T[]
|
||||
forceSelection?: boolean
|
||||
}>(),
|
||||
{
|
||||
forceSelection: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const selected = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
},
|
||||
})
|
||||
|
||||
if (props.items.length > 0 && props.forceSelection && !props.modelValue) {
|
||||
selected.value = props.items[0]
|
||||
}
|
||||
</script>
|
||||
95
packages/ui/src/components/base/ReadyTransition.vue
Normal file
95
packages/ui/src/components/base/ReadyTransition.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* If `pending` is false on mount and never becomes true, the slot renders with no
|
||||
* enter transition (cache-hit fast path). After a real pending phase, transitions
|
||||
* behave as before for subsequent toggles.
|
||||
*/
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue'
|
||||
|
||||
import { injectLoadingState } from '#ui/providers/loading-state'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** True while wrapped content loads. The optional pending slot renders and loading bar runs. */
|
||||
pending: boolean | Ref<boolean>
|
||||
/** Fade duration applied to the slot when content reveals. */
|
||||
duration?: number
|
||||
/** When true, do NOT register a token with the global loading bar — only fade locally. */
|
||||
silent?: boolean
|
||||
}>(),
|
||||
{
|
||||
duration: 200,
|
||||
silent: false,
|
||||
},
|
||||
)
|
||||
|
||||
const pendingRef = toRef(props, 'pending') as Ref<boolean | Ref<boolean>>
|
||||
const resolvedPending = computed(() => {
|
||||
const v = pendingRef.value
|
||||
if (typeof v === 'boolean') return v
|
||||
return Boolean((v as Ref<boolean>).value)
|
||||
})
|
||||
|
||||
const hasBeenPending = ref(false)
|
||||
const useShell = computed(() => resolvedPending.value || hasBeenPending.value)
|
||||
|
||||
const loadingState = injectLoadingState(null)
|
||||
let token: symbol | null = null
|
||||
|
||||
function release() {
|
||||
if (token && loadingState) {
|
||||
loadingState.end(token)
|
||||
}
|
||||
token = null
|
||||
}
|
||||
|
||||
watch(
|
||||
resolvedPending,
|
||||
(now) => {
|
||||
if (now) {
|
||||
hasBeenPending.value = true
|
||||
}
|
||||
if (loadingState && !props.silent && typeof window !== 'undefined') {
|
||||
if (now) {
|
||||
if (!token) token = loadingState.begin()
|
||||
} else {
|
||||
release()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onBeforeUnmount(release)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="useShell">
|
||||
<Transition name="ready-fade" mode="out-in" :duration="props.duration">
|
||||
<div v-if="!resolvedPending" key="content" class="w-full">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-else key="pending" class="w-full h-full">
|
||||
<slot name="pending" />
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
<slot v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ready-fade-enter-active,
|
||||
.ready-fade-leave-active {
|
||||
transition: opacity v-bind('`${props.duration}ms`') ease-in-out;
|
||||
}
|
||||
|
||||
.ready-fade-enter-from,
|
||||
.ready-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
70
packages/ui/src/components/base/ScrollToTopButton.vue
Normal file
70
packages/ui/src/components/base/ScrollToTopButton.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { ChevronUpIcon } from '@modrinth/assets'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
|
||||
const visible = ref(false)
|
||||
let scrollContainer: Element | null = null
|
||||
|
||||
function update() {
|
||||
visible.value = (scrollContainer?.scrollTop ?? 0) > 300
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
scrollContainer?.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scrollContainer = document.querySelector('.app-viewport')
|
||||
if (scrollContainer) {
|
||||
scrollContainer.addEventListener('scroll', update, { passive: true })
|
||||
update()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scrollContainer?.removeEventListener('scroll', update)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="scroll-to-top">
|
||||
<div v-if="visible" class="scroll-to-top-wrapper">
|
||||
<ButtonStyled circular size="large" color="brand">
|
||||
<button
|
||||
v-tooltip="'Scroll to top'"
|
||||
class="scroll-to-top-btn"
|
||||
type="button"
|
||||
aria-label="Scroll to top"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<ChevronUpIcon aria-hidden="true" />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scroll-to-top-btn {
|
||||
@apply shadow-lg transition-all duration-200 hover:brightness-110 hover:shadow-xl active:scale-95;
|
||||
}
|
||||
|
||||
.scroll-to-top-wrapper {
|
||||
@apply fixed bottom-10 left-24 z-50;
|
||||
}
|
||||
|
||||
.scroll-to-top-enter-active,
|
||||
.scroll-to-top-leave-active {
|
||||
transition:
|
||||
opacity 0.24s ease,
|
||||
transform 0.24s ease;
|
||||
}
|
||||
|
||||
.scroll-to-top-enter-from,
|
||||
.scroll-to-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
</style>
|
||||
115
packages/ui/src/components/base/ScrollablePanel.vue
Normal file
115
packages/ui/src/components/base/ScrollablePanel.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="flex flex-col relative">
|
||||
<div
|
||||
class="wrapper-wrapper"
|
||||
:class="{
|
||||
'top-fade': !scrollableAtTop && !disableScrolling,
|
||||
'bottom-fade': !scrollableAtBottom && !disableScrolling,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
ref="scrollablePane"
|
||||
:class="{
|
||||
'max-h-[19rem]': !disableScrolling,
|
||||
}"
|
||||
class="scrollable-pane"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
disableScrolling?: boolean
|
||||
}>(),
|
||||
{
|
||||
disableScrolling: 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>
|
||||
@property --_top-fade-height {
|
||||
syntax: '<length-percentage>';
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
|
||||
@property --_bottom-fade-height {
|
||||
syntax: '<length-percentage>';
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
|
||||
.wrapper-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition:
|
||||
--_top-fade-height 0.05s linear,
|
||||
--_bottom-fade-height 0.05s linear;
|
||||
|
||||
--_fade-height: 3rem;
|
||||
|
||||
mask-image: linear-gradient(
|
||||
transparent,
|
||||
rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
|
||||
rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
&.top-fade {
|
||||
--_top-fade-height: var(--_fade-height);
|
||||
}
|
||||
|
||||
&.bottom-fade {
|
||||
--_bottom-fade-height: var(--_fade-height);
|
||||
}
|
||||
}
|
||||
.scrollable-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
50
packages/ui/src/components/base/SelectionCard.vue
Normal file
50
packages/ui/src/components/base/SelectionCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon } from '@modrinth/assets'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
icon: Component
|
||||
title: string
|
||||
description: string
|
||||
selected?: boolean
|
||||
disabled?: boolean
|
||||
value: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
select: [value: string]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="group flex flex-col rounded-xl border-2 p-4 transition-all duration-300 cursor-pointer text-left"
|
||||
:class="[
|
||||
selected
|
||||
? 'border-brand bg-brand-highlight'
|
||||
: 'border-surface-4 bg-surface-2 hover:border-surface-5',
|
||||
disabled ? 'opacity-60 pointer-events-none' : '',
|
||||
]"
|
||||
:disabled="disabled"
|
||||
@click="$emit('select', value)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<component :is="icon" class="size-6 text-secondary shrink-0" stroke-width="1.5" />
|
||||
<div class="flex flex-col min-w-0 flex-1">
|
||||
<span class="text-sm font-semibold text-contrast">{{ title }}</span>
|
||||
<span class="text-xs text-secondary">{{ description }}</span>
|
||||
</div>
|
||||
<CheckIcon v-if="selected" class="size-5 text-brand shrink-0" stroke-width="2.5" />
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden transition-all duration-300"
|
||||
:class="
|
||||
selected
|
||||
? 'max-h-24 mt-3 opacity-100'
|
||||
: 'max-h-0 group-hover:max-h-24 group-hover:mt-3 group-hover:opacity-100 opacity-0'
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
106
packages/ui/src/components/base/ServerNotice.vue
Normal file
106
packages/ui/src/components/base/ServerNotice.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="level === 'survey'"
|
||||
class="flex items-center gap-2 border-2 border-solid border-brand-purple bg-bg-purple p-4 rounded-2xl"
|
||||
>
|
||||
<span class="text-contrast font-bold">Survey ID:</span> <CopyCode :text="message" />
|
||||
</div>
|
||||
<Admonition v-else :type="NOTICE_TYPE[level]">
|
||||
<template #header>
|
||||
<template v-if="!hideDefaultTitle">
|
||||
{{ formatMessage(heading) }}
|
||||
</template>
|
||||
<template v-if="title">
|
||||
<template v-if="hideDefaultTitle">
|
||||
{{ title.substring(1) }}
|
||||
</template>
|
||||
<template v-else> - {{ title }}</template>
|
||||
</template>
|
||||
</template>
|
||||
<template #actions>
|
||||
<ButtonStyled v-if="dismissable" :color="NOTICE_TYPE_BTN[level]">
|
||||
<button
|
||||
v-tooltip="formatMessage(messages.dismiss)"
|
||||
@click="() => (preview ? {} : emit('dismiss'))"
|
||||
>
|
||||
<XIcon /> Dismiss
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<div v-if="message" class="markdown-body" v-html="renderString(message)" />
|
||||
</Admonition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XIcon } from '@modrinth/assets'
|
||||
import { renderString } from '@modrinth/utils'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
|
||||
import Admonition from './Admonition.vue'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
import CopyCode from './CopyCode.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const emit = defineEmits<{
|
||||
(e: 'dismiss'): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
level: string
|
||||
message: string
|
||||
dismissable: boolean
|
||||
preview?: boolean
|
||||
title?: string
|
||||
}>(),
|
||||
{
|
||||
preview: false,
|
||||
title: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const hideDefaultTitle = computed(
|
||||
() => props.title && props.title.length > 1 && props.title.startsWith('\\'),
|
||||
)
|
||||
|
||||
const messages = defineMessages({
|
||||
info: {
|
||||
id: 'servers.notice.heading.info',
|
||||
defaultMessage: 'Info',
|
||||
},
|
||||
attention: {
|
||||
id: 'servers.notice.heading.attention',
|
||||
defaultMessage: 'Attention',
|
||||
},
|
||||
dismiss: {
|
||||
id: 'servers.notice.dismiss',
|
||||
defaultMessage: 'Dismiss',
|
||||
},
|
||||
})
|
||||
|
||||
const NOTICE_HEADINGS: Record<string, MessageDescriptor> = {
|
||||
info: messages.info,
|
||||
warn: messages.attention,
|
||||
critical: messages.attention,
|
||||
}
|
||||
|
||||
const NOTICE_TYPE: Record<string, 'info' | 'warning' | 'critical'> = {
|
||||
info: 'info',
|
||||
warn: 'warning',
|
||||
critical: 'critical',
|
||||
}
|
||||
|
||||
const NOTICE_TYPE_BTN: Record<string, 'blue' | 'orange' | 'red'> = {
|
||||
info: 'blue',
|
||||
warn: 'orange',
|
||||
critical: 'red',
|
||||
}
|
||||
|
||||
const heading = computed(() => NOTICE_HEADINGS[props.level] ?? messages.info)
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.markdown-body > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
45
packages/ui/src/components/base/SettingsLabel.vue
Normal file
45
packages/ui/src/components/base/SettingsLabel.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { MessageDescriptor } from '../../composables/i18n'
|
||||
import { useVIntl } from '../../composables/i18n'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
title: string | MessageDescriptor
|
||||
description?: string | MessageDescriptor
|
||||
}>(),
|
||||
{
|
||||
id: undefined,
|
||||
description: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const formattedTitle = computed(() =>
|
||||
typeof props.title === 'string' ? props.title : formatMessage(props.title),
|
||||
)
|
||||
const formattedDescription = computed(() =>
|
||||
typeof props.description === 'string'
|
||||
? props.description
|
||||
: props.description
|
||||
? formatMessage(props.description)
|
||||
: undefined,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-2">
|
||||
<label v-if="id" :for="id" class="text-lg font-extrabold text-contrast">
|
||||
{{ formattedTitle }}
|
||||
</label>
|
||||
<p v-else class="m-0 text-lg font-extrabold text-contrast">
|
||||
{{ formattedTitle }}
|
||||
</p>
|
||||
<p v-if="formattedDescription" class="text-sm m-0 text-secondary">
|
||||
{{ formattedDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
16
packages/ui/src/components/base/SimpleBadge.vue
Normal file
16
packages/ui/src/components/base/SimpleBadge.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<span class="inline-flex items-center gap-1 font-semibold text-secondary">
|
||||
<component :is="icon" v-if="icon" :aria-hidden="true" class="shrink-0" />
|
||||
{{ formattedName }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
icon?: Component
|
||||
formattedName: string
|
||||
color?: 'brand' | 'green' | 'blue' | 'purple' | 'orange' | 'red'
|
||||
}>()
|
||||
</script>
|
||||
191
packages/ui/src/components/base/Slider.vue
Normal file
191
packages/ui/src/components/base/Slider.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="flex flex-row items-center w-full">
|
||||
<div class="w-full relative">
|
||||
<div class="absolute top-0 h-1/2 w-full">
|
||||
<div
|
||||
class="relative inline-block align-middle w-[calc(100%-0.75rem)] h-3 left-[calc(0.75rem/2)]"
|
||||
>
|
||||
<div
|
||||
v-for="snapPoint in snapPoints"
|
||||
:key="snapPoint"
|
||||
class="absolute inline-block w-1 h-full rounded-sm -translate-x-1/2"
|
||||
:class="{
|
||||
'opacity-0': disabled,
|
||||
}"
|
||||
:style="{
|
||||
left: ((snapPoint - min) / (max - min)) * 100 + '%',
|
||||
backgroundColor:
|
||||
snapPoint <= currentValue ? 'var(--color-brand)' : 'var(--color-base)',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="input"
|
||||
v-model="currentValue"
|
||||
type="range"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
class="slider relative rounded-sm h-1 w-full p-0 min-h-0 shadow-none outline-none align-middle appearance-none"
|
||||
:class="{
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
:style="{
|
||||
'--current-value': currentValue,
|
||||
'--min-value': min,
|
||||
'--max-value': max,
|
||||
}"
|
||||
@input="onInputWithSnap(($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<div class="flex flex-row justify-between text-xs m-0">
|
||||
<span> {{ min }} {{ unit }} </span>
|
||||
<span> {{ max }} {{ unit }} </span>
|
||||
</div>
|
||||
</div>
|
||||
<StyledInput
|
||||
:model-value="String(currentValue)"
|
||||
type="number"
|
||||
class="w-24 ml-3"
|
||||
:disabled="disabled"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
@change="onInput(($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
import StyledInput from './StyledInput.vue'
|
||||
|
||||
const emit = defineEmits<{ 'update:modelValue': [number] }>()
|
||||
|
||||
interface Props {
|
||||
modelValue?: number
|
||||
min: number
|
||||
max: number
|
||||
step?: number
|
||||
forceStep?: boolean
|
||||
snapPoints?: number[]
|
||||
snapRange?: number
|
||||
disabled?: boolean
|
||||
unit?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 10,
|
||||
forceStep: true,
|
||||
snapPoints: () => [],
|
||||
snapRange: 100,
|
||||
disabled: false,
|
||||
unit: '',
|
||||
})
|
||||
|
||||
const currentValue = ref(Math.max(props.min, props.modelValue))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
currentValue.value = Math.max(props.min, newValue ?? props.min)
|
||||
},
|
||||
)
|
||||
|
||||
const inputValueValid = (inputValue: number) => {
|
||||
let newValue = inputValue || props.min
|
||||
|
||||
if (props.forceStep) {
|
||||
newValue -= newValue % props.step
|
||||
}
|
||||
newValue = Math.max(props.min, Math.min(newValue, props.max))
|
||||
|
||||
currentValue.value = newValue
|
||||
emit('update:modelValue', currentValue.value)
|
||||
}
|
||||
|
||||
const onInputWithSnap = (value: string) => {
|
||||
let parsedValue = parseInt(value)
|
||||
|
||||
for (const snapPoint of props.snapPoints) {
|
||||
const distance = Math.abs(snapPoint - parsedValue)
|
||||
|
||||
if (distance < props.snapRange) {
|
||||
parsedValue = snapPoint
|
||||
}
|
||||
}
|
||||
|
||||
inputValueValid(parsedValue)
|
||||
}
|
||||
|
||||
const onInput = (value: string) => {
|
||||
inputValueValid(parseInt(value))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--color-brand) 0%,
|
||||
var(--color-brand)
|
||||
calc(
|
||||
(var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
|
||||
),
|
||||
var(--color-base)
|
||||
calc(
|
||||
(var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
|
||||
),
|
||||
var(--color-base) 100%
|
||||
)
|
||||
100% 100% no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--color-brand);
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
width 0.2s,
|
||||
height 0.2s;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--color-brand);
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
width 0.2s,
|
||||
height 0.2s;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled)::-webkit-slider-thumb,
|
||||
&:hover:not(:disabled)::-moz-range-thumb {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
packages/ui/src/components/base/SmartClickable.vue
Normal file
86
packages/ui/src/components/base/SmartClickable.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div
|
||||
class="smart-clickable grid"
|
||||
:class="{ 'smart-clickable--has-clickable': !!$slots.clickable }"
|
||||
>
|
||||
<slot name="clickable" />
|
||||
<div
|
||||
v-bind="$attrs"
|
||||
class="smart-clickable__contents"
|
||||
:class="{
|
||||
'pointer-events-none': !!$slots.clickable,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.smart-clickable {
|
||||
> * {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
.smart-clickable__contents {
|
||||
// Utility classes for contents
|
||||
:deep(.smart-clickable\:allow-pointer-events) {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
:deep(.ease-brightness) {
|
||||
opacity: 1;
|
||||
transition: opacity 0.125s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only apply effects when a clickable is present
|
||||
.smart-clickable.smart-clickable--has-clickable {
|
||||
// Setup base styles for contents
|
||||
.smart-clickable__contents {
|
||||
transition: scale 0.125s ease-out;
|
||||
}
|
||||
|
||||
// When clickable is being hovered or focus-visible, give contents an effect
|
||||
:first-child:hover + .smart-clickable__contents,
|
||||
:first-child:focus-visible + .smart-clickable__contents,
|
||||
.smart-clickable__contents:hover,
|
||||
.smart-clickable__contents:focus-within {
|
||||
// Utility classes for contents
|
||||
:deep(.smart-clickable\:underline-on-hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
:deep(.smart-clickable\:highlight-on-hover) {
|
||||
filter: brightness(var(--hover-brightness, 1.25));
|
||||
}
|
||||
:deep(.smart-clickable\:surface-4-on-hover) {
|
||||
@apply bg-surface-4;
|
||||
}
|
||||
:deep(.smart-clickable\:surface-5-on-hover) {
|
||||
@apply bg-surface-5;
|
||||
}
|
||||
:deep(.ease-brightness) {
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.125s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
:first-child:focus-visible + .smart-clickable__contents {
|
||||
// Utility classes for contents
|
||||
:deep(.smart-clickable\:outline-on-focus) {
|
||||
outline: 0.25rem solid var(--color-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
// When clickable is being clicked, give contents an effect
|
||||
:first-child:active + .smart-clickable__contents {
|
||||
scale: 0.97;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
617
packages/ui/src/components/base/StackedAdmonitions.vue
Normal file
617
packages/ui/src/components/base/StackedAdmonitions.vue
Normal file
@ -0,0 +1,617 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<script setup lang="ts" generic="ItemType extends StackedAdmonitionItem">
|
||||
import { ChevronDownIcon, XIcon } from '@modrinth/assets'
|
||||
import { AnimatePresence, Motion } from 'motion-v'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'
|
||||
|
||||
import { defineMessages, useVIntl } from '../../composables/i18n'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
export type StackedAdmonitionType = 'info' | 'warning' | 'critical' | 'success'
|
||||
|
||||
/** Extend this interface to attach arbitrary per-item data consumed in the #item slot. */
|
||||
export interface StackedAdmonitionItem {
|
||||
id: string
|
||||
type: StackedAdmonitionType
|
||||
dismissible?: boolean
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
items: ItemType[]
|
||||
peek?: number
|
||||
hoverPeek?: number
|
||||
expandedGap?: number
|
||||
scaleStep?: number
|
||||
hoverScaleStep?: number
|
||||
maxVisibleBehind?: number
|
||||
dismissAllEnabled?: boolean
|
||||
expanded?: boolean
|
||||
}>(),
|
||||
{
|
||||
peek: 8,
|
||||
hoverPeek: 16,
|
||||
expandedGap: 12,
|
||||
scaleStep: 0.04,
|
||||
hoverScaleStep: 0.025,
|
||||
maxVisibleBehind: 2,
|
||||
dismissAllEnabled: true,
|
||||
expanded: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'dismiss-all': []
|
||||
'update:expanded': [value: boolean]
|
||||
expand: []
|
||||
collapse: []
|
||||
}>()
|
||||
|
||||
defineSlots<{
|
||||
item(props: {
|
||||
item: ItemType
|
||||
index: number
|
||||
isFront: boolean
|
||||
expanded: boolean
|
||||
/** Whether the consumer should render the Admonition's own dismiss button. */
|
||||
dismissible: boolean
|
||||
}): unknown
|
||||
'header-label'(props: { count: number; expanded: boolean }): unknown
|
||||
}>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const stackId = useId()
|
||||
const attrs = useAttrs()
|
||||
|
||||
const internalExpanded = ref(false)
|
||||
const isHovered = ref(false)
|
||||
const prefersReducedMotion = ref(false)
|
||||
const initialMeasurementSettled = ref(false)
|
||||
const enteringItemIds = ref<Set<string>>(new Set())
|
||||
const actionBarHeight = ref(0)
|
||||
|
||||
const heights = ref<Record<string, number>>({})
|
||||
const cardEls = new Map<string, HTMLElement>()
|
||||
const observers = new Map<string, ResizeObserver>()
|
||||
const pendingHeights = new Map<string, number>()
|
||||
let flushHandle: number | null = null
|
||||
let initialMeasurementHandle: number | null = null
|
||||
let enteringHandle: number | null = null
|
||||
let actionBarObserver: ResizeObserver | null = null
|
||||
|
||||
// Slot content may run effects, so measure the one real tree instead of mounting
|
||||
// hidden duplicates just to discover natural card heights.
|
||||
function scheduleHeightFlush() {
|
||||
if (flushHandle != null) return
|
||||
flushHandle = requestAnimationFrame(() => {
|
||||
flushHandle = null
|
||||
if (pendingHeights.size === 0) return
|
||||
const next = { ...heights.value }
|
||||
let changed = false
|
||||
for (const [id, h] of pendingHeights) {
|
||||
if (next[id] !== h) {
|
||||
next[id] = h
|
||||
changed = true
|
||||
}
|
||||
}
|
||||
pendingHeights.clear()
|
||||
if (changed) {
|
||||
heights.value = next
|
||||
if (!initialMeasurementSettled.value && initialMeasurementHandle == null) {
|
||||
initialMeasurementHandle = requestAnimationFrame(() => {
|
||||
initialMeasurementHandle = null
|
||||
initialMeasurementSettled.value = true
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const isExpanded = computed(() => {
|
||||
if (props.items.length <= 1) return false
|
||||
return props.expanded ?? internalExpanded.value
|
||||
})
|
||||
const hasActionBar = computed(() => props.items.length >= 2)
|
||||
function itemDismissible(item: ItemType) {
|
||||
return item.dismissible ?? true
|
||||
}
|
||||
|
||||
type StackPhase = 'collapsed' | 'expanding' | 'expanded' | 'collapsing'
|
||||
|
||||
const phase = ref<StackPhase>(isExpanded.value ? 'expanded' : 'collapsed')
|
||||
const isSettledCollapsed = computed(() => phase.value === 'collapsed')
|
||||
const containerHeightSettled = ref(true)
|
||||
const singleItemEntrance = ref(false)
|
||||
|
||||
// Behind cards morph between a collapsed placeholder and real content. The shell
|
||||
// height owns that morph so mixed-height cards do not swap DOM midway through motion.
|
||||
function measuredCardHeight(index: number) {
|
||||
const item = props.items[index]
|
||||
return item ? (heights.value[item.id] ?? 0) : 0
|
||||
}
|
||||
|
||||
function hasMeasuredCard(index: number) {
|
||||
const item = props.items[index]
|
||||
return !!item && heights.value[item.id] != null
|
||||
}
|
||||
|
||||
const frontCardHeight = computed(() => measuredCardHeight(0))
|
||||
|
||||
const hasBehind = computed(() => props.items.length > 1)
|
||||
|
||||
function currentPeek() {
|
||||
return isHovered.value ? props.hoverPeek : props.peek
|
||||
}
|
||||
|
||||
function currentScaleStep() {
|
||||
return isHovered.value ? props.hoverScaleStep : props.scaleStep
|
||||
}
|
||||
|
||||
function targetCardHeight(index: number) {
|
||||
if (index === 0) return measuredCardHeight(0)
|
||||
|
||||
const measured = measuredCardHeight(index) || frontCardHeight.value
|
||||
return isExpanded.value ? measured : frontCardHeight.value
|
||||
}
|
||||
|
||||
const containerHeight = computed(() => {
|
||||
if (isExpanded.value) {
|
||||
return props.items.reduce((acc, _, i) => {
|
||||
return acc + measuredCardHeight(i) + (i > 0 ? props.expandedGap : 0)
|
||||
}, 0)
|
||||
}
|
||||
if (!hasBehind.value) return frontCardHeight.value
|
||||
const behind = Math.min(props.items.length - 1, props.maxVisibleBehind)
|
||||
const pad = isHovered.value ? 6 : 0
|
||||
return frontCardHeight.value + currentPeek() * behind + pad
|
||||
})
|
||||
|
||||
const stackShellHeight = computed(() => {
|
||||
return containerHeight.value + (hasActionBar.value ? actionBarHeight.value : 0)
|
||||
})
|
||||
const containerOverflow = computed(() => {
|
||||
if (isExpanded.value) return 'visible'
|
||||
if (!containerHeightSettled.value) return 'hidden'
|
||||
if (!hasBehind.value && hasMeasuredCard(0)) return 'visible'
|
||||
return 'hidden'
|
||||
})
|
||||
|
||||
const springTransition = computed(() =>
|
||||
prefersReducedMotion.value || !initialMeasurementSettled.value
|
||||
? { duration: 0 }
|
||||
: { type: 'spring' as const, stiffness: 260, damping: 32 },
|
||||
)
|
||||
const heightTransition = computed(() =>
|
||||
singleItemEntrance.value ? { duration: 0.12, ease: 'easeOut' as const } : springTransition.value,
|
||||
)
|
||||
|
||||
const exitTransition = computed(() =>
|
||||
prefersReducedMotion.value ? { duration: 0 } : { duration: 0.18 },
|
||||
)
|
||||
|
||||
const shellExitTransition = computed(() =>
|
||||
prefersReducedMotion.value ? { duration: 0 } : { duration: 0.16 },
|
||||
)
|
||||
|
||||
function collapsedCardPosition(index: number) {
|
||||
const hidden = index > props.maxVisibleBehind
|
||||
return {
|
||||
y: index * currentPeek(),
|
||||
scale: Math.max(0.8, 1 - index * currentScaleStep()),
|
||||
opacity: hidden ? 0 : 1,
|
||||
}
|
||||
}
|
||||
|
||||
function expandedCardPosition(index: number) {
|
||||
let y = 0
|
||||
for (let i = 0; i < index; i++) {
|
||||
y += measuredCardHeight(i) + props.expandedGap
|
||||
}
|
||||
return { y, scale: 1, opacity: 1 }
|
||||
}
|
||||
|
||||
function cardPosition(index: number) {
|
||||
const position = isExpanded.value ? expandedCardPosition(index) : collapsedCardPosition(index)
|
||||
const item = props.items[index]
|
||||
if (index === 0 && singleItemEntrance.value) {
|
||||
return {
|
||||
...position,
|
||||
opacity: 0,
|
||||
}
|
||||
}
|
||||
if (!item || !enteringItemIds.value.has(item.id)) return position
|
||||
|
||||
return {
|
||||
...position,
|
||||
y: position.y + 8,
|
||||
opacity: 0,
|
||||
scale: Math.min(1, position.scale + 0.02),
|
||||
}
|
||||
}
|
||||
|
||||
function contentOpacity(index: number) {
|
||||
return isExpanded.value && hasMeasuredCard(index) ? 1 : 0
|
||||
}
|
||||
|
||||
// Newly inserted cards need an explicit two-frame enter target because Motion's
|
||||
// initial state is disabled to avoid animating from zero-height on first mount.
|
||||
function markEntering(ids: string[]) {
|
||||
if (!initialMeasurementSettled.value || prefersReducedMotion.value || ids.length === 0) return
|
||||
|
||||
const next = new Set(enteringItemIds.value)
|
||||
for (const id of ids) next.add(id)
|
||||
enteringItemIds.value = next
|
||||
|
||||
if (enteringHandle != null) cancelAnimationFrame(enteringHandle)
|
||||
enteringHandle = requestAnimationFrame(() => {
|
||||
enteringHandle = requestAnimationFrame(() => {
|
||||
enteringHandle = null
|
||||
enteringItemIds.value = new Set()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function onContainerAnimationComplete() {
|
||||
phase.value = isExpanded.value ? 'expanded' : 'collapsed'
|
||||
containerHeightSettled.value = true
|
||||
if (containerHeight.value > 0) {
|
||||
singleItemEntrance.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const containerMotionProps = computed(() => ({
|
||||
onAnimationComplete: onContainerAnimationComplete,
|
||||
}))
|
||||
|
||||
function resolveNode(el: unknown): HTMLElement | null {
|
||||
if (!el) return null
|
||||
if (el instanceof HTMLElement) return el
|
||||
if (typeof el === 'object' && '$el' in el) {
|
||||
const node = (el as { $el: unknown }).$el
|
||||
return node instanceof HTMLElement ? node : null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function setCardRef(id: string, el: unknown) {
|
||||
const node = resolveNode(el)
|
||||
if (!node) return
|
||||
pendingHeights.set(id, node.offsetHeight)
|
||||
scheduleHeightFlush()
|
||||
if (cardEls.get(id) === node) return
|
||||
observers.get(id)?.disconnect()
|
||||
cardEls.set(id, node)
|
||||
const ro = new ResizeObserver(() => {
|
||||
pendingHeights.set(id, node.offsetHeight)
|
||||
scheduleHeightFlush()
|
||||
})
|
||||
ro.observe(node)
|
||||
observers.set(id, ro)
|
||||
}
|
||||
|
||||
function setActionBarRef(el: unknown) {
|
||||
const node = resolveNode(el)
|
||||
actionBarObserver?.disconnect()
|
||||
actionBarObserver = null
|
||||
if (!node) {
|
||||
actionBarHeight.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
actionBarHeight.value = node.offsetHeight
|
||||
const ro = new ResizeObserver(() => {
|
||||
actionBarHeight.value = node.offsetHeight
|
||||
})
|
||||
ro.observe(node)
|
||||
actionBarObserver = ro
|
||||
}
|
||||
|
||||
function setExpanded(v: boolean) {
|
||||
internalExpanded.value = v
|
||||
emit('update:expanded', v)
|
||||
if (v) emit('expand')
|
||||
else emit('collapse')
|
||||
}
|
||||
|
||||
function openStack() {
|
||||
if (props.items.length <= 1 || isExpanded.value) return
|
||||
phase.value = 'expanding'
|
||||
setExpanded(true)
|
||||
}
|
||||
|
||||
function closeStack() {
|
||||
if (!isExpanded.value) return
|
||||
phase.value = 'collapsing'
|
||||
setExpanded(false)
|
||||
}
|
||||
|
||||
function toggleExpanded() {
|
||||
if (props.items.length <= 1) return
|
||||
if (isExpanded.value) closeStack()
|
||||
else openStack()
|
||||
}
|
||||
|
||||
function isInteractiveTarget(target: HTMLElement | null, currentTarget: EventTarget | null) {
|
||||
if (!target) return false
|
||||
const interactive = target.closest(
|
||||
'button, a, input, select, textarea, summary, [role="button"], [role="link"]',
|
||||
)
|
||||
return !!interactive && interactive !== currentTarget
|
||||
}
|
||||
|
||||
function onContainerClick(e: MouseEvent) {
|
||||
if (isExpanded.value || props.items.length <= 1) return
|
||||
const target = e.target as HTMLElement | null
|
||||
if (isInteractiveTarget(target, e.currentTarget)) return
|
||||
openStack()
|
||||
}
|
||||
|
||||
function onCardClick(e: MouseEvent) {
|
||||
if (!isExpanded.value) return
|
||||
const target = e.target as HTMLElement | null
|
||||
if (isInteractiveTarget(target, e.currentTarget)) return
|
||||
e.stopPropagation()
|
||||
closeStack()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.items.length,
|
||||
(n, previousLength) => {
|
||||
if (previousLength === 0 && n === 1 && !prefersReducedMotion.value) {
|
||||
singleItemEntrance.value = true
|
||||
} else if (n !== 1) {
|
||||
singleItemEntrance.value = false
|
||||
}
|
||||
|
||||
if (n <= 1 && (props.expanded ?? internalExpanded.value)) {
|
||||
phase.value = 'collapsed'
|
||||
setExpanded(false)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(isExpanded, (expanded, previousExpanded) => {
|
||||
if (previousExpanded === undefined) {
|
||||
phase.value = expanded ? 'expanded' : 'collapsed'
|
||||
return
|
||||
}
|
||||
if (expanded && phase.value !== 'expanding') phase.value = 'expanding'
|
||||
else if (!expanded && phase.value !== 'collapsing') phase.value = 'collapsing'
|
||||
})
|
||||
|
||||
watch(containerHeight, (height, previousHeight) => {
|
||||
if (height !== previousHeight) {
|
||||
const openingSingleItem =
|
||||
previousHeight === 0 && height > 0 && props.items.length === 1 && !prefersReducedMotion.value
|
||||
|
||||
if (openingSingleItem) {
|
||||
singleItemEntrance.value = true
|
||||
} else if (height === 0 || props.items.length !== 1) {
|
||||
singleItemEntrance.value = false
|
||||
}
|
||||
|
||||
containerHeightSettled.value =
|
||||
prefersReducedMotion.value || (!initialMeasurementSettled.value && !openingSingleItem)
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.items.map((i) => i.id),
|
||||
(ids, previousIds = []) => {
|
||||
const idSet = new Set(ids)
|
||||
const previousIdSet = new Set(previousIds)
|
||||
markEntering(ids.filter((id) => !previousIdSet.has(id)))
|
||||
|
||||
for (const [id, ro] of observers) {
|
||||
if (!idSet.has(id)) {
|
||||
ro.disconnect()
|
||||
observers.delete(id)
|
||||
cardEls.delete(id)
|
||||
}
|
||||
}
|
||||
const next: Record<string, number> = {}
|
||||
for (const id of idSet) {
|
||||
if (heights.value[id] != null) next[id] = heights.value[id]
|
||||
}
|
||||
heights.value = next
|
||||
},
|
||||
)
|
||||
|
||||
let mql: MediaQueryList | null = null
|
||||
function syncRM(e: MediaQueryListEvent | MediaQueryList) {
|
||||
prefersReducedMotion.value = 'matches' in e ? e.matches : false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof window === 'undefined' || !window.matchMedia) return
|
||||
mql = window.matchMedia('(prefers-reduced-motion: reduce)')
|
||||
prefersReducedMotion.value = mql.matches
|
||||
mql.addEventListener('change', syncRM)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
mql?.removeEventListener('change', syncRM)
|
||||
for (const ro of observers.values()) ro.disconnect()
|
||||
actionBarObserver?.disconnect()
|
||||
observers.clear()
|
||||
cardEls.clear()
|
||||
pendingHeights.clear()
|
||||
if (flushHandle != null) cancelAnimationFrame(flushHandle)
|
||||
if (initialMeasurementHandle != null) cancelAnimationFrame(initialMeasurementHandle)
|
||||
if (enteringHandle != null) cancelAnimationFrame(enteringHandle)
|
||||
})
|
||||
|
||||
const placeholderClasses: Record<StackedAdmonitionType, string> = {
|
||||
info: 'border-brand-blue bg-bg-blue',
|
||||
warning: 'border-brand-orange bg-bg-orange',
|
||||
critical: 'border-brand-red bg-bg-red',
|
||||
success: 'border-brand-green bg-bg-green',
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
alertCount: {
|
||||
id: 'ui.stacked-admonitions.alert-count',
|
||||
defaultMessage: '{count, plural, one {# alert} other {# alerts}}',
|
||||
},
|
||||
dismissAll: {
|
||||
id: 'ui.stacked-admonitions.dismiss-all',
|
||||
defaultMessage: 'Dismiss all',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AnimatePresence :initial="false">
|
||||
<Motion
|
||||
v-if="items.length > 0"
|
||||
v-bind="attrs"
|
||||
as="div"
|
||||
class="relative"
|
||||
:initial="false"
|
||||
:animate="{ height: stackShellHeight, opacity: 1, y: 0 }"
|
||||
:exit="{
|
||||
height: 0,
|
||||
opacity: 0,
|
||||
overflow: 'hidden',
|
||||
y: -4,
|
||||
transition: shellExitTransition,
|
||||
}"
|
||||
:transition="heightTransition"
|
||||
>
|
||||
<Transition
|
||||
enter-active-class="overflow-hidden transition-all duration-150 ease-out"
|
||||
enter-from-class="-translate-y-1 opacity-0 max-h-0"
|
||||
enter-to-class="translate-y-0 opacity-100 max-h-14"
|
||||
leave-active-class="overflow-hidden transition-all duration-100 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100 max-h-14"
|
||||
leave-to-class="-translate-y-1 opacity-0 max-h-0"
|
||||
>
|
||||
<div v-if="hasActionBar" :ref="(el: unknown) => setActionBarRef(el)">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<ButtonStyled type="transparent">
|
||||
<button
|
||||
type="button"
|
||||
:aria-expanded="isExpanded"
|
||||
:aria-controls="stackId"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
<Motion
|
||||
as="span"
|
||||
class="inline-flex"
|
||||
:animate="{ rotate: isExpanded ? 0 : -90 }"
|
||||
:transition="{ type: 'spring', stiffness: 350, damping: 30 }"
|
||||
>
|
||||
<ChevronDownIcon class="h-4 w-4" />
|
||||
</Motion>
|
||||
<slot name="header-label" :count="items.length" :expanded="isExpanded">
|
||||
{{ formatMessage(messages.alertCount, { count: items.length }) }}
|
||||
</slot>
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="dismissAllEnabled" type="transparent">
|
||||
<button type="button" @click="$emit('dismiss-all')">
|
||||
<XIcon class="h-4 w-4" />
|
||||
{{ formatMessage(messages.dismissAll) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Expanded-target overflow must become visible immediately so cards added
|
||||
during the tail of the expand spring do not inherit collapse clipping. -->
|
||||
<Motion
|
||||
:id="stackId"
|
||||
as="div"
|
||||
class="relative"
|
||||
:initial="false"
|
||||
:animate="{ height: containerHeight }"
|
||||
:transition="heightTransition"
|
||||
:style="{ overflow: containerOverflow }"
|
||||
v-bind="containerMotionProps"
|
||||
@mouseenter="isHovered = true"
|
||||
@mouseleave="isHovered = false"
|
||||
@click="onContainerClick"
|
||||
>
|
||||
<AnimatePresence :initial="false">
|
||||
<Motion
|
||||
v-for="(item, index) in items"
|
||||
:key="item.id"
|
||||
as="div"
|
||||
class="absolute inset-x-0 top-0 rounded-2xl bg-bg will-change-transform"
|
||||
:initial="false"
|
||||
:animate="cardPosition(index)"
|
||||
:exit="{ opacity: 0, scale: 0.9, transition: exitTransition }"
|
||||
:transition="springTransition"
|
||||
:style="{
|
||||
zIndex: items.length - index,
|
||||
transformOrigin: 'top center',
|
||||
}"
|
||||
:aria-hidden="isSettledCollapsed && index !== 0 ? 'true' : undefined"
|
||||
@click="onCardClick"
|
||||
>
|
||||
<template v-if="index === 0">
|
||||
<div :ref="(el: unknown) => setCardRef(item.id, el)">
|
||||
<slot
|
||||
name="item"
|
||||
:item="item"
|
||||
:index="index"
|
||||
:is-front="true"
|
||||
:expanded="isExpanded"
|
||||
:dismissible="itemDismissible(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="relative">
|
||||
<Motion
|
||||
as="div"
|
||||
:class="[
|
||||
'absolute inset-0 rounded-2xl border border-solid',
|
||||
placeholderClasses[item.type],
|
||||
]"
|
||||
:initial="false"
|
||||
:animate="{ opacity: isExpanded ? 0 : 1 }"
|
||||
:transition="springTransition"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Motion
|
||||
as="div"
|
||||
:initial="false"
|
||||
:animate="{ height: targetCardHeight(index) }"
|
||||
:transition="springTransition"
|
||||
:style="{ overflow: isExpanded ? 'visible' : 'hidden' }"
|
||||
>
|
||||
<Motion
|
||||
as="div"
|
||||
:initial="false"
|
||||
:animate="{ opacity: contentOpacity(index) }"
|
||||
:transition="springTransition"
|
||||
>
|
||||
<div
|
||||
:ref="(el: unknown) => setCardRef(item.id, el)"
|
||||
:inert="!isExpanded ? true : undefined"
|
||||
>
|
||||
<slot
|
||||
name="item"
|
||||
:item="item"
|
||||
:index="index"
|
||||
:is-front="false"
|
||||
:expanded="isExpanded"
|
||||
:dismissible="itemDismissible(item)"
|
||||
/>
|
||||
</div>
|
||||
</Motion>
|
||||
</Motion>
|
||||
</div>
|
||||
</template>
|
||||
</Motion>
|
||||
</AnimatePresence>
|
||||
</Motion>
|
||||
</Motion>
|
||||
</AnimatePresence>
|
||||
</template>
|
||||
5
packages/ui/src/components/base/StatItem.vue
Normal file
5
packages/ui/src/components/base/StatItem.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-1">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
195
packages/ui/src/components/base/StyledInput.vue
Normal file
195
packages/ui/src/components/base/StyledInput.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative"
|
||||
:class="[
|
||||
wrapperClass,
|
||||
multiline ? 'flex' : 'inline-flex',
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
!multiline && variant === 'outlined' ? 'items-stretch' : 'items-center',
|
||||
]"
|
||||
>
|
||||
<!-- Left icon (filled variant, single-line only) -->
|
||||
<component
|
||||
:is="icon"
|
||||
v-if="icon && variant === 'filled' && !multiline"
|
||||
class="absolute left-3 h-5 w-5 z-[1] pointer-events-none transition-colors"
|
||||
:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<!-- Multiline textarea -->
|
||||
<textarea
|
||||
v-if="multiline"
|
||||
:id="id"
|
||||
v-bind="inputAttrs"
|
||||
ref="inputRef"
|
||||
:value="model"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:autocorrect="autocorrect"
|
||||
:autocapitalize="autocapitalize"
|
||||
:spellcheck="spellcheck"
|
||||
:maxlength="maxlength"
|
||||
:rows="rows"
|
||||
class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow bg-surface-4 border-none rounded-xl"
|
||||
:class="[
|
||||
inputClass,
|
||||
'pl-3 pr-3 py-2 text-base',
|
||||
error ? 'outline outline-2 outline-red bg-warning-bg' : 'outline-none',
|
||||
disabled ? 'cursor-not-allowed' : '',
|
||||
resizeClass,
|
||||
]"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
|
||||
<!-- Single-line input -->
|
||||
<input
|
||||
v-else
|
||||
:id="id"
|
||||
v-bind="inputAttrs"
|
||||
ref="inputRef"
|
||||
:type="type"
|
||||
:value="model"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:autocorrect="autocorrect"
|
||||
:autocapitalize="autocapitalize"
|
||||
:spellcheck="spellcheck"
|
||||
:inputmode="inputmode"
|
||||
:maxlength="maxlength"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
class="min-w-0 w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow"
|
||||
:class="[
|
||||
inputClass,
|
||||
!multiline && hasRightSlot ? 'flex-1' : '',
|
||||
variant === 'filled' && icon ? 'pl-10' : 'pl-3',
|
||||
clearable && model && variant === 'filled' ? 'pr-8' : 'pr-3',
|
||||
size === 'small' ? 'h-8 py-1.5 text-sm' : 'h-9 py-2 text-base',
|
||||
error ? 'outline outline-2 outline-red bg-warning-bg' : 'outline-none',
|
||||
disabled ? 'cursor-not-allowed' : '',
|
||||
variant === 'outlined'
|
||||
? 'bg-transparent border border-solid border-button-bg rounded-l-xl border-r-0'
|
||||
: 'bg-surface-4 border-none rounded-xl',
|
||||
]"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
|
||||
<!-- Clear button (right side, filled variant, single-line only) -->
|
||||
<button
|
||||
v-if="!multiline && clearable && model && !disabled && !readonly && variant === 'filled'"
|
||||
type="button"
|
||||
class="absolute right-0.5 z-[1] p-2 touch-manipulation bg-transparent border-none text-secondary hover:text-contrast transition-colors cursor-pointer select-none"
|
||||
aria-label="Clear input"
|
||||
@click="clear"
|
||||
>
|
||||
<XIcon class="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<!-- Right icon button (outlined variant, single-line only) -->
|
||||
<button
|
||||
v-if="!multiline && variant === 'outlined'"
|
||||
type="button"
|
||||
class="flex touch-manipulation items-center justify-center px-2 bg-transparent border border-solid border-button-bg rounded-r-xl text-secondary hover:text-contrast transition-colors shrink-0"
|
||||
:aria-label="clearable && model ? 'Clear input' : 'Search'"
|
||||
:tabindex="clearable && model ? undefined : -1"
|
||||
@click="clearable && model ? clear() : undefined"
|
||||
>
|
||||
<XIcon v-if="clearable && model" class="h-4 w-4" />
|
||||
<component :is="icon" v-else-if="icon" class="h-4 w-4" />
|
||||
<SearchIcon v-else class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<!-- Custom rightside slot -->
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SearchIcon, XIcon } from '@modrinth/assets'
|
||||
import { type Component, computed, ref, useSlots } from 'vue'
|
||||
|
||||
const model = defineModel<string | number | undefined>()
|
||||
const hasRightSlot = Boolean(useSlots().right)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
icon?: Component
|
||||
type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'search' | 'date' | 'datetime-local'
|
||||
placeholder?: string
|
||||
id?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
autocorrect?: 'on' | 'off'
|
||||
autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
|
||||
spellcheck?: boolean
|
||||
inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
|
||||
maxlength?: number
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: boolean
|
||||
size?: 'standard' | 'small'
|
||||
variant?: 'filled' | 'outlined'
|
||||
clearable?: boolean
|
||||
multiline?: boolean
|
||||
rows?: number
|
||||
resize?: 'none' | 'vertical' | 'both'
|
||||
inputClass?: string
|
||||
wrapperClass?: string
|
||||
inputAttrs?: Record<string, string | number | boolean | undefined>
|
||||
}>(),
|
||||
{
|
||||
type: 'text',
|
||||
size: 'standard',
|
||||
variant: 'filled',
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
error: false,
|
||||
clearable: false,
|
||||
multiline: false,
|
||||
rows: 3,
|
||||
resize: 'none',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
clear: []
|
||||
}>()
|
||||
|
||||
const inputRef = ref<HTMLInputElement | HTMLTextAreaElement>()
|
||||
const isFocused = ref(false)
|
||||
const resizeClass = computed(
|
||||
() => ({ none: 'resize-none', vertical: 'resize-y', both: 'resize' })[props.resize ?? 'none'],
|
||||
)
|
||||
|
||||
defineExpose({ focus: () => inputRef.value?.focus() })
|
||||
|
||||
function onInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement | HTMLTextAreaElement
|
||||
model.value =
|
||||
props.type === 'number' && !props.multiline
|
||||
? target.value === ''
|
||||
? undefined
|
||||
: Number(target.value)
|
||||
: target.value
|
||||
}
|
||||
|
||||
function clear() {
|
||||
model.value = props.type === 'number' && !props.multiline ? undefined : ''
|
||||
emit('clear')
|
||||
}
|
||||
</script>
|
||||
490
packages/ui/src/components/base/Table.vue
Normal file
490
packages/ui/src/components/base/Table.vue
Normal file
@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div class="overflow-hidden rounded-2xl border border-solid border-surface-4">
|
||||
<div
|
||||
v-if="hasHeaderSlot"
|
||||
class="border-solid border-0 border-b border-surface-4 bg-surface-3 p-4"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div class="overflow-x-auto overflow-y-hidden">
|
||||
<table
|
||||
class="w-full border-separate border-spacing-0 border-surface-4"
|
||||
:class="tableLayout === 'auto' ? 'table-auto' : 'table-fixed'"
|
||||
:style="tableMinWidth ? { minWidth: tableMinWidth } : undefined"
|
||||
>
|
||||
<colgroup>
|
||||
<col v-if="showSelection" class="w-12" />
|
||||
<col
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
:style="column.width ? { width: column.width } : undefined"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead class="">
|
||||
<tr class="bg-surface-3">
|
||||
<th v-if="showSelection" class="w-12">
|
||||
<Checkbox
|
||||
:model-value="allSelected"
|
||||
:indeterminate="someSelected"
|
||||
class="shrink-0 p-4 focus-visible:!outline-none"
|
||||
@update:model-value="toggleSelectAll"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="h-12 pr-2 first:pl-4 last:pr-4"
|
||||
:class="[
|
||||
`text-${column.align ?? 'left'}`,
|
||||
column.enableSorting ? 'cursor-pointer select-none' : '',
|
||||
column.headerClass,
|
||||
]"
|
||||
:style="column.width ? { width: column.width } : undefined"
|
||||
@click="column.enableSorting ? handleSort(column.key) : undefined"
|
||||
>
|
||||
<slot :name="`header-${column.key}`" :column="column">
|
||||
<span
|
||||
v-if="column.label || column.enableSorting"
|
||||
class="inline-flex min-w-0 max-w-full items-center gap-1 font-semibold"
|
||||
:class="`${sortColumn === column.key ? 'text-contrast -mr-1' : ''}`"
|
||||
>
|
||||
<span class="min-w-0 truncate">{{ column.label ?? '' }}</span>
|
||||
<template v-if="column.enableSorting">
|
||||
<ChevronUpIcon
|
||||
v-if="sortColumn === column.key && sortDirection === 'asc'"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
<ChevronDownIcon
|
||||
v-else-if="sortColumn === column.key && sortDirection === 'desc'"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
</template>
|
||||
</span>
|
||||
</slot>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<TransitionGroup
|
||||
v-if="rowTransitionName && !virtualized"
|
||||
:name="rowTransitionName"
|
||||
tag="tbody"
|
||||
>
|
||||
<tr v-if="data.length === 0" key="empty" class="bg-surface-2">
|
||||
<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-4 p-0">
|
||||
<slot name="empty-state">
|
||||
<div class="text-secondary flex h-64 items-center justify-center">
|
||||
No data available.
|
||||
</div>
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<template
|
||||
v-for="(row, rowIndex) in renderedRows"
|
||||
:key="getRowPartRenderKey(row, getAbsoluteRowIndex(rowIndex), 'group')"
|
||||
>
|
||||
<tr
|
||||
:class="getRowClass(row, getAbsoluteRowIndex(rowIndex))"
|
||||
@click="handleRowClick(row, getAbsoluteRowIndex(rowIndex), $event)"
|
||||
>
|
||||
<td
|
||||
v-if="showSelection"
|
||||
class="w-12 border-solid border-0 border-t border-surface-4 focus:outline-none"
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="isSelected(row)"
|
||||
class="shrink-0 p-4 -outline-offset-[14px] outline rounded-2xl"
|
||||
@update:model-value="
|
||||
(selectRow, event) => toggleSelection(row, selectRow, event)
|
||||
"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
|
||||
:class="[`text-${column.align ?? 'left'}`, column.cellClass]"
|
||||
>
|
||||
<slot
|
||||
:name="`cell-${column.key}`"
|
||||
:row="row"
|
||||
:value="row[column.key]"
|
||||
:column="column"
|
||||
:index="getAbsoluteRowIndex(rowIndex)"
|
||||
>
|
||||
{{ row[column.key] ?? '' }}
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="isRowBelowVisible(row, getAbsoluteRowIndex(rowIndex))"
|
||||
:class="getRowBelowClass(row, getAbsoluteRowIndex(rowIndex))"
|
||||
@click="handleRowClick(row, getAbsoluteRowIndex(rowIndex), $event)"
|
||||
>
|
||||
<td :colspan="columnSpan" class="p-0">
|
||||
<slot name="row-below" :row="row" :index="getAbsoluteRowIndex(rowIndex)" />
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
</TransitionGroup>
|
||||
<tbody v-else :ref="setListContainer">
|
||||
<tr v-if="data.length === 0" class="bg-surface-2">
|
||||
<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-4 p-0">
|
||||
<slot name="empty-state">
|
||||
<div class="text-secondary flex h-64 items-center justify-center">
|
||||
No data available.
|
||||
</div>
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<template v-else>
|
||||
<tr v-if="virtualized && topSpacerHeight > 0" aria-hidden="true">
|
||||
<td
|
||||
:colspan="columnSpan"
|
||||
class="border-0 p-0"
|
||||
:style="{ height: `${topSpacerHeight}px` }"
|
||||
></td>
|
||||
</tr>
|
||||
<template
|
||||
v-for="(row, rowIndex) in renderedRows"
|
||||
:key="getRowPartRenderKey(row, getAbsoluteRowIndex(rowIndex), 'group')"
|
||||
>
|
||||
<tr
|
||||
:class="getRowClass(row, getAbsoluteRowIndex(rowIndex))"
|
||||
@click="handleRowClick(row, getAbsoluteRowIndex(rowIndex), $event)"
|
||||
>
|
||||
<td
|
||||
v-if="showSelection"
|
||||
class="w-12 border-solid border-0 border-t border-surface-4 focus:outline-none"
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="isSelected(row)"
|
||||
class="shrink-0 p-4 -outline-offset-[14px] outline rounded-2xl"
|
||||
@update:model-value="
|
||||
(selectRow, event) => toggleSelection(row, selectRow, event)
|
||||
"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
|
||||
:class="[`text-${column.align ?? 'left'}`, column.cellClass]"
|
||||
>
|
||||
<slot
|
||||
:name="`cell-${column.key}`"
|
||||
:row="row"
|
||||
:value="row[column.key]"
|
||||
:column="column"
|
||||
:index="getAbsoluteRowIndex(rowIndex)"
|
||||
>
|
||||
{{ row[column.key] ?? '' }}
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="isRowBelowVisible(row, getAbsoluteRowIndex(rowIndex))"
|
||||
:class="getRowBelowClass(row, getAbsoluteRowIndex(rowIndex))"
|
||||
@click="handleRowClick(row, getAbsoluteRowIndex(rowIndex), $event)"
|
||||
>
|
||||
<td :colspan="columnSpan" class="p-0">
|
||||
<slot name="row-below" :row="row" :index="getAbsoluteRowIndex(rowIndex)" />
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-if="virtualized && bottomSpacerHeight > 0" aria-hidden="true">
|
||||
<td
|
||||
:colspan="columnSpan"
|
||||
class="border-0 p-0"
|
||||
:style="{ height: `${bottomSpacerHeight}px` }"
|
||||
></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script
|
||||
setup
|
||||
lang="ts"
|
||||
generic="K extends string = string, T extends Record<string, unknown> = Record<K, unknown>"
|
||||
>
|
||||
import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
|
||||
import { computed, ref, toRef, useSlots } from 'vue'
|
||||
|
||||
import { useVirtualScroll } from '../../composables/virtual-scroll'
|
||||
import Checkbox from './Checkbox.vue'
|
||||
|
||||
export type TableColumnAlign = 'left' | 'center' | 'right'
|
||||
export type SortDirection = 'asc' | 'desc'
|
||||
export type TableLayout = 'fixed' | 'auto'
|
||||
|
||||
/**
|
||||
* Defines a table column configuration.
|
||||
* @template K - The column key is used to get cell data of row
|
||||
*/
|
||||
export interface TableColumn<K extends string = string> {
|
||||
key: K
|
||||
label?: string
|
||||
align?: TableColumnAlign
|
||||
enableSorting?: boolean
|
||||
defaultSortDirection?: SortDirection
|
||||
/**
|
||||
* CSS width value for the column.
|
||||
* Accepts any valid CSS width (e.g., '200px', '20%', '10rem', 'auto', 'fit-content').
|
||||
*/
|
||||
width?: string
|
||||
headerClass?: string
|
||||
cellClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
columns: TableColumn<K>[]
|
||||
data: T[] /* Row data for table */
|
||||
showSelection?: boolean
|
||||
rowKey?: keyof T /* The key used to uniquely identify each row */
|
||||
selectionKey?: keyof T /* The key used to identify selectable rows */
|
||||
selectionData?: T[] /* The complete selectable data set when data is paginated */
|
||||
selectionIds?: unknown[] /* Complete selectable IDs when callers do not want to retain row objects */
|
||||
virtualized?: boolean
|
||||
virtualRowHeight?: number
|
||||
virtualBufferSize?: number /* The number of extra rows rendered above and below the visible viewport */
|
||||
rowTransitionName?: string
|
||||
/**
|
||||
* Sets a minimum width for the table content, allowing horizontal overflow below that width.
|
||||
*/
|
||||
tableMinWidth?: string
|
||||
tableLayout?: TableLayout
|
||||
rowBelowVisible?: boolean | ((row: T, index: number) => boolean)
|
||||
rowClass?: string | ((row: T, index: number) => string)
|
||||
rowClickable?: boolean | ((row: T, index: number) => boolean)
|
||||
}>(),
|
||||
{
|
||||
showSelection: false,
|
||||
rowKey: 'id' as keyof T,
|
||||
tableLayout: 'fixed',
|
||||
virtualized: false,
|
||||
virtualRowHeight: 56,
|
||||
virtualBufferSize: 5,
|
||||
},
|
||||
)
|
||||
|
||||
const selectedIds = defineModel<unknown[]>('selectedIds', { default: () => [] })
|
||||
const sortColumn = defineModel<string | undefined>('sortColumn')
|
||||
const sortDirection = defineModel<SortDirection>('sortDirection', { default: 'asc' })
|
||||
const slots = useSlots()
|
||||
const selectionAnchorId = ref<unknown>()
|
||||
const hasHeaderSlot = computed(() => Boolean(slots.header))
|
||||
const hasRowBelowSlot = computed(() => Boolean(slots['row-below']))
|
||||
const columnSpan = computed(() => Math.max(props.columns.length + (props.showSelection ? 1 : 0), 1))
|
||||
|
||||
const {
|
||||
listContainer,
|
||||
totalHeight,
|
||||
visibleRange,
|
||||
visibleTop: topSpacerHeight,
|
||||
visibleItems,
|
||||
} = useVirtualScroll(toRef(props, 'data'), {
|
||||
itemHeight: props.virtualRowHeight,
|
||||
bufferSize: props.virtualBufferSize,
|
||||
enabled: toRef(props, 'virtualized'),
|
||||
})
|
||||
|
||||
const renderedRows = computed(() => (props.virtualized ? visibleItems.value : props.data))
|
||||
const bottomSpacerHeight = computed(() => {
|
||||
if (!props.virtualized) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return Math.max(
|
||||
0,
|
||||
totalHeight.value - topSpacerHeight.value - renderedRows.value.length * props.virtualRowHeight,
|
||||
)
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
sort: [column: string, direction: SortDirection]
|
||||
rowClick: [row: T, index: number, event: MouseEvent]
|
||||
}>()
|
||||
|
||||
const selectableRows = computed(() => props.selectionData ?? props.data)
|
||||
const selectableRowIds = computed(
|
||||
() => props.selectionIds ?? selectableRows.value.map((row) => getSelectionId(row)),
|
||||
)
|
||||
const selectedIdSet = computed(() => new Set(selectedIds.value))
|
||||
const selectedSelectableIdCount = computed(() => {
|
||||
let count = 0
|
||||
for (const id of selectableRowIds.value) {
|
||||
if (selectedIdSet.value.has(id)) {
|
||||
count++
|
||||
}
|
||||
}
|
||||
return count
|
||||
})
|
||||
const allSelected = computed(
|
||||
() =>
|
||||
selectableRowIds.value.length > 0 &&
|
||||
selectedSelectableIdCount.value === selectableRowIds.value.length,
|
||||
)
|
||||
const someSelected = computed(
|
||||
() =>
|
||||
selectedSelectableIdCount.value > 0 &&
|
||||
selectedSelectableIdCount.value < selectableRowIds.value.length,
|
||||
)
|
||||
|
||||
function getRowId(row: T): unknown {
|
||||
return row[props.rowKey as keyof T]
|
||||
}
|
||||
|
||||
function getSelectionId(row: T): unknown {
|
||||
return row[(props.selectionKey ?? props.rowKey) as keyof T]
|
||||
}
|
||||
|
||||
function setListContainer(element: unknown) {
|
||||
listContainer.value = props.virtualized ? (element as HTMLElement | null) : null
|
||||
}
|
||||
|
||||
function getAbsoluteRowIndex(rowIndex: number): number {
|
||||
return props.virtualized ? visibleRange.value.start + rowIndex : rowIndex
|
||||
}
|
||||
|
||||
function getRowRenderKey(row: T, rowIndex: number): PropertyKey {
|
||||
const rowId = getRowId(row)
|
||||
if (typeof rowId === 'string' || typeof rowId === 'number' || typeof rowId === 'symbol') {
|
||||
return rowId
|
||||
}
|
||||
|
||||
return rowIndex
|
||||
}
|
||||
|
||||
function getRowPartRenderKey(row: T, rowIndex: number, part: 'group' | 'row' | 'below'): string {
|
||||
return `${String(getRowRenderKey(row, rowIndex))}-${part}`
|
||||
}
|
||||
|
||||
function isRowBelowVisible(row: T, rowIndex: number): boolean {
|
||||
if (!hasRowBelowSlot.value || props.virtualized) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof props.rowBelowVisible === 'function') {
|
||||
return props.rowBelowVisible(row, rowIndex)
|
||||
}
|
||||
|
||||
return props.rowBelowVisible ?? true
|
||||
}
|
||||
|
||||
function getRowClass(row: T, rowIndex: number): string[] {
|
||||
const baseClass = rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'
|
||||
const customClass =
|
||||
typeof props.rowClass === 'function' ? props.rowClass(row, rowIndex) : props.rowClass
|
||||
|
||||
return customClass ? [baseClass, customClass] : [baseClass]
|
||||
}
|
||||
|
||||
function getRowBelowClass(row: T, rowIndex: number): string[] {
|
||||
const classes = [
|
||||
rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5',
|
||||
'table-row-below',
|
||||
'transition-[filter]',
|
||||
]
|
||||
|
||||
if (isRowClickable(row, rowIndex)) {
|
||||
classes.push('cursor-pointer')
|
||||
}
|
||||
|
||||
return classes
|
||||
}
|
||||
|
||||
function isRowClickable(row: T, rowIndex: number): boolean {
|
||||
return typeof props.rowClickable === 'function'
|
||||
? props.rowClickable(row, rowIndex)
|
||||
: props.rowClickable === true
|
||||
}
|
||||
|
||||
function isNoRowClickTarget(event: MouseEvent): boolean {
|
||||
const target = event.target
|
||||
const currentTarget = event.currentTarget
|
||||
if (!(target instanceof Element) || !(currentTarget instanceof Element)) {
|
||||
return false
|
||||
}
|
||||
|
||||
const noRowClickTarget = target.closest('[data-no-row-click]')
|
||||
return noRowClickTarget !== null && noRowClickTarget !== currentTarget
|
||||
}
|
||||
|
||||
function handleRowClick(row: T, rowIndex: number, event: MouseEvent) {
|
||||
if (!isRowClickable(row, rowIndex) || isNoRowClickTarget(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
emit('rowClick', row, rowIndex, event)
|
||||
}
|
||||
|
||||
function isSelected(row: T): boolean {
|
||||
return selectedIdSet.value.has(getSelectionId(row))
|
||||
}
|
||||
|
||||
function toggleSelection(row: T, selectRow: boolean, event?: MouseEvent) {
|
||||
const id = getSelectionId(row)
|
||||
const rowIndex = selectableRowIds.value.findIndex((selectableId) => selectableId === id)
|
||||
const anchorIndex = selectableRowIds.value.findIndex(
|
||||
(selectableId) => selectableId === selectionAnchorId.value,
|
||||
)
|
||||
|
||||
if (event?.shiftKey && rowIndex !== -1 && anchorIndex !== -1) {
|
||||
const startIndex = Math.min(rowIndex, anchorIndex)
|
||||
const endIndex = Math.max(rowIndex, anchorIndex)
|
||||
const rangeIds = selectableRowIds.value.slice(startIndex, endIndex + 1)
|
||||
|
||||
if (selectRow) {
|
||||
const nextSelectedIds = [...selectedIds.value]
|
||||
const nextSelectedIdSet = new Set(nextSelectedIds)
|
||||
for (const rangeId of rangeIds) {
|
||||
if (!nextSelectedIdSet.has(rangeId)) {
|
||||
nextSelectedIds.push(rangeId)
|
||||
nextSelectedIdSet.add(rangeId)
|
||||
}
|
||||
}
|
||||
selectedIds.value = nextSelectedIds
|
||||
} else {
|
||||
const rangeIdSet = new Set(rangeIds)
|
||||
selectedIds.value = selectedIds.value.filter((selectedId) => !rangeIdSet.has(selectedId))
|
||||
}
|
||||
} else {
|
||||
selectedIds.value = selectRow
|
||||
? [...selectedIds.value, id]
|
||||
: selectedIds.value.filter((selectedId) => selectedId !== id)
|
||||
}
|
||||
|
||||
selectionAnchorId.value = id
|
||||
}
|
||||
|
||||
function toggleSelectAll(selectAll: boolean) {
|
||||
selectionAnchorId.value = undefined
|
||||
if (selectAll) {
|
||||
selectedIds.value = [...selectableRowIds.value]
|
||||
} else {
|
||||
selectedIds.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function handleSort(columnKey: string) {
|
||||
const column = props.columns.find((column) => column.key === columnKey)
|
||||
const defaultDirection = column?.defaultSortDirection ?? 'asc'
|
||||
const newDirection: SortDirection =
|
||||
sortColumn.value === columnKey && sortDirection.value === defaultDirection
|
||||
? getOppositeSortDirection(defaultDirection)
|
||||
: defaultDirection
|
||||
sortColumn.value = columnKey
|
||||
sortDirection.value = newDirection
|
||||
emit('sort', columnKey, newDirection)
|
||||
}
|
||||
|
||||
function getOppositeSortDirection(direction: SortDirection): SortDirection {
|
||||
return direction === 'asc' ? 'desc' : 'asc'
|
||||
}
|
||||
</script>
|
||||
97
packages/ui/src/components/base/Tabs.vue
Normal file
97
packages/ui/src/components/base/Tabs.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="tabs.length > 0"
|
||||
class="inline-flex w-fit items-center overflow-x-auto rounded-xl border border-solid border-surface-5 p-0.5 shadow-sm gap-1 h-[38px]"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.value"
|
||||
ref="tabButtons"
|
||||
type="button"
|
||||
class="flex min-h-6 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-[10px] border border-solid px-2.5 h-full text-sm font-medium outline-none transition-all active:scale-[0.97] focus-visible:ring-4 focus-visible:ring-brand-shadow"
|
||||
:class="
|
||||
tab.value === value
|
||||
? 'border-brand bg-brand-highlight text-brand'
|
||||
: 'border-transparent bg-transparent text-primary hover:bg-surface-4'
|
||||
"
|
||||
role="tab"
|
||||
:aria-selected="tab.value === value"
|
||||
:tabindex="tab.value === value || (!hasSelectedTab && index === 0) ? 0 : -1"
|
||||
@click="selectTab(tab)"
|
||||
@keydown="onTabKeydown($event, index)"
|
||||
>
|
||||
<component
|
||||
:is="tab.icon"
|
||||
v-if="tab.icon"
|
||||
class="size-5 shrink-0"
|
||||
:class="tab.value === value ? 'text-brand' : 'text-secondary'"
|
||||
/>
|
||||
<span v-if="tab.label" class="text-nowrap">{{ tab.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export type TabsValue = string | number
|
||||
|
||||
export interface TabsTab {
|
||||
value: TabsValue
|
||||
label: string
|
||||
icon?: Component
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
value: TabsValue
|
||||
tabs: TabsTab[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:value': [value: TabsValue]
|
||||
change: [tab: TabsTab]
|
||||
}>()
|
||||
|
||||
const tabButtons = ref<HTMLButtonElement[]>()
|
||||
|
||||
const hasSelectedTab = computed(() => props.tabs.some((tab) => tab.value === props.value))
|
||||
|
||||
function selectTab(tab: TabsTab) {
|
||||
emit('update:value', tab.value)
|
||||
emit('change', tab)
|
||||
}
|
||||
|
||||
function selectTabAtIndex(index: number) {
|
||||
const tab = props.tabs[index]
|
||||
if (!tab) return
|
||||
|
||||
selectTab(tab)
|
||||
requestAnimationFrame(() => {
|
||||
tabButtons.value?.[index]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onTabKeydown(event: KeyboardEvent, index: number) {
|
||||
if (props.tabs.length === 0) return
|
||||
|
||||
const lastIndex = props.tabs.length - 1
|
||||
let nextIndex: number | undefined
|
||||
|
||||
if (event.key === 'ArrowRight') {
|
||||
nextIndex = index === lastIndex ? 0 : index + 1
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
nextIndex = index === 0 ? lastIndex : index - 1
|
||||
} else if (event.key === 'Home') {
|
||||
nextIndex = 0
|
||||
} else if (event.key === 'End') {
|
||||
nextIndex = lastIndex
|
||||
}
|
||||
|
||||
if (nextIndex === undefined) return
|
||||
|
||||
event.preventDefault()
|
||||
selectTabAtIndex(nextIndex)
|
||||
}
|
||||
</script>
|
||||
21
packages/ui/src/components/base/TagIcon.vue
Normal file
21
packages/ui/src/components/base/TagIcon.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { getCategoryIcon, getLoaderIcon, getTagIcon } from '@modrinth/assets'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tag: string
|
||||
enforceType?: 'loader' | 'category'
|
||||
}>()
|
||||
|
||||
const icon = computed(() =>
|
||||
props.enforceType === 'loader'
|
||||
? getLoaderIcon(props.tag)
|
||||
: props.enforceType === 'category'
|
||||
? getCategoryIcon(props.tag)
|
||||
: getTagIcon(props.tag),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="icon" v-if="icon" />
|
||||
</template>
|
||||
20
packages/ui/src/components/base/TagItem.vue
Normal file
20
packages/ui/src/components/base/TagItem.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<button
|
||||
v-if="action"
|
||||
:class="[baseClass, 'transition-transform active:scale-[0.95] cursor-pointer hover:underline']"
|
||||
@click="action"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
<div v-else :class="baseClass">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
action?: (event: MouseEvent) => void
|
||||
}>()
|
||||
|
||||
const baseClass =
|
||||
'bg-[--_bg-color,var(--color-button-bg)] text-nowrap border-[--_bg-color,var(--surface-5)] border-[1px] border-solid px-2 py-1 leading-none rounded-full font-normal text-sm inline-flex items-center gap-1 text-[--_color,var(--color-secondary)] [&>svg]:shrink-0 [&>svg]:h-4 [&>svg]:w-4'
|
||||
</script>
|
||||
31
packages/ui/src/components/base/TagTagItem.vue
Normal file
31
packages/ui/src/components/base/TagTagItem.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<TagItem :action="action" :style="isLoader ? `--_color: var(--color-platform-${tag})` : ''">
|
||||
<component :is="icon" v-if="icon" />
|
||||
<FormattedTag :tag="tag" />
|
||||
</TagItem>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getTagIcon } from '@modrinth/assets'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { getTagMessage } from '../../utils'
|
||||
import FormattedTag from './FormattedTag.vue'
|
||||
import TagItem from './TagItem.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tag: string
|
||||
hideNonLoaderIcon?: boolean
|
||||
action?: (event: MouseEvent) => void
|
||||
}>(),
|
||||
{
|
||||
hideNonLoaderIcon: false,
|
||||
action: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const icon = computed(() =>
|
||||
props.hideNonLoaderIcon && !isLoader.value ? undefined : getTagIcon(props.tag),
|
||||
)
|
||||
const isLoader = computed(() => getTagMessage(props.tag, 'loader') !== undefined)
|
||||
</script>
|
||||
436
packages/ui/src/components/base/TeleportOverflowMenu.vue
Normal file
436
packages/ui/src/components/base/TeleportOverflowMenu.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<div data-pyro-telepopover-wrapper class="relative">
|
||||
<button
|
||||
ref="triggerRef"
|
||||
class="teleport-overflow-menu-trigger"
|
||||
:class="btnClass"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-haspopup="true"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
<Teleport to="#teleports">
|
||||
<Transition
|
||||
enter-active-class="transition duration-125 ease-out"
|
||||
enter-from-class="transform scale-75 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-125 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-75 opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="menuRef"
|
||||
data-pyro-telepopover-root
|
||||
class="fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
|
||||
:style="menuStyle"
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
@mousedown.stop
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<template
|
||||
v-for="(option, index) in filteredOptions"
|
||||
:key="isDivider(option) ? `divider-${index}` : option.id"
|
||||
>
|
||||
<div v-if="isDivider(option)" class="h-px w-full bg-surface-5"></div>
|
||||
<ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
|
||||
<button
|
||||
v-if="typeof option.action === 'function'"
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) menuItemsRef[index] = el as HTMLElement
|
||||
}
|
||||
"
|
||||
v-tooltip="option.tooltip"
|
||||
:disabled="option.disabled"
|
||||
class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
|
||||
:aria-selected="index === selectedIndex"
|
||||
:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
|
||||
@click="handleItemClick(option, index)"
|
||||
@focus="selectedIndex = index"
|
||||
@mouseover="handleMouseOver(index)"
|
||||
>
|
||||
<slot :name="option.id">
|
||||
<component :is="option.icon" v-if="option.icon" class="size-5" />
|
||||
{{ option.label ?? option.id }}
|
||||
</slot>
|
||||
</button>
|
||||
<AutoLink
|
||||
v-else-if="typeof option.action === 'string'"
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) menuItemsRef[index] = el as HTMLElement
|
||||
}
|
||||
"
|
||||
:to="option.action"
|
||||
class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
|
||||
:aria-selected="index === selectedIndex"
|
||||
:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
|
||||
@click="handleItemClick(option, index)"
|
||||
@focus="selectedIndex = index"
|
||||
@mouseover="handleMouseOver(index)"
|
||||
>
|
||||
<slot :name="option.id">
|
||||
<component :is="option.icon" v-if="option.icon" class="size-5" />
|
||||
{{ option.label ?? option.id }}
|
||||
</slot>
|
||||
</AutoLink>
|
||||
<span v-else>
|
||||
<slot :name="option.id">
|
||||
<component :is="option.icon" v-if="option.icon" class="size-5" />
|
||||
{{ option.label ?? option.id }}
|
||||
</slot>
|
||||
</span>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AutoLink, ButtonStyled } from '@modrinth/ui'
|
||||
import { onClickOutside, useElementHover } from '@vueuse/core'
|
||||
import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
interface Option {
|
||||
id: string
|
||||
label?: string
|
||||
icon?: Component
|
||||
action?: (() => void) | string
|
||||
shown?: boolean
|
||||
color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
|
||||
disabled?: boolean
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
type Divider = {
|
||||
divider?: boolean
|
||||
shown?: boolean
|
||||
}
|
||||
|
||||
type Item = Option | Divider
|
||||
|
||||
function isDivider(item: Item): item is Divider {
|
||||
return (item as Divider).divider
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
options: Item[]
|
||||
hoverable?: boolean
|
||||
btnClass?: string | string[] | Record<string, boolean>
|
||||
}>(),
|
||||
{
|
||||
hoverable: false,
|
||||
btnClass: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [option: Option]
|
||||
open: []
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const selectedIndex = ref(-1)
|
||||
const menuRef = ref<HTMLElement | null>(null)
|
||||
const triggerRef = ref<HTMLElement | null>(null)
|
||||
const isMouseDown = ref(false)
|
||||
const typeAheadBuffer = ref('')
|
||||
const typeAheadTimeout = ref<number | null>(null)
|
||||
const menuItemsRef = ref<HTMLElement[]>([])
|
||||
|
||||
const hoveringTrigger = useElementHover(triggerRef)
|
||||
const hoveringMenu = useElementHover(menuRef)
|
||||
|
||||
const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value)
|
||||
|
||||
const menuStyle = ref({
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
})
|
||||
|
||||
const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false))
|
||||
|
||||
const calculateMenuPosition = () => {
|
||||
if (!triggerRef.value || !menuRef.value) return { top: '0px', left: '0px' }
|
||||
|
||||
const triggerRect = triggerRef.value.getBoundingClientRect()
|
||||
const menuWidth = menuRef.value.offsetWidth
|
||||
const menuHeight = menuRef.value.offsetHeight
|
||||
const margin = 8
|
||||
|
||||
let top: number
|
||||
let left: number
|
||||
|
||||
if (triggerRect.bottom + menuHeight + margin <= window.innerHeight) {
|
||||
top = triggerRect.bottom + margin
|
||||
} else if (triggerRect.top - menuHeight - margin >= 0) {
|
||||
top = triggerRect.top - menuHeight - margin
|
||||
} else {
|
||||
top = Math.max(margin, window.innerHeight - menuHeight - margin)
|
||||
}
|
||||
|
||||
if (triggerRect.right - menuWidth >= margin) {
|
||||
left = triggerRect.right - menuWidth
|
||||
} else {
|
||||
left = Math.max(margin, triggerRect.left)
|
||||
}
|
||||
|
||||
return {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`,
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMenu = (event: MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
if (!props.hoverable) {
|
||||
if (isOpen.value) {
|
||||
closeMenu()
|
||||
} else {
|
||||
openMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const openMenu = () => {
|
||||
isOpen.value = true
|
||||
emit('open')
|
||||
disableBodyScroll()
|
||||
nextTick(() => {
|
||||
menuStyle.value = calculateMenuPosition()
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
focusFirstMenuItem()
|
||||
})
|
||||
}
|
||||
|
||||
const closeMenu = () => {
|
||||
isOpen.value = false
|
||||
selectedIndex.value = -1
|
||||
enableBodyScroll()
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
}
|
||||
|
||||
const selectOption = (option: Option) => {
|
||||
emit('select', option)
|
||||
if (typeof option.action === 'function') {
|
||||
option.action()
|
||||
}
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
const handleMouseDown = (event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
isMouseDown.value = true
|
||||
}
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (props.hoverable) {
|
||||
openMenu()
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (props.hoverable) {
|
||||
setTimeout(() => {
|
||||
if (!hovering.value) {
|
||||
closeMenu()
|
||||
}
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !isMouseDown.value) return
|
||||
|
||||
const menuRect = menuRef.value?.getBoundingClientRect()
|
||||
if (!menuRect) return
|
||||
|
||||
const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]')
|
||||
if (!menuItems) return
|
||||
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect()
|
||||
if (
|
||||
event.clientX >= itemRect.left &&
|
||||
event.clientX <= itemRect.right &&
|
||||
event.clientY >= itemRect.top &&
|
||||
event.clientY <= itemRect.bottom
|
||||
) {
|
||||
selectedIndex.value = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemClick = (option: Option, index: number) => {
|
||||
if (option.disabled) return
|
||||
selectedIndex.value = index
|
||||
selectOption(option)
|
||||
}
|
||||
|
||||
const handleMouseOver = (index: number) => {
|
||||
selectedIndex.value = index
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
}
|
||||
|
||||
const disableBodyScroll = () => {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
const enableBodyScroll = () => {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
|
||||
const focusFirstMenuItem = () => {
|
||||
if (menuItemsRef.value.length > 0) {
|
||||
menuItemsRef.value[0]?.focus?.()
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (!isOpen.value) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
openMenu()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
break
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
selectedIndex.value =
|
||||
(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
break
|
||||
case 'Home':
|
||||
event.preventDefault()
|
||||
if (menuItemsRef.value.length > 0) {
|
||||
selectedIndex.value = 0
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
}
|
||||
break
|
||||
case 'End':
|
||||
event.preventDefault()
|
||||
if (menuItemsRef.value.length > 0) {
|
||||
selectedIndex.value = filteredOptions.value.length - 1
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
}
|
||||
break
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
event.preventDefault()
|
||||
if (selectedIndex.value >= 0) {
|
||||
const option = filteredOptions.value[selectedIndex.value]
|
||||
if (isDivider(option)) break
|
||||
selectOption(option)
|
||||
}
|
||||
break
|
||||
case 'Escape':
|
||||
event.preventDefault()
|
||||
closeMenu()
|
||||
triggerRef.value?.focus?.()
|
||||
break
|
||||
case 'Tab':
|
||||
event.preventDefault()
|
||||
if (menuItemsRef.value.length > 0) {
|
||||
if (event.shiftKey) {
|
||||
selectedIndex.value =
|
||||
(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
|
||||
} else {
|
||||
selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
|
||||
}
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
}
|
||||
break
|
||||
default:
|
||||
if (event.key.length === 1) {
|
||||
typeAheadBuffer.value += event.key.toLowerCase()
|
||||
const matchIndex = filteredOptions.value.findIndex(
|
||||
(option) =>
|
||||
!isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
|
||||
)
|
||||
if (matchIndex !== -1) {
|
||||
selectedIndex.value = matchIndex
|
||||
menuItemsRef.value[selectedIndex.value]?.focus?.()
|
||||
}
|
||||
if (typeAheadTimeout.value) {
|
||||
clearTimeout(typeAheadTimeout.value)
|
||||
}
|
||||
typeAheadTimeout.value = setTimeout(() => {
|
||||
typeAheadBuffer.value = ''
|
||||
}, 1000) as unknown as number
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleResizeOrScroll = () => {
|
||||
if (isOpen.value) {
|
||||
menuStyle.value = calculateMenuPosition()
|
||||
}
|
||||
}
|
||||
|
||||
const throttle = <T extends unknown[]>(
|
||||
func: (...args: T) => void,
|
||||
limit: number,
|
||||
): ((...args: T) => void) => {
|
||||
let inThrottle: boolean
|
||||
return function (...args: T) {
|
||||
if (!inThrottle) {
|
||||
func(...args)
|
||||
inThrottle = true
|
||||
setTimeout(() => (inThrottle = false), limit)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100)
|
||||
|
||||
onMounted(() => {
|
||||
triggerRef.value?.addEventListener('keydown', handleKeydown)
|
||||
window.addEventListener('resize', throttledHandleResizeOrScroll)
|
||||
window.addEventListener('scroll', throttledHandleResizeOrScroll)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
triggerRef.value?.removeEventListener('keydown', handleKeydown)
|
||||
window.removeEventListener('resize', throttledHandleResizeOrScroll)
|
||||
window.removeEventListener('scroll', throttledHandleResizeOrScroll)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
if (typeAheadTimeout.value) {
|
||||
clearTimeout(typeAheadTimeout.value)
|
||||
}
|
||||
enableBodyScroll()
|
||||
})
|
||||
|
||||
watch(isOpen, (newValue) => {
|
||||
if (newValue) {
|
||||
nextTick(() => {
|
||||
menuRef.value?.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
} else {
|
||||
menuRef.value?.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
|
||||
onClickOutside(menuRef, (event) => {
|
||||
if (!triggerRef.value?.contains(event.target as Node)) {
|
||||
closeMenu()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
1090
packages/ui/src/components/base/TimeFramePicker.vue
Normal file
1090
packages/ui/src/components/base/TimeFramePicker.vue
Normal file
File diff suppressed because it is too large
Load Diff
57
packages/ui/src/components/base/Timeline.vue
Normal file
57
packages/ui/src/components/base/Timeline.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
fadeOutStart?: boolean
|
||||
fadeOutEnd?: boolean
|
||||
}>(),
|
||||
{
|
||||
fadeOutStart: false,
|
||||
fadeOutEnd: false,
|
||||
},
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="relative flex flex-col gap-4 pb-6 isolate">
|
||||
<div class="absolute flex h-full w-4 justify-center">
|
||||
<div
|
||||
class="timeline-indicator"
|
||||
:class="{ 'fade-out-start': fadeOutStart, 'fade-out-end': fadeOutEnd }"
|
||||
/>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.timeline-indicator {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--timeline-line-color, var(--color-raised-bg)) 66%,
|
||||
rgba(255, 255, 255, 0) 0%
|
||||
);
|
||||
background-size: 100% 30px;
|
||||
background-repeat: repeat-y;
|
||||
margin-top: 1rem;
|
||||
|
||||
height: calc(100% - 1rem);
|
||||
width: 4px;
|
||||
z-index: -1;
|
||||
|
||||
&.fade-out-start {
|
||||
mask-image: linear-gradient(to top, black calc(100% - 15rem), transparent 100%);
|
||||
}
|
||||
|
||||
&.fade-out-end {
|
||||
mask-image: linear-gradient(to bottom, black calc(100% - 15rem), transparent 100%);
|
||||
}
|
||||
|
||||
&.fade-out-start.fade-out-end {
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
black,
|
||||
black calc(100% - 8rem),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
packages/ui/src/components/base/Toggle.vue
Normal file
49
packages/ui/src/components/base/Toggle.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<button
|
||||
:id="id"
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="modelValue"
|
||||
:disabled="disabled"
|
||||
class="group inline-flex shrink-0 touch-manipulation items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border-none"
|
||||
:class="[
|
||||
small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
|
||||
modelValue ? 'bg-brand' : 'bg-button-bg',
|
||||
disabled ? 'opacity-50 cursor-not-allowed' : '',
|
||||
]"
|
||||
@click="toggle"
|
||||
>
|
||||
<span
|
||||
class="rounded-full transition-all duration-200"
|
||||
:class="[
|
||||
small ? 'w-3 h-3' : 'w-4 h-4',
|
||||
modelValue
|
||||
? small
|
||||
? 'translate-x-[20px] bg-black/90'
|
||||
: 'translate-x-[24px] bg-black/90'
|
||||
: 'bg-gray',
|
||||
disabled
|
||||
? ''
|
||||
: small
|
||||
? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
|
||||
: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
disabled?: boolean
|
||||
small?: boolean
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>()
|
||||
|
||||
function toggle() {
|
||||
if (!props.disabled) {
|
||||
modelValue.value = !modelValue.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
69
packages/ui/src/components/base/UnsavedChangesPopup.vue
Normal file
69
packages/ui/src/components/base/UnsavedChangesPopup.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<script setup lang="ts" generic="T">
|
||||
import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
|
||||
import { isEqual } from 'es-toolkit'
|
||||
import { type Component, computed } from 'vue'
|
||||
|
||||
import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
|
||||
import { commonMessages } from '../../utils'
|
||||
import ButtonStyled from './ButtonStyled.vue'
|
||||
import FloatingActionBar from './FloatingActionBar.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'reset' | 'save', event: MouseEvent): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
canReset?: boolean
|
||||
original: T
|
||||
modified: Partial<T>
|
||||
saving?: boolean
|
||||
text?: MessageDescriptor | string
|
||||
saveLabel?: MessageDescriptor | string
|
||||
savingLabel?: MessageDescriptor | string
|
||||
saveIcon?: Component
|
||||
}>(),
|
||||
{
|
||||
canReset: true,
|
||||
saving: false,
|
||||
text: () =>
|
||||
defineMessage({
|
||||
id: 'ui.component.unsaved-changes-popup.body',
|
||||
defaultMessage: 'You have unsaved changes.',
|
||||
}),
|
||||
saveLabel: () => commonMessages.saveButton,
|
||||
savingLabel: () => commonMessages.savingButton,
|
||||
saveIcon: SaveIcon,
|
||||
},
|
||||
)
|
||||
|
||||
const shown = computed(() =>
|
||||
Object.keys(props.modified).some((key) => !isEqual(props.original[key], props.modified[key])),
|
||||
)
|
||||
|
||||
function localizeIfPossible(message: MessageDescriptor | string) {
|
||||
return typeof message === 'string' ? message : formatMessage(message)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FloatingActionBar :shown="shown">
|
||||
<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
|
||||
<div class="ml-auto flex gap-2">
|
||||
<ButtonStyled v-if="canReset" type="transparent">
|
||||
<button :disabled="saving" @click="(e) => emit('reset', e)">
|
||||
<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled color="brand">
|
||||
<button :disabled="saving" @click="(e) => emit('save', e)">
|
||||
<SpinnerIcon v-if="saving" class="animate-spin" />
|
||||
<component :is="saveIcon" v-else />
|
||||
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</div>
|
||||
</FloatingActionBar>
|
||||
</template>
|
||||
35
packages/ui/src/components/base/buttons/Button.vue
Normal file
35
packages/ui/src/components/base/buttons/Button.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import ButtonFrame from './ButtonFrame.vue'
|
||||
import type { ButtonProps } from './types'
|
||||
|
||||
const props = withDefaults(defineProps<ButtonProps>(), {
|
||||
type: 'base',
|
||||
size: 'md',
|
||||
nativeType: 'button',
|
||||
disabled: false,
|
||||
loading: false,
|
||||
})
|
||||
|
||||
const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
|
||||
const element = computed(() => frame.value?.element ?? null)
|
||||
|
||||
defineExpose({ element })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ButtonFrame
|
||||
ref="frame"
|
||||
as="button"
|
||||
:type="props.type"
|
||||
:color="props.color"
|
||||
:size="props.size"
|
||||
:interaction="props.interaction"
|
||||
:native-type="props.nativeType"
|
||||
:disabled="props.disabled || props.loading"
|
||||
:aria-busy="props.loading || undefined"
|
||||
>
|
||||
<slot />
|
||||
</ButtonFrame>
|
||||
</template>
|
||||
173
packages/ui/src/components/base/buttons/ButtonFrame.vue
Normal file
173
packages/ui/src/components/base/buttons/ButtonFrame.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
import type { Component, CSSProperties } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import type {
|
||||
ButtonColor,
|
||||
ButtonInteraction,
|
||||
ButtonNativeType,
|
||||
ButtonSize,
|
||||
ButtonType,
|
||||
} from './types'
|
||||
|
||||
const baseClasses = [
|
||||
// Base
|
||||
'relative inline-flex min-w-0 shrink-0 items-center justify-center',
|
||||
'whitespace-nowrap border-0 no-underline',
|
||||
// Interactions
|
||||
'touch-manipulation cursor-pointer select-none transition-[background-color,color,box-shadow,filter,opacity,transform] duration-150 ease-out',
|
||||
'enabled:active:scale-[0.97]',
|
||||
// Hovering
|
||||
'[&:not(:disabled):not([aria-disabled=true]):hover]:brightness-[--hover-brightness]',
|
||||
// Accessibility
|
||||
'[&:not(:disabled):not([aria-disabled=true]):focus-visible]:brightness-[--hover-brightness] focus-visible:outline-none [&:not(:disabled):not([aria-disabled=true]):focus-visible]:ring-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:ring-brand-shadow',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'[&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50',
|
||||
].join(' ')
|
||||
|
||||
const sizeClasses: Record<ButtonSize, string> = {
|
||||
xs: 'h-7 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
|
||||
sm: 'h-8 gap-1 rounded-[10px] px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
|
||||
md: 'h-9 gap-1.5 rounded-xl px-2.5 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
|
||||
lg: 'h-10 gap-2 rounded-[14px] px-4 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
|
||||
xl: 'h-12 gap-2 rounded-2xl px-3.5 text-base font-extrabold leading-5 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0',
|
||||
}
|
||||
|
||||
const iconOnlySizeClasses: Record<ButtonSize, string> = {
|
||||
xs: 'min-w-7 w-7 !px-0',
|
||||
sm: 'min-w-8 w-8 !px-0',
|
||||
md: 'min-w-9 w-9 !px-0',
|
||||
lg: 'min-w-10 w-10 !px-0',
|
||||
xl: 'min-w-12 w-12 !px-0',
|
||||
}
|
||||
|
||||
const typeClasses: Record<ButtonType, string> = {
|
||||
base: 'button-frame--base bg-surface-4 text-contrast [&>svg]:text-primary',
|
||||
colored:
|
||||
'button-frame--colored bg-[--button-color] text-[var(--color-accent-contrast)] [&>svg]:text-inherit',
|
||||
'colored-text':
|
||||
'button-frame--colored-text bg-surface-4 text-[--button-color] [&>svg]:text-inherit',
|
||||
outlined:
|
||||
'button-frame--outlined bg-transparent text-[var(--button-color,var(--color-contrast))] [&>svg]:text-[var(--button-color,var(--color-base))]',
|
||||
quiet: 'button-frame--quiet bg-transparent [&>svg]:text-inherit',
|
||||
}
|
||||
|
||||
const interactionClasses: Record<ButtonInteraction, string> = {
|
||||
surface:
|
||||
'[&:not(:disabled):not([aria-disabled=true]):hover]:bg-surface-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:bg-surface-4',
|
||||
filled:
|
||||
'[&:not(:disabled):not([aria-disabled=true]):hover]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):hover]:!text-[var(--color-accent-contrast)] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!text-[var(--color-accent-contrast)]',
|
||||
none: '[&:not(:disabled):not([aria-disabled=true]):hover]:!brightness-100 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!brightness-100',
|
||||
}
|
||||
|
||||
const colorVariables: Record<ButtonColor, string> = {
|
||||
brand: 'var(--color-brand)',
|
||||
red: 'var(--color-red)',
|
||||
orange: 'var(--color-orange)',
|
||||
green: 'var(--color-green)',
|
||||
blue: 'var(--color-blue)',
|
||||
purple: 'var(--color-purple)',
|
||||
medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
as: string | Component
|
||||
type?: ButtonType
|
||||
color?: ButtonColor
|
||||
size?: ButtonSize
|
||||
interaction?: ButtonInteraction
|
||||
iconOnly?: boolean
|
||||
circular?: boolean
|
||||
nativeType?: ButtonNativeType
|
||||
}>(),
|
||||
{
|
||||
type: 'base',
|
||||
size: 'md',
|
||||
interaction: 'surface',
|
||||
iconOnly: false,
|
||||
circular: false,
|
||||
nativeType: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const element = ref<HTMLElement | null>(null)
|
||||
const classes = computed(() => [
|
||||
baseClasses,
|
||||
typeClasses[props.type],
|
||||
props.type === 'quiet' ? interactionClasses[props.interaction] : '',
|
||||
sizeClasses[props.size],
|
||||
props.iconOnly ? iconOnlySizeClasses[props.size] : '',
|
||||
props.circular ? '!rounded-full' : '',
|
||||
])
|
||||
const style = computed((): CSSProperties | undefined => {
|
||||
if ((props.type === 'outlined' || props.type === 'quiet') && !props.color) return undefined
|
||||
if (
|
||||
props.type !== 'colored' &&
|
||||
props.type !== 'colored-text' &&
|
||||
props.type !== 'outlined' &&
|
||||
props.type !== 'quiet'
|
||||
)
|
||||
return undefined
|
||||
|
||||
return {
|
||||
'--button-color': colorVariables[props.color ?? 'brand'],
|
||||
} as CSSProperties
|
||||
})
|
||||
|
||||
defineExpose({ element })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="as"
|
||||
ref="element"
|
||||
data-button
|
||||
:type="props.nativeType"
|
||||
:class="classes"
|
||||
:style="style"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.button-frame--base,
|
||||
.button-frame--colored-text {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px var(--surface-5),
|
||||
0 1px 1px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.button-frame--colored {
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in srgb, var(--button-color) 30%, transparent),
|
||||
0 2px 4px rgba(0, 0, 0, 0.04),
|
||||
0 5px 8px rgba(0, 0, 0, 0.04),
|
||||
0 10px 18px rgba(0, 0, 0, 0.03),
|
||||
0 24px 48px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.button-frame--colored::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.button-frame--outlined {
|
||||
box-shadow: inset 0 0 0 1px var(--button-color, var(--surface-5));
|
||||
}
|
||||
|
||||
.button-frame--quiet {
|
||||
color: var(--button-color, var(--color-base));
|
||||
}
|
||||
</style>
|
||||
58
packages/ui/src/components/base/buttons/IconButton.vue
Normal file
58
packages/ui/src/components/base/buttons/IconButton.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import ButtonFrame from './ButtonFrame.vue'
|
||||
import type {
|
||||
ButtonColor,
|
||||
ButtonInteraction,
|
||||
ButtonNativeType,
|
||||
ButtonSize,
|
||||
ButtonType,
|
||||
} from './types'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
label: string
|
||||
type?: ButtonType
|
||||
color?: ButtonColor
|
||||
size?: ButtonSize
|
||||
interaction?: ButtonInteraction
|
||||
nativeType?: ButtonNativeType
|
||||
circular?: boolean
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
}>(),
|
||||
{
|
||||
type: 'base',
|
||||
size: 'md',
|
||||
nativeType: 'button',
|
||||
circular: true,
|
||||
disabled: false,
|
||||
loading: false,
|
||||
},
|
||||
)
|
||||
|
||||
const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
|
||||
const element = computed(() => frame.value?.element ?? null)
|
||||
|
||||
defineExpose({ element })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ButtonFrame
|
||||
ref="frame"
|
||||
as="button"
|
||||
icon-only
|
||||
:circular="props.circular"
|
||||
:type="props.type"
|
||||
:color="props.color"
|
||||
:size="props.size"
|
||||
:interaction="props.interaction"
|
||||
:native-type="props.nativeType"
|
||||
:disabled="props.disabled || props.loading"
|
||||
:aria-label="props.label"
|
||||
:aria-busy="props.loading || undefined"
|
||||
>
|
||||
<slot />
|
||||
</ButtonFrame>
|
||||
</template>
|
||||
57
packages/ui/src/components/base/buttons/types.ts
Normal file
57
packages/ui/src/components/base/buttons/types.ts
Normal file
@ -0,0 +1,57 @@
|
||||
export type ButtonType = 'base' | 'colored' | 'colored-text' | 'outlined' | 'quiet'
|
||||
|
||||
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
|
||||
export type ButtonInteraction = 'surface' | 'filled' | 'none'
|
||||
|
||||
// TODO: Standardized color string enum props across @modrinth/ui
|
||||
export type ButtonColor =
|
||||
| 'brand'
|
||||
| 'red'
|
||||
| 'orange'
|
||||
| 'green'
|
||||
| 'blue'
|
||||
| 'purple'
|
||||
| 'medal_promotion'
|
||||
|
||||
export type ButtonVisualProps = {
|
||||
size?: ButtonSize
|
||||
interaction?: ButtonInteraction
|
||||
} & (
|
||||
| {
|
||||
type?: 'base'
|
||||
color?: never
|
||||
}
|
||||
| {
|
||||
type: 'outlined'
|
||||
color?: ButtonColor
|
||||
}
|
||||
| {
|
||||
type: 'colored'
|
||||
color?: ButtonColor
|
||||
}
|
||||
| {
|
||||
type: 'colored-text'
|
||||
color?: ButtonColor
|
||||
}
|
||||
| {
|
||||
type: 'quiet'
|
||||
color?: ButtonColor
|
||||
}
|
||||
)
|
||||
|
||||
export type ButtonNativeType = 'button' | 'submit' | 'reset'
|
||||
|
||||
export interface ButtonProps {
|
||||
type?: ButtonType
|
||||
color?: ButtonColor
|
||||
size?: ButtonSize
|
||||
interaction?: ButtonInteraction
|
||||
nativeType?: ButtonNativeType
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export interface ButtonElementHandle {
|
||||
element: HTMLElement | null
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user