chore: format code

This commit is contained in:
vben
2024-06-09 13:31:43 +08:00
parent 68229a4d2f
commit 35c3dd78ec
65 changed files with 419 additions and 494 deletions

View File

@@ -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>

View File

@@ -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="{

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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"

View File

@@ -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"
/>

View File

@@ -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>

View File

@@ -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

View File

@@ -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 }}

View File

@@ -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>

View File

@@ -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" />

View File

@@ -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>

View File

@@ -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 />

View File

@@ -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>