improve aiscript ui

packages/frontend/src/components/MkAsUi.vue

@@ -7,9 +7,9 @@
 	</div>
 	<span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span>
 	<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text"/>
-	<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="c.onClick">{{ c.text }}</MkButton>
+	<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :disabled="c.disabled" :small="size === 'small'" inline @click="c.onClick">{{ c.text }}</MkButton>
-	<div v-else-if="c.type === 'buttons'" class="_buttons">
+	<div v-else-if="c.type === 'buttons'" class="_buttons" :style="{ justifyContent: align }">
-		<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
+		<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :disabled="button.disabled" inline :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
 	</div>
 	<MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate">
 		<template v-if="c.label" #label>{{ c.label }}</template>
@@ -41,7 +41,7 @@
 	</MkFolder>
 	<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"/>
+			<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size" :align="c.align"/>
 		</template>
 	</div>
 </div>
@@ -62,8 +62,10 @@ const props = withDefaults(defineProps<{
 	component: AsUiComponent;
 	components: Ref<AsUiComponent>[];
 	size: 'small' | 'medium' | 'large';
+	align: 'left' | 'center' | 'right';
 }>(), {
 	size: 'medium',
+	align: 'left',
 });
 
 const c = props.component;

packages/frontend/src/scripts/aiscript/ui.ts

@@ -50,6 +50,7 @@ export type AsUiButton = AsUiComponentBase & {
 	onClick?: () => void;
 	primary?: boolean;
 	rounded?: boolean;
+	disabled?: boolean;
 };
 
 export type AsUiButtons = AsUiComponentBase & {
@@ -302,6 +303,8 @@ function getButtonOptions(def: values.Value | undefined, call: (fn: values.VFn,
 	if (primary) utils.assertBoolean(primary);
 	const rounded = def.value.get('rounded');
 	if (rounded) utils.assertBoolean(rounded);
+	const disabled = button.value.get('disabled');
+	if (disabled) utils.assertBoolean(disabled);
 
 	return {
 		text: text?.value,
@@ -310,6 +313,7 @@ function getButtonOptions(def: values.Value | undefined, call: (fn: values.VFn,
 		},
 		primary: primary?.value,
 		rounded: rounded?.value,
+		disabled: disabled?.value,
 	};
 }
 
@@ -330,6 +334,8 @@ function getButtonsOptions(def: values.Value | undefined, call: (fn: values.VFn,
 			if (primary) utils.assertBoolean(primary);
 			const rounded = button.value.get('rounded');
 			if (rounded) utils.assertBoolean(rounded);
+			const disabled = button.value.get('disabled');
+			if (disabled) utils.assertBoolean(disabled);
 
 			return {
 				text: text.value,
@@ -338,6 +344,7 @@ function getButtonsOptions(def: values.Value | undefined, call: (fn: values.VFn,
 				},
 				primary: primary?.value,
 				rounded: rounded?.value,
+				disabled: disabled?.value,
 			};
 		}) : [],
 	};