Improve MisskeyPages

This commit is contained in:
syuilo
2019-05-02 17:55:59 +09:00
parent 2fdec27ab0
commit 2d1f50303d
21 changed files with 248 additions and 176 deletions

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.button') }}</template>
<section class="xfhsjczc">

View File

@@ -0,0 +1,42 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.counter') }}</template>
<section style="padding: 0 16px 0 16px;">
<ui-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('blocks._counter.name') }}</span></ui-input>
<ui-input v-model="value.text"><span>{{ $t('blocks._counter.text') }}</span></ui-input>
<ui-input v-model="value.inc" type="number"><span>{{ $t('blocks._counter.increment') }}</span></ui-input>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
props: {
value: {
required: true
},
},
data() {
return {
faBolt, faMagic
};
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
},
});
</script>

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faQuestion"/> {{ $t('blocks.if') }}</template>
<template #func>
<button @click="add()">
@@ -19,9 +19,7 @@
</optgroup>
</ui-select>
<div class="children">
<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
</div>
<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
</section>
</x-container>
</template>
@@ -58,7 +56,7 @@ export default Vue.extend({
},
beforeCreate() {
this.$options.components.XBlock = require('../page-editor.block.vue').default
this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
},
created() {
@@ -81,27 +79,6 @@ export default Vue.extend({
const id = uuid.v4();
this.value.children.push({ id, type });
},
updateItem(v) {
const i = this.value.children.findIndex(x => x.id === v.id);
const newValue = [
...this.value.children.slice(0, i),
v,
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
},
remove(el) {
const i = this.value.children.findIndex(x => x.id === el.id);
const newValue = [
...this.value.children.slice(0, i),
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
}
}
});
</script>

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faImage"/> {{ $t('blocks.image') }}</template>
<template #func>
<button @click="choose()">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.numberInput') }}</template>
<section style="padding: 0 16px 0 16px;">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faPaperPlane"/> {{ $t('blocks.post') }}</template>
<section style="padding: 0 16px 16px 16px;">
@@ -33,10 +33,6 @@ export default Vue.extend({
};
},
beforeCreate() {
this.$options.components.XBlock = require('../page-editor.block.vue').default
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
},

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
<template #func>
<button @click="rename()">
@@ -11,9 +11,7 @@
</template>
<section class="ilrvjyvi">
<div class="children">
<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
</div>
<x-blocks class="children" v-model="value.children" :ai-script="aiScript"/>
</section>
</x-container>
</template>
@@ -51,7 +49,7 @@ export default Vue.extend({
},
beforeCreate() {
this.$options.components.XBlock = require('../page-editor.block.vue').default
this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
},
created() {
@@ -93,27 +91,6 @@ export default Vue.extend({
const id = uuid.v4();
this.value.children.push({ id, type });
},
updateItem(v) {
const i = this.value.children.findIndex(x => x.id === v.id);
const newValue = [
...this.value.children.slice(0, i),
v,
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
},
remove(el) {
const i = this.value.children.findIndex(x => x.id === el.id);
const newValue = [
...this.value.children.slice(0, i),
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
}
}
});
</script>

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.switch') }}</template>
<section class="kjuadyyj">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.textInput') }}</template>
<section style="padding: 0 16px 0 16px;">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.text') }}</template>
<section class="ihymsbbe">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('blocks.textareaInput') }}</template>
<section style="padding: 0 16px 16px 16px;">

View File

@@ -1,5 +1,5 @@
<template>
<x-container @remove="() => $emit('remove')">
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.textarea') }}</template>
<section class="ihymsbbe">