refactor: add review changes

packages/docs/components/Pagination.md

@@ -2,7 +2,7 @@
 
 <div class="vp-doc">
 
-The **Pagination** component ia responsive and flexible way to indicate a series of related content exists across multiple pages.
+The **Pagination** component is responsive and flexible way to indicate a series of related content exists across multiple pages.
 
 </div>
 

packages/oruga/src/components/autocomplete/examples/index.vue

@@ -54,7 +54,7 @@ import ScrollCode from "./scroll.vue?raw";
             <p>
                 The <code>options</code> prop works the same as the
                 <a href="/components/select.html">
-                    <b>select</b>
+                    <b>Select</b>
                 </a>
                 input component <code>options</code> prop.
             </p>

packages/oruga/src/components/dropdown/examples/index.vue

@@ -32,9 +32,8 @@ import PositionCode from "./position.vue?raw";
 
         <h3 id="triggers">Triggers</h3>
         <p>
-            The dropdown component accepts several different trigger variants,
-            such as open on hover or open only on right click instead of left
-            click.
+            The component accepts several different trigger variants, such as
+            open on hover or open only on right click instead of left click.
         </p>
         <p>
             Adding the <code>teleport</code> prop will move the dropdown menu to
@@ -70,7 +69,7 @@ import PositionCode from "./position.vue?raw";
             <p>
                 The <code>options</code> prop works the same as the
                 <a href="/components/select.html">
-                    <b>select</b>
+                    <b>Select</b>
                 </a>
                 input component <code>options</code> prop.
             </p>
@@ -79,8 +78,8 @@ import PositionCode from "./position.vue?raw";
 
         <h3 id="selectable">Selectable</h3>
         <p>
-            Dropdown components with the prop <code>selectable</code> will have
-            options as a selectable list.
+            Components with the prop <code>selectable</code> will have options
+            as a selectable list.
         </p>
         <p>
             Adding the <code>multiple</code> prop will change the
@@ -91,18 +90,18 @@ import PositionCode from "./position.vue?raw";
         <h3 id="inline">Inline</h3>
         <div class="vp-doc">
             <p>
-                Dropdown components with the <code>inline</code> prop set will
-                render the options list directly, and will not have a trigger
-                element rendered.
+                Components with the <code>inline</code> prop set will render the
+                options list directly, and will not have a trigger element
+                rendered.
             </p>
         </div>
         <ExampleViewer :component="Inline" :code="InlineCode" />
 
         <h3 id="modal">Modal</h3>
         <div class="vp-doc">
             <p>
-                The dropdown component can be opened in an <i>modal</i> mode
-                either for mobile or desktop only, or for both, by adding the
+                The content can be opened in an <i>modal</i> mode either for
+                mobile or desktop only, or for both, by adding the
                 <code>mobile-modal</code> and <code>desktop-modal</code> props.
             </p>
         </div>

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

@@ -20,9 +20,7 @@ const inspectData = [
         properties: ["teleport"],
         action: (cmp, data): void => {
             data.teleport = true;
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -31,9 +29,7 @@ const inspectData = [
         warning: "Switch to mobile view to see it in action!",
         specificity: "when <b>mobileClass</b> is applied",
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -42,9 +38,7 @@ const inspectData = [
         specificity:
             "when <b>inlineClass</b> or <b>mobileClass</b> or <b>expandedClass</b> is applied",
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -60,9 +54,7 @@ const inspectData = [
         description: "Class of dropdown menu when active",
         properties: ["inline", "active"],
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -80,19 +72,15 @@ const inspectData = [
         suffixes: ["top-right", "top-left", "bottom-right", "bottom-left"],
         action: (cmp, data): void => {
             data.position = "top-right";
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
         class: "mobileClass",
         description: "Class of dropdown when on mobile",
         warning: "Switch to mobile view to see it in action!",
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -108,19 +96,15 @@ const inspectData = [
         description: "Class of the dropdown item",
         subitem: true,
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
         class: "itemActiveClass",
         description: "Class of the dropdown item when active",
         subitem: true,
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -129,9 +113,7 @@ const inspectData = [
         description: "Class of the dropdown item when disabled",
         properties: ["disabled"],
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
     {
@@ -140,9 +122,7 @@ const inspectData = [
         description: "Class of the dropdown item when clickable",
         properties: ["clickable"],
         action: (): void => {
-            setTimeout((): void => {
-                dropdownbtn.value?.click();
-            }, 300);
+            setTimeout(() => dropdownbtn.value?.click(), 300);
         },
     },
 ];

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

@@ -41,7 +41,7 @@ import SlotsCode from "./slots.vue?raw";
         </p>
         <ExampleViewer :component="Horizontal" :code="HorizontalCode" />
 
-        <h3 id="field-slots">Slots</h3>
+        <h3 id="slots">Slots</h3>
         <p>
             The <code>label</code> and the <code>message</code> can be
             customised using slots if needed.

packages/oruga/src/components/menu/examples/index.vue

@@ -49,7 +49,7 @@ import OptionsCode from "./options.vue?raw";
             <p>
                 The <code>options</code> prop works the same as the
                 <a href="/components/select.html">
-                    <b>select</b>
+                    <b>Select</b>
                 </a>
                 input component <code>options</code> prop.
             </p>

packages/oruga/src/components/modal/examples/component.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import ModalForm from "./_modal-form-async.vue";
 
-const isModalActive = ref(false);
+const isActive = ref(false);
 </script>
 
 <template>
@@ -11,10 +11,10 @@ const isModalActive = ref(false);
             label="Open modal"
             size="medium"
             variant="primary"
-            @click="isModalActive = true" />
+            @click="isActive = true" />
 
         <o-modal
-            v-model:active="isModalActive"
+            v-model:active="isActive"
             :component="ModalForm"
             :props="{
                 title: 'Ship sprockets?',

packages/oruga/src/components/pagination/examples/readme.md

@@ -1 +1 @@
-The **Pagination** component ia responsive and flexible way to indicate a series of related content exists across multiple pages.
+The **Pagination** component is responsive and flexible way to indicate a series of related content exists across multiple pages.

packages/oruga/src/components/select/examples/index.vue

@@ -106,10 +106,9 @@ import WithIconsCode from "./with-icons.vue?raw";
 
         <h3 id="multiple">Multiple</h3>
         <p>
-            The <b>select</b> input also supports a
-            <code>multiple</code> attribute that allows for multi-selection.
-            When used the <code>v-model</code> attribute will be an array of
-            values.
+            The input also supports a <code>multiple</code> attribute that
+            allows multi-selection. When used the <code>v-model</code> attribute
+            will be an array of values.
         </p>
         <div class="info custom-block">
             <p class="custom-block-title">Accessibility Notes</p>

packages/oruga/src/components/taginput/examples/index.vue

@@ -56,7 +56,7 @@ import DisabledCode from "./disabled.vue?raw";
             <p>
                 The <code>options</code> prop works the same as the
                 <a href="/components/select.html">
-                    <b>select</b>
+                    <b>Select</b>
                 </a>
                 input component <code>options</code> prop.
             </p>

packages/oruga/src/components/tooltip/examples/index.vue

@@ -39,7 +39,6 @@ import TriggersCode from "./triggers.vue?raw";
             <code>triggers</code> prop. The action that closes the tooltip can
             be customized using the <code>closaeble</code> prop.
         </p>
-
         <ExampleViewer :component="Triggers" :code="TriggersCode" />
 
         <h3 id="variants">Variants</h3>

packages/oruga/src/components/tooltip/examples/slot.vue

@@ -3,6 +3,7 @@
         <p>
             <o-tooltip position="bottom" multiline>
                 <o-button label="Html Content" />
+
                 <template #content>
                     <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit.
                     <i>Fusce id fermentum quam</i>.
@@ -13,13 +14,14 @@
                 variant="primary"
                 :triggers="['click']"
                 :auto-close="['outside', 'escape']">
+                <o-button label="Action" />
+
                 <template #content>
                     <o-icon icon="heart" variant="danger" />
                     <o-icon icon="thumbs-up" variant="info" />
                     <o-icon icon="thumbs-down" variant="warning" />
                     <o-icon icon="smile-beam" />
                 </template>
-                <o-button label="Action" />
             </o-tooltip>
         </p>
     </section>