From b3decf965fa15fbc35bf4641bfdeafa1c645b902 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 24 Dec 2022 11:57:06 +0900 Subject: [PATCH] =?UTF-8?q?pages=E9=96=A2=E9=80=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/ja-JP.yml | 251 ---------------- .../page-editor/els/page-editor.el.button.vue | 70 ----- .../page-editor/els/page-editor.el.canvas.vue | 38 --- .../els/page-editor.el.counter.vue | 34 --- .../page-editor/els/page-editor.el.if.vue | 67 ----- .../page-editor/els/page-editor.el.image.vue | 23 +- .../page-editor/els/page-editor.el.note.vue | 35 ++- .../els/page-editor.el.number-input.vue | 34 --- .../page-editor/els/page-editor.el.post.vue | 31 -- .../els/page-editor.el.radio-button.vue | 39 --- .../els/page-editor.el.section.vue | 58 ++-- .../page-editor/els/page-editor.el.switch.vue | 34 --- .../els/page-editor.el.text-input.vue | 27 -- .../page-editor/els/page-editor.el.text.vue | 25 +- .../els/page-editor.el.textarea-input.vue | 28 -- .../els/page-editor.el.textarea.vue | 45 --- .../pages/page-editor/page-editor.blocks.vue | 55 ++-- .../page-editor/page-editor.container.vue | 6 +- .../page-editor/page-editor.script-block.vue | 279 ------------------ .../src/pages/page-editor/page-editor.vue | 185 ++---------- packages/client/src/pages/page.vue | 1 + 21 files changed, 137 insertions(+), 1228 deletions(-) delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.button.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.counter.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.if.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.post.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.switch.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue delete mode 100644 packages/client/src/pages/page-editor/page-editor.script-block.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 6abb44dc58..98e435a6b5 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -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: "承認済み" diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue deleted file mode 100644 index 08f993c426..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue deleted file mode 100644 index 7ebf8c1478..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue deleted file mode 100644 index 994d0b5b00..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue deleted file mode 100644 index f56c8aec8a..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue index 4b3c6cbf10..a84cb1e80e 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue @@ -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; }); diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue index c3b3e3b37e..dcc1a32636 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue @@ -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, }); diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue deleted file mode 100644 index dc89d0287b..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue deleted file mode 100644 index 9592d36829..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue deleted file mode 100644 index 1aa2f5ca4b..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue index f18188ce61..fd1d3fa69c 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue deleted file mode 100644 index 96d35c3966..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue deleted file mode 100644 index 8cbae1caf5..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue index 27274253b4..6f11e2a08b 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue deleted file mode 100644 index 973f32242b..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue deleted file mode 100644 index e0c05df911..0000000000 --- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue index bc983cd2c8..f99fcb202f 100644 --- a/packages/client/src/pages/page-editor/page-editor.blocks.vue +++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue @@ -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> diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue index 03228b8e01..15cdda5efb 100644 --- a/packages/client/src/pages/page-editor/page-editor.container.vue +++ b/packages/client/src/pages/page-editor/page-editor.container.vue @@ -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; diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue deleted file mode 100644 index 1f621e185f..0000000000 --- a/packages/client/src/pages/page-editor/page-editor.script-block.vue +++ /dev/null @@ -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> diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue index f094de0cbc..f7740545d1 100644 --- a/packages/client/src/pages/page-editor/page-editor.vue +++ b/packages/client/src/pages/page-editor/page-editor.vue @@ -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; diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index 09d92d72ab..7072b8ef03 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -175,6 +175,7 @@ definePageMetadata(computed(() => page ? { .xcukqgmh { > .main { + padding: 32px; > .header { padding: 16px;