fix(storefront): use dynamic component & fix update props | hj | #3315

porsche-design-system · Jun 19, 2024 · 5ffae7e · 5ffae7e
1 parent 23ecdd7
commit 5ffae7e
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/packages/storefront/src/components/PlaygroundConfigurator.vue b/packages/storefront/src/components/PlaygroundConfigurator.vue
@@ -13,7 +13,6 @@
       }"
     >
       <DynamicIframe :markup="markup['vanilla-js']" :theme="theme" :dir="dir" />
-
       <div class="configure">
         <p-accordion
           :theme="theme"
@@ -25,6 +24,7 @@
           <ConfigureProps :component-props="componentProps" @update="onUpdateProps" />
         </p-accordion>
         <p-accordion
+          v-if="componentSlots.length > 1"
           :theme="theme"
           :heading="'Slots'"
           :headingTag="'h3'"
@@ -95,15 +95,16 @@
     }
 
     updateMarkup() {
-      this.markup = getComponentExampleMarkup('p-flyout', this.codeSamples, this.componentProps, this.componentSlots);
+      this.markup = getComponentExampleMarkup(
+        this.component,
+        this.codeSamples,
+        this.componentProps,
+        this.componentSlots
+      );
     }
 
     onUpdateProps({ key, value }: { key: keyof ComponentProps; value: any }) {
-      if (this.componentProps[key].defaultValue === value) {
-        this.componentProps[key].selectedValue = undefined;
-      } else {
-        this.componentProps[key].selectedValue = value;
-      }
+      this.componentProps[key].selectedValue = value;
       this.updateMarkup();
     }
 
@@ -153,10 +154,6 @@
   @use '@porsche-design-system/components-js/styles' as *;
   @import '../styles/internal.variables';
 
-  :deep > #stackblitz-embed {
-    height: 600px;
-  }
-
   .playground {
     display: flex;
     flex-direction: column;