MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate all input fields to StyledInput (#5306)

Browse Source 
* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup
This commit is contained in:
Calum H.
2026-02-09 14:57:31 +00:00
committed by GitHub
parent 90438a1ad5
commit 37eac92329
108 changed files with 1670 additions and 1479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/frontend/src/pages/admin/affiliates.vue
View File

@@ -19,20 +19,14 @@
>
<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliate links</h1>
<div class="flex items-center gap-2">
<div class="iconified-input">
<SearchIcon aria-hidden="true" />
<input
v-model="filterQuery"
class="card-shadow"
autocomplete="off"
spellcheck="false"
type="text"
:placeholder="`Search affiliates...`"
/>
<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
<XIcon />
</Button>
</div>
<StyledInput
v-model="filterQuery"
:icon="SearchIcon"
type="text"
autocomplete="off"
placeholder="Search affiliates..."
clearable
/>
<ButtonStyled color="brand">
<button @click="createModal?.show">
<PlusIcon />
@@ -88,17 +82,17 @@
</div>
</template>
<script setup lang="ts">
import { PlusIcon, SearchIcon, XCircleIcon, XIcon } from '@modrinth/assets'
import { PlusIcon, SearchIcon, XCircleIcon } from '@modrinth/assets'
import {
Accordion,
Admonition,
AffiliateLinkCard,
AffiliateLinkCreateModal,
Avatar,
Button,
ButtonStyled,
ConfirmModal,
injectNotificationManager,
StyledInput,
} from '@modrinth/ui'
import type { AffiliateLink, User } from '@modrinth/utils'

5
apps/frontend/src/pages/admin/billing/[id].vue
View File

@@ -30,7 +30,7 @@
{{ selectedCharge.net }})
</span>
</label>
<input id="amount" v-model="refundAmount" type="number" autocomplete="off" />
<StyledInput id="amount" v-model="refundAmount" type="number" autocomplete="off" />
</div>
<div class="flex flex-col gap-2">
<label for="unprovision" class="flex flex-col gap-1">
@@ -107,7 +107,7 @@
<span class="text-lg font-semibold text-contrast">Days to credit</span>
<span>Enter the number of days to add to the next due date.</span>
</label>
<input id="days" v-model.number="creditDays" type="number" min="1" autocomplete="off" />
<StyledInput id="days" v-model="creditDays" type="number" :min="1" autocomplete="off" />
</div>
<div class="flex flex-col gap-2">
<label for="sendEmail" class="flex flex-col gap-1">
@@ -330,6 +330,7 @@ import {
DropdownSelect,
injectNotificationManager,
NewModal,
StyledInput,
Toggle,
useRelativeTime,
useVIntl,

22
apps/frontend/src/pages/admin/docs.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
import { ButtonStyled, Card } from '@modrinth/ui'
import { ButtonStyled, Card, StyledInput } from '@modrinth/ui'
import { computed, onMounted, ref } from 'vue'
import docs from '~/templates/docs'
@@ -51,18 +51,14 @@ onMounted(() => {
<div class="normal-page__content">
<Card class="mb-6 flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-3">
<div class="relative">
<SearchIcon
class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-secondary"
/>
<input
id="doc-search"
v-model="query"
type="text"
placeholder="Search templates..."
class="w-72 rounded-lg border border-divider bg-bg px-7 py-2 text-sm text-primary placeholder-secondary focus:border-green focus:outline-none"
/>
</div>
<StyledInput
id="doc-search"
v-model="query"
type="search"
:icon="SearchIcon"
placeholder="Search templates..."
wrapper-class="w-72"
/>
<ButtonStyled color="brand">
<button :disabled="filtered.length === 0" @click="openAll">

22
apps/frontend/src/pages/admin/emails.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
import { ButtonStyled, Card } from '@modrinth/ui'
import { ButtonStyled, Card, StyledInput } from '@modrinth/ui'
import { computed, onMounted, ref } from 'vue'
import emails from '~/templates/emails'
@@ -51,18 +51,14 @@ onMounted(() => {
<div class="normal-page__content">
<Card class="mb-6 flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-3">
<div class="relative">
<SearchIcon
class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-secondary"
/>
<input
id="email-search"
v-model="query"
type="text"
placeholder="Search templates..."
class="w-72 rounded-lg border border-divider bg-bg px-7 py-2 text-sm text-primary placeholder-secondary focus:border-green focus:outline-none"
/>
</div>
<StyledInput
id="email-search"
v-model="query"
type="search"
:icon="SearchIcon"
placeholder="Search templates..."
wrapper-class="w-72"
/>
<ButtonStyled color="brand">
<button :disabled="filtered.length === 0" @click="openAll">

21
apps/frontend/src/pages/admin/servers/notices.vue
View File

@@ -24,11 +24,10 @@
<label for="notice-title" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Title </span>
</label>
<input
<StyledInput
id="notice-title"
v-model="newNoticeTitle"
placeholder="E.g. Maintenance"
type="text"
autocomplete="off"
/>
</div>
@@ -39,17 +38,20 @@
<span class="text-brand-red">*</span>
</span>
</label>
<input
<StyledInput
v-if="newNoticeSurvey"
id="notice-message"
v-model="newNoticeMessage"
placeholder="E.g. rXGtq2"
type="text"
autocomplete="off"
/>
<div v-else class="textarea-wrapper h-32">
<textarea id="notice-message" v-model="newNoticeMessage" />
</div>
<StyledInput
v-else
id="notice-message"
v-model="newNoticeMessage"
multiline
wrapper-class="h-32"
/>
</div>
<div v-if="!newNoticeSurvey" class="flex items-center justify-between gap-2">
<label for="dismissable-toggle" class="flex flex-col gap-1">
@@ -63,7 +65,7 @@
<span class="text-lg font-semibold text-contrast"> Announcement date </span>
<span>Leave blank for notice to be available immediately.</span>
</label>
<input
<StyledInput
id="scheduled-date"
v-model="newNoticeScheduledDate"
type="datetime-local"
@@ -75,7 +77,7 @@
<span class="text-lg font-semibold text-contrast"> Expiration date </span>
<span>The notice will automatically be deleted after this date.</span>
</label>
<input
<StyledInput
id="expiration-date"
v-model="newNoticeExpiresDate"
type="datetime-local"
@@ -271,6 +273,7 @@ import {
injectNotificationManager,
NewModal,
ServerNotice,
StyledInput,
TagItem,
Toggle,
useRelativeTime,

6
apps/frontend/src/pages/admin/user_email.vue
View File

@@ -10,11 +10,11 @@
<span class="text-brand-red">*</span>
</span>
</label>
<input
<StyledInput
id="name"
v-model="userEmail"
type="email"
maxlength="64"
:maxlength="64"
:placeholder="`Enter user email...`"
autocomplete="off"
/>
@@ -33,7 +33,7 @@
</template>
<script setup lang="ts">
import { MailIcon } from '@modrinth/assets'
import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
const { addNotification } = injectNotificationManager()