Material datepicker

apps/showcase/doc/datepicker/FloatLabelDoc.vue

@@ -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>
 

apps/showcase/doc/datepicker/IftaLabelDoc.vue

@@ -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>

apps/showcase/doc/datepicker/InvalidDoc.vue

@@ -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">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date" :invalid="date === null" />
+        <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">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date" :invalid="date === null"  />
+        <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">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date" :invalid="date === null"  />
+        <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>
 `
             }

apps/showcase/pages/datepicker/index.vue

@@ -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',

packages/themes/src/presets/material/autocomplete/index.js

@@ -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 {

packages/themes/src/presets/material/datepicker/index.js

@@ -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}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            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',
+        padding: '0.5rem',
-        fontWeight: '500',
+        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',
+        width: '2.5rem',
-        height: '2rem',
+        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')};
+}
+`
 };