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を呼び出す際の制限を撤廃 - AiScriptからMisskeyサーバーAPIを呼び出す際の制限を撤廃
- Playで直接投稿フォームを埋め込めるように(`Ui:C:postForm`)
- Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように - Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように
- Enhance: 自分が押したリアクションのデザインを改善 - 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> <option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
</MkSelect> </MkSelect>
<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton> <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"> <MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
<template #label>{{ c.title }}</template> <template #label>{{ c.title }}</template>
<template v-for="child in c.children" :key="child"> <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 MkSelect from '@/components/MkSelect.vue';
import { AsUiComponent } from '@/scripts/aiscript/ui'; import { AsUiComponent } from '@/scripts/aiscript/ui';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import MkPostForm from '@/components/MkPostForm.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
component: AsUiComponent; component: AsUiComponent;
@ -114,4 +122,9 @@ function openPostForm() {
.fontMonospace { .fontMonospace {
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
} }
.postForm {
background: var(--bg);
border-radius: 8px;
}
</style> </style>

View file

@ -629,6 +629,8 @@ function onDrop(ev): void {
} }
function saveDraft() { function saveDraft() {
if (props.instant) return;
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}'); const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
draftData[draftKey] = { 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>) { export function patch(id: string, def: values.Value, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>) {
// TODO // 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) { export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: Ref<AsUiRoot>) => void) {
const instances = {}; const instances = {};
@ -569,5 +597,9 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
'Ui:C:postFormButton': values.FN_NATIVE(([def, id], opts) => { 'Ui:C:postFormButton': values.FN_NATIVE(([def, id], opts) => {
return createComponentInstance('postFormButton', def, id, getPostFormButtonOptions, opts.call); 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);
}),
}; };
} }