first commit
This commit is contained in:
Inshal
180
resources/js/pages/forms/autocomplete.vue
Normal file
180
resources/js/pages/forms/autocomplete.vue
Normal 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>
|
||||
142
resources/js/pages/forms/checkbox.vue
Normal file
142
resources/js/pages/forms/checkbox.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/checkbox/demoCodeCheckbox'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p><code>v-checkbox</code> in its simplest form provides a toggle between 2 values.</p>
|
||||
|
||||
<DemoCheckboxBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>Use <code>density</code> prop to reduces the input height. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
|
||||
|
||||
<DemoCheckboxDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Colors -->
|
||||
<AppCardCode
|
||||
title="Colors"
|
||||
:code="demoCode.colors"
|
||||
>
|
||||
<p>Checkboxes can be colored by using any of the builtin colors and contextual names using the <code>color</code> prop.</p>
|
||||
|
||||
<DemoCheckboxColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Model as array -->
|
||||
<AppCardCode
|
||||
title="Model as array"
|
||||
:code="demoCode.modelAsArray"
|
||||
>
|
||||
<p>Multiple <code>v-checkbox</code>'s can share the same <code>v-model</code> by using an array.</p>
|
||||
|
||||
<DemoCheckboxModelAsArray />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icon -->
|
||||
<AppCardCode
|
||||
title="Icon"
|
||||
:code="demoCode.icon"
|
||||
>
|
||||
<p>Use <code>false-icon</code> and <code>true-icon</code> prop to change the icon on the checkbox.</p>
|
||||
|
||||
<DemoCheckboxIcon />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Checkbox Value -->
|
||||
<AppCardCode
|
||||
title="Checkbox Value"
|
||||
:code="demoCode.checkboxValue"
|
||||
>
|
||||
<p>Use <code>false-value</code> and <code>true-value</code> prop to sets value for truthy and falsy state</p>
|
||||
|
||||
<DemoCheckboxCheckboxValue />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 States -->
|
||||
<AppCardCode
|
||||
title="States"
|
||||
:code="demoCode.states"
|
||||
>
|
||||
<p><code>v-checkbox</code> can have different states such as <code>default</code>, <code>disabled</code>, and <code>indeterminate</code>.</p>
|
||||
|
||||
<DemoCheckboxStates />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Label Slot -->
|
||||
<AppCardCode
|
||||
title="Label Slot"
|
||||
:code="demoCode.labelSlot"
|
||||
>
|
||||
<p>Checkbox labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
|
||||
|
||||
<DemoCheckboxLabelSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Inline text-field -->
|
||||
<AppCardCode
|
||||
title="Inline text-field"
|
||||
:code="demoCode.inlineTextField"
|
||||
>
|
||||
<p>You can place <code>v-checkbox</code> in line with other components such as <code>v-text-field</code>.</p>
|
||||
|
||||
<DemoCheckboxInlineTextField />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
102
resources/js/pages/forms/combobox.vue
Normal file
102
resources/js/pages/forms/combobox.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/combobox/demoCodeCombobox'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>With Combobox, you can allow a user to create new values that may not be present in a provided items list.</p>
|
||||
|
||||
<DemoComboboxBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>
|
||||
You can use <code>Density</code> prop to reduce combobox height and lower max height of list items. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.
|
||||
</p>
|
||||
|
||||
<DemoComboboxDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 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 combobox. </p>
|
||||
|
||||
<DemoComboboxVariant />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!--
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
// 👉 Multiple
|
||||
<AppCardCode
|
||||
title="Multiple"
|
||||
:code="demoCode.multiple"
|
||||
>
|
||||
<p>Previously known as tags - user is allowed to enter more than 1 value</p>
|
||||
|
||||
<DemoComboboxMultiple />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
-->
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 No data with chips -->
|
||||
<AppCardCode
|
||||
title="No data with chips"
|
||||
:code="demoCode.noDataWithChips"
|
||||
>
|
||||
<p>Previously known as tags - user is allowed to enter more than 1 value</p>
|
||||
|
||||
<DemoComboboxNoDataWithChips />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Clearable -->
|
||||
|
||||
<AppCardCode
|
||||
title="Clearable"
|
||||
:code="demoCode.clearable"
|
||||
>
|
||||
<p>Use <code>clearable</code> prop to clear combobox.</p>
|
||||
|
||||
<DemoComboboxClearable />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
85
resources/js/pages/forms/custom-input.vue
Normal file
85
resources/js/pages/forms/custom-input.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/custom-input/demoCodeCustomInput'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Custom Radios -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Radios"
|
||||
:code="demoCode.customRadios"
|
||||
>
|
||||
<DemoCustomInputCustomRadios />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Custom Checkboxes -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Checkboxes"
|
||||
:code="demoCode.customCheckboxes"
|
||||
>
|
||||
<DemoCustomInputCustomCheckboxes />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Custom Radios With Icon -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Radios With Icon"
|
||||
:code="demoCode.customRadiosWithIcon"
|
||||
>
|
||||
<DemoCustomInputCustomRadiosWithIcon />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Custom Checkboxes with icon -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Checkboxes With Icon"
|
||||
:code="demoCode.customCheckboxesWithIcon"
|
||||
>
|
||||
<DemoCustomInputCustomCheckboxesWithIcon />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Custom Radios with image -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Radios With Image"
|
||||
:code="demoCode.customRadiosWithImage"
|
||||
>
|
||||
<DemoCustomInputCustomRadiosWithImage />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Custom Checkboxes with Image -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Custom Checkboxes With Image"
|
||||
:code="demoCode.customCheckboxesWithImage"
|
||||
>
|
||||
<DemoCustomInputCustomCheckboxesWithImage />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
111
resources/js/pages/forms/date-time-picker.vue
Normal file
111
resources/js/pages/forms/date-time-picker.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/date-time-picker/demoCodeDateTimePicker'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Basic -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<DemoDateTimePickerBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Time Picker -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Time Picker"
|
||||
:code="demoCode.timePicker"
|
||||
>
|
||||
<DemoDateTimePickerTimePicker />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Date & TIme -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Date and Time"
|
||||
:code="demoCode.dateAndTime"
|
||||
>
|
||||
<DemoDateTimePickerDateAndTime />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Multiple Dates -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Multiple Dates"
|
||||
:code="demoCode.multipleDates"
|
||||
>
|
||||
<DemoDateTimePickerMultipleDates />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Range -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Range"
|
||||
:code="demoCode.range"
|
||||
>
|
||||
<DemoDateTimePickerRange />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Human Friendly -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Human Friendly"
|
||||
:code="demoCode.humanFriendly"
|
||||
>
|
||||
<DemoDateTimePickerHumanFriendly />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Disabled Range -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Disabled Range"
|
||||
:code="demoCode.disabledRange"
|
||||
>
|
||||
<DemoDateTimePickerDisabledRange />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Inline -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppCardCode
|
||||
title="Inline"
|
||||
:code="demoCode.inline"
|
||||
>
|
||||
<DemoDateTimePickerInline />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
26
resources/js/pages/forms/editors.vue
Normal file
26
resources/js/pages/forms/editors.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/editor/demoCodeEditor'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Basic Editor -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
title="Basic Editor"
|
||||
:code="demoCode.basicEditor"
|
||||
>
|
||||
<DemoEditorBasicEditor />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
title="Custom Editor"
|
||||
:code="demoCode.customEditor"
|
||||
>
|
||||
<DemoEditorCustomEditor />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
188
resources/js/pages/forms/file-input.vue
Normal file
188
resources/js/pages/forms/file-input.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/file-input/demoCodeFileInput'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>The <code>v-file-input</code> component is used to selecting files.</p>
|
||||
|
||||
<DemoFileInputBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>You can reduces the file input height with <code>density</code> prop. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
|
||||
|
||||
<DemoFileInputDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Variant -->
|
||||
<AppCardCode
|
||||
title="Variant"
|
||||
:code="demoCode.variant"
|
||||
>
|
||||
<p>use <code>solo</code>, <code>filled</code>, <code>outlined</code>, <code>plain</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of file input.</p>
|
||||
|
||||
<DemoFileInputVariant />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Accept -->
|
||||
<AppCardCode
|
||||
title="Accept"
|
||||
:code="demoCode.accept"
|
||||
>
|
||||
<p><code>v-file-input</code> component can accept only specific media formats/file types if you want.</p>
|
||||
|
||||
<DemoFileInputAccept />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Chips -->
|
||||
<AppCardCode
|
||||
title="Chips"
|
||||
:code="demoCode.chips"
|
||||
>
|
||||
<p>Use <code>chip</code> prop to display the selected file as a chip.</p>
|
||||
|
||||
<DemoFileInputChips />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Counter -->
|
||||
<AppCardCode
|
||||
title="Counter"
|
||||
:code="demoCode.counter"
|
||||
>
|
||||
<p>When using the <code>show-size</code> property along with <code>counter</code>, the total number of files and size will be displayed under the input.</p>
|
||||
|
||||
<DemoFileInputCounter />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Multiple -->
|
||||
<AppCardCode
|
||||
title="Multiple"
|
||||
:code="demoCode.multiple"
|
||||
>
|
||||
<p>
|
||||
The <code>v-file-input</code> can contain multiple files at the same time when using the <code>multiple</code> prop.
|
||||
</p>
|
||||
|
||||
<DemoFileInputMultiple />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Prepend icon -->
|
||||
<AppCardCode
|
||||
title="Prepend icon"
|
||||
:code="demoCode.prependIcon"
|
||||
>
|
||||
<p>
|
||||
The <code>v-file-input</code> has a default <code>prepend-icon</code> that can be set on the component or adjusted globally.
|
||||
</p>
|
||||
|
||||
<DemoFileInputPrependIcon />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Show size -->
|
||||
<AppCardCode
|
||||
title="Show size"
|
||||
:code="demoCode.showSize"
|
||||
>
|
||||
<p>The displayed size of the selected file(s) can be configured with the <code>show-size</code> property.</p>
|
||||
|
||||
<DemoFileInputShowSize />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Validation -->
|
||||
<AppCardCode
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<p>You can use the <code>rules</code> prop to create your own custom validation parameters.</p>
|
||||
|
||||
<DemoFileInputValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Selection slot -->
|
||||
<AppCardCode
|
||||
title="Selection slot"
|
||||
:code="demoCode.selectionSlot"
|
||||
>
|
||||
<p>Using the <code>selection</code> slot, you can customize the appearance of your input selections.</p>
|
||||
|
||||
<DemoFileInputSelectionSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Loading -->
|
||||
<AppCardCode
|
||||
title="Loading"
|
||||
:code="demoCode.loading"
|
||||
>
|
||||
<p>Use <code>loading</code> prop to displays linear progress bar.</p>
|
||||
|
||||
<DemoFileInputLoading />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
120
resources/js/pages/forms/form-layouts.vue
Normal file
120
resources/js/pages/forms/form-layouts.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-layout/demoCodeFormLayout'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form -->
|
||||
<AppCardCode
|
||||
title="Horizontal Form"
|
||||
:code="demoCode.horizontalForm"
|
||||
>
|
||||
<DemoFormLayoutHorizontalForm />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Horizontal Form with Icons -->
|
||||
<AppCardCode
|
||||
title="Horizontal Form with Icons"
|
||||
:code="demoCode.horizontalFormWithIcons"
|
||||
>
|
||||
<DemoFormLayoutHorizontalFormWithIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form -->
|
||||
<AppCardCode
|
||||
title="Vertical Form"
|
||||
:code="demoCode.verticalForm"
|
||||
>
|
||||
<DemoFormLayoutVerticalForm />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical Form with Icons -->
|
||||
<AppCardCode
|
||||
title="Vertical Form with Icons"
|
||||
:code="demoCode.verticalFormWithIcons"
|
||||
>
|
||||
<DemoFormLayoutVerticalFormWithIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Multiple Column -->
|
||||
<AppCardCode
|
||||
title="Multiple Column"
|
||||
:code="demoCode.multipleColumn"
|
||||
>
|
||||
<DemoFormLayoutMultipleColumn />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VRow class="match-height my-3">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Form Hint -->
|
||||
<AppCardCode
|
||||
title="Form Hint"
|
||||
:code="demoCode.formHint"
|
||||
>
|
||||
<DemoFormLayoutFormHint />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Form Validation -->
|
||||
<AppCardCode
|
||||
title="Form Validation"
|
||||
:code="demoCode.formValidation"
|
||||
>
|
||||
<DemoFormLayoutFormValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Form with Tabs -->
|
||||
<AppCardCode
|
||||
title="Form with Tabs"
|
||||
no-padding
|
||||
:code="demoCode.formWithTabs"
|
||||
>
|
||||
<DemoFormLayoutFormWithTabs />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Collapsible Section -->
|
||||
<h4 class="text-h6 font-weight-medium mb-5">
|
||||
Collapsible Section
|
||||
</h4>
|
||||
<DemoFormLayoutCollapsible />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Sticky Section -->
|
||||
<h4 class="text-h6 font-weight-medium mb-5">
|
||||
Sticky Section
|
||||
</h4>
|
||||
<DemoFormLayoutFormSticky />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
39
resources/js/pages/forms/form-validation.vue
Normal file
39
resources/js/pages/forms/form-validation.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-validation/demoCodeFormValidation'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Simple Form Validation -->
|
||||
<AppCardCode
|
||||
title="Simple Form Validation"
|
||||
:code="demoCode.simpleFormValidation"
|
||||
>
|
||||
<p>Use <code>Rules</code> prop to validate the input.</p>
|
||||
|
||||
<DemoFormValidationSimpleFormValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Validating Multiple Rules -->
|
||||
<AppCardCode
|
||||
title="Validating Multiple Rules"
|
||||
:code="demoCode.validatingMultipleRules"
|
||||
>
|
||||
<DemoFormValidationValidatingMultipleRules />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Validation Types -->
|
||||
<AppCardCode
|
||||
title="Validation Types"
|
||||
:code="demoCode.validationTypes"
|
||||
>
|
||||
<DemoFormValidationValidationTypes />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
43
resources/js/pages/forms/form-wizard-icons.vue
Normal file
43
resources/js/pages/forms/form-wizard-icons.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-wizard/form-wizard-icons/demoCodeFormWizardIcons'
|
||||
import DemoFormWizardIconsBasic from '@/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsBasic.vue'
|
||||
import DemoFormWizardIconsValidation from '@/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsValidation.vue'
|
||||
import DemoFormWizardIconsVertical from '@/views/demos/forms/form-wizard/form-wizard-icons/DemoFormWizardIconsVertical.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Basic -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<DemoFormWizardIconsBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Validation -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<DemoFormWizardIconsValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Vertical -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Vertical"
|
||||
:code="demoCode.vertical"
|
||||
>
|
||||
<DemoFormWizardIconsVertical />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
43
resources/js/pages/forms/form-wizard-numbered.vue
Normal file
43
resources/js/pages/forms/form-wizard-numbered.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-wizard/form-wizard-numbered/demoCodeFormWizardNumbered'
|
||||
import DemoFormWizardNumberedBasic from '@/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedBasic.vue'
|
||||
import DemoFormWizardNumberedValidation from '@/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedValidation.vue'
|
||||
import DemoFormWizardNumberedVertical from '@/views/demos/forms/form-wizard/form-wizard-numbered/DemoFormWizardNumberedVertical.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Basic -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<DemoFormWizardNumberedBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Validation -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<DemoFormWizardNumberedValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Vertical -->
|
||||
<VCol cols="12">
|
||||
<AppCardCode
|
||||
variant="outlined"
|
||||
title="Vertical"
|
||||
:code="demoCode.vertical"
|
||||
>
|
||||
<DemoFormWizardNumberedVertical />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
112
resources/js/pages/forms/radio.vue
Normal file
112
resources/js/pages/forms/radio.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/radio/demoCodeRadio'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>The <code>v-radio</code> component is a simple radio button.</p>
|
||||
|
||||
<DemoRadioBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Colors -->
|
||||
<AppCardCode
|
||||
title="Colors"
|
||||
:code="demoCode.colors"
|
||||
>
|
||||
<p>Radios can be colored by using any of the built-in colors and contextual names using the <code>color</code> prop.</p>
|
||||
|
||||
<DemoRadioColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Inline -->
|
||||
<AppCardCode
|
||||
title="Inline"
|
||||
:code="demoCode.inline"
|
||||
>
|
||||
<p>Use <code>inline</code> prop to displays radio buttons in row.</p>
|
||||
|
||||
<DemoRadioInline />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>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>.</p>
|
||||
|
||||
<DemoRadioDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Label Slot -->
|
||||
<AppCardCode
|
||||
title="Label Slot"
|
||||
:code="demoCode.labelSlot"
|
||||
>
|
||||
<p>Radio Group labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
|
||||
|
||||
<DemoRadioLabelSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icon -->
|
||||
<AppCardCode
|
||||
title="Icon"
|
||||
:code="demoCode.icon"
|
||||
>
|
||||
<p>Use <code>false-icon</code> and <code>true-icon</code> prop to set icon on inactive and active state.</p>
|
||||
|
||||
<DemoRadioIcon />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Validation -->
|
||||
<AppCardCode
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<p>Use <code>rules</code> prop to validate a radio. Accepts a mixed array of types <code>function</code>, <code>boolean</code> and <code>string</code>. Functions pass an input value as an argument and must return either <code>true</code> / <code>false</code> or a string containing an error message.</p>
|
||||
|
||||
<DemoRadioValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
99
resources/js/pages/forms/range-slider.vue
Normal file
99
resources/js/pages/forms/range-slider.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/range-slider/demoCodeRangeSlider'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>The <code>v-slider</code> component is a better visualization of the number input.</p>
|
||||
|
||||
<DemoRangeSliderBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Disabled -->
|
||||
<AppCardCode
|
||||
title="Disabled"
|
||||
:code="demoCode.disabled"
|
||||
>
|
||||
<p>You cannot interact with <code>disabled</code> sliders.</p>
|
||||
|
||||
<DemoRangeSliderDisabled />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Color -->
|
||||
<AppCardCode
|
||||
title="Color"
|
||||
:code="demoCode.color"
|
||||
>
|
||||
<p>Use <code>color</code> prop to the sets the slider color. <code>track-color</code> prop to sets the color of slider's unfilled track.</p>
|
||||
|
||||
<DemoRangeSliderColor />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Step -->
|
||||
<AppCardCode
|
||||
title="Step"
|
||||
:code="demoCode.step"
|
||||
>
|
||||
<p><code>v-range-slider</code> can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.</p>
|
||||
|
||||
<DemoRangeSliderStep />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Thumb label -->
|
||||
<AppCardCode
|
||||
title="Thumb label"
|
||||
:code="demoCode.thumbLabel"
|
||||
>
|
||||
<p>
|
||||
Using the <code>tick-labels</code> prop along with the <code>thumb-label</code> slot, you can create a very customized solution.
|
||||
</p>
|
||||
|
||||
<DemoRangeSliderThumbLabel />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical -->
|
||||
<AppCardCode
|
||||
title="Vertical"
|
||||
:code="demoCode.vertical"
|
||||
>
|
||||
<p>You can use the <code>vertical</code> prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.</p>
|
||||
|
||||
<DemoRangeSliderVertical />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
157
resources/js/pages/forms/rating.vue
Normal file
157
resources/js/pages/forms/rating.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/rating/demoCodeRating'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>The <code>v-rating</code> component provides a simple interface for gathering user feedback.</p>
|
||||
|
||||
<DemoRatingBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>Control the space occupied by <code>v-rating</code> items using the <code>density</code> prop.</p>
|
||||
|
||||
<DemoRatingDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Colors -->
|
||||
<AppCardCode
|
||||
title="Colors"
|
||||
:code="demoCode.colors"
|
||||
>
|
||||
<p>The <code>v-rating</code> component can be colored as you want, you can set both selected and not selected colors.</p>
|
||||
|
||||
<DemoRatingColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Size -->
|
||||
<AppCardCode
|
||||
title="Size"
|
||||
:code="demoCode.size"
|
||||
>
|
||||
<p>Utilize the same sizing classes available in <code>v-icon</code> or provide your own with the <code>size</code> prop.</p>
|
||||
|
||||
<DemoRatingSize />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Length -->
|
||||
<AppCardCode
|
||||
title="Length"
|
||||
:code="demoCode.length"
|
||||
>
|
||||
<p>Change the number of items by modifying the the <code>length</code> prop.</p>
|
||||
|
||||
<DemoRatingLength />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Clearable -->
|
||||
<AppCardCode
|
||||
title="Clearable"
|
||||
:code="demoCode.clearable"
|
||||
>
|
||||
<p>Use <code>clearable</code> prop to allows for the component to be cleared. Triggers when the icon containing the current value is clicked.</p>
|
||||
|
||||
<DemoRatingClearable />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Readonly -->
|
||||
<AppCardCode
|
||||
title="Readonly"
|
||||
:code="demoCode.readonly"
|
||||
>
|
||||
<p>For ratings that are not meant to be changed you can use <code>readonly</code> prop.</p>
|
||||
|
||||
<DemoRatingReadonly />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Hover -->
|
||||
<AppCardCode
|
||||
title="Hover"
|
||||
:code="demoCode.hover"
|
||||
>
|
||||
<p>Provides visual feedback when hovering over icons</p>
|
||||
|
||||
<DemoRatingHover />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Incremented -->
|
||||
<AppCardCode
|
||||
title="Incremented"
|
||||
:code="demoCode.incremented"
|
||||
>
|
||||
<p>The <code>half-increments</code> prop increases the granularity of the ratings, allow for .5 values as well.</p>
|
||||
|
||||
<DemoRatingIncremented />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Item slot -->
|
||||
<AppCardCode
|
||||
title="Item slot"
|
||||
:code="demoCode.itemSlot"
|
||||
>
|
||||
<p>Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.</p>
|
||||
|
||||
<DemoRatingItemSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
141
resources/js/pages/forms/select.vue
Normal file
141
resources/js/pages/forms/select.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/select/demoCodeSelect'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>Select fields components are used for collecting user provided information from a list of options.</p>
|
||||
<DemoSelectBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>You can use <code>density</code> prop to reduce the field height and lower max height of list items.</p>
|
||||
<DemoSelectDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Variant -->
|
||||
<AppCardCode
|
||||
title="Variant"
|
||||
:code="demoCode.variant"
|
||||
>
|
||||
<p>
|
||||
Use <code>filled</code>, <code>outlined</code>, <code>solo</code>, <code>underlined</code> and <code>plain</code> options of <code>variant</code> prop to change appearance of select.
|
||||
</p>
|
||||
|
||||
<DemoSelectVariant />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Custom text and value -->
|
||||
<AppCardCode
|
||||
title="Custom text and value"
|
||||
:code="demoCode.customTextAndValue"
|
||||
>
|
||||
<p>You can specify the specific properties within your items array that correspond to the title and value fields. In this example we also use the return-object prop which will return the entire object of the selected item on selection.</p>
|
||||
|
||||
<DemoSelectCustomTextAndValue />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icons -->
|
||||
<AppCardCode
|
||||
title="Icons"
|
||||
:code="demoCode.icons"
|
||||
>
|
||||
<p>Use a custom <code>prepend</code> or <code>appended</code> icon.</p>
|
||||
|
||||
<DemoSelectIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Chips -->
|
||||
<AppCardCode
|
||||
title="Chips"
|
||||
:code="demoCode.chips"
|
||||
>
|
||||
<p>Use <code>chips</code> prop to make selected option as chip.</p>
|
||||
|
||||
<DemoSelectChips />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Menu Props -->
|
||||
<AppCardCode
|
||||
title="Menu Props"
|
||||
:code="demoCode.menuProps"
|
||||
>
|
||||
<p>Custom props can be passed directly to <code>v-menu</code> using <code>menuProps</code> prop.</p>
|
||||
|
||||
<DemoSelectMenuProps />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Multiple -->
|
||||
<AppCardCode
|
||||
title="Multiple"
|
||||
:code="demoCode.multiple"
|
||||
>
|
||||
<p>Use <code>multiple</code> prop to select multiple option.</p>
|
||||
|
||||
<DemoSelectMultiple />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!--
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
// 👉 Selection slot
|
||||
<AppCardCode
|
||||
title="Selection slot"
|
||||
:code="demoCode.selectionSlot"
|
||||
>
|
||||
<p>The <code>selection</code> slot can be used to customize the way selected values are shown in the input.</p>
|
||||
|
||||
<DemoSelectSelectionSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
-->
|
||||
</VRow>
|
||||
</template>
|
||||
204
resources/js/pages/forms/slider.vue
Normal file
204
resources/js/pages/forms/slider.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/slider/demoCodeSlider'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>The <code>v-slider</code> component is a better visualization of the number input.</p>
|
||||
|
||||
<DemoSliderBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Disabled and Readonly -->
|
||||
<AppCardCode
|
||||
title="Disabled and Readonly"
|
||||
:code="demoCode.disabledAndReadonly"
|
||||
>
|
||||
<p>You cannot interact with <code>disabled</code> and <code>readonly</code> sliders.</p>
|
||||
|
||||
<DemoSliderDisabledAndReadonly />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Colors -->
|
||||
<AppCardCode
|
||||
title="Colors"
|
||||
:code="demoCode.colors"
|
||||
>
|
||||
<p>You can set the colors of the slider using the props <code>color</code>, <code>track-color</code> and <code>thumb-color</code>.</p>
|
||||
|
||||
<DemoSliderColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icons -->
|
||||
<AppCardCode
|
||||
title="Icons"
|
||||
:code="demoCode.icons"
|
||||
>
|
||||
<p>You can add icons to the slider with the <code>append-icon</code> and <code>prepend-icon</code> props.</p>
|
||||
|
||||
<DemoSliderIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Step -->
|
||||
<AppCardCode
|
||||
title="Step"
|
||||
:code="demoCode.step"
|
||||
>
|
||||
<p>Using the <code>step</code> prop you can control the precision of the slider, and how much it should move each step.</p>
|
||||
|
||||
<DemoSliderStep />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Validation -->
|
||||
<AppCardCode
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<p>Vuetify includes simple validation through the <code>rules</code> prop.</p>
|
||||
|
||||
<DemoSliderValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Min and Max -->
|
||||
<AppCardCode
|
||||
title="Min and Max"
|
||||
:code="demoCode.minAndMax"
|
||||
>
|
||||
<p>You can set <code>min</code> and <code>max</code> values of sliders.</p>
|
||||
|
||||
<DemoSliderMinAndMax />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Size -->
|
||||
<AppCardCode
|
||||
title="Size"
|
||||
:code="demoCode.size"
|
||||
>
|
||||
<p>Use <code>thumb-size</code>, <code>tick-size</code>, and <code>track-size</code> prop to increase and decrease the size of thumb, tick and track. </p>
|
||||
|
||||
<DemoSliderSize />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Thumb -->
|
||||
<AppCardCode
|
||||
title="Thumb"
|
||||
:code="demoCode.thumb"
|
||||
>
|
||||
<p>You can display a thumb label while sliding or always with the <code>thumb-label</code> prop.</p>
|
||||
|
||||
<DemoSliderThumb />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Ticks -->
|
||||
<AppCardCode
|
||||
title="Ticks"
|
||||
:code="demoCode.ticks"
|
||||
>
|
||||
<p>Tick marks represent predetermined values to which the user can move the slider.</p>
|
||||
|
||||
<DemoSliderTicks />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Vertical -->
|
||||
<AppCardCode
|
||||
title="Vertical"
|
||||
:code="demoCode.vertical"
|
||||
>
|
||||
<p>
|
||||
You can use the <code>vertical</code> prop to switch sliders to a vertical orientation.
|
||||
</p>
|
||||
|
||||
<DemoSliderVertical />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Append text field -->
|
||||
<AppCardCode
|
||||
title="Append text field"
|
||||
:code="demoCode.appendTextField"
|
||||
>
|
||||
<p>Sliders can be combined with other components in its <code>append</code> slot, such as <code>v-text-field</code>, to add additional functionality to the component.</p>
|
||||
|
||||
<DemoSliderAppendTextField />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Append and prepend -->
|
||||
<AppCardCode
|
||||
title="Append and prepend"
|
||||
:code="demoCode.appendAndPrepend"
|
||||
>
|
||||
<p>Use slots such as <code>append</code> and <code>prepend</code> to easily customize the <code>v-slider</code> to fit any situation.</p>
|
||||
|
||||
<DemoSliderAppendAndPrepend />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
114
resources/js/pages/forms/switch.vue
Normal file
114
resources/js/pages/forms/switch.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/switch/demoCodeSwitch'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>A <code>v-switch</code> in its simplest form provides a toggle between 2 values.</p>
|
||||
|
||||
<DemoSwitchBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Inset -->
|
||||
<AppCardCode
|
||||
title="Inset"
|
||||
:code="demoCode.inset"
|
||||
>
|
||||
<p>To change the default <code>inset</code> switch, simply modify the inset prop to a <code>false</code> value.</p>
|
||||
|
||||
<DemoSwitchInset />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Colors -->
|
||||
<AppCardCode
|
||||
title="Colors"
|
||||
:code="demoCode.colors"
|
||||
>
|
||||
<p>Switches can be colored by using any of the builtin colors and contextual names using the <code>color</code> prop.</p>
|
||||
|
||||
<DemoSwitchColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Model as array -->
|
||||
<AppCardCode
|
||||
title="Model as array"
|
||||
:code="demoCode.modelAsArray"
|
||||
>
|
||||
<p>Multiple <code>v-switch</code>'s can share the same <code>v-model</code> by using an array.</p>
|
||||
|
||||
<DemoSwitchModelAsArray />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Label slot -->
|
||||
<AppCardCode
|
||||
title="Label slot"
|
||||
:code="demoCode.labelSlot"
|
||||
>
|
||||
<p>Switch labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
|
||||
|
||||
<DemoSwitchLabelSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 True and False Value -->
|
||||
<AppCardCode
|
||||
title="True and False Value"
|
||||
:code="demoCode.trueAndFalseValue"
|
||||
>
|
||||
<p>
|
||||
Use <code>false-value</code> and <code>true-value</code> prop to sets value for truthy and falsy state
|
||||
</p>
|
||||
|
||||
<DemoSwitchTrueAndFalseValue />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 States -->
|
||||
<AppCardCode
|
||||
title="States"
|
||||
:code="demoCode.states"
|
||||
>
|
||||
<p><code>v-switch</code> can have different states such as <code>default</code>, <code>disabled</code>, and <code>loading</code>.</p>
|
||||
|
||||
<DemoSwitchStates />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
175
resources/js/pages/forms/textarea.vue
Normal file
175
resources/js/pages/forms/textarea.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/textarea/demoCodeTextarea'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>
|
||||
v-textarea in its simplest form is a multi-line text-field, useful for larger amounts of text.
|
||||
</p>
|
||||
|
||||
<DemoTextareaBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Auto Grow -->
|
||||
<AppCardCode
|
||||
title="Auto Grow"
|
||||
:code="demoCode.autoGrow"
|
||||
>
|
||||
<p>When using the <code>auto-grow</code> prop, textarea's will automatically increase in size when the contained text exceeds its size.</p>
|
||||
|
||||
<DemoTextareaAutoGrow />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Variant -->
|
||||
<AppCardCode
|
||||
title="Variant"
|
||||
:code="demoCode.variant"
|
||||
>
|
||||
<p>Use <code>filled</code>, <code>plain</code>, <code>outlined</code>, <code>solo</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of file input.</p>
|
||||
|
||||
<DemoTextareaVariant />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 States -->
|
||||
<AppCardCode
|
||||
title="States"
|
||||
:code="demoCode.states"
|
||||
>
|
||||
<p>Use <code>disabled</code> and <code>readonly</code> prop to change the state of textarea.</p>
|
||||
|
||||
<DemoTextareaStates />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Browser autocomplete -->
|
||||
<AppCardCode
|
||||
title="Browser autocomplete"
|
||||
:code="demoCode.browserAutocomplete"
|
||||
>
|
||||
<p>
|
||||
The <code>autocomplete</code> prop gives you the option to enable the browser to predict user input.
|
||||
</p>
|
||||
|
||||
<DemoTextareaBrowserAutocomplete />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Clearable -->
|
||||
<AppCardCode
|
||||
title="Clearable"
|
||||
:code="demoCode.clearable"
|
||||
>
|
||||
<p>You can clear the text from a <code>v-textarea</code> by using the <code>clearable</code> prop, and customize the icon used with the <code>clearable-icon</code> prop.</p>
|
||||
|
||||
<DemoTextareaClearable />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Counter -->
|
||||
<AppCardCode
|
||||
title="Counter"
|
||||
:code="demoCode.counter"
|
||||
>
|
||||
<p>
|
||||
The <code>counter</code> prop informs the user of a character limit for the <code>v-textarea</code>.
|
||||
</p>
|
||||
|
||||
<DemoTextareaCounter />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icons -->
|
||||
<AppCardCode
|
||||
title="Icons"
|
||||
:code="demoCode.icons"
|
||||
>
|
||||
<p>The <code>append-icon</code>, <code>prepend-icon</code>, <code>append-inner-icon</code> and <code>prepend-inner-icon</code> props help add context to v-textarea.</p>
|
||||
|
||||
<DemoTextareaIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Rows -->
|
||||
<AppCardCode
|
||||
title="Rows"
|
||||
:code="demoCode.rows"
|
||||
>
|
||||
<p>The <code>rows</code> prop allows you to define how many rows the textarea has, when combined with the <code>row-height</code> prop you can further customize your rows by defining their height.</p>
|
||||
|
||||
<DemoTextareaRows />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 No resize -->
|
||||
<AppCardCode
|
||||
title="No resize"
|
||||
:code="demoCode.noResize"
|
||||
>
|
||||
<p><code>v-textarea</code>'s have the option to remain the same size regardless of their content's size, using the <code>no-resize</code> prop.</p>
|
||||
|
||||
<DemoTextareaNoResize />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Validation -->
|
||||
<AppCardCode
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<p>Use <code>rules</code> prop to validate the textarea.</p>
|
||||
|
||||
<DemoTextareaValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
233
resources/js/pages/forms/textfield.vue
Normal file
233
resources/js/pages/forms/textfield.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup>
|
||||
import * as demoCode from '@/views/demos/forms/form-elements/textfield/demoCodeTextfield'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Basic -->
|
||||
<AppCardCode
|
||||
title="Basic"
|
||||
:code="demoCode.basic"
|
||||
>
|
||||
<p>Text fields components are used for collecting user provided information.</p>
|
||||
|
||||
<DemoTextfieldBasic />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Density -->
|
||||
<AppCardCode
|
||||
title="Density"
|
||||
:code="demoCode.density"
|
||||
>
|
||||
<p>The <code>density</code> prop decreases the height of the text field based upon 1 of 3 levels of density; <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
|
||||
|
||||
<DemoTextfieldDensity />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Variant -->
|
||||
<AppCardCode
|
||||
title="Variant"
|
||||
:code="demoCode.variant"
|
||||
>
|
||||
<p>Use <code>solo</code>, <code>filled</code>, <code>outlined</code>, <code>plain</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of the textfield. </p>
|
||||
|
||||
<DemoTextfieldVariant />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 State -->
|
||||
<AppCardCode
|
||||
title="State"
|
||||
:code="demoCode.state"
|
||||
>
|
||||
<p>Text fields can be disabled or readonly.</p>
|
||||
|
||||
<DemoTextfieldState />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Counter -->
|
||||
<AppCardCode
|
||||
title="Counter"
|
||||
:code="demoCode.counter"
|
||||
>
|
||||
<p>Use a <code>counter</code> prop to inform a user of the character limit.</p>
|
||||
|
||||
<DemoTextfieldCounter />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Clearable -->
|
||||
<AppCardCode
|
||||
title="Clearable"
|
||||
:code="demoCode.clearable"
|
||||
>
|
||||
<p>When clearable, you can customize the clear icon with clear-icon.</p>
|
||||
|
||||
<DemoTextfieldClearable />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Custom Colors -->
|
||||
<AppCardCode
|
||||
title="Custom Colors"
|
||||
:code="demoCode.customColors"
|
||||
>
|
||||
<p>Use <code>color</code> prop to change the input border color.</p>
|
||||
|
||||
<DemoTextfieldCustomColors />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icons -->
|
||||
<AppCardCode
|
||||
title="Icons"
|
||||
:code="demoCode.icons"
|
||||
>
|
||||
<p>You can add icons to the text field with <code>prepend-icon</code>, <code>append-icon</code> and <code>append-inner-icon</code> and <code>prepend-inner-icon</code> props.</p>
|
||||
|
||||
<DemoTextfieldIcons />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Prefixes and suffixes -->
|
||||
<AppCardCode
|
||||
title="Prefixes and suffixes"
|
||||
:code="demoCode.prefixesAndSuffixes"
|
||||
>
|
||||
<p>The <code>prefix</code> and <code>suffix</code> properties allows you to prepend and append inline non-modifiable text next to the text field.</p>
|
||||
|
||||
<DemoTextfieldPrefixesAndSuffixes />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Single line -->
|
||||
<AppCardCode
|
||||
title="Single line"
|
||||
:code="demoCode.singleLine"
|
||||
>
|
||||
<p><code>single-line</code> text fields do not float their label on focus or with data.</p>
|
||||
|
||||
<DemoTextfieldSingleLine />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Validation -->
|
||||
<AppCardCode
|
||||
title="Validation"
|
||||
:code="demoCode.validation"
|
||||
>
|
||||
<p>Vuetify includes simple validation through the <code>rules</code> prop.</p>
|
||||
|
||||
<DemoTextfieldValidation />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Icon events -->
|
||||
<AppCardCode
|
||||
title="Icon events"
|
||||
:code="demoCode.iconEvents"
|
||||
>
|
||||
<p><code>click:prepend</code>, <code>click:append</code>, <code>click:append-inner</code>, and <code>click:clear</code> will be emitted when you click on the respective icon</p>
|
||||
|
||||
<DemoTextfieldIconEvents />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!--
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
// 👉 Label Slot
|
||||
<AppCardCode
|
||||
title="Label Slot"
|
||||
:code="demoCode.labelSlot"
|
||||
>
|
||||
<p>Text field label can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
|
||||
|
||||
<DemoTextfieldLabelSlot />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
-->
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Password input -->
|
||||
<AppCardCode
|
||||
title="Password input"
|
||||
:code="demoCode.passwordInput"
|
||||
>
|
||||
<p>Using the HTML input <code>type</code> password can be used with an appended icon and callback to control the visibility.</p>
|
||||
|
||||
<DemoTextfieldPasswordInput />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
|
||||
<!--
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
// 👉 Icon slots
|
||||
<AppCardCode
|
||||
title="Icon slots"
|
||||
:code="demoCode.iconSlots"
|
||||
>
|
||||
<p>Instead of using <code>prepend</code>/<code>append</code>/<code>append-inner</code> icons you can use slots to extend input's functionality.</p>
|
||||
|
||||
<DemoTextfieldIconSlots />
|
||||
</AppCardCode>
|
||||
</VCol>
|
||||
-->
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user