feat: enhance oruga options type (#663)

* feat: add oruga options component types * refactor: component classes
oruga-ui · Nov 28, 2023 · 78df3e9 · 78df3e9
1 parent 6e2aa5d
commit 78df3e9
Show file tree

Hide file tree

Showing 114 changed files with 2,482 additions and 647 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/autocomplete/inspector.vue b/packages/docs-next/.vitepress/theme/examples/autocomplete/inspector.vue
@@ -11,53 +11,9 @@ const inspectData = [
         class: "rootClass",
         description: "Class of the root element",
     },
-    {
-        class: "menuClass",
-        description: "Class of the autocomplete menu",
-        action: (cmp) => {
-            const el = cmp.querySelector("input");
-            el.dispatchEvent(new Event("focus"));
-            el.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                    bubbles: true,
-                    cancelable: true,
-                    key: "Q",
-                    char: "Q",
-                    shiftKey: true,
-                }),
-            );
-        },
-    },
-    {
-        class: "expandedClass",
-        description: "Class of the autocomplete menu expanded",
-        properties: ["expanded"],
-        action: (cmp, data) => {
-            data.expanded = true;
-        },
-    },
-    {
-        class: "menuPositionClass",
-        description: "Class of the autocomplete menu position",
-        properties: ["menu-position"],
-        suffixes: ["auto", "top", "bottom"],
-        action: (cmp) => {
-            const el = cmp.querySelector("input");
-            el.dispatchEvent(new Event("focus"));
-            el.dispatchEvent(
-                new KeyboardEvent("keydown", {
-                    bubbles: true,
-                    cancelable: true,
-                    key: "Q",
-                    char: "Q",
-                    shiftKey: true,
-                }),
-            );
-        },
-    },
     {
         class: "itemClass",
-        description: "Class of the menu items.",
+        description: "Class of the menu items",
         action: (cmp) => {
             const el = cmp.querySelector("input");
             el.dispatchEvent(new Event("focus"));
@@ -74,7 +30,7 @@ const inspectData = [
     },
     {
         class: "itemHoverClass",
-        description: "Class of the menu items on hover.",
+        description: "Class of the menu items on hover",
         action: (cmp) => {
             const el = cmp.querySelector("input");
             el.dispatchEvent(new Event("focus"));
@@ -120,7 +76,7 @@ const inspectData = [
     },
     {
         class: "itemGroupTitleClass",
-        description: "Class of the menu items group title.",
+        description: "Class of the menu items group title",
         action: (cmp) => {
             const el = cmp.querySelector("input");
             el.dispatchEvent(new Event("focus"));
@@ -189,7 +145,7 @@ const inspectData = [
     {
         class: "inputClasses",
         realClass: "inputClasses.rootClass",
-        description: "Classes to apply on internal input.",
+        description: "Classes to apply on internal input component",
         componentRef: "Input",
     },
 ];

diff --git a/packages/docs-next/.vitepress/theme/examples/button/inspector.vue b/packages/docs-next/.vitepress/theme/examples/button/inspector.vue
@@ -4,9 +4,16 @@ const inspectData = [
         class: "rootClass",
         description: "Class of the root element",
     },
+    {
+        class: "wrapperClass",
+        description: "Class of the button elements wrapper",
+        action: (cmp, data) => {
+            data.expanded = true;
+        },
+    },
     {
         class: "outlinedClass",
-        description: "Class of the button outlined",
+        description: "Class of the button when outlined",
         properties: ["outlined"],
         suffixes: ["primary", "info", "warning", "danger"],
         action: (cmp, data) => {
@@ -40,13 +47,6 @@ const inspectData = [
             data.expanded = true;
         },
     },
-    {
-        class: "elementsWrapperClass",
-        description: "Class of the button elements wrapper",
-        action: (cmp, data) => {
-            data.expanded = true;
-        },
-    },
     {
         class: "roundedClass",
         description: "Class of the button when rounded",

diff --git a/packages/docs-next/.vitepress/theme/examples/carousel/inspector.vue b/packages/docs-next/.vitepress/theme/examples/carousel/inspector.vue
@@ -23,16 +23,16 @@ const inspectData = [
         },
     },
     {
-        class: "sceneClass",
+        class: "wrapperClass",
         description: "Class of the wrapper element of carousel items",
     },
     {
         class: "itemsClass",
-        description: "Class of slider element",
+        description: "Class of slider items",
     },
     {
         class: "itemsDraggingClass",
-        description: "Class of slider element on drag",
+        description: "Class of slider items on drag",
     },
     {
         class: "arrowIconClass",

diff --git a/packages/docs-next/.vitepress/theme/examples/checkbox/inspector.vue b/packages/docs-next/.vitepress/theme/examples/checkbox/inspector.vue
@@ -8,10 +8,6 @@ const inspectData = [
         class: "labelClass",
         description: "Class of the checkbox label",
     },
-    {
-        class: "checkClass",
-        description: "Class of the checkbox",
-    },
     {
         class: "checkedClass",
         description: "Class of the root element when checked",
@@ -20,14 +16,18 @@ const inspectData = [
         },
     },
     {
-        class: "checkCheckedClass",
-        description: "Class of the checkbox when checked",
+        class: "inputClass",
+        description: "Class of the checkbox input",
+    },
+    {
+        class: "inputCheckedClass",
+        description: "Class of the checkbox input when checked",
         action: (cmp, data) => {
             data.checkbox = true;
         },
     },
     {
-        class: "checkIndeterminateClass",
+        class: "indeterminateClass",
         description: "Class when checkbox is indeterminate",
         properties: ["indeterminate"],
         action: (cmp, data) => {

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue
@@ -79,16 +79,16 @@ const inspectData = [
         },
     },
     {
-        class: "prevBtnClass",
-        description: "Class of the prev. button inside the Datepicker box",
+        class: "prevButtonClass",
+        description: "Class of the prev button inside the Datepicker box",
         specificity: "when <b>mobileClass</b> is applied",
         action: (cmp, data) => {
             data.type = "";
             openDatePicker();
         },
     },
     {
-        class: "nextBtnClass",
+        class: "nextButtonClass",
         description: "Class of the next button inside the Datepicker box",
         specificity: "when <b>mobileClass</b> is applied",
         action: (cmp, data) => {
@@ -374,6 +374,15 @@ const inspectData = [
             openDatePicker();
         },
     },
+    {
+        class: "monthTableClass",
+        description: "Class of the table container when type is month",
+        action: (cmp, data) => {
+            data.type = "month";
+            data.monthClass = "datepicker__,table__month";
+            openDatePicker();
+        },
+    },
     {
         class: "monthCellClass",
         description: "Class of the table cell when type is month",
@@ -459,9 +468,9 @@ const inspectData = [
         },
     },
     {
-        class: "monthCellLastHoveredClass",
+        class: "monthCellWithinHoveredRangeClass",
         description:
-            "Class of the last table cell hovered during range selection when type is month",
+            "Class of the table cell when hovered during range selection and cell is in range when type is month",
         warning: "See it in action selecting a date range",
         action: (cmp, data) => {
             data.range = true;
@@ -472,43 +481,45 @@ const inspectData = [
         },
     },
     {
-        class: "monthCellTodayClass",
+        class: "monthCellLastHoveredClass",
         description:
-            "Class of the table cell of the current day when type is month",
+            "Class of the last table cell hovered during range selection when type is month",
+        warning: "See it in action selecting a date range",
         action: (cmp, data) => {
+            data.range = true;
+            data.inline = true;
             data.type = "month";
             data.monthClass = "datepicker__,table__month";
             openDatePicker();
         },
     },
     {
-        class: "monthCellSelectableClass",
+        class: "monthCellTodayClass",
         description:
-            "Class of the table cell that is selectable when type is month",
+            "Class of the table cell of the current day when type is month",
         action: (cmp, data) => {
             data.type = "month";
             data.monthClass = "datepicker__,table__month";
             openDatePicker();
         },
     },
     {
-        class: "monthCellUnselectableClass",
+        class: "monthCellSelectableClass",
         description:
-            "Class of the table cell that is unselectable when type is month",
+            "Class of the table cell that is selectable when type is month",
         action: (cmp, data) => {
             data.type = "month";
             data.monthClass = "datepicker__,table__month";
             openDatePicker();
         },
     },
     {
-        class: "monthCellNearbyClass",
+        class: "monthCellUnselectableClass",
         description:
-            "Class of the table cell when nearby days (prev/next month) are selectable when type is month",
+            "Class of the table cell that is unselectable when type is month",
         action: (cmp, data) => {
             data.type = "month";
             data.monthClass = "datepicker__,table__month";
-            data.nearbySelectableMonthDays = true;
             openDatePicker();
         },
     },
@@ -533,21 +544,23 @@ const inspectData = [
     {
         class: "inputClasses",
         realClass: "inputClasses.rootClass",
-        description: "Classes to apply on internal input.",
+        description: "Classes to apply on internal input component",
         componentRef: "Input",
     },
     {
         class: "dropdownClasses",
         realClass: "dropdownClasses.rootClass",
-        description: "Classes to apply on dropdown.",
+        description: "Classes to apply on internal dropdown component",
         componentRef: "Dropdown",
         action: () => {
             openDatePicker();
         },
     },
     {
-        class: "selectListClasses",
-        description: "Classes to apply on select list (month and year).",
+        class: "selectClasses",
+        realClass: "selectClasses.rootClass",
+        description:
+            "Classes to apply on internal select component (month and year list)",
         componentRef: "Select",
         action: () => {
             openDatePicker();

diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue
@@ -14,6 +14,17 @@ const inspectData = [
         class: "triggerClass",
         description: "Class of the trigger element",
     },
+    {
+        class: "teleportClass",
+        description: "Class when the dropdown is teleported",
+        properties: ["teleport"],
+        action: (cmp, data) => {
+            data.teleport = true;
+            setTimeout(() => {
+                dropdownbtn.value.click();
+            }, 300);
+        },
+    },
     {
         class: "menuMobileOverlayClass",
         description: "Class of the overlay when on mobile",
@@ -47,7 +58,7 @@ const inspectData = [
     {
         class: "menuActiveClass",
         description: "Class of dropdown menu when active",
-        properties: ["inline"],
+        properties: ["inline", "active"],
         action: () => {
             setTimeout(() => {
                 dropdownbtn.value.click();
@@ -66,7 +77,7 @@ const inspectData = [
         class: "menuPositionClass",
         description: "Class of dropdown menu position",
         properties: ["position"],
-        suffixes: ["top-right", "top-left", "bottom-left"],
+        suffixes: ["top-right", "top-left", "bottom-right", "bottom-left"],
         action: (cmp, data) => {
             data.position = "top-right";
             setTimeout(() => {

diff --git a/packages/docs-next/.vitepress/theme/examples/input/inspector.vue b/packages/docs-next/.vitepress/theme/examples/input/inspector.vue
@@ -59,9 +59,9 @@ const inspectData = [
     {
         class: "counterClass",
         description: "Class of the counter element",
-        properties: ["hasCounter", "maxlength"],
+        properties: ["counter", "maxlength"],
         action: (cmp, data) => {
-            data.hasCounter = true;
+            data.counter = true;
             data.maxlength = 10;
             const el = cmp.querySelector("input");
             el.dispatchEvent(new Event("focus"));

diff --git a/packages/docs-next/.vitepress/theme/examples/loading/inspector.vue b/packages/docs-next/.vitepress/theme/examples/loading/inspector.vue
@@ -30,6 +30,15 @@ const inspectData = [
             loading.value = true;
         },
     },
+    {
+        class: "labelClass",
+        description: "Class for the loading label",
+        action: (cmp, data) => {
+            data.cancelable = true;
+            data.fullPage = false;
+            loading.value = true;
+        },
+    },
     {
         class: "fullPageClass",
         description: "Class for the root element when fullpage",
@@ -53,7 +62,8 @@ const inspectData = [
                 v-bind="props"
                 v-model:active="loading"
                 icon="sync-alt"
-                :icon-spin="true">
+                :icon-spin="true"
+                label="Loading...">
             </o-loading>
         </p>
         <b>Click on "Inspect" button to open the loading</b>