MisskeyPagesで変数を並べ替えられるように

This commit is contained in:
syuilo 2019-05-10 16:04:32 +09:00
parent 748e9f15df
commit 3126d0730a
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 20 additions and 16 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn"> <x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
<template #header><fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template> <template #header><fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
<template #func> <template #func>
<button @click="changeType()"> <button @click="changeType()">
@ -93,6 +93,10 @@ export default Vue.extend({
fnSlots: { fnSlots: {
required: false, required: false,
}, },
draggable: {
required: false,
default: false
}
}, },
data() { data() {

View file

@ -53,20 +53,19 @@
<ui-container :body-togglable="true"> <ui-container :body-togglable="true">
<template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template> <template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template>
<div class="qmuvgica"> <div class="qmuvgica">
<div class="variables" v-show="variables.length > 0"> <x-draggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template v-for="variable in variables"> <x-variable v-for="variable in variables"
<x-variable :value="variable"
:value="variable" :removable="true"
:removable="true" @input="v => updateVariable(v)"
@input="v => updateVariable(v)" @remove="() => removeVariable(variable)"
@remove="() => removeVariable(variable)" :key="variable.name"
:key="variable.name" :ai-script="aiScript"
:ai-script="aiScript" :name="variable.name"
:name="variable.name" :title="variable.name"
:title="variable.name" :draggable="true"
/> />
</template> </x-draggable>
</div>
<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button> <ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
@ -92,6 +91,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons'; import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons'; import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
@ -107,7 +107,7 @@ export default Vue.extend({
i18n: i18n('pages'), i18n: i18n('pages'),
components: { components: {
XVariable, XBlocks XDraggable, XVariable, XBlocks
}, },
props: { props: {