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

View File

@ -9,7 +9,7 @@
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -36,7 +36,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -54,7 +54,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -86,7 +86,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>

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">
<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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -43,7 +43,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -61,7 +61,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -100,7 +100,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-56" variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>

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">
<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> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -26,7 +26,7 @@ export default {
code: { code: {
basic: ` basic: `
<IftaLabel> <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> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>
`, `,
@ -34,7 +34,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">
<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> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -61,7 +61,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">
<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> <label for="dd-city">City</label>
</IftaLabel> </IftaLabel>
</div> </div>

View File

@ -2,8 +2,9 @@
<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">
<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" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,7 +13,8 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null, selectedCity1: null,
selectedCity2: null,
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -22,12 +24,14 @@ export default {
], ],
code: { code: {
basic: ` 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: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<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" />
</div> </div>
</template> </template>
@ -35,7 +39,8 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCity: null, selectedCity1: null,
selectedCity2: null,
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -50,15 +55,17 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<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" />
</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 cities = ref([ const cities = ref([
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },

View File

@ -82,6 +82,11 @@ export default {
label: 'Lazy Virtual Scroll', label: 'Lazy Virtual Scroll',
component: LazyVirtualScrollDoc component: LazyVirtualScrollDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'floatlabel', id: 'floatlabel',
label: 'Float Label', label: 'Float Label',
@ -92,11 +97,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',

View File

@ -37,6 +37,10 @@ const theme = ({ dt }) => `
background: ${dt('inputtext.filled.background')}; 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 { .p-inputtext.p-variant-filled:enabled:focus {
background: ${dt('inputtext.filled.focus.background')}; background: ${dt('inputtext.filled.focus.background')};
} }

View File

@ -30,7 +30,11 @@ const theme = ({ dt }) => `
background: ${dt('select.filled.background')}; 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')}; background: ${dt('select.filled.focus.background')};
} }

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}',
@ -69,5 +70,49 @@ export default {
}, },
emptyMessage: { emptyMessage: {
padding: '{list.option.padding}' 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')});
}
`
}; };