From 742bf62f9a4fd15994d346ce076aa4081716c1a7 Mon Sep 17 00:00:00 2001
From: Dan Onoshko <danon0404@gmail.com>
Date: Tue, 6 Dec 2022 16:46:32 +0400
Subject: [PATCH] fix: fix compatability with Vue >=2.7 (#967)

---
 .size-limit.json                      |  2 +-
 src/typedCharts.ts                    | 18 +++++++++++++-----
 src/utils.ts                          |  9 ++++++++-
 website/src/migration-guides/index.md |  1 +
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/.size-limit.json b/.size-limit.json
index b9e90c47..ea113fd2 100644
--- a/.size-limit.json
+++ b/.size-limit.json
@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/index.js",
-    "limit": "1.9 KB",
+    "limit": "1.95 KB",
     "webpack": false,
     "running": false
   },
diff --git a/src/typedCharts.ts b/src/typedCharts.ts
index 3160d04e..bea4f6e5 100644
--- a/src/typedCharts.ts
+++ b/src/typedCharts.ts
@@ -14,6 +14,7 @@ import {
 import type { TypedChartComponent, ChartComponentRef } from './types.js'
 import { CommonProps } from './props.js'
 import { Chart } from './chart.js'
+import { compatProps } from './utils.js'
 
 export function createTypedChart<
   TType extends ChartType = ChartType,
@@ -36,11 +37,18 @@ export function createTypedChart<
       expose({ chart: ref })
 
       return () => {
-        return h(Chart, {
-          ref: reforwardRef as any,
-          type,
-          ...props
-        })
+        return h(
+          Chart,
+          compatProps(
+            {
+              ref: reforwardRef as any
+            },
+            {
+              type,
+              ...props
+            }
+          )
+        )
       }
     }
   }) as any
diff --git a/src/utils.ts b/src/utils.ts
index 50728a5c..0f27da4b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-import { isProxy, toRaw } from 'vue'
+import { isProxy, toRaw, version } from 'vue'
 import type {
   Chart,
   ChartType,
@@ -8,6 +8,13 @@ import type {
   DefaultDataPoint
 } from 'chart.js'
 
+export const compatProps =
+  version[0] === '2'
+    ? <I extends {}, T extends {}>(internals: I, props: T) =>
+        Object.assign(internals, { attrs: props }) as unknown as I & T
+    : <I extends {}, T extends {}>(internals: I, props: T) =>
+        Object.assign(internals, props)
+
 export function toRawIfProxy<T>(obj: T) {
   return isProxy(obj) ? toRaw(obj) : obj
 }
diff --git a/website/src/migration-guides/index.md b/website/src/migration-guides/index.md
index 0cc606a3..6bdd7920 100644
--- a/website/src/migration-guides/index.md
+++ b/website/src/migration-guides/index.md
@@ -21,6 +21,7 @@ If you are experiencing this problem with Jest, you should follow [this doc](htt
 - `chartOptions` props were renamed to `options`
 - unknown props will fall through to the canvas element.
 - `generateChart` were refactored and renamed to `createTypedChart`
+- Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.
 
 ## Migration from v3 to v4