Merge remote-tracking branch 'origin/develop' into dependencies/updat…

…e-vue

packages/docs/components/Tooltip.md

@@ -62,8 +62,8 @@
 
 | Name    | Description                            | Bindings                                    |
 | ------- | -------------------------------------- | ------------------------------------------- |
-| content | Tooltip content, default is label prop |                                             |
 | default | Tooltip trigger slot                   | **active** `boolean` - tooltip active state |
+| content | Tooltip content, default is label prop |                                             |
 
 </div>
 

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/field/Field.vue

@@ -81,6 +81,16 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
+    /** Class for field label when horizontal */
+    horizontalLabelClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** "Class for field body when horizontal */
+    horizontalBodyClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
     /** Class when fields are grouped together */
     groupedClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
@@ -101,8 +111,8 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
-    /** Class for field label when horizontal */
-    labelHorizontalClass: {
+    /** Class of the label field variant */
+    labelVariantClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
@@ -111,11 +121,6 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
-    /** "Class for field body when horizontal */
-    bodyHorizontalClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
     /** Class for components automatically attached together when inside a field */
     addonsClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
@@ -127,12 +132,7 @@ const props = defineProps({
         default: undefined,
     },
     /** Class of the message field variant */
-    variantMessageClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the label field variant */
-    variantLabelClass: {
+    messageVariantClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
@@ -294,7 +294,7 @@ const rootClasses = defineClasses(
 const messageClasses = defineClasses(
     ["messageClass", "o-field__message"],
     [
-        "variantMessageClass",
+        "messageVariantClass",
         "o-field__message-",
         fieldVariant,
         computed(() => !!fieldVariant.value),
@@ -310,22 +310,22 @@ const labelClasses = defineClasses(
         computed(() => !!props.labelSize),
     ],
     [
-        "variantLabelClass",
+        "labelVariantClass",
         "o-field__label-",
         fieldVariant,
         computed(() => !!fieldVariant.value),
     ],
 );
 
-const labelHorizontalClasses = defineClasses([
-    "labelHorizontalClass",
+const bodyClasses = defineClasses(["bodyClass", "o-field__body"]);
+
+const horizontalLabelClasses = defineClasses([
+    "horizontalLabelClass",
     "o-field__horizontal-label",
 ]);
 
-const bodyClasses = defineClasses(["bodyClass", "o-field__body"]);
-
-const bodyHorizontalClasses = defineClasses([
-    "bodyHorizontalClass",
+const horizontalBodyClasses = defineClasses([
+    "horizontalBodyClass",
     "o-field__horizontal-body",
 ]);
 
@@ -350,7 +350,7 @@ const innerFieldClasses = defineClasses(
 
 <template>
     <div ref="rootRef" data-oruga="field" :class="rootClasses">
-        <div v-if="horizontal" :class="labelHorizontalClasses">
+        <div v-if="horizontal" :class="horizontalLabelClasses">
             <label v-if="hasLabel" :for="inputId" :class="labelClasses">
                 <!--
                     @slot Override the label
@@ -369,7 +369,7 @@ const innerFieldClasses = defineClasses(
             </label>
         </template>
 
-        <div v-if="horizontal" :class="bodyHorizontalClasses">
+        <div v-if="horizontal" :class="horizontalBodyClasses">
             <template
                 v-for="(element, index) in getInnerContent($slots.default)"
                 :key="index">

packages/oruga/src/components/field/examples/inspector.vue

@@ -17,7 +17,25 @@ const inspectData = [
         class: "horizontalClass",
         description: "Class to align label and control in horizontal forms",
         properties: ["horizontal"],
-        specificity: "when <b>mobileClass</b> is applied",
+        specificity: "when <b>horizontal</b> is applied",
+        action: (cmp, data) => {
+            data.horizontal = true;
+        },
+    },
+    {
+        class: "horizontalLabelClass",
+        description: "Class for field label when horizontal",
+        properties: ["horizontal"],
+        specificity: "when <b>horizontal</b> is applied",
+        action: (cmp, data) => {
+            data.horizontal = true;
+        },
+    },
+    {
+        class: "horizontalBodyClass",
+        description: "Class for field body when horizontal",
+        specificity: "when <b>horizontal</b> is applied",
+        properties: ["horizontal"],
         action: (cmp, data) => {
             data.horizontal = true;
         },
@@ -52,27 +70,18 @@ const inspectData = [
         },
     },
     {
-        class: "labelHorizontalClass",
-        description: "Class for field label when horizontal",
-        properties: ["horizontal"],
-        specificity: "when <b>mobileClass</b> is applied",
+        class: "labelVariantClass",
+        description: "Class of the label field variant",
+        properties: ["variant"],
+        suffixes: ["primary", "info", "warning", "danger"],
         action: (cmp, data) => {
-            data.horizontal = true;
+            data.variant = "info";
         },
     },
     {
         class: "bodyClass",
         description: "Class for field body",
     },
-    {
-        class: "bodyHorizontalClass",
-        description: "Class for field body when horizontal",
-        specificity: "when <b>mobileClass</b> is applied",
-        properties: ["horizontal"],
-        action: (cmp, data) => {
-            data.horizontal = true;
-        },
-    },
     {
         class: "addonsClass",
         description:
@@ -92,7 +101,7 @@ const inspectData = [
         },
     },
     {
-        class: "variantMessageClass",
+        class: "messageVariantClass",
         description: "Class of the message field variant",
         properties: ["variant"],
         suffixes: ["primary", "info", "warning", "danger"],
@@ -101,15 +110,6 @@ const inspectData = [
             data.message = "This is a message for the field";
         },
     },
-    {
-        class: "variantLabelClass",
-        description: "Class of the label field variant",
-        properties: ["variant"],
-        suffixes: ["primary", "info", "warning", "danger"],
-        action: (cmp, data) => {
-            data.variant = "info";
-        },
-    },
     {
         class: "focusedClass",
         description: "Class for the focused field",

packages/oruga/src/components/input/examples/base.vue

@@ -51,5 +51,17 @@ const name = ref("John Silver");
         <o-field label="Disabled">
             <o-input placeholder="Disabled" disabled />
         </o-field>
+
+        <o-field label="Expanded">
+            <o-input placeholder="Expanded" expanded />
+        </o-field>
+
+        <o-field label="Counter">
+            <o-input
+                placeholder="Counter"
+                :maxlength="10"
+                :maxitems="5"
+                counter />
+        </o-field>
     </section>
 </template>