Material datepicker
Cagatay Civici
parent
f6fc6cc435
commit
2e98080f37
|
|
@ -9,7 +9,7 @@
|
|||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value2" inputId="in_label" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="in_label">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="value" inputId="date" showIcon iconDisplay="input" variant="filled" />
|
||||
<label for="date">Date</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,15 +13,18 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
date1: null,
|
||||
date2: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,7 +32,8 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null
|
||||
date1: null,
|
||||
date2: null
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -36,15 +41,17 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<DatePicker v-model="date" :invalid="date === null" />
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<DatePicker v-model="date1" :invalid="!date1" />
|
||||
<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const date = ref();
|
||||
const date1 = ref(null);
|
||||
const date2 = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,6 +106,11 @@ export default {
|
|||
label: 'Inline',
|
||||
component: InlineDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'floatlabel',
|
||||
label: 'Float Label',
|
||||
|
|
@ -116,11 +121,6 @@ export default {
|
|||
label: 'Ifta Label',
|
||||
component: IftaLabelDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@ export default {
|
|||
style: ({ dt }) => `
|
||||
.p-autocomplete-dropdown:focus-visible {
|
||||
background: ${dt('autocomplete.dropdown.hover.background')};
|
||||
border-color: ${dt('autocomplete.dropdown.hover.border.color')};
|
||||
color: ${dt('autocomplete.dropdown.hover.color')};
|
||||
}
|
||||
|
||||
.p-variant-filled.p-autocomplete-input-multiple {
|
||||
|
|
|
|||
|
|
@ -14,26 +14,26 @@ export default {
|
|||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}',
|
||||
padding: '0 0 0.5rem 0',
|
||||
padding: '0 0 0.75rem 0',
|
||||
fontWeight: '500',
|
||||
gap: '0.5rem'
|
||||
},
|
||||
title: {
|
||||
gap: '0.5rem',
|
||||
fontWeight: '500'
|
||||
fontWeight: '700'
|
||||
},
|
||||
dropdown: {
|
||||
width: '2.5rem',
|
||||
width: '3rem',
|
||||
borderColor: '{form.field.border.color}',
|
||||
hoverBorderColor: '{form.field.border.color}',
|
||||
activeBorderColor: '{form.field.border.color}',
|
||||
borderRadius: '{form.field.border.radius}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
width: '0',
|
||||
style: 'none',
|
||||
color: 'unset',
|
||||
offset: '0',
|
||||
shadow: 'nıne'
|
||||
}
|
||||
},
|
||||
inputIcon: {
|
||||
|
|
@ -43,14 +43,14 @@ export default {
|
|||
hoverBackground: '{content.hover.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}',
|
||||
padding: '0.25rem 0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
borderRadius: '{content.border.radius}'
|
||||
},
|
||||
selectYear: {
|
||||
hoverBackground: '{content.hover.background}',
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}',
|
||||
padding: '0.25rem 0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
borderRadius: '{content.border.radius}'
|
||||
},
|
||||
group: {
|
||||
|
|
@ -58,11 +58,11 @@ export default {
|
|||
gap: '{overlay.popover.padding}'
|
||||
},
|
||||
dayView: {
|
||||
margin: '0.5rem 0 0 0'
|
||||
margin: '0.75rem 0 0 0'
|
||||
},
|
||||
weekDay: {
|
||||
padding: '0.25rem',
|
||||
fontWeight: '500',
|
||||
padding: '0.5rem',
|
||||
fontWeight: '700',
|
||||
color: '{content.color}'
|
||||
},
|
||||
date: {
|
||||
|
|
@ -73,10 +73,10 @@ export default {
|
|||
hoverColor: '{content.hover.color}',
|
||||
selectedColor: '{primary.contrast.color}',
|
||||
rangeSelectedColor: '{highlight.color}',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
width: '2.5rem',
|
||||
height: '2.5rem',
|
||||
borderRadius: '50%',
|
||||
padding: '0.25rem',
|
||||
padding: '0.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
|
|
@ -86,23 +86,23 @@ export default {
|
|||
}
|
||||
},
|
||||
monthView: {
|
||||
margin: '0.5rem 0 0 0'
|
||||
margin: '0.75rem 0 0 0'
|
||||
},
|
||||
month: {
|
||||
borderRadius: '{content.border.radius}'
|
||||
},
|
||||
yearView: {
|
||||
margin: '0.5rem 0 0 0'
|
||||
margin: '0.75rem 0 0 0'
|
||||
},
|
||||
year: {
|
||||
borderRadius: '{content.border.radius}'
|
||||
},
|
||||
buttonbar: {
|
||||
padding: '0.5rem 0 0 0',
|
||||
padding: '0.75rem 0 0 0',
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
timePicker: {
|
||||
padding: '0.5rem 0 0 0',
|
||||
padding: '0.75rem 0 0 0',
|
||||
borderColor: '{content.border.color}',
|
||||
gap: '0.5rem',
|
||||
buttonGap: '0.25rem'
|
||||
|
|
@ -136,5 +136,43 @@ export default {
|
|||
color: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
style: ({ dt }) => `
|
||||
.p-datepicker-header {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.p-datepicker-title {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-datepicker-prev-button {
|
||||
order: 2;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-next-button {
|
||||
order: 2;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.p-datepicker-select-month:focus-visible {
|
||||
background: ${dt('datepicker.select.month.hover.background')};
|
||||
color: ${dt('datepicker.select.month.hover.color')};
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
.p-datepicker-select-year:focus-visible {
|
||||
background: ${dt('datepicker.select.year.hover.background')};
|
||||
color: ${dt('datepicker.select.year.hover.color')};
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
.p-datepicker-dropdown:focus-visible {
|
||||
outline: 0 none;
|
||||
background: ${dt('datepicker.dropdown.hover.background')};
|
||||
border-color: ${dt('datepicker.dropdown.hover.border.color')};
|
||||
color: ${dt('datepicker.dropdown.hover.color')};
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue