Merge branch 'master' of https://github.com/primefaces/primevue

2024-09-30 12:49:09 +03:00 · 2024-09-30 12:49:09 +03:00 · e935eeba02
parent 25406db458 2e98080f37
commit e935eeba02
6 changed files with 91 additions and 44 deletions
--- a/apps/showcase/doc/datepicker/FloatLabelDoc.vue
+++ b/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>

--- a/apps/showcase/doc/datepicker/IftaLabelDoc.vue
+++ b/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>
--- a/apps/showcase/doc/datepicker/InvalidDoc.vue
+++ b/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">
-        <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>
 `
            }
--- a/apps/showcase/pages/datepicker/index.vue
+++ b/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',
--- a/packages/themes/src/presets/material/autocomplete/index.js
+++ b/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 {
--- a/packages/themes/src/presets/material/datepicker/index.js
+++ b/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}',
-            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')};
+}
+`
 };