🎨
This commit is contained in:
syuilo
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkTextarea :value="text" readonly></MkTextarea>
|
||||
<MkTextarea :model-value="text" readonly></MkTextarea>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 }">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user