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

35
resources/js/views/demos/components/menu/DemoMenuActivatorAndTooltip.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import { mergeProps } from 'vue'
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<VMenu location="top">
<template #activator="{ props: menuProps }">
<VTooltip location="top">
<template #activator="{ props: tooltipProps }">
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
Dropdown w/ Tooltip
</VBtn>
</template>
<span>I am a Tooltip</span>
</VTooltip>
</template>
<VList :items="items" />
</VMenu>
</template>

45
resources/js/views/demos/components/menu/DemoMenuBasic.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup>
const menusVariant = [
'primary',
'secondary',
'success',
'info',
'warning',
'error',
]
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu
v-for="menu in menusVariant"
:key="menu"
>
<template #activator="{ props }">
<VBtn
:color="menu"
v-bind="props"
>
{{ menu }}
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>

50
resources/js/views/demos/components/menu/DemoMenuCustomTransitions.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu transition="scale-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Scale Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-x-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide X Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-y-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide Y Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>

60
resources/js/views/demos/components/menu/DemoMenuLocation.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu location="top">
<template #activator="{ props }">
<VBtn v-bind="props">
Top
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="bottom">
<template #activator="{ props }">
<VBtn v-bind="props">
Bottom
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="start">
<template #activator="{ props }">
<VBtn v-bind="props">
Start
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="end">
<template #activator="{ props }">
<VBtn v-bind="props">
End
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>

28
resources/js/views/demos/components/menu/DemoMenuOpenOnHover.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<VMenu open-on-hover>
<template #activator="{ props }">
<VBtn v-bind="props">
On hover
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</template>

41
resources/js/views/demos/components/menu/DemoMenuPopover.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
const menu = ref(false)
</script>
<template>
<VMenu
v-model="menu"
location="top"
>
<template #activator="{ props }">
<VBtn v-bind="props">
Menu as Popover
</VBtn>
</template>
<VCard max-width="300">
<VList>
<VListItem
:prepend-avatar="avatar1"
title="John Leider"
subtitle="Founder of Vuetify"
/>
</VList>
<VDivider />
<VCardText>
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
</VCardText>
<VCardActions>
<VBtn icon="ri-heart-fill" />
<VBtn icon="ri-bookmark-line" />
<VBtn icon="ri-thumb-down-line" />
</VCardActions>
</VCard>
</VMenu>
</template>

457
resources/js/views/demos/components/menu/demoCodeMenu.js Normal file
View File

@@ -0,0 +1,457 @@
export const activatorAndTooltip = { ts: `<script lang="ts" setup>
import { mergeProps } from 'vue'
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
</script>
<template>
<VMenu location="top">
<template #activator="{ props: menuProps }">
<VTooltip location="top">
<template #activator="{ props: tooltipProps }">
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
Dropdown w/ Tooltip
</VBtn>
</template>
<span>I am a Tooltip</span>
</VTooltip>
</template>
<VList :items="items" />
</VMenu>
</template>
`, js: `<script setup>
import { mergeProps } from 'vue'
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<VMenu location="top">
<template #activator="{ props: menuProps }">
<VTooltip location="top">
<template #activator="{ props: tooltipProps }">
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
Dropdown w/ Tooltip
</VBtn>
</template>
<span>I am a Tooltip</span>
</VTooltip>
</template>
<VList :items="items" />
</VMenu>
</template>
` }
export const basic = { ts: `<script lang="ts" setup>
const menusVariant = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
</script>
<template>
<div class="demo-space-x">
<VMenu
v-for="menu in menusVariant"
:key="menu"
>
<template #activator="{ props }">
<VBtn
:color="menu"
v-bind="props"
>
{{ menu }}
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
`, js: `<script setup>
const menusVariant = [
'primary',
'secondary',
'success',
'info',
'warning',
'error',
]
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu
v-for="menu in menusVariant"
:key="menu"
>
<template #activator="{ props }">
<VBtn
:color="menu"
v-bind="props"
>
{{ menu }}
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
` }
export const customTransitions = { ts: `<script lang="ts" setup>
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
</script>
<template>
<div class="demo-space-x">
<VMenu transition="scale-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Scale Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-x-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide X Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-y-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide Y Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
`, js: `<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu transition="scale-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Scale Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-x-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide X Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu transition="slide-y-transition">
<template #activator="{ props }">
<VBtn v-bind="props">
Slide Y Transition
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
` }
export const location = { ts: `<script lang="ts" setup>
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
</script>
<template>
<div class="demo-space-x">
<VMenu location="top">
<template #activator="{ props }">
<VBtn v-bind="props">
Top
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="bottom">
<template #activator="{ props }">
<VBtn v-bind="props">
Bottom
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="start">
<template #activator="{ props }">
<VBtn v-bind="props">
Start
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="end">
<template #activator="{ props }">
<VBtn v-bind="props">
End
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
`, js: `<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<div class="demo-space-x">
<VMenu location="top">
<template #activator="{ props }">
<VBtn v-bind="props">
Top
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="bottom">
<template #activator="{ props }">
<VBtn v-bind="props">
Bottom
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="start">
<template #activator="{ props }">
<VBtn v-bind="props">
Start
</VBtn>
</template>
<VList :items="items" />
</VMenu>
<VMenu location="end">
<template #activator="{ props }">
<VBtn v-bind="props">
End
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</div>
</template>
` }
export const openOnHover = { ts: `<script lang="ts" setup>
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
</script>
<template>
<VMenu open-on-hover>
<template #activator="{ props }">
<VBtn v-bind="props">
On hover
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</template>
`, js: `<script setup>
const items = [
{
title: 'Option 1',
value: 'Option 1',
},
{
title: 'Option 2',
value: 'Option 2',
},
{
title: 'Option 3',
value: 'Option 3',
},
]
</script>
<template>
<VMenu open-on-hover>
<template #activator="{ props }">
<VBtn v-bind="props">
On hover
</VBtn>
</template>
<VList :items="items" />
</VMenu>
</template>
` }
export const popover = { ts: `<script lang="ts" setup>
import avatar1 from '@images/avatars/avatar-1.png'
const menu = ref(false)
</script>
<template>
<VMenu
v-model="menu"
location="top"
>
<template #activator="{ props }">
<VBtn v-bind="props">
Menu as Popover
</VBtn>
</template>
<VCard max-width="300">
<VList>
<VListItem
:prepend-avatar="avatar1"
title="John Leider"
subtitle="Founder of Vuetify"
/>
</VList>
<VDivider />
<VCardText>
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
</VCardText>
<VCardActions>
<VBtn icon="ri-heart-fill" />
<VBtn icon="ri-bookmark-line" />
<VBtn icon="ri-thumb-down-line" />
</VCardActions>
</VCard>
</VMenu>
</template>
`, js: `<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
const menu = ref(false)
</script>
<template>
<VMenu
v-model="menu"
location="top"
>
<template #activator="{ props }">
<VBtn v-bind="props">
Menu as Popover
</VBtn>
</template>
<VCard max-width="300">
<VList>
<VListItem
:prepend-avatar="avatar1"
title="John Leider"
subtitle="Founder of Vuetify"
/>
</VList>
<VDivider />
<VCardText>
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
</VCardText>
<VCardActions>
<VBtn icon="ri-heart-fill" />
<VBtn icon="ri-bookmark-line" />
<VBtn icon="ri-thumb-down-line" />
</VCardActions>
</VCard>
</VMenu>
</template>
` }