stream/stream.ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor billing components and add payment history

Browse Source 
- Remove BillingWalletRow.vue component.
- Update PlayerConfigsTable.vue to use JSX syntax and improve rendering logic.
- Enhance auth store with currency and date formatting utilities.
- Add ListIcon and MoneyCheck icon components.
- Implement PaymentHistory component for displaying payment history with download functionality.
- Create PlanSelection component for selecting billing plans with improved UI.
- Introduce UpgradeDialog component for handling plan upgrades and payment methods.
This commit is contained in:
Mr.Dat
2026-03-24 17:29:58 +07:00
parent b60f65e4d1
commit 698abcec22
22 changed files with 1007 additions and 943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/ui/AppDialog.vue
View File

@@ -2,14 +2,9 @@
import XIcon from '@/components/icons/XIcon.vue';
import { cn } from '@/lib/utils';
import { useTranslation } from 'i18next-vue';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { onBeforeUnmount, watch } from 'vue';
// Ensure client-side only rendering to avoid hydration mismatch
const isMounted = ref(false);
onMounted(() => {
isMounted.value = true;
});
const props = withDefaults(defineProps<{
visible: boolean;
title?: string;
@@ -43,8 +38,14 @@ watch(
() => props.visible,
(v) => {
if (typeof window === 'undefined') return;
if (v) window.addEventListener('keydown', onKeydown);
else window.removeEventListener('keydown', onKeydown);
if (v) {
document.body.style.overflow = 'hidden';
window.addEventListener('keydown', onKeydown);
}
else {
document.body.style.overflow = 'unset';
window.removeEventListener('keydown', onKeydown);
}
},
{ immediate: true }
);
@@ -56,58 +57,60 @@ onBeforeUnmount(() => {
</script>
<template>
<Teleport v-if="isMounted" to="body">
<Transition
enter-active-class="transition-all duration-200 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-all duration-150 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="visible" class="fixed inset-0 z-[9999]">
<!-- Backdrop -->
<div
class="absolute inset-0 bg-black/30"
@click="closable && close()"
aria-hidden="true"
/>
<ClientOnly>
<Teleport to="body">
<Transition
enter-active-class="transition-all duration-200 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-all duration-150 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="visible" class="fixed inset-0 z-[9999]">
<!-- Backdrop -->
<div
class="absolute inset-0 bg-black/40"
@click="closable && close()"
aria-hidden="true"
/>
<!-- Panel -->
<div class="absolute inset-0 flex items-center justify-center p-4">
<div :class="cn('w-full bg-header border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
<!-- Header slot -->
<div v-if="$slots.header" class="px-5 py-4 border-b border-border">
<slot name="header" :close="close" />
</div>
<!-- Default title -->
<div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
<h3 class="text-sm font-semibold text-foreground">
{{ title }}
</h3>
<button
v-if="closable"
type="button"
class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
@click="close"
:aria-label="t('common.close')"
>
<XIcon class="w-4 h-4" />
</button>
</div>
<!-- Panel -->
<div class="absolute inset-0 flex items-center justify-center p-4">
<div :class="cn('w-full bg-white border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
<!-- Header slot -->
<div v-if="$slots.header" class="px-5 py-4 border-b border-border">
<slot name="header" :close="close" />
</div>
<!-- Default title -->
<div v-else-if="title" class="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
<h3 class="font-semibold text-foreground">
{{ title }}
</h3>
<button
v-if="closable"
type="button"
class="p-1 rounded-md text-foreground/60 hover:text-foreground hover:bg-muted/50 transition-all"
@click="close"
:aria-label="t('common.close')"
>
<XIcon class="w-4 h-4" />
</button>
</div>
<!-- Content -->
<div class="p-5">
<slot />
</div>
<!-- Content -->
<div class="p-5 max-h-[80vh] overflow-y-auto">
<slot />
</div>
<!-- Footer slot -->
<div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
<slot name="footer" />
<!-- Footer slot -->
<div v-if="$slots.footer" class="px-5 py-4 border-t border-border bg-muted/20">
<slot name="footer" />
</div>
</div>
</div>
</div>
</div>
</Transition>
</Teleport>
</Transition>
</Teleport>
</ClientOnly>
</template>