chore: format code
This commit is contained in:
@@ -41,8 +41,8 @@ const text = computed(() => {
|
||||
</Avatar>
|
||||
<span
|
||||
v-if="dot"
|
||||
class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
|
||||
:class="dotClass"
|
||||
class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
@@ -34,8 +34,8 @@ function handleClick(path?: string) {
|
||||
<span class="flex-center h-full">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-5 flex-shrink-0"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-5 flex-shrink-0"
|
||||
/>
|
||||
<span
|
||||
:class="{
|
||||
|
@@ -53,8 +53,8 @@ function handleClick(path?: string) {
|
||||
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="size-5"
|
||||
:icon="item.icon"
|
||||
class="size-5"
|
||||
/>
|
||||
{{ item.title }}
|
||||
<IcRoundKeyboardArrowDown class="size-5" />
|
||||
@@ -79,9 +79,9 @@ function handleClick(path?: string) {
|
||||
<div class="flex-center">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-4"
|
||||
:class="{ 'size-5': item.isHome }"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-4"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
@@ -90,9 +90,9 @@ function handleClick(path?: string) {
|
||||
<div class="flex-center">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-4"
|
||||
:class="{ 'size-5': item.isHome }"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-4"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
@@ -72,10 +72,10 @@ function handleClick(menu: IContextMenuItem) {
|
||||
>
|
||||
<template v-for="menu in menusView" :key="menu.key">
|
||||
<ContextMenuItem
|
||||
:inset="menu.inset || !menu.icon"
|
||||
:disabled="menu.disabled"
|
||||
class="cursor-pointer"
|
||||
:class="itemClass"
|
||||
:disabled="menu.disabled"
|
||||
:inset="menu.inset || !menu.icon"
|
||||
class="cursor-pointer"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<component
|
||||
|
@@ -22,24 +22,24 @@ function handleItemClick(value: string) {
|
||||
</script>
|
||||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger class="flex items-center gap-1" as-child>
|
||||
<DropdownMenuTrigger as-child class="flex items-center gap-1">
|
||||
<slot></slot>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuGroup>
|
||||
<template v-for="menu in menus" :key="menu.key">
|
||||
<DropdownMenuItem
|
||||
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
|
||||
:class="
|
||||
menu.key === modelValue ? 'bg-accent text-accent-foreground' : ''
|
||||
"
|
||||
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
|
||||
@click="handleItemClick(menu.key)"
|
||||
>
|
||||
<component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
|
||||
<span
|
||||
v-if="!menu.icon"
|
||||
class="mr-2 size-1.5 rounded-full"
|
||||
:class="menu.key === modelValue ? 'bg-foreground' : ''"
|
||||
class="mr-2 size-1.5 rounded-full"
|
||||
></span>
|
||||
{{ menu.text }}
|
||||
</DropdownMenuItem>
|
||||
|
@@ -16,18 +16,18 @@ const handleMenuItemClick = (_item) => {
|
||||
<template>
|
||||
<div class="fixed bottom-5 right-5 flex flex-col-reverse items-center gap-2">
|
||||
<button
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
|
||||
:class="{ 'rotate-45': isMenuOpen }"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
<div
|
||||
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
|
||||
:class="{
|
||||
'visible translate-y-0 opacity-100': isMenuOpen,
|
||||
'invisible translate-y-2 opacity-0': !isMenuOpen,
|
||||
}"
|
||||
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
|
||||
>
|
||||
<button
|
||||
v-for="(item, index) in menuItems"
|
||||
|
@@ -54,11 +54,11 @@ function checkPasswordStrength(password: string) {
|
||||
class="dark:bg-input-background bg-heavy relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
|
||||
>
|
||||
<span
|
||||
class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
|
||||
:style="{
|
||||
backgroundColor: currentColor,
|
||||
width: currentStrength >= index ? '100%' : '',
|
||||
}"
|
||||
class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
|
@@ -32,8 +32,8 @@ const inputClass = computed(() => {
|
||||
:id="name"
|
||||
v-model="modelValue"
|
||||
:class="[props.class, inputClass]"
|
||||
class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
autocomplete="off"
|
||||
class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
required
|
||||
type="text"
|
||||
v-bind="$attrs"
|
||||
|
@@ -51,16 +51,16 @@ const logoClass = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group flex h-full items-center text-lg" :class="logoClass">
|
||||
<div :class="logoClass" class="group flex h-full items-center text-lg">
|
||||
<a
|
||||
:class="$attrs.class"
|
||||
:href="href"
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 font-semibold leading-normal transition-all duration-500"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:alt="alt"
|
||||
:src="src"
|
||||
:width="logoSize"
|
||||
class="relative rounded-none bg-transparent"
|
||||
/>
|
||||
|
@@ -14,15 +14,15 @@ withDefaults(defineProps<Props>(), {
|
||||
<template>
|
||||
<span class="relative mr-1 flex size-1.5">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
|
||||
:class="dotClass"
|
||||
:style="dotStyle"
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="relative inline-flex size-1.5 rounded-full"
|
||||
:class="dotClass"
|
||||
:style="dotStyle"
|
||||
class="relative inline-flex size-1.5 rounded-full"
|
||||
></span>
|
||||
</span>
|
||||
</template>
|
||||
|
@@ -43,7 +43,7 @@ const badgeStyle = computed(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span v-if="isDot || badge" class="absolute right-5" :class="$attrs.class">
|
||||
<span v-if="isDot || badge" :class="$attrs.class" class="absolute right-5">
|
||||
<BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
|
||||
<div
|
||||
v-else
|
||||
|
@@ -56,10 +56,10 @@ function handleComplete(e: string[]) {
|
||||
<PinInput
|
||||
:id="name"
|
||||
v-model="inputValue"
|
||||
:class="inputClass"
|
||||
class="flex justify-between"
|
||||
otp
|
||||
placeholder="○"
|
||||
class="flex justify-between"
|
||||
:class="inputClass"
|
||||
type="number"
|
||||
@complete="handleComplete"
|
||||
>
|
||||
@@ -71,10 +71,10 @@ function handleComplete(e: string[]) {
|
||||
/>
|
||||
</PinInputGroup>
|
||||
<VbenButton
|
||||
:loading="btnLoading"
|
||||
class="w-[300px] xl:w-full"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
:loading="btnLoading"
|
||||
@click="handleSendCode"
|
||||
>
|
||||
{{ btnText }}
|
||||
|
@@ -7,7 +7,7 @@ const props = defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav aria-label="breadcrumb" role="navigation" :class="props.class">
|
||||
<nav :class="props.class" aria-label="breadcrumb" role="navigation">
|
||||
<slot></slot>
|
||||
</nav>
|
||||
</template>
|
||||
|
@@ -12,9 +12,9 @@ const props = defineProps<{
|
||||
|
||||
<template>
|
||||
<span
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
>
|
||||
<slot>
|
||||
<DotsHorizontalIcon class="h-4 w-4" />
|
||||
|
@@ -10,10 +10,10 @@ const props = defineProps<{
|
||||
|
||||
<template>
|
||||
<span
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
:class="cn('text-foreground font-normal', props.class)"
|
||||
aria-current="page"
|
||||
aria-disabled="true"
|
||||
role="link"
|
||||
>
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
@@ -12,9 +12,9 @@ const props = defineProps<{
|
||||
|
||||
<template>
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('[&>svg]:size-3.5', props.class)"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
>
|
||||
<slot>
|
||||
<ChevronRightIcon />
|
||||
|
@@ -37,8 +37,8 @@ const delegatedProps = computed(() => {
|
||||
:class="cn('relative overflow-hidden', props.class)"
|
||||
>
|
||||
<ScrollAreaViewport
|
||||
class="h-full w-full rounded-[inherit]"
|
||||
as-child
|
||||
class="h-full w-full rounded-[inherit]"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<slot></slot>
|
||||
|
Reference in New Issue
Block a user