diff options
Diffstat (limited to 'packages/frontend')
| -rw-r--r-- | packages/frontend/src/components/MkAsUi.vue | 10 | ||||
| -rw-r--r-- | packages/frontend/src/scripts/aiscript/ui.ts | 7 |
2 files changed, 13 insertions, 4 deletions
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue index 9543ccc4da..4f463d73d9 100644 --- a/packages/frontend/src/components/MkAsUi.vue +++ b/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> - <div v-else-if="c.type === 'buttons'" class="_buttons"> - <MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.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" :style="{ justifyContent: align }"> + <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; diff --git a/packages/frontend/src/scripts/aiscript/ui.ts b/packages/frontend/src/scripts/aiscript/ui.ts index 2555cd391b..b1895a5f33 100644 --- a/packages/frontend/src/scripts/aiscript/ui.ts +++ b/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, }; }) : [], }; |