diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue index d9e1c3966b..266c0d566f 100644 --- a/src/client/components/abuse-report-window.vue +++ b/src/client/components/abuse-report-window.vue @@ -10,9 +10,9 @@ </template> <div class="dpvffvvy _monolithic_"> <div class="_section"> - <MkTextarea v-model:value="comment"> - <span>{{ $ts.details }}</span> - <template #desc>{{ $ts.fillAbuseReportDescription }}</template> + <MkTextarea v-model="comment"> + <template #label>{{ $ts.details }}</template> + <template #caption>{{ $ts.fillAbuseReportDescription }}</template> </MkTextarea> </div> <div class="_section"> diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue index a673e827d6..f3611f050e 100644 --- a/src/client/components/dialog.vue +++ b/src/client/components/dialog.vue @@ -14,8 +14,8 @@ </div> <header v-if="title"><Mfm :text="title"/></header> <div class="body" v-if="text"><Mfm :text="text"/></div> - <MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput> - <MkSelect v-if="select" v-model:value="selectedValue" autofocus> + <MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput> + <MkSelect v-if="select" v-model="selectedValue" autofocus> <template v-if="select.items"> <option v-for="item in select.items" :value="item.value">{{ item.text }}</option> </template> diff --git a/src/client/components/forgot-password.vue b/src/client/components/forgot-password.vue index 1f530d7ca2..3b5ad6d6ba 100644 --- a/src/client/components/forgot-password.vue +++ b/src/client/components/forgot-password.vue @@ -9,14 +9,14 @@ <form class="_monolithic_" @submit.prevent="onSubmit" v-if="$instance.enableEmail"> <div class="_section"> - <MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required> - <span>{{ $ts.username }}</span> + <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required> + <template #label>{{ $ts.username }}</template> <template #prefix>@</template> </MkInput> - <MkInput v-model:value="email" type="email" spellcheck="false" required> - <span>{{ $ts.emailAddress }}</span> - <template #desc>{{ $ts._forgotPassword.enterEmail }}</template> + <MkInput v-model="email" type="email" spellcheck="false" required> + <template #label>{{ $ts.emailAddress }}</template> + <template #caption>{{ $ts._forgotPassword.enterEmail }}</template> </MkInput> <MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton> diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue index 432c9a1bb9..78044f0b16 100644 --- a/src/client/components/instance-stats.vue +++ b/src/client/components/instance-stats.vue @@ -1,7 +1,7 @@ <template> <div class="zbcjwnqg" style="margin-top: -8px;"> <div class="selects" style="display: flex;"> - <MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;"> + <MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> <optgroup :label="$ts.federation"> <option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option> <option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option> @@ -24,7 +24,7 @@ <option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option> </optgroup> </MkSelect> - <MkSelect v-model:value="chartSpan" style="margin: 0;"> + <MkSelect v-model="chartSpan" style="margin: 0;"> <option value="hour">{{ $ts.perHour }}</option> <option value="day">{{ $ts.perDay }}</option> </MkSelect> diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue index 5f16c042bf..c33106ae15 100644 --- a/src/client/components/notification-setting-window.vue +++ b/src/client/components/notification-setting-window.vue @@ -11,16 +11,16 @@ <template #header>{{ $ts.notificationSetting }}</template> <div class="_monolithic_"> <div v-if="showGlobalToggle" class="_section"> - <MkSwitch v-model:value="useGlobalSetting"> + <MkSwitch v-model="useGlobalSetting"> {{ $ts.useGlobalSetting }} - <template #desc>{{ $ts.useGlobalSettingDesc }}</template> + <template #caption>{{ $ts.useGlobalSettingDesc }}</template> </MkSwitch> </div> <div v-if="!useGlobalSetting" class="_section"> <MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo> <MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> <MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton> - <MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch> + <MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch> </div> </div> </XModalWindow> diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue index 1970ee62a9..9c4a537e15 100644 --- a/src/client/components/page/page.number-input.vue +++ b/src/client/components/page/page.number-input.vue @@ -1,6 +1,8 @@ <template> <div> - <MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="number">{{ hpml.interpolate(block.text) }}</MkInput> + <MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number"> + <template #label>{{ hpml.interpolate(block.text) }}</template> + </MkInput> </div> </template> diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue index 1dfb506d5f..7b061d8cda 100644 --- a/src/client/components/page/page.post.vue +++ b/src/client/components/page/page.post.vue @@ -1,6 +1,6 @@ <template> <div class="ngbfujlo"> - <MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea> + <MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea> <MkButton class="button" primary @click="post()" :disabled="posting || posted"> <i v-if="posted" class="fas fa-check"></i> <i v-else class="fas fa-paper-plane"></i> diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue index a928c22bee..8818e6cbcf 100644 --- a/src/client/components/page/page.switch.vue +++ b/src/client/components/page/page.switch.vue @@ -1,6 +1,6 @@ <template> <div class="hkcxmtwj"> - <MkSwitch :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch> + <MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch> </div> </template> diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue index 8bf3e1c88e..752d3d7257 100644 --- a/src/client/components/page/page.text-input.vue +++ b/src/client/components/page/page.text-input.vue @@ -1,6 +1,8 @@ <template> <div> - <MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="text">{{ hpml.interpolate(block.text) }}</MkInput> + <MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text"> + <template #label>{{ hpml.interpolate(block.text) }}</template> + </MkInput> </div> </template> diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue index 9951cef2de..e6cf5117f9 100644 --- a/src/client/components/page/page.textarea-input.vue +++ b/src/client/components/page/page.textarea-input.vue @@ -1,6 +1,8 @@ <template> <div> - <MkTextarea :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkTextarea> + <MkTextarea :model-value="value" @update:modelValue="updateValue($event)"> + <template #label>{{ hpml.interpolate(block.text) }}</template> + </MkTextarea> </div> </template> diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue index 612bbe41b9..974c7f2c57 100644 --- a/src/client/components/page/page.textarea.vue +++ b/src/client/components/page/page.textarea.vue @@ -1,5 +1,5 @@ <template> -<MkTextarea :value="text" readonly></MkTextarea> +<MkTextarea :model-value="text" readonly></MkTextarea> </template> <script lang="ts"> diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue index 0ade2c3ba0..dfc198fc1e 100644 --- a/src/client/components/poll-editor.vue +++ b/src/client/components/poll-editor.vue @@ -5,8 +5,8 @@ </p> <ul ref="choices"> <li v-for="(choice, i) in choices" :key="i"> - <MkInput class="input" :value="choice" @update:value="onInput(i, $event)"> - <span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span> + <MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)"> + <template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template> </MkInput> <button @click="remove(i)" class="_button"> <i class="fas fa-times"></i> @@ -16,27 +16,27 @@ <MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton> <MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton> <section> - <MkSwitch v-model:value="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch> + <MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch> <div> - <MkSelect v-model:value="expiration"> + <MkSelect v-model="expiration"> <template #label>{{ $ts._poll.expiration }}</template> <option value="infinite">{{ $ts._poll.infinite }}</option> <option value="at">{{ $ts._poll.at }}</option> <option value="after">{{ $ts._poll.after }}</option> </MkSelect> <section v-if="expiration === 'at'"> - <MkInput v-model:value="atDate" type="date" class="input"> - <span>{{ $ts._poll.deadlineDate }}</span> + <MkInput v-model="atDate" type="date" class="input"> + <template #label>{{ $ts._poll.deadlineDate }}</template> </MkInput> - <MkInput v-model:value="atTime" type="time" class="input"> - <span>{{ $ts._poll.deadlineTime }}</span> + <MkInput v-model="atTime" type="time" class="input"> + <template #label>{{ $ts._poll.deadlineTime }}</template> </MkInput> </section> <section v-if="expiration === 'after'"> - <MkInput v-model:value="after" type="number" class="input"> - <span>{{ $ts._poll.duration }}</span> + <MkInput v-model="after" type="number" class="input"> + <template #label>{{ $ts._poll.duration }}</template> </MkInput> - <MkSelect v-model:value="unit"> + <MkSelect v-model="unit"> <option value="second">{{ $ts._time.second }}</option> <option value="minute">{{ $ts._time.minute }}</option> <option value="hour">{{ $ts._time.hour }}</option> diff --git a/src/client/components/sample.vue b/src/client/components/sample.vue index 70949ea357..53eac0e2e6 100644 --- a/src/client/components/sample.vue +++ b/src/client/components/sample.vue @@ -1,10 +1,10 @@ <template> <div class="_card"> <div class="_content"> - <MkInput v-model:value="text"> - <span>Text</span> + <MkInput v-model="text"> + <template #label>Text</template> </MkInput> - <MkSwitch v-model:value="flag"> + <MkSwitch v-model="flag"> <span>Switch is now {{ flag ? 'on' : 'off' }}</span> </MkSwitch> <div style="margin: 32px 0;"> diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue index f8249ffcd6..0c6cd3440a 100755 --- a/src/client/components/signin.vue +++ b/src/client/components/signin.vue @@ -3,15 +3,15 @@ <div class="auth _section"> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> <div class="normal-signin" v-if="!totpLogin"> - <MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange"> - <span>{{ $ts.username }}</span> + <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange"> + <template #label>{{ $ts.username }}</template> <template #prefix>@</template> <template #suffix>@{{ host }}</template> </MkInput> - <MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required> - <span>{{ $ts.password }}</span> + <MkInput v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required> + <template #label>{{ $ts.password }}</template> <template #prefix><i class="fas fa-lock"></i></template> - <template #desc><button class="_textButton" @click="resetPassword">{{ $ts.forgotPassword }}</button></template> + <template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template> </MkInput> <MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton> </div> @@ -27,12 +27,12 @@ </div> <div class="twofa-group totp-group"> <p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p> - <MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required> - <span>{{ $ts.password }}</span> + <MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required> + <template #label>{{ $ts.password }}</template> <template #prefix><i class="fas fa-lock"></i></template> </MkInput> - <MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required> - <span>{{ $ts.token }}</span> + <MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required> + <template #label>{{ $ts.token }}</template> <template #prefix><i class="fas fa-gavel"></i></template> </MkInput> <MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton> diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue index 671642b291..0cdeb633d8 100644 --- a/src/client/components/signup.vue +++ b/src/client/components/signup.vue @@ -1,39 +1,39 @@ <template> <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()"> <template v-if="meta"> - <MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required> - <span>{{ $ts.invitationCode }}</span> + <MkInput v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required> + <template #label>{{ $ts.invitationCode }}</template> <template #prefix><i class="fas fa-key"></i></template> </MkInput> - <MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername"> - <span>{{ $ts.username }}</span> + <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername"> + <template #label>{{ $ts.username }}</template> <template #prefix>@</template> <template #suffix>@{{ host }}</template> - <template #desc> + <template #caption> <span v-if="usernameState == 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span> - <span v-if="usernameState == 'ok'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span> - <span v-if="usernameState == 'unavailable'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span> - <span v-if="usernameState == 'error'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span> - <span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span> - <span v-if="usernameState == 'min-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span> - <span v-if="usernameState == 'max-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span> + <span v-if="usernameState == 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span> + <span v-if="usernameState == 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span> + <span v-if="usernameState == 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span> + <span v-if="usernameState == 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span> + <span v-if="usernameState == 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span> + <span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span> </template> </MkInput> - <MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword"> - <span>{{ $ts.password }}</span> + <MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword"> + <template #label>{{ $ts.password }}</template> <template #prefix><i class="fas fa-lock"></i></template> - <template #desc> - <p v-if="passwordStrength == 'low'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</p> - <p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</p> - <p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</p> + <template #caption> + <span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span> + <span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span> + <span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span> </template> </MkInput> - <MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype"> - <span>{{ $ts.password }} ({{ $ts.retype }})</span> + <MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype"> + <template #label>{{ $ts.password }} ({{ $ts.retype }})</template> <template #prefix><i class="fas fa-lock"></i></template> - <template #desc> - <p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</p> - <p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</p> + <template #caption> + <span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span> + <span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span> </template> </MkInput> <label v-if="meta.tosUrl" class="tou"> diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue index 87a76931e4..fe61f61efa 100644 --- a/src/client/components/token-generate-window.vue +++ b/src/client/components/token-generate-window.vue @@ -14,13 +14,15 @@ <MkInfo warn>{{ information }}</MkInfo> </div> <div class="_section"> - <MkInput v-model:value="name">{{ $ts.name }}</MkInput> + <MkInput v-model="name"> + <template #label>{{ $ts.name }}</template> + </MkInput> </div> <div class="_section"> <div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div> <MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> <MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton> - <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model:value="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> + <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> </div> </XModalWindow> </template> diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue index 7415d9896b..22dd0fe9a5 100644 --- a/src/client/components/ui/input.vue +++ b/src/client/components/ui/input.vue @@ -1,32 +1,9 @@ <template> -<div class="juejbjww" :class="{ focused, filled, inline, disabled }"> - <div class="icon" ref="icon"><slot name="icon"></slot></div> - <div class="input"> - <span class="label" ref="labelEl"><slot></slot></span> - <span class="title" ref="title"> - <slot name="title"></slot> - <span class="warning" v-if="invalid"><i class="fas fa-exclamation-circle"></i>{{ $refs.input.validationMessage }}</span> - </span> +<div class="matxzzsk"> + <div class="label" @click="focus"><slot name="label"></slot></div> + <div class="input" :class="{ inline, disabled, focused }"> <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div> - <input v-if="debounce" ref="inputEl" - v-debounce="500" - :type="type" - v-model.lazy="v" - :disabled="disabled" - :required="required" - :readonly="readonly" - :placeholder="placeholder" - :pattern="pattern" - :autocomplete="autocomplete" - :spellcheck="spellcheck" - :step="step" - @focus="focused = true" - @blur="focused = false" - @keydown="onKeydown($event)" - @input="onInput" - :list="id" - > - <input v-else ref="inputEl" + <input ref="inputEl" :type="type" v-model="v" :disabled="disabled" @@ -48,23 +25,25 @@ </datalist> <div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div> </div> - <button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button> - <div class="desc _caption"><slot name="desc"></slot></div> + <div class="caption"><slot name="caption"></slot></div> + + <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> </div> </template> <script lang="ts"> import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; -import debounce from 'v-debounce'; -import * as os from '@client/os'; +import MkButton from './button.vue'; +import { debounce } from 'throttle-debounce'; export default defineComponent({ - directives: { - debounce + components: { + MkButton, }, + props: { - value: { - required: false + modelValue: { + required: true }, type: { type: String, @@ -104,9 +83,6 @@ export default defineComponent({ step: { required: false }, - debounce: { - required: false - }, datalist: { type: Array, required: false, @@ -116,15 +92,23 @@ export default defineComponent({ required: false, default: false }, - save: { - type: Function, + debounce: { + type: Boolean, required: false, + default: false + }, + manualSave: { + type: Boolean, + required: false, + default: false }, }, - emits: ['change', 'keydown', 'enter'], + + emits: ['change', 'keydown', 'enter', 'update:modelValue'], + setup(props, context) { - const { value, type, autofocus } = toRefs(props); - const v = ref(value.value); + const { modelValue, type, autofocus } = toRefs(props); + const v = ref(modelValue.value); const id = Math.random().toString(); // TODO: uuid? const focused = ref(false); const changed = ref(false); @@ -133,7 +117,6 @@ export default defineComponent({ const inputEl = ref(null); const prefixEl = ref(null); const suffixEl = ref(null); - const labelEl = ref(null); const focus = () => inputEl.value.focus(); const onInput = (ev) => { @@ -148,15 +131,28 @@ export default defineComponent({ } }; - watch(value, newValue => { + const updated = () => { + changed.value = false; + if (type?.value === 'number') { + context.emit('update:modelValue', parseFloat(v.value)); + } else { + context.emit('update:modelValue', v.value); + } + }; + + const debouncedUpdated = debounce(1000, updated); + + watch(modelValue, newValue => { v.value = newValue; }); watch(v, newValue => { - if (type?.value === 'number') { - context.emit('update:value', parseFloat(newValue)); - } else { - context.emit('update:value', newValue); + if (!props.manualSave) { + if (props.debounce) { + debouncedUpdated(); + } else { + updated(); + } } invalid.value = inputEl.value.validity.badInput; @@ -172,7 +168,6 @@ export default defineComponent({ // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する const clock = setInterval(() => { if (prefixEl.value) { - labelEl.value.style.left = (prefixEl.value.offsetLeft + prefixEl.value.offsetWidth) + 'px'; if (prefixEl.value.offsetWidth) { inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px'; } @@ -200,148 +195,70 @@ export default defineComponent({ inputEl, prefixEl, suffixEl, - labelEl, focus, onInput, onKeydown, + updated, }; }, }); </script> <style lang="scss" scoped> -.juejbjww { - position: relative; - margin: 32px 0; +.matxzzsk { + margin: 1em 0; - &:not(.inline):first-child { - margin-top: 8px; + > .label { + font-size: 0.85em; + padding: 0 0 6px 6px; + font-weight: bold; + user-select: none; } - &:not(.inline):last-child { - margin-bottom: 8px; - } - - > .icon { - position: absolute; - top: 0; - left: 0; - width: 24px; - text-align: center; - line-height: 32px; - - &:not(:empty) + .input { - margin-left: 28px; - } + > .caption { + font-size: 0.8em; + padding: 6px 0 0 6px; + color: var(--fgTransparentWeak); } > .input { + $height: 42px; position: relative; - &:before { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: var(--inputBorder); - } - - &:after { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--accent); - opacity: 0; - transform: scaleX(0.12); - transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - will-change: border opacity transform; - } - - > .label { - position: absolute; - z-index: 1; - top: 0; - left: 0; - pointer-events: none; - transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); - transition-duration: 0.3s; - font-size: 1em; - line-height: 32px; - color: var(--inputLabel); - pointer-events: none; - //will-change transform - transform-origin: top left; - transform: scale(1); - } - - > .title { - position: absolute; - z-index: 1; - top: -17px; - left: 0 !important; - pointer-events: none; - font-size: 1em; - line-height: 32px; - color: var(--inputLabel); - pointer-events: none; - //will-change transform - transform-origin: top left; - transform: scale(.75); - white-space: nowrap; - width: 133%; - overflow: hidden; - text-overflow: ellipsis; - - > .warning { - margin-left: 0.5em; - color: var(--infoWarnFg); - - > svg { - margin-right: 0.1em; - } - } - } - > input { - $height: 32px; + appearance: none; + -webkit-appearance: none; display: block; height: $height; width: 100%; margin: 0; - padding: 0; + padding: 0 12px; font: inherit; font-weight: normal; font-size: 1em; - line-height: $height; - color: var(--inputText); - background: transparent; - border: none; - border-radius: 0; + color: var(--fg); + background: var(--panel); + border: solid 1px var(--inputBorder); + border-radius: 6px; outline: none; box-shadow: none; box-sizing: border-box; - &[type='file'] { - display: none; + &:hover { + border-color: var(--inputBorderHover); } } > .prefix, > .suffix { - display: block; + display: flex; + align-items: center; position: absolute; z-index: 1; top: 0; + padding: 0 12px; font-size: 1em; - line-height: 32px; - color: var(--inputLabel); + height: $height; pointer-events: none; &:empty { @@ -360,67 +277,33 @@ export default defineComponent({ > .prefix { left: 0; - padding-right: 4px; + padding-right: 6px; } > .suffix { right: 0; - padding-left: 4px; - } - } - - > .save { - margin: 6px 0 0 0; - font-size: 0.8em; - } - - > .desc { - margin: 6px 0 0 0; - - &:empty { - display: none; + padding-left: 6px; } - * { + &.inline { + display: inline-block; margin: 0; } - } - &.focused { - > .input { - &:after { - opacity: 1; - transform: scaleX(1); - } - - > .label { - color: var(--accent); + &.focused { + > input { + border-color: var(--accent); + //box-shadow: 0 0 0 4px var(--focus); } } - } - &.focused, - &.filled { - > .input { - > .label { - top: -17px; - left: 0 !important; - transform: scale(0.75); + &.disabled { + opacity: 0.7; + + &, * { + cursor: not-allowed !important; } } } - - &.inline { - display: inline-block; - margin: 0; - } - - &.disabled { - opacity: 0.7; - - &, * { - cursor: not-allowed !important; - } - } } </style> diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue index e78c44fe0d..c38bd7230f 100644 --- a/src/client/components/ui/select.vue +++ b/src/client/components/ui/select.vue @@ -1,185 +1,210 @@ <template> -<div class="eiipwacr" :class="{ focused, disabled, filled, inline }"> - <div class="icon" ref="icon"><slot name="icon"></slot></div> - <div class="input" @click="focus"> - <span class="label" ref="label"><slot name="label"></slot></span> - <div class="prefix" ref="prefix"><slot name="prefix"></slot></div> - <select ref="input" +<div class="vblkjoeq"> + <div class="label" @click="focus"><slot name="label"></slot></div> + <div class="input" :class="{ inline, disabled, focused }"> + <div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div> + <select ref="inputEl" v-model="v" - :required="required" :disabled="disabled" + :required="required" + :readonly="readonly" + :placeholder="placeholder" @focus="focused = true" @blur="focused = false" + @input="onInput" > <slot></slot> </select> - <div class="suffix"> - <slot name="suffix"> - <i class="fas fa-chevron-down"></i> - </slot> - </div> + <div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div> </div> - <div class="text"><slot name="text"></slot></div> + <div class="caption"><slot name="caption"></slot></div> + + <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; +import MkButton from './button.vue'; export default defineComponent({ + components: { + MkButton, + }, + props: { - value: { - required: false + modelValue: { + required: true }, required: { type: Boolean, required: false }, + readonly: { + type: Boolean, + required: false + }, disabled: { type: Boolean, required: false }, + placeholder: { + type: String, + required: false + }, + autofocus: { + type: Boolean, + required: false, + default: false + }, inline: { type: Boolean, required: false, default: false }, + manualSave: { + type: Boolean, + required: false, + default: false + }, }, - data() { + + emits: ['change', 'update:modelValue'], + + setup(props, context) { + const { modelValue, autofocus } = toRefs(props); + const v = ref(modelValue.value); + const focused = ref(false); + const changed = ref(false); + const invalid = ref(false); + const filled = computed(() => v.value !== '' && v.value != null); + const inputEl = ref(null); + const prefixEl = ref(null); + const suffixEl = ref(null); + + const focus = () => inputEl.value.focus(); + const onInput = (ev) => { + changed.value = true; + context.emit('change', ev); + }; + + const updated = () => { + changed.value = false; + context.emit('update:modelValue', v.value); + }; + + watch(modelValue, newValue => { + v.value = newValue; + }); + + watch(v, newValue => { + if (!props.manualSave) { + updated(); + } + + invalid.value = inputEl.value.validity.badInput; + }); + + onMounted(() => { + nextTick(() => { + if (autofocus.value) { + focus(); + } + + // このコンポーネントが作成された時、非表示状態である場合がある + // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する + const clock = setInterval(() => { + if (prefixEl.value) { + if (prefixEl.value.offsetWidth) { + inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px'; + } + } + if (suffixEl.value) { + if (suffixEl.value.offsetWidth) { + inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px'; + } + } + }, 100); + + onUnmounted(() => { + clearInterval(clock); + }); + }); + }); + return { - focused: false, + v, + focused, + invalid, + changed, + filled, + inputEl, + prefixEl, + suffixEl, + focus, + onInput, + updated, }; }, - computed: { - v: { - get() { - return this.value; - }, - set(v) { - this.$emit('update:value', v); - } - }, - filled(): boolean { - return true; - } - }, - mounted() { - if (this.$refs.prefix) { - this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px'; - } - }, - methods: { - focus() { - this.$refs.input.focus(); - } - } }); </script> <style lang="scss" scoped> -.eiipwacr { - position: relative; - margin: 32px 0; +.vblkjoeq { + margin: 1em 0; - &:not(.inline):first-child { - margin-top: 8px; + > .label { + font-size: 0.85em; + padding: 0 0 6px 6px; + font-weight: bold; + user-select: none; } - &:not(.inline):last-child { - margin-bottom: 8px; - } - - > .icon { - position: absolute; - top: 0; - left: 0; - width: 24px; - text-align: center; - line-height: 32px; - - &:not(:empty) + .input { - margin-left: 28px; - } + > .caption { + font-size: 0.8em; + padding: 6px 0 0 6px; + color: var(--fgTransparentWeak); } > .input { - display: flex; + $height: 42px; position: relative; - &:before { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: var(--inputBorder); - } - - &:after { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--accent); - opacity: 0; - transform: scaleX(0.12); - transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - will-change: border opacity transform; - } - - > .label { - position: absolute; - top: 0; - left: 0; - pointer-events: none; - transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); - transition-duration: 0.3s; - font-size: 1em; - line-height: 32px; - pointer-events: none; - //will-change transform - transform-origin: top left; - transform: scale(1); - } - > select { + appearance: none; + -webkit-appearance: none; display: block; - flex: 1; + height: $height; width: 100%; - padding: 0; + margin: 0; + padding: 0 8px; font: inherit; font-weight: normal; font-size: 1em; - height: 32px; - background: none; - border: none; - border-radius: 0; + color: var(--fg); + background: var(--panel); + border: solid 1px var(--inputBorder); + border-radius: 6px; outline: none; box-shadow: none; - appearance: none; - -webkit-appearance: none; - color: var(--fg); + box-sizing: border-box; + cursor: pointer; - option, - optgroup { - color: var(--fg); - background: var(--bg); + &:hover { + border-color: var(--inputBorderHover); } } > .prefix, > .suffix { - display: block; - align-self: center; - justify-self: center; + display: flex; + align-items: center; + position: absolute; + z-index: 1; + top: 0; + padding: 0 12px; font-size: 1em; - line-height: 32px; - color: var(--inputLabel); + height: $height; pointer-events: none; &:empty { @@ -187,53 +212,41 @@ export default defineComponent({ } > * { - display: block; + display: inline-block; min-width: 16px; + max-width: 150px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } } > .prefix { - padding-right: 4px; + left: 0; + padding-right: 6px; } > .suffix { - padding-left: 4px; - } - } - - > .text { - margin: 6px 0; - font-size: 0.8em; - - &:empty { - display: none; + right: 0; + padding-left: 6px; } - * { + &.inline { + display: inline-block; margin: 0; } - } - &.focused { - > .input { - &:after { - opacity: 1; - transform: scaleX(1); - } - - > .label { - color: var(--accent); + &.focused { + > select { + border-color: var(--accent); } } - } - &.focused, - &.filled { - > .input { - > .label { - top: -17px; - left: 0 !important; - transform: scale(0.75); + &.disabled { + opacity: 0.7; + + &, * { + cursor: not-allowed !important; } } } diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue index 762fba6d99..7aa9c0619d 100644 --- a/src/client/components/ui/switch.vue +++ b/src/client/components/ui/switch.vue @@ -18,7 +18,7 @@ </span> <span class="label"> <span><slot></slot></span> - <p><slot name="desc"></slot></p> + <p><slot name="caption"></slot></p> </span> </div> </template> @@ -28,7 +28,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ props: { - value: { + modelValue: { type: Boolean, default: false }, @@ -39,13 +39,13 @@ export default defineComponent({ }, computed: { checked(): boolean { - return this.value; + return this.modelValue; } }, methods: { toggle() { if (this.disabled) return; - this.$emit('update:value', !this.checked); + this.$emit('update:modelValue', !this.checked); } } }); @@ -136,7 +136,7 @@ export default defineComponent({ > p { margin: 0; - opacity: 0.7; + color: var(--fgTransparentWeak); font-size: 90%; } } diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue index 1032c10d14..592b8b9ca0 100644 --- a/src/client/components/ui/textarea.vue +++ b/src/client/components/ui/textarea.vue @@ -1,30 +1,45 @@ <template> -<div class="adhpbeos" :class="{ focused, filled, tall, pre }"> - <div class="input"> - <span class="label" ref="label"><slot></slot></span> - <textarea ref="input" :class="{ code, _monospace: code }" - :value="value" +<div class="adhpbeos"> + <div class="label" @click="focus"><slot name="label"></slot></div> + <div class="input" :class="{ disabled, focused, tall, pre }"> + <textarea ref="inputEl" + :class="{ code, _monospace: code }" + v-model="v" + :disabled="disabled" :required="required" :readonly="readonly" + :placeholder="placeholder" :pattern="pattern" :autocomplete="autocomplete" - :spellcheck="!code" - @input="onInput" + :spellcheck="spellcheck" @focus="focused = true" @blur="focused = false" + @keydown="onKeydown($event)" + @input="onInput" ></textarea> </div> - <button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button> - <div class="desc _caption"><slot name="desc"></slot></div> + <div class="caption"><slot name="caption"></slot></div> + + <MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; +import MkButton from './button.vue'; +import { debounce } from 'throttle-debounce'; export default defineComponent({ + components: { + MkButton, + }, + props: { - value: { + modelValue: { + required: true + }, + type: { + type: String, required: false }, required: { @@ -35,14 +50,29 @@ export default defineComponent({ type: Boolean, required: false }, + disabled: { + type: Boolean, + required: false + }, pattern: { type: String, required: false }, - autocomplete: { + placeholder: { type: String, required: false }, + autofocus: { + type: Boolean, + required: false, + default: false + }, + autocomplete: { + required: false + }, + spellcheck: { + required: false + }, code: { type: Boolean, required: false @@ -57,169 +87,156 @@ export default defineComponent({ required: false, default: false }, - save: { - type: Function, + debounce: { + type: Boolean, required: false, + default: false + }, + manualSave: { + type: Boolean, + required: false, + default: false }, }, - data() { + + emits: ['change', 'keydown', 'enter', 'update:modelValue'], + + setup(props, context) { + const { modelValue, autofocus } = toRefs(props); + const v = ref(modelValue.value); + const focused = ref(false); + const changed = ref(false); + const invalid = ref(false); + const filled = computed(() => v.value !== '' && v.value != null); + const inputEl = ref(null); + + const focus = () => inputEl.value.focus(); + const onInput = (ev) => { + changed.value = true; + context.emit('change', ev); + }; + const onKeydown = (ev: KeyboardEvent) => { + context.emit('keydown', ev); + + if (ev.code === 'Enter') { + context.emit('enter'); + } + }; + + const updated = () => { + changed.value = false; + context.emit('update:modelValue', v.value); + }; + + const debouncedUpdated = debounce(1000, updated); + + watch(modelValue, newValue => { + v.value = newValue; + }); + + watch(v, newValue => { + if (!props.manualSave) { + if (props.debounce) { + debouncedUpdated(); + } else { + updated(); + } + } + + invalid.value = inputEl.value.validity.badInput; + }); + + onMounted(() => { + nextTick(() => { + if (autofocus.value) { + focus(); + } + }); + }); + return { - focused: false, - changed: false, - } + v, + focused, + invalid, + changed, + filled, + inputEl, + focus, + onInput, + onKeydown, + updated, + }; }, - computed: { - filled(): boolean { - return this.value != '' && this.value != null; - } - }, - methods: { - focus() { - this.$refs.input.focus(); - }, - onInput(ev) { - this.changed = true; - this.$emit('update:value', ev.target.value); - } - } }); </script> <style lang="scss" scoped> .adhpbeos { - margin: 42px 0 32px 0; - position: relative; + margin: 1em 0; - &:first-child { - margin-top: 16px; + > .label { + font-size: 0.85em; + padding: 0 0 6px 6px; + font-weight: bold; + user-select: none; } - &:last-child { - margin-bottom: 0; + > .caption { + font-size: 0.8em; + padding: 6px 0 0 6px; + color: var(--fgTransparentWeak); } > .input { position: relative; - - &:before { - content: ''; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: none; - border: solid 1px var(--inputBorder); - border-radius: 3px; - pointer-events: none; - } - - &:after { - content: ''; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: none; - border: solid 2px var(--accent); - border-radius: 3px; - opacity: 0; - transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); - pointer-events: none; - } - - > .label { - position: absolute; - top: 6px; - left: 12px; - pointer-events: none; - transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); - transition-duration: 0.3s; - font-size: 1em; - line-height: 32px; - pointer-events: none; - //will-change transform - transform-origin: top left; - transform: scale(1); - } > textarea { + appearance: none; + -webkit-appearance: none; display: block; width: 100%; min-width: 100%; max-width: 100%; min-height: 130px; + margin: 0; padding: 12px; - box-sizing: border-box; font: inherit; font-weight: normal; font-size: 1em; - background: transparent; - border: none; - border-radius: 0; + color: var(--fg); + background: var(--panel); + border: solid 1px var(--inputBorder); + border-radius: 6px; outline: none; box-shadow: none; - color: var(--fg); + box-sizing: border-box; - &.code { - tab-size: 2; + &:hover { + border-color: var(--inputBorderHover); } } - } - > .save { - margin: 6px 0 0 0; - font-size: 0.8em; - } - - > .desc { - margin: 6px 0 0 0; - - &:empty { - display: none; - } - - * { - margin: 0; - } - } - - &.focused { - > .input { - &:after { - opacity: 1; - } - - > .label { - color: var(--accent); + &.focused { + > textarea { + border-color: var(--accent); } } - } - &.focused, - &.filled { - > .input { - > .label { - top: -24px; - left: 0 !important; - transform: scale(0.75); + &.disabled { + opacity: 0.7; + + &, * { + cursor: not-allowed !important; } } - } - &.tall { - > .input { + &.tall { > textarea { min-height: 200px; } } - } - &.pre { - > .input { + &.pre { > textarea { white-space: pre; } diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue index 74081753b7..8e7b0a190c 100644 --- a/src/client/components/user-select-dialog.vue +++ b/src/client/components/user-select-dialog.vue @@ -11,8 +11,14 @@ <div class="tbhwbxda _monolithic_"> <div class="_section"> <div class="inputs"> - <MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $ts.username }}</span><template #prefix>@</template></MkInput> - <MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $ts.host }}</span><template #prefix>@</template></MkInput> + <MkInput v-model="username" class="input" @update:modelValue="search" ref="username"> + <template #label>{{ $ts.username }}</template> + <template #prefix>@</template> + </MkInput> + <MkInput v-model="host" class="input" @update:modelValue="search"> + <template #label>{{ $ts.host }}</template> + <template #prefix>@</template> + </MkInput> </div> </div> <div class="_section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }"> diff --git a/src/client/components/widgets.vue b/src/client/components/widgets.vue index 0baef86565..6e5c2d5ade 100644 --- a/src/client/components/widgets.vue +++ b/src/client/components/widgets.vue @@ -2,7 +2,7 @@ <div class="vjoppmmu"> <template v-if="edit"> <header> - <MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)"> + <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)"> <template #label>{{ $ts.selectWidget }}</template> <option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option> </MkSelect> diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue index b153d10396..adae17658c 100644 --- a/src/client/pages/api-console.vue +++ b/src/client/pages/api-console.vue @@ -1,13 +1,13 @@ <template> <div class="_root"> <div class="_block" style="padding: 24px;"> - <MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()"> - <span>Endpoint</span> + <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()"> + <template #label>Endpoint</template> </MkInput> - <MkTextarea v-model:value="body" code> - <span>Params (JSON or JSON5)</span> + <MkTextarea v-model="body" code> + <template #label>Params (JSON or JSON5)</template> </MkTextarea> - <MkSwitch v-model:value="withCredential"> + <MkSwitch v-model="withCredential"> With credential </MkSwitch> <MkButton primary full @click="send" :disabled="sending"> @@ -16,8 +16,8 @@ </MkButton> </div> <div v-if="res" class="_block" style="padding: 24px;"> - <MkTextarea v-model:value="res" code readonly tall> - <span>Response</span> + <MkTextarea v-model="res" code readonly tall> + <template #label>Response</template> </MkTextarea> </div> </div> diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue index bc772d34fa..eeea0b70aa 100644 --- a/src/client/pages/channel-editor.vue +++ b/src/client/pages/channel-editor.vue @@ -2,9 +2,13 @@ <div> <div class="_section"> <div class="_content"> - <MkInput v-model:value="name">{{ $ts.name }}</MkInput> + <MkInput v-model="name"> + <template #label>{{ $ts.name }}</template> + </MkInput> - <MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea> + <MkTextarea v-model="description"> + <template #label>{{ $ts.description }}</template> + </MkTextarea> <div class="banner"> <MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton> diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue index a419bf5f92..639a95bb7a 100644 --- a/src/client/pages/docs.vue +++ b/src/client/pages/docs.vue @@ -1,7 +1,10 @@ <template> <div class="vtaihdtm"> <div class="search"> - <MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput> + <MkInput v-model="query" :debounce="true" type="search"> + <template #prefix><i class="fas fa-search"></i></template> + <template #label>{{ $ts.search }}</template> + </MkInput> </div> <MkFolder> <template #header>{{ $ts._docs.generalTopics }}</template> diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue index 7bcb09d8c5..7054940a1a 100644 --- a/src/client/pages/explore.vue +++ b/src/client/pages/explore.vue @@ -2,7 +2,10 @@ <div class="lznhrdub _root"> <div> <div class="_isolated"> - <MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.searchUser }}</span></MkInput> + <MkInput v-model="query" :debounce="true" type="search"> + <template #prefix><i class="fas fa-search"></i></template> + <template #label>{{ $ts.searchUser }}</template> + </MkInput> </div> <XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/> diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index c66ad50f6d..4165f73734 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -62,7 +62,7 @@ <div class="_formLabel">{{ $ts.statistics }}</div> <div class="_formPanel cmhjzshl"> <div class="selects"> - <MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;"> + <MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> <option value="requests">{{ $ts._instanceCharts.requests }}</option> <option value="users">{{ $ts._instanceCharts.users }}</option> <option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option> @@ -75,7 +75,7 @@ <option value="drive-files">{{ $ts._instanceCharts.files }}</option> <option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option> </MkSelect> - <MkSelect v-model:value="chartSpan" style="margin: 0;"> + <MkSelect v-model="chartSpan" style="margin: 0;"> <option value="hour">{{ $ts.perHour }}</option> <option value="day">{{ $ts.perDay }}</option> </MkSelect> diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue index 2af57bb975..ac20ebabe5 100644 --- a/src/client/pages/instance/abuses.vue +++ b/src/client/pages/instance/abuses.vue @@ -3,19 +3,19 @@ <div class="_section reports"> <div class="_content"> <div class="inputs" style="display: flex;"> - <MkSelect v-model:value="state" style="margin: 0; flex: 1;"> + <MkSelect v-model="state" style="margin: 0; flex: 1;"> <template #label>{{ $ts.state }}</template> <option value="all">{{ $ts.all }}</option> <option value="unresolved">{{ $ts.unresolved }}</option> <option value="resolved">{{ $ts.resolved }}</option> </MkSelect> - <MkSelect v-model:value="targetUserOrigin" style="margin: 0; flex: 1;"> + <MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;"> <template #label>{{ $ts.targetUserOrigin }}</template> <option value="combined">{{ $ts.all }}</option> <option value="local">{{ $ts.local }}</option> <option value="remote">{{ $ts.remote }}</option> </MkSelect> - <MkSelect v-model:value="reporterOrigin" style="margin: 0; flex: 1;"> + <MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;"> <template #label>{{ $ts.reporterOrigin }}</template> <option value="combined">{{ $ts.all }}</option> <option value="local">{{ $ts.local }}</option> diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue index 6b536793b7..50c8c29cbf 100644 --- a/src/client/pages/instance/ads.vue +++ b/src/client/pages/instance/ads.vue @@ -4,11 +4,11 @@ <section class="_card _gap ads" v-for="ad in ads"> <div class="_content ad"> <MkAd v-if="ad.url" :specify="ad"/> - <MkInput v-model:value="ad.url" type="url"> - <span>URL</span> + <MkInput v-model="ad.url" type="url"> + <template #label>URL</template> </MkInput> - <MkInput v-model:value="ad.imageUrl"> - <span>{{ $ts.imageUrl }}</span> + <MkInput v-model="ad.imageUrl"> + <template #label>{{ $ts.imageUrl }}</template> </MkInput> <div style="margin: 32px 0;"> <MkRadio v-model="ad.place" value="square">square</MkRadio> @@ -23,14 +23,14 @@ <MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio> </div> --> - <MkInput v-model:value="ad.ratio" type="number"> - <span>{{ $ts.ratio }}</span> + <MkInput v-model="ad.ratio" type="number"> + <template #label>{{ $ts.ratio }}</template> </MkInput> - <MkInput v-model:value="ad.expiresAt" type="date"> - <span>{{ $ts.expiration }}</span> + <MkInput v-model="ad.expiresAt" type="date"> + <template #label>{{ $ts.expiration }}</template> </MkInput> - <MkTextarea v-model:value="ad.memo"> - <span>{{ $ts.memo }}</span> + <MkTextarea v-model="ad.memo"> + <template #label>{{ $ts.memo }}</template> </MkTextarea> <div class="buttons"> <MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue index ac0e9d5135..d48e3737ad 100644 --- a/src/client/pages/instance/announcements.vue +++ b/src/client/pages/instance/announcements.vue @@ -3,14 +3,14 @@ <MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> <section class="_card _gap announcements" v-for="announcement in announcements"> <div class="_content announcement"> - <MkInput v-model:value="announcement.title"> - <span>{{ $ts.title }}</span> + <MkInput v-model="announcement.title"> + <template #label>{{ $ts.title }}</template> </MkInput> - <MkTextarea v-model:value="announcement.text"> - <span>{{ $ts.text }}</span> + <MkTextarea v-model="announcement.text"> + <template #label>{{ $ts.text }}</template> </MkTextarea> - <MkInput v-model:value="announcement.imageUrl"> - <span>{{ $ts.imageUrl }}</span> + <MkInput v-model="announcement.imageUrl"> + <template #label>{{ $ts.imageUrl }}</template> </MkInput> <p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p> <div class="buttons"> diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue index f7a3671584..7e9bdc80dd 100644 --- a/src/client/pages/instance/emoji-edit-dialog.vue +++ b/src/client/pages/instance/emoji-edit-dialog.vue @@ -11,11 +11,15 @@ <div class="_monolithic_"> <div class="yigymqpb _section"> <img :src="emoji.url" class="img"/> - <MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput> - <MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput> - <MkInput v-model:value="aliases"> - <span>{{ $ts.tags }}</span> - <template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template> + <MkInput v-model="name"> + <template #label>{{ $ts.name }}</template> + </MkInput> + <MkInput v-model="category" :datalist="categories"> + <template #label>{{ $ts.category }}</template> + </MkInput> + <MkInput v-model="aliases"> + <template #label>{{ $ts.tags }}</template> + <template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template> </MkInput> <MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton> </div> diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue index fd641703cb..e971ca942e 100644 --- a/src/client/pages/instance/emojis.vue +++ b/src/client/pages/instance/emojis.vue @@ -7,7 +7,10 @@ <div class="local" v-if="tab === 'local'"> <MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton> - <MkInput v-model:value="query" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput> + <MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);"> + <template #prefix><i class="fas fa-search"></i></template> + <template #label>{{ $ts.search }}</template> + </MkInput> <MkPagination :pagination="pagination" ref="emojis"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #default="{items}"> @@ -25,8 +28,13 @@ </div> <div class="remote" v-else-if="tab === 'remote'"> - <MkInput v-model:value="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput> - <MkInput v-model:value="host" :debounce="true" style="margin: var(--margin);"><span>{{ $ts.host }}</span></MkInput> + <MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"> + <template #prefix><i class="fas fa-search"></i></template> + <template #label>{{ $ts.search }}</template> + </MkInput> + <MkInput v-model="host" :debounce="true" style="margin: var(--margin);"> + <template #label>{{ $ts.host }}</template> + </MkInput> <MkPagination :pagination="remotePagination" ref="remoteEmojis"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #default="{items}"> diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue index 74a755fa15..be6bf6cbf2 100644 --- a/src/client/pages/instance/file-dialog.vue +++ b/src/client/pages/instance/file-dialog.vue @@ -16,7 +16,7 @@ </div> <div class="_section"> <div class="_content"> - <MkSwitch @update:value="toggleIsSensitive" v-model:value="isSensitive">NSFW</MkSwitch> + <MkSwitch @update:modelValue="toggleIsSensitive" v-model="isSensitive">NSFW</MkSwitch> </div> </div> <div class="_section"> diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue index 427c5b411a..b7f472b7c8 100644 --- a/src/client/pages/instance/files.vue +++ b/src/client/pages/instance/files.vue @@ -9,8 +9,8 @@ <div class="_section lookup"> <div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div> <div class="_content"> - <MkInput class="target" v-model:value="q" type="text" @enter="find()"> - <span>{{ $ts.fileIdOrUrl }}</span> + <MkInput class="target" v-model="q" type="text" @enter="find()"> + <template #label>{{ $ts.fileIdOrUrl }}</template> </MkInput> <MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton> </div> @@ -19,19 +19,19 @@ <div class="_section"> <div class="_content"> <div class="inputs" style="display: flex;"> - <MkSelect v-model:value="origin" style="margin: 0; flex: 1;"> + <MkSelect v-model="origin" style="margin: 0; flex: 1;"> <template #label>{{ $ts.instance }}</template> <option value="combined">{{ $ts.all }}</option> <option value="local">{{ $ts.local }}</option> <option value="remote">{{ $ts.remote }}</option> </MkSelect> - <MkInput v-model:value="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'"> - <span>{{ $ts.host }}</span> + <MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'"> + <template #label>{{ $ts.host }}</template> </MkInput> </div> <div class="inputs" style="display: flex; padding-top: 1.2em;"> - <MkInput v-model:value="type" :debounce="true" type="search" style="margin: 0; flex: 1;"> - <span>{{ $ts.type }}</span> + <MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;"> + <template #label>{{ $ts.type }}</template> </MkInput> </div> <MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files"> diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue index a4ac1de46b..c39f0d1ecb 100644 --- a/src/client/pages/instance/instance.vue +++ b/src/client/pages/instance/instance.vue @@ -77,7 +77,7 @@ <div class="header"> <span class="label">{{ $ts.charts }}</span> <div class="selects"> - <MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;"> + <MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> <option value="requests">{{ $ts._instanceCharts.requests }}</option> <option value="users">{{ $ts._instanceCharts.users }}</option> <option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option> @@ -90,7 +90,7 @@ <option value="drive-files">{{ $ts._instanceCharts.files }}</option> <option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option> </MkSelect> - <MkSelect v-model:value="chartSpan" style="margin: 0;"> + <MkSelect v-model="chartSpan" style="margin: 0;"> <option value="hour">{{ $ts.perHour }}</option> <option value="day">{{ $ts.perDay }}</option> </MkSelect> @@ -102,8 +102,8 @@ </div> <div class="operations section"> <span class="label">{{ $ts.operations }}</span> - <MkSwitch v-model:value="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch> - <MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch> + <MkSwitch v-model="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch> + <MkSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch> <details> <summary>{{ $ts.deleteAllFiles }}</summary> <MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton> diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue index 112b0f66d0..4eee816f96 100644 --- a/src/client/pages/instance/logs.vue +++ b/src/client/pages/instance/logs.vue @@ -1,10 +1,10 @@ <template> <div class="_section"> <div class="_inputs"> - <MkInput v-model:value="logDomain" :debounce="true"> - <span>{{ $ts.domain }}</span> + <MkInput v-model="logDomain" :debounce="true"> + <template #label>{{ $ts.domain }}</template> </MkInput> - <MkSelect v-model:value="logLevel"> + <MkSelect v-model="logLevel"> <template #label>Level</template> <option value="all">All</option> <option value="info">Info</option> diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue index ccddca16ad..8db62683ba 100644 --- a/src/client/pages/instance/users.vue +++ b/src/client/pages/instance/users.vue @@ -7,14 +7,14 @@ <div class="users"> <div class="inputs" style="display: flex;"> - <MkSelect v-model:value="sort" style="margin: 0; flex: 1;"> + <MkSelect v-model="sort" style="margin: 0; flex: 1;"> <template #label>{{ $ts.sort }}</template> <option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option> <option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option> <option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option> <option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option> </MkSelect> - <MkSelect v-model:value="state" style="margin: 0; flex: 1;"> + <MkSelect v-model="state" style="margin: 0; flex: 1;"> <template #label>{{ $ts.state }}</template> <option value="all">{{ $ts.all }}</option> <option value="available">{{ $ts.normal }}</option> @@ -23,7 +23,7 @@ <option value="silenced">{{ $ts.silence }}</option> <option value="suspended">{{ $ts.suspend }}</option> </MkSelect> - <MkSelect v-model:value="origin" style="margin: 0; flex: 1;"> + <MkSelect v-model="origin" style="margin: 0; flex: 1;"> <template #label>{{ $ts.instance }}</template> <option value="combined">{{ $ts.all }}</option> <option value="local">{{ $ts.local }}</option> @@ -31,11 +31,11 @@ </MkSelect> </div> <div class="inputs" style="display: flex; padding-top: 1.2em;"> - <MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()"> - <span>{{ $ts.username }}</span> + <MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()"> + <template #label>{{ $ts.username }}</template> </MkInput> - <MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'"> - <span>{{ $ts.host }}</span> + <MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'"> + <template #label>{{ $ts.host }}</template> </MkInput> </div> diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 75bbfce7e8..751dccd7a1 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -7,7 +7,7 @@ <p>{{ $ts._mfm.mentionDescription }}</p> <div class="preview"> <Mfm :text="preview_mention"/> - <MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -17,7 +17,7 @@ <p>{{ $ts._mfm.hashtagDescription }}</p> <div class="preview"> <Mfm :text="preview_hashtag"/> - <MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -27,7 +27,7 @@ <p>{{ $ts._mfm.urlDescription }}</p> <div class="preview"> <Mfm :text="preview_url"/> - <MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -37,7 +37,7 @@ <p>{{ $ts._mfm.linkDescription }}</p> <div class="preview"> <Mfm :text="preview_link"/> - <MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -47,7 +47,7 @@ <p>{{ $ts._mfm.emojiDescription }}</p> <div class="preview"> <Mfm :text="preview_emoji"/> - <MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -57,7 +57,7 @@ <p>{{ $ts._mfm.boldDescription }}</p> <div class="preview"> <Mfm :text="preview_bold"/> - <MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -67,7 +67,7 @@ <p>{{ $ts._mfm.smallDescription }}</p> <div class="preview"> <Mfm :text="preview_small"/> - <MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -77,7 +77,7 @@ <p>{{ $ts._mfm.quoteDescription }}</p> <div class="preview"> <Mfm :text="preview_quote"/> - <MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -87,7 +87,7 @@ <p>{{ $ts._mfm.centerDescription }}</p> <div class="preview"> <Mfm :text="preview_center"/> - <MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -97,7 +97,7 @@ <p>{{ $ts._mfm.inlineCodeDescription }}</p> <div class="preview"> <Mfm :text="preview_inlineCode"/> - <MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -107,7 +107,7 @@ <p>{{ $ts._mfm.blockCodeDescription }}</p> <div class="preview"> <Mfm :text="preview_blockCode"/> - <MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -117,7 +117,7 @@ <p>{{ $ts._mfm.inlineMathDescription }}</p> <div class="preview"> <Mfm :text="preview_inlineMath"/> - <MkTextarea v-model:value="preview_inlineMath"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -127,7 +127,7 @@ <p>{{ $ts._mfm.searchDescription }}</p> <div class="preview"> <Mfm :text="preview_search"/> - <MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -137,7 +137,7 @@ <p>{{ $ts._mfm.flipDescription }}</p> <div class="preview"> <Mfm :text="preview_flip"/> - <MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -147,7 +147,7 @@ <p>{{ $ts._mfm.fontDescription }}</p> <div class="preview"> <Mfm :text="preview_font"/> - <MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -157,7 +157,7 @@ <p>{{ $ts._mfm.x2Description }}</p> <div class="preview"> <Mfm :text="preview_x2"/> - <MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -167,7 +167,7 @@ <p>{{ $ts._mfm.x3Description }}</p> <div class="preview"> <Mfm :text="preview_x3"/> - <MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -177,7 +177,7 @@ <p>{{ $ts._mfm.x4Description }}</p> <div class="preview"> <Mfm :text="preview_x4"/> - <MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -187,7 +187,7 @@ <p>{{ $ts._mfm.blurDescription }}</p> <div class="preview"> <Mfm :text="preview_blur"/> - <MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -197,7 +197,7 @@ <p>{{ $ts._mfm.jellyDescription }}</p> <div class="preview"> <Mfm :text="preview_jelly"/> - <MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -207,7 +207,7 @@ <p>{{ $ts._mfm.tadaDescription }}</p> <div class="preview"> <Mfm :text="preview_tada"/> - <MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -217,7 +217,7 @@ <p>{{ $ts._mfm.jumpDescription }}</p> <div class="preview"> <Mfm :text="preview_jump"/> - <MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -227,7 +227,7 @@ <p>{{ $ts._mfm.bounceDescription }}</p> <div class="preview"> <Mfm :text="preview_bounce"/> - <MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -237,7 +237,7 @@ <p>{{ $ts._mfm.spinDescription }}</p> <div class="preview"> <Mfm :text="preview_spin"/> - <MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -247,7 +247,7 @@ <p>{{ $ts._mfm.shakeDescription }}</p> <div class="preview"> <Mfm :text="preview_shake"/> - <MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -257,7 +257,7 @@ <p>{{ $ts._mfm.twitchDescription }}</p> <div class="preview"> <Mfm :text="preview_twitch"/> - <MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea> </div> </div> </div> @@ -267,7 +267,7 @@ <p>{{ $ts._mfm.rainbowDescription }}</p> <div class="preview"> <Mfm :text="preview_rainbow"/> - <MkTextarea v-model:value="preview_rainbow"><span>MFM</span></MkTextarea> + <MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea> </div> </div> </div> diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue index fcb7559a98..3a74a9d7f1 100644 --- a/src/client/pages/my-antennas/index.antenna.vue +++ b/src/client/pages/my-antennas/index.antenna.vue @@ -2,10 +2,10 @@ <div class="shaynizk _card"> <div class="_title" v-if="antenna.name">{{ antenna.name }}</div> <div class="_content body"> - <MkInput v-model:value="name"> - <span>{{ $ts.name }}</span> + <MkInput v-model="name"> + <template #label>{{ $ts.name }}</template> </MkInput> - <MkSelect v-model:value="src"> + <MkSelect v-model="src"> <template #label>{{ $ts.antennaSource }}</template> <option value="all">{{ $ts._antennaSources.all }}</option> <option value="home">{{ $ts._antennaSources.homeTimeline }}</option> @@ -13,30 +13,30 @@ <option value="list">{{ $ts._antennaSources.userList }}</option> <option value="group">{{ $ts._antennaSources.userGroup }}</option> </MkSelect> - <MkSelect v-model:value="userListId" v-if="src === 'list'"> + <MkSelect v-model="userListId" v-if="src === 'list'"> <template #label>{{ $ts.userList }}</template> <option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option> </MkSelect> - <MkSelect v-model:value="userGroupId" v-else-if="src === 'group'"> + <MkSelect v-model="userGroupId" v-else-if="src === 'group'"> <template #label>{{ $ts.userGroup }}</template> <option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option> </MkSelect> - <MkTextarea v-model:value="users" v-else-if="src === 'users'"> - <span>{{ $ts.users }}</span> - <template #desc>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template> + <MkTextarea v-model="users" v-else-if="src === 'users'"> + <template #label>{{ $ts.users }}</template> + <template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template> </MkTextarea> - <MkSwitch v-model:value="withReplies">{{ $ts.withReplies }}</MkSwitch> - <MkTextarea v-model:value="keywords"> - <span>{{ $ts.antennaKeywords }}</span> - <template #desc>{{ $ts.antennaKeywordsDescription }}</template> + <MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch> + <MkTextarea v-model="keywords"> + <template #label>{{ $ts.antennaKeywords }}</template> + <template #caption>{{ $ts.antennaKeywordsDescription }}</template> </MkTextarea> - <MkTextarea v-model:value="excludeKeywords"> - <span>{{ $ts.antennaExcludeKeywords }}</span> - <template #desc>{{ $ts.antennaKeywordsDescription }}</template> + <MkTextarea v-model="excludeKeywords"> + <template #label>{{ $ts.antennaExcludeKeywords }}</template> + <template #caption>{{ $ts.antennaKeywordsDescription }}</template> </MkTextarea> - <MkSwitch v-model:value="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch> - <MkSwitch v-model:value="withFile">{{ $ts.withFileAntenna }}</MkSwitch> - <MkSwitch v-model:value="notify">{{ $ts.notifyAntenna }}</MkSwitch> + <MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch> + <MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch> + <MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch> </div> <div class="_footer"> <MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue index 6e9036faac..3a43817cf6 100644 --- a/src/client/pages/page-editor/els/page-editor.el.button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.button.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template> <section class="xfhsjczc"> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._button.text }}</span></MkInput> - <MkSwitch v-model:value="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch> - <MkSelect v-model:value="value.action"> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput> + <MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch> + <MkSelect v-model="value.action"> <template #label>{{ $ts._pages.blocks._button.action }}</template> <option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option> <option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option> @@ -13,12 +13,12 @@ <option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option> </MkSelect> <template v-if="value.action === 'dialog'"> - <MkInput v-model:value="value.content"><span>{{ $ts._pages.blocks._button._action._dialog.content }}</span></MkInput> + <MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput> </template> <template v-else-if="value.action === 'pushEvent'"> - <MkInput v-model:value="value.event"><span>{{ $ts._pages.blocks._button._action._pushEvent.event }}</span></MkInput> - <MkInput v-model:value="value.message"><span>{{ $ts._pages.blocks._button._action._pushEvent.message }}</span></MkInput> - <MkSelect v-model:value="value.var"> + <MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput> + <MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput> + <MkSelect v-model="value.var"> <template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template> <option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option> <option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option> @@ -31,7 +31,7 @@ </MkSelect> </template> <template v-else-if="value.action === 'callAiScript'"> - <MkInput v-model:value="value.fn"><span>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</span></MkInput> + <MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput> </template> </section> </XContainer> diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue index 59d29b9b71..d8d5b990ca 100644 --- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue +++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue @@ -3,9 +3,18 @@ <template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template> <section style="padding: 0 16px 0 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput> - <MkInput v-model:value="value.width" type="number"><span>{{ $ts._pages.blocks._canvas.width }}</span><template #suffix>px</template></MkInput> - <MkInput v-model:value="value.height" type="number"><span>{{ $ts._pages.blocks._canvas.height }}</span><template #suffix>px</template></MkInput> + <MkInput v-model="value.name"> + <template #prefix><i class="fas fa-magic"></i></template> + <template #label>{{ $ts._pages.blocks._canvas.id }}</template> + </MkInput> + <MkInput v-model="value.width" type="number"> + <template #label>{{ $ts._pages.blocks._canvas.width }}</template> + <template #suffix>px</template> + </MkInput> + <MkInput v-model="value.height" type="number"> + <template #label>{{ $ts._pages.blocks._canvas.height }}</template> + <template #suffix>px</template> + </MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue index 3394817b53..973de50fc2 100644 --- a/src/client/pages/page-editor/els/page-editor.el.counter.vue +++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue @@ -3,9 +3,16 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template> <section style="padding: 0 16px 0 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._counter.text }}</span></MkInput> - <MkInput v-model:value="value.inc" type="number"><span>{{ $ts._pages.blocks._counter.inc }}</span></MkInput> + <MkInput v-model="value.name"> + <template #prefix><i class="fas fa-magic"></i></template> + <template #label>{{ $ts._pages.blocks._counter.name }}</template> + </MkInput> + <MkInput v-model="value.text"> + <template #label>{{ $ts._pages.blocks._counter.text }}</template> + </MkInput> + <MkInput v-model="value.inc" type="number"> + <template #label>{{ $ts._pages.blocks._counter.inc }}</template> + </MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue index 7f4ed458aa..6eb0c7709f 100644 --- a/src/client/pages/page-editor/els/page-editor.el.if.vue +++ b/src/client/pages/page-editor/els/page-editor.el.if.vue @@ -8,7 +8,7 @@ </template> <section class="romcojzs"> - <MkSelect v-model:value="value.var"> + <MkSelect v-model="value.var"> <template #label>{{ $ts._pages.blocks._if.variable }}</template> <option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option> <optgroup :label="$ts._pages.script.pageVariables"> diff --git a/src/client/pages/page-editor/els/page-editor.el.note.vue b/src/client/pages/page-editor/els/page-editor.el.note.vue index d4801f3059..5766564c1a 100644 --- a/src/client/pages/page-editor/els/page-editor.el.note.vue +++ b/src/client/pages/page-editor/els/page-editor.el.note.vue @@ -3,11 +3,11 @@ <template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template> <section style="padding: 0 16px 0 16px;"> - <MkInput v-model:value="id"> - <span>{{ $ts._pages.blocks._note.id }}</span> - <template #desc>{{ $ts._pages.blocks._note.idDescription }}</template> + <MkInput v-model="id"> + <template #label>{{ $ts._pages.blocks._note.id }}</template> + <template #caption>{{ $ts._pages.blocks._note.idDescription }}</template> </MkInput> - <MkSwitch v-model:value="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch> + <MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch> <XNote v-if="note && !value.detailed" v-model:note="note" :key="note.id + ':normal'" style="margin-bottom: 16px;"/> <XNoteDetailed v-if="note && value.detailed" v-model:note="note" :key="note.id + ':detail'" style="margin-bottom: 16px;"/> diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue index 8058d941c1..892e7e1caa 100644 --- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue @@ -3,9 +3,16 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template> <section style="padding: 0 16px 0 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._numberInput.text }}</span></MkInput> - <MkInput v-model:value="value.default" type="number"><span>{{ $ts._pages.blocks._numberInput.default }}</span></MkInput> + <MkInput v-model="value.name"> + <template #prefix><i class="fas fa-magic"></i></template> + <template #label>{{ $ts._pages.blocks._numberInput.name }}</template> + </MkInput> + <MkInput v-model="value.text"> + <template #label>{{ $ts._pages.blocks._numberInput.text }}</template> + </MkInput> + <MkInput v-model="value.default" type="number"> + <template #label>{{ $ts._pages.blocks._numberInput.default }}</template> + </MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue index 1ed7f860c8..4215b159d3 100644 --- a/src/client/pages/page-editor/els/page-editor.el.post.vue +++ b/src/client/pages/page-editor/els/page-editor.el.post.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template> <section style="padding: 16px;"> - <MkTextarea v-model:value="value.text">{{ $ts._pages.blocks._post.text }}</MkTextarea> - <MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch> - <MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $ts._pages.blocks._post.canvasId }}</span></MkInput> + <MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea> + <MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch> + <MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue index 97715ed69c..88be96f35d 100644 --- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue @@ -3,10 +3,10 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template> <section style="padding: 0 16px 16px 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput> - <MkInput v-model:value="value.title"><span>{{ $ts._pages.blocks._radioButton.title }}</span></MkInput> - <MkTextarea v-model:value="values"><span>{{ $ts._pages.blocks._radioButton.values }}</span></MkTextarea> - <MkInput v-model:value="value.default"><span>{{ $ts._pages.blocks._radioButton.default }}</span></MkInput> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput> + <MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput> + <MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea> + <MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue index 564d5e22c3..ade1291410 100644 --- a/src/client/pages/page-editor/els/page-editor.el.switch.vue +++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template> <section class="kjuadyyj"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._switch.text }}</span></MkInput> - <MkSwitch v-model:value="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput> + <MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue index 4435d9b841..3c8fcc04af 100644 --- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template> <section style="padding: 0 16px 0 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textInput.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textInput.text }}</span></MkInput> - <MkInput v-model:value="value.default" type="text"><span>{{ $ts._pages.blocks._textInput.default }}</span></MkInput> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput> + <MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue index cf3b9f93f4..a4fbb08ffe 100644 --- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template> <section style="padding: 0 16px 16px 16px;"> - <MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textareaInput.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textareaInput.text }}</span></MkInput> - <MkTextarea v-model:value="value.default"><span>{{ $ts._pages.blocks._textareaInput.default }}</span></MkTextarea> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput> + <MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue index 65ac731e47..fedcd7b317 100644 --- a/src/client/pages/page-editor/page-editor.script-block.vue +++ b/src/client/pages/page-editor/page-editor.script-block.vue @@ -40,9 +40,9 @@ <input v-model="value.value"/> </section> <section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;"> - <MkTextarea v-model:value="slots"> - <span>{{ $ts._pages.script.blocks._fn.slots }}</span> - <template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template> + <MkTextarea v-model="slots"> + <template #label>{{ $ts._pages.script.blocks._fn.slots }}</template> + <template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template> </MkTextarea> <XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/> </section> diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue index e96e1faaf2..dc6896ba12 100644 --- a/src/client/pages/page-editor/page-editor.vue +++ b/src/client/pages/page-editor/page-editor.vue @@ -11,28 +11,28 @@ <MkContainer :foldable="true" :expanded="true" class="_gap"> <template #header><i class="fas fa-cog"></i> {{ $ts._pages.pageSetting }}</template> <div style="padding: 16px;"> - <MkInput v-model:value="title"> - <span>{{ $ts._pages.title }}</span> + <MkInput v-model="title"> + <template #label>{{ $ts._pages.title }}</template> </MkInput> - <MkInput v-model:value="summary"> - <span>{{ $ts._pages.summary }}</span> + <MkInput v-model="summary"> + <template #label>{{ $ts._pages.summary }}</template> </MkInput> - <MkInput v-model:value="name"> + <MkInput v-model="name"> <template #prefix>{{ url }}/@{{ author.username }}/pages/</template> - <span>{{ $ts._pages.url }}</span> + <template #label>{{ $ts._pages.url }}</template> </MkInput> - <MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch> + <MkSwitch v-model="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch> - <MkSelect v-model:value="font"> + <MkSelect v-model="font"> <template #label>{{ $ts._pages.font }}</template> <option value="serif">{{ $ts._pages.fontSerif }}</option> <option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option> </MkSelect> - <MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch> + <MkSwitch v-model="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch> <div class="eyeCatch"> <MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton> @@ -77,7 +77,7 @@ <MkContainer :foldable="true" :expanded="true" class="_gap"> <template #header><i class="fas fa-code"></i> {{ $ts.script }}</template> <div> - <MkTextarea class="_code" v-model:value="script"/> + <MkTextarea class="_code" v-model="script"/> </div> </MkContainer> </div> diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue index 341aa7d658..1cc623b790 100644 --- a/src/client/pages/reversi/game.setting.vue +++ b/src/client/pages/reversi/game.setting.vue @@ -57,9 +57,9 @@ </header> <div> - <MkSwitch v-model:value="game.isLlotheo" @update:value="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch> - <MkSwitch v-model:value="game.loopedBoard" @update:value="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch> - <MkSwitch v-model:value="game.canPutEverywhere" @update:value="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch> + <MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch> + <MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch> + <MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch> </div> </div> @@ -70,7 +70,7 @@ <div> <template v-for="item in form"> - <MkSwitch v-if="item.type == 'switch'" v-model:value="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch> + <MkSwitch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch> <div class="card" v-if="item.type == 'radio'" :key="item.id"> <header> diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue index 61650e067f..365ed5b803 100644 --- a/src/client/pages/room/room.vue +++ b/src/client/pages/room/room.vue @@ -31,7 +31,7 @@ <MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton> </div> <div class="_content"> - <MkSelect :value="roomType" @update:value="updateRoomType($event)"> + <MkSelect :model-value="roomType" @update:modelValue="updateRoomType($event)"> <template #label>{{ $ts._rooms.roomType }}</template> <option value="default">{{ $ts._rooms._roomType.default }}</option> <option value="washitsu">{{ $ts._rooms._roomType.washitsu }}</option> diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue index aa14f91d71..48b06eaa24 100644 --- a/src/client/pages/settings/2fa.vue +++ b/src/client/pages/settings/2fa.vue @@ -20,7 +20,7 @@ </div> </div> - <MkSwitch v-model:value="usePasswordLessLogin" @update:value="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch> + <MkSwitch v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch> <MkInfo warn v-if="registration && registration.error">{{ $ts.error }} {{ registration.error }}</MkInfo> <MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton> @@ -32,8 +32,8 @@ </li> <li v-if="registration.stage >= 1"> <MkForm :disabled="registration.stage != 1 || registration.saving"> - <MkInput v-model:value="keyName" :max="30"> - <span>{{ $ts.securityKeyName }}</span> + <MkInput v-model="keyName" :max="30"> + <template #label>{{ $ts.securityKeyName }}</template> </MkInput> <MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton> <i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i> @@ -56,7 +56,7 @@ </li> <li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li> <li>{{ $ts._2fa.step3 }}<br> - <MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $ts.token }}</MkInput> + <MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false"><template #label>{{ $ts.token }}</template></MkInput> <MkButton primary @click="submit">{{ $ts.done }}</MkButton> </li> </ol> diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue index 9a06d31090..131571e9dd 100644 --- a/src/client/pages/test.vue +++ b/src/client/pages/test.vue @@ -4,23 +4,23 @@ <div class="_card _gap"> <div class="_title">Dialog</div> <div class="_content"> - <MkInput v-model:value="dialogTitle"> - <span>Title</span> + <MkInput v-model="dialogTitle"> + <template #label>Title</template> </MkInput> - <MkInput v-model:value="dialogBody"> - <span>Body</span> + <MkInput v-model="dialogBody"> + <template #label>Body</template> </MkInput> <MkRadio v-model="dialogType" value="info">Info</MkRadio> <MkRadio v-model="dialogType" value="success">Success</MkRadio> <MkRadio v-model="dialogType" value="warning">Warn</MkRadio> <MkRadio v-model="dialogType" value="error">Error</MkRadio> - <MkSwitch v-model:value="dialogCancel"> + <MkSwitch v-model="dialogCancel"> <span>With cancel button</span> </MkSwitch> - <MkSwitch v-model:value="dialogCancelByBgClick"> + <MkSwitch v-model="dialogCancelByBgClick"> <span>Can cancel by modal bg click</span> </MkSwitch> - <MkSwitch v-model:value="dialogInput"> + <MkSwitch v-model="dialogInput"> <span>With input field</span> </MkSwitch> <MkButton @click="showDialog()">Show</MkButton> @@ -33,11 +33,11 @@ <div class="_card _gap"> <div class="_title">Form</div> <div class="_content"> - <MkInput v-model:value="formTitle"> - <span>Title</span> + <MkInput v-model="formTitle"> + <template #label>Title</template> </MkInput> - <MkTextarea v-model:value="formForm"> - <span>Form</span> + <MkTextarea v-model="formForm"> + <template #label>Form</template> </MkTextarea> <MkButton @click="form()">Show</MkButton> </div> @@ -49,8 +49,8 @@ <div class="_card _gap"> <div class="_title">MFM</div> <div class="_content"> - <MkTextarea v-model:value="mfm"> - <span>MFM</span> + <MkTextarea v-model="mfm"> + <template #label>MFM</template> </MkTextarea> </div> <div class="_content"> @@ -61,7 +61,7 @@ <div class="_card _gap"> <div class="_title">selectDriveFile</div> <div class="_content"> - <MkSwitch v-model:value="selectDriveFileMultiple"> + <MkSwitch v-model="selectDriveFileMultiple"> <span>Multiple</span> </MkSwitch> <MkButton @click="selectDriveFile()">selectDriveFile</MkButton> @@ -74,7 +74,7 @@ <div class="_card _gap"> <div class="_title">selectDriveFolder</div> <div class="_content"> - <MkSwitch v-model:value="selectDriveFolderMultiple"> + <MkSwitch v-model="selectDriveFolderMultiple"> <span>Multiple</span> </MkSwitch> <MkButton @click="selectDriveFolder()">selectDriveFolder</MkButton> @@ -97,14 +97,14 @@ <div class="_card _gap"> <div class="_title">Notification</div> <div class="_content"> - <MkInput v-model:value="notificationIconUrl"> - <span>Icon URL</span> + <MkInput v-model="notificationIconUrl"> + <template #label>Icon URL</template> </MkInput> - <MkInput v-model:value="notificationHeader"> - <span>Header</span> + <MkInput v-model="notificationHeader"> + <template #label>Header</template> </MkInput> - <MkTextarea v-model:value="notificationBody"> - <span>Body</span> + <MkTextarea v-model="notificationBody"> + <template #label>Body</template> </MkTextarea> <MkButton @click="createNotification()">createNotification</MkButton> </div> diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue index 79464b814a..5ed1ae49c4 100644 --- a/src/client/pages/welcome.setup.vue +++ b/src/client/pages/welcome.setup.vue @@ -3,13 +3,13 @@ <h1>Welcome to Misskey!</h1> <div> <p>{{ $ts.intro }}</p> - <MkInput v-model:value="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required> - <span>{{ $ts.username }}</span> + <MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required> + <template #label>{{ $ts.username }}</template> <template #prefix>@</template> <template #suffix>@{{ host }}</template> </MkInput> - <MkInput v-model:value="password" type="password"> - <span>{{ $ts.password }}</span> + <MkInput v-model="password" type="password"> + <template #label>{{ $ts.password }}</template> <template #prefix><i class="fas fa-lock"></i></template> </MkInput> <footer> diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5 index fb0fe80146..a8ec67e8c7 100644 --- a/src/client/themes/_dark.json5 +++ b/src/client/themes/_dark.json5 @@ -53,7 +53,8 @@ cwHoverBg: '#707b97', buttonBg: 'rgba(255, 255, 255, 0.05)', buttonHoverBg: 'rgba(255, 255, 255, 0.1)', - inputBorder: '#959da2', + inputBorder: 'rgba(255, 255, 255, 0.1)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', listItemHoverBg: 'rgba(255, 255, 255, 0.03)', driveFolderBg: ':alpha<0.3<@accent', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 index db971ba0e4..0c54c704a6 100644 --- a/src/client/themes/_light.json5 +++ b/src/client/themes/_light.json5 @@ -53,7 +53,8 @@ cwHoverBg: '#bbc4ce', buttonBg: 'rgba(0, 0, 0, 0.05)', buttonHoverBg: 'rgba(0, 0, 0, 0.1)', - inputBorder: '#dae0e4', + inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', listItemHoverBg: 'rgba(0, 0, 0, 0.03)', driveFolderBg: ':alpha<0.3<@accent', wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', diff --git a/src/client/themes/d-astro.json5 b/src/client/themes/d-astro.json5 index c9818f2c5c..74b90addd5 100644 --- a/src/client/themes/d-astro.json5 +++ b/src/client/themes/d-astro.json5 @@ -38,7 +38,8 @@ infoWarnFg: '#ffbd3e', navHoverFg: ':lighten<17<@fg', dateLabelFg: '@fg', - inputBorder: '#959da2', + inputBorder: 'rgba(255, 255, 255, 0.1)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', panelBorder: '" solid 1px var(--divider)', accentDarken: ':darken<10<@accent', acrylicPanel: ':alpha<0.5<@panel', diff --git a/src/client/themes/l-apricot.json5 b/src/client/themes/l-apricot.json5 index 5e98d79492..74cb24d407 100644 --- a/src/client/themes/l-apricot.json5 +++ b/src/client/themes/l-apricot.json5 @@ -16,6 +16,7 @@ mention: '@accent', hashtag: '@accent', inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', infoBg: 'rgb(226, 235, 241)', }, } diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5 index 0d6255d300..9fc04cd0d3 100644 --- a/src/client/themes/l-vivid.json5 +++ b/src/client/themes/l-vivid.json5 @@ -41,7 +41,8 @@ infoWarnFg: '#573c08', navHoverFg: ':darken<17<@fg', dateLabelFg: '@fg', - inputBorder: '#dae0e4', + inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', panelBorder: '" solid 1px var(--divider)', accentDarken: ':darken<10<@accent', acrylicPanel: ':alpha<0.5<@panel',