danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor DeprecatedNotice component for improved state management

Browse source
This commit is contained in:
arabcoders 2025-08-29 19:29:34 +03:00
parent e2b4a8caa3
commit e6aa56a008
1 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
ui/app/components/DeprecatedNotice.vue
View file

@ -1,14 +1,13 @@
<template> <template>
<div v-if="isLoaded && !isDismissed"> <Message :message_class="messageClass" :title="title" :icon="icon" :useClose="true" @close="() => dismissed = true"
<Message :message_class="messageClass" :title="title" :icon="icon" :useClose="true" @close="dismiss"> v-if="!isDismissed">
<slot /> <slot />
</Message> </Message>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watchEffect } from 'vue' import { computed } from 'vue'
import { useStorage, type RemovableRef } from '@vueuse/core' import { useStorage } from '@vueuse/core'
import Message from "~/components/Message.vue"; import Message from "~/components/Message.vue";
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -26,30 +25,10 @@ const props = withDefaults(defineProps<{
const config = useConfigStore() const config = useConfigStore()
const isDev = computed(() => 'development' === config.app?.app_env) const isDev = computed(() => 'development' === config.app?.app_env)
const isLoaded = computed(() => config.is_loaded)
const storageKeyComputed = computed<string>(() => `${props.storageKey}:${props.version}`) const storageKeyComputed = computed<string>(() => `${props.storageKey}:${props.version}`)
const dismissed = useStorage<boolean>(storageKeyComputed, false)
const dismissedDev = ref<boolean>(false) const isDismissed = computed(() => dismissed.value)
let dismissedProd: RemovableRef<boolean> | null = null
watchEffect(() => {
if (!isLoaded.value || isDev.value) {
return
}
dismissedProd = useStorage<boolean>(storageKeyComputed, false)
})
const isDismissed = computed(() => {
// include dependencies so recompute on env/load/version changes
void isLoaded.value; void isDev.value; void storageKeyComputed.value
return isDev.value ? dismissedDev.value : (dismissedProd?.value ?? false)
})
const dismiss = () => {
if (isDev.value) dismissedDev.value = true
else if (dismissedProd) dismissedProd.value = true
}
const messageClass = computed(() => { const messageClass = computed(() => {
switch (props.tone) { switch (props.tone) {
@ -64,4 +43,25 @@ const messageClass = computed(() => {
return 'is-warning has-background-warning-90 has-text-dark' return 'is-warning has-background-warning-90 has-text-dark'
} }
}) })
onMounted(() => {
if (!isDev.value) {
return
}
document.addEventListener('keydown', handle_event)
})
onBeforeUnmount(() => {
if (!isDev.value) {
return
}
document.removeEventListener('keydown', handle_event)
})
const handle_event = (e: KeyboardEvent) => {
if (e.ctrlKey && e.altKey && 'd' === e.key.toLowerCase()) {
e.preventDefault()
dismissed.value = !dismissed.value
}
}
</script> </script>