TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/views/demos/components/avatar/DemoAvatarColors.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="demo-space-x">
<VAvatar color="primary">
PI
</VAvatar>
<VAvatar color="secondary">
SE
</VAvatar>
<VAvatar color="success">
SU
</VAvatar>
<VAvatar color="info">
IN
</VAvatar>
<VAvatar color="warning">
WA
</VAvatar>
<VAvatar color="error">
ER
</VAvatar>
</div>
</template>

91
resources/js/views/demos/components/avatar/DemoAvatarGroup.vue Normal file
View File

@@ -0,0 +1,91 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="v-avatar-group demo-avatar-group">
<VAvatar :size="45">
<VImg :src="avatar1" />
<VTooltip
activator="parent"
location="top"
>
John Doe
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar2" />
<VTooltip
activator="parent"
location="top"
>
Jennie Obrien
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar3" />
<VTooltip
activator="parent"
location="top"
>
Peter Harper
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar4" />
<VTooltip
activator="parent"
location="top"
>
Vivian Padilla
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar5" />
<VTooltip
activator="parent"
location="top"
>
Scott Wells
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar6" />
<VTooltip
activator="parent"
location="top"
>
Angel Bishop
</VTooltip>
</VAvatar>
<VAvatar
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
:size="45"
>
+3
</VAvatar>
</div>
</template>
<style lang="scss">
.demo-avatar-group{
&.v-avatar-group {
.v-avatar{
&:last-child{
border: none;
}
}
}
}
</style>

33
resources/js/views/demos/components/avatar/DemoAvatarIcons.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="demo-space-x">
<VAvatar
color="primary"
icon="ri-home-line"
/>
<VAvatar
color="secondary"
icon="ri-cloud-line"
/>
<VAvatar
color="success"
icon="ri-bell-line"
/>
<VAvatar
color="info"
icon="ri-user-line"
/>
<VAvatar
color="warning"
icon="ri-alert-line"
/>
<VAvatar
color="error"
icon="ri-message-line"
/>
</div>
</template>

24
resources/js/views/demos/components/avatar/DemoAvatarImages.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="demo-space-x">
<VAvatar :image="avatar1" />
<VAvatar :image="avatar2" />
<VAvatar :image="avatar3" />
<VAvatar :image="avatar4" />
<VAvatar :image="avatar5" />
<VAvatar :image="avatar6" />
</div>
</template>

38
resources/js/views/demos/components/avatar/DemoAvatarRounded.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="demo-space-x">
<VAvatar
rounded="0"
color="primary"
icon="ri-user-line"
/>
<VAvatar
rounded="sm"
color="secondary"
icon="ri-user-line"
/>
<VAvatar
rounded
color="success"
icon="ri-user-line"
/>
<VAvatar
rounded="lg"
color="info"
icon="ri-user-line"
/>
<VAvatar
rounded="xl"
color="warning"
icon="ri-user-line"
/>
<VAvatar
color="error"
icon="ri-user-line"
/>
</div>
</template>

35
resources/js/views/demos/components/avatar/DemoAvatarSizes.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="demo-space-x">
<VAvatar
color="primary"
size="x-small"
>
<small>PI</small>
</VAvatar>
<VAvatar
color="secondary"
size="small"
>
PI
</VAvatar>
<VAvatar color="success">
PI
</VAvatar>
<VAvatar
color="info"
size="large"
>
<span class="text-lg">PI</span>
</VAvatar>
<VAvatar
color="error"
size="x-large"
>
<span class="text-lg">PI</span>
</VAvatar>
</div>
</template>

41
resources/js/views/demos/components/avatar/DemoAvatarTonal.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div class="demo-space-x">
<VAvatar
color="primary"
variant="tonal"
>
PI
</VAvatar>
<VAvatar
color="secondary"
variant="tonal"
>
SE
</VAvatar>
<VAvatar
color="success"
variant="tonal"
>
SU
</VAvatar>
<VAvatar
color="info"
variant="tonal"
>
IN
</VAvatar>
<VAvatar
color="warning"
variant="tonal"
>
WA
</VAvatar>
<VAvatar
color="error"
variant="tonal"
>
ER
</VAvatar>
</div>
</template>

592
resources/js/views/demos/components/avatar/demoCodeAvatar.js Normal file
View File

@@ -0,0 +1,592 @@
export const colors = { ts: `<template>
<div class="demo-space-x">
<VAvatar color="primary">
PI
</VAvatar>
<VAvatar color="secondary">
SE
</VAvatar>
<VAvatar color="success">
SU
</VAvatar>
<VAvatar color="info">
IN
</VAvatar>
<VAvatar color="warning">
WA
</VAvatar>
<VAvatar color="error">
ER
</VAvatar>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VAvatar color="primary">
PI
</VAvatar>
<VAvatar color="secondary">
SE
</VAvatar>
<VAvatar color="success">
SU
</VAvatar>
<VAvatar color="info">
IN
</VAvatar>
<VAvatar color="warning">
WA
</VAvatar>
<VAvatar color="error">
ER
</VAvatar>
</div>
</template>
` }
export const group = { ts: `<script setup lang="ts">
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="v-avatar-group demo-avatar-group">
<VAvatar :size="45">
<VImg :src="avatar1" />
<VTooltip
activator="parent"
location="top"
>
John Doe
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar2" />
<VTooltip
activator="parent"
location="top"
>
Jennie Obrien
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar3" />
<VTooltip
activator="parent"
location="top"
>
Peter Harper
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar4" />
<VTooltip
activator="parent"
location="top"
>
Vivian Padilla
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar5" />
<VTooltip
activator="parent"
location="top"
>
Scott Wells
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar6" />
<VTooltip
activator="parent"
location="top"
>
Angel Bishop
</VTooltip>
</VAvatar>
<VAvatar
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
:size="45"
>
+3
</VAvatar>
</div>
</template>
<style lang="scss">
.demo-avatar-group{
&.v-avatar-group {
.v-avatar{
&:last-child{
border: none;
}
}
}
}
</style>
`, js: `<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="v-avatar-group demo-avatar-group">
<VAvatar :size="45">
<VImg :src="avatar1" />
<VTooltip
activator="parent"
location="top"
>
John Doe
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar2" />
<VTooltip
activator="parent"
location="top"
>
Jennie Obrien
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar3" />
<VTooltip
activator="parent"
location="top"
>
Peter Harper
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar4" />
<VTooltip
activator="parent"
location="top"
>
Vivian Padilla
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar5" />
<VTooltip
activator="parent"
location="top"
>
Scott Wells
</VTooltip>
</VAvatar>
<VAvatar :size="45">
<VImg :src="avatar6" />
<VTooltip
activator="parent"
location="top"
>
Angel Bishop
</VTooltip>
</VAvatar>
<VAvatar
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
:size="45"
>
+3
</VAvatar>
</div>
</template>
<style lang="scss">
.demo-avatar-group{
&.v-avatar-group {
.v-avatar{
&:last-child{
border: none;
}
}
}
}
</style>
` }
export const icons = { ts: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
icon="ri-home-line"
/>
<VAvatar
color="secondary"
icon="ri-cloud-line"
/>
<VAvatar
color="success"
icon="ri-bell-line"
/>
<VAvatar
color="info"
icon="ri-user-line"
/>
<VAvatar
color="warning"
icon="ri-alert-line"
/>
<VAvatar
color="error"
icon="ri-message-line"
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
icon="ri-home-line"
/>
<VAvatar
color="secondary"
icon="ri-cloud-line"
/>
<VAvatar
color="success"
icon="ri-bell-line"
/>
<VAvatar
color="info"
icon="ri-user-line"
/>
<VAvatar
color="warning"
icon="ri-alert-line"
/>
<VAvatar
color="error"
icon="ri-message-line"
/>
</div>
</template>
` }
export const images = { ts: `<script setup lang="ts">
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="demo-space-x">
<VAvatar :image="avatar1" />
<VAvatar :image="avatar2" />
<VAvatar :image="avatar3" />
<VAvatar :image="avatar4" />
<VAvatar :image="avatar5" />
<VAvatar :image="avatar6" />
</div>
</template>
`, js: `<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
import avatar6 from '@images/avatars/avatar-6.png'
</script>
<template>
<div class="demo-space-x">
<VAvatar :image="avatar1" />
<VAvatar :image="avatar2" />
<VAvatar :image="avatar3" />
<VAvatar :image="avatar4" />
<VAvatar :image="avatar5" />
<VAvatar :image="avatar6" />
</div>
</template>
` }
export const rounded = { ts: `<template>
<div class="demo-space-x">
<VAvatar
rounded="0"
color="primary"
icon="ri-user-line"
/>
<VAvatar
rounded="sm"
color="secondary"
icon="ri-user-line"
/>
<VAvatar
rounded
color="success"
icon="ri-user-line"
/>
<VAvatar
rounded="lg"
color="info"
icon="ri-user-line"
/>
<VAvatar
rounded="xl"
color="warning"
icon="ri-user-line"
/>
<VAvatar
color="error"
icon="ri-user-line"
/>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VAvatar
rounded="0"
color="primary"
icon="ri-user-line"
/>
<VAvatar
rounded="sm"
color="secondary"
icon="ri-user-line"
/>
<VAvatar
rounded
color="success"
icon="ri-user-line"
/>
<VAvatar
rounded="lg"
color="info"
icon="ri-user-line"
/>
<VAvatar
rounded="xl"
color="warning"
icon="ri-user-line"
/>
<VAvatar
color="error"
icon="ri-user-line"
/>
</div>
</template>
` }
export const sizes = { ts: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
size="x-small"
>
<small>PI</small>
</VAvatar>
<VAvatar
color="secondary"
size="small"
>
PI
</VAvatar>
<VAvatar color="success">
PI
</VAvatar>
<VAvatar
color="info"
size="large"
>
<span class="text-lg">PI</span>
</VAvatar>
<VAvatar
color="error"
size="x-large"
>
<span class="text-lg">PI</span>
</VAvatar>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
size="x-small"
>
<small>PI</small>
</VAvatar>
<VAvatar
color="secondary"
size="small"
>
PI
</VAvatar>
<VAvatar color="success">
PI
</VAvatar>
<VAvatar
color="info"
size="large"
>
<span class="text-lg">PI</span>
</VAvatar>
<VAvatar
color="error"
size="x-large"
>
<span class="text-lg">PI</span>
</VAvatar>
</div>
</template>
` }
export const tonal = { ts: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
variant="tonal"
>
PI
</VAvatar>
<VAvatar
color="secondary"
variant="tonal"
>
SE
</VAvatar>
<VAvatar
color="success"
variant="tonal"
>
SU
</VAvatar>
<VAvatar
color="info"
variant="tonal"
>
IN
</VAvatar>
<VAvatar
color="warning"
variant="tonal"
>
WA
</VAvatar>
<VAvatar
color="error"
variant="tonal"
>
ER
</VAvatar>
</div>
</template>
`, js: `<template>
<div class="demo-space-x">
<VAvatar
color="primary"
variant="tonal"
>
PI
</VAvatar>
<VAvatar
color="secondary"
variant="tonal"
>
SE
</VAvatar>
<VAvatar
color="success"
variant="tonal"
>
SU
</VAvatar>
<VAvatar
color="info"
variant="tonal"
>
IN
</VAvatar>
<VAvatar
color="warning"
variant="tonal"
>
WA
</VAvatar>
<VAvatar
color="error"
variant="tonal"
>
ER
</VAvatar>
</div>
</template>
` }