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

29
apps/frontend/src/components/ui/admin/BatchCreditModal.vue
View File

@@ -20,12 +20,12 @@
<label for="days" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Days to credit </span>
</label>
<input
<StyledInput
id="days"
v-model.number="days"
class="w-32"
v-model="days"
wrapper-class="w-32"
type="number"
min="1"
:min="1"
autocomplete="off"
/>
</div>
@@ -36,11 +36,10 @@
<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
</label>
<div class="flex items-center gap-2">
<input
<StyledInput
id="node-input"
v-model="nodeInput"
class="w-32"
type="text"
wrapper-class="w-32"
autocomplete="off"
/>
<ButtonStyled color="blue" color-fill="text">
@@ -93,14 +92,13 @@
class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
>
<span>Hi {user.name},</span>
<div class="textarea-wrapper">
<textarea
id="message-batch"
v-model="message"
rows="3"
class="w-full overflow-hidden !bg-surface-3"
/>
</div>
<StyledInput
id="message-batch"
v-model="message"
multiline
:rows="3"
input-class="!bg-surface-3"
/>
<span>
To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
Servers subscription.
@@ -137,6 +135,7 @@ import {
Combobox,
injectNotificationManager,
NewModal,
StyledInput,
TagItem,
Toggle,
} from '@modrinth/ui'

54
apps/frontend/src/components/ui/admin/TransferModal.vue
View File

@@ -25,15 +25,14 @@
</span>
<span>Server IDs (one per line or comma-separated.)</span>
</label>
<div class="textarea-wrapper">
<textarea
id="server-ids"
v-model="serverIdsInput"
rows="4"
class="w-full bg-surface-3"
placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
/>
</div>
<StyledInput
id="server-ids"
v-model="serverIdsInput"
multiline
:rows="4"
input-class="bg-surface-3"
placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
/>
<span v-if="parsedServerIds.length" class="text-sm text-secondary">
{{ parsedServerIds.length }} server{{ parsedServerIds.length === 1 ? '' : 's' }} selected
</span>
@@ -49,11 +48,10 @@
<span>Add nodes to transfer (comma or space-separated).</span>
</label>
<div class="flex items-center gap-2">
<input
<StyledInput
id="node-input"
v-model="nodeInput"
class="w-64"
type="text"
wrapper-class="w-64"
autocomplete="off"
placeholder="us-vin200, us-vin201"
@keydown.enter.prevent="addNodes"
@@ -88,11 +86,10 @@
<span class="text-lg font-semibold text-contrast">Tag transferred nodes</span>
<span>Optional tag to add to the transferred nodes.</span>
</label>
<input
<StyledInput
id="tag-nodes"
v-model="tagNodes"
class="max-w-[12rem]"
type="text"
wrapper-class="max-w-[12rem]"
autocomplete="off"
/>
</div>
@@ -117,11 +114,10 @@
<span>Optional preferred node tags for node selection.</span>
</label>
<div class="flex items-center gap-2">
<input
<StyledInput
id="tag-input"
v-model="tagInput"
class="w-40"
type="text"
wrapper-class="w-40"
autocomplete="off"
placeholder="ovh-gen4"
@keydown.enter.prevent="addTag"
@@ -151,11 +147,11 @@
:format-label="(item) => scheduleOptionLabels[item]"
:capitalize="false"
/>
<input
<StyledInput
v-if="scheduleOption === 'later'"
v-model="scheduledDate"
type="datetime-local"
class="mt-2 max-w-[16rem]"
wrapper-class="mt-2 max-w-[16rem]"
autocomplete="off"
/>
</div>
@@ -168,15 +164,14 @@
</span>
<span>Provide a reason for this transfer batch.</span>
</label>
<div class="textarea-wrapper">
<textarea
id="reason"
v-model="reason"
rows="2"
class="w-full bg-surface-3"
placeholder="Node maintenance scheduled"
/>
</div>
<StyledInput
id="reason"
v-model="reason"
multiline
:rows="2"
input-class="bg-surface-3"
placeholder="Node maintenance scheduled"
/>
</div>
<div class="flex gap-2">
@@ -205,6 +200,7 @@ import {
Combobox,
injectNotificationManager,
NewModal,
StyledInput,
TagItem,
Toggle,
} from '@modrinth/ui'