vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Filled demo added

pull/5206/head
tugcekucukoglu 2024-02-02 14:49:09 +03:00
parent 35260c6e0f
commit da6eff9134
31 changed files with 1081 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
doc/autocomplete/FilledDoc.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: '',
items: [],
code: {
basic: `
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: '',
items: []
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref("");
const items = ref([]);
const search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
<\/script>
`
}
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
</script>

54
doc/calendar/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
date: null,
code: {
basic: `
<Calendar v-model="date" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
date: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Calendar v-model="date" variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const date = ref();
<\/script>
`
}
};
}
};
</script>

279
doc/cascadeselect/FilledDoc.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
basic: `
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
<\/script>
`
}
};
}
};
</script>

54
doc/checkbox/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
checked: false,
code: {
basic: `
<Checkbox v-model="checked" binary variant="filled" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
checked: false
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);
<\/script>
`
}
};
}
};
</script>

54
doc/chips/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card p-fluid">
<Chips v-model="value" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<Chips v-model="value" variant="filled" />
`,
options: `
<template>
<div class="card p-fluid">
<Chips v-model="value" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card p-fluid">
<Chips v-model="value" variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref();
<\/script>
`
}
};
}
};
</script>

75
doc/dropdown/FilledDoc.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" variant="filled" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

55
doc/inputmask/FilledDoc.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: '',
code: {
basic: `
<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputMask id="basic" v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

54
doc/inputnumber/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputNumber v-model="value" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputNumber v-model="value" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputNumber v-model="value" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputNumber v-model="value" variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref();
<\/script>
`
}
};
}
};
</script>

2
doc/inputtext/FilledDoc.vue
View File

@ -15,7 +15,7 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<InputText type="text" v-model="value" /> <InputText type="text" v-model="value" variant="filled" />
`, `,
options: ` options: `
<template> <template>

78
doc/multiselect/FilledDoc.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-20rem" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<MultiSelect v-model="selectedCities" variant="filled" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCities = ref();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

54
doc/password/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Password v-model="value" :feedback="false" invalid variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<Password v-model="value" :feedback="false" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Password v-model="value" :feedback="false" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Password v-model="value" :feedback="false" variant="filled" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

54
doc/radiobutton/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<RadioButton v-model="checked" variant="filled" binary />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
checked: false,
code: {
basic: `
<RadioButton v-model="checked" variant="filled" binary />
`,
options: `
<template>
<div class="card flex justify-content-center">
<RadioButton v-model="checked" variant="filled" binary />
</div>
</template>
<script>
export default {
data() {
return {
checked: true
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<RadioButton v-model="checked" variant="filled" binary />
</div>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);
<\/script>
`
}
};
}
};
</script>

8
doc/radiobutton/InvalidDoc.vue
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> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton invalid /> <RadioButton invalid binary />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
checked: false, checked: false,
code: { code: {
basic: ` basic: `
<RadioButton invalid /> <RadioButton invalid binary />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton invalid /> <RadioButton invalid binary />
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<RadioButton invalid /> <RadioButton invalid binary />
</div> </div>
</template> </template>

54
doc/textarea/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Textarea v-model="value" variant="filled" rows="5" cols="30" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: '',
code: {
basic: `
<Textarea v-model="value" variant="filled" rows="5" cols="30" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Textarea v-model="value" variant="filled" rows="5" cols="30" />
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Textarea v-model="value" variant="filled" rows="5" cols="30" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
<\/script>
`
}
};
}
};
</script>

2
doc/treeselect/AccessibilityDoc.vue
View File

@ -39,7 +39,7 @@
</table> </table>
</div> </div>
<h6>Popup Keyboard Support</h6> <h3>Popup Keyboard Support</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>

6
doc/tristatecheckbox/DisabledDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled /> <TriStateCheckbox v-model="value" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -19,7 +19,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled /> <TriStateCheckbox v-model="value" disabled />
</div> </div>
</template> </template>
@ -36,7 +36,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-column align-items-center gap-3"> <div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled /> <TriStateCheckbox v-model="value" disabled />
</div> </div>
</template> </template>

54
doc/tristatecheckbox/FilledDoc.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A model can be bound using the standard v-model directive.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<TriStateCheckbox v-model="value" />
`,
options: `
<template>
<div class="card flex align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

6
pages/autocomplete/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/autocomplete/AccessibilityDoc.vue';
import BasicDoc from '@/doc/autocomplete/BasicDoc.vue'; import BasicDoc from '@/doc/autocomplete/BasicDoc.vue';
import DisabledDoc from '@/doc/autocomplete/DisabledDoc.vue'; import DisabledDoc from '@/doc/autocomplete/DisabledDoc.vue';
import DropdownDoc from '@/doc/autocomplete/DropdownDoc.vue'; import DropdownDoc from '@/doc/autocomplete/DropdownDoc.vue';
import FilledDoc from '@/doc/autocomplete/FilledDoc.vue';
import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue';
import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue'; import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
import GroupDoc from '@/doc/autocomplete/GroupDoc.vue'; import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
@ -81,6 +82,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/calendar/index.vue
View File

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/calendar/BasicDoc.vue';
import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc.vue'; import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc.vue';
import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc.vue'; import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc.vue';
import DisabledDoc from '@/doc/calendar/DisabledDoc.vue'; import DisabledDoc from '@/doc/calendar/DisabledDoc.vue';
import FilledDoc from '@/doc/calendar/FilledDoc.vue';
import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc.vue';
import FormatDoc from '@/doc/calendar/FormatDoc.vue'; import FormatDoc from '@/doc/calendar/FormatDoc.vue';
import IconDoc from '@/doc/calendar/IconDoc.vue'; import IconDoc from '@/doc/calendar/IconDoc.vue';
@ -123,6 +124,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/cascadeselect/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue'; import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue'; import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
@ -51,6 +52,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/checkbox/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc.vue';
import BasicDoc from '@/doc/checkbox/BasicDoc.vue'; import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue'; import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue'; import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
import FilledDoc from '@/doc/checkbox/FilledDoc.vue';
import GroupDoc from '@/doc/checkbox/GroupDoc.vue'; import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
import ImportDoc from '@/doc/checkbox/ImportDoc.vue'; import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue'; import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
@ -50,6 +51,11 @@ export default {
label: 'Invalid', label: 'Invalid',
component: InvalidDoc component: InvalidDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'disabled', id: 'disabled',
label: 'Disabled', label: 'Disabled',

6
pages/chips/index.vue
View File

@ -6,6 +6,7 @@
import AccessibilityDoc from '@/doc/chips/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/chips/AccessibilityDoc.vue';
import BasicDoc from '@/doc/chips/BasicDoc.vue'; import BasicDoc from '@/doc/chips/BasicDoc.vue';
import DisabledDoc from '@/doc/chips/DisabledDoc.vue'; import DisabledDoc from '@/doc/chips/DisabledDoc.vue';
import FilledDoc from '@/doc/chips/FilledDoc.vue';
import FloatLabelDoc from '@/doc/chips/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/chips/FloatLabelDoc.vue';
import ImportDoc from '@/doc/chips/ImportDoc.vue'; import ImportDoc from '@/doc/chips/ImportDoc.vue';
import InvalidDoc from '@/doc/chips/InvalidDoc.vue'; import InvalidDoc from '@/doc/chips/InvalidDoc.vue';
@ -43,6 +44,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/dropdown/index.vue
View File

@ -17,6 +17,7 @@ import CheckmarkDoc from '@/doc/dropdown/CheckmarkDoc.vue';
import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue'; import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue'; import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
import EditableDoc from '@/doc/dropdown/EditableDoc.vue'; import EditableDoc from '@/doc/dropdown/EditableDoc.vue';
import FilledDoc from '@/doc/dropdown/FilledDoc.vue';
import FilterDoc from '@/doc/dropdown/FilterDoc.vue'; import FilterDoc from '@/doc/dropdown/FilterDoc.vue';
import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc.vue';
import GroupDoc from '@/doc/dropdown/GroupDoc.vue'; import GroupDoc from '@/doc/dropdown/GroupDoc.vue';
@ -93,6 +94,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/inputmask/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputmask/BasicDoc.vue'; import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue'; import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
import ImportDoc from '@/doc/inputmask/ImportDoc.vue'; import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue'; import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
@ -57,6 +58,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/inputnumber/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/inputnumber/AccessibilityDoc.vue';
import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue'; import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue'; import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue'; import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue';
import ImportDoc from '@/doc/inputnumber/ImportDoc.vue'; import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue'; import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
@ -69,6 +70,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/multiselect/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/multiselect/BasicDoc.vue'; import BasicDoc from '@/doc/multiselect/BasicDoc.vue';
import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue'; import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
import FilterDoc from '@/doc/multiselect/FilterDoc.vue'; import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
import GroupDoc from '@/doc/multiselect/GroupDoc.vue'; import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
@ -75,6 +76,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/password/index.vue
View File

@ -6,6 +6,7 @@
import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
import BasicDoc from '@/doc/password/BasicDoc.vue'; import BasicDoc from '@/doc/password/BasicDoc.vue';
import DisabledDoc from '@/doc/password/DisabledDoc.vue'; import DisabledDoc from '@/doc/password/DisabledDoc.vue';
import FilledDoc from '@/doc/password/FilledDoc.vue';
import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
import ImportDoc from '@/doc/password/ImportDoc.vue'; import ImportDoc from '@/doc/password/ImportDoc.vue';
import InvalidDoc from '@/doc/password/InvalidDoc.vue'; import InvalidDoc from '@/doc/password/InvalidDoc.vue';
@ -55,6 +56,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/radiobutton/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue'; import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue'; import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue'; import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue'; import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue'; import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
@ -39,6 +40,11 @@ export default {
label: 'Dynamic', label: 'Dynamic',
component: DynamicDoc component: DynamicDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/textarea/index.vue
View File

@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/textarea/AccessibilityDoc.vue';
import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue'; import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
import BasicDoc from '@/doc/textarea/BasicDoc.vue'; import BasicDoc from '@/doc/textarea/BasicDoc.vue';
import DisabledDoc from '@/doc/textarea/DisabledDoc.vue'; import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
import FilledDoc from '@/doc/textarea/FilledDoc.vue';
import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue'; import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue'; import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
@ -45,6 +46,11 @@ export default {
label: 'Float Label', label: 'Float Label',
component: FloatLabelDoc component: FloatLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
pages/tristatecheckbox/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc.vue';
import BasicDoc from '@/doc/tristatecheckbox/BasicDoc.vue'; import BasicDoc from '@/doc/tristatecheckbox/BasicDoc.vue';
import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc.vue'; import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc.vue';
import FilledDoc from '@/doc/tristatecheckbox/FilledDoc.vue';
import ImportDoc from '@/doc/tristatecheckbox/ImportDoc.vue'; import ImportDoc from '@/doc/tristatecheckbox/ImportDoc.vue';
import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc.vue'; import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc.vue';
import PTComponent from '@/doc/tristatecheckbox/pt/index.vue'; import PTComponent from '@/doc/tristatecheckbox/pt/index.vue';
@ -33,6 +34,11 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',