sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to Vue3 (#6587)

Browse Source 
* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160a.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip
This commit is contained in:
syuilo
2020-10-17 20:12:00 +09:00
committed by GitHub
parent a40f38b2b5
commit 7199e6f4e0
357 changed files with 15053 additions and 12496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/client/pages/page-editor/els/page-editor.el.button.vue
View File

@@ -1,24 +1,24 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>
<section class="xfhsjczc">
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></mk-input>
<mk-switch v-model="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></mk-switch>
<mk-select v-model="value.action">
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></MkInput>
<MkSwitch v-model:value="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></MkSwitch>
<MkSelect v-model:value="value.action">
<template #label>{{ $t('_pages.blocks._button.action') }}</template>
<option value="dialog">{{ $t('_pages.blocks._button._action.dialog') }}</option>
<option value="resetRandom">{{ $t('_pages.blocks._button._action.resetRandom') }}</option>
<option value="pushEvent">{{ $t('_pages.blocks._button._action.pushEvent') }}</option>
<option value="callAiScript">{{ $t('_pages.blocks._button._action.callAiScript') }}</option>
</mk-select>
</MkSelect>
<template v-if="value.action === 'dialog'">
<mk-input v-model="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></mk-input>
<MkInput v-model:value="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></MkInput>
</template>
<template v-else-if="value.action === 'pushEvent'">
<mk-input v-model="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></mk-input>
<mk-input v-model="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></mk-input>
<mk-select v-model="value.var">
<MkInput v-model:value="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></MkInput>
<MkInput v-model:value="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></MkInput>
<MkSelect v-model:value="value.var">
<template #label>{{ $t('_pages.blocks._button._action._pushEvent.variable') }}</template>
<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
@@ -28,24 +28,25 @@
<optgroup :label="$t('_pages.script.enviromentVariables')">
<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
</optgroup>
</mk-select>
</MkSelect>
</template>
<template v-else-if="value.action === 'callAiScript'">
<mk-input v-model="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></mk-input>
<MkInput v-model:value="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></MkInput>
</template>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkSelect from '../../../components/ui/select.vue';
import MkInput from '../../../components/ui/input.vue';
import MkSwitch from '../../../components/ui/switch.vue';
import MkSelect from '@/components/ui/select.vue';
import MkInput from '@/components/ui/input.vue';
import MkSwitch from '@/components/ui/switch.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkSelect, MkInput, MkSwitch
},
@@ -66,14 +67,14 @@ export default Vue.extend({
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
if (this.value.action == null) Vue.set(this.value, 'action', 'dialog');
if (this.value.content == null) Vue.set(this.value, 'content', null);
if (this.value.event == null) Vue.set(this.value, 'event', null);
if (this.value.message == null) Vue.set(this.value, 'message', null);
if (this.value.primary == null) Vue.set(this.value, 'primary', false);
if (this.value.var == null) Vue.set(this.value, 'var', null);
if (this.value.fn == null) Vue.set(this.value, 'fn', null);
if (this.value.text == null) this.value.text = '';
if (this.value.action == null) this.value.action = 'dialog';
if (this.value.content == null) this.value.content = null;
if (this.value.event == null) this.value.event = null;
if (this.value.message == null) this.value.message = null;
if (this.value.primary == null) this.value.primary = false;
if (this.value.var == null) this.value.var = null;
if (this.value.fn == null) this.value.fn = null;
},
});
</script>

25
src/client/pages/page-editor/els/page-editor.el.canvas.vue
View File

@@ -1,22 +1,23 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>
<section style="padding: 0 16px 0 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></mk-input>
<mk-input v-model="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></mk-input>
<mk-input v-model="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></mk-input>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></MkInput>
<MkInput v-model:value="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></MkInput>
<MkInput v-model:value="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faPaintBrush, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkInput from '../../../components/ui/input.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkInput
},
@@ -34,9 +35,9 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.width == null) Vue.set(this.value, 'width', 300);
if (this.value.height == null) Vue.set(this.value, 'height', 200);
if (this.value.name == null) this.value.name = '';
if (this.value.width == null) this.value.width = 300;
if (this.value.height == null) this.value.height = 200;
},
});
</script>

21
src/client/pages/page-editor/els/page-editor.el.counter.vue
View File

@@ -1,22 +1,23 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>
<section style="padding: 0 16px 0 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></mk-input>
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></mk-input>
<mk-input v-model="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></mk-input>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></MkInput>
<MkInput v-model:value="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkInput from '../../../components/ui/input.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkInput
},
@@ -34,7 +35,7 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.name == null) this.value.name = '';
},
});
</script>

27
src/client/pages/page-editor/els/page-editor.el.if.vue
View File

@@ -1,14 +1,14 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faQuestion"/> {{ $t('_pages.blocks.if') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faQuestion"/> {{ $t('_pages.blocks.if') }}</template>
<template #func>
<button @click="add()" class="_button">
<fa :icon="faPlus"/>
<Fa :icon="faPlus"/>
</button>
</template>
<section class="romcojzs">
<mk-select v-model="value.var">
<MkSelect v-model:value="value.var">
<template #label>{{ $t('_pages.blocks._if.variable') }}</template>
<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
<optgroup :label="$t('_pages.script.pageVariables')">
@@ -17,21 +17,22 @@
<optgroup :label="$t('_pages.script.enviromentVariables')">
<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
</optgroup>
</mk-select>
</MkSelect>
<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkSelect from '../../../components/ui/select.vue';
import MkSelect from '@/components/ui/select.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkSelect
},
@@ -58,13 +59,13 @@ export default Vue.extend({
},
created() {
if (this.value.children == null) Vue.set(this.value, 'children', []);
if (this.value.var === undefined) Vue.set(this.value, 'var', null);
if (this.value.children == null) this.value.children = [];
if (this.value.var === undefined) this.value.var = null;
},
methods: {
async add() {
const { canceled, result: type } = await this.$root.dialog({
const { canceled, result: type } = await os.dialog({
type: null,
title: this.$t('_pages.chooseBlock'),
select: {

26
src/client/pages/page-editor/els/page-editor.el.image.vue
View File

@@ -1,29 +1,29 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faImage"/> {{ $t('_pages.blocks.image') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faImage"/> {{ $t('_pages.blocks.image') }}</template>
<template #func>
<button @click="choose()">
<fa :icon="faFolderOpen"/>
<Fa :icon="faFolderOpen"/>
</button>
</template>
<section class="oyyftmcf">
<mk-file-thumbnail class="preview" v-if="file" :file="file" fit="contain" @click="choose()"/>
<MkDriveFileThumbnail class="preview" v-if="file" :file="file" fit="contain" @click="choose()"/>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkFileThumbnail from '../../../components/drive-file-thumbnail.vue';
import { selectDriveFile } from '../../../scripts/select-drive-file';
import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkFileThumbnail
XContainer, MkDriveFileThumbnail
},
props: {
@@ -40,14 +40,14 @@ export default Vue.extend({
},
created() {
if (this.value.fileId === undefined) Vue.set(this.value, 'fileId', null);
if (this.value.fileId === undefined) this.value.fileId = null;
},
mounted() {
if (this.value.fileId == null) {
this.choose();
} else {
this.$root.api('drive/files/show', {
os.api('drive/files/show', {
fileId: this.value.fileId
}).then(file => {
this.file = file;
@@ -57,7 +57,7 @@ export default Vue.extend({
methods: {
async choose() {
selectDriveFile(this.$root, false).then(file => {
os.selectDriveFile(false).then(file => {
this.file = file;
this.value.fileId = file.id;
});

21
src/client/pages/page-editor/els/page-editor.el.number-input.vue
View File

@@ -1,22 +1,23 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>
<section style="padding: 0 16px 0 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></mk-input>
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></mk-input>
<mk-input v-model="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></mk-input>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></MkInput>
<MkInput v-model:value="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkInput from '../../../components/ui/input.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkInput
},
@@ -34,7 +35,7 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.name == null) this.value.name = '';
},
});
</script>

29
src/client/pages/page-editor/els/page-editor.el.post.vue
View File

@@ -1,24 +1,25 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>
<section style="padding: 16px;">
<mk-textarea v-model="value.text">{{ $t('_pages.blocks._post.text') }}</mk-textarea>
<mk-switch v-model="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></mk-switch>
<mk-input v-if="value.attachCanvasImage" v-model="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></mk-input>
<MkTextarea v-model:value="value.text">{{ $t('_pages.blocks._post.text') }}</MkTextarea>
<MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></MkSwitch>
<MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '../../../components/ui/textarea.vue';
import MkInput from '../../../components/ui/input.vue';
import MkSwitch from '../../../components/ui/switch.vue';
import MkTextarea from '@/components/ui/textarea.vue';
import MkInput from '@/components/ui/input.vue';
import MkSwitch from '@/components/ui/switch.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkTextarea, MkInput, MkSwitch
},
@@ -36,9 +37,9 @@ export default Vue.extend({
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
if (this.value.attachCanvasImage == null) Vue.set(this.value, 'attachCanvasImage', false);
if (this.value.canvasId == null) Vue.set(this.value, 'canvasId', '');
if (this.value.text == null) this.value.text = '';
if (this.value.attachCanvasImage == null) this.value.attachCanvasImage = false;
if (this.value.canvasId == null) this.value.canvasId = '';
},
});
</script>

36
src/client/pages/page-editor/els/page-editor.el.radio-button.vue
View File

@@ -1,24 +1,25 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>
<section style="padding: 0 16px 16px 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></mk-input>
<mk-input v-model="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></mk-input>
<mk-textarea v-model="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></mk-textarea>
<mk-input v-model="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></mk-input>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></MkInput>
<MkInput v-model:value="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></MkInput>
<MkTextarea v-model:value="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></MkTextarea>
<MkInput v-model:value="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '../../../components/ui/textarea.vue';
import MkInput from '../../../components/ui/input.vue';
import MkTextarea from '@/components/ui/textarea.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkTextarea, MkInput
},
@@ -34,14 +35,17 @@ export default Vue.extend({
};
},
watch: {
values() {
Vue.set(this.value, 'values', this.values.split('\n'));
values: {
handler() {
this.value.values = this.values.split('\n');
},
deep: true
}
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.title == null) Vue.set(this.value, 'title', '');
if (this.value.values == null) Vue.set(this.value, 'values', []);
if (this.value.name == null) this.value.name = '';
if (this.value.title == null) this.value.title = '';
if (this.value.values == null) this.value.values = [];
this.values = this.value.values.join('\n');
},
});

25
src/client/pages/page-editor/els/page-editor.el.section.vue
View File

@@ -1,29 +1,30 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faStickyNote"/> {{ value.title }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faStickyNote"/> {{ value.title }}</template>
<template #func>
<button @click="rename()" class="_button">
<fa :icon="faPencilAlt"/>
<Fa :icon="faPencilAlt"/>
</button>
<button @click="add()" class="_button">
<fa :icon="faPlus"/>
<Fa :icon="faPlus"/>
</button>
</template>
<section class="ilrvjyvi">
<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer
},
@@ -50,8 +51,8 @@ export default Vue.extend({
},
created() {
if (this.value.title == null) Vue.set(this.value, 'title', null);
if (this.value.children == null) Vue.set(this.value, 'children', []);
if (this.value.title == null) this.value.title = null;
if (this.value.children == null) this.value.children = [];
},
mounted() {
@@ -62,7 +63,7 @@ export default Vue.extend({
methods: {
async rename() {
const { canceled, result: title } = await this.$root.dialog({
const { canceled, result: title } = await os.dialog({
title: 'Enter title',
input: {
type: 'text',
@@ -75,7 +76,7 @@ export default Vue.extend({
},
async add() {
const { canceled, result: type } = await this.$root.dialog({
const { canceled, result: type } = await os.dialog({
type: null,
title: this.$t('_pages.chooseBlock'),
select: {

23
src/client/pages/page-editor/els/page-editor.el.switch.vue
View File

@@ -1,23 +1,24 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>
<section class="kjuadyyj">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></mk-input>
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></mk-input>
<mk-switch v-model="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></mk-switch>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></MkInput>
<MkSwitch v-model:value="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></MkSwitch>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkSwitch from '../../../components/ui/switch.vue';
import MkInput from '../../../components/ui/input.vue';
import MkSwitch from '@/components/ui/switch.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkSwitch, MkInput
},
@@ -35,7 +36,7 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.name == null) this.value.name = '';
},
});
</script>

21
src/client/pages/page-editor/els/page-editor.el.text-input.vue
View File

@@ -1,22 +1,23 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>
<section style="padding: 0 16px 0 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></mk-input>
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></mk-input>
<mk-input v-model="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></mk-input>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></MkInput>
<MkInput v-model:value="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></MkInput>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkInput from '../../../components/ui/input.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkInput
},
@@ -34,7 +35,7 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.name == null) this.value.name = '';
},
});
</script>

13
src/client/pages/page-editor/els/page-editor.el.text.vue
View File

@@ -1,19 +1,20 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.text') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.text') }}</template>
<section class="vckmsadr">
<textarea v-model="value.text"></textarea>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer
},
@@ -31,7 +32,7 @@ export default Vue.extend({
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
if (this.value.text == null) this.value.text = '';
},
});
</script>

23
src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
View File

@@ -1,23 +1,24 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>
<section style="padding: 0 16px 16px 16px;">
<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></mk-input>
<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></mk-input>
<mk-textarea v-model="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></mk-textarea>
<MkInput v-model:value="value.name"><template #prefix><Fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></MkInput>
<MkTextarea v-model:value="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></MkTextarea>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '../../../components/ui/textarea.vue';
import MkInput from '../../../components/ui/input.vue';
import MkTextarea from '@/components/ui/textarea.vue';
import MkInput from '@/components/ui/input.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkTextarea, MkInput
},
@@ -35,7 +36,7 @@ export default Vue.extend({
},
created() {
if (this.value.name == null) Vue.set(this.value, 'name', '');
if (this.value.name == null) this.value.name = '';
},
});
</script>

13
src/client/pages/page-editor/els/page-editor.el.textarea.vue
View File

@@ -1,19 +1,20 @@
<template>
<x-container @remove="() => $emit('remove')" :draggable="true">
<template #header><fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.textarea') }}</template>
<XContainer @remove="() => $emit('remove')" :draggable="true">
<template #header><Fa :icon="faAlignLeft"/> {{ $t('_pages.blocks.textarea') }}</template>
<section class="ihymsbbe">
<textarea v-model="value.text"></textarea>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer
},
@@ -31,7 +32,7 @@ export default Vue.extend({
},
created() {
if (this.value.text == null) Vue.set(this.value, 'text', '');
if (this.value.text == null) this.value.text = '';
},
});
</script>

19
src/client/pages/page-editor/page-editor.blocks.vue
View File

@@ -1,12 +1,11 @@
<template>
<x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @input="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
</x-draggable>
<XDraggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
</XDraggable>
</template>
<script lang="ts">
import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import { defineComponent, defineAsyncComponent } from 'vue';
import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue';
import XTextarea from './els/page-editor.el.textarea.vue';
@@ -21,10 +20,12 @@ import XPost from './els/page-editor.el.post.vue';
import XCounter from './els/page-editor.el.counter.vue';
import XRadioButton from './els/page-editor.el.radio-button.vue';
import XCanvas from './els/page-editor.el.canvas.vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
},
props: {
@@ -51,7 +52,7 @@ export default Vue.extend({
v,
...this.blocks.slice(i + 1)
];
this.$emit('input', newValue);
this.$emit('update:value', newValue);
},
removeItem(el) {
@@ -60,7 +61,7 @@ export default Vue.extend({
...this.blocks.slice(0, i),
...this.blocks.slice(i + 1)
];
this.$emit('input', newValue);
this.$emit('update:value', newValue);
},
}
});

15
src/client/pages/page-editor/page-editor.container.vue
View File

@@ -5,14 +5,14 @@
<div class="buttons">
<slot name="func"></slot>
<button v-if="removable" @click="remove()" class="_button">
<fa :icon="faTrashAlt"/>
<Fa :icon="faTrashAlt"/>
</button>
<button v-if="draggable" class="drag-handle _button">
<fa :icon="faBars"/>
<Fa :icon="faBars"/>
</button>
<button @click="toggleContent(!showBody)" class="_button">
<template v-if="showBody"><fa :icon="faAngleUp"/></template>
<template v-else><fa :icon="faAngleDown"/></template>
<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
<template v-else><Fa :icon="faAngleDown"/></template>
</button>
</div>
</header>
@@ -25,11 +25,12 @@
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faBars, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
props: {
expanded: {
type: Boolean,
@@ -147,7 +148,7 @@ export default Vue.extend({
}
> .body {
::v-deep .juejbjww, ::v-deep .eiipwacr {
::v-deep(.juejbjww), ::v-deep(.eiipwacr) {
&:not(.inline):first-child {
margin-top: 28px;
}

61
src/client/pages/page-editor/page-editor.script-block.vue
View File

@@ -1,9 +1,9 @@
<template>
<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>
<XContainer :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 #func>
<button @click="changeType()" class="_button">
<fa :icon="faPencilAlt"/>
<Fa :icon="faPencilAlt"/>
</button>
</template>
@@ -40,30 +40,31 @@
<input v-model="value.value"/>
</section>
<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
<mk-textarea v-model="slots">
<MkTextarea v-model:value="slots">
<span>{{ $t('_pages.script.blocks._fn.slots') }}</span>
<template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
</mk-textarea>
<x-v v-if="value.value.expression" v-model="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
</MkTextarea>
<XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
</section>
<section v-else-if="value.type.startsWith('fn:')" class="" style="padding:16px;">
<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="hpml.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/>
<XV v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="hpml.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/>
</section>
<section v-else class="" style="padding:16px;">
<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="$t(`_pages.script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
<XV v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="$t(`_pages.script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
</section>
</x-container>
</XContainer>
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
import { v4 as uuid } from 'uuid';
import XContainer from './page-editor.container.vue';
import MkTextarea from '../../components/ui/textarea.vue';
import { isLiteralBlock, funcDefs, blockDefs } from '../../scripts/hpml/index';
import MkTextarea from '@/components/ui/textarea.vue';
import { isLiteralBlock, funcDefs, blockDefs } from '@/scripts/hpml/index';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XContainer, MkTextarea
},
@@ -123,11 +124,14 @@ export default Vue.extend({
},
watch: {
slots() {
this.value.value.slots = this.slots.split('\n').map(x => ({
name: x,
type: null
}));
slots: {
handler() {
this.value.value.slots = this.slots.split('\n').map(x => ({
name: x,
type: null
}));
},
deep: true
}
},
@@ -136,18 +140,19 @@ export default Vue.extend({
},
created() {
if (this.value.value == null) Vue.set(this.value, 'value', null);
if (this.value.value == null) this.value.value = null;
if (this.value.value && this.value.value.slots) this.slots = this.value.value.slots.map(x => x.name).join('\n');
this.$watch('value.type', (t) => {
this.$watch(() => this.value.type, (t) => {
this.warn = null;
if (this.value.type === 'fn') {
const id = uuid();
this.value.value = {};
Vue.set(this.value.value, 'slots', []);
Vue.set(this.value.value, 'expression', { id, type: null });
this.value.value = {
slots: [],
expression: { id, type: null }
};
return;
}
@@ -160,7 +165,7 @@ export default Vue.extend({
const id = uuid();
empties.push({ id, type: null });
}
Vue.set(this.value, 'args', empties);
this.value.args = empties;
return;
}
@@ -171,7 +176,7 @@ export default Vue.extend({
const id = uuid();
empties.push({ id, type: null });
}
Vue.set(this.value, 'args', empties);
this.value.args = empties;
for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
const inType = funcDefs[this.value.type].in[i];
@@ -182,7 +187,7 @@ export default Vue.extend({
}
});
this.$watch('value.args', (args) => {
this.$watch(() => this.value.args, (args) => {
if (args == null) {
this.warn = null;
return;
@@ -199,7 +204,7 @@ export default Vue.extend({
deep: true
});
this.$watch('hpml.variables', () => {
this.$watch(() => this.hpml.variables, () => {
if (this.type != null && this.value) {
this.error = this.hpml.typeCheck(this.value);
}
@@ -210,7 +215,7 @@ export default Vue.extend({
methods: {
async changeType() {
const { canceled, result: type } = await this.$root.dialog({
const { canceled, result: type } = await os.dialog({
type: null,
title: this.$t('_pages.selectType'),
select: {

219
src/client/pages/page-editor/page-editor.vue
View File

@@ -1,117 +1,118 @@
<template>
<div>
<div class="gwbmwxkm _panel">
<header>
<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('_pages.readPage') : pageId ? $t('_pages.editPage') : $t('_pages.newPage') }}</div>
<div class="buttons">
<button class="_button" @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
<button class="_button" @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
<button class="_button" @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
</div>
</header>
<section>
<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('_pages.viewPage') }}</router-link>
<mk-input v-model="title">
<span>{{ $t('_pages.title') }}</span>
</mk-input>
<template v-if="showOptions">
<mk-input v-model="summary">
<span>{{ $t('_pages.summary') }}</span>
</mk-input>
<mk-input v-model="name">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<span>{{ $t('_pages.url') }}</span>
</mk-input>
<mk-switch v-model="alignCenter">{{ $t('_pages.alignCenter') }}</mk-switch>
<mk-select v-model="font">
<template #label>{{ $t('_pages.font') }}</template>
<option value="serif">{{ $t('_pages.fontSerif') }}</option>
<option value="sans-serif">{{ $t('_pages.fontSansSerif') }}</option>
</mk-select>
<mk-switch v-model="hideTitleWhenPinned">{{ $t('_pages.hideTitleWhenPinned') }}</mk-switch>
<div class="eyeCatch">
<mk-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('_pages.eyeCatchingImageSet') }}</mk-button>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name"/>
<mk-button @click="removeEyeCatchingImage()" v-if="!readonly"><fa :icon="faTrashAlt"/> {{ $t('_pages.eyeCatchingImageRemove') }}</mk-button>
</div>
<div class="_section">
<div class="_content">
<div class="gwbmwxkm _panel _vMargin">
<header>
<div class="title"><Fa :icon="faStickyNote"/> {{ readonly ? $t('_pages.readPage') : pageId ? $t('_pages.editPage') : $t('_pages.newPage') }}</div>
<div class="buttons">
<button class="_button" @click="del()" v-if="!readonly"><Fa :icon="faTrashAlt"/></button>
<button class="_button" @click="() => showOptions = !showOptions"><Fa :icon="faCog"/></button>
<button class="_button" @click="save()" v-if="!readonly"><Fa :icon="faSave"/></button>
</div>
</template>
</header>
<x-blocks class="content" v-model="content" :hpml="hpml"/>
<section>
<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $t('_pages.viewPage') }}</router-link>
<mk-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></mk-button>
</section>
<MkInput v-model:value="title">
<span>{{ $t('_pages.title') }}</span>
</MkInput>
<template v-if="showOptions">
<MkInput v-model:value="summary">
<span>{{ $t('_pages.summary') }}</span>
</MkInput>
<MkInput v-model:value="name">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<span>{{ $t('_pages.url') }}</span>
</MkInput>
<MkSwitch v-model:value="alignCenter">{{ $t('_pages.alignCenter') }}</MkSwitch>
<MkSelect v-model:value="font">
<template #label>{{ $t('_pages.font') }}</template>
<option value="serif">{{ $t('_pages.fontSerif') }}</option>
<option value="sans-serif">{{ $t('_pages.fontSansSerif') }}</option>
</MkSelect>
<MkSwitch v-model:value="hideTitleWhenPinned">{{ $t('_pages.hideTitleWhenPinned') }}</MkSwitch>
<div class="eyeCatch">
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><Fa :icon="faPlus"/> {{ $t('_pages.eyeCatchingImageSet') }}</MkButton>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name"/>
<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $t('_pages.eyeCatchingImageRemove') }}</MkButton>
</div>
</div>
</template>
<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
</section>
</div>
<MkContainer :body-togglable="true" class="_vMargin">
<template #header><Fa :icon="faMagic"/> {{ $t('_pages.variables') }}</template>
<div class="qmuvgica">
<XDraggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<XVariable v-for="variable in variables"
:value="variable"
:removable="true"
@update:value="v => updateVariable(v)"
@remove="() => removeVariable(variable)"
:key="variable.name"
:hpml="hpml"
:name="variable.name"
:title="variable.name"
:draggable="true"
/>
</XDraggable>
<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
</div>
</MkContainer>
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
<template #header><Fa :icon="faCode"/> {{ $t('script') }}</template>
<div>
<MkTextarea class="_code" v-model:value="script"/>
</div>
</MkContainer>
</div>
<mk-container :body-togglable="true">
<template #header><fa :icon="faMagic"/> {{ $t('_pages.variables') }}</template>
<div class="qmuvgica">
<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">
<x-variable v-for="variable in variables"
:value="variable"
:removable="true"
@input="v => updateVariable(v)"
@remove="() => removeVariable(variable)"
:key="variable.name"
:hpml="hpml"
:name="variable.name"
:title="variable.name"
:draggable="true"
/>
</x-draggable>
<mk-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></mk-button>
</div>
</mk-container>
<mk-container :body-togglable="true" :expanded="true">
<template #header><fa :icon="faCode"/> {{ $t('script') }}</template>
<div>
<prism-editor class="_code" v-model="script" :highlight="highlighter" :line-numbers="false"/>
</div>
</mk-container>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import { defineComponent, defineAsyncComponent } from 'vue';
import 'prismjs';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-okaidia.css';
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import { v4 as uuid } from 'uuid';
import XVariable from './page-editor.script-block.vue';
import XBlocks from './page-editor.blocks.vue';
import MkTextarea from '../../components/ui/textarea.vue';
import MkContainer from '../../components/ui/container.vue';
import MkButton from '../../components/ui/button.vue';
import MkSelect from '../../components/ui/select.vue';
import MkSwitch from '../../components/ui/switch.vue';
import MkInput from '../../components/ui/input.vue';
import { blockDefs } from '../../scripts/hpml/index';
import { HpmlTypeChecker } from '../../scripts/hpml/type-checker';
import { url } from '../../config';
import { collectPageVars } from '../../scripts/collect-page-vars';
import { selectDriveFile } from '../../scripts/select-drive-file';
import MkTextarea from '@/components/ui/textarea.vue';
import MkContainer from '@/components/ui/container.vue';
import MkButton from '@/components/ui/button.vue';
import MkSelect from '@/components/ui/select.vue';
import MkSwitch from '@/components/ui/switch.vue';
import MkInput from '@/components/ui/input.vue';
import { blockDefs } from '@/scripts/hpml/index';
import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
import { url } from '@/config';
import { collectPageVars } from '@/scripts/collect-page-vars';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
components: {
XDraggable, XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
},
props: {
@@ -159,7 +160,7 @@ export default Vue.extend({
if (this.eyeCatchingImageId == null) {
this.eyeCatchingImage = null;
} else {
this.eyeCatchingImage = await this.$root.api('drive/files/show', {
this.eyeCatchingImage = await os.api('drive/files/show', {
fileId: this.eyeCatchingImageId,
});
}
@@ -178,11 +179,11 @@ export default Vue.extend({
}, { deep: true });
if (this.initPageId) {
this.page = await this.$root.api('pages/show', {
this.page = await os.api('pages/show', {
pageId: this.initPageId,
});
} else if (this.initPageName && this.initUser) {
this.page = await this.$root.api('pages/show', {
this.page = await os.api('pages/show', {
name: this.initPageName,
username: this.initUser,
});
@@ -239,14 +240,14 @@ export default Vue.extend({
const onError = err => {
if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
if (err.info.param == 'name') {
this.$root.dialog({
os.dialog({
type: 'error',
title: this.$t('_pages.invalidNameTitle'),
text: this.$t('_pages.invalidNameText')
});
}
} else if (err.code == 'NAME_ALREADY_EXISTS') {
this.$root.dialog({
os.dialog({
type: 'error',
text: this.$t('_pages.nameAlreadyExists')
});
@@ -255,20 +256,20 @@ export default Vue.extend({
if (this.pageId) {
options.pageId = this.pageId;
this.$root.api('pages/update', options)
os.api('pages/update', options)
.then(page => {
this.currentName = this.name.trim();
this.$root.dialog({
os.dialog({
type: 'success',
text: this.$t('_pages.updated')
});
}).catch(onError);
} else {
this.$root.api('pages/create', options)
os.api('pages/create', options)
.then(page => {
this.pageId = page.id;
this.currentName = this.name.trim();
this.$root.dialog({
os.dialog({
type: 'success',
text: this.$t('_pages.created')
});
@@ -278,16 +279,16 @@ export default Vue.extend({
},
del() {
this.$root.dialog({
os.dialog({
type: 'warning',
text: this.$t('removeAreYouSure', { x: this.title.trim() }),
showCancelButton: true
}).then(({ canceled }) => {
if (canceled) return;
this.$root.api('pages/delete', {
os.api('pages/delete', {
pageId: this.pageId,
}).then(() => {
this.$root.dialog({
os.dialog({
type: 'success',
text: this.$t('_pages.deleted')
});
@@ -297,7 +298,7 @@ export default Vue.extend({
},
async add() {
const { canceled, result: type } = await this.$root.dialog({
const { canceled, result: type } = await os.dialog({
type: null,
title: this.$t('_pages.chooseBlock'),
select: {
@@ -312,7 +313,7 @@ export default Vue.extend({
},
async addVariable() {
let { canceled, result: name } = await this.$root.dialog({
let { canceled, result: name } = await os.dialog({
title: this.$t('_pages.enterVariableName'),
input: {
type: 'text',
@@ -324,7 +325,7 @@ export default Vue.extend({
name = name.trim();
if (this.hpml.isUsedName(name)) {
this.$root.dialog({
os.dialog({
type: 'error',
text: this.$t('_pages.variableNameIsAlreadyUsed')
});
@@ -413,7 +414,7 @@ export default Vue.extend({
},
setEyeCatchingImage() {
selectDriveFile(this.$root, false).then(file => {
os.selectDriveFile(false).then(file => {
this.eyeCatchingImageId = file.id;
});
},
@@ -431,7 +432,7 @@ export default Vue.extend({
<style lang="scss" scoped>
.gwbmwxkm {
margin-bottom: var(--margin);
position: relative;
> header {
> .title {