enhance(frontend): add Ui:C:postForm to play

This commit is contained in:
syuilo 2023-09-09 09:54:54 +09:00
parent 19b10ca803
commit 55d392818c
4 changed files with 49 additions and 1 deletions

View file

@ -32,6 +32,7 @@
- 投稿フォームのプレビューの表示状態を記憶するように
- ノート詳細ページ読み込み時のパフォーマンスを改善
- AiScriptからMisskeyサーバーAPIを呼び出す際の制限を撤廃
- Playで直接投稿フォームを埋め込めるように(`Ui:C:postForm`)
- Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように
- Enhance: 自分が押したリアクションのデザインを改善
- Enhance: ノート検索にローカルのみ検索可能なオプションの追加

View file

@ -38,6 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
</MkSelect>
<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton>
<div v-else-if="c.type === 'postForm'" :class="$style.postForm">
<MkPostForm
fixed
:instant="true"
:initialText="c.form.text"
/>
</div>
<MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
<template #label>{{ c.title }}</template>
<template v-for="child in c.children" :key="child">
@ -62,6 +69,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
import MkSelect from '@/components/MkSelect.vue';
import { AsUiComponent } from '@/scripts/aiscript/ui';
import MkFolder from '@/components/MkFolder.vue';
import MkPostForm from '@/components/MkPostForm.vue';
const props = withDefaults(defineProps<{
component: AsUiComponent;
@ -114,4 +122,9 @@ function openPostForm() {
.fontMonospace {
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
}
.postForm {
background: var(--bg);
border-radius: 8px;
}
</style>

View file

@ -629,6 +629,8 @@ function onDrop(ev): void {
}
function saveDraft() {
if (props.instant) return;
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
draftData[draftKey] = {

View file

@ -124,7 +124,14 @@ export type AsUiPostFormButton = AsUiComponentBase & {
};
};
export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiFolder | AsUiPostFormButton;
export type AsUiPostForm = AsUiComponentBase & {
type: 'postForm';
form?: {
text: string;
};
};
export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiFolder | AsUiPostFormButton | AsUiPostForm;
export function patch(id: string, def: values.Value, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>) {
// TODO
@ -462,6 +469,27 @@ function getPostFormButtonOptions(def: values.Value | undefined, call: (fn: valu
};
}
function getPostFormOptions(def: values.Value | undefined, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>): Omit<AsUiPostForm, 'id' | 'type'> {
utils.assertObject(def);
const form = def.value.get('form');
if (form) utils.assertObject(form);
const getForm = () => {
const text = form!.value.get('text');
utils.assertString(text);
return {
text: text.value,
};
};
return {
form: form ? getForm() : {
text: '',
},
};
}
export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: Ref<AsUiRoot>) => void) {
const instances = {};
@ -569,5 +597,9 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
'Ui:C:postFormButton': values.FN_NATIVE(([def, id], opts) => {
return createComponentInstance('postFormButton', def, id, getPostFormButtonOptions, opts.call);
}),
'Ui:C:postForm': values.FN_NATIVE(([def, id], opts) => {
return createComponentInstance('postForm', def, id, getPostFormOptions, opts.call);
}),
};
}