mizzkey/packages/frontend/src/directives/adaptive-border.ts
taiyme 1c34a03b7a refactor(frontend): カスタムディレクティブの型付け など
(cherry picked from commit 49c9215b61a70e020c5b28a68756bfdc0df3cac7)
2024-11-02 16:41:55 +09:00

29 lines
689 B
TypeScript

/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { ObjectDirective } from 'vue';
type VAdaptiveBorder = ObjectDirective<HTMLElement, null | undefined>;
export const vAdaptiveBorder = {
async mounted(src) {
const [
{ getBgColor },
] = await Promise.all([
import('@/scripts/get-bg-color.js'),
]);
const parentBg = getBgColor(src.parentElement) ?? 'transparent';
const myBg = window.getComputedStyle(src).backgroundColor;
if (parentBg === myBg) {
src.style.borderColor = 'var(--MI_THEME-divider)';
} else {
src.style.borderColor = myBg;
}
},
} satisfies VAdaptiveBorder as VAdaptiveBorder;