Invalid demo updates

This commit is contained in:
tugcekucukoglu 2024-06-03 11:28:56 +03:00
parent c6e70a973c
commit 27ab8ee07b
16 changed files with 77 additions and 77 deletions

View file

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-80" />
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities?.length === 0" class="w-full md:w-80" />
</div>
<DocSectionCode :code="code" />
</template>
@ -12,7 +12,7 @@
export default {
data() {
return {
selectedCities: null,
selectedCities: [],
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
@ -23,13 +23,13 @@ export default {
code: {
basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-80" />
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" />
`,
options: `
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-80" />
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" />
</div>
</template>
@ -37,7 +37,7 @@ export default {
export default {
data() {
return {
selectedCities: null,
selectedCities: [],
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
@ -54,14 +54,14 @@ export default {
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" invalid class="w-full md:w-80" />
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCities = ref();
const selectedCities = ref([]);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },