monkee.ch/monkeeShark
1
0
Fork 0
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
Show stats Download patch file Download diff file Expand all files Collapse all files

251
locales/ja-JP.yml
View file

@ -1489,8 +1489,6 @@ _pages:
eyeCatchingImageRemove: "アイキャッチ画像を削除" eyeCatchingImageRemove: "アイキャッチ画像を削除"
chooseBlock: "ブロックを追加" chooseBlock: "ブロックを追加"
selectType: "種類を選択" selectType: "種類を選択"
enterVariableName: "変数名を決めてください"
variableNameIsAlreadyUsed: "その変数名は既に使われています"
contentBlocks: "コンテンツ" contentBlocks: "コンテンツ"
inputBlocks: "入力" inputBlocks: "入力"
specialBlocks: "特殊" specialBlocks: "特殊"
@ -1501,261 +1499,12 @@ _pages:
image: "画像" image: "画像"
button: "ボタン" 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: "ノート埋め込み"
_note: _note:
id: "ノートID" id: "ノートID"
idDescription: "ノートURLをペーストして設定することもできます。" idDescription: "ノートURLをペーストして設定することもできます。"
detailed: "詳細な表示" 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: _relayStatus:
requesting: "承認待ち" requesting: "承認待ち"
accepted: "承認済み" accepted: "承認済み"

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 MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os'; import * as os from '@/os';
const props = withDefaults(defineProps<{ const props = defineProps<{
value: any modelValue: any
}>(), { }>();
value: {
fileId: null, const emit = defineEmits<{
}, (ev: 'update:modelValue', value: any): void;
}); }>();
let file: any = $ref(null); let file: any = $ref(null);
async function choose() { async function choose() {
os.selectDriveFile(false).then((fileResponse: any) => { os.selectDriveFile(false).then((fileResponse: any) => {
file = fileResponse; file = fileResponse;
props.value.fileId = fileResponse.id; emit('update:modelValue', {
...props.modelValue,
fileId: fileResponse.id,
});
}); });
} }
onMounted(async () => { onMounted(async () => {
if (props.value.fileId == null) { if (props.modelValue.fileId == null) {
await choose(); await choose();
} else { } else {
os.api('drive/files/show', { os.api('drive/files/show', {
fileId: props.value.fileId, fileId: props.modelValue.fileId,
}).then(fileResponse => { }).then(fileResponse => {
file = 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 #label>{{ $ts._pages.blocks._note.id }}</template>
<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template> <template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
</MkInput> </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;"/> <XNote v-if="note && !props.modelValue.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;"/> <XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
</section> </section>
</XContainer> </XContainer>
</template> </template>
@ -26,26 +26,31 @@ import XNote from '@/components/MkNote.vue';
import XNoteDetailed from '@/components/MkNoteDetailed.vue'; import XNoteDetailed from '@/components/MkNoteDetailed.vue';
import * as os from '@/os'; import * as os from '@/os';
const props = withDefaults(defineProps<{ const props = defineProps<{
value: any modelValue: any
}>(), { }>();
value: {
note: null,
detailed: false,
},
});
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); let note: any = $ref(null);
watch(id, async () => { watch(id, async () => {
if (id && (id.startsWith('http://') || id.startsWith('https://'))) { 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 { } 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, 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> <template>
<!-- eslint-disable vue/no-mutating-props --> <!-- eslint-disable vue/no-mutating-props -->
<XContainer :draggable="true" @remove="() => $emit('remove')"> <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> <template #func>
<button class="_button" @click="rename()"> <button class="_button" @click="rename()">
<i class="ti ti-pencil"></i> <i class="ti ti-pencil"></i>
</button> </button>
<button class="_button" @click="add()">
<i class="ti ti-plus"></i>
</button>
</template> </template>
<section class="ilrvjyvi"> <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> </section>
</XContainer> </XContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* 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 { v4 as uuid } from 'uuid';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { deepClone } from '@/scripts/clone';
import MkButton from '@/components/MkButton.vue';
const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue')); const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
value: any, modelValue: any,
hpml: any
}>(), { }>(), {
value: { modelValue: {},
title: null, });
children: [],
}, 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'); const getPageBlockList = inject<(any) => any>('getPageBlockList');
@ -42,25 +53,28 @@ const getPageBlockList = inject<(any) => any>('getPageBlockList');
async function rename() { async function rename() {
const { canceled, result: title } = await os.inputText({ const { canceled, result: title } = await os.inputText({
title: 'Enter title', title: 'Enter title',
default: props.value.title, default: props.modelValue.title,
}); });
if (canceled) return; if (canceled) return;
props.value.title = title; emit('update:modelValue', {
...props.modelValue,
title,
});
} }
async function add() { async function add() {
const { canceled, result: type } = await os.select({ const { canceled, result: type } = await os.select({
title: i18n.ts._pages.chooseBlock, title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList(), items: getPageBlockList(),
}); });
if (canceled) return; if (canceled) return;
const id = uuid(); const id = uuid();
props.value.children.push({ id, type }); children.push({ id, type });
} }
onMounted(() => { onMounted(() => {
if (props.value.title == null) { if (props.modelValue.title == null) {
rename(); rename();
} }
}); });
@ -69,7 +83,15 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.ilrvjyvi { .ilrvjyvi {
> .children { > .children {
padding: 16px; margin: 16px;
&:empty {
display: none;
}
}
> .add {
margin: 16px auto;
} }
} }
</style> </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> <template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
<section class="vckmsadr"> <section class="vckmsadr">
<textarea v-model="value.text"></textarea> <textarea v-model="text"></textarea>
</section> </section>
</XContainer> </XContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { } from 'vue'; import { watch } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
withDefaults(defineProps<{ const props = defineProps<{
value: any modelValue: any
}>(), { }>();
value: {
text: '', const emit = defineEmits<{
}, (ev: 'update:modelValue', value: any): void;
}>();
const text = $ref(props.modelValue.text ?? '');
watch($$(text), () => {
emit('update:modelValue', {
...props.modelValue,
text,
});
}); });
</script> </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>

55
packages/client/src/pages/page-editor/page-editor.blocks.vue
View file

@ -1,7 +1,10 @@
<template> <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}"> <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> </template>
</Sortable> </Sortable>
</template> </template>
@ -10,25 +13,15 @@
import { defineComponent, defineAsyncComponent } from 'vue'; import { defineComponent, defineAsyncComponent } from 'vue';
import XSection from './els/page-editor.el.section.vue'; import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.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 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 XNote from './els/page-editor.el.note.vue';
import * as os from '@/os'; import * as os from '@/os';
import { deepClone } from '@/scripts/clone';
export default defineComponent({ export default defineComponent({
components: { components: {
Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)), 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: { props: {
@ -36,43 +29,37 @@ export default defineComponent({
type: Array, type: Array,
required: true, required: true,
}, },
hpml: {
required: true,
},
}, },
emits: ['update:modelValue'], emits: ['update:modelValue'],
computed: {
blocks: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
},
},
},
methods: { methods: {
updateItem(v) { updateItem(v) {
const i = this.blocks.findIndex(x => x.id === v.id); const i = this.modelValue.findIndex(x => x.id === v.id);
const newValue = [ const newValue = [
...this.blocks.slice(0, i), ...this.modelValue.slice(0, i),
v, v,
...this.blocks.slice(i + 1), ...this.modelValue.slice(i + 1),
]; ];
this.$emit('update:modelValue', newValue); this.$emit('update:modelValue', newValue);
}, },
removeItem(el) { removeItem(el) {
const i = this.blocks.findIndex(x => x.id === el.id); const i = this.modelValue.findIndex(x => x.id === el.id);
const newValue = [ const newValue = [
...this.blocks.slice(0, i), ...this.modelValue.slice(0, i),
...this.blocks.slice(i + 1), ...this.modelValue.slice(i + 1),
]; ];
this.$emit('update:modelValue', newValue); this.$emit('update:modelValue', newValue);
}, },
}, },
}); });
</script> </script>
<style lang="scss" module>
.item {
& + .item {
margin-top: 16px;
}
}
</style>

6
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -74,7 +74,7 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
background: var(--panel); background: var(--panel);
border: solid 2px var(--X12); border: solid 2px var(--X12);
border-radius: 6px; border-radius: 8px;
&:hover { &:hover {
border: solid 2px var(--X13); border: solid 2px var(--X13);
@ -88,10 +88,6 @@ export default defineComponent({
border: solid 2px #f00; border: solid 2px #f00;
} }
& + .cpjygsrt {
margin-top: 16px;
}
> header { > header {
> .title { > .title {
z-index: 1; z-index: 1;

279
packages/client/src/pages/page-editor/page-editor.script-block.vue
View file

@ -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>

177
packages/client/src/pages/page-editor/page-editor.vue
View file

@ -45,36 +45,10 @@
</div> </div>
<div v-else-if="tab === 'contents'"> <div v-else-if="tab === 'contents'">
<div> <div :class="$style.contents">
<XBlocks v-model="content" class="content" :hpml="hpml"/> <XBlocks v-model="content" class="content"/>
<MkButton v-if="!readonly" @click="add()"><i class="ti ti-plus"></i></MkButton> <MkButton v-if="!readonly" rounded class="add" @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"/>
</div> </div>
</div> </div>
</MkSpacer> </MkSpacer>
@ -83,31 +57,20 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, computed, provide, watch } from 'vue'; 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 { v4 as uuid } from 'uuid';
import XVariable from './page-editor.script-block.vue';
import XBlocks from './page-editor.blocks.vue'; import XBlocks from './page-editor.blocks.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import MkInput from '@/components/form/input.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 { url } from '@/config';
import { collectPageVars } from '@/scripts/collect-page-vars';
import * as os from '@/os'; import * as os from '@/os';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account'; import { $i } from '@/account';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{ const props = defineProps<{
initPageId?: string; initPageId?: string;
@ -130,12 +93,8 @@ let font = $ref('sans-serif');
let content = $ref([]); let content = $ref([]);
let alignCenter = $ref(false); let alignCenter = $ref(false);
let hideTitleWhenPinned = $ref(false); let hideTitleWhenPinned = $ref(false);
let variables = $ref([]);
let hpml = $ref(null);
let script = $ref('');
provide('readonly', readonly); provide('readonly', readonly);
provide('getScriptBlockList', getScriptBlockList);
provide('getPageBlockList', getPageBlockList); provide('getPageBlockList', getPageBlockList);
watch($$(eyeCatchingImageId), async () => { watch($$(eyeCatchingImageId), async () => {
@ -154,11 +113,11 @@ function getSaveOptions() {
name: name.trim(), name: name.trim(),
summary: summary, summary: summary,
font: font, font: font,
script: script, script: '',
hideTitleWhenPinned: hideTitleWhenPinned, hideTitleWhenPinned: hideTitleWhenPinned,
alignCenter: alignCenter, alignCenter: alignCenter,
content: content, content: content,
variables: variables, variables: [],
eyeCatchingImageId: eyeCatchingImageId, eyeCatchingImageId: eyeCatchingImageId,
}; };
} }
@ -243,7 +202,7 @@ async function add() {
const { canceled, result: type } = await os.select({ const { canceled, result: type } = await os.select({
type: null, type: null,
title: i18n.ts._pages.chooseBlock, title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList(), items: getPageBlockList(),
}); });
if (canceled) return; if (canceled) return;
@ -251,97 +210,13 @@ async function add() {
content.push({ id, type }); 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() { function getPageBlockList() {
return [{ return [
label: i18n.ts._pages.contentBlocks,
items: [
{ value: 'section', text: i18n.ts._pages.blocks.section }, { value: 'section', text: i18n.ts._pages.blocks.section },
{ value: 'text', text: i18n.ts._pages.blocks.text }, { value: 'text', text: i18n.ts._pages.blocks.text },
{ value: 'image', text: i18n.ts._pages.blocks.image }, { 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: '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;
} }
function setEyeCatchingImage(img) { function setEyeCatchingImage(img) {
@ -354,21 +229,7 @@ function removeEyeCatchingImage() {
eyeCatchingImageId = null; eyeCatchingImageId = null;
} }
function highlighter(code) {
return highlight(code, languages.js, 'javascript');
}
async function init() { async function init() {
hpml = new HpmlTypeChecker();
watch($$(variables), () => {
hpml.variables = variables;
}, { deep: true });
watch($$(content), () => {
hpml.pageVars = collectPageVars(content);
}, { deep: true });
if (props.initPageId) { if (props.initPageId) {
page = await os.api('pages/show', { page = await os.api('pages/show', {
pageId: props.initPageId, pageId: props.initPageId,
@ -389,11 +250,9 @@ async function init() {
currentName = page.name; currentName = page.name;
summary = page.summary; summary = page.summary;
font = page.font; font = page.font;
script = page.script;
hideTitleWhenPinned = page.hideTitleWhenPinned; hideTitleWhenPinned = page.hideTitleWhenPinned;
alignCenter = page.alignCenter; alignCenter = page.alignCenter;
content = page.content; content = page.content;
variables = page.variables;
eyeCatchingImageId = page.eyeCatchingImageId; eyeCatchingImageId = page.eyeCatchingImageId;
} else { } else {
const id = uuid(); const id = uuid();
@ -417,14 +276,6 @@ const headerTabs = $computed(() => [{
key: 'contents', key: 'contents',
title: i18n.ts._pages.contents, title: i18n.ts._pages.contents,
icon: 'fas fa-sticky-note', 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(() => { definePageMetadata(computed(() => {
@ -442,8 +293,20 @@ definePageMetadata(computed(() => {
})); }));
</script> </script>
<style lang="scss" module>
.contents {
&:global {
> .add {
margin: 16px auto 0 auto;
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.jqqmcavi { .jqqmcavi {
margin-bottom: 16px;
> .button { > .button {
& + .button { & + .button {
margin-left: 8px; margin-left: 8px;

1
packages/client/src/pages/page.vue
View file

@ -175,6 +175,7 @@ definePageMetadata(computed(() => page ? {
.xcukqgmh { .xcukqgmh {
> .main { > .main {
padding: 32px;
> .header { > .header {
padding: 16px; padding: 16px;