feat(steps): add destroyOnHide prop (#934)

oruga-ui · May 28, 2024 · d06ea1e · d06ea1e
1 parent f827079
commit d06ea1e
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 58 deletions.
diff --git a/packages/docs/components/Steps.md b/packages/docs/components/Steps.md
diff --git a/packages/oruga/src/components/steps/StepItem.vue b/packages/oruga/src/components/steps/StepItem.vue
@@ -91,9 +91,9 @@ const props = defineProps({
 });
 
 const emits = defineEmits<{
-    /** on tab item activate event */
+    /** on step item activate event */
     (e: "activate"): void;
-    /** on tab item deactivate event */
+    /** on step item deactivate event */
     (e: "deactivate"): void;
 }>();
 
@@ -170,20 +170,22 @@ const elementClasses = defineClasses(["itemClass", "o-steps__item"]);
         :appear="parent.animateInitially"
         @after-enter="afterEnter"
         @before-leave="beforeLeave">
-        <div
-            v-show="isActive && visible"
-            ref="rootRef"
-            v-bind="$attrs"
-            :class="elementClasses"
-            :data-id="`steps-${item.identifier}`"
-            data-oruga="steps-item"
-            :tabindex="isActive ? 0 : -1"
-            :role="ariaRole"
-            aria-roledescription="item">
-            <!-- 
+        <template v-if="!parent.destroyOnHide || (isActive && visible)">
+            <div
+                v-show="isActive && visible"
+                ref="rootRef"
+                v-bind="$attrs"
+                :class="elementClasses"
+                :data-id="`steps-${item.identifier}`"
+                data-oruga="steps-item"
+                :tabindex="isActive ? 0 : -1"
+                :role="ariaRole"
+                aria-roledescription="item">
+                <!-- 
                 @slot Step item content
             -->
-            <slot />
-        </div>
+                <slot />
+            </div>
+        </template>
     </Transition>
 </template>
diff --git a/packages/oruga/src/components/steps/Steps.vue b/packages/oruga/src/components/steps/Steps.vue
@@ -37,17 +37,17 @@ const props = defineProps({
         default: () => getOption("steps.variant"),
     },
     /**
-     * Tab size
+     * Step size
      * @values small, medium, large
      */
     size: {
         type: String,
         default: () => getOption("steps.size"),
     },
-    /** Show tab in vertical layout */
+    /** Show step in vertical layout */
     vertical: { type: Boolean, default: false },
     /**
-     * Position of the tab
+     * Position of the step
      * @values left, centered, right
      */
     position: {
@@ -78,6 +78,8 @@ const props = defineProps({
      * Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.
      */
     hasNavigation: { type: Boolean, default: true },
+    /** Destroy stepItem on hide */
+    destroyOnHide: { type: Boolean, default: false },
     /** Step navigation is animated */
     animated: {
         type: Boolean,
@@ -90,7 +92,7 @@ const props = defineProps({
     animation: {
         type: Array as PropType<Array<string>>,
         default: () =>
-            getOption("tabs.animation", [
+            getOption("steps.animation", [
                 "slide-next",
                 "slide-prev",
                 "slide-down",
@@ -226,9 +228,9 @@ const emits = defineEmits<{
      */
     (e: "update:modelValue", value: string | number): void;
     /**
-     * on tab change event
-     * @param value {string | number} new tab value
-     * @param value {string | number} old tab value
+     * on step change event
+     * @param value {string | number} new step value
+     * @param value {string | number} old step value
      */
     (e: "change", newValue: string | number, oldValue: string | number): void;
 }>();
@@ -244,6 +246,7 @@ const provideData = computed<StepsComponent>(() => ({
     animated: props.animated,
     animation: props.animation,
     animateInitially: props.animateInitially,
+    destroyOnHide: props.destroyOnHide,
 }));
 
 /** Provide functionalities and data to child item components */
@@ -261,7 +264,7 @@ const items = computed<StepItem[]>(() =>
 
 const vmodel = defineModel<string | number>();
 
-/** When v-model is changed set the new active tab. */
+/** When v-model is changed set the new active step. */
 watch(
     () => props.modelValue,
     (value) => {

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

diff --git a/packages/oruga/src/components/steps/types.ts b/packages/oruga/src/components/steps/types.ts
@@ -23,6 +23,7 @@ export type StepsComponent = {
     animated: boolean;
     animation: string[];
     animateInitially: boolean;
+    destroyOnHide: boolean;
 };
 
 export type StepItem = Omit<ProviderItem, "data"> & StepItemComponent;
diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
@@ -70,16 +70,13 @@ const props = defineProps({
     type: { type: String, default: () => getOption("tabs.type", "default") },
     /** Tabs will be expanded (full-width) */
     expanded: { type: Boolean, default: false },
+    /** Destroy tabItem on hide */
+    destroyOnHide: { type: Boolean, default: false },
     /** Tab will have an animation */
     animated: {
         type: Boolean,
         default: () => getOption("tabs.animated", true),
     },
-    /** Destroy tabItem on hide */
-    destroyOnHide: {
-        type: Boolean,
-        default: false,
-    },
     /**
      * Transition animation name
      * @values [next, prev], [right, left, down, up]

diff --git a/packages/oruga/src/components/tabs/examples/base.vue b/packages/oruga/src/components/tabs/examples/base.vue
@@ -16,7 +16,7 @@ const multiline = ref(false);
             <o-switch v-model="multiline" label="Multiline" />
         </o-field>
 
-        <o-tabs v-model="activeTab" :multiline="multiline">
+        <o-tabs v-model="activeTab" :multiline="multiline" destroy-on-hide>
             <o-tab-item :value="0" label="Pictures" icon="image">
                 hat light is light, if Silvia be not seen? <br />
                 What joy is joy.