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

161
resources/js/pages/components/alert.vue Normal file
View File

@@ -0,0 +1,161 @@
<script setup>
import * as demoCode from '@/views/demos/components/alert/demoCodeAlert'
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<DemoAlertBasic />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>The <code>color</code> prop is used to change the background color of the alert.</p>
<DemoAlertColors />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>The <code>icon</code> prop allows you to add an icon to the beginning of the alert component. If a <code>type</code> is provided, this will override the default type icon. Additionally, setting the <code>icon</code> prop to false will remove the icon altogether.</p>
<DemoAlertIcons />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Border -->
<AppCardCode
title="Border"
:code="demoCode.border"
>
<p>The <code>border</code> prop adds a simple border to one of the 4 sides of the alert. This can be combined with props like <code>color</code>, <code>type</code> and <code>icon</code> to provide unique accents to the alert.</p>
<DemoAlertBorder />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Colored Border -->
<AppCardCode
title="Colored Border"
:code="demoCode.coloredBorder"
>
<p>The <code>colored-border</code> prop removes the alert background in order to accent the <code>border</code> prop. If a type is set, it will use the type's default color. If no <code>color</code> or <code>type</code> is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).</p>
<DemoAlertColoredBorder />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>The <code>density</code> prop decreases the height of the alert based upon 1 of 3 levels of density. <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
<DemoAlertDensity />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Type -->
<AppCardCode
title="Type"
:code="demoCode.type"
>
<p>The <code>type</code> prop provides 4 default v-alert styles: <code>success</code>, <code>info</code>, <code>warning</code>, and <code>error</code>. Each of these styles provide a default icon and color.</p>
<DemoAlertType />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Closable -->
<AppCardCode
title="Closable"
:code="demoCode.closable"
>
<p>The <code>closable</code> prop adds a close button to the end of the alert component. Clicking this button will set its value to false and effectively hide the alert.</p>
<DemoAlertClosable />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 V-model support -->
<AppCardCode
title="v-model support"
:code="demoCode.vModelSupport"
>
<p>Clicking this button will set its value to <code>false</code> and effectively hide the alert. You can restore the alert by binding <code>v-model</code> and setting it to true.</p>
<DemoAlertVModelSupport />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Outlined -->
<AppCardCode
title="Outlined"
:code="demoCode.outlined"
>
<p>The <code>variant="outlined"</code> prop inverts the style of an alert, inheriting the currently applied <code>color</code>, applying it to the text and border, and making its background transparent.</p>
<DemoAlertOutlined />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Tonal -->
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>The <code>variant</code> prop provides an easy way to change the overall style of your alerts. The <code>variant="tonal"</code> prop is a simple alert variant that applies a reduced opacity background of the provided color.</p>
<DemoAlertTonal />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Elevation -->
<AppCardCode
title="Elevation"
:code="demoCode.elevation"
>
<p>Use <code>elevation</code> prop to set a box-shadow to alert.</p>
<DemoAlertElevation />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Prominent -->
<AppCardCode
title="Prominent"
:code="demoCode.prominent"
>
<p>The <code>prominent</code> prop provides a more pronounced alert by increasing the size of the icon.</p>
<DemoAlertProminent />
</AppCardCode>
</VCol>
</VRow>
</template>

112
resources/js/pages/components/avatar.vue Normal file
View File

@@ -0,0 +1,112 @@
<script setup>
import * as demoCode from '@/views/demos/components/avatar/demoCodeAvatar'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>Use <code>color</code> prop to change the background color of avatar.</p>
<DemoAvatarColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Initials -->
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>Use <code>variant="tonal"</code> to create light background avatars.</p>
<DemoAvatarTonal />
</AppCardCode>
</VCol>
<VCol
md="6"
cols="12"
>
<!-- 👉 Sizes -->
<AppCardCode
title="Sizes"
:code="demoCode.sizes"
>
<p>The <code>size</code> prop allows you to change the height and width of the avatar.</p>
<DemoAvatarSizes />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>You can use <code>icon</code> prop of <code>v-avatar</code> component for rendering icons.</p>
<DemoAvatarIcons />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Rounded -->
<AppCardCode
title="Rounded"
:code="demoCode.rounded"
>
<p>The <code>rounded</code> prop can be used to change the border radius of <code>v-avatar</code>.</p>
<DemoAvatarRounded />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Images -->
<AppCardCode
title="Images"
:code="demoCode.images"
>
<p>You can use <code>image</code> prop of <code>v-avatar</code> component for rendering image.</p>
<DemoAvatarImages />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Group -->
<AppCardCode
title="Group"
:code="demoCode.group"
>
<p>Use <code>v-avatar-group</code> class as a wrapper of avatars.</p>
<DemoAvatarGroup />
</AppCardCode>
</VCol>
</VRow>
</template>

156
resources/js/pages/components/badge.vue Normal file
View File

@@ -0,0 +1,156 @@
<script setup>
import * as demoCode from '@/views/demos/components/badge/demoCodeBadge'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Style -->
<AppCardCode
title="Style"
:code="demoCode.style"
>
<p>You can use various props like <code>bordered</code>, <code>dot</code>, <code>inline</code>, <code>rounded</code> etc. to style the badge.</p>
<DemoBadgeStyle />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Color -->
<AppCardCode
title="Color"
:code="demoCode.color"
>
<p>Use <code>color</code> prop to create various background badges.</p>
<DemoBadgeColor />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Position -->
<AppCardCode
title="Position"
:code="demoCode.position"
>
<p>You can use <code>location</code> prop to change the position of the badge. Possible values are <code>top-end</code>, <code>bottom-end</code>, <code>bottom-start</code>, <code>top-start</code>.</p>
<DemoBadgePosition />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icon -->
<AppCardCode
title="Icon"
:code="demoCode.icon"
>
<p>You can use <code>icon</code> prop or use <code>slot</code> to render the icon</p>
<DemoBadgeIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Avatar Status -->
<AppCardCode
title="Avatar Status"
:code="demoCode.avatarStatus"
>
<p>You can use badge with avatar as status.</p>
<DemoBadgeAvatarStatus />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Dynamic notifications -->
<AppCardCode
title="Dynamic notifications"
:code="demoCode.dynamicNotifications"
>
<p>You can incorporate badges with dynamic content to make things such as a notification system.</p>
<DemoBadgeDynamicNotifications />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Show on hover -->
<AppCardCode
title="Show on hover"
:code="demoCode.showOnHover"
>
<p>You can do many things with visibility control, for example, show badge on hover.</p>
<DemoBadgeShowOnHover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Tabs -->
<AppCardCode
title="Tabs"
:code="demoCode.tabs"
>
<p>Badges help convey information to the user in a variety of ways.</p>
<DemoBadgeTabs />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Maximum value content -->
<AppCardCode
title="Maximum Value"
:code="demoCode.maximumValue"
>
<p>Use <code>max</code> prop to cap the value of the badge content</p>
<DemoBadgeMaximumValue />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>Use class <code>v-badge--tonal</code> for using tonal variant badge.</p>
<DemoBadgeTonal />
</AppCardCode>
</VCol>
</VRow>
</template>

189
resources/js/pages/components/button.vue Normal file
View File

@@ -0,0 +1,189 @@
<script setup>
import * as demoCode from '@/views/demos/components/button/demoCodeButton'
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>The <code>color</code> prop is used to change the background color of the alert.</p>
<DemoButtonColors />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Outlined -->
<AppCardCode
title="Outlined"
:code="demoCode.outlined"
>
<p>The <code>outlined</code> variant option is used to create outlined buttons.</p>
<DemoButtonOutlined />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Flat -->
<AppCardCode
title="Flat"
:code="demoCode.flat"
>
<p>The <code>flat</code> buttons still maintain their background color, but have no box shadow.</p>
<DemoButtonFlat />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Rounded -->
<AppCardCode
title="Rounded"
:code="demoCode.rounded"
>
<p>Use the <code>rounded</code> prop to control the border radius of buttons.</p>
<DemoButtonRounded />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Text -->
<AppCardCode
title="Text"
:code="demoCode.text"
>
<p>Use <code>text</code> variant option to create text button. Text buttons have no box shadow and no background.</p>
<DemoButtonText />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Plain -->
<AppCardCode
title="Plain"
:code="demoCode.plain"
>
<p>Use <code>plain</code> variant option to a create a plain button. Plain buttons have a lower baseline opacity that reacts to hover and focus.</p>
<DemoButtonPlain />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Tonal -->
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>Use <code>tonal</code> variant option to a create a light background button.</p>
<DemoButtonTonal />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Icon -->
<AppCardCode
title="Icon"
:code="demoCode.icon"
>
<p>Icons can be used inside of buttons to add emphasis to the action.</p>
<DemoButtonIcon />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Icon Only -->
<AppCardCode
title="Icon Only"
:code="demoCode.iconOnly"
>
<p>Use <code>icon</code> prop to create button with icon only. This property makes the button rounded and applies the text prop styles.</p>
<DemoButtonIconOnly />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Sizing -->
<AppCardCode
title="Sizing"
:code="demoCode.sizing"
>
<p>Buttons can be given different sizing options to fit a multitude of scenarios.</p>
<DemoButtonSizing />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Block -->
<AppCardCode
title="Block"
:code="demoCode.block"
>
<p>The <code>block</code> prop allows buttons to extend the full available width.</p>
<DemoButtonBlock />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Loaders -->
<AppCardCode
title="Loaders"
:code="demoCode.loaders"
>
<p>Using the <code>loading</code> prop, you can notify a user that there is processing taking place. The default behavior is to use a <code>v-progress-circular</code> component but this can be customized.</p>
<DemoButtonLoaders />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Router -->
<AppCardCode
title="Router"
:code="demoCode.router"
>
<p>Use <code>to</code> prop to create button with router support.</p>
<VAlert
color="warning"
variant="tonal"
class="mb-4"
>
Note: On click of the link button, You will get redirected to another page.
</VAlert>
<DemoButtonRouter />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Link -->
<AppCardCode
title="Link"
:code="demoCode.link"
>
<p>Designates that the component is a link. This is automatic when using the <code>href</code> or <code>to</code> prop.</p>
<VAlert
color="warning"
variant="tonal"
class="mb-4"
>
Note: On click of the link button, You will get redirected to another page.
</VAlert>
<DemoButtonLink />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Button Group -->
<AppCardCode
title="Group"
:code="demoCode.group"
>
<p>
Wrap buttons with the <code>v-btn-toggle</code> component to create a group button. You can add a visual divider between buttons with the <code>divided</code> prop.
</p>
<DemoButtonGroup />
</AppCardCode>
</VCol>
</VRow>
</template>

157
resources/js/pages/components/chip.vue Normal file
View File

@@ -0,0 +1,157 @@
<script setup>
import * as demoCode from '@/views/demos/components/chip/demoCodeChip'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Color -->
<AppCardCode
title="Color"
:code="demoCode.color"
>
<p>Use <code>color</code> prop to change the background color of chips.</p>
<DemoChipColor />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Elevated -->
<AppCardCode
title="Elevated"
:code="demoCode.elevated"
>
<p>Use <code>elevated</code> variant option to create filled chips.</p>
<DemoChipElevated />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Outlined -->
<AppCardCode
title="Outlined"
:code="demoCode.outlined"
>
<p>Use <code>outlined</code> variant option to create outline border chips.</p>
<DemoChipOutlined />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Label -->
<AppCardCode
title="Label"
:code="demoCode.label"
>
<p>Label chips use the <code>v-card</code> border-radius. Use <code>label</code> prop to create label chips.</p>
<DemoChipLabel />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Closable -->
<AppCardCode
title="Closable"
:code="demoCode.closable"
>
<p>Closable chips can be controlled with a <code>v-model</code>.</p>
<DemoChipClosable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Chip With Icon -->
<AppCardCode
title="With Icon"
:code="demoCode.withIcon"
>
<p>Chips can use text or any icon available in the Material Icons font library.</p>
<DemoChipWithIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Avatar -->
<AppCardCode
title="With Avatar"
:code="demoCode.withAvatar"
>
<p>Use <code>pill</code> prop to remove the <code>v-avatar</code> padding.</p>
<DemoChipWithAvatar />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Sizes -->
<AppCardCode
title="Sizes"
:code="demoCode.sizes"
>
<p>The <code>v-chip</code> component can have various sizes from <code>x-small</code> to <code>x-large</code>.</p>
<DemoChipSizes />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 In Selects -->
<AppCardCode
title="In Selects"
:code="demoCode.inSelects"
>
<p>Selects can use <code>chips</code> to display the selected data. Try adding your own tags below.</p>
<DemoChipInSelects />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Expandable -->
<AppCardCode
title="Expandable"
:code="demoCode.expandable"
>
<p>Chips can be combined with <code>v-menu</code> to enable a specific set of actions for a chip.</p>
<DemoChipExpandable />
</AppCardCode>
</VCol>
</VRow>
</template>

127
resources/js/pages/components/dialog.vue Normal file
View File

@@ -0,0 +1,127 @@
<script setup>
import * as demoCode from '@/views/demos/components/dialog/demoCodeDialog'
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.</p>
<DemoDialogBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Persistent -->
<AppCardCode
title="Persistent"
:code="demoCode.persistent"
>
<p>Use <code>persistent</code> prop to create persistent dialog.</p>
<DemoDialogPersistent />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Scrollable -->
<AppCardCode
title="Scrollable"
:code="demoCode.scrollable"
>
<p>Use <code>scrollable</code> prop to create scrollable dialog.</p>
<DemoDialogScrollable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Loader -->
<AppCardCode
title="Loader"
:code="demoCode.loader"
>
<p>The <code>v-dialog</code> component makes it easy to create a customized loading experience for your application.</p>
<DemoDialogLoader />
</AppCardCode>
</VCol>
<VCol
col="12"
md="6"
>
<!-- 👉 Nesting -->
<AppCardCode
title="Nesting"
:code="demoCode.nesting"
>
<p>Dialogs can be nested: you can open one dialog from another.</p>
<DemoDialogNesting />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Overflowed -->
<AppCardCode
title="Overflowed"
:code="demoCode.overflowed"
>
<p>Modals that do not fit within the available window space will scroll the container.</p>
<DemoDialogOverflowed />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Fullscreen -->
<AppCardCode
title="Fullscreen"
:code="demoCode.fullscreen"
>
<p>Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.</p>
<DemoDialogFullscreen />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Form -->
<AppCardCode
title="Form"
:code="demoCode.form"
>
<p>Just a simple example of a form in a dialog.</p>
<DemoDialogForm />
</AppCardCode>
</VCol>
</VRow>
</template>

119
resources/js/pages/components/expansion-panel.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup>
import * as demoCode from '@/views/demos/components/expansion-panel/demoCodeExpansionPanel'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
variant="outlined"
:code="demoCode.basic"
>
<p>Expansion panels in their simplest form display a list of expandable items. However, with the <code>multiple</code> prop, the expansion-panel can remain open until explicitly closed.</p>
<DemoExpansionPanelBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Accordion -->
<AppCardCode
title="Accordion"
variant="outlined"
:code="demoCode.accordion"
>
<p>Use <code>accordion</code> variant option to create <strong>Accordion</strong> Panels. Accordion expansion-panel hasn't got margins around active panel.</p>
<DemoExpansionPanelAccordion />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Inset -->
<AppCardCode
title="Inset"
variant="outlined"
:code="demoCode.inset"
>
<p>Use <code>inset</code> variant option to create Inset Panels. The Inset expansion-panel becomes smaller when activated.</p>
<DemoExpansionPanelInset />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Popout -->
<AppCardCode
title="Popout"
variant="outlined"
:code="demoCode.popout"
>
<p>
Use <code>popout</code> variant option to create expansion-panel with popout design. With it, expansion-panel is enlarged when activated.
</p>
<DemoExpansionPanelPopout />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom Icon -->
<AppCardCode
title="Custom Icon"
variant="outlined"
:code="demoCode.customIcon"
>
<p>Expand action icon can be customized with <code>expand-icon</code> prop or the <code>actions</code> slot.</p>
<DemoExpansionPanelCustomIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Model -->
<AppCardCode
title="Model"
variant="outlined"
:code="demoCode.model"
>
<p>Expansion panels can be controlled externally by modifying the <code>v-model</code>. If <code>multiple</code> prop is used then it is an array containing the indices of the open items.</p>
<DemoExpansionPanelModel />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Customized Accordion -->
<AppCardCode
title="Customized Accordion"
variant="outlined"
:code="demoCode.customizedAccordion"
>
<DemoExpansionPanelCustomizedAccordion />
</AppCardCode>
</VCol>
</VRow>
</template>

205
resources/js/pages/components/list.vue Normal file
View File

@@ -0,0 +1,205 @@
<script setup>
import * as demoCode from '@/views/demos/components/list/demoCodeList'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
no-padding
:code="demoCode.basic"
>
<VCardText><code>v-list</code> component can contain an avatar, content, actions and much more.</VCardText>
<VCardText>
<DemoListBasic />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Rounded -->
<AppCardCode
title="Rounded"
no-padding
:code="demoCode.rounded"
>
<VCardText>You can make <code>v-list-item</code> rounded using <code>rounded</code> prop.</VCardText>
<VCardText>
<DemoListRounded />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
no-padding
>
<VCardText>Use <code>density</code> prop to adjusts the spacing within the component. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</VCardText>
<VCardText>
<DemoListDensity />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Nav -->
<AppCardCode
title="Nav"
no-padding
:code="demoCode.nav"
>
<VCardText>Lists can receive an alternative <code>nav</code> styling that reduces the width <code>v-list-item</code> takes up as well as adding a border radius.</VCardText>
<VCardText>
<DemoListNav />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Action and item group -->
<AppCardCode
title="Action and item group"
no-padding
:code="demoCode.actionAndItemGroup"
>
<VCardText>A <code>three-line</code> list with actions. Utilizing <code>v-list-group</code>, easily connect actions to your tiles.</VCardText>
<VCardText>
<DemoListActionAndItemGroup />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Sub Group -->
<AppCardCode
title="Sub Group"
no-padding
:code="demoCode.subGroup"
>
<VCardText>
Using the <code>v-list-group</code> component you can create up to 2 levels in depth using the sub-group prop.
</VCardText>
<VCardText>
<DemoListSubGroup />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Two lines and Subheader -->
<AppCardCode
title="Two lines and subheader"
no-padding
:code="demoCode.twoLinesAndSubheader"
>
<VCardText>Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.</VCardText>
<VCardText>
<DemoListTwoLinesAndSubheader />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Three Line -->
<AppCardCode
title="Three Line"
no-padding
:code="demoCode.threeLine"
>
<VCardText>For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.</VCardText>
<VCardText>
<DemoListThreeLine />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Users List -->
<AppCardCode
title="User List"
no-padding
:code="demoCode.userList"
>
<VCardText>
<DemoListUserList />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Progress List -->
<AppCardCode
title="Progress List"
no-padding
:code="demoCode.progressList"
>
<VCardText>
<DemoListProgressList />
</VCardText>
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Shaped -->
<AppCardCode
title="Shaped"
no-padding
:code="demoCode.shaped"
>
<VCardText>
Shaped lists have rounded borders on one side of the <code>v-list-item</code>.
</VCardText>
<VCardText>
<DemoListShaped />
</VCardText>
</AppCardCode>
</VCol>
</VRow>
</template>

99
resources/js/pages/components/menu.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup>
import * as demoCode from '@/views/demos/components/menu/demoCodeMenu'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>
Remember to put the element that activates the menu in the activator slot.
</p>
<DemoMenuBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom transitions -->
<AppCardCode
title="Custom transitions"
:code="demoCode.customTransitions"
>
<p>Vuetify comes with 3 standard transitions, <code>scale</code>, <code>slide-x</code> and <code>slide-y</code>. Use <code>transition</code> prop to add transition to a menu.</p>
<DemoMenuCustomTransitions />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Location -->
<AppCardCode
title="Location"
:code="demoCode.location"
>
<p>Menu can be offset relative to the activator by using the <code>location</code> prop.</p>
<DemoMenuLocation />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Open on hover -->
<AppCardCode
title="Open on hover"
:code="demoCode.openOnHover"
>
<p>Menus can be accessed using hover instead of clicking with the <code>open-on-hover</code> prop.</p>
<DemoMenuOpenOnHover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Popover -->
<AppCardCode
title="Popover"
:code="demoCode.popover"
>
<p>A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.</p>
<DemoMenuPopover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Activator and tooltip -->
<AppCardCode
title="Activator and tooltip"
:code="demoCode.activatorAndTooltip"
>
<p>With the new <code>v-slot</code> syntax, nested activators such as those seen with a <code>v-menu</code> and <code>v-tooltip</code> attached to the same activator button, need a particular setup in order to function correctly</p>
<DemoMenuActivatorAndTooltip />
</AppCardCode>
</VCol>
</VRow>
</template>

157
resources/js/pages/components/pagination.vue Normal file
View File

@@ -0,0 +1,157 @@
<script setup>
import * as demoCode from '@/views/demos/components/pagination/demoCodePagination'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-pagination</code> component is used to separate long sets of data.</p>
<DemoPaginationBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 outline basic variant -->
<AppCardCode
title="Outline"
:code="demoCode.outline"
>
<p>The <code>variant='outline'</code> prop is used to give outline to pagination item.</p>
<DemoPaginationOutline />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Circle -->
<AppCardCode
title="Circle"
:code="demoCode.circle"
>
<p>The <code>rounded</code> prop allows you to render pagination buttons with alternative styles.</p>
<DemoPaginationCircle />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 outline circle variant -->
<AppCardCode
title="Outline Circle"
:code="demoCode.outlineCircle"
>
<p>The <code>variant='outline'</code> and <code>rounded</code> prop is used to give rounded outline to pagination item.</p>
<DemoPaginationOutlineCircle />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Disabled -->
<AppCardCode
title="Disabled"
:code="demoCode.disabled"
>
<p>Pagination items can be manually deactivated using the <code>disabled</code> prop.</p>
<DemoPaginationDisabled />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>Previous and next page icons can be customized with the <code>prev-icon</code> and <code>next-icon</code> props.</p>
<DemoPaginationIcons />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Length -->
<AppCardCode
title="Length"
:code="demoCode.length"
>
<p>Using the <code>length</code> prop you can set the length of <code>v-pagination</code>, if the number of page buttons exceeds the parent container, it will truncate the list.</p>
<DemoPaginationLength />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Total visible -->
<AppCardCode
title="Total visible"
:code="demoCode.totalVisible"
>
<p>You can also manually set the maximum number of visible page buttons with the <code>total-visible</code> prop.</p>
<DemoPaginationTotalVisible />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Color -->
<AppCardCode
title="Color"
:code="demoCode.color"
>
<p>Use <code>color</code> prop for create different color pagination.</p>
<DemoPaginationColor />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Size -->
<AppCardCode
title="Size"
:code="demoCode.size"
>
<p>Use <code>size</code> prop to sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: <strong>x-small</strong>, <strong>small</strong>, <strong>default</strong>, <strong>large</strong>, and <strong>x-large</strong>.</p>
<DemoPaginationSize />
</AppCardCode>
</VCol>
</VRow>
</template>

67
resources/js/pages/components/progress-circular.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup>
import * as demoCode from '@/views/demos/components/progress-circular/demoCodeProgressCircular'
</script>
<template>
<VRow class="match-height">
<!-- 👉 Progress circular color -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="color"
:code="demoCode.color"
>
<p>Alternate colors can be applied to <code>v-progress-circular</code> using the <code>color</code> prop.</p>
<DemoProgressCircularColor />
</AppCardCode>
</VCol>
<!-- 👉 Progress circular Indeterminate -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Indeterminate"
:code="demoCode.indeterminate"
>
<p>Using the <code>indeterminate</code> prop, a <code>v-progress-circular</code> continues to animate indefinitely.</p>
<DemoProgressCircularIndeterminate />
</AppCardCode>
</VCol>
<!-- 👉 Progress circular Rotate -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Rotate"
:code="demoCode.rotate"
>
<p>The <code>rotate</code> prop gives you the ability to customize the <code>v-progress-circular</code>'s origin.</p>
<DemoProgressCircularRotate />
</AppCardCode>
</VCol>
<!-- 👉 Progress circular Size and Width -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Size"
:code="demoCode.size"
>
<p>The <code>size</code> and <code>width</code> props allow you to easily alter the size and width of the <code>v-progress-circular</code> component.</p>
<DemoProgressCircularSize />
</AppCardCode>
</VCol>
</VRow>
</template>

110
resources/js/pages/components/progress-linear.vue Normal file
View File

@@ -0,0 +1,110 @@
<script setup>
import * as demoCode from '@/views/demos/components/progress-linear/demoCodeProgressLinear'
</script>
<template>
<VRow class="match-height">
<!-- 👉 Progress linear color -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Color"
:code="demoCode.color"
>
<p>Use the props <code>color</code> and <code>background-color</code> to set colors.</p>
<DemoProgressLinearColor />
</AppCardCode>
</VCol>
<!-- 👉 Progress linear Buffering -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Buffering"
:code="demoCode.buffering"
>
<p>The primary value is controlled by <code>v-model</code>, whereas the buffer is controlled by the <code>buffer-value</code> prop.</p>
<DemoProgressLinearBuffering />
</AppCardCode>
</VCol>
<!-- 👉 Progress linear indeterminate -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Indeterminate"
:code="demoCode.indeterminate"
>
<p>for continuously animating progress bar,use prop <code>indeterminate</code>. This indicates continuous process. </p>
<DemoProgressLinearIndeterminate />
</AppCardCode>
</VCol>
<!-- 👉 Progress linear Reversed -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Reversed"
:code="demoCode.reversed"
>
<p>Use prop <code>reverse</code> to animate continuously in reverse direction. The component also has RTL support.</p>
<DemoProgressLinearReversed />
</AppCardCode>
</VCol>
<!-- 👉 Progress linear Rounded -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Rounded"
:code="demoCode.rounded"
>
<p>The <code> rounded </code> prop is used to apply a border radius to the v-progress-linear component.</p>
<DemoProgressLinearRounded />
</AppCardCode>
</VCol>
<!-- 👉 Progress linear Slot -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Slots"
:code="demoCode.slots"
>
<p>we can bind user input using <code>v-model</code>.You can also use the default slot for the same.</p>
<DemoProgressLinearSlots />
</AppCardCode>
</VCol>
<!-- 👉 Progress Linear Striped -->
<VCol
cols="12"
md="6"
>
<AppCardCode
title="Striped"
:code="demoCode.striped"
>
<p> The <code>striped</code> prop is used to apply striped background.</p>
<DemoProgressLinearStriped />
</AppCardCode>
</VCol>
</VRow>
</template>

126
resources/js/pages/components/snackbar.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup>
import * as demoCode from '@/views/demos/components/snackbar/demoCodeSnackbar'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-snackbar</code> component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.</p>
<DemoSnackbarBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 With Action -->
<AppCardCode
title="With Action"
:code="demoCode.withAction"
>
<p>Use <code>actions</code> slot to add action button. A <code>v-snackbar</code> in its simplest form displays a temporary and closable notification to the user.</p>
<DemoSnackbarWithAction />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multi line -->
<AppCardCode
title="Multi Line"
:code="demoCode.multiLine"
>
<p>The <code>multi-line</code> property extends the height of the <code>v-snackbar</code> to give you a little more room for content.</p>
<DemoSnackbarMultiLine />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Timeout -->
<AppCardCode
title="Timeout"
:code="demoCode.timeout"
>
<p>The <code>timeout</code> property lets you customize the delay before the <code>v-snackbar</code> is hidden.</p>
<DemoSnackbarTimeout />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Vertical -->
<AppCardCode
title="Vertical"
:code="demoCode.vertical"
>
<p>The <code>vertical</code> property allows you to stack the content of your <code>v-snackbar</code>.</p>
<DemoSnackbarVertical />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Position -->
<AppCardCode
title="Position"
:code="demoCode.position"
>
<p>Use <code>location</code> prop to change the position of snackbar.</p>
<DemoSnackbarPosition />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Variants -->
<AppCardCode
title="Variants"
:code="demoCode.variants"
>
<p>Apply different styles to the snackbar using props such as <code>shaped</code>, <code>rounded</code>, <code>color</code>, <code>text</code>, <code>outlined</code>, <code>tile</code> and more.</p>
<DemoSnackbarVariants />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Transition -->
<AppCardCode
title="Transition"
:code="demoCode.transition"
>
<p>Use transition prop to sets the component transition.</p>
<DemoSnackbarTransition />
</AppCardCode>
</VCol>
</VRow>
</template>

179
resources/js/pages/components/tabs.vue Normal file
View File

@@ -0,0 +1,179 @@
<script setup>
import * as demoCode from '@/views/demos/components/tabs/demoCodeTabs'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-tabs</code> component is used for hiding content behind a selectable item.</p>
<DemoTabsBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic Pill -->
<AppCardCode
title="Basic Pill"
:code="demoCode.basicPill"
>
<p>Use our custom class <code>.v-tabs-pill</code> along with <code>v-tabs</code> component to style pill tabs.</p>
<DemoTabsBasicPill />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Stacked -->
<AppCardCode
title="Stacked"
:code="demoCode.stacked"
>
<p>Using <code>stacked</code> prop you can have buttons that use both icons and text.</p>
<DemoTabsStacked />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Vertical -->
<AppCardCode
title="Vertical"
:code="demoCode.vertical"
>
<p>The <code>vertical</code> prop allows for <code>v-tab</code> components to stack vertically.</p>
<DemoTabsVertical />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Vertical Pill -->
<AppCardCode
title="Vertical Pill"
:code="demoCode.verticalPill"
>
<p>Use our custom class .v-tabs-pill along with v-tabs component to style pill tabs.</p>
<DemoTabsVerticalPill />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Alignment -->
<AppCardCode
title="Alignment"
:code="demoCode.alignment"
>
<p>Use <code>align-tabs</code> prop to change the tabs alignment.</p>
<DemoTabsAlignment />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Pagination -->
<AppCardCode
title="Pagination"
:code="demoCode.pagination"
>
<p>If the tab items overflow their container, pagination controls will appear on desktop.</p>
<DemoTabsPagination />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom Icons -->
<AppCardCode
title="Custom Icons"
:code="demoCode.customIcons"
>
<p><code>prev-icon</code> and <code>next-icon</code> props can be used for applying custom pagination icons.</p>
<DemoTabsCustomIcons />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Fixed tabs -->
<AppCardCode
title="Fixed"
:code="demoCode.fixed"
>
<p>The <code>fixed-tabs</code> prop forces <code>v-tab</code> to take up all available space up to the maximum width (300px).</p>
<DemoTabsFixed />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Grow -->
<AppCardCode
title="Grow"
:code="demoCode.grow"
>
<p>The <code>grow</code> prop will make the tab items take up all available space with no limit.</p>
<DemoTabsGrow />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Programmatic Navigation -->
<AppCardCode
title="Programmatic Navigation"
:code="demoCode.programmaticNavigation"
>
<DemoTabsProgrammaticNavigation />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Dynamic Tabs -->
<AppCardCode
title="Dynamic"
:code="demoCode.dynamic"
>
<p>Tabs can be dynamically added and removed. This allows you to update to any number and the <code>v-tabs</code> component will react.</p>
<DemoTabsDynamic />
</AppCardCode>
</VCol>
</VRow>
</template>

21
resources/js/pages/components/timeline.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<TimelineBasic />
</VCol>
<VCol
cols="12"
md="6"
>
<TimelineOutlined />
</VCol>
<VCol cols="12">
<TimelineWithIcons />
</VCol>
</VRow>
</template>

77
resources/js/pages/components/tooltip.vue Normal file
View File

@@ -0,0 +1,77 @@
<script setup>
import * as demoCode from '@/views/demos/components/tooltip/demoCodeTooltip'
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Location -->
<AppCardCode
title="Location"
:code="demoCode.location"
>
<p>Use the <code>location</code> prop to specify on which side of the element the tooltip should show</p>
<DemoTooltipLocation />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Events -->
<AppCardCode
title="Events"
:code="demoCode.events"
>
<DemoTooltipEvents />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Delay On Hover -->
<AppCardCode
title="Delay On Hover"
:code="demoCode.delayOnHover"
>
<p>Delay (in ms) after which tooltip opens (when <code>open-on-hover</code> prop is set to true)</p>
<DemoTooltipDelayOnHover />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 V-model Support -->
<AppCardCode
title="V-Model Support"
:code="demoCode.vModelSupport"
>
<p>Tooltip visibility can be programmatically changed using <code>v-model</code>.</p>
<DemoTooltipVModelSupport />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Transition -->
<AppCardCode
title="Transition"
:code="demoCode.transition"
>
<p>Use <code>transition</code> prop to sets the component transition.</p>
<DemoTooltipTransition />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Tooltip on Various Elements -->
<AppCardCode
title="Tooltip on Various Elements"
:code="demoCode.tooltipOnVariousElements"
>
<p>Tooltips can wrap any element.</p>
<DemoTooltipTooltipOnVariousElements />
</AppCardCode>
</VCol>
</VRow>
</template>