worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add Ui:C:folder for AiScript

Browse source
This commit is contained in:
syuilo 2023-01-05 17:09:36 +09:00
parent 1cae688ccb
commit d890383a00
2 changed files with 39 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/frontend/src/components/MkAsUi.vue
View file

@ -33,6 +33,12 @@
<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'" @click="openPostForm">{{ c.text }}</MkButton>
<FormFolder v-else-if="c.type === 'folder'" :default-open="c.opened">
<template #label>{{ c.title }}</template>
<template v-for="child in c.children" :key="child">
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/>
</template>
</FormFolder>
<div v-else-if="c.type === 'container'" :class="[$style.container, { [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace', [$style.containerCenter]: c.align === 'center' }]" :style="{ backgroundColor: c.bgColor ?? null, color: c.fgColor ?? null, borderWidth: c.borderWidth ? `${c.borderWidth}px` : 0, borderColor: c.borderColor ?? 'var(--divider)', padding: c.padding ? `${c.padding}px` : 0, borderRadius: c.rounded ? '8px' : 0 }">
<template v-for="child in c.children" :key="child">
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/>
@ -50,6 +56,7 @@ import MkSwitch from '@/components/form/switch.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkSelect from '@/components/form/select.vue';
import { AsUiComponent } from '@/scripts/aiscript/ui';
import FormFolder from '@/components/form/folder.vue';
const props = withDefaults(defineProps<{
component: AsUiComponent;

33
packages/frontend/src/scripts/aiscript/ui.ts
View file

@ -100,6 +100,13 @@ export type AsUiSelect = AsUiComponentBase & {
caption?: string;
};
export type AsUiFolder = AsUiComponentBase & {
type: 'folder';
children?: AsUiComponent['id'][];
title?: string;
opened?: boolean;
};
export type AsUiPostFormButton = AsUiComponentBase & {
type: 'postFormButton';
text?: string;
@ -110,7 +117,7 @@ export type AsUiPostFormButton = AsUiComponentBase & {
};
};
export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiPostFormButton;
export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiFolder | AsUiPostFormButton;
export function patch(id: string, def: values.Value, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>) {
// TODO
@ -389,6 +396,26 @@ function getSelectOptions(def: values.Value | undefined, call: (fn: values.VFn,
};
}
function getFolderOptions(def: values.Value | undefined): Omit<AsUiFolder, 'id' | 'type'> {
utils.assertObject(def);
const children = def.value.get('children');
if (children) utils.assertArray(children);
const title = def.value.get('title');
if (title) utils.assertString(title);
const opened = def.value.get('opened');
if (opened) utils.assertBoolean(opened);
return {
children: children ? children.value.map(v => {
utils.assertObject(v);
return v.value.get('id').value;
}) : [],
title: title?.value ?? '',
opened: opened?.value ?? true,
};
}
function getPostFormButtonOptions(def: values.Value | undefined, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>): Omit<AsUiPostFormButton, 'id' | 'type'> {
utils.assertObject(def);
@ -519,6 +546,10 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
return createComponentInstance('select', def, id, getSelectOptions, opts.call);
}),
'Ui:C:folder': values.FN_NATIVE(async ([def, id], opts) => {
return createComponentInstance('folder', def, id, getFolderOptions, opts.call);
}),
'Ui:C:postFormButton': values.FN_NATIVE(async ([def, id], opts) => {
return createComponentInstance('postFormButton', def, id, getPostFormButtonOptions, opts.call);
}),