sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(client): Use v-t for i18n

Browse Source
This commit is contained in:
syuilo
2020-07-25 01:36:39 +09:00
parent b8350d5093
commit 9c30b23358
108 changed files with 459 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/pages/instance/announcements.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="ztgjmzrw">
<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
<portal to="title">{{ $t('announcements') }}</portal>
<portal to="title" v-t="'announcements'"></portal>
<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
<section class="_card announcements">
<div class="_content announcement" v-for="announcement in announcements">
<mk-input v-model="announcement.title">
<span>{{ $t('title') }}</span>
<span v-t="'title'"></span>
</mk-input>
<mk-textarea v-model="announcement.text">
<span>{{ $t('text') }}</span>
<span v-t="'text'"></span>
</mk-textarea>
<mk-input v-model="announcement.imageUrl">
<span>{{ $t('imageUrl') }}</span>
<span v-t="'imageUrl'"></span>
</mk-input>
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
<div class="buttons">

14
src/client/pages/instance/emojis.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="mk-instance-emojis">
<portal to="icon"><fa :icon="faLaugh"/></portal>
<portal to="title">{{ $t('customEmojis') }}</portal>
<portal to="title" v-t="'customEmojis'"></portal>
<section class="_card local">
<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
<div class="_content">
<mk-pagination :pagination="pagination" class="emojis" ref="emojis">
<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
<template #empty><span v-t="'noCustomEmojis'"></span></template>
<template #default="{items}">
<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
@@ -23,9 +23,9 @@
</mk-pagination>
</div>
<div class="_content" v-if="selected">
<mk-input v-model="name"><span>{{ $t('name') }}</span></mk-input>
<mk-input v-model="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
<mk-input v-model="aliases"><span>{{ $t('tags') }}</span></mk-input>
<mk-input v-model="name"><span v-t="'name'"></span></mk-input>
<mk-input v-model="category" :datalist="categories"><span v-t="'category'"></span></mk-input>
<mk-input v-model="aliases"><span v-t="'tags'"></span></mk-input>
<mk-button inline primary @click="update"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
</div>
@@ -36,9 +36,9 @@
<section class="_card remote">
<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
<div class="_content">
<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
<mk-input v-model="host" :debounce="true"><span v-t="'host'"></span></mk-input>
<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
<template #empty><span v-t="'noCustomEmojis'"></span></template>
<template #default="{items}">
<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
<img :src="emoji.url" class="img" :alt="emoji.name"/>

44
src/client/pages/instance/federation.instance.vue
View File

@@ -5,11 +5,11 @@
<div class="table info">
<div class="row">
<div class="cell">
<div class="label">{{ $t('software') }}</div>
<div class="label" v-t="'software'"></div>
<div class="data">{{ instance.softwareName || '?' }}</div>
</div>
<div class="cell">
<div class="label">{{ $t('version') }}</div>
<div class="label" v-t="'version'"></div>
<div class="data">{{ instance.softwareVersion || '?' }}</div>
</div>
</div>
@@ -70,24 +70,24 @@
</div>
<div class="chart">
<div class="header">
<span class="label">{{ $t('charts') }}</span>
<span class="label" v-t="'charts'"></span>
<div class="selects">
<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
<option value="requests">{{ $t('_instanceCharts.requests') }}</option>
<option value="users">{{ $t('_instanceCharts.users') }}</option>
<option value="users-total">{{ $t('_instanceCharts.usersTotal') }}</option>
<option value="notes">{{ $t('_instanceCharts.notes') }}</option>
<option value="notes-total">{{ $t('_instanceCharts.notesTotal') }}</option>
<option value="ff">{{ $t('_instanceCharts.ff') }}</option>
<option value="ff-total">{{ $t('_instanceCharts.ffTotal') }}</option>
<option value="drive-usage">{{ $t('_instanceCharts.cacheSize') }}</option>
<option value="drive-usage-total">{{ $t('_instanceCharts.cacheSizeTotal') }}</option>
<option value="drive-files">{{ $t('_instanceCharts.files') }}</option>
<option value="drive-files-total">{{ $t('_instanceCharts.filesTotal') }}</option>
<option value="requests" v-t="'_instanceCharts.requests'"></option>
<option value="users" v-t="'_instanceCharts.users'"></option>
<option value="users-total" v-t="'_instanceCharts.usersTotal'"></option>
<option value="notes" v-t="'_instanceCharts.notes'"></option>
<option value="notes-total" v-t="'_instanceCharts.notesTotal'"></option>
<option value="ff" v-t="'_instanceCharts.ff'"></option>
<option value="ff-total" v-t="'_instanceCharts.ffTotal'"></option>
<option value="drive-usage" v-t="'_instanceCharts.cacheSize'"></option>
<option value="drive-usage-total" v-t="'_instanceCharts.cacheSizeTotal'"></option>
<option value="drive-files" v-t="'_instanceCharts.files'"></option>
<option value="drive-files-total" v-t="'_instanceCharts.filesTotal'"></option>
</mk-select>
<mk-select v-model="chartSpan" style="margin: 0;">
<option value="hour">{{ $t('perHour') }}</option>
<option value="day">{{ $t('perDay') }}</option>
<option value="hour" v-t="'perHour'"></option>
<option value="day" v-t="'perDay'"></option>
</mk-select>
</div>
</div>
@@ -96,21 +96,21 @@
</div>
</div>
<div class="operations">
<span class="label">{{ $t('operations') }}</span>
<mk-switch v-model="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
<mk-switch :value="isBlocked" class="switch" @change="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
<span class="label" v-t="'operations'"></span>
<mk-switch v-model="isSuspended" class="switch" v-t="'stopActivityDelivery'"></mk-switch>
<mk-switch :value="isBlocked" class="switch" @change="changeBlock" v-t="'blockThisInstance'"></mk-switch>
<details>
<summary>{{ $t('deleteAllFiles') }}</summary>
<summary v-t="'deleteAllFiles'"></summary>
<mk-button @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faTrashAlt"/> {{ $t('deleteAllFiles') }}</mk-button>
</details>
<details>
<summary>{{ $t('removeAllFollowing') }}</summary>
<summary v-t="'removeAllFollowing'"></summary>
<mk-button @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faMinusCircle"/> {{ $t('removeAllFollowing') }}</mk-button>
<mk-info warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</mk-info>
</details>
</div>
<details class="metadata">
<summary class="label">{{ $t('metadata') }}</summary>
<summary class="label" v-t="'metadata'"></summary>
<pre><code>{{ JSON.stringify(instance, null, 2) }}</code></pre>
</details>
</div>

18
src/client/pages/instance/federation.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="mk-federation">
<portal to="icon"><fa :icon="faGlobe"/></portal>
<portal to="title">{{ $t('federation') }}</portal>
<portal to="title" v-t="'federation'"></portal>
<section class="_card instances">
<div class="_content">
<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
<mk-input v-model="host" :debounce="true"><span v-t="'host'"></span></mk-input>
<div class="inputs" style="display: flex;">
<mk-select v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ $t('state') }}</template>
<option value="all">{{ $t('all') }}</option>
<option value="federating">{{ $t('federating') }}</option>
<option value="subscribing">{{ $t('subscribing') }}</option>
<option value="publishing">{{ $t('publishing') }}</option>
<option value="suspended">{{ $t('suspended') }}</option>
<option value="blocked">{{ $t('blocked') }}</option>
<option value="notResponding">{{ $t('notResponding') }}</option>
<option value="all" v-t="'all'"></option>
<option value="federating" v-t="'federating'"></option>
<option value="subscribing" v-t="'subscribing'"></option>
<option value="publishing" v-t="'publishing'"></option>
<option value="suspended" v-t="'suspended'"></option>
<option value="blocked" v-t="'blocked'"></option>
<option value="notResponding" v-t="'notResponding'"></option>
</mk-select>
<mk-select v-model="sort" style="margin: 0; flex: 1;">
<template #label>{{ $t('sort') }}</template>

16
src/client/pages/instance/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="meta" class="xhexznfu">
<portal to="icon"><fa :icon="faServer"/></portal>
<portal to="title">{{ $t('instance') }}</portal>
<portal to="title" v-t="'instance'"></portal>
<mk-instance-stats style="margin-bottom: var(--margin);"/>
@@ -10,16 +10,16 @@
<div class="_content">
<div class="_inputs">
<mk-input v-model="logDomain" :debounce="true">
<span>{{ $t('domain') }}</span>
<span v-t="'domain'"></span>
</mk-input>
<mk-select v-model="logLevel">
<template #label>{{ $t('level') }}</template>
<option value="all">{{ $t('levels.all') }}</option>
<option value="info">{{ $t('levels.info') }}</option>
<option value="success">{{ $t('levels.success') }}</option>
<option value="warning">{{ $t('levels.warning') }}</option>
<option value="error">{{ $t('levels.error') }}</option>
<option value="debug">{{ $t('levels.debug') }}</option>
<option value="all" v-t="'levels.all'"></option>
<option value="info" v-t="'levels.info'"></option>
<option value="success" v-t="'levels.success'"></option>
<option value="warning" v-t="'levels.warning'"></option>
<option value="error" v-t="'levels.error'"></option>
<option value="debug" v-t="'levels.debug'"></option>
</mk-select>
</div>

2
src/client/pages/instance/queue.queue.vue
View File

@@ -17,7 +17,7 @@
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
</div>
</div>
<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
<span v-else style="opacity: 0.5;" v-t="'noJobs'"></span>
</div>
</section>
</template>

2
src/client/pages/instance/queue.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<portal to="icon"><fa :icon="faExchangeAlt"/></portal>
<portal to="title">{{ $t('jobQueue') }}</portal>
<portal to="title" v-t="'jobQueue'"></portal>
<x-queue :connection="connection" domain="inbox">
<template #title><fa :icon="faExchangeAlt"/> In</template>

4
src/client/pages/instance/relays.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="relaycxt">
<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
<portal to="title">{{ $t('relays') }}</portal>
<portal to="title" v-t="'relays'"></portal>
<section class="_card add">
<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
<div class="_content">
<mk-input v-model="inbox">
<span>{{ $t('inboxUrl') }}</span>
<span v-t="'inboxUrl'"></span>
</mk-input>
<mk-button @click="add(inbox)" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
</div>

36
src/client/pages/instance/settings.vue
View File

@@ -1,17 +1,17 @@
<template>
<div v-if="meta">
<portal to="icon"><fa :icon="faCog"/></portal>
<portal to="title">{{ $t('settings') }}</portal>
<portal to="title" v-t="'settings'"></portal>
<section class="_card info">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
<div class="_content">
<mk-input v-model="name">{{ $t('instanceName') }}</mk-input>
<mk-textarea v-model="description">{{ $t('instanceDescription') }}</mk-textarea>
<mk-input v-model="name" v-t="'instanceName'"></mk-input>
<mk-textarea v-model="description" v-t="'instanceDescription'"></mk-textarea>
<mk-input v-model="iconUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('iconUrl') }}</mk-input>
<mk-input v-model="bannerUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</mk-input>
<mk-input v-model="tosUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('tosUrl') }}</mk-input>
<mk-input v-model="maintainerName">{{ $t('maintainerName') }}</mk-input>
<mk-input v-model="maintainerName" v-t="'maintainerName'"></mk-input>
<mk-input v-model="maintainerEmail" type="email"><template #icon><fa :icon="faEnvelope"/></template>{{ $t('maintainerEmail') }}</mk-input>
</div>
<div class="_footer">
@@ -24,8 +24,8 @@
<mk-input v-model="maxNoteTextLength" type="number" :save="() => save()" style="margin:0;"><template #icon><fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</mk-input>
</div>
<div class="_content">
<mk-switch v-model="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
<mk-switch v-model="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
<mk-switch v-model="enableLocalTimeline" @change="save()" v-t="'enableLocalTimeline'"></mk-switch>
<mk-switch v-model="enableGlobalTimeline" @change="save()" v-t="'enableGlobalTimeline'"></mk-switch>
<mk-info>{{ $t('disablingTimelinesInfo') }}</mk-info>
</div>
</section>
@@ -33,22 +33,22 @@
<section class="_card info">
<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div>
<div class="_content">
<mk-switch v-model="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
<mk-button v-if="!enableRegistration" @click="invite">{{ $t('invite') }}</mk-button>
<mk-switch v-model="enableRegistration" @change="save()" v-t="'enableRegistration'"></mk-switch>
<mk-button v-if="!enableRegistration" @click="invite" v-t="'invite'"></mk-button>
</div>
</section>
<section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
<div class="_content">
<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha" v-t="'enableHcaptcha'"></mk-switch>
<template v-if="enableHcaptcha">
<mk-input v-model="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
<mk-input v-model="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
</template>
</div>
<div class="_content" v-if="enableHcaptcha">
<header>{{ $t('preview') }}</header>
<header v-t="'preview'"></header>
<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
</div>
<div class="_footer">
@@ -59,14 +59,14 @@
<section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
<div class="_content">
<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha" v-t="'enableRecaptcha'"></mk-switch>
<template v-if="enableRecaptcha">
<mk-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
<mk-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
</template>
</div>
<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
<header>{{ $t('preview') }}</header>
<header v-t="'preview'"></header>
<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
</div>
<div class="_footer">
@@ -94,7 +94,7 @@
<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
<div class="_content">
<mk-textarea v-model="pinnedUsers">
<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser">{{ $t('addUser') }}</button></template>
<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser" v-t="'addUser'"></button></template>
</mk-textarea>
</div>
<div class="_footer">
@@ -118,7 +118,7 @@
<section class="_card">
<div class="_title"><fa :icon="faCloud"/> {{ $t('objectStorage') }}</div>
<div class="_content">
<mk-switch v-model="useObjectStorage">{{ $t('useObjectStorage') }}</mk-switch>
<mk-switch v-model="useObjectStorage" v-t="'useObjectStorage'"></mk-switch>
<template v-if="useObjectStorage">
<mk-input v-model="objectStorageBaseUrl" :disabled="!useObjectStorage">{{ $t('objectStorageBaseUrl') }}<template #desc>{{ $t('objectStorageBaseUrlDesc') }}</template></mk-input>
<div class="_inputs">
@@ -146,7 +146,7 @@
<div class="_title"><fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div>
<div class="_content">
<mk-input :value="proxyAccount ? proxyAccount.username : null" style="margin: 0;" disabled><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></mk-input>
<mk-button primary @click="chooseProxyAccount">{{ $t('chooseProxyAccount') }}</mk-button>
<mk-button primary @click="chooseProxyAccount" v-t="'chooseProxyAccount'"></mk-button>
</div>
</section>
@@ -166,7 +166,7 @@
<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
<div class="_content">
<header><fa :icon="faTwitter"/> Twitter</header>
<mk-switch v-model="enableTwitterIntegration">{{ $t('enable') }}</mk-switch>
<mk-switch v-model="enableTwitterIntegration" v-t="'enable'"></mk-switch>
<template v-if="enableTwitterIntegration">
<mk-info>Callback URL: {{ `${url}/api/tw/cb` }}</mk-info>
<mk-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Key</mk-input>
@@ -175,7 +175,7 @@
</div>
<div class="_content">
<header><fa :icon="faGithub"/> GitHub</header>
<mk-switch v-model="enableGithubIntegration">{{ $t('enable') }}</mk-switch>
<mk-switch v-model="enableGithubIntegration" v-t="'enable'"></mk-switch>
<template v-if="enableGithubIntegration">
<mk-info>Callback URL: {{ `${url}/api/gh/cb` }}</mk-info>
<mk-input v-model="githubClientId" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
@@ -184,7 +184,7 @@
</div>
<div class="_content">
<header><fa :icon="faDiscord"/> Discord</header>
<mk-switch v-model="enableDiscordIntegration">{{ $t('enable') }}</mk-switch>
<mk-switch v-model="enableDiscordIntegration" v-t="'enable'"></mk-switch>
<template v-if="enableDiscordIntegration">
<mk-info>Callback URL: {{ `${url}/api/dc/cb` }}</mk-info>
<mk-input v-model="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>

6
src/client/pages/instance/users.user.vue
View File

@@ -15,9 +15,9 @@
</div>
<div class="_content actions">
<div style="flex: 1; padding-left: 1em;">
<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator">{{ $t('moderator') }}</mk-switch>
<mk-switch @change="toggleSilence()" v-model="silenced">{{ $t('silence') }}</mk-switch>
<mk-switch @change="toggleSuspend()" v-model="suspended">{{ $t('suspend') }}</mk-switch>
<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator" v-t="'moderator'"></mk-switch>
<mk-switch @change="toggleSilence()" v-model="silenced" v-t="'silence'"></mk-switch>
<mk-switch @change="toggleSuspend()" v-model="suspended" v-t="'suspend'"></mk-switch>
</div>
<div style="flex: 1; padding-left: 1em;">
<mk-button @click="openProfile"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('profile')}}</mk-button>

26
src/client/pages/instance/users.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="mk-instance-users">
<portal to="icon"><fa :icon="faUsers"/></portal>
<portal to="title">{{ $t('users') }}</portal>
<portal to="title" v-t="'users'"></portal>
<section class="_card lookup">
<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
<div class="_content">
<mk-input class="target" v-model="target" type="text" @enter="showUser()">
<span>{{ $t('usernameOrUserId') }}</span>
<span v-t="'usernameOrUserId'"></span>
</mk-input>
<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
</div>
@@ -29,26 +29,26 @@
</mk-select>
<mk-select v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ $t('state') }}</template>
<option value="all">{{ $t('all') }}</option>
<option value="available">{{ $t('normal') }}</option>
<option value="admin">{{ $t('administrator') }}</option>
<option value="moderator">{{ $t('moderator') }}</option>
<option value="silenced">{{ $t('silence') }}</option>
<option value="suspended">{{ $t('suspend') }}</option>
<option value="all" v-t="'all'"></option>
<option value="available" v-t="'normal'"></option>
<option value="admin" v-t="'administrator'"></option>
<option value="moderator" v-t="'moderator'"></option>
<option value="silenced" v-t="'silence'"></option>
<option value="suspended" v-t="'suspend'"></option>
</mk-select>
<mk-select v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ $t('instance') }}</template>
<option value="combined">{{ $t('all') }}</option>
<option value="local">{{ $t('local') }}</option>
<option value="remote">{{ $t('remote') }}</option>
<option value="combined" v-t="'all'"></option>
<option value="local" v-t="'local'"></option>
<option value="remote" v-t="'remote'"></option>
</mk-select>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<mk-input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()">
<span>{{ $t('username') }}</span>
<span v-t="'username'"></span>
</mk-input>
<mk-input v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $t('host') }}</span>
<span v-t="'host'"></span>
</mk-input>
</div>
</div>