pages関連
This commit is contained in:
syuilo
parent
fabd1f1791
commit
b3decf965f
@ -1489,8 +1489,6 @@ _pages:
|
||||
eyeCatchingImageRemove: "アイキャッチ画像を削除"
|
||||
chooseBlock: "ブロックを追加"
|
||||
selectType: "種類を選択"
|
||||
enterVariableName: "変数名を決めてください"
|
||||
variableNameIsAlreadyUsed: "その変数名は既に使われています"
|
||||
contentBlocks: "コンテンツ"
|
||||
inputBlocks: "入力"
|
||||
specialBlocks: "特殊"
|
||||
@ -1501,261 +1499,12 @@ _pages:
|
||||
image: "画像"
|
||||
button: "ボタン"
|
||||
|
||||
if: "もし"
|
||||
_if:
|
||||
variable: "変数"
|
||||
|
||||
post: "投稿フォーム"
|
||||
_post:
|
||||
text: "内容"
|
||||
attachCanvasImage: "キャンバスの画像を添付する"
|
||||
canvasId: "キャンバスID"
|
||||
|
||||
textInput: "テキスト入力"
|
||||
_textInput:
|
||||
name: "変数名"
|
||||
text: "タイトル"
|
||||
default: "デフォルト値"
|
||||
|
||||
textareaInput: "複数行テキスト入力"
|
||||
_textareaInput:
|
||||
name: "変数名"
|
||||
text: "タイトル"
|
||||
default: "デフォルト値"
|
||||
|
||||
numberInput: "数値入力"
|
||||
_numberInput:
|
||||
name: "変数名"
|
||||
text: "タイトル"
|
||||
default: "デフォルト値"
|
||||
|
||||
canvas: "キャンバス"
|
||||
_canvas:
|
||||
id: "キャンバスID"
|
||||
width: "幅"
|
||||
height: "高さ"
|
||||
|
||||
note: "ノート埋め込み"
|
||||
_note:
|
||||
id: "ノートID"
|
||||
idDescription: "ノートURLをペーストして設定することもできます。"
|
||||
detailed: "詳細な表示"
|
||||
|
||||
switch: "スイッチ"
|
||||
_switch:
|
||||
name: "変数名"
|
||||
text: "タイトル"
|
||||
default: "デフォルト値"
|
||||
|
||||
counter: "カウンター"
|
||||
_counter:
|
||||
name: "変数名"
|
||||
text: "タイトル"
|
||||
inc: "増加値"
|
||||
|
||||
_button:
|
||||
text: "タイトル"
|
||||
colored: "色付き"
|
||||
action: "ボタンを押したときの動作"
|
||||
_action:
|
||||
dialog: "ダイアログを表示する"
|
||||
_dialog:
|
||||
content: "内容"
|
||||
resetRandom: "乱数をリセット"
|
||||
pushEvent: "イベントを送信させる"
|
||||
_pushEvent:
|
||||
event: "イベント名"
|
||||
message: "押したときに表示するメッセージ"
|
||||
variable: "送信する変数"
|
||||
no-variable: "なし"
|
||||
callAiScript: "AiScript呼び出し"
|
||||
_callAiScript:
|
||||
functionName: "関数名"
|
||||
|
||||
radioButton: "選択肢"
|
||||
_radioButton:
|
||||
name: "変数名"
|
||||
title: "タイトル"
|
||||
values: "改行で区切った選択肢"
|
||||
default: "デフォルト値"
|
||||
|
||||
script:
|
||||
categories:
|
||||
flow: "制御"
|
||||
logical: "論理演算"
|
||||
operation: "計算"
|
||||
comparison: "比較"
|
||||
random: "ランダム"
|
||||
value: "値"
|
||||
fn: "関数"
|
||||
text: "テキスト操作"
|
||||
convert: "変換"
|
||||
list: "リスト"
|
||||
blocks:
|
||||
text: "テキスト"
|
||||
multiLineText: "テキスト(複数行)"
|
||||
textList: "テキストのリスト"
|
||||
_textList:
|
||||
info: "ひとつひとつを改行で区切ってください"
|
||||
strLen: "テキストの長さ"
|
||||
_strLen:
|
||||
arg1: "テキスト"
|
||||
strPick: "文字取り出し"
|
||||
_strPick:
|
||||
arg1: "テキスト"
|
||||
arg2: "文字の位置"
|
||||
strReplace: "テキスト置き換え"
|
||||
_strReplace:
|
||||
arg1: "テキスト"
|
||||
arg2: "置き換え前"
|
||||
arg3: "置き換え後"
|
||||
strReverse: "テキストを反転"
|
||||
_strReverse:
|
||||
arg1: "テキスト"
|
||||
join: "テキストを連結"
|
||||
_join:
|
||||
arg1: "リスト"
|
||||
arg2: "区切り"
|
||||
add: "足す"
|
||||
_add:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
subtract: "引く"
|
||||
_subtract:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
multiply: "掛ける"
|
||||
_multiply:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
divide: "割る"
|
||||
_divide:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
mod: "割った余り"
|
||||
_mod:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
round: "小数を丸める"
|
||||
_round:
|
||||
arg1: "数値"
|
||||
eq: "AとBが同じ"
|
||||
_eq:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
notEq: "AとBが異なる"
|
||||
_notEq:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
and: "AかつB"
|
||||
_and:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
or: "AまたはB"
|
||||
_or:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
lt: "< AがBより小さい"
|
||||
_lt:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
gt: "> AがBより大きい"
|
||||
_gt:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
ltEq: "<= AがBと同じか小さい"
|
||||
_ltEq:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
gtEq: ">= AがBと同じか大きい"
|
||||
_gtEq:
|
||||
arg1: "A"
|
||||
arg2: "B"
|
||||
if: "分岐"
|
||||
_if:
|
||||
arg1: "もし"
|
||||
arg2: "なら"
|
||||
arg3: "そうでなければ"
|
||||
not: "否定"
|
||||
_not:
|
||||
arg1: "否定"
|
||||
random: "ランダム"
|
||||
_random:
|
||||
arg1: "確率"
|
||||
rannum: "乱数"
|
||||
_rannum:
|
||||
arg1: "最小"
|
||||
arg2: "最大"
|
||||
randomPick: "リストからランダムに選択"
|
||||
_randomPick:
|
||||
arg1: "リスト"
|
||||
dailyRandom: "ランダム (ユーザーごとに日替わり)"
|
||||
_dailyRandom:
|
||||
arg1: "確率"
|
||||
dailyRannum: "乱数 (ユーザーごとに日替わり)"
|
||||
_dailyRannum:
|
||||
arg1: "最小"
|
||||
arg2: "最大"
|
||||
dailyRandomPick: "リストからランダムに選択 (ユーザーごとに日替わり)"
|
||||
_dailyRandomPick:
|
||||
arg1: "リスト"
|
||||
seedRandom: "ランダム (シード)"
|
||||
_seedRandom:
|
||||
arg1: "シード"
|
||||
arg2: "確率"
|
||||
seedRannum: "乱数 (シード)"
|
||||
_seedRannum:
|
||||
arg1: "シード"
|
||||
arg2: "最小"
|
||||
arg3: "最大"
|
||||
seedRandomPick: "リストからランダムに選択 (シード)"
|
||||
_seedRandomPick:
|
||||
arg1: "シード"
|
||||
arg2: "リスト"
|
||||
DRPWPM: "確率付きリストからランダムに選択 (ユーザーごとに日替わり)"
|
||||
_DRPWPM:
|
||||
arg1: "テキストのリスト"
|
||||
pick: "リストから選択"
|
||||
_pick:
|
||||
arg1: "リスト"
|
||||
arg2: "位置"
|
||||
listLen: "リストの長さを取得"
|
||||
_listLen:
|
||||
arg1: "リスト"
|
||||
number: "数値"
|
||||
stringToNumber: "テキストを数値に"
|
||||
_stringToNumber:
|
||||
arg1: "テキスト"
|
||||
numberToString: "数値をテキストに"
|
||||
_numberToString:
|
||||
arg1: "数値"
|
||||
splitStrByLine: "テキストを行で分割"
|
||||
_splitStrByLine:
|
||||
arg1: "テキスト"
|
||||
ref: "変数"
|
||||
aiScriptVar: "AiScript変数"
|
||||
fn: "関数"
|
||||
_fn:
|
||||
slots: "スロット"
|
||||
slots-info: "スロットひとつひとつを改行で区切ってください"
|
||||
arg1: "出力"
|
||||
for: "繰り返し"
|
||||
_for:
|
||||
arg1: "回数"
|
||||
arg2: "処理"
|
||||
typeError: "スロット{slot}は\"{expect}\"を受け付けますが、\"{actual}\"が入れられています！"
|
||||
thereIsEmptySlot: "スロット{slot}が空です！"
|
||||
types:
|
||||
string: "テキスト"
|
||||
number: "数値"
|
||||
boolean: "フラグ"
|
||||
array: "リスト"
|
||||
stringArray: "テキストのリスト"
|
||||
emptySlot: "空のスロット"
|
||||
enviromentVariables: "環境変数"
|
||||
pageVariables: "ページ要素"
|
||||
argVariables: "入力スロット"
|
||||
|
||||
_relayStatus:
|
||||
requesting: "承認待ち"
|
||||
accepted: "承認済み"
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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;
|
||||
});
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<Sortable :list="blocks" tag="div" item-key="id" :options="{ handle: '.drag-handle', group: { name: 'blocks' }, animation: 150, swapThreshold: 0.5 }">
|
||||
<Sortable :model-value="modelValue" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swap-threshold="0.5" @update:model-value="v => $emit('update:modelValue', v)">
|
||||
<template #item="{element}">
|
||||
<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
|
||||
<div :class="$style.item">
|
||||
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
|
||||
<component :is="'x-' + element.type" :model-value="element" @update:model-value="updateItem" @remove="() => removeItem(element)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
</template>
|
||||
@ -10,25 +13,15 @@
|
||||
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';
|
||||
import XImage from './els/page-editor.el.image.vue';
|
||||
import XButton from './els/page-editor.el.button.vue';
|
||||
import XTextInput from './els/page-editor.el.text-input.vue';
|
||||
import XTextareaInput from './els/page-editor.el.textarea-input.vue';
|
||||
import XNumberInput from './els/page-editor.el.number-input.vue';
|
||||
import XSwitch from './els/page-editor.el.switch.vue';
|
||||
import XIf from './els/page-editor.el.if.vue';
|
||||
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 XNote from './els/page-editor.el.note.vue';
|
||||
import * as os from '@/os';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
|
||||
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
|
||||
XSection, XText, XImage, XNote,
|
||||
},
|
||||
|
||||
props: {
|
||||
@ -36,43 +29,37 @@ export default defineComponent({
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
hpml: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
computed: {
|
||||
blocks: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:modelValue', value);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateItem(v) {
|
||||
const i = this.blocks.findIndex(x => x.id === v.id);
|
||||
const i = this.modelValue.findIndex(x => x.id === v.id);
|
||||
const newValue = [
|
||||
...this.blocks.slice(0, i),
|
||||
...this.modelValue.slice(0, i),
|
||||
v,
|
||||
...this.blocks.slice(i + 1),
|
||||
...this.modelValue.slice(i + 1),
|
||||
];
|
||||
this.$emit('update:modelValue', newValue);
|
||||
},
|
||||
|
||||
removeItem(el) {
|
||||
const i = this.blocks.findIndex(x => x.id === el.id);
|
||||
const i = this.modelValue.findIndex(x => x.id === el.id);
|
||||
const newValue = [
|
||||
...this.blocks.slice(0, i),
|
||||
...this.blocks.slice(i + 1),
|
||||
...this.modelValue.slice(0, i),
|
||||
...this.modelValue.slice(i + 1),
|
||||
];
|
||||
this.$emit('update:modelValue', newValue);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.item {
|
||||
& + .item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -74,7 +74,7 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
background: var(--panel);
|
||||
border: solid 2px var(--X12);
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
border: solid 2px var(--X13);
|
||||
@ -88,10 +88,6 @@ export default defineComponent({
|
||||
border: solid 2px #f00;
|
||||
}
|
||||
|
||||
& + .cpjygsrt {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
> header {
|
||||
> .title {
|
||||
z-index: 1;
|
||||
|
||||
@ -1,279 +0,0 @@
|
||||
<template>
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<XContainer :removable="removable" :error="error" :warn="warn" :draggable="draggable" @remove="() => $emit('remove')">
|
||||
<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
|
||||
<template #func>
|
||||
<button class="_button" @click="changeType()">
|
||||
<i class="ti ti-pencil"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
|
||||
{{ $ts._pages.script.emptySlot }}
|
||||
</section>
|
||||
<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
|
||||
<input v-model="modelValue.value"/>
|
||||
</section>
|
||||
<section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw">
|
||||
<textarea v-model="modelValue.value"></textarea>
|
||||
</section>
|
||||
<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="modelValue.type === 'number'" class="tbwccoaw">
|
||||
<input v-model="modelValue.value" type="number"/>
|
||||
</section>
|
||||
<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>
|
||||
</optgroup>
|
||||
<optgroup :label="$ts._pages.script.pageVariables">
|
||||
<option v-for="v in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
|
||||
</optgroup>
|
||||
<optgroup :label="$ts._pages.script.enviromentVariables">
|
||||
<option v-for="v in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</section>
|
||||
<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
|
||||
<input v-model="modelValue.value"/>
|
||||
</section>
|
||||
<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="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
|
||||
</section>
|
||||
<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
|
||||
<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
|
||||
</section>
|
||||
<section v-else class="" style="padding:16px;">
|
||||
<XV v-for="(x, i) in modelValue.args" :key="i" 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"/>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
/* eslint-disable vue/no-mutating-props */
|
||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import XContainer from './page-editor.container.vue';
|
||||
import MkTextarea from '@/components/form/textarea.vue';
|
||||
import { blockDefs } from '@/scripts/hpml/index';
|
||||
import * as os from '@/os';
|
||||
import { isLiteralValue } from '@/scripts/hpml/expr';
|
||||
import { funcDefs } from '@/scripts/hpml/lib';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XContainer, MkTextarea,
|
||||
XV: defineAsyncComponent(() => import('./page-editor.script-block.vue')),
|
||||
},
|
||||
|
||||
inject: ['getScriptBlockList'],
|
||||
|
||||
props: {
|
||||
getExpectedType: {
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
modelValue: {
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
required: false,
|
||||
},
|
||||
removable: {
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
hpml: {
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
required: true,
|
||||
},
|
||||
fnSlots: {
|
||||
required: false,
|
||||
},
|
||||
draggable: {
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
error: null,
|
||||
warn: null,
|
||||
slots: '',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
icon(): any {
|
||||
if (this.modelValue.type === null) return null;
|
||||
if (this.modelValue.type.startsWith('fn:')) return 'ti ti-plug';
|
||||
return blockDefs.find(x => x.type === this.modelValue.type).icon;
|
||||
},
|
||||
typeText(): any {
|
||||
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.modelValue.value.slots = this.slots.split('\n').map(x => ({
|
||||
name: x,
|
||||
type: null,
|
||||
}));
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.modelValue.value == null) this.modelValue.value = null;
|
||||
|
||||
if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n');
|
||||
|
||||
this.$watch(() => this.modelValue.type, (t) => {
|
||||
this.warn = null;
|
||||
|
||||
if (this.modelValue.type === 'fn') {
|
||||
const id = uuid();
|
||||
this.modelValue.value = {
|
||||
slots: [],
|
||||
expression: { id, type: null },
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) {
|
||||
const fnName = this.modelValue.type.split(':')[1];
|
||||
const fn = this.hpml.getVarByName(fnName);
|
||||
|
||||
const empties = [];
|
||||
for (let i = 0; i < fn.value.slots.length; i++) {
|
||||
const id = uuid();
|
||||
empties.push({ id, type: null });
|
||||
}
|
||||
this.modelValue.args = empties;
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLiteralValue(this.modelValue)) return;
|
||||
|
||||
const empties = [];
|
||||
for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
|
||||
const id = uuid();
|
||||
empties.push({ id, type: null });
|
||||
}
|
||||
this.modelValue.args = empties;
|
||||
|
||||
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.modelValue.args[i].type = 'number';
|
||||
if (inType === 'string') this.modelValue.args[i].type = 'text';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.$watch(() => this.modelValue.args, (args) => {
|
||||
if (args == null) {
|
||||
this.warn = null;
|
||||
return;
|
||||
}
|
||||
const emptySlotIndex = args.findIndex(x => x.type === null);
|
||||
if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
|
||||
this.warn = {
|
||||
slot: emptySlotIndex,
|
||||
};
|
||||
} else {
|
||||
this.warn = null;
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
});
|
||||
|
||||
this.$watch(() => this.hpml.variables, () => {
|
||||
if (this.type != null && this.modelValue) {
|
||||
this.error = this.hpml.typeCheck(this.modelValue);
|
||||
}
|
||||
}, {
|
||||
deep: true,
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
async changeType() {
|
||||
const { canceled, result: type } = await os.select({
|
||||
title: this.$ts._pages.selectType,
|
||||
groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null),
|
||||
});
|
||||
if (canceled) return;
|
||||
this.modelValue.type = type;
|
||||
},
|
||||
|
||||
_getExpectedType(slot: number) {
|
||||
return this.hpml.getExpectedType(this.modelValue, slot);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.turmquns {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.pbglfege {
|
||||
opacity: 0.5;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.tbwccoaw {
|
||||
> input,
|
||||
> textarea {
|
||||
display: block;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
> textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.hpdwcrvs {
|
||||
padding: 16px;
|
||||
|
||||
> select {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -45,36 +45,10 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'contents'">
|
||||
<div>
|
||||
<XBlocks v-model="content" class="content" :hpml="hpml"/>
|
||||
<div :class="$style.contents">
|
||||
<XBlocks v-model="content" class="content"/>
|
||||
|
||||
<MkButton v-if="!readonly" @click="add()"><i class="ti ti-plus"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'variables'">
|
||||
<div class="qmuvgica">
|
||||
<Sortable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
|
||||
<template #item="{element}">
|
||||
<XVariable
|
||||
:model-value="element"
|
||||
:removable="true"
|
||||
:hpml="hpml"
|
||||
:name="element.name"
|
||||
:title="element.name"
|
||||
:draggable="true"
|
||||
@remove="() => removeVariable(element)"
|
||||
/>
|
||||
</template>
|
||||
</Sortable>
|
||||
|
||||
<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'script'">
|
||||
<div>
|
||||
<MkTextarea v-model="script" class="_code"/>
|
||||
<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
@ -83,31 +57,20 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, computed, provide, watch } 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 '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 '@/components/form/textarea.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkSwitch from '@/components/form/switch.vue';
|
||||
import MkInput from '@/components/form/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';
|
||||
import { selectFile } from '@/scripts/select-file';
|
||||
import { mainRouter } from '@/router';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { $i } from '@/account';
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const props = defineProps<{
|
||||
initPageId?: string;
|
||||
@ -130,12 +93,8 @@ let font = $ref('sans-serif');
|
||||
let content = $ref([]);
|
||||
let alignCenter = $ref(false);
|
||||
let hideTitleWhenPinned = $ref(false);
|
||||
let variables = $ref([]);
|
||||
let hpml = $ref(null);
|
||||
let script = $ref('');
|
||||
|
||||
provide('readonly', readonly);
|
||||
provide('getScriptBlockList', getScriptBlockList);
|
||||
provide('getPageBlockList', getPageBlockList);
|
||||
|
||||
watch($$(eyeCatchingImageId), async () => {
|
||||
@ -154,11 +113,11 @@ function getSaveOptions() {
|
||||
name: name.trim(),
|
||||
summary: summary,
|
||||
font: font,
|
||||
script: script,
|
||||
script: '',
|
||||
hideTitleWhenPinned: hideTitleWhenPinned,
|
||||
alignCenter: alignCenter,
|
||||
content: content,
|
||||
variables: variables,
|
||||
variables: [],
|
||||
eyeCatchingImageId: eyeCatchingImageId,
|
||||
};
|
||||
}
|
||||
@ -243,7 +202,7 @@ async function add() {
|
||||
const { canceled, result: type } = await os.select({
|
||||
type: null,
|
||||
title: i18n.ts._pages.chooseBlock,
|
||||
groupedItems: getPageBlockList(),
|
||||
items: getPageBlockList(),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
@ -251,97 +210,13 @@ async function add() {
|
||||
content.push({ id, type });
|
||||
}
|
||||
|
||||
async function addVariable() {
|
||||
let { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts._pages.enterVariableName,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
name = name.trim();
|
||||
|
||||
if (hpml.isUsedName(name)) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts._pages.variableNameIsAlreadyUsed,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const id = uuid();
|
||||
variables.push({ id, name, type: null });
|
||||
}
|
||||
|
||||
function removeVariable(v) {
|
||||
variables = variables.filter(x => x.name !== v.name);
|
||||
}
|
||||
|
||||
function getPageBlockList() {
|
||||
return [{
|
||||
label: i18n.ts._pages.contentBlocks,
|
||||
items: [
|
||||
{ value: 'section', text: i18n.ts._pages.blocks.section },
|
||||
{ value: 'text', text: i18n.ts._pages.blocks.text },
|
||||
{ value: 'image', text: i18n.ts._pages.blocks.image },
|
||||
{ value: 'textarea', text: i18n.ts._pages.blocks.textarea },
|
||||
{ value: 'note', text: i18n.ts._pages.blocks.note },
|
||||
{ value: 'canvas', text: i18n.ts._pages.blocks.canvas },
|
||||
],
|
||||
}, {
|
||||
label: i18n.ts._pages.inputBlocks,
|
||||
items: [
|
||||
{ value: 'button', text: i18n.ts._pages.blocks.button },
|
||||
{ value: 'radioButton', text: i18n.ts._pages.blocks.radioButton },
|
||||
{ value: 'textInput', text: i18n.ts._pages.blocks.textInput },
|
||||
{ value: 'textareaInput', text: i18n.ts._pages.blocks.textareaInput },
|
||||
{ value: 'numberInput', text: i18n.ts._pages.blocks.numberInput },
|
||||
{ value: 'switch', text: i18n.ts._pages.blocks.switch },
|
||||
{ value: 'counter', text: i18n.ts._pages.blocks.counter },
|
||||
],
|
||||
}, {
|
||||
label: i18n.ts._pages.specialBlocks,
|
||||
items: [
|
||||
{ value: 'if', text: i18n.ts._pages.blocks.if },
|
||||
{ value: 'post', text: i18n.ts._pages.blocks.post },
|
||||
],
|
||||
}];
|
||||
}
|
||||
|
||||
function getScriptBlockList(type: string = null) {
|
||||
const list = [];
|
||||
|
||||
const blocks = blockDefs.filter(block => type == null || block.out == null || block.out === type || typeof block.out === 'number');
|
||||
|
||||
for (const block of blocks) {
|
||||
const category = list.find(x => x.category === block.category);
|
||||
if (category) {
|
||||
category.items.push({
|
||||
value: block.type,
|
||||
text: i18n.t(`_pages.script.blocks.${block.type}`),
|
||||
});
|
||||
} else {
|
||||
list.push({
|
||||
category: block.category,
|
||||
label: i18n.t(`_pages.script.categories.${block.category}`),
|
||||
items: [{
|
||||
value: block.type,
|
||||
text: i18n.t(`_pages.script.blocks.${block.type}`),
|
||||
}],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const userFns = variables.filter(x => x.type === 'fn');
|
||||
if (userFns.length > 0) {
|
||||
list.unshift({
|
||||
label: i18n.t('_pages.script.categories.fn'),
|
||||
items: userFns.map(v => ({
|
||||
value: 'fn:' + v.name,
|
||||
text: v.name,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
return [
|
||||
{ value: 'section', text: i18n.ts._pages.blocks.section },
|
||||
{ value: 'text', text: i18n.ts._pages.blocks.text },
|
||||
{ value: 'image', text: i18n.ts._pages.blocks.image },
|
||||
{ value: 'note', text: i18n.ts._pages.blocks.note },
|
||||
];
|
||||
}
|
||||
|
||||
function setEyeCatchingImage(img) {
|
||||
@ -354,21 +229,7 @@ function removeEyeCatchingImage() {
|
||||
eyeCatchingImageId = null;
|
||||
}
|
||||
|
||||
function highlighter(code) {
|
||||
return highlight(code, languages.js, 'javascript');
|
||||
}
|
||||
|
||||
async function init() {
|
||||
hpml = new HpmlTypeChecker();
|
||||
|
||||
watch($$(variables), () => {
|
||||
hpml.variables = variables;
|
||||
}, { deep: true });
|
||||
|
||||
watch($$(content), () => {
|
||||
hpml.pageVars = collectPageVars(content);
|
||||
}, { deep: true });
|
||||
|
||||
if (props.initPageId) {
|
||||
page = await os.api('pages/show', {
|
||||
pageId: props.initPageId,
|
||||
@ -389,11 +250,9 @@ async function init() {
|
||||
currentName = page.name;
|
||||
summary = page.summary;
|
||||
font = page.font;
|
||||
script = page.script;
|
||||
hideTitleWhenPinned = page.hideTitleWhenPinned;
|
||||
alignCenter = page.alignCenter;
|
||||
content = page.content;
|
||||
variables = page.variables;
|
||||
eyeCatchingImageId = page.eyeCatchingImageId;
|
||||
} else {
|
||||
const id = uuid();
|
||||
@ -417,14 +276,6 @@ const headerTabs = $computed(() => [{
|
||||
key: 'contents',
|
||||
title: i18n.ts._pages.contents,
|
||||
icon: 'fas fa-sticky-note',
|
||||
}, {
|
||||
key: 'variables',
|
||||
title: i18n.ts._pages.variables,
|
||||
icon: 'fas fa-magic',
|
||||
}, {
|
||||
key: 'script',
|
||||
title: i18n.ts.script,
|
||||
icon: 'ti ti-code',
|
||||
}]);
|
||||
|
||||
definePageMetadata(computed(() => {
|
||||
@ -442,8 +293,20 @@ definePageMetadata(computed(() => {
|
||||
}));
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.contents {
|
||||
&:global {
|
||||
> .add {
|
||||
margin: 16px auto 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jqqmcavi {
|
||||
margin-bottom: 16px;
|
||||
|
||||
> .button {
|
||||
& + .button {
|
||||
margin-left: 8px;
|
||||
|
||||
@ -175,6 +175,7 @@ definePageMetadata(computed(() => page ? {
|
||||
|
||||
.xcukqgmh {
|
||||
> .main {
|
||||
padding: 32px;
|
||||
|
||||
> .header {
|
||||
padding: 16px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user