Merge pull request #189 from lana/fix-default-slot-detection

Fix default slot detection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lana/b2c-mapp-ui",
-  "version": "9.5.0",
+  "version": "9.5.1",
   "description": "Shared custom libraries for building µapps.",
   "bugs": {
     "url": "https://github.com/lana/b2c-mapp-ui/issues"
@@ -48,55 +48,55 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lana/b2c-mapp-ui-assets": "^5.6.0",
-    "libphonenumber-js": "^1.9.42",
+    "@lana/b2c-mapp-ui-assets": "^5.12.0",
+    "libphonenumber-js": "^1.9.46",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.21",
     "vue-contenteditable": "^3.0.4",
-    "vue-currency-input": "^2.1.2"
+    "vue-currency-input": "^2.4.0"
   },
   "peerDependencies": {
     "vue": "^3.2.21"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.16.7",
     "@getify/eslint-plugin-proper-ternary": "^3.1.1",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-controls": "^6.4.9",
-    "@storybook/addon-docs": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-actions": "^6.4.15",
+    "@storybook/addon-controls": "^6.4.15",
+    "@storybook/addon-docs": "^6.4.15",
+    "@storybook/addon-essentials": "^6.4.15",
+    "@storybook/addon-links": "^6.4.15",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/vue3": "^6.4.9",
-    "@testing-library/dom": "^8.11.1",
+    "@storybook/vue3": "^6.4.15",
+    "@testing-library/dom": "^8.11.3",
     "@testing-library/vue": "^6.4.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.5",
-    "@types/node": "^17.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/eslint-config-typescript": "^9.1.0",
+    "@types/node": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "babel-jest": "^26.6.3",
-    "eslint": "^7.5.0",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-fp": "^2.3.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-vue": "^8.1.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-vue": "^8.4.0",
     "jest": "^26.6.3",
     "libphonenumber-metadata-generator": "^1.0.1",
-    "rollup-plugin-visualizer": "^5.5.2",
-    "sass": "^1.43.4",
-    "storybook-builder-vite": "^0.1.11",
+    "rollup-plugin-visualizer": "^5.5.4",
+    "sass": "^1.49.0",
+    "storybook-builder-vite": "^0.1.14",
     "ts-jest": "^26.5.6",
     "ts-node": "^10.4.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.6.13",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
     "vite-plugin-eslint": "^1.3.0",
     "vue-jest": "^5.0.0-alpha.10",
-    "vue-tsc": "^0.30.2"
+    "vue-tsc": "^0.31.1"
   }
 }

src/components/BoxContentItem/BoxContentItem.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { Comment, defineComponent } from 'vue';
 
 import Heading from '../Heading/Heading.vue';
 import TextParagraph from '../TextParagraph/TextParagraph.vue';

src/components/ContentItem/ContentItem.stories.ts

@@ -66,7 +66,7 @@ const defaultExample: StoryFn<typeof ContentItem> = (args, { argTypes }) => ({
                 :success="success"
                 @click="onClick"
   >
-    <RenderString :string="defaultSlot" fragment/>
+    <RenderString :string="defaultSlot" v-if="defaultSlot"/>
     <template v-slot:customTitle v-if="customTitle">
       <RenderString :string="customTitle" />
     </template>

src/components/ContentItem/ContentItem.ts

@@ -1,5 +1,5 @@
 import { ChevronRightIcon, SuccessMicroillustration as Success } from '@lana/b2c-mapp-ui-assets';
-import { defineComponent } from 'vue';
+import { Comment, defineComponent } from 'vue';
 
 import Heading from '../Heading/Heading.vue';
 import TextParagraph from '../TextParagraph/TextParagraph.vue';

src/components/CopyToClipboardButton/CopyToClipboardButton.ts

@@ -72,8 +72,8 @@ const CopyToClipboardButton = defineComponent({
       switch (this.currentCopyState) {
         case (copyStatesLookup.copying): return { text: this.copyingLabel, class: this.copyingClass };
         case (copyStatesLookup.copied): return { text: this.copiedLabel, class: this.copiedClass };
-        default:
-        case (copyStatesLookup.toCopy): return { text: this.toCopyLabel, class: this.toCopyClass };
+        case (copyStatesLookup.toCopy):
+        default: return { text: this.toCopyLabel, class: this.toCopyClass };
       }
     },
     copyStatusText() {

src/components/CurrencyField/CurrencyField.test.ts

@@ -107,23 +107,24 @@ describe('CurrencyField unit test', () => {
   it('Should provide current input value in the input event when value changed', async () => {
     const givenValue = 123;
     const wrapper = mount(CurrencyField, { props: { ...defaultProps, modelValue: '' } });
+    await wrapper.vm.$nextTick();
     await wrapper.find('input').setValue(givenValue);
-    const [inputEventValue] = wrapper.emitted('update:modelValue')?.[0] as number[];
+    const [inputEventValue] = (wrapper.emitted('update:modelValue') || [])[0] as number[];
     expect(inputEventValue).toBe(123);
   });
 
   it('Should emit blur event when is blurred', async () => {
     const wrapper = mount(CurrencyField, { props: { ...defaultProps, modelValue: '' } });
     await wrapper.vm.$nextTick();
-    wrapper.find('input').trigger('blur');
+    await wrapper.find('input').trigger('blur');
     const blurEvent = wrapper.emitted().blur;
     expect(blurEvent).toBeTruthy();
   });
 
   it('Should emit focus event when is focused', async () => {
     const wrapper = mount(CurrencyField, { props: { ...defaultProps, modelValue: '' } });
     await wrapper.vm.$nextTick();
-    wrapper.find('input').trigger('focus');
+    await wrapper.find('input').trigger('focus');
     const focusEvent = wrapper.emitted().focus;
     expect(focusEvent).toBeTruthy();
   });

src/components/CurrencyInput/CurrencyInput.vue

@@ -1,7 +1,5 @@
 <template>
-  <input ref="inputRef"
-         v-model="inputValue"
-  >
+  <input ref="inputRef">
 </template>
 
 <script lang="ts">

src/components/ListItem/ListItem.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { Comment, defineComponent } from 'vue';
 
 import Heading from '../Heading/Heading.vue';
 import TextParagraph from '../TextParagraph/TextParagraph.vue';

src/components/SignaturePad/SignaturePad.ts

@@ -84,17 +84,19 @@ const SignaturePad = defineComponent({
     const canvasWidth = ref(300);
     const canvasHeight = ref(200);
 
-    watchEffect(() => {
-      if (!signatureCanvas.value) { return; }
-      canvasWidth.value = signatureCanvas.value.clientWidth;
-      canvasHeight.value = signatureCanvas.value.clientHeight;
-      context.value = signatureCanvas.value.getContext('2d');
-      context.value.strokeStyle = 'black';
-      context.value.lineWidth = 2;
-    },
-    {
-      flush: 'post',
-    });
+    watchEffect(
+      () => {
+        if (!signatureCanvas.value) { return; }
+        canvasWidth.value = signatureCanvas.value.clientWidth;
+        canvasHeight.value = signatureCanvas.value.clientHeight;
+        context.value = signatureCanvas.value.getContext('2d');
+        context.value.strokeStyle = 'black';
+        context.value.lineWidth = 2;
+      },
+      {
+        flush: 'post',
+      },
+    );
 
     return {
       signatureCanvas,

src/lib/sleepHelper.ts

@@ -1,4 +1,4 @@
-const sleep = (milliseconds: number) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+const sleep = (milliseconds: number) => new Promise((resolve) => { setTimeout(resolve, milliseconds); });
 
 export {
   sleep,