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

119
packages/ui/src/components/base/MarkdownEditor.vue
View File

@@ -4,29 +4,28 @@
<label class="label" for="insert-link-label">
<span class="label__title">Label</span>
</label>
<div class="iconified-input">
<AlignLeftIcon />
<input id="insert-link-label" v-model="linkText" type="text" placeholder="Enter label..." />
<Button class="r-btn" @click="() => (linkText = '')">
<XIcon />
</Button>
</div>
<StyledInput
id="insert-link-label"
v-model="linkText"
:icon="AlignLeftIcon"
type="text"
placeholder="Enter label..."
clearable
wrapper-class="w-full"
/>
<label class="label" for="insert-link-url">
<span class="label__title">URL<span class="required">*</span></span>
</label>
<div class="iconified-input">
<LinkIcon />
<input
id="insert-link-url"
v-model="linkUrl"
type="text"
placeholder="Enter the link's URL..."
@input="validateURL"
/>
<Button class="r-btn" @click="() => (linkUrl = '')">
<XIcon />
</Button>
</div>
<StyledInput
id="insert-link-url"
v-model="linkUrl"
:icon="LinkIcon"
type="text"
placeholder="Enter the link's URL..."
clearable
wrapper-class="w-full"
@input="validateURL"
/>
<template v-if="linkValidationErrorMessage">
<span class="label">
<span class="label__title">Error</span>
@@ -68,18 +67,15 @@
Describe the image completely as you would to someone who could not see the image.
</span>
</label>
<div class="iconified-input">
<AlignLeftIcon />
<input
id="insert-image-alt"
v-model="linkText"
type="text"
placeholder="Describe the image..."
/>
<Button class="r-btn" @click="() => (linkText = '')">
<XIcon />
</Button>
</div>
<StyledInput
id="insert-image-alt"
v-model="linkText"
:icon="AlignLeftIcon"
type="text"
placeholder="Describe the image..."
clearable
wrapper-class="w-full"
/>
<label class="label" for="insert-link-url">
<span class="label__title">URL<span class="required">*</span></span>
</label>
@@ -101,19 +97,17 @@
<UploadIcon />
</FileInput>
</div>
<div v-if="!props.onImageUpload || imageUploadOption === 'link'" class="iconified-input">
<ImageIcon />
<input
id="insert-link-url"
v-model="linkUrl"
type="text"
placeholder="Enter the image URL..."
@input="validateURL"
/>
<Button class="r-btn" @click="() => (linkUrl = '')">
<XIcon />
</Button>
</div>
<StyledInput
v-if="!props.onImageUpload || imageUploadOption === 'link'"
id="insert-link-url"
v-model="linkUrl"
:icon="ImageIcon"
type="text"
placeholder="Enter the image URL..."
clearable
wrapper-class="w-full"
@input="validateURL"
/>
<template v-if="linkValidationErrorMessage">
<span class="label">
<span class="label__title">Error</span>
@@ -154,19 +148,16 @@
<span class="label__title">YouTube video URL<span class="required">*</span></span>
<span class="label__description"> Enter a valid link to a YouTube video. </span>
</label>
<div class="iconified-input">
<YouTubeIcon />
<input
id="insert-video-url"
v-model="linkUrl"
type="text"
placeholder="Enter YouTube video URL"
@input="validateURL"
/>
<Button class="r-btn" @click="() => (linkUrl = '')">
<XIcon />
</Button>
</div>
<StyledInput
id="insert-video-url"
v-model="linkUrl"
:icon="YouTubeIcon"
type="text"
placeholder="Enter YouTube video URL"
clearable
wrapper-class="w-full"
@input="validateURL"
/>
<template v-if="linkValidationErrorMessage">
<span class="label">
<span class="label__title">Error</span>
@@ -202,7 +193,7 @@
</div>
</div>
</NewModal>
<div class="resizable-textarea-wrapper">
<div class="block grow w-full">
<div class="editor-action-row">
<div class="editor-actions">
<template
@@ -300,6 +291,7 @@ import NewModal from '../modal/NewModal.vue'
import Button from './Button.vue'
import Chips from './Chips.vue'
import FileInput from './FileInput.vue'
import StyledInput from './StyledInput.vue'
import Toggle from './Toggle.vue'
const props = withDefaults(
@@ -894,11 +886,6 @@ function openVideoModal() {
}
}
.resizable-textarea-wrapper textarea {
min-height: 10rem;
width: 100%;
}
.info-blurb {
display: flex;
align-items: center;
@@ -928,10 +915,6 @@ function openVideoModal() {
.modal-insert {
padding: var(--gap-lg);
.iconified-input {
width: 100%;
}
.label {
margin-block: var(--gap-lg) var(--gap-sm);
display: block;