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

180
resources/js/pages/forms/autocomplete.vue Normal file
View File

@@ -0,0 +1,180 @@
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/autocomplete/demoCodeAutocomplete'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>
The <code> v-autocomplete </code> component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically fetching information from an API.
</p>
<DemoAutocompleteBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>
You can use <code> density </code> prop to adjusts vertical spacing within the component. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.
</p>
<DemoAutocompleteDensity />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="12"
>
<!-- 👉 Variant -->
<AppCardCode
title="Variant"
:code="demoCode.variant"
>
<p>Use <code>solo</code>, <code>outlined</code>, <code>underlined</code>, <code>filled</code> and <code>plain</code> options of <code>variant</code> prop to change the look of Autocomplete. </p>
<DemoAutocompleteVariant />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multiple Select -->
<AppCardCode
title="Multiple"
:code="demoCode.multiple"
>
<p>Use <code>multiple</code> prop to select multiple. Accepts array for value</p>
<DemoAutocompleteMultiple />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Clearable input -->
<AppCardCode
title="Clearable"
:code="demoCode.clearable"
>
<p>Use <code>clearable</code> prop to add input clear functionality.</p>
<DemoAutocompleteClearable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Chips -->
<AppCardCode
title="Chips"
:code="demoCode.chips"
>
<p>Use <code> chips </code> prop to use chips in select.</p>
<DemoAutocompleteChips />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom Filter -->
<AppCardCode
title="Custom-Filter"
:code="demoCode.customFilter"
>
<p>The <code> custom-filter </code> prop can be used to filter each individual item with custom logic.In example we will filter state based on their name and abbreviations </p>
<DemoAutocompleteCustomFilter />
</AppCardCode>
</VCol>
<!--
<VCol
cols="12"
md="6"
>
// 👉 With slots
<AppCardCode
title="Slots"
:code="demoCode.slots"
>
<p>With the power of slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items using their props. </p>
<DemoAutocompleteSlots />
</AppCardCode>
</VCol>
-->
<VCol
cols="12"
md="6"
>
<!-- 👉 Asynchronous Items -->
<AppCardCode
title="Async items"
:code="demoCode.asyncItems"
>
<p>Sometimes you need to load data externally based upon a search query. </p>
<DemoAutocompleteAsyncItems />
</AppCardCode>
</VCol>
<!--
<VCol
cols="12"
md="6"
>
// 👉 State Selector
<AppCardCode
title="State Selector"
:code="demoCode.stateSelector"
>
<p>Using a combination of v-autocomplete slots and transitions, you can create a stylish toggle able autocomplete field such as below state selector.</p>
<DemoAutocompleteStateSelector />
</AppCardCode>
</VCol>
-->
<VCol
cols="12"
md="6"
>
<!-- 👉 Validation -->
<AppCardCode
title="validation"
:code="demoCode.validation"
>
<p>Use <code>rules</code> prop to validate autocomplete. Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message.</p>
<DemoAutocompleteValidation />
</AppCardCode>
</VCol>
</VRow>
</template>