890 lines
15 KiB
JavaScript
890 lines
15 KiB
JavaScript
export const avatarStatus = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="success"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="warning"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="error"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="success"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="warning"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
bordered
|
|
color="error"
|
|
location="bottom end"
|
|
:offset-x="5"
|
|
:offset-y="1"
|
|
>
|
|
<VAvatar size="large">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const color = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
dot
|
|
color="primary"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="secondary"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="success"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="info"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="warning"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="error"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
dot
|
|
color="primary"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="secondary"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="success"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="info"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="warning"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
dot
|
|
color="error"
|
|
>
|
|
<VIcon
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const dynamicNotifications = { ts: `<script lang="ts" setup>
|
|
const notifications = ref<number>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex align-center">
|
|
<VBadge
|
|
:content="notifications"
|
|
:model-value="!!notifications"
|
|
color="success"
|
|
class="me-5"
|
|
>
|
|
<VIcon
|
|
size="40"
|
|
icon="ri-vuejs-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<div class="demo-space-x">
|
|
<VBtn @click="notifications = (notifications || 0) + 1">
|
|
Send Message
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
@click="notifications = 0"
|
|
>
|
|
Clear Notifications
|
|
</VBtn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const notifications = ref()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex align-center">
|
|
<VBadge
|
|
:content="notifications"
|
|
:model-value="!!notifications"
|
|
color="success"
|
|
class="me-5"
|
|
>
|
|
<VIcon
|
|
size="40"
|
|
icon="ri-vuejs-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<div class="demo-space-x">
|
|
<VBtn @click="notifications = (notifications || 0) + 1">
|
|
Send Message
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
@click="notifications = 0"
|
|
>
|
|
Clear Notifications
|
|
</VBtn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const icon = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- avatar -->
|
|
<VBadge>
|
|
<template #badge>
|
|
<VIcon icon="ri-error-warning-line" />
|
|
</template>
|
|
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- icon -->
|
|
<VBadge icon="ri-lock-unlock-line">
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- avatar -->
|
|
<VBadge>
|
|
<template #badge>
|
|
<VIcon icon="ri-error-warning-line" />
|
|
</template>
|
|
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- icon -->
|
|
<VBadge icon="ri-lock-unlock-line">
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const maximumValue = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="99"
|
|
max="99"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="100"
|
|
max="99"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="1000"
|
|
max="999"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="99"
|
|
max="99"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="100"
|
|
max="99"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="1000"
|
|
max="999"
|
|
offset-x="5"
|
|
offset-y="-1"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const position = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- 👉 Top End -->
|
|
<VBadge
|
|
content="1"
|
|
location="end top"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 Bottom Start -->
|
|
<VBadge
|
|
location="bottom start"
|
|
content="2"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 Bottom End -->
|
|
<VBadge
|
|
location="bottom end"
|
|
content="3"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 top Start -->
|
|
<VBadge
|
|
location="top start"
|
|
content="4"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<!-- 👉 Top End -->
|
|
<VBadge
|
|
content="1"
|
|
location="end top"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 Bottom Start -->
|
|
<VBadge
|
|
location="bottom start"
|
|
content="2"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 Bottom End -->
|
|
<VBadge
|
|
location="bottom end"
|
|
content="3"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- 👉 top Start -->
|
|
<VBadge
|
|
location="top start"
|
|
content="4"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const showOnHover = { ts: `<script lang="ts" setup>
|
|
const tRefInstagramBadge = ref()
|
|
const tRefTwitterBadge = ref()
|
|
const tRefWhatsappBadge = ref()
|
|
|
|
const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
|
|
const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
|
|
const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="3"
|
|
transition="slide-x-transition"
|
|
:model-value="showTwitterBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefTwitterBadge"
|
|
size="25"
|
|
icon="ri-twitter-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="5"
|
|
transition="scale-transition"
|
|
:model-value="showInstagramBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefInstagramBadge"
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="1"
|
|
transition="slide-x-transition"
|
|
:model-value="showWhatsappBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefWhatsappBadge"
|
|
size="25"
|
|
icon="ri-whatsapp-line"
|
|
/>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const tRefInstagramBadge = ref()
|
|
const tRefTwitterBadge = ref()
|
|
const tRefWhatsappBadge = ref()
|
|
const showTwitterBadgeOnHover = useElementHover(tRefTwitterBadge)
|
|
const showInstagramBadgeOnHover = useElementHover(tRefInstagramBadge)
|
|
const showWhatsappBadgeOnHover = useElementHover(tRefWhatsappBadge)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="3"
|
|
transition="slide-x-transition"
|
|
:model-value="showTwitterBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefTwitterBadge"
|
|
size="25"
|
|
icon="ri-twitter-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="5"
|
|
transition="scale-transition"
|
|
:model-value="showInstagramBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefInstagramBadge"
|
|
size="25"
|
|
icon="ri-instagram-line"
|
|
/>
|
|
</VBadge>
|
|
|
|
<VBadge
|
|
content="1"
|
|
transition="slide-x-transition"
|
|
:model-value="showWhatsappBadgeOnHover"
|
|
>
|
|
<VIcon
|
|
ref="tRefWhatsappBadge"
|
|
size="25"
|
|
icon="ri-whatsapp-line"
|
|
/>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const style = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x d-flex align-center flex-wrap">
|
|
<!-- default -->
|
|
<VBadge content="1">
|
|
<VBtn variant="tonal">
|
|
Default
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- bordered -->
|
|
<VBadge
|
|
content="5"
|
|
bordered
|
|
>
|
|
<VBtn variant="tonal">
|
|
Border
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- dot -->
|
|
<VBadge
|
|
dot
|
|
location="bottom end"
|
|
offset-x="3"
|
|
offset-y="3"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- inline -->
|
|
<VBadge
|
|
inline
|
|
content="5"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- Rounded -->
|
|
<VBadge
|
|
rounded="sm"
|
|
content="5"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x d-flex align-center flex-wrap">
|
|
<!-- default -->
|
|
<VBadge content="1">
|
|
<VBtn variant="tonal">
|
|
Default
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- bordered -->
|
|
<VBadge
|
|
content="5"
|
|
bordered
|
|
>
|
|
<VBtn variant="tonal">
|
|
Border
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- dot -->
|
|
<VBadge
|
|
dot
|
|
location="bottom end"
|
|
offset-x="3"
|
|
offset-y="3"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- inline -->
|
|
<VBadge
|
|
inline
|
|
content="5"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- Rounded -->
|
|
<VBadge
|
|
rounded="sm"
|
|
content="5"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const tabs = { ts: `<script setup lang="ts">
|
|
const tabs = [
|
|
{
|
|
badge: '3',
|
|
content: 'Item One',
|
|
},
|
|
{
|
|
badge: '1',
|
|
content: 'Item Two',
|
|
},
|
|
{
|
|
badge: '2',
|
|
content: 'Item Three',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
grow
|
|
height="52"
|
|
>
|
|
<VTab
|
|
v-for="tab in tabs"
|
|
:key="tab.content"
|
|
:value="tab.content"
|
|
>
|
|
<VBadge
|
|
:content="tab.badge"
|
|
floating
|
|
>
|
|
{{ tab.content }}
|
|
</VBadge>
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const tabs = [
|
|
{
|
|
badge: '3',
|
|
content: 'Item One',
|
|
},
|
|
{
|
|
badge: '1',
|
|
content: 'Item Two',
|
|
},
|
|
{
|
|
badge: '2',
|
|
content: 'Item Three',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VTabs
|
|
grow
|
|
height="52"
|
|
>
|
|
<VTab
|
|
v-for="tab in tabs"
|
|
:key="tab.content"
|
|
:value="tab.content"
|
|
>
|
|
<VBadge
|
|
:content="tab.badge"
|
|
floating
|
|
>
|
|
{{ tab.content }}
|
|
</VBadge>
|
|
</VTab>
|
|
</VTabs>
|
|
</template>
|
|
` }
|
|
|
|
export const tonal = { ts: `<script setup lang="ts">
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="5"
|
|
class="v-badge--tonal"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- default -->
|
|
<VBadge
|
|
content="1"
|
|
class="v-badge--tonal"
|
|
color="error"
|
|
>
|
|
<VBtn
|
|
variant="tonal"
|
|
color="error"
|
|
>
|
|
Default
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- icon -->
|
|
<VBadge
|
|
icon="ri-lock-unlock-line"
|
|
color="info"
|
|
class="v-badge--tonal"
|
|
>
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBadge
|
|
content="5"
|
|
class="v-badge--tonal"
|
|
>
|
|
<VAvatar size="48">
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
|
|
<!-- default -->
|
|
<VBadge
|
|
content="1"
|
|
class="v-badge--tonal"
|
|
color="error"
|
|
>
|
|
<VBtn
|
|
variant="tonal"
|
|
color="error"
|
|
>
|
|
Default
|
|
</VBtn>
|
|
</VBadge>
|
|
|
|
<!-- icon -->
|
|
<VBadge
|
|
icon="ri-lock-unlock-line"
|
|
color="info"
|
|
class="v-badge--tonal"
|
|
>
|
|
<VAvatar>
|
|
<VImg :src="avatar1" />
|
|
</VAvatar>
|
|
</VBadge>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|