feat(storefront): add support for string props | hj | #3315

porsche-design-system · Jun 19, 2024 · 9ce5d76 · 9ce5d76
1 parent 5a501ee
commit 9ce5d76
Showing 1 changed file with 47 additions and 26 deletions.
diff --git a/packages/storefront/src/components/ConfigureProps.vue b/packages/storefront/src/components/ConfigureProps.vue
@@ -1,31 +1,47 @@
 <template>
   <div class="configurator--props">
-    <p-select
-      v-for="[key, value] in Object.entries(componentProps).filter(([key, value]) => !value.isAria && key !== 'theme')"
-      :key="key"
-      :id="key"
-      :label="key"
-      :value="componentProps[key].selectedValue"
-      @update="onUpdateProps($event, key)"
-      :theme="$store.getters.storefrontTheme"
+    <div
+      v-for="[key, value] in Object.entries(componentProps).filter(
+        ([key, value]) => !value.isAria && key !== 'theme' && value.type !== 'string[]'
+      )"
     >
-      <p-select-option
-        v-if="value.allowedValues === 'boolean'"
-        v-for="option in ['true', 'false']"
-        :key="option"
-        :value="option"
+      <p-select
+        v-if="value.allowedValues === 'boolean' || Array.isArray(value.allowedValues)"
+        :key="key"
+        :id="key"
+        :label="key"
+        :required="componentProps[key].isRequired"
+        :value="componentProps[key].selectedValue"
+        @update="onUpdateProps(key, $event.detail.value)"
+        :theme="theme"
       >
-        {{ option }}{{ `${value.defaultValue}` === option ? ' (default)' : '' }}
-      </p-select-option>
-      <p-select-option
-        v-if="Array.isArray(value.allowedValues)"
-        v-for="option in value.allowedValues"
-        :key="option"
-        :value="option"
-      >
-        {{ option }}{{ value.defaultValue == option ? ' (default)' : '' }}
-      </p-select-option>
-    </p-select>
+        <p-select-option
+          v-if="value.allowedValues === 'boolean'"
+          v-for="option in ['true', 'false']"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}{{ `${value.defaultValue}` === option ? ' (default)' : '' }}
+        </p-select-option>
+        <p-select-option
+          v-if="Array.isArray(value.allowedValues)"
+          v-for="option in value.allowedValues"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}{{ value.defaultValue == option ? ' (default)' : '' }}
+        </p-select-option>
+      </p-select>
+      <p-text-field-wrapper v-if="value.allowedValues === 'string'" :label="key" :theme="theme">
+        <input
+          type="text"
+          :name="key"
+          :value="value.selectedValue || ''"
+          @input="onUpdateProps(key, $event.target.value)"
+          :required="componentProps[key].isRequired"
+        />
+      </p-text-field-wrapper>
+    </div>
   </div>
 </template>
 
@@ -34,13 +50,18 @@
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
   import type { ComponentProps } from '@/utils/componentProps';
+  import { PlaygroundTheme } from '@/models';
 
   @Component({})
   export default class ConfigureProps extends Vue {
     @Prop() public componentProps!: ComponentProps;
 
-    onUpdateProps(e: any, key: string) {
-      this.$emit('update', { key, value: e.detail.value });
+    onUpdateProps(key: string, value: string) {
+      this.$emit('update', { key, value });
+    }
+
+    public get theme(): PlaygroundTheme {
+      return this.$store.getters.playgroundTheme || 'light';
     }
   }
 </script>