feat(picker): improve date/time picker class drilling (#1044)

packages/oruga/src/components/datepicker/Datepicker.vue

@@ -554,8 +554,8 @@ const listsClasses = defineClasses(["listsClass", "o-dpck__header__list"]);
 
 const footerClasses = defineClasses(["footerClass", "o-dpck__footer"]);
 
-const dropdownClass = defineClasses([
-    "dropdownClasses.rootClass",
+const pickerDropdownClasses = defineClasses([
+    "dropdownClass",
     "o-tpck__dropdown",
 ]);
 
@@ -581,8 +581,8 @@ defineExpose({ focus: () => pickerRef.value?.focus(), value: vmodel });
         :max="maxDate"
         :min="minDate"
         :stay-open="props.multiple"
-        :dropdown-classes="dropdownClass"
         :root-classes="rootClasses"
+        :dropdown-classes="pickerDropdownClasses"
         :box-class="boxClassBind"
         :dtf="dtf"
         @focus="$emit('focus', $event)"
@@ -612,7 +612,6 @@ defineExpose({ focus: () => pickerRef.value?.focus(), value: vmodel });
                         :aria-label="ariaPreviousLabel"
                         :icon-pack="iconPack"
                         :icon-left="iconPrev"
-                        outlined
                         @click.prevent="prev"
                         @keydown.enter.prevent="prev"
                         @keydown.space.prevent="prev" />
@@ -624,7 +623,6 @@ defineExpose({ focus: () => pickerRef.value?.focus(), value: vmodel });
                         :aria-label="ariaNextLabel"
                         :icon-pack="iconPack"
                         :icon-left="iconNext"
-                        outlined
                         @click.prevent="next"
                         @keydown.enter.prevent="next"
                         @keydown.space.prevent="next" />

packages/oruga/src/components/datepicker/examples/trigger.vue

@@ -10,7 +10,7 @@ const selectedString = computed(() =>
 <template>
     <section>
         <o-field label="Select a date" grouped>
-            <o-datepicker v-model="selected">
+            <o-datepicker v-model="selected" teleport>
                 <template #trigger>
                     <o-button icon-left="calendar" type="primary" />
                 </template>

packages/oruga/src/components/datepicker/props.ts

@@ -259,6 +259,10 @@ type DatepickerClasses = Partial<{
     monthCellEventsClass: ComponentClass;
     /** Class of the Datepicker when on mobile */
     mobileClass: ComponentClass;
+    /** Class for the underlaying dropdown component */
+    dropdownClass: ComponentClass;
+    /** Class for the HTML input element */
+    inputClass: ComponentClass;
     /**
      * Class configuration for the internal input component
      * @ignore

packages/oruga/src/components/datepicker/tests/__snapshots__/datepicker.test.ts.snap

@@ -33,10 +33,10 @@ exports[`ODatepicker > render correctly 1`] = `
             <!--
                 @slot Override the header
             -->
-            <div class="o-dpck__header__buttons"><button type="button" class="o-btn o-btn--outlined o-dpck__header__previous" role="button" data-oruga="button" aria-label="Previous Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span>
+            <div class="o-dpck__header__buttons"><button type="button" class="o-btn o-dpck__header__previous" role="button" data-oruga="button" aria-label="Previous Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span>
                 <!--v-if-->
                 <!--v-if--></span>
-              </button><button type="button" class="o-btn o-btn--outlined o-dpck__header__next" role="button" data-oruga="button" aria-label="Next Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span>
+              </button><button type="button" class="o-btn o-dpck__header__next" role="button" data-oruga="button" aria-label="Next Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span>
                 <!--v-if-->
                 <!--v-if--></span>
               </button>

packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap

@@ -33,10 +33,10 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
             <!--
                 @slot Override the header
             -->
-            <div class="o-dpck__header__buttons"><button type="button" class="o-btn o-btn--outlined o-dpck__header__previous" role="button" data-oruga="button" aria-label="Previous Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span>
+            <div class="o-dpck__header__buttons"><button type="button" class="o-btn o-dpck__header__previous" role="button" data-oruga="button" aria-label="Previous Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span>
                 <!--v-if-->
                 <!--v-if--></span>
-              </button><button type="button" class="o-btn o-btn--outlined o-dpck__header__next" role="button" data-oruga="button" aria-label="Next Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span>
+              </button><button type="button" class="o-btn o-dpck__header__next" role="button" data-oruga="button" aria-label="Next Page"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span>
                 <!--v-if-->
                 <!--v-if--></span>
               </button>

packages/oruga/src/components/timepicker/Timepicker.vue

@@ -198,6 +198,16 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
+    /** Class for the underlaying dropdown component */
+    dropdownClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** Class for the HTML input element */
+    inputClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
     /**
      * Class configuration for the internal input component
      * @ignore
@@ -733,8 +743,8 @@ const separatorClasses = defineClasses(["separatorClass", "o-tpck__separtor"]);
 
 const footerClasses = defineClasses(["footerClass", "o-tpck__footer"]);
 
-const dropdownClass = defineClasses([
-    "dropdownClasses.rootClass",
+const pickerDropdownClasses = defineClasses([
+    "dropdownClass",
     "o-tpck__dropdown",
 ]);
 
@@ -760,8 +770,8 @@ defineExpose({ focus: () => pickerRef.value?.focus(), value: vmodel });
         :max="maxTime"
         :min="minTime"
         :step="step"
-        :dropdown-classes="dropdownClass"
         :root-classes="rootClasses"
+        :dropdown-classes="pickerDropdownClasses"
         :box-class="boxClassBind"
         :dtf="dtf"
         @update:value="updateValue"

packages/oruga/src/components/types.ts

@@ -230,6 +230,10 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 inputClasses: Record<string, any>;
                 /** Class configuration for the internal select component */
                 selectClasses: Record<string, any>;
+                /** Class for the HTML input element */
+                inputClass: ClassDefinition;
+                /** Class for the underlaying dropdown component */
+                dropdownClass: ClassDefinition;
                 /** Class of Datepicker header with days of the week inside the table */
                 tableHeadClass: ClassDefinition;
                 /** Class of table cell when it's selected */
@@ -1433,6 +1437,10 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 inputClasses: Record<string, any>;
                 /** Class configuration for the internal select component */
                 selectClasses: Record<string, any>;
+                /** Class for the HTML input element */
+                inputClass: ClassDefinition;
+                /** Class for the underlaying dropdown component */
+                dropdownClass: ClassDefinition;
                 /** Class of the root element */
                 rootClass: ClassDefinition;
                 /** Class of the Timepicker component box where you choose the date */

packages/oruga/src/components/utils/PickerWrapper.vue

@@ -305,11 +305,13 @@ const attrs = useAttrs();
 const inputBind = computed(() => ({
     ...parentField?.value?.inputAttrs,
     ...attrs,
+    inputClass: props.pickerProps.inputClass,
     ...props.pickerProps.inputClasses,
 }));
 
 const dropdownBind = computed(() => ({
     "root-class": getActiveClasses(props.dropdownClasses),
+    "teleport-class": getActiveClasses(props.rootClasses),
     ...props.pickerProps.dropdownClasses,
 }));
 
@@ -330,6 +332,7 @@ defineExpose({ focus: setFocus });
             :disabled="pickerProps.disabled"
             :inline="pickerProps.inline"
             :mobile-modal="pickerProps.mobileModal"
+            :mobile-breakpoint="pickerProps.mobileBreakpoint"
             :trap-focus="pickerProps.trapFocus"
             :aria-role="ariaRole"
             :aria-modal="!pickerProps.inline"