refactor: remove tinycolor from MkFolder + a11y

This commit is contained in:
freeplay 2023-07-14 15:31:31 -04:00
parent 038a180891
commit 79aaf392e8

View File

@ -1,13 +1,16 @@
<template>
<div v-size="{ max: [500] }" class="ssazuxis">
<section class="ssazuxis">
<header
class="_button"
:style="{ background: bg }"
@click="showBody = !showBody"
>
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
<button
class="_button"
:aria-expanded="showBody"
:aria-controls="bodyId"
>
<template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i
></template>
@ -23,16 +26,16 @@
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<div v-show="showBody" :id="bodyId">
<slot></slot>
</div>
</transition>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import tinycolor from "tinycolor2";
import { getUniqueId } from "@/os";
const localStoragePrefix = "ui:folder:";
@ -51,7 +54,7 @@ export default defineComponent({
},
data() {
return {
bg: null,
bodyId: getUniqueId(),
showBody:
this.persistKey &&
localStorage.getItem(localStoragePrefix + this.persistKey)
@ -71,27 +74,6 @@ export default defineComponent({
}
},
},
mounted() {
function getParentBg(el: Element | null): string {
if (el == null || el.tagName === "BODY") return "var(--bg)";
const bg = el.style.background || el.style.backgroundColor;
if (bg) {
return bg;
} else {
return getParentBg(el.parentElement);
}
}
const rawBg = getParentBg(this.$el);
const bg = tinycolor(
rawBg.startsWith("var(")
? getComputedStyle(document.documentElement).getPropertyValue(
rawBg.slice(4, -1),
)
: rawBg,
);
bg.setAlpha(0.85);
this.bg = bg.toRgbString();
},
methods: {
toggleContent(show: boolean) {
this.showBody = show;
@ -161,6 +143,15 @@ export default defineComponent({
transparent
);
&::before {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
opacity: 0.85;
z-index: -1;
}
> .title {
margin: 0;
padding: 12px 16px 12px 0;
@ -185,13 +176,5 @@ export default defineComponent({
padding: 12px 0 12px 16px;
}
}
&.max-width_500px {
> header {
> .title {
padding: 8px 10px 8px 0;
}
}
}
}
</style>