sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mk:C:containerのborderStyleとborderRadiusを設定できるように (#14638)

Browse Source 
* borderStyle and borderRadius

* changelog
This commit is contained in:
FineArchs
2024-09-28 10:06:01 +09:00
committed by GitHub
parent 6fdb2b13f4
commit 25670b5f16
3 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/src/components/MkAsUi.vue
View File

@@ -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) {