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

Add material select

pull/6493/head
Cagatay Civici 2024-09-28 16:26:28 +03:00
parent b29f1dad1d
commit fb88e07bb2
8 changed files with 89 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
</FloatLabel>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" autocomplete="off" />
<InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -36,7 +36,7 @@ export default {
</FloatLabel>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<InputText id="in_label" v-model="value2" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -54,7 +54,7 @@ export default {
</FloatLabel>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<InputText id="in_label" v-model="value2" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -86,7 +86,7 @@ export default {
</FloatLabel>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<InputText id="in_label" v-model="value2" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>

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

@ -9,7 +9,7 @@
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in">
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -43,7 +43,7 @@ export default {
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in">
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -61,7 +61,7 @@ export default {
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in">
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
@ -100,7 +100,7 @@ export default {
</FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in">
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>

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

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-56">
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="dd-city">City</label>
</IftaLabel>
</div>
@ -26,7 +26,7 @@ export default {
code: {
basic: `
<IftaLabel>
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="dd-city">City</label>
</IftaLabel>
`,
@ -34,7 +34,7 @@ export default {
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-56">
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="dd-city">City</label>
</IftaLabel>
</div>
@ -61,7 +61,7 @@ export default {
<template>
<div class="card flex justify-center">
<IftaLabel class="w-full md:w-56">
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
<label for="dd-city">City</label>
</IftaLabel>
</div>

27
apps/showcase/doc/select/InvalidDoc.vue
View File

@ -2,8 +2,9 @@
<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>
</DocSectionText>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null" class="w-full md:w-56" />
<div class="card flex flex-wrap justify-center gap-4">
<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
@ -12,7 +13,8 @@
export default {
data() {
return {
selectedCity: null,
selectedCity1: null,
selectedCity2: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
@ -22,12 +24,14 @@ export default {
],
code: {
basic: `
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null" class="w-full md:w-56" />
<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null" class="w-full md:w-56" />
<div class="card flex flex-wrap justify-center gap-4">
<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
</div>
</template>
@ -35,7 +39,8 @@ export default {
export default {
data() {
return {
selectedCity: null,
selectedCity1: null,
selectedCity2: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
@ -50,15 +55,17 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null" class="w-full md:w-56" />
<div class="card flex flex-wrap justify-center gap-4">
<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const selectedCity1 = ref(null);
const selectedCity2 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },

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

@ -82,6 +82,11 @@ export default {
label: 'Lazy Virtual Scroll',
component: LazyVirtualScrollDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'floatlabel',
label: 'Float Label',
@ -92,11 +97,6 @@ export default {
label: 'Ifta Label',
component: IftaLabelDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'invalid',
label: 'Invalid',

4
packages/primevue/src/inputtext/style/InputTextStyle.js
View File

@ -37,6 +37,10 @@ const theme = ({ dt }) => `
background: ${dt('inputtext.filled.background')};
}
.p-inputtext.p-variant-filled:enabled:hover {
border-color: ${dt('inputtext.filled.hover.background')};
}
.p-inputtext.p-variant-filled:enabled:focus {
background: ${dt('inputtext.filled.focus.background')};
}

6
packages/primevue/src/select/style/SelectStyle.js
View File

@ -30,7 +30,11 @@ const theme = ({ dt }) => `
background: ${dt('select.filled.background')};
}
.p-select.p-variant-filled.p-focus {
.p-select.p-variant-filled:not(.p-disabled):hover {
background: ${dt('select.filled.hover.background')};
}
.p-select.p-variant-filled:not(.p-disabled).p-focus {
background: ${dt('select.filled.focus.background')};
}

47
packages/themes/src/presets/material/select/index.js
View File

@ -3,6 +3,7 @@ export default {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledHoverBackground: '{form.field.filled.hover.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
@ -69,5 +70,49 @@ export default {
},
emptyMessage: {
padding: '{list.option.padding}'
}
},
style: ({ dt }) => `
.p-select.p-variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: ${dt('select.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.border.color')}, ${dt('select.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-select.p-variant-filled:not(.p-disabled):hover {
background: ${dt('select.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.hover.border.color')}, ${dt('select.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-select.p-variant-filled:not(.p-disabled).p-focus {
outline: 0 none;
background: ${dt('select.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.border.color')}, ${dt('select.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-select.p-variant-filled:not(.p-disabled).p-focus:hover {
background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.hover.border.color')}, ${dt('select.hover.border.color')});
}
.p-select.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')}), linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')});
}
.p-select.p-variant-filled.p-invalid:not(.p-disabled).p-focus {
background-image: linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')}), linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')});
}
`
};