forked from FoundKeyGang/FoundKey
refactor: common.vue to composition api
This commit is contained in:
parent
86b94e213e
commit
a485d13e8a
2 changed files with 30 additions and 40 deletions
|
@ -150,6 +150,7 @@ export const popups = ref([]) as Ref<{
|
||||||
id: any;
|
id: any;
|
||||||
component: any;
|
component: any;
|
||||||
props: Record<string, any>;
|
props: Record<string, any>;
|
||||||
|
events: any[];
|
||||||
}[]>;
|
}[]>;
|
||||||
|
|
||||||
const zIndexes = {
|
const zIndexes = {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<component :is="popup.component"
|
<component
|
||||||
|
:is="popup.component"
|
||||||
v-for="popup in popups"
|
v-for="popup in popups"
|
||||||
:key="popup.id"
|
:key="popup.id"
|
||||||
v-bind="popup.props"
|
v-bind="popup.props"
|
||||||
|
@ -15,39 +16,36 @@
|
||||||
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
|
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
import { defineAsyncComponent, Ref, ref } from 'vue';
|
||||||
import { popup, popups, pendingApiRequestsCount } from '@/os';
|
import { swInject } from './sw-inject';
|
||||||
|
import { popup as showPopup, popups, pendingApiRequestsCount } from '@/os';
|
||||||
import { uploads } from '@/scripts/upload';
|
import { uploads } from '@/scripts/upload';
|
||||||
import * as sound from '@/scripts/sound';
|
import * as sound from '@/scripts/sound';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
import { swInject } from './sw-inject';
|
|
||||||
import { stream } from '@/stream';
|
import { stream } from '@/stream';
|
||||||
|
|
||||||
export default defineComponent({
|
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
|
||||||
components: {
|
const XUpload = defineAsyncComponent(() => import('./upload.vue'));
|
||||||
XStreamIndicator: defineAsyncComponent(() => import('./stream-indicator.vue')),
|
const dev: Ref<boolean> = ref(_DEV_);
|
||||||
XUpload: defineAsyncComponent(() => import('./upload.vue')),
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
const onNotification = (notification: { type: string; id: any; }): void => {
|
||||||
const onNotification = notification => {
|
if ($i?.mutingNotificationTypes.includes(notification.type)) return;
|
||||||
if ($i.mutingNotificationTypes.includes(notification.type)) return;
|
|
||||||
|
|
||||||
if (document.visibilityState === 'visible') {
|
if (document.visibilityState === 'visible') {
|
||||||
stream.send('readNotification', {
|
stream.send('readNotification', {
|
||||||
id: notification.id
|
id: notification.id,
|
||||||
});
|
});
|
||||||
|
|
||||||
popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
|
showPopup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
|
||||||
notification
|
notification
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
}
|
}
|
||||||
|
|
||||||
sound.play('notification');
|
sound.play('notification');
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($i) {
|
if ($i) {
|
||||||
const connection = stream.useChannel('main', null, 'UI');
|
const connection = stream.useChannel('main', null, 'UI');
|
||||||
connection.on('notification', onNotification);
|
connection.on('notification', onNotification);
|
||||||
|
|
||||||
|
@ -55,16 +53,7 @@ export default defineComponent({
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
swInject();
|
swInject();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
|
||||||
uploads,
|
|
||||||
popups,
|
|
||||||
pendingApiRequestsCount,
|
|
||||||
dev: _DEV_,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
Loading…
Reference in a new issue