mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-10-31 05:24:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve aiscript ui

Browse source
This commit is contained in:
syuilo 2023-01-17 17:09:43 +09:00
parent fe4fbafcf0
commit 8f0c598772
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,9 +7,9 @@
</div> </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> <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"/> <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> </div>
<MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate"> <MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
@ -41,7 +41,7 @@
</MkFolder> </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 }"> <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"> <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> </template>
</div> </div>
</div> </div>
@ -62,8 +62,10 @@ const props = withDefaults(defineProps<{
component: AsUiComponent; component: AsUiComponent;
components: Ref<AsUiComponent>[]; components: Ref<AsUiComponent>[];
size: 'small' | 'medium' | 'large'; size: 'small' | 'medium' | 'large';
align: 'left' | 'center' | 'right';
}>(), { }>(), {
size: 'medium', size: 'medium',
align: 'left',
}); });
const c = props.component; const c = props.component;

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

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