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

54
resources/js/views/demos/components/list/DemoListActionAndItemGroup.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<VList
lines="three"
density="compact"
select-strategy="classic"
>
<VListSubheader>General</VListSubheader>
<VListItem value="notifications">
<template #prepend="{ isActive }">
<VListItemAction start>
<VCheckbox
:model-value="isActive"
color="primary"
class="mt-2"
/>
</VListItemAction>
</template>
<VListItemTitle>Notifications</VListItemTitle>
<VListItemSubtitle>Notify me about updates to apps or games that I downloaded</VListItemSubtitle>
</VListItem>
<VListItem value="sound">
<template #prepend="{ isActive }">
<VListItemAction start>
<VCheckbox
:model-value="isActive"
color="primary"
class="mt-2"
/>
</VListItemAction>
</template>
<VListItemTitle>Sound</VListItemTitle>
<VListItemSubtitle>Auto-update apps at any time. Data charges may apply</VListItemSubtitle>
</VListItem>
<VListItem value="widgets">
<template #prepend="{ isActive }">
<VListItemAction start>
<VCheckbox
:model-value="isActive"
color="primary"
class="mt-2"
/>
</VListItemAction>
</template>
<VListItemTitle>Auto-add widgets</VListItemTitle>
<VListItemSubtitle>Automatically add home screen widgets when downloads complete</VListItemSubtitle>
</VListItem>
</VList>
</template>

12
resources/js/views/demos/components/list/DemoListBasic.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const items = [
'Cras justo odio',
'Dapibus ac facilisis in',
'Morbi leo risus',
'Porta ac consectetur ac',
]
</script>
<template>
<VList :items="items" />
</template>

43
resources/js/views/demos/components/list/DemoListDensity.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
const items = [
{
title: 'halvah icing marshmallow',
value: 1,
},
{
title: 'Cake caramels donut danish muffin biscuit',
value: 2,
},
{
title: 'Chocolate cake pie lollipop',
value: 3,
},
{
title: 'Apple pie toffee pudding gummi bears',
value: 4,
},
{
title: 'Jujubes chupa chups cheesecake tart',
value: 5,
},
{
title: 'Candy fruitcake bonbon sesame snaps dessert',
value: 6,
},
{
title: 'Candy wafer tiramisu sugar plum sweet.',
value: 7,
},
{
title: 'Toffee gingerbread muffin macaroon cotton candy bonbon lollipop.',
value: 8,
},
]
</script>
<template>
<VList
density="compact"
:items="items"
/>
</template>

63
resources/js/views/demos/components/list/DemoListNav.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup>
const items = [
{
title: 'My Files',
value: 1,
prependIcon: 'ri-folder-line',
},
{
title: 'Shared with me',
value: 2,
prependIcon: 'ri-group-line',
},
{
title: 'Starred',
value: 3,
prependIcon: 'ri-star-line',
},
{
title: 'Recent',
value: 4,
prependIcon: 'ri-history-line',
},
{
title: 'Offline',
value: 5,
prependIcon: 'ri-checkbox-circle-line',
},
{
title: 'Uploads',
value: 6,
prependIcon: 'ri-upload-line',
},
{
title: 'Backups',
value: 7,
prependIcon: 'ri-upload-cloud-line',
},
]
</script>
<template>
<VList
nav
:lines="false"
>
<VListItem
v-for="item in items"
:key="item.value"
:value="item.value"
>
<template #prepend>
<VIcon
:icon="item.prependIcon"
class="me-3"
/>
</template>
<VListItemTitle>
{{ item.title }}
</VListItemTitle>
</VListItem>
</VList>
</template>

83
resources/js/views/demos/components/list/DemoListProgressList.vue Normal file
View File

@@ -0,0 +1,83 @@
<script setup>
const languageProgress = [
{
avatar: 'ri-reactjs-line',
title: 'React is a JavaScript library for building user interfaces',
language: 'react',
amount: 90,
},
{
avatar: 'ri-bootstrap-line',
title: 'Bootstrap is an open source toolkit',
language: 'bootstrap',
amount: 80,
},
{
avatar: 'ri-vuejs-line',
title: 'Vue.js is the Progressive JavaScript Framework',
language: 'vue',
amount: 65,
},
{
avatar: 'ri-angularjs-line',
title: 'Angular implements Functional Programming concepts',
language: 'angular',
amount: 75,
},
{
avatar: 'ri-javascript-line',
title: 'JavaScript is the programming language of the Web',
language: 'javascript',
amount: 70,
},
]
const resolveStatusColor = {
react: 'info',
bootstrap: 'primary',
vue: 'success',
angular: 'error',
javascript: 'warning',
}
</script>
<template>
<VList
lines="two"
border
rounded
>
<template
v-for="(progress, index) of languageProgress"
:key="progress.language"
>
<VListItem>
<template #prepend>
<VAvatar
size="36"
rounded
variant="tonal"
:icon="progress.avatar"
:color="resolveStatusColor[progress.language]"
/>
</template>
<VListItemTitle>
{{ progress.title }}
</VListItemTitle>
<VListItemSubtitle class="mt-2">
<VProgressLinear
height="6"
rounded
:model-value="progress.amount"
bg-color="secondary"
:color="resolveStatusColor[progress.language]"
/>
</VListItemSubtitle>
</VListItem>
<VDivider v-if="index !== languageProgress.length - 1" />
</template>
</VList>
</template>

40
resources/js/views/demos/components/list/DemoListRounded.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
const items = [
{
title: 'Cupcake sesame snaps dessert marzipan.',
value: 1,
props: {
prependIcon: 'ri-dribbble-line',
rounded: 'xl',
},
},
{
title: 'Jelly beans jelly-o gummi bears chupa chups marshmallow.',
value: 2,
props: {
prependIcon: 'ri-facebook-circle-line',
rounded: 'xl',
},
},
{
title: 'Bonbon macaroon gummies pie jelly',
value: 3,
props: {
prependIcon: 'ri-twitter-line',
rounded: 'xl',
},
},
{
title: 'halvah icing marshmallow',
value: 4,
props: {
prependIcon: 'ri-instagram-line',
rounded: 'xl',
},
},
]
</script>
<template>
<VList :items="items" />
</template>

33
resources/js/views/demos/components/list/DemoListShaped.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup>
const items = [
{
text: 'Cupcake sesame snaps dessert marzipan.',
icon: 'ri-instagram-line',
},
{
text: 'Jelly beans jelly-o gummi bears chupa chups marshmallow.',
icon: 'ri-facebook-circle-line',
},
{
text: 'Bonbon macaroon gummies pie jelly',
icon: 'ri-twitter-line',
},
]
</script>
<template>
<VList>
<VListItem
v-for="(item, i) in items"
:key="i"
:value="item.text"
rounded="shaped"
>
<template #prepend>
<VIcon :icon="item.icon" />
</template>
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
<VListItemTitle v-text="item.text" />
</VListItem>
</VList>
</template>

90
resources/js/views/demos/components/list/DemoListSubGroup.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup>
const open = ref([
'Users',
'Admin',
])
const admins = [
[
'Management',
'ri-group-line',
],
[
'Settings',
'ri-settings-5-line',
],
]
const cruds = [
[
'Create',
'ri-add-line',
],
[
'Read',
'ri-file-line',
],
[
'Update',
'ri-refresh-line',
],
[
'Delete',
'ri-delete-bin-line',
],
]
</script>
<template>
<VList v-model:opened="open">
<VListItem
prepend-icon="ri-home-line"
title="Home"
value="Home"
/>
<VListGroup value="Users">
<template #activator="{ props }">
<VListItem
v-bind="props"
prepend-icon="ri-user-line"
title="Users"
/>
</template>
<VListGroup value="Admin">
<template #activator="{ props }">
<VListItem
v-bind="props"
title="Admin"
/>
</template>
<VListItem
v-for="([title, icon], i) in admins"
:key="i"
:value="title"
:title="title"
:prepend-icon="icon"
/>
</VListGroup>
<VListGroup value="Actions">
<template #activator="{ props }">
<VListItem
v-bind="props"
title="Actions"
/>
</template>
<VListItem
v-for="([title, icon], i) in cruds"
:key="i"
:value="title"
:title="title"
:prepend-icon="icon"
/>
</VListGroup>
</VListGroup>
</VList>
</template>

58
resources/js/views/demos/components/list/DemoListThreeLine.vue Normal file
View File

@@ -0,0 +1,58 @@
<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'
const items = [
{
type: 'subheader',
title: 'Today',
},
{
prependAvatar: avatar1,
title: 'Brunch this weekend?',
subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?',
},
{
type: 'divider',
inset: true,
},
{
prependAvatar: avatar2,
title: 'Summer BBQ',
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.',
},
{
type: 'divider',
inset: true,
},
{
prependAvatar: avatar3,
title: 'Oui oui',
subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
},
{
type: 'divider',
inset: true,
},
{
prependAvatar: avatar4,
title: 'Birthday gift',
subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
},
]
</script>
<template>
<VList
lines="three"
:items="items"
item-props
>
<template #subtitle="{ subtitle }">
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="subtitle" />
</template>
</VList>
</template>

99
resources/js/views/demos/components/list/DemoListTwoLinesAndSubheader.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup>
const files = [
{
color: 'blue',
icon: 'ri-clipboard-line',
subtitle: 'Jan 20, 2014',
title: 'Vacation itinerary',
},
{
color: 'amber',
icon: 'ri-hard-drive-2-line',
subtitle: 'Jan 10, 2014',
title: 'Kitchen remodel',
},
]
const folders = [
{
subtitle: 'Jan 9, 2014',
title: 'Photos',
},
{
subtitle: 'Jan 17, 2014',
title: 'Recipes',
},
{
subtitle: 'Jan 28, 2014',
title: 'Work',
},
]
</script>
<template>
<VList lines="two">
<VListSubheader inset>
Folders
</VListSubheader>
<VListItem
v-for="folder in folders"
:key="folder.title"
:title="folder.title"
:subtitle="folder.subtitle"
>
<template #prepend>
<VAvatar
color="secondary"
variant="tonal"
>
<VIcon
:size="26"
icon="ri-folder-line"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="ri-information-line"
/>
</template>
</VListItem>
<VDivider inset />
<VListSubheader inset>
Files
</VListSubheader>
<VListItem
v-for="file in files"
:key="file.title"
:title="file.title"
:subtitle="file.subtitle"
>
<template #prepend>
<VAvatar
color="secondary"
variant="tonal"
>
<VIcon
:size="26"
:icon="file.icon"
/>
</VAvatar>
</template>
<template #append>
<VBtn
variant="text"
color="default"
icon="ri-information-line"
/>
</template>
</VListItem>
</VList>
</template>

82
resources/js/views/demos/components/list/DemoListUserList.vue Normal file
View File

@@ -0,0 +1,82 @@
<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'
const users = [
{
avatar: avatar1,
name: 'Caroline Black',
status: 'Online',
lastVisited: '13 minutes ago',
},
{
avatar: avatar2,
name: 'Alfred Copeland',
status: 'Away',
lastVisited: '11 minutes ago',
},
{
avatar: avatar3,
name: 'Celia Schneider',
status: 'Offline',
lastVisited: '9 minutes ago',
},
{
avatar: avatar4,
name: 'Max Rogan',
status: 'In Meeting',
lastVisited: '28 minutes ago',
},
]
const resolveStatusColor = {
'Online': 'success',
'Away': 'warning',
'Offline': 'secondary',
'In Meeting': 'error',
}
</script>
<template>
<VList
lines="two"
border
rounded
>
<template
v-for="(user, index) of users"
:key="user.name"
>
<VListItem>
<template #prepend>
<VAvatar :image="user.avatar" />
</template>
<VListItemTitle>
{{ user.name }}
</VListItemTitle>
<VListItemSubtitle class="mt-1">
<VBadge
dot
location="start center"
offset-x="2"
:color="resolveStatusColor[user.status]"
class="me-3"
>
<span class="ms-4">{{ user.status }}</span>
</VBadge>
<span class="text-xs text-disabled">{{ user.lastVisited }}</span>
</VListItemSubtitle>
<template #append>
<VBtn size="small">
Add
</VBtn>
</template>
</VListItem>
<VDivider v-if="index !== users.length - 1" />
</template>
</VList>
</template>

1266
resources/js/views/demos/components/list/demoCodeList.js Normal file
View File

File diff suppressed because it is too large Load Diff