feat: typescript config (SWF-310) (#99)

shopware · May 24, 2023 · 4c3ec0e · 4c3ec0e · vercel · May 24, 2023
1 parent e0a452f
commit 4c3ec0e
Show file tree

Hide file tree

Showing 59 changed files with 468 additions and 383 deletions.
diff --git a/.changeset/cyan-candles-jam.md b/.changeset/cyan-candles-jam.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Fix types for `ProductVariantConfigurator.vue`
diff --git a/.changeset/slimy-tables-sin.md b/.changeset/slimy-tables-sin.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Fix closing sidebar for mobile view search
diff --git a/.changeset/sour-glasses-flash.md b/.changeset/sour-glasses-flash.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Upgrade vue-tsc and fix type checks
diff --git a/packages/cms-base/components/SwContactForm.vue b/packages/cms-base/components/SwContactForm.vue
@@ -7,37 +7,37 @@ import {
   useNavigationContext,
 } from "@shopware-pwa/composables-next";
 import { ClientApiError } from "@shopware-pwa/types";
-import deepMerge from '../helpers/deepMerge'
+import deepMerge from "../helpers/deepMerge";
 import getTranslations from "../helpers/getTranslations";
 
 const props = defineProps<{
-    content: CmsElementForm;
-  }>()
+  content: CmsElementForm;
+}>();
 
 type Translations = {
   form: {
-    salutation: string
-    salutationPlaceholder: string,
-    firstName: string
-    firstNamePlaceholder: string
-    lastName: string
-    lastNamePlaceholder: string
-    email: string
-    emailPlaceholder: string
-    phone: string
-    phonePlaceholder: string
-    subject: string
-    subjectPlaceholder: string
-    comment: string
-    commentPlaceholder: string
-    privacy: string
-    dataProtection: string
-    submit: string
+    salutation: string;
+    salutationPlaceholder: string;
+    firstName: string;
+    firstNamePlaceholder: string;
+    lastName: string;
+    lastNamePlaceholder: string;
+    email: string;
+    emailPlaceholder: string;
+    phone: string;
+    phonePlaceholder: string;
+    subject: string;
+    subjectPlaceholder: string;
+    comment: string;
+    commentPlaceholder: string;
+    privacy: string;
+    dataProtection: string;
+    submit: string;
     messages: {
-      contactFormSuccess: string
-    }
-  }
-}
+      contactFormSuccess: string;
+    };
+  };
+};
 
 let translations: Translations = {
   form: {
@@ -59,14 +59,14 @@ let translations: Translations = {
     dataProtection: "I have read the data protection information.",
     submit: "Submit",
     messages: {
-      contactFormSuccess: "We have received your contact request and will process it as soon as possible."
-    }
-  }
-}
-
-const globalTranslations = getTranslations()
-translations = deepMerge(translations, globalTranslations) as Translations
+      contactFormSuccess:
+        "We have received your contact request and will process it as soon as possible.",
+    },
+  },
+};
 
+const globalTranslations = getTranslations();
+translations = deepMerge(translations, globalTranslations) as Translations;
 
 const loading = ref<boolean>();
 const formSent = ref<boolean>(false);
@@ -166,7 +166,7 @@ const invokeSubmit = async () => {
     <template v-if="!formSent">
       <div class="grid grid-cols-12 gap-5">
         <div class="col-span-4">
-          <label for="salutation">{{translations.form.salutation}} *</label>
+          <label for="salutation">{{ translations.form.salutation }} *</label>
           <select
             id="salutation"
             name="salutation"
@@ -179,7 +179,9 @@ const invokeSubmit = async () => {
             v-model="state.salutationId"
             @blur="$v.salutationId.$touch()"
           >
-            <option disabled selected value="">{{translations.form.salutationPlaceholder}}</option>
+            <option disabled selected value="">
+              {{ translations.form.salutationPlaceholder }}
+            </option>
             <option
               v-for="salutation in getSalutations"
               :key="salutation.id"
@@ -220,7 +222,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div class="col-span-4">
-          <label for="last-name">{{translations.form.lastName}} *</label>
+          <label for="last-name">{{ translations.form.lastName }} *</label>
           <input
             id="last-name"
             name="last-name"
@@ -268,7 +270,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div class="col-span-6">
-          <label for="phone">{{translations.form.phone}} *</label>
+          <label for="phone">{{ translations.form.phone }} *</label>
           <input
             id="phone"
             name="phone"
@@ -292,7 +294,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div class="col-span-12">
-          <label for="subject">{{translations.form.subject}} *</label>
+          <label for="subject">{{ translations.form.subject }} *</label>
           <input
             id="subject"
             name="subject"
@@ -316,7 +318,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div class="col-span-12">
-          <label for="comment">{{translations.form.comment}} *</label>
+          <label for="comment">{{ translations.form.comment }} *</label>
           <textarea
             id="comment"
             name="comment"
@@ -341,7 +343,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div class="col-span-12">
-          <label>{{translations.form.privacy }} *</label>
+          <label>{{ translations.form.privacy }} *</label>
           <div class="flex gap-3 items-start">
             <input
               id="privacy"
@@ -358,7 +360,7 @@ const invokeSubmit = async () => {
                 :class="[$v.checkbox.$error ? 'text-red-600' : '']"
                 for="privacy"
               >
-                {{translations.form.dataProtection}}
+                {{ translations.form.dataProtection }}
               </label>
             </div>
           </div>
@@ -370,7 +372,7 @@ const invokeSubmit = async () => {
           type="submit"
           :disabled="loading"
         >
-          {{translations.form.submit }}
+          {{ translations.form.submit }}
         </button>
       </div>
     </template>

diff --git a/packages/cms-base/components/SwNewsletterForm.vue b/packages/cms-base/components/SwNewsletterForm.vue
@@ -3,36 +3,35 @@ import { useVuelidate } from "@vuelidate/core";
 import { required, email } from "@vuelidate/validators";
 import { CmsElementForm } from "@shopware-pwa/composables-next";
 import { ClientApiError } from "@shopware-pwa/types";
-import deepMerge from '../helpers/deepMerge'
+import deepMerge from "../helpers/deepMerge";
 import getTranslations from "../helpers/getTranslations";
 
-const props = 
-  defineProps<{
-    content: CmsElementForm;
-  }>()
+const props = defineProps<{
+  content: CmsElementForm;
+}>();
 
 type Translations = {
   form: {
-    subscribeLabel: string
-    unsubscribeLabel: string
-    action: string
-    email: string
-    emailPlaceholder: string
-    salutation: string
-    salutationPlaceholder: string
-    firstName: string
-    firstNamePlaceholder: string
-    lastName: string
-    lastNamePlaceholder: string
-    privacy: string
-    privacyLabel: string
-    submit: string
-    newsletterBenefits: string
-  }
-}
+    subscribeLabel: string;
+    unsubscribeLabel: string;
+    action: string;
+    email: string;
+    emailPlaceholder: string;
+    salutation: string;
+    salutationPlaceholder: string;
+    firstName: string;
+    firstNamePlaceholder: string;
+    lastName: string;
+    lastNamePlaceholder: string;
+    privacy: string;
+    privacyLabel: string;
+    submit: string;
+    newsletterBenefits: string;
+  };
+};
 
 let translations: Translations = {
-     form: {
+  form: {
     subscribeLabel: "Subscribe to newsletter",
     unsubscribeLabel: "Unsubscribe from newsletter",
     action: "Action",
@@ -47,12 +46,13 @@ let translations: Translations = {
     privacy: "Privacy",
     privacyLabel: "I have read the data protection information.",
     submit: "Submit",
-    newsletterBenefits: "Be aware of upcoming sales and events.Receive gifts and special offers!"
-  }
-}
+    newsletterBenefits:
+      "Be aware of upcoming sales and events.Receive gifts and special offers!",
+  },
+};
 
-const globalTranslations = getTranslations()
-translations = deepMerge(translations, globalTranslations) as Translations
+const globalTranslations = getTranslations();
+translations = deepMerge(translations, globalTranslations) as Translations;
 
 const loading = ref<boolean>();
 const formSent = ref<boolean>(false);
@@ -159,7 +159,7 @@ const invokeSubmit = async () => {
     <template v-if="!formSent">
       <div class="grid grid-cols-12 gap-5">
         <div class="col-span-12">
-          <label for="option">{{translations.form.action}} *</label>
+          <label for="option">{{ translations.form.action }} *</label>
           <select
             id="option"
             name="option"
@@ -176,7 +176,7 @@ const invokeSubmit = async () => {
           </select>
         </div>
         <div class="col-span-12">
-          <label for="email-address">{{translations.form.email}} *</label>
+          <label for="email-address">{{ translations.form.email }} *</label>
           <input
             id="email-address"
             name="email"
@@ -200,7 +200,7 @@ const invokeSubmit = async () => {
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
-          <label for="salutation">{{translations.form.salutation}} *</label>
+          <label for="salutation">{{ translations.form.salutation }} *</label>
           <select
             id="salutation"
             name="salutation"
@@ -213,7 +213,9 @@ const invokeSubmit = async () => {
             v-model="state.salutationId"
             @blur="$v.salutationId.$touch()"
           >
-            <option disabled selected value="">{{ translations.form.salutationPlaceholder }}</option>
+            <option disabled selected value="">
+              {{ translations.form.salutationPlaceholder }}
+            </option>
             <option
               v-for="salutation in getSalutations"
               :key="salutation.id"
@@ -295,7 +297,7 @@ const invokeSubmit = async () => {
                 :class="[$v.checkbox.$error ? 'text-red-600' : '']"
                 for="privacy"
               >
-                {{translations.form.privacyLabel }}
+                {{ translations.form.privacyLabel }}
               </label>
             </div>
           </div>
@@ -307,7 +309,7 @@ const invokeSubmit = async () => {
           type="submit"
           :disabled="loading"
         >
-          {{translations.form.submit }}
+          {{ translations.form.submit }}
         </button>
       </div>
     </template>

diff --git a/packages/cms-base/components/SwPagination.vue b/packages/cms-base/components/SwPagination.vue
@@ -1,30 +1,28 @@
 <script setup lang="ts">
-import deepMerge from '../helpers/deepMerge'
+import deepMerge from "../helpers/deepMerge";
 import getTranslations from "../helpers/getTranslations";
 
-const props = 
-  defineProps<{
-    total: number;
-    current: number;
-
-  }>()
+const props = defineProps<{
+  total: number;
+  current: number;
+}>();
 
 type Translations = {
   listing: {
-    previous: string
-    next: string
-  }
-}
+    previous: string;
+    next: string;
+  };
+};
 
 let translations: Translations = {
   listing: {
     previous: "Previous",
-    next: "Next"
-  }
-}
+    next: "Next",
+  },
+};
 
-const globalTranslations = getTranslations()
-translations = deepMerge(translations, globalTranslations) as Translations
+const globalTranslations = getTranslations();
+translations = deepMerge(translations, globalTranslations) as Translations;
 
 defineEmits<{
   (e: "changePage", page: number): void;
@@ -45,7 +43,7 @@ defineEmits<{
         class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
       >
         <span class="w-10 h-10 i-carbon-chevron-left text-blue-700"></span>
-        <span class="sr-only">{{translations.listing.previous}}</span>
+        <span class="sr-only">{{ translations.listing.previous }}</span>
       </button>
       <button
         v-if="current > 2"
@@ -101,7 +99,7 @@ defineEmits<{
         @click="$emit('changePage', total)"
         class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
       >
-        <span class="sr-only">{{translations.listing.next}}</span>
+        <span class="sr-only">{{ translations.listing.next }}</span>
         <span class="w-10 h-10 i-carbon-chevron-right text-blue-700"></span>
       </button>
     </nav>