2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
2024-02-13 15:59:27 +00:00
|
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
2023-07-27 05:31:52 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2023-01-05 04:59:48 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div v-if="c.type === 'root'" :class="$style.root">
|
|
|
|
<template v-for="child in c.children" :key="child">
|
|
|
|
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/>
|
|
|
|
</template>
|
|
|
|
</div>
|
2024-01-30 10:53:53 +00:00
|
|
|
<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}%` : undefined, fontWeight: c.bold ? 'bold' : undefined, color: c.color }">{{ 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 ?? ''" @clickEv="c.onClickEv"/>
|
2023-01-17 08:09:43 +00:00
|
|
|
<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>
|
2023-01-05 04:59:48 +00:00
|
|
|
</div>
|
2023-05-19 04:58:09 +00:00
|
|
|
<MkSwitch v-else-if="c.type === 'switch'" :modelValue="valueForSwitch" @update:modelValue="onSwitchUpdate">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-if="c.label" #label>{{ c.label }}</template>
|
|
|
|
<template v-if="c.caption" #caption>{{ c.caption }}</template>
|
|
|
|
</MkSwitch>
|
2024-01-30 10:53:53 +00:00
|
|
|
<MkTextarea v-else-if="c.type === 'textarea'" :modelValue="c.default ?? null" @update:modelValue="c.onInput">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-if="c.label" #label>{{ c.label }}</template>
|
|
|
|
<template v-if="c.caption" #caption>{{ c.caption }}</template>
|
|
|
|
</MkTextarea>
|
2024-01-30 10:53:53 +00:00
|
|
|
<MkInput v-else-if="c.type === 'textInput'" :small="size === 'small'" :modelValue="c.default ?? null" @update:modelValue="c.onInput">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-if="c.label" #label>{{ c.label }}</template>
|
|
|
|
<template v-if="c.caption" #caption>{{ c.caption }}</template>
|
|
|
|
</MkInput>
|
2024-01-30 10:53:53 +00:00
|
|
|
<MkInput v-else-if="c.type === 'numberInput'" :small="size === 'small'" :modelValue="c.default ?? null" type="number" @update:modelValue="c.onInput">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-if="c.label" #label>{{ c.label }}</template>
|
|
|
|
<template v-if="c.caption" #caption>{{ c.caption }}</template>
|
|
|
|
</MkInput>
|
2024-01-30 10:53:53 +00:00
|
|
|
<MkSelect v-else-if="c.type === 'select'" :small="size === 'small'" :modelValue="c.default ?? null" @update:modelValue="c.onChange">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-if="c.label" #label>{{ c.label }}</template>
|
|
|
|
<template v-if="c.caption" #caption>{{ c.caption }}</template>
|
|
|
|
<option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
|
|
|
|
</MkSelect>
|
2023-01-16 01:04:10 +00:00
|
|
|
<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton>
|
2023-09-09 00:54:54 +00:00
|
|
|
<div v-else-if="c.type === 'postForm'" :class="$style.postForm">
|
|
|
|
<MkPostForm
|
|
|
|
fixed
|
|
|
|
:instant="true"
|
2024-01-30 10:53:53 +00:00
|
|
|
:initialText="c.form?.text"
|
|
|
|
:initialCw="c.form?.cw"
|
2023-09-09 00:54:54 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2023-05-19 04:58:09 +00:00
|
|
|
<MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
|
2023-01-05 08:09:36 +00:00
|
|
|
<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>
|
2023-01-09 00:41:25 +00:00
|
|
|
</MkFolder>
|
2024-01-30 10:53:53 +00:00
|
|
|
<div v-else-if="c.type === 'container'" :class="[$style.container, { [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }]" :style="{ textAlign: c.align, backgroundColor: c.bgColor, color: c.fgColor, borderWidth: c.borderWidth ? `${c.borderWidth}px` : 0, borderColor: c.borderColor ?? 'var(--divider)', padding: c.padding ? `${c.padding}px` : 0, borderRadius: c.rounded ? '8px' : 0 }">
|
2023-01-05 04:59:48 +00:00
|
|
|
<template v-for="child in c.children" :key="child">
|
2023-01-17 08:09:43 +00:00
|
|
|
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size" :align="c.align"/>
|
2023-01-05 04:59:48 +00:00
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-12-07 05:42:09 +00:00
|
|
|
import { Ref, ref } from 'vue';
|
2023-09-19 07:37:43 +00:00
|
|
|
import * as os from '@/os.js';
|
2023-01-05 04:59:48 +00:00
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2023-01-07 06:09:46 +00:00
|
|
|
import MkInput from '@/components/MkInput.vue';
|
2023-01-07 05:59:54 +00:00
|
|
|
import MkSwitch from '@/components/MkSwitch.vue';
|
2023-01-07 06:09:46 +00:00
|
|
|
import MkTextarea from '@/components/MkTextarea.vue';
|
|
|
|
import MkSelect from '@/components/MkSelect.vue';
|
2024-01-30 10:53:53 +00:00
|
|
|
import { AsUiComponent, AsUiRoot, AsUiPostFormButton } from '@/scripts/aiscript/ui.js';
|
2023-01-09 00:41:25 +00:00
|
|
|
import MkFolder from '@/components/MkFolder.vue';
|
2023-09-09 00:54:54 +00:00
|
|
|
import MkPostForm from '@/components/MkPostForm.vue';
|
2023-01-05 04:59:48 +00:00
|
|
|
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
component: AsUiComponent;
|
|
|
|
components: Ref<AsUiComponent>[];
|
|
|
|
size: 'small' | 'medium' | 'large';
|
2023-01-17 08:09:43 +00:00
|
|
|
align: 'left' | 'center' | 'right';
|
2023-01-05 04:59:48 +00:00
|
|
|
}>(), {
|
|
|
|
size: 'medium',
|
2023-01-17 08:09:43 +00:00
|
|
|
align: 'left',
|
2023-01-05 04:59:48 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const c = props.component;
|
|
|
|
|
|
|
|
function g(id) {
|
2024-01-30 10:53:53 +00:00
|
|
|
const v = props.components.find(x => x.value.id === id)?.value;
|
|
|
|
if (v) return v;
|
|
|
|
|
|
|
|
return {
|
|
|
|
id: 'dummy',
|
|
|
|
type: 'root',
|
|
|
|
children: [],
|
|
|
|
} as AsUiRoot;
|
2023-01-05 04:59:48 +00:00
|
|
|
}
|
|
|
|
|
2024-01-30 10:53:53 +00:00
|
|
|
const valueForSwitch = ref('default' in c && typeof c.default === 'boolean' ? c.default : false);
|
2023-01-05 04:59:48 +00:00
|
|
|
|
|
|
|
function onSwitchUpdate(v) {
|
2023-12-07 05:42:09 +00:00
|
|
|
valueForSwitch.value = v;
|
2024-01-30 10:53:53 +00:00
|
|
|
if ('onChange' in c && c.onChange) {
|
|
|
|
c.onChange(v as never);
|
|
|
|
}
|
2023-01-05 04:59:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function openPostForm() {
|
2024-01-30 10:53:53 +00:00
|
|
|
const form = (c as AsUiPostFormButton).form;
|
|
|
|
if (!form) return;
|
|
|
|
|
2023-01-05 04:59:48 +00:00
|
|
|
os.post({
|
2024-01-30 10:53:53 +00:00
|
|
|
initialText: form.text,
|
|
|
|
initialCw: form.cw,
|
2023-01-05 04:59:48 +00:00
|
|
|
instant: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" module>
|
|
|
|
.root {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fontSerif {
|
|
|
|
font-family: serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fontMonospace {
|
|
|
|
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
|
|
|
}
|
2023-09-09 00:54:54 +00:00
|
|
|
|
|
|
|
.postForm {
|
|
|
|
background: var(--bg);
|
2023-10-31 18:44:34 +00:00
|
|
|
border-radius: var(--radius-sm);
|
2023-09-09 00:54:54 +00:00
|
|
|
}
|
2023-01-05 04:59:48 +00:00
|
|
|
</style>
|