refactor(storefront): extract dir select into separate component | hj |

#3315

packages/storefront/src/components/DirSelect.vue

@@ -0,0 +1,22 @@
+<template>
+  <p-select-wrapper class="select" :theme="$store.getters.storefrontTheme" label="Direction" hide-label="true">
+    <select name="dir" :value="dir" @change="$emit('update', $event)">
+      <option disabled>Select direction</option>
+      <option value="ltr">LTR (left-to-right)</option>
+      <option value="rtl">RTL (right-to-left)</option>
+      <option value="auto">Auto</option>
+    </select>
+  </p-select-wrapper>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import { Prop } from 'vue-property-decorator';
+  import { PlaygroundTheme } from '@/models';
+  import Component from 'vue-class-component';
+
+  @Component
+  export default class DirSelect extends Vue {
+    @Prop({ default: 'ltr' }) public dir!: PlaygroundTheme;
+  }
+</script>

packages/storefront/src/components/Playground.vue

@@ -1,15 +1,8 @@
 <template>
   <div class="playground">
     <div class="header">
-      <ThemeSelect v-if="mergedConfig.themeable" :theme="selectTheme" v-on:update="switchTheme" :hide-label="true" />
-      <p-select-wrapper class="select" :theme="$store.getters.storefrontTheme" label="Direction" hide-label="true">
-        <select name="dir" v-model="selectDir" v-on:change="switchDir">
-          <option disabled>Select direction</option>
-          <option value="ltr">LTR (left-to-right)</option>
-          <option value="rtl">RTL (right-to-left)</option>
-          <option value="auto">Auto</option>
-        </select>
-      </p-select-wrapper>
+      <ThemeSelect v-if="mergedConfig.themeable" :theme="selectTheme" @update="switchTheme" :hide-label="true" />
+      <DirSelect :dir="selectDir" @update="switchDir" />
     </div>
     <div
       :class="{
@@ -85,6 +78,7 @@
   import type { ExternalDependency, SharedImportKey } from '../utils';
   import { getExternalDependenciesOrThrow } from '@/utils/stackblitz/helper';
   import ThemeSelect from '@/components/ThemeSelect.vue';
+  import DirSelect from '@/components/DirSelect.vue';
 
   export type PlaygroundConfig = {
     themeable: boolean;
@@ -113,6 +107,7 @@
 
   @Component({
     components: {
+      DirSelect,
       ThemeSelect,
       CodeBlock,
       CodeEditor,