From 25670b5f168021784fd82d4422c85d8f0024bf04 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Sat, 28 Sep 2024 10:06:01 +0900
Subject: [PATCH] =?UTF-8?q?Mk:C:container=E3=81=AEborderStyle=E3=81=A8bord?=
=?UTF-8?q?erRadius=E3=82=92=E8=A8=AD=E5=AE=9A=E3=81=A7=E3=81=8D=E3=82=8B?=
=?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=20(#14638)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* borderStyle and borderRadius
* changelog
---
CHANGELOG.md | 1 +
packages/frontend/src/components/MkAsUi.vue | 27 ++++++++++++++++++--
packages/frontend/src/scripts/aiscript/ui.ts | 8 ++++++
3 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eec73bdaac..f44e247359 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
- Enhance: ScratchpadにUIインスペクターを追加
- Enhance: Play編集画面の項目の並びを少しリデザイン
- Enhance: 各種メニューをドロワー表示するかどうか設定可能に
+- Enhance: AiScriptのMk:C:containerのオプションに`borderStyle`と`borderRadius`を追加
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
- Fix: コントロールパネル内のAp requests内のチャートの表示がおかしかった問題を修正
- Fix: 月の違う同じ日はセパレータが表示されないのを修正
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index 18e8e7542e..b50a7fea5c 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/>
</template>
</MkFolder>
- <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 }">
+ <div v-else-if="c.type === 'container'" :class="[$style.container, { [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }]" :style="containerStyle">
<template v-for="child in c.children" :key="child">
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size" :align="c.align"/>
</template>
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
-import { Ref, ref } from 'vue';
+import { Ref, ref, computed } from 'vue';
import * as os from '@/os.js';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
@@ -97,6 +97,29 @@ function g(id) {
} as AsUiRoot;
}
+const containerStyle = computed(() => {
+ if (c.type !== 'container') return undefined;
+
+ // width, color, styleのうち一つでも指定があれば、枠線がちゃんと表示されるようにwidthとstyleのデフォルト値を設定
+ // radiusは単に角を丸める用途もあるため除外
+ const isBordered = c.borderWidth ?? c.borderColor ?? c.borderStyle;
+
+ const border = isBordered ? {
+ borderWidth: c.borderWidth ?? '1px',
+ borderColor: c.borderColor ?? 'var(--divider)',
+ borderStyle: c.borderStyle ?? 'solid',
+ } : undefined;
+
+ return {
+ textAlign: c.align,
+ backgroundColor: c.bgColor,
+ color: c.fgColor,
+ padding: c.padding ? `${c.padding}px` : 0,
+ borderRadius: (c.borderRadius ?? (c.rounded ? 8 : 0)) + 'px',
+ ...border,
+ };
+});
+
const valueForSwitch = ref('default' in c && typeof c.default === 'boolean' ? c.default : false);
function onSwitchUpdate(v) {
diff --git a/packages/frontend/src/scripts/aiscript/ui.ts b/packages/frontend/src/scripts/aiscript/ui.ts
index fa3fcac2e7..2b386bebb8 100644
--- a/packages/frontend/src/scripts/aiscript/ui.ts
+++ b/packages/frontend/src/scripts/aiscript/ui.ts
@@ -27,6 +27,8 @@ export type AsUiContainer = AsUiComponentBase & {
font?: 'serif' | 'sans-serif' | 'monospace';
borderWidth?: number;
borderColor?: string;
+ borderStyle?: 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+ borderRadius?: number;
padding?: number;
rounded?: boolean;
hidden?: boolean;
@@ -173,6 +175,10 @@ function getContainerOptions(def: values.Value | undefined): Omit<AsUiContainer,
if (borderWidth) utils.assertNumber(borderWidth);
const borderColor = def.value.get('borderColor');
if (borderColor) utils.assertString(borderColor);
+ const borderStyle = def.value.get('borderStyle');
+ if (borderStyle) utils.assertString(borderStyle);
+ const borderRadius = def.value.get('borderRadius');
+ if (borderRadius) utils.assertNumber(borderRadius);
const padding = def.value.get('padding');
if (padding) utils.assertNumber(padding);
const rounded = def.value.get('rounded');
@@ -191,6 +197,8 @@ function getContainerOptions(def: values.Value | undefined): Omit<AsUiContainer,
font: font?.value,
borderWidth: borderWidth?.value,
borderColor: borderColor?.value,
+ borderStyle: borderStyle?.value,
+ borderRadius: borderRadius?.value,
padding: padding?.value,
rounded: rounded?.value,
hidden: hidden?.value,