Material CascadeSelect and Chip
Cagatay Civici
parent
fb88e07bb2
commit
8d4396863c
|
|
@ -9,7 +9,7 @@
|
|||
</FloatLabel>
|
||||
|
||||
<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>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<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>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<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>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<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>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<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>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<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>
|
||||
</IftaLabel>
|
||||
`,
|
||||
|
|
@ -101,7 +101,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
@ -195,7 +195,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,19 @@
|
|||
<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">
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,7 +23,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -89,14 +101,20 @@ export default {
|
|||
],
|
||||
code: {
|
||||
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" />
|
||||
<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: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,7 +122,8 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
@ -186,16 +205,19 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<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" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const selectedCity1 = ref(null);
|
||||
const selectedCity2 = ref(null);
|
||||
const countries = ref([
|
||||
{
|
||||
name: 'Australia',
|
||||
|
|
|
|||
|
|
@ -48,6 +48,11 @@ export default {
|
|||
label: 'Loading State',
|
||||
component: LoadingStateDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'floatlabel',
|
||||
label: 'Float Label',
|
||||
|
|
@ -58,11 +63,6 @@ export default {
|
|||
label: 'Ifta Label',
|
||||
component: IftaLabelDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
|
|
|
|||
|
|
@ -24,13 +24,17 @@ const theme = ({ dt }) => `
|
|||
border-color: ${dt('cascadeselect.focus.border.color')};
|
||||
box-shadow: ${dt('cascadeselect.focus.ring.shadow')};
|
||||
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 {
|
||||
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 {
|
||||
background: ${dt('cascadeselect.filled.focus.background')};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}',
|
||||
|
|
@ -54,5 +55,53 @@ export default {
|
|||
focusColor: '{list.option.icon.focus.color}',
|
||||
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'
|
||||
)});
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
export default {
|
||||
root: {
|
||||
borderRadius: '16px',
|
||||
borderRadius: '2rem',
|
||||
paddingX: '0.75rem',
|
||||
paddingY: '0.5rem',
|
||||
paddingY: '0.75rem',
|
||||
gap: '0.5rem',
|
||||
transitionDuration: '{transition.duration}'
|
||||
},
|
||||
image: {
|
||||
width: '2rem',
|
||||
height: '2rem'
|
||||
width: '2.25rem',
|
||||
height: '2.25rem'
|
||||
},
|
||||
icon: {
|
||||
size: '1rem'
|
||||
|
|
@ -26,14 +26,14 @@ export default {
|
|||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.100}',
|
||||
color: '{surface.800}'
|
||||
background: '{surface.200}',
|
||||
color: '{surface.900}'
|
||||
},
|
||||
icon: {
|
||||
color: '{surface.800}'
|
||||
color: '{surface.600}'
|
||||
},
|
||||
removeIcon: {
|
||||
color: '{surface.800}'
|
||||
color: '{surface.600}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue