EastsideCo / polaris-vue

Allows you to use Shopify Polaris components in Vue 2.
https://www.npmjs.com/package/@eastsideco/polaris-vue
113 stars 27 forks source link

scope property has changed to slot scope #34

Open baberuth22 opened 3 years ago

baberuth22 commented 3 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @eastsideco/polaris-vue@0.1.19 for the project I'm working on.

The scope property has changed to slot scope and I was getting deprecation warnings, so I changed the PolarisPopover and PolarisPopoverOverlay.

Here is the diff that solved my problem:

diff --git a/node_modules/@eastsideco/polaris-vue/lib/polaris-vue.css b/node_modules/@eastsideco/polaris-vue/lib/polaris-vue.css
index 8cfb162..25b114e 100644
--- a/node_modules/@eastsideco/polaris-vue/lib/polaris-vue.css
+++ b/node_modules/@eastsideco/polaris-vue/lib/polaris-vue.css
@@ -2321,7 +2321,7 @@ html, body {

 .Polaris-ResourceList__Container {
   position: relative;
-  z-index: 20;
+  z-index: 5;
   display: flex;
   pointer-events: none;
   padding: 1.2rem 2rem; }
diff --git a/node_modules/@eastsideco/polaris-vue/src/components/PolarisIcon.vue b/node_modules/@eastsideco/polaris-vue/src/components/PolarisIcon.vue
index 052cd78..15e43bc 100644
--- a/node_modules/@eastsideco/polaris-vue/src/components/PolarisIcon.vue
+++ b/node_modules/@eastsideco/polaris-vue/src/components/PolarisIcon.vue
@@ -120,6 +120,7 @@ export default {
     computed: {
         finalSource() {
             var svgSource = this.source;
+            console.log('svgSource:',svgSource)
             if (typeof this.source == 'string') {
                 const bundled = BUNDLED_ICONS[this.source];
                 if (bundled) {
diff --git a/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopover.vue b/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopover.vue
index 8125eae..d7a241f 100644
--- a/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopover.vue
+++ b/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopover.vue
@@ -8,7 +8,7 @@
         :activator-id="activatorId"
         :preferred-position="preferredPosition"
         @close="onClose">
-        <template slot="overlay" scope="props">
+        <template slot="overlay" slot-scope="props">
             <div :class="classes" ref="content">
                 <div v-if="!props.data.measuring"
                      :style="{ left: props.data.tipPosition+'px' }"
diff --git a/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopoverOverlay.vue b/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopoverOverlay.vue
index f2bc8d8..fced3a6 100644
--- a/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopoverOverlay.vue
+++ b/node_modules/@eastsideco/polaris-vue/src/components/PolarisPopoverOverlay.vue
@@ -6,7 +6,7 @@
     :preferred-position="preferredPosition"
     :activator-id="activatorId"
     @scrollout="handleScrollOut">
-    <template slot="overlay" scope="props">
+    <template slot="overlay" slot-scope="props">
         <slot name="overlay" :data="props"></slot>
     </template>
 </polaris-positioned-overlay>
diff --git a/node_modules/@eastsideco/polaris-vue/src/components/PolarisTag.vue b/node_modules/@eastsideco/polaris-vue/src/components/PolarisTag.vue
index 0a56ef3..b0933dd 100644
--- a/node_modules/@eastsideco/polaris-vue/src/components/PolarisTag.vue
+++ b/node_modules/@eastsideco/polaris-vue/src/components/PolarisTag.vue
@@ -26,10 +26,10 @@ export default {
             cancelSmall: cancelSmall
         };
     },
+    components: {
+        PolarisIcon
+    },
     methods: {
-        components: {
-            PolarisIcon
-        },
         onRemove() {
             this.$emit('remove');
         },

This issue body was partially generated by patch-package.