Mr.Dat
77ece5224d
- Updated DangerZone.vue to use AppButton and AppDialog, replacing PrimeVue Button and Dialog components. - Refactored DomainsDns.vue to utilize AppButton, AppDialog, and AppInput, enhancing the UI consistency. - Modified NotificationSettings.vue and PlayerSettings.vue to implement AppButton and AppSwitch for better styling. - Replaced PrimeVue components in SecurityNConnected.vue with AppButton, AppDialog, and AppInput for a cohesive design. - Introduced AppConfirmHost for handling confirmation dialogs with a custom design. - Created AppToastHost for managing toast notifications with custom styling and behavior. - Added utility composables useAppConfirm and useAppToast for managing confirmation dialogs and toast notifications. - Implemented AppProgressBar and AppSwitch components for improved UI elements.
22 lines
557 B
Vue
22 lines
557 B
Vue
<script setup lang="ts">
|
|
import { cn } from '@/lib/utils';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
value: number;
|
|
class?: string;
|
|
}>();
|
|
|
|
const pct = computed(() => {
|
|
const v = Number(props.value);
|
|
if (Number.isNaN(v)) return 0;
|
|
return Math.min(Math.max(v, 0), 100);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('w-full bg-muted/50 rounded-full overflow-hidden', props.class)" style="height: 6px">
|
|
<div class="bg-primary h-full rounded-full transition-all duration-300" :style="{ width: `${pct}%` }" />
|
|
</div>
|
|
</template>
|