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

refactor components

Browse Source
This commit is contained in:
syuilo
2021-09-30 00:50:45 +09:00
parent 0d3a36e519
commit 1ac1a968b9
179 changed files with 2611 additions and 2386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,9 +40,9 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkSelect from '@client/components/form/select.vue';
import MkInput from '@client/components/form/input.vue';
import MkSwitch from '@client/components/form/switch.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -22,7 +22,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@client/components/ui/input.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -20,7 +20,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@client/components/ui/input.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -19,7 +19,7 @@
</optgroup>
</MkSelect>
<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
<XBlocks class="children" v-model="value.children" :hpml="hpml"/>
</section>
</XContainer>
</template>
@@ -28,7 +28,7 @@
import { defineComponent, defineAsyncComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import XContainer from '../page-editor.container.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkSelect from '@client/components/form/select.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -18,8 +18,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkInput from '@client/components/form/input.vue';
import MkSwitch from '@client/components/form/switch.vue';
import XNote from '@client/components/note.vue';
import XNoteDetailed from '@client/components/note-detailed.vue';
import * as os from '@client/os';

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

@@ -20,7 +20,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@client/components/ui/input.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -13,9 +13,9 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkTextarea from '@client/components/form/textarea.vue';
import MkInput from '@client/components/form/input.vue';
import MkSwitch from '@client/components/form/switch.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -14,8 +14,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkInput from '@client/components/ui/input.vue';
import MkTextarea from '@client/components/form/textarea.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -11,7 +11,7 @@
</template>
<section class="ilrvjyvi">
<XBlocks class="children" v-model:value="value.children" :hpml="hpml"/>
<XBlocks class="children" v-model="value.children" :hpml="hpml"/>
</section>
</XContainer>
</template>

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

@@ -13,8 +13,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSwitch from '@client/components/form/switch.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -13,7 +13,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkInput from '@client/components/ui/input.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -13,8 +13,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkInput from '@client/components/ui/input.vue';
import MkTextarea from '@client/components/form/textarea.vue';
import MkInput from '@client/components/form/input.vue';
import * as os from '@client/os';
export default defineComponent({

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

@@ -32,7 +32,7 @@ export default defineComponent({
},
props: {
value: {
modelValue: {
type: Array,
required: true
},
@@ -41,15 +41,15 @@ export default defineComponent({
},
},
emits: ['update:value'],
emits: ['update:modelValue'],
computed: {
blocks: {
get() {
return this.value;
return this.modelValue;
},
set(value) {
this.$emit('update:value', value);
this.$emit('update:modelValue', value);
}
}
},
@@ -62,17 +62,16 @@ export default defineComponent({
v,
...this.blocks.slice(i + 1)
];
this.$emit('update:value', newValue);
this.$emit('update:modelValue', newValue);
},
removeItem(el) {
console.log(el);
const i = this.blocks.findIndex(x => x.id === el.id);
const newValue = [
...this.blocks.slice(0, i),
...this.blocks.slice(i + 1)
];
this.$emit('update:value', newValue);
this.$emit('update:modelValue', newValue);
},
}
});

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

@@ -7,23 +7,23 @@
</button>
</template>
<section v-if="value.type === null" class="pbglfege" @click="changeType()">
<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
{{ $ts._pages.script.emptySlot }}
</section>
<section v-else-if="value.type === 'text'" class="tbwccoaw">
<input v-model="value.value"/>
<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
<input v-model="modelValue.value"/>
</section>
<section v-else-if="value.type === 'multiLineText'" class="tbwccoaw">
<textarea v-model="value.value"></textarea>
<section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw">
<textarea v-model="modelValue.value"></textarea>
</section>
<section v-else-if="value.type === 'textList'" class="tbwccoaw">
<textarea v-model="value.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea>
<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
<textarea v-model="modelValue.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea>
</section>
<section v-else-if="value.type === 'number'" class="tbwccoaw">
<input v-model="value.value" type="number"/>
<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
<input v-model="modelValue.value" type="number"/>
</section>
<section v-else-if="value.type === 'ref'" class="hpdwcrvs">
<select v-model="value.value">
<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
<select v-model="modelValue.value">
<option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
<optgroup :label="$ts._pages.script.argVariables">
<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
@@ -36,21 +36,21 @@
</optgroup>
</select>
</section>
<section v-else-if="value.type === 'aiScriptVar'" class="tbwccoaw">
<input v-model="value.value"/>
<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
<input v-model="modelValue.value"/>
</section>
<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
<MkTextarea v-model="slots">
<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
</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"/>
<XV v-if="modelValue.value.expression" v-model="modelValue.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;">
<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 v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
<XV v-for="(x, i) in modelValue.args" v-model="value.args[i]" :title="hpml.getVarByName(modelValue.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;">
<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"/>
<XV v-for="(x, i) in modelValue.args" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
</section>
</XContainer>
</template>
@@ -59,7 +59,7 @@
import { defineAsyncComponent, defineComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import XContainer from './page-editor.container.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkTextarea from '@client/components/form/textarea.vue';
import { blockDefs } from '@client/scripts/hpml/index';
import * as os from '@client/os';
import { isLiteralValue } from '@client/scripts/hpml/expr';
@@ -78,7 +78,7 @@ export default defineComponent({
required: false,
default: null
},
value: {
modelValue: {
required: true
},
title: {
@@ -113,21 +113,21 @@ export default defineComponent({
computed: {
icon(): any {
if (this.value.type === null) return null;
if (this.value.type.startsWith('fn:')) return 'fas fa-plug';
return blockDefs.find(x => x.type === this.value.type).icon;
if (this.modelValue.type === null) return null;
if (this.modelValue.type.startsWith('fn:')) return 'fas fa-plug';
return blockDefs.find(x => x.type === this.modelValue.type).icon;
},
typeText(): any {
if (this.value.type === null) return null;
if (this.value.type.startsWith('fn:')) return this.value.type.split(':')[1];
return this.$t(`_pages.script.blocks.${this.value.type}`);
if (this.modelValue.type === null) return null;
if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1];
return this.$t(`_pages.script.blocks.${this.modelValue.type}`);
},
},
watch: {
slots: {
handler() {
this.value.value.slots = this.slots.split('\n').map(x => ({
this.modelValue.value.slots = this.slots.split('\n').map(x => ({
name: x,
type: null
}));
@@ -137,24 +137,24 @@ export default defineComponent({
},
created() {
if (this.value.value == null) this.value.value = null;
if (this.modelValue.value == null) this.modelValue.value = null;
if (this.value.value && this.value.value.slots) this.slots = this.value.value.slots.map(x => x.name).join('\n');
if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n');
this.$watch(() => this.value.type, (t) => {
this.$watch(() => this.modelValue.type, (t) => {
this.warn = null;
if (this.value.type === 'fn') {
if (this.modelValue.type === 'fn') {
const id = uuid();
this.value.value = {
this.modelValue.value = {
slots: [],
expression: { id, type: null }
};
return;
}
if (this.value.type && this.value.type.startsWith('fn:')) {
const fnName = this.value.type.split(':')[1];
if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) {
const fnName = this.modelValue.type.split(':')[1];
const fn = this.hpml.getVarByName(fnName);
const empties = [];
@@ -162,29 +162,29 @@ export default defineComponent({
const id = uuid();
empties.push({ id, type: null });
}
this.value.args = empties;
this.modelValue.args = empties;
return;
}
if (isLiteralValue(this.value)) return;
if (isLiteralValue(this.modelValue)) return;
const empties = [];
for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
const id = uuid();
empties.push({ id, type: null });
}
this.value.args = empties;
this.modelValue.args = empties;
for (let i = 0; i < funcDefs[this.value.type].in.length; i++) {
const inType = funcDefs[this.value.type].in[i];
for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
const inType = funcDefs[this.modelValue.type].in[i];
if (typeof inType !== 'number') {
if (inType === 'number') this.value.args[i].type = 'number';
if (inType === 'string') this.value.args[i].type = 'text';
if (inType === 'number') this.modelValue.args[i].type = 'number';
if (inType === 'string') this.modelValue.args[i].type = 'text';
}
}
});
this.$watch(() => this.value.args, (args) => {
this.$watch(() => this.modelValue.args, (args) => {
if (args == null) {
this.warn = null;
return;
@@ -202,8 +202,8 @@ export default defineComponent({
});
this.$watch(() => this.hpml.variables, () => {
if (this.type != null && this.value) {
this.error = this.hpml.typeCheck(this.value);
if (this.type != null && this.modelValue) {
this.error = this.hpml.typeCheck(this.modelValue);
}
}, {
deep: true
@@ -221,11 +221,11 @@ export default defineComponent({
showCancelButton: true
});
if (canceled) return;
this.value.type = type;
this.modelValue.type = type;
},
_getExpectedType(slot: number) {
return this.hpml.getExpectedType(this.value, slot);
return this.hpml.getExpectedType(this.modelValue, slot);
}
}
});

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

@@ -47,7 +47,7 @@
<MkContainer :foldable="true" :expanded="true" class="_gap">
<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.contents }}</template>
<div style="padding: 16px;">
<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
<XBlocks class="content" v-model="content" :hpml="hpml"/>
<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
</div>
@@ -94,12 +94,12 @@ import 'vue-prism-editor/dist/prismeditor.min.css';
import { v4 as uuid } from 'uuid';
import XVariable from './page-editor.script-block.vue';
import XBlocks from './page-editor.blocks.vue';
import MkTextarea from '@client/components/ui/textarea.vue';
import MkTextarea from '@client/components/form/textarea.vue';
import MkContainer from '@client/components/ui/container.vue';
import MkButton from '@client/components/ui/button.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/form/select.vue';
import MkSwitch from '@client/components/form/switch.vue';
import MkInput from '@client/components/form/input.vue';
import { blockDefs } from '@client/scripts/hpml/index';
import { HpmlTypeChecker } from '@client/scripts/hpml/type-checker';
import { url } from '@client/config';