feat(steps): add root variantClass prop | update examples (#1049)

oruga-ui · Sep 17, 2024 · d795946 · d795946
1 parent 67f7ac7
commit d795946
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/packages/oruga/src/components/steps/Steps.vue b/packages/oruga/src/components/steps/Steps.vue
@@ -150,6 +150,11 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
+    /** Class of the steps variant */
+    variantClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
     /** Class of the tooltip trigger */
     verticalClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
@@ -372,6 +377,12 @@ const rootClasses = defineClasses(
         computed(() => props.size),
         computed(() => !!props.size),
     ],
+    [
+        "variantClass",
+        "o-steps--",
+        computed(() => props.variant),
+        computed(() => !!props.variant),
+    ],
     [
         "verticalClass",
         "o-steps__wrapper-vertical",
@@ -382,12 +393,12 @@ const rootClasses = defineClasses(
         "positionClass",
         "o-steps__wrapper-position-",
         computed(() => props.position),
-        computed(() => props.position && props.vertical),
+        computed(() => !!props.position && props.vertical),
     ],
     ["mobileClass", "o-steps--mobile", null, isMobile],
 );
 
-const wrapperClasses = defineClasses(
+const listClasses = defineClasses(
     ["stepsClass", "o-steps"],
     [
         "animatedClass",
@@ -438,8 +449,8 @@ function stepLinkClasses(childItem: StepItem): ClassBind[] {
         [
             "stepLinkLabelPositionClass",
             "o-steps__link-label-",
-            props.labelPosition,
-            !!props.labelPosition,
+            computed(() => props.labelPosition),
+            computed(() => !!props.labelPosition),
         ],
         [
             "stepLinkClickableClass",
@@ -482,7 +493,7 @@ function itemClasses(childItem: (typeof items.value)[number]): ClassBind[] {
 
 <template>
     <div :class="rootClasses" data-oruga="steps">
-        <ol :class="wrapperClasses">
+        <ol :class="listClasses">
             <li
                 v-for="(childItem, index) in items"
                 v-show="childItem.visible"

diff --git a/packages/oruga/src/components/steps/examples/base.vue b/packages/oruga/src/components/steps/examples/base.vue
@@ -102,6 +102,7 @@ const onProfileActivate = () => {
             :icon-prev="prevIcon"
             :icon-next="nextIcon"
             :label-position="labelPosition"
+            :position="stepsPosition"
             destroy-on-hide>
             <o-step-item
                 value="1"

diff --git a/packages/oruga/src/components/steps/examples/index.vue b/packages/oruga/src/components/steps/examples/index.vue
@@ -5,6 +5,9 @@ import BaseCode from "./base.vue?raw";
 import Variants from "./variants.vue";
 import VariantsCode from "./variants.vue?raw";
 
+import Sizes from "./sizes.vue";
+import SizesCode from "./sizes.vue?raw";
+
 import Vertical from "./vertical.vue";
 import VerticalCode from "./vertical.vue?raw";
 </script>
@@ -16,6 +19,9 @@ import VerticalCode from "./vertical.vue?raw";
     <h3 id="variants">Variants</h3>
     <ExampleViewer :component="Variants" :code="VariantsCode" />
 
+    <h3 id="sizes">Sizes</h3>
+    <ExampleViewer :component="Sizes" :code="SizesCode" />
+
     <h3 id="vertical">Vertical</h3>
     <ExampleViewer :component="Vertical" :code="VerticalCode" />
 </template>
diff --git a/packages/oruga/src/components/steps/examples/sizes.vue b/packages/oruga/src/components/steps/examples/sizes.vue
@@ -0,0 +1,35 @@
+<template>
+    <section>
+        <o-field label="Small">
+            <o-steps size="small">
+                <o-step-item label="Account" icon="user-lock" />
+                <o-step-item label="Profile" icon="user" />
+                <o-step-item label="Social" icon="user-plus" />
+            </o-steps>
+        </o-field>
+
+        <o-field label="Default">
+            <o-steps>
+                <o-step-item label="Account" icon="user-lock" />
+                <o-step-item label="Profile" icon="user" />
+                <o-step-item label="Social" icon="user-plus" />
+            </o-steps>
+        </o-field>
+
+        <o-field label="Medium">
+            <o-steps size="medium">
+                <o-step-item label="Account" icon="user-lock" />
+                <o-step-item label="Profile" icon="user" />
+                <o-step-item label="Social" icon="user-plus" />
+            </o-steps>
+        </o-field>
+
+        <o-field label="Large">
+            <o-steps size="large">
+                <o-step-item label="Account" icon="user-lock" />
+                <o-step-item label="Profile" icon="user" />
+                <o-step-item label="Social" icon="user-plus" />
+            </o-steps>
+        </o-field>
+    </section>
+</template>
diff --git a/packages/oruga/src/components/tabs/examples/vertical.vue b/packages/oruga/src/components/tabs/examples/vertical.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const expanded = ref(false);
 const atRight = ref(false);
+const expanded = ref(false);
 const size = ref(null);
 const type = ref("default");
 </script>

diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
@@ -1072,6 +1072,8 @@ but will set body to position fixed, might break some layouts. */
                 stepsClass: ClassDefinition;
                 /** Class of the Steps markers trigger when are rounded */
                 stepMarkerRoundedClass: ClassDefinition;
+                /** Class of the steps variant */
+                variantClass: ClassDefinition;
                 /** Class of the tooltip trigger */
                 verticalClass: ClassDefinition;
                 /** Color of the control */