feat: adapt Vue 3.x (#755)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

packages/vue-identicon/src/Identicon.ts

@@ -4,12 +4,13 @@
 import type { VNode } from 'vue';
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
 import { Beachball, Empty, Jdenticon, Polkadot } from './icons/index.js';
+import { adaptVNodeAttrs } from './util.js';
 
 interface Account {
   address: string;
@@ -26,7 +27,7 @@ interface Data {
 
 const DEFAULT_SIZE = 64;
 
-function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
+export function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
   try {
     const address = isU8a(value) || isHex(value)
       ? encodeAddress(value as string, prefix)
@@ -81,23 +82,25 @@ export const Identicon = defineComponent({
     }
   },
   props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
-  render (h): VNode {
+  render (): VNode {
     const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data;
 
     if (type === 'empty') {
-      return h('Empty', {
-        attrs: {
+      return h(Empty, {
+        ...adaptVNodeAttrs({
           key: address,
           size: iconSize
-        }
+        })
       }, []);
     } else if (type === 'jdenticon') {
-      return h('Jdenticon', {
-        attrs: {
-          key: address,
-          publicKey,
-          size: iconSize
-        }
+      return h(Jdenticon, {
+        ...adaptVNodeAttrs(
+          {
+            key: address,
+            publicKey,
+            size: iconSize
+          }
+        )
       }, []);
     } else if (type === 'substrate') {
       throw new Error('substrate type is not supported');
@@ -105,14 +108,20 @@ export const Identicon = defineComponent({
 
     const cmp = type.charAt(0).toUpperCase() + type.slice(1);
 
-    return h(cmp, {
-      attrs: {
-        address,
-        isAlternative: isAlternativeIcon,
-        key: address,
-        size: iconSize
-      }
-    }, []);
+    if (['Beachball', 'Polkadot'].includes(cmp)) {
+      const component = cmp === 'Beachball' ? Beachball : Polkadot;
+
+      return h(component, {
+        ...adaptVNodeAttrs({
+          address,
+          isAlternative: isAlternativeIcon,
+          key: address,
+          size: iconSize
+        })
+      }, []);
+    } else {
+      return h(cmp, {}, []);
+    }
   },
   watch: {
     value: function (): void {

packages/vue-identicon/src/icons/Beachball.ts

@@ -3,7 +3,7 @@
 
 import type { VNode } from 'vue';
 
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
@@ -19,7 +19,7 @@ type PropsType = {
  */
 export const Beachball = defineComponent({
   props: ['address', 'size', 'isAlternative'],
-  render (h): VNode {
+  render (): VNode {
     const { address, isAlternative, size } = this.$props as PropsType;
 
     return h({

packages/vue-identicon/src/icons/Jdenticon.ts

@@ -4,7 +4,7 @@
 import type { VNode } from 'vue';
 
 import * as jdenticon from 'jdenticon';
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 
 type PropsType = {
   publicKey: string,
@@ -17,7 +17,7 @@ type PropsType = {
  */
 export const Jdenticon = defineComponent({
   props: ['publicKey', 'size'],
-  render (h): VNode {
+  render (): VNode {
     const { publicKey, size } = this.$props as PropsType;
 
     return h({

packages/vue-identicon/src/icons/Polkadot.ts

@@ -3,10 +3,12 @@
 
 import type { VNode } from 'vue';
 
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 
+import { adaptVNodeAttrs } from '../util.js';
+
 type propsType = {
   address: string;
   isAlternative: boolean;
@@ -19,18 +21,18 @@ type propsType = {
  */
 export const Polkadot = defineComponent({
   props: ['address', 'isAlternative', 'size'],
-  render (h): VNode {
+  render (): VNode {
     const { address, isAlternative, size } = this.$props as propsType;
     const circles = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) =>
-      h('circle', { attrs: { cx, cy, fill, r } }, [])
+      h('circle', { ...adaptVNodeAttrs({ cx, cy, fill, r }) }, [])
     );
 
     return h('svg', {
-      attrs: {
+      ...adaptVNodeAttrs({
         height: size,
         viewBox: '0 0 64 64',
         width: size
-      }
+      })
     }, circles);
   }
 });

packages/vue-identicon/src/util.ts

@@ -0,0 +1,14 @@
+// Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { version } from 'vue';
+
+export function adaptVNodeAttrs (data: Record<string, any>) {
+  if (version.startsWith('3.')) {
+    return data;
+  } else {
+    return {
+      attrs: data
+    };
+  }
+}