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

12
apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
View File

@@ -41,17 +41,14 @@
<div class="sticky top-0 z-20 -mt-3 flex items-center justify-between bg-bg py-3">
<div class="flex w-full flex-col-reverse items-center gap-2 sm:flex-row">
<div class="flex w-full items-center gap-2">
<div class="relative flex-1 text-sm">
<div class="flex-1 text-sm">
<label class="sr-only" for="search">Search</label>
<SearchIcon
class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
aria-hidden="true"
/>
<input
<StyledInput
id="search"
v-model="searchInput"
class="!h-9 !min-h-0 w-full border-[1px] border-solid border-button-border pl-9"
wrapper-class="w-full"
type="search"
:icon="SearchIcon"
name="search"
autocomplete="off"
:placeholder="`Search ${localMods.length} ${type.toLocaleLowerCase()}s...`"
@@ -356,6 +353,7 @@ import {
ButtonStyled,
injectModrinthClient,
injectNotificationManager,
StyledInput,
Toggle,
} from '@modrinth/ui'
import type { Mod } from '@modrinth/utils'

20
apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
View File

@@ -8,12 +8,11 @@
<span> This name is only visible on Modrinth.</span>
</label>
<div class="flex flex-col gap-2">
<input
<StyledInput
id="server-name-field"
v-model="serverName"
class="w-full md:w-[50%]"
maxlength="48"
minlength="1"
wrapper-class="w-full md:w-[50%]"
:maxlength="48"
@keyup.enter="!serverName && saveGeneral"
/>
<span v-if="!serverName" class="text-sm text-rose-400">
@@ -42,11 +41,11 @@
<span> Your friends can connect to your server using this URL. </span>
</label>
<div class="flex w-full items-center gap-2 md:w-[60%]">
<input
<StyledInput
id="server-subdomain"
v-model="serverSubdomain"
class="h-[50%] w-[63%]"
maxlength="32"
wrapper-class="h-[50%] w-[63%]"
:maxlength="32"
@keyup.enter="saveGeneral"
/>
.modrinth.gg
@@ -116,7 +115,12 @@
<script setup lang="ts">
import { EditIcon, TransferIcon } from '@modrinth/assets'
import { injectModrinthClient, injectNotificationManager, ServerIcon } from '@modrinth/ui'
import {
injectModrinthClient,
injectNotificationManager,
ServerIcon,
StyledInput,
} from '@modrinth/ui'
import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
import SaveBanner from '~/components/ui/servers/SaveBanner.vue'

23
apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
View File

@@ -3,13 +3,12 @@
<NewModal ref="newAllocationModal" header="New allocation">
<form class="flex flex-col gap-2 md:w-[600px]" @submit.prevent="addNewAllocation">
<label for="new-allocation-name" class="font-semibold text-contrast"> Name </label>
<input
<StyledInput
id="new-allocation-name"
ref="newAllocationInput"
v-model="newAllocationName"
type="text"
class="bg-bg-input w-full rounded-lg p-4"
maxlength="32"
wrapper-class="w-full"
:maxlength="32"
placeholder="e.g. Secondary allocation"
/>
<div class="mb-1 mt-4 flex justify-start gap-4">
@@ -28,13 +27,12 @@
<NewModal ref="editAllocationModal" header="Edit allocation">
<form class="flex flex-col gap-2 md:w-[600px]" @submit.prevent="editAllocation">
<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
<input
<StyledInput
id="edit-allocation-name"
ref="editAllocationInput"
v-model="newAllocationName"
type="text"
class="bg-bg-input w-full rounded-lg p-4"
maxlength="32"
wrapper-class="w-full"
:maxlength="32"
placeholder="e.g. Secondary allocation"
/>
<div class="mb-1 mt-4 flex justify-start gap-4">
@@ -107,13 +105,11 @@
</ButtonStyled>
</div>
<input
<StyledInput
id="user-domain"
v-model="userDomain"
class="w-full md:w-[50%]"
maxlength="64"
minlength="1"
type="text"
wrapper-class="w-full md:w-[50%]"
:maxlength="64"
:placeholder="exampleDomain"
/>
@@ -279,6 +275,7 @@ import {
CopyCode,
injectNotificationManager,
NewModal,
StyledInput,
} from '@modrinth/ui'
import { computed, nextTick, ref } from 'vue'

50
apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
View File

@@ -21,17 +21,14 @@
</div>
</div>
<div class="flex flex-col gap-4 rounded-2xl bg-table-alternateRow p-4">
<div class="relative w-full text-sm">
<div class="w-full text-sm">
<label for="search-server-properties" class="sr-only">Search server properties</label>
<SearchIcon
class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
<input
<StyledInput
id="search-server-properties"
v-model="searchInput"
class="w-full pl-9"
wrapper-class="w-full"
type="search"
:icon="SearchIcon"
name="search"
autocomplete="off"
placeholder="Search server properties..."
@@ -72,41 +69,44 @@
v-else-if="typeof property === 'number' && index !== 'level-seed' && index !== 'seed'"
class="mt-2 w-full sm:w-[320px]"
>
<input
<StyledInput
:id="`server-property-${index}`"
v-model.number="liveProperties[index]"
:model-value="liveProperties[index]"
type="number"
class="w-full border p-2"
wrapper-class="w-full"
:aria-labelledby="`property-label-${index}`"
@update:model-value="liveProperties[index] = $event"
/>
</div>
<div
v-else-if="index === 'level-seed' || index === 'seed'"
class="mt-2 w-full sm:w-[320px]"
>
<input
<StyledInput
:id="`server-property-${index}`"
v-model="liveProperties[index]"
type="text"
class="w-full rounded-xl border p-2"
:model-value="liveProperties[index]"
wrapper-class="w-full"
:aria-labelledby="`property-label-${index}`"
@update:model-value="liveProperties[index] = $event"
/>
</div>
<div v-else-if="isComplexProperty(property)" class="mt-2 w-full sm:w-[320px]">
<textarea
<StyledInput
:id="`server-property-${index}`"
v-model="liveProperties[index]"
class="w-full resize-y rounded-xl border p-2"
multiline
resize="vertical"
input-class="p-2"
:aria-labelledby="`property-label-${index}`"
></textarea>
/>
</div>
<div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
<input
<StyledInput
:id="`server-property-${index}`"
v-model="liveProperties[index]"
type="text"
class="w-full rounded-xl border p-2"
:model-value="liveProperties[index]"
wrapper-class="w-full"
:aria-labelledby="`property-label-${index}`"
@update:model-value="liveProperties[index] = $event"
/>
</div>
</div>
@@ -132,7 +132,13 @@
<script setup lang="ts">
import { EyeIcon, SearchIcon } from '@modrinth/assets'
import { Combobox, injectModrinthClient, injectNotificationManager, Toggle } from '@modrinth/ui'
import {
Combobox,
injectModrinthClient,
injectNotificationManager,
StyledInput,
Toggle,
} from '@modrinth/ui'
import Fuse from 'fuse.js'
import { computed, inject, ref, watch } from 'vue'

14
apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
View File

@@ -51,10 +51,12 @@
</button>
</ButtonStyled>
</div>
<textarea
<StyledInput
id="startup-command-field"
v-model="invocation"
class="min-h-[270px] w-full resize-y font-[family-name:var(--mono-font)]"
multiline
resize="vertical"
input-class="min-h-[270px] font-[family-name:var(--mono-font)]"
/>
</div>
@@ -108,7 +110,13 @@
<script setup lang="ts">
import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
import { ButtonStyled, Combobox, injectNotificationManager, Toggle } from '@modrinth/ui'
import {
ButtonStyled,
Combobox,
injectNotificationManager,
StyledInput,
Toggle,
} from '@modrinth/ui'
import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'