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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6674/head
Cagatay Civici 2024-10-28 14:53:41 +03:00
parent a8b01e31a4 811a792341
commit 11ce0c4c99
8 changed files with 524 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
apps/showcase/doc/cascadeselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" showClear :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" 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" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" 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-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" 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>

27
apps/showcase/doc/common/apidoc/index.json
View File

@ -76868,6 +76868,33 @@
"default": "",
"description": "Danger color of text"
},
{
"name": "contrast.hoverBackground",
"token": "button.text.contrast.hover.background",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Contrast hover background of text"
},
{
"name": "contrast.activeBackground",
"token": "button.text.contrast.active.background",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Contrast active background of text"
},
{
"name": "contrast.color",
"token": "button.text.contrast.color",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Contrast color of text"
},
{
"name": "plain.hoverBackground",
"token": "button.text.plain.hover.background",

78
apps/showcase/doc/multiselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the MultiSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" showClear :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</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" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" 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" class="w-full md:w-80" />
</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-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-80" />
</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>

99
apps/showcase/doc/treeselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the TreeSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" showClear :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
</template>
<script>
import { NodeService } from '/service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
code: {
basic: `
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
`,
options: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
</template>
<script>
import { NodeService } from './service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
}
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService';
const nodes = ref(null);
const selectedValue = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
<\/script>
`,
data: `
{
key: '0',
label: 'Documents',
data: 'Documents Folder',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
data: 'Work Folder',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
]
},
{
key: '0-1',
label: 'Home',
data: 'Home Folder',
icon: 'pi pi-fw pi-home',
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
}
]
},
...`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

6
apps/showcase/pages/cascadeselect/index.vue
View File

@ -13,6 +13,7 @@
<script>
import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
import ClearIconDoc from '@/doc/cascadeselect/ClearIconDoc.vue';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
@ -55,6 +56,11 @@ export default {
label: 'Loading State',
component: LoadingStateDoc
},
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{
id: 'filled',
label: 'Filled',

6
apps/showcase/pages/multiselect/index.vue
View File

@ -13,6 +13,7 @@
<script>
import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/multiselect/BasicDoc.vue';
import ClearIconDoc from '@/doc/multiselect/ClearIconDoc.vue';
import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
@ -69,6 +70,11 @@ export default {
label: 'Filter',
component: FilterDoc
},
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{
id: 'loadingstate',
label: 'Loading State',

6
apps/showcase/pages/treeselect/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
import ClearIconDoc from '@/doc/treeselect/ClearIconDoc.vue';
import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
@ -68,6 +69,11 @@ export default {
label: 'Filter',
component: FilterDoc
},
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{
id: 'template',
label: 'Template',

23
packages/themes/types/button/index.d.ts vendored
View File

@ -1189,6 +1189,29 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
*/
color?: string;
};
/**
* Contrast of text
*/
contrast?: {
/**
* Contrast hover background of text
*
* @designToken button.text.contrast.hover.background
*/
hoverBackground?: string;
/**
* Contrast active background of text
*
* @designToken button.text.contrast.active.background
*/
activeBackground?: string;
/**
* Contrast color of text
*
* @designToken button.text.contrast.color
*/
color?: string;
};
/**
* Plain of text
*/