feat(default-theme): slugify filter type filename

packages/default-theme/src/components/listing/NoFilterFound.vue

@@ -4,31 +4,37 @@
       <span class="sf-alert__message">
         {{ $t("Filter") }}
         <b>
-          {{ filter.label }}
+          {{ filterLabel }}
         </b>
         {{ $t("is not implemented! Please add new filter to") }}
-        `src/components/listing/types/{{ filter.label }}.vue`
+        `src/components/listing/types/{{ filterCode }}.vue`
       </span>
     </template>
   </SfAlert>
 </template>
 
 <script>
 import { SfAlert } from "@storefront-ui/vue"
+import { simplifyString } from "@/helpers"
 
 export default {
   components: {
     SfAlert,
   },
   name: "NoFilterFound",
-  data() {
-    return {}
-  },
   props: {
     filter: {
       type: Object,
       default: () => ({}),
     },
   },
+  computed: {
+    filterLabel() {
+      return this.filter.label
+    },
+    filterCode() {
+      return simplifyString(this.filter.label)
+    },
+  },
 }
 </script>

packages/default-theme/src/components/listing/SwProductListingFilter.vue

@@ -15,6 +15,7 @@
 <script>
 import { SfFilter } from "@storefront-ui/vue"
 import NoFilterFound from "@/components/listing/NoFilterFound.vue"
+import { simplifyString } from "@/helpers"
 
 export default {
   name: "SwProductListingFilter",
@@ -43,16 +44,16 @@ export default {
     getComponent() {
       try {
         return () => ({
-          component: import(
-            "@/components/listing/types/" +
-              this.filter.label.toLowerCase(".vue")
-          ),
+          component: import(`@/components/listing/types/${this.filterCode}`),
           error: NoFilterFound,
         })
       } catch (e) {
         console.error("SwProductListingFilter:getComponent", e)
       }
     },
+    filterCode() {
+      return simplifyString(this.filter.label.toLowerCase(".vue"))
+    },
     selectedValues() {
       return this.selectedFilters || []
     },