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

Material CascadeSelect and Chip

pull/6494/head
Cagatay Civici 2024-09-28 23:54:53 +03:00
parent fb88e07bb2
commit 8d4396863c
7 changed files with 109 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
View File

@ -9,7 +9,7 @@
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in"> <FloatLabel class="w-full md:w-56" variant="in">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -110,7 +110,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56"> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -128,7 +128,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56"> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -234,7 +234,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56"> <FloatLabel class="w-full md:w-56">
<CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>

8
apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
View File

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-56"> <IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="cs_city">City</label> <label for="cs_city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -93,7 +93,7 @@ export default {
code: { code: {
basic: ` basic: `
<IftaLabel class="w-full md:w-56"> <IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="cs_city">City</label> <label for="cs_city">City</label>
</IftaLabel> </IftaLabel>
`, `,
@ -101,7 +101,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-56"> <IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="cs_city">City</label> <label for="cs_city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -195,7 +195,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-56"> <IftaLabel class="w-full md:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" /> <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
<label for="cs_city">City</label> <label for="cs_city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>

42
apps/showcase/doc/cascadeselect/InvalidDoc.vue
View File

@ -2,8 +2,19 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<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-center"> <div class="card flex flex-wrap justify-center gap-4">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
<CascadeSelect
v-model="selectedCity2"
:invalid="!selectedCity2"
:options="countries"
optionLabel="cname"
optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']"
class="w-full sm:w-56"
placeholder="Select a City"
variant="filled"
/>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,7 +23,8 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null, selectedCity1: null,
selectedCity2: null,
countries: [ countries: [
{ {
name: 'Australia', name: 'Australia',
@ -89,14 +101,20 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <div class="card flex flex-wrap justify-center gap-4">
<CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
</div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
</div> </div>
</template> </template>
@ -104,7 +122,8 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCity: null, selectedCity1: null,
selectedCity2: null,
countries: [ countries: [
{ {
name: 'Australia', name: 'Australia',
@ -186,16 +205,19 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const selectedCity = ref(); const selectedCity1 = ref(null);
const selectedCity2 = ref(null);
const countries = ref([ const countries = ref([
{ {
name: 'Australia', name: 'Australia',

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

@ -48,6 +48,11 @@ export default {
label: 'Loading State', label: 'Loading State',
component: LoadingStateDoc component: LoadingStateDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'floatlabel', id: 'floatlabel',
label: 'Float Label', label: 'Float Label',
@ -58,11 +63,6 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

6
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -24,13 +24,17 @@ const theme = ({ dt }) => `
border-color: ${dt('cascadeselect.focus.border.color')}; border-color: ${dt('cascadeselect.focus.border.color')};
box-shadow: ${dt('cascadeselect.focus.ring.shadow')}; box-shadow: ${dt('cascadeselect.focus.ring.shadow')};
outline: ${dt('cascadeselect.focus.ring.width')} ${dt('cascadeselect.focus.ring.style')} ${dt('cascadeselect.focus.ring.color')}; outline: ${dt('cascadeselect.focus.ring.width')} ${dt('cascadeselect.focus.ring.style')} ${dt('cascadeselect.focus.ring.color')};
outline-offset: ${dt('multiscascadeselectelect.focus.ring.offset')}; outline-offset: ${dt('cascadeselect.focus.ring.offset')};
} }
.p-cascadeselect.p-variant-filled { .p-cascadeselect.p-variant-filled {
background: ${dt('cascadeselect.filled.background')}; background: ${dt('cascadeselect.filled.background')};
} }
.p-cascadeselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('cascadeselect.filled.hover.background')};
}
.p-cascadeselect.p-variant-filled.p-focus { .p-cascadeselect.p-variant-filled.p-focus {
background: ${dt('cascadeselect.filled.focus.background')}; background: ${dt('cascadeselect.filled.focus.background')};
} }

49
packages/themes/src/presets/material/cascadeselect/index.js
View File

@ -3,6 +3,7 @@ export default {
background: '{form.field.background}', background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}', filledBackground: '{form.field.filled.background}',
filledHoverBackground: '{form.field.filled.hover.background}',
filledFocusBackground: '{form.field.filled.focus.background}', filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}', hoverBorderColor: '{form.field.hover.border.color}',
@ -54,5 +55,53 @@ export default {
focusColor: '{list.option.icon.focus.color}', focusColor: '{list.option.icon.focus.color}',
size: '0.875rem' size: '0.875rem'
} }
},
style: ({ dt }) => `
.p-cascadeselect.p-variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: ${dt('cascadeselect.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.border.color')}, ${dt('cascadeselect.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
} }
.p-cascadeselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('cascadeselect.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.hover.border.color')}, ${dt('cascadeselect.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus {
outline: 0 none;
background: ${dt('cascadeselect.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.border.color')}, ${dt('cascadeselect.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus:hover {
background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.hover.border.color')}, ${dt('cascadeselect.hover.border.color')});
}
.p-cascadeselect.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt('cascadeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt(
'cascadeselect.invalid.border.color'
)});
}
.p-select.p-variant-filled.p-invalid:not(.p-disabled).p-focus {
background-image: linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt('cascadeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt(
'cascadeselect.invalid.border.color'
)});
}
`
}; };

16
packages/themes/src/presets/material/chip/index.js
View File

@ -1,14 +1,14 @@
export default { export default {
root: { root: {
borderRadius: '16px', borderRadius: '2rem',
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.5rem', paddingY: '0.75rem',
gap: '0.5rem', gap: '0.5rem',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'
}, },
image: { image: {
width: '2rem', width: '2.25rem',
height: '2rem' height: '2.25rem'
}, },
icon: { icon: {
size: '1rem' size: '1rem'
@ -26,14 +26,14 @@ export default {
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.100}', background: '{surface.200}',
color: '{surface.800}' color: '{surface.900}'
}, },
icon: { icon: {
color: '{surface.800}' color: '{surface.600}'
}, },
removeIcon: { removeIcon: {
color: '{surface.800}' color: '{surface.600}'
} }
}, },
dark: { dark: {