2020-11-17 22:52:07 +09:00
|
|
|
<template>
|
2023-04-08 09:01:42 +09:00
|
|
|
<MkModal
|
|
|
|
ref="modal"
|
|
|
|
v-slot="{ type, maxHeight }"
|
|
|
|
:prefer-type="preferedModalType"
|
|
|
|
:anchor="anchor"
|
|
|
|
:transparent-bg="true"
|
|
|
|
:src="src"
|
|
|
|
@click="modal.close()"
|
|
|
|
@closed="emit('closed')"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
class="szkkfdyq _popup _shadow"
|
|
|
|
:class="{ asDrawer: type === 'drawer' }"
|
|
|
|
:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
|
|
|
>
|
|
|
|
<div class="main">
|
|
|
|
<template v-for="item in items">
|
|
|
|
<button
|
|
|
|
v-if="item.action"
|
|
|
|
v-click-anime
|
|
|
|
class="_button"
|
|
|
|
@click="
|
|
|
|
($event) => {
|
|
|
|
item.action($event);
|
|
|
|
close();
|
|
|
|
}
|
|
|
|
"
|
|
|
|
>
|
|
|
|
<i class="icon" :class="item.icon"></i>
|
|
|
|
<div class="text">{{ item.text }}</div>
|
|
|
|
<span v-if="item.indicate" class="indicator"
|
|
|
|
><i class="ph-circle ph-fill"></i
|
|
|
|
></span>
|
|
|
|
</button>
|
|
|
|
<MkA
|
|
|
|
v-else
|
|
|
|
v-click-anime
|
|
|
|
:to="item.to"
|
|
|
|
@click.passive="close()"
|
|
|
|
>
|
|
|
|
<i class="icon" :class="item.icon"></i>
|
|
|
|
<div class="text">{{ item.text }}</div>
|
|
|
|
<span v-if="item.indicate" class="indicator"
|
|
|
|
><i class="ph-circle ph-fill"></i
|
|
|
|
></span>
|
|
|
|
</MkA>
|
|
|
|
</template>
|
|
|
|
</div>
|
2020-11-17 22:52:07 +09:00
|
|
|
</div>
|
2023-04-08 09:01:42 +09:00
|
|
|
</MkModal>
|
2020-11-17 22:52:07 +09:00
|
|
|
</template>
|
|
|
|
|
2022-02-23 23:40:31 +09:00
|
|
|
<script lang="ts" setup>
|
2023-04-08 09:01:42 +09:00
|
|
|
import {} from "vue";
|
|
|
|
import MkModal from "@/components/MkModal.vue";
|
|
|
|
import { navbarItemDef } from "@/navbar";
|
|
|
|
import { instanceName } from "@/config";
|
|
|
|
import { defaultStore } from "@/store";
|
|
|
|
import { i18n } from "@/i18n";
|
|
|
|
import { deviceKind } from "@/scripts/device-kind";
|
|
|
|
import * as os from "@/os";
|
|
|
|
|
|
|
|
const props = withDefaults(
|
|
|
|
defineProps<{
|
|
|
|
src?: HTMLElement;
|
|
|
|
anchor?: { x: string; y: string };
|
|
|
|
}>(),
|
|
|
|
{
|
|
|
|
anchor: () => ({ x: "right", y: "center" }),
|
|
|
|
}
|
|
|
|
);
|
2022-02-23 23:40:31 +09:00
|
|
|
|
|
|
|
const emit = defineEmits<{
|
2023-04-08 09:01:42 +09:00
|
|
|
(ev: "closed"): void;
|
2022-02-23 23:40:31 +09:00
|
|
|
}>();
|
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
const preferedModalType =
|
|
|
|
deviceKind === "desktop" && props.src != null
|
|
|
|
? "popup"
|
|
|
|
: deviceKind === "smartphone"
|
|
|
|
? "drawer"
|
|
|
|
: "dialog";
|
2022-02-23 23:40:31 +09:00
|
|
|
|
|
|
|
const modal = $ref<InstanceType<typeof MkModal>>();
|
|
|
|
|
|
|
|
const menu = defaultStore.state.menu;
|
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
const items = Object.keys(navbarItemDef)
|
|
|
|
.filter((k) => !menu.includes(k))
|
|
|
|
.map((k) => navbarItemDef[k])
|
|
|
|
.filter((def) => (def.show == null ? true : def.show))
|
|
|
|
.map((def) => ({
|
|
|
|
type: def.to ? "link" : "button",
|
|
|
|
text: i18n.ts[def.title],
|
|
|
|
icon: def.icon,
|
|
|
|
to: def.to,
|
|
|
|
action: def.action,
|
|
|
|
indicate: def.indicated,
|
|
|
|
}));
|
2022-02-23 23:40:31 +09:00
|
|
|
|
|
|
|
function close() {
|
|
|
|
modal.close();
|
|
|
|
}
|
2020-11-17 22:52:07 +09:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.szkkfdyq {
|
|
|
|
max-height: 100%;
|
2022-02-23 23:40:31 +09:00
|
|
|
width: min(460px, 100vw);
|
|
|
|
padding: 24px;
|
2020-11-17 22:52:07 +09:00
|
|
|
box-sizing: border-box;
|
|
|
|
overflow: auto;
|
2022-02-23 23:40:31 +09:00
|
|
|
overscroll-behavior: contain;
|
|
|
|
text-align: left;
|
2020-11-17 22:52:07 +09:00
|
|
|
border-radius: 16px;
|
|
|
|
|
2022-02-23 23:40:31 +09:00
|
|
|
&.asDrawer {
|
|
|
|
width: 100%;
|
|
|
|
padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
|
|
|
|
border-radius: 24px;
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
text-align: center;
|
2020-11-17 22:52:07 +09:00
|
|
|
}
|
2022-02-23 23:40:31 +09:00
|
|
|
|
2023-04-08 09:01:42 +09:00
|
|
|
> .main,
|
|
|
|
> .sub {
|
2022-02-23 23:40:31 +09:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
|
|
|
2020-11-17 22:52:07 +09:00
|
|
|
> * {
|
|
|
|
position: relative;
|
2022-02-23 23:40:31 +09:00
|
|
|
display: flex;
|
2020-11-17 22:52:07 +09:00
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2021-04-25 12:31:11 +09:00
|
|
|
vertical-align: bottom;
|
2022-02-23 23:40:31 +09:00
|
|
|
height: 100px;
|
|
|
|
border-radius: 10px;
|
2020-11-17 22:52:07 +09:00
|
|
|
|
|
|
|
&:hover {
|
2022-02-23 23:40:31 +09:00
|
|
|
color: var(--accent);
|
|
|
|
background: var(--accentedBg);
|
2020-11-17 22:52:07 +09:00
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .icon {
|
2022-02-23 23:40:31 +09:00
|
|
|
font-size: 24px;
|
|
|
|
height: 24px;
|
2020-11-17 22:52:07 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
> .text {
|
2022-02-23 23:40:31 +09:00
|
|
|
margin-top: 12px;
|
|
|
|
font-size: 0.8em;
|
2020-11-17 22:52:07 +09:00
|
|
|
line-height: 1.5em;
|
|
|
|
}
|
|
|
|
|
2021-04-20 23:22:59 +09:00
|
|
|
> .indicator {
|
2020-11-17 22:52:07 +09:00
|
|
|
position: absolute;
|
|
|
|
top: 32px;
|
|
|
|
left: 32px;
|
|
|
|
color: var(--indicator);
|
|
|
|
font-size: 8px;
|
|
|
|
animation: blink 1s infinite;
|
|
|
|
|
|
|
|
@media (max-width: 500px) {
|
|
|
|
top: 16px;
|
|
|
|
left: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
> .sub {
|
|
|
|
margin-top: 8px;
|
|
|
|
padding-top: 8px;
|
2021-04-10 12:40:50 +09:00
|
|
|
border-top: solid 0.5px var(--divider);
|
2020-11-17 22:52:07 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|