🎨
This commit is contained in:
parent
ff85eff209
commit
388ef3de08
25 changed files with 923 additions and 1293 deletions
|
|
@ -4,45 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MkStickyContainer>
|
||||
<template #header><XHeader :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
|
||||
<div class="_gaps_m">
|
||||
<div>{{ i18n.ts._serverRules.description }}</div>
|
||||
<Sortable
|
||||
v-model="serverRules"
|
||||
class="_gaps_m"
|
||||
:itemKey="(_, i) => i"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.itemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div :class="$style.item">
|
||||
<div :class="$style.itemHeader">
|
||||
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
|
||||
<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
<MkInput v-model="serverRules[index]"/>
|
||||
<PageWithHeader :tabs="headerTabs">
|
||||
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
|
||||
<div class="_gaps_m">
|
||||
<div>{{ i18n.ts._serverRules.description }}</div>
|
||||
<Sortable
|
||||
v-model="serverRules"
|
||||
class="_gaps_m"
|
||||
:itemKey="(_, i) => i"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.itemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div :class="$style.item">
|
||||
<div :class="$style.itemHeader">
|
||||
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
|
||||
<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div :class="$style.commands">
|
||||
<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
<MkInput v-model="serverRules[index]"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div :class="$style.commands">
|
||||
<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
</PageWithHeader>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, ref, computed } from 'vue';
|
||||
import XHeader from './_header_.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { fetchInstance, instance } from '@/instance.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue