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

27
apps/frontend/src/components/ui/create/CollectionCreateModal.vue
View File

@@ -9,11 +9,10 @@
<span class="text-brand-red">*</span>
</span>
</label>
<input
<StyledInput
id="name"
v-model="name"
type="text"
maxlength="64"
:maxlength="64"
:placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off"
:disabled="hasHitLimit"
@@ -26,15 +25,14 @@
}}</span>
<span>{{ formatMessage(messages.summaryDescription) }}</span>
</label>
<div class="textarea-wrapper">
<textarea
id="additional-information"
v-model="description"
maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<StyledInput
id="additional-information"
v-model="description"
multiline
:maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<p class="m-0">
{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
@@ -64,6 +62,7 @@ import {
defineMessages,
injectNotificationManager,
NewModal,
StyledInput,
useVIntl,
} from '@modrinth/ui'
@@ -172,10 +171,6 @@ defineExpose({
width: 100%;
}
textarea {
min-height: 5rem;
}
.input-group {
margin-top: var(--gap-md);
}

36
apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
View File

@@ -9,15 +9,14 @@
<span class="text-brand-red">*</span>
</span>
</label>
<input
<StyledInput
id="name"
v-model="name"
type="text"
maxlength="64"
:maxlength="64"
:placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off"
:disabled="hasHitLimit"
@input="updateSlug"
@update:model-value="updateSlug"
/>
</div>
<div class="flex flex-col gap-2">
@@ -29,14 +28,13 @@
</label>
<div class="text-input-wrapper">
<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
<input
<StyledInput
id="slug"
v-model="slug"
type="text"
maxlength="64"
:maxlength="64"
autocomplete="off"
:disabled="hasHitLimit"
@input="setManualSlug"
@update:model-value="setManualSlug"
/>
</div>
</div>
@@ -48,15 +46,14 @@
</span>
<span>{{ formatMessage(messages.summaryDescription) }}</span>
</label>
<div class="textarea-wrapper">
<textarea
id="additional-information"
v-model="description"
maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<StyledInput
id="additional-information"
v-model="description"
multiline
:maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<p class="m-0">
{{ formatMessage(messages.ownershipInfo) }}
@@ -87,6 +84,7 @@ import {
defineMessages,
injectNotificationManager,
NewModal,
StyledInput,
useVIntl,
} from '@modrinth/ui'
import { ref } from 'vue'
@@ -214,10 +212,6 @@ defineExpose({
width: 100%;
}
textarea {
min-height: 5rem;
}
.input-group {
margin-top: var(--gap-md);
}

32
apps/frontend/src/components/ui/create/ProjectCreateModal.vue
View File

@@ -9,15 +9,14 @@
<span class="text-brand-red">*</span>
</span>
</label>
<input
<StyledInput
id="name"
v-model="name"
type="text"
maxlength="64"
:maxlength="64"
:placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off"
:disabled="hasHitLimit"
@input="updatedName()"
@update:model-value="updatedName()"
/>
</div>
<div class="flex flex-col gap-2">
@@ -29,14 +28,13 @@
</label>
<div class="text-input-wrapper">
<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
<input
<StyledInput
id="slug"
v-model="slug"
type="text"
maxlength="64"
:maxlength="64"
autocomplete="off"
:disabled="hasHitLimit"
@input="manualSlug = true"
@update:model-value="manualSlug = true"
/>
</div>
</div>
@@ -65,15 +63,14 @@
</span>
<span>{{ formatMessage(messages.summaryDescription) }}</span>
</label>
<div class="textarea-wrapper">
<textarea
id="additional-information"
v-model="description"
maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<StyledInput
id="additional-information"
v-model="description"
multiline
:maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
<div class="flex justify-end gap-2">
<ButtonStyled class="w-24">
@@ -102,6 +99,7 @@ import {
defineMessages,
injectNotificationManager,
NewModal,
StyledInput,
useVIntl,
} from '@modrinth/ui'