rsesot/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull Requests Activity

pages関連

Browse Source
This commit is contained in:
syuilo
2022-12-24 11:57:06 +09:00
parent fabd1f1791
commit b3decf965f
21 changed files with 137 additions and 1228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,70 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.button }}</template>
<section class="xfhsjczc">
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
<MkSelect v-model="value.action">
<template #label>{{ $ts._pages.blocks._button.action }}</template>
<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
<option value="pushEvent">{{ $ts._pages.blocks._button._action.pushEvent }}</option>
<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
</MkSelect>
<template v-if="value.action === 'dialog'">
<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
</template>
<template v-else-if="value.action === 'pushEvent'">
<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
<MkSelect v-model="value.var">
<template #label>{{ $ts._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>
<optgroup :label="$ts._pages.script.pageVariables">
<option v-for="v in hpml.getPageVarsByType()" :value="v">{{ v }}</option>
</optgroup>
<optgroup :label="$ts._pages.script.enviromentVariables">
<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
</optgroup>
</MkSelect>
</template>
<template v-else-if="value.action === 'callAiScript'">
<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
</template>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue';
withDefaults(defineProps<{
value: any,
hpml: any
}>(), {
value: {
text: '',
action: 'dialog',
content: null,
event: null,
message: null,
primary: false,
var: null,
fn: null,
},
});
</script>
<style lang="scss" scoped>
.xfhsjczc {
padding: 0 16px 0 16px;
}
</style>

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

@@ -1,38 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
</MkInput>
<MkInput v-model="value.width" type="number">
<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
<template #suffix>px</template>
</MkInput>
<MkInput v-model="value.height" type="number">
<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
<template #suffix>px</template>
</MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
width: 300,
height: 200,
},
});
</script>

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

@@ -1,34 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._counter.name }}</template>
</MkInput>
<MkInput v-model="value.text">
<template #label>{{ $ts._pages.blocks._counter.text }}</template>
</MkInput>
<MkInput v-model="value.inc" type="number">
<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
</MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
},
});
</script>

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

@@ -1,67 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
<template #func>
<button class="_button" @click="add()">
<i class="ti ti-plus"></i>
</button>
</template>
<section class="romcojzs">
<MkSelect v-model="value.var">
<template #label>{{ $ts._pages.blocks._if.variable }}</template>
<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
<optgroup :label="$ts._pages.script.pageVariables">
<option v-for="v in hpml.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
</optgroup>
<optgroup :label="$ts._pages.script.enviromentVariables">
<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
</optgroup>
</MkSelect>
<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { defineAsyncComponent, inject } from 'vue';
import { v4 as uuid } from 'uuid';
import XContainer from '../page-editor.container.vue';
import MkSelect from '@/components/form/select.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
const props = withDefaults(defineProps<{
value: any,
hpml: any
}>(), {
value: {
children: [],
var: null,
},
});
const getPageBlockList = inject<(any) => any>('getPageBlockList');
async function add() {
const { canceled, result: type } = await os.select({
title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList(),
});
if (canceled) return;
const id = uuid();
props.value.children.push({ id, type });
}
</script>
<style lang="scss" scoped>
.romcojzs {
padding: 0 16px 16px 16px;
}
</style>

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

@@ -21,29 +21,32 @@ import XContainer from '../page-editor.container.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
const props = withDefaults(defineProps<{
value: any
}>(), {
value: {
fileId: null,
},
});
const props = defineProps<{
modelValue: any
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void;
}>();
let file: any = $ref(null);
async function choose() {
os.selectDriveFile(false).then((fileResponse: any) => {
file = fileResponse;
props.value.fileId = fileResponse.id;
emit('update:modelValue', {
...props.modelValue,
fileId: fileResponse.id,
});
});
}
onMounted(async () => {
if (props.value.fileId == null) {
if (props.modelValue.fileId == null) {
await choose();
} else {
os.api('drive/files/show', {
fileId: props.value.fileId,
fileId: props.modelValue.fileId,
}).then(fileResponse => {
file = fileResponse;
});

35
packages/client/src/pages/page-editor/els/page-editor.el.note.vue
View File

@@ -8,10 +8,10 @@
<template #label>{{ $ts._pages.blocks._note.id }}</template>
<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
</MkInput>
<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
<XNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
<XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
</section>
</XContainer>
</template>
@@ -26,26 +26,31 @@ import XNote from '@/components/MkNote.vue';
import XNoteDetailed from '@/components/MkNoteDetailed.vue';
import * as os from '@/os';
const props = withDefaults(defineProps<{
value: any
}>(), {
value: {
note: null,
detailed: false,
},
});
const props = defineProps<{
modelValue: any
}>();
let id: any = $ref(props.value.note);
const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void;
}>();
let id: any = $ref(props.modelValue.note);
let note: any = $ref(null);
watch(id, async () => {
if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
emit('update:modelValue', {
...props.modelValue,
note: (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop(),
});
} else {
props.value.note = id;
emit('update:modelValue', {
...props.modelValue,
note: id,
});
}
note = await os.api('notes/show', { noteId: props.value.note });
note = await os.api('notes/show', { noteId: props.modelValue.note });
}, {
immediate: true,
});

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

@@ -1,34 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
</MkInput>
<MkInput v-model="value.text">
<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
</MkInput>
<MkInput v-model="value.default" type="number">
<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
</MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
},
});
</script>

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

@@ -1,31 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
<section style="padding: 16px;">
<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
text: '',
attachCanvasImage: false,
canvasId: '',
},
});
</script>

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

@@ -1,39 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
<section style="padding: 0 16px 16px 16px;">
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { watch } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue';
const props = withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
title: '',
values: [],
},
});
let values: string = $ref(props.value.values.join('\n'));
watch(values, () => {
props.value.values = values.split('\n');
}, {
deep: true,
});
</script>

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

@@ -1,40 +1,51 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
<template #header><i class="fas fa-sticky-note"></i> {{ props.modelValue.title }}</template>
<template #func>
<button class="_button" @click="rename()">
<i class="ti ti-pencil"></i>
</button>
<button class="_button" @click="add()">
<i class="ti ti-plus"></i>
</button>
</template>
<section class="ilrvjyvi">
<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
<XBlocks v-model="children" class="children"/>
<MkButton rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { defineAsyncComponent, inject, onMounted } from 'vue';
import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { deepClone } from '@/scripts/clone';
import MkButton from '@/components/MkButton.vue';
const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
const props = withDefaults(defineProps<{
value: any,
hpml: any
modelValue: any,
}>(), {
value: {
title: null,
children: [],
},
modelValue: {},
});
const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void;
}>();
const children = $ref(deepClone(props.modelValue.children ?? []));
watch($$(children), () => {
emit('update:modelValue', {
...props.modelValue,
children,
});
}, {
deep: true,
});
const getPageBlockList = inject<(any) => any>('getPageBlockList');
@@ -42,25 +53,28 @@ const getPageBlockList = inject<(any) => any>('getPageBlockList');
async function rename() {
const { canceled, result: title } = await os.inputText({
title: 'Enter title',
default: props.value.title,
default: props.modelValue.title,
});
if (canceled) return;
props.value.title = title;
emit('update:modelValue', {
...props.modelValue,
title,
});
}
async function add() {
const { canceled, result: type } = await os.select({
title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList(),
items: getPageBlockList(),
});
if (canceled) return;
const id = uuid();
props.value.children.push({ id, type });
children.push({ id, type });
}
onMounted(() => {
if (props.value.title == null) {
if (props.modelValue.title == null) {
rename();
}
});
@@ -69,7 +83,15 @@ onMounted(() => {
<style lang="scss" scoped>
.ilrvjyvi {
> .children {
padding: 16px;
margin: 16px;
&:empty {
display: none;
}
}
> .add {
margin: 16px auto;
}
}
</style>

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

@@ -1,34 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
<section class="kjuadyyj">
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkSwitch from '@/components/form/switch.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
},
});
</script>
<style lang="scss" scoped>
.kjuadyyj {
padding: 0 16px 16px 16px;
}
</style>

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

@@ -1,27 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
},
});
</script>

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

@@ -4,22 +4,31 @@
<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
<section class="vckmsadr">
<textarea v-model="value.text"></textarea>
<textarea v-model="text"></textarea>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import { watch } from 'vue';
import XContainer from '../page-editor.container.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
text: '',
},
const props = defineProps<{
modelValue: any
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void;
}>();
const text = $ref(props.modelValue.text ?? '');
watch($$(text), () => {
emit('update:modelValue', {
...props.modelValue,
text,
});
});
</script>

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

@@ -1,28 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
<section style="padding: 0 16px 16px 16px;">
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
name: '',
},
});
</script>

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

@@ -1,45 +0,0 @@
<template>
<!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
<section class="ihymsbbe">
<textarea v-model="value.text"></textarea>
</section>
</XContainer>
</template>
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
withDefaults(defineProps<{
value: any
}>(), {
value: {
text: '',
},
});
</script>
<style lang="scss" scoped>
.ihymsbbe {
> textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 100%;
min-height: 150px;
border: none;
box-shadow: none;
padding: 16px;
background: transparent;
color: var(--fg);
font-size: 14px;
box-sizing: border-box;
}
}
</style>