chore(client): refactor and style tweaks

This commit is contained in:
syuilo
2022-06-28 15:59:49 +09:00
parent 57bb6e611f
commit 270e1212ac
4 changed files with 250 additions and 358 deletions

View File

@@ -5,7 +5,7 @@
</p>
<ul>
<li v-for="(choice, i) in choices" :key="i">
<MkInput class="input" :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
</MkInput>
<button class="_button" @click="remove(i)">
<i class="fas fa-times"></i>
@@ -17,25 +17,25 @@
<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
<section>
<div>
<MkSelect v-model="expiration">
<MkSelect v-model="expiration" small>
<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="atDate" type="date" class="input">
<MkInput v-model="atDate" small type="date" class="input">
<template #label>{{ $ts._poll.deadlineDate }}</template>
</MkInput>
<MkInput v-model="atTime" type="time" class="input">
<MkInput v-model="atTime" small type="time" class="input">
<template #label>{{ $ts._poll.deadlineTime }}</template>
</MkInput>
</section>
<section v-else-if="expiration === 'after'">
<MkInput v-model="after" type="number" class="input">
<MkInput v-model="after" small type="number" class="input">
<template #label>{{ $ts._poll.duration }}</template>
</MkInput>
<MkSelect v-model="unit">
<MkSelect v-model="unit" small>
<option value="second">{{ $ts._time.second }}</option>
<option value="minute">{{ $ts._time.minute }}</option>
<option value="hour">{{ $ts._time.hour }}</option>
@@ -49,12 +49,12 @@
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { addTime } from '@/scripts/time';
import { formatDateTimeString } from '@/scripts/format-time-string';
import MkInput from './form/input.vue';
import MkSelect from './form/select.vue';
import MkSwitch from './form/switch.vue';
import MkButton from './ui/button.vue';
import { formatDateTimeString } from '@/scripts/format-time-string';
import { addTime } from '@/scripts/time';
const props = defineProps<{
modelValue: {
@@ -129,7 +129,7 @@ function get() {
...(
expiration.value === 'at' ? { expiresAt: calcAt() } :
expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
)
),
};
}