From f0ae0138b74a3190f15161cc5eed1e0eb53be836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r?=
 <45143524+bahadirsofuoglu@users.noreply.github.com>
Date: Thu, 8 Sep 2022 11:24:39 +0300
Subject: [PATCH] Rating component features completed (#2893)

* Rating component features completed

* Change asset

* Cancel icon templating completed

* Templating changes Docs completed

* Accessibility issues solved

* Rating clickoutside issue solved

* Icon src name changed

* About cancel focus problem

* Keyboard event bug fixes

* Template refactor

Co-authored-by: Onur Senture <woof.uyelik@gmail.com>
---
 api-generator/components/rating.js           |  18 +++
 public/demo/images/rating/cancel.png         | Bin 0 -> 1850 bytes
 public/demo/images/rating/custom-asset-2.png | Bin 0 -> 4157 bytes
 public/demo/images/rating/custom-asset.png   | Bin 0 -> 1922 bytes
 src/components/rating/Rating.d.ts            |  15 +++
 src/components/rating/Rating.vue             | 114 +++++++++++++++++--
 src/views/rating/RatingDemo.vue              |  20 +++-
 src/views/rating/RatingDoc.vue               |  81 +++++++++++++
 8 files changed, 235 insertions(+), 13 deletions(-)
 create mode 100644 public/demo/images/rating/cancel.png
 create mode 100644 public/demo/images/rating/custom-asset-2.png
 create mode 100644 public/demo/images/rating/custom-asset.png

diff --git a/api-generator/components/rating.js b/api-generator/components/rating.js
index 794bc7e8f8..131abdf1d7 100644
--- a/api-generator/components/rating.js
+++ b/api-generator/components/rating.js
@@ -28,6 +28,24 @@ const RatingProps = [
         type: 'boolean',
         default: 'true',
         description: 'When specified a cancel icon is displayed to allow clearing the value.'
+    },
+    {
+        name: 'onIcon',
+        type: 'string',
+        default: 'pi pi-star',
+        description: 'Can be used to add different icon.'
+    },
+    {
+        name: 'offIcon',
+        type: 'string',
+        default: 'pi pi-star-fill',
+        description: 'Can be used to add different icon.'
+    },
+    {
+        name: 'cancelIcon',
+        type: 'string',
+        default: 'pi pi-ban',
+        description: 'Can be used to add different cancel icon.'
     }
 ];
 
diff --git a/public/demo/images/rating/cancel.png b/public/demo/images/rating/cancel.png
new file mode 100644
index 0000000000000000000000000000000000000000..8482598af6f1d00188f7df68de6fee784d0e0027
GIT binary patch
literal 1850
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

literal 0
HcmV?d00001

diff --git a/public/demo/images/rating/custom-asset-2.png b/public/demo/images/rating/custom-asset-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca38b0d290264d6bb588d814d9b91bd57eb9c82b
GIT binary patch
literal 4157
zcmV-D5W???P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000mKNkl<ZcmdUz
z1#}x%+J>Jyb4M&$vSUhY$6+jYnRz$MU1nxxW@ct)X2vo%O*u~EFq(xU&CG@0Yfo#{
zDYrj8=e+066@KsiK*0ZJEV#n*{~O7jz{CTWirR6#Yf8sg?;(ub7`onY(hEw`)hV!O
zBU`O7QBDx-^O}15wtC@wnVa4L815kA{4Wi1d+Dqc))cd?CuEY%$EJ(56Gf?+a&ijN
zK+*$O0)W;KMBsy|3v?|Nh_HCYKQ45BcckI|8rXij4Seeb%ek$bIJjihvi$hlie1&G
zCVMJbdVxX-@|z&D4ic+D_5nFSfNg>~3c()mcR=kLm^uPJFkNUJ-k<;ZRC4H}x5tRM
z;!F47Rx@5sbZ4q>@9L?(+3TsL=>dB03Z*TOxd%9#fD+&W4j`Dv0va$t9qb6SE`sU5
z!O_!ar3uR!RXIQZsj+m|2Y|+{HgM$|H*#xGY4^BQoqNBYUs}66eZaDlq3@ZHeF)G8
zC@^)vv>9l}#3n2_Ss(?Jp>-CF{RsB{8){J9SG;s$toS0}(pzO<^j*W;64Tl4$DWY6
z;undbz+<TgD_;g(&jyNM%3xI-ums@(PAn12EXb<Zhyvk)Qv?)Le*>eRfrC@11JZ7v
zT>A{*C%0Te@4bZ#Sn=%R`mX*S%YdPku;%rUx#xV~rU}9W>jG{ZyaWW`fN;QCz_yvt
zU?ae^8S%jFg4PJ^`ZVm>iaiL|99{b|;Hx)l;Hvkm<))ZwIgh^Y(6zs3se$2ju=XvG
zUIuy!Z~zyq1R>(UuQTEt+XL3L2i<lZ%PMd>K!vdDb1-@q9Dqy5H#`ma=}j8g`tA+D
zvDBMp!##U;UMW`?m*p#A?OP#P0A|36%Y^ndmS}HaacmD*y(oCIuo?w62ik+t&(7*X
z^j^UgwdE%R+u&HF5KR_SqdR$W*Y=;tKI7881O}f4!a%eSqzg6<8ZjTRZ42Bw9BaTX
z>VtR{u_5e&xu^yv1IwNa%^BR*wQS(f&raX*fKz}Pix7W)(L-6xrvA%5Fw{T(PKG4R
z_7bH{Km|Mrt^n!80RzYdGdK$p;@A>eYy=&z@%>7JvUBU434a_$z6A$r>=;@8IpDR&
z7#MlOa@x5h92$Pg;JJI`fPvL_fn^T`Q3EMJ%K6oGz=@lbc8P`c7y~Q{-Yyuh7PJ9l
zK$!&-6kuX2T=N&qK{#D+-T;iyhCJAvr=9yYcD+~T40M#BumPe;aH4qRIiMY|aTc8T
zq#YNm0K-CN><tYp7}2rEIN&)g7>KXurF_T?LFXV&`2fR*j(iAs0&U3Q`Voj3v;E6E
zljBb%3lxUI5unN-1t=GU01=;XBp@LnB>}TAKAQ%F;D*?Ev5<D-y#gdO0*EwN;ta&n
z@oG{~SOK|1EGtYs?qAp3e;u%c7&&tAIEd-&-}SU?P9@3YAz6ZG23+ERoCO0eAl<oO
z_MNkr(|@;*uD&#neBLIU&MxpH5CGzaCeji!InAHGdo?o?E$;v5<qX|xIaK2MpEGb>
z2JF0)4_*#(OGqWgoq;8Lp9#E+7&&_bF?iAB<0t^>P5_7+fU{u05uoFGFG#NX-7Y@&
z_A3Zm5QZ?ab&OYi;Xb4~^U#diGGQU*(VCp(^RGIGZRgZTB;f2n9^|zjuCwV8t6(Oa
zH=&77KVBmZMnJL?ym3mo@yC7NIpw{829SR!3<7ZPnd#LVI@Bq~3LGa1DgXh9*g(8u
z#auA{o@svel@XQ{VdKUme$#Tn`8EFeovV4&8;=L8=K}z693bMK-@b<J7uR^e{Su_p
zf~&6y_{o>H^R{(4vb|YoMe)fKpT1czB_$^1k#>U3cdt%u1}+DXvl{?bq{i=&kdf3f
zjUyaT&G^I@)jk3ehOMU`qFD|(>9_<Ano?eH{AP!3XO8ipCrpv<&p@C6AR}iD`)oUV
zjN>=C6mu4>G@Caj*mgz8rKca}KF=Bk9mGvcTPejRuoy3eF8dsR>dt#!Z{YZocLH$j
zm0g=o5MUe^ON7t?C<(4<8;f!M2b%pm>*P}4R}`|4Mb{%zo}yd{IW$^k^->8cil1vZ
zw7ZOMg`^6WYQsaOQbg4TxilQuQ-i1lR$o6x;|#<ZQJ^D?a7bh=lar-Q#K`hw34n}d
zxe)+hb%f9oTnowpXe%KHd_&+z_zhV7z+p~!)DYG2fWLqFDw_LhRHs{j0;K@Jf?o;n
z%LXx&<3X=Dj$&_$ZGYIy=(qRamjkG^0OFDnpl&!)tq!q(S1{B@<q$D)b_0OtH9NHc
zW0`v}#sec3QYs9Hc$`WYKiFjG#1ap9=@3kn={z~ZmY1#NqtDw)&<MdQ(AOCdG;1Nv
z03P*<bqt&=U~+~BzH~X)Y%Mc(u+}ztG;s#nzA7oK2{2X@8Av8-9mL4l4FKAZQWgvb
zYgGJ#fCD(!84(Z~NV=@KM<1I{DZqFYW;9f)46Mm=zh@3p=t)9dgJGVACch-h1E0TQ
z_AxH(s)7<=Dm?g!{cOLy0FDc-05o7@#Rf1It2M?L6auu$5F_JL!XT}&V2s5YgS8ex
zTryUGWqwt5F1RN=V<}h#lOcF6C}1k!NzduWh6*a-ym5evV$%tEHr=%ZQ%%qk9AHwh
zetnwt8}d+Xf{v%0F<>3Qg0<K=nfcX#Mi7IHH-yFwtp=l*b8D?enAkv4f)op5QCX-p
z7aCi~JrY`=g|L8izz_%FK%`;`5b<jX7a9tz0wv-fHb6>%Zy}fq25S^X|3~u&tdY$&
z0}=owQqxMsABb~J6M@xWJ*IcnaTCz7G7D)BH1R0`STJ^B-iHE2yvG7!UIwtSOnkeI
z$FnOSDF6fIfTJTm`D}u0F$rNf*ONwTv=Ueijb^4yjGW!XSNVORI!aPmv<6Rw;6xbZ
z@wM+AX5X#`_c#gGtV^+S{StZyI}n8=q$PNw?FX0xu*g7s9fOS<G&JBVTGLIA?5!|5
zGResHh;z5W6CU5olV;15W(0E?0HrLoX_vw(b$}Q-y8&Qoq_#asxuheDia;xks{?ch
z#`Rdb<<*Q#AK~0TpNaF!gA`K->FtK4gU~mSq12rwoAdCJvr0Hf8IN7S8jDhfDAcrk
zMZFR*HRf~pK)|7cFgXP^1x|4pOHX<*z3u^m;6l(L=l~OGR0JxtG^&!~NtLUC_}qIc
z08Cd_oEO%nb<{F$6k5C_B*Flha9NUTvGhI<W#hdc$i%)KOza(He9v|!5A0&w;XU}H
zhq28vR!z?;1PdZQXo#<gXMvl*@d~(^L2^r$QaoXp%>ygxUAd92fniDm>-qDiUq_#J
z_Iw2d!MynhqCg`%;F^n9o=1$F-2m{YFC5-E@=kACeX4nCB5#QzP;*bPbeCFObH=Y(
zbL!nG777gB_rW9{`Zyd1Oym>#4Vv{D_1X-6wL;LS6Nat%J_1~sKqk|qGFdW(BAI*#
z>1-Y^lLIG-HkMYSOtW5R>cA+|JO9n_LsQW5(borWQ7ug)NNztE=C2|~eC36w5<@!N
z{q}ozPk%`ErO6gO(ixX*cY@KKb-w)b6c2yLuNdBZ7o-S~R+021UNT8CktC6D@dUSu
z2nZuf5CpRd36&z!0!5OuzV`_#=e?IVy=D+w_i42ZzOQM_MEHlBj7Q5p0=%6VxiNi&
z7(RZ!`N@_iWZqM*hY6W-k)BI5qgcJJ#QMP_{QHy7V$IzjLTUNQ^shaMQqMASrB0lL
ziz{yU!_vm<Vl)sK@coc_xy;PuIOF@TWo+~^Y6mZ8|F(belt*_!!Vm@!Mi4X&K||5-
zg^h~+Kco%u&$pgRJDJA*ALixwGctV{az&41+NGl>!Tt%!cfWg(v;dM|6GalGAqstK
zDfFx$Q|c$%(M>ATK{As;ddawfHA+Rae4oIt;#ViAO&z5+zMtyRT{LI*V}mJ@LQyNj
zz*@-*pF0HQ8jXgf=_?xLh+w?Ik!IH)fXC2=`1dQiXs6oRysBHBJK8yHNp+;j7Cf>k
zL1rMw>F2b#_<{+B2S6)J%Ll&>O&=l+!UZAcSJxF-0oGWohA0H1KxmK>G8stcAeDwx
z3Yty9L_NV%p3uj@l8D+^KoDB|T1a!IMg5RvPx_vlfvagl{Nh#jVKFOuF8`R`*?4ou
zT8~U2K`QN1%u8ffj$i+^%I<4t7+U5b1Rw+g05f;m=0DPH6G+5z1di(>oLM2TSgZvh
z#M~(#9*2i*>F1<%g2oY_W@KnJ6wPWx?Ldg{roIfkf<=h4Uy)@o8(twYSAJAnT<WZE
z%=V^9<vmg<mr{qs<a7M$?-dU0oT0zRooilgEVmUQz;y)GYQ$8{;eHS7<8GT={G&CR
z5wv_ws}|vpHJO>t>{<PCdooaF5pw0TIfkHS{Z)hFsk;v)ukeyBtPlW98%v2gPu)`D
z@8>7D{E`U@sgRDM7ypktr&|hqPFh*Uj)ss-vE|WyY+h+;9j@UA&}wN~^@ym_V!Gn7
zVwruK`W<DC1+nk#S#FAn{h22<WaZ~Q0~(o2lgK!vk}e%Nm*kQhI}QrYzj%h3u^O4A
zrBIMKuE5%x4n7JE<+4HvkAamP-0$uMy3+x*u_n#X5(b*US48!I$wPu<P<SrzJ#GSV
z(KEWZIqXK~MZu2B*Sq@_UNME2cJY!fX-`n>P7}%uSL})y-CbjH%*SelbU<K<6Nj~6
z5JXy#OndY%%du{ChV?@(wo+$iCLq)fQJ{#Lim)0mdC(!VIrCcJa{wp5sUiS-i~(!8
zMYg`B>&dmljh}S&gif~0!%2E`CZvRH$|2XCMLQ{u%vi>!HPe-Ft}#Pp5kS&&$Yv#-
zB}spmq`PRrZ&I6T(u_bU=7QI=@@GOO#wFR#{Pib)*H2F^1b-V1T>r$q-^ib|`(pi#
ztP`Bl*(;D~4|ndv&cP9oPC8_B9&RFml@j4N7$FeWBDn6SqCy1`_4>RyV=OA1Rb<eO
zkeMli-$-0FxXF1Ta3R3Tmo{!H_}D;=n<t0h5CHbbud~^Mhj?fGh<Zb@7<u`Ui%d&g
z&z-A%M}i~7_2uIT05AxwwOAaiv1o0v%AzAZS2DG-p;DFP^76BT8}0jnncm0xf<9ty
z&Vc3CAlQij48ZO)IyM}*(!3=qtEU#SK{8(yBvLMJ(!p^Zgd^tEjx}~(%Ag`k6lkht
zL%oqusl5Do_n`9$;4*+U8>$YE#vU8^?KTjjxIsGie>=T#VxKszJYgQ|xb}D%*+kMc
zB=VMo3&LR@V+oa@6$--0L0J)@#nriP_qY8^^>2VHh#A<@asb1vMA%Vo4}uYh%`kqk
zE6a`4`Y5mOp)=0L%6>T%T3Zy#WWb^wr<wLdxg)O*2xYe?v~zx!2(|+uK-WFA;6wl{
zw-I6YaQm@wM(!AQ=rx1|7tq`p{0l+<&79;of(ZaDcM|^vrUo<)JCL)e00000NkvXX
Hu0mjfq>QM-

literal 0
HcmV?d00001

diff --git a/public/demo/images/rating/custom-asset.png b/public/demo/images/rating/custom-asset.png
new file mode 100644
index 0000000000000000000000000000000000000000..7047c28f4e4ad63775ab9f9c3ed242d1834faea6
GIT binary patch
literal 1922
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
IM6N<$g7hHT?*IS*

literal 0
HcmV?d00001

diff --git a/src/components/rating/Rating.d.ts b/src/components/rating/Rating.d.ts
index 42b755aa42..a0ecad5e86 100755
--- a/src/components/rating/Rating.d.ts
+++ b/src/components/rating/Rating.d.ts
@@ -38,6 +38,21 @@ export interface RatingProps {
      * Default value is true.
      */
     cancel?: boolean | undefined;
+    /**
+     * Can be used to add different icon.
+     * Default value is pi pi-star.
+     */
+    onIcon?: string | undefined;
+    /**
+     * Can be used to add different icon.
+     * Default value is pi pi-star-fill.
+     */
+    offIcon?: string | undefined;
+    /**
+     * Can be used to add different cancel icon.
+     * Default value is pi pi-ban.
+     */
+     cancelIcon?: string | undefined;
 }
 
 export interface RatingSlots {
diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 9186d46b61..3f975051f5 100755
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -1,12 +1,28 @@
 <template>
-    <div :class="containerClass">
-        <span v-if="cancel" :class="['p-rating-icon p-rating-cancel pi pi-ban', { 'p-focus': focusIndex === 0 }]" @click="onCancelClick" @keydown="onKeyDown">
-            <span v-if="cancel" class="p-hidden-accessible">
-                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="$primevue.config.locale.clear" @focus="onFocus($event, 0)" @blur="onBlur" @keydown="onKeyDown($event, 0)" />
+    <div ref="rating" :class="containerClass">
+        <template v-if="cancel">
+            <span :class="cancelIconClasses()" @click="onCancelClick" @keydown="onKeyDown">
+                <component v-if="$slots.cancel" :is="$slots.cancel" />
+                <span class="p-hidden-accessible">
+                    <input
+                        type="radio"
+                        value="0"
+                        :name="name"
+                        :checked="modelValue === 0"
+                        :disabled="disabled"
+                        :readonly="readonly"
+                        :aria-label="$primevue.config.locale.clear"
+                        @focus="onFocus($event, 0)"
+                        @blur="onBlur"
+                        @keydown="onKeyDown($event, 0)"
+                    />
+                </span>
             </span>
-        </span>
+        </template>
         <template v-for="i in stars" :key="i">
-            <span :class="['p-rating-icon', { 'pi pi-star': i > modelValue, 'pi pi-star-fill': i <= modelValue, 'p-focus': i === focusIndex }]" @click="onStarClick($event, i)">
+            <span :class="iconClasses(i)" @click="onStarClick($event, i)">
+                <component v-if="hasIconSlot && i <= modelValue" :is="$slots.onIcon" :index="i" />
+                <component v-if="hasIconSlot && i > modelValue" :is="$slots.offIcon" :index="i" />
                 <span class="p-hidden-accessible">
                     <input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event, i)" />
                 </span>
@@ -18,7 +34,7 @@
 <script>
 export default {
     name: 'Rating',
-    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'cancel'],
     props: {
         modelValue: {
             type: Number,
@@ -43,21 +59,47 @@ export default {
         cancel: {
             type: Boolean,
             default: true
+        },
+        onIcon: {
+            type: String,
+            default: 'pi pi-star'
+        },
+        offIcon: {
+            type: String,
+            default: 'pi pi-star-fill'
+        },
+        cancelIcon: {
+            type: String,
+            default: 'pi pi-ban'
         }
     },
     data() {
         return {
-            focusIndex: null
+            focusIndex: null,
+            outsideClickListener: null,
+            keyboardEvent: false
         };
     },
+    mounted() {
+        this.bindOutsideClickListener();
+    },
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+    },
     methods: {
         onStarClick(event, value) {
-            if (!this.readonly && !this.disabled) {
+            if (!this.readonly && !this.disabled && !this.keyboardEvent) {
                 this.updateModel(event, value);
-                this.focusIndex = value;
+                window.setTimeout(() => {
+                    this.focusIndex = value;
+                }, 1);
             }
+
+            this.keyboardEvent = false;
         },
         onKeyDown(event, value) {
+            this.keyboardEvent = true;
+
             if (event.code === 'Space') {
                 this.updateModel(event, value);
             }
@@ -68,8 +110,15 @@ export default {
         },
         onFocus(event, index) {
             if (!this.readonly) {
-                if (this.modelValue === null && this.focusIndex === null) {
-                    this.cancel ? (this.focusIndex = 0) : (this.focusIndex = 1);
+                if (this.modelValue === null && this.focusIndex === null && index === this.stars) {
+                    this.focusIndex = this.cancel ? 0 : 1;
+                    this.updateModel(event, this.focusIndex);
+                } else if (this.modelValue === 0 && this.focusIndex === 0 && index === this.stars - 1) {
+                    this.focusIndex = index + 1;
+                    this.updateModel(event, this.focusIndex);
+                } else if (this.modelValue === null && this.focusIndex === null) {
+                    this.focusIndex = this.cancel ? 0 : 1;
+                    this.updateModel(event, this.focusIndex);
                 } else if (this.modelValue !== null && this.focusIndex === null) {
                     this.focusIndex = this.modelValue;
                     this.updateModel(event, this.modelValue);
@@ -86,7 +135,11 @@ export default {
         },
         onCancelClick(event) {
             if (!this.readonly && !this.disabled) {
+                window.setTimeout(() => {
+                    this.focusIndex = 0;
+                }, 1);
                 this.updateModel(event, null);
+                this.$emit('cancel');
             }
         },
         updateModel(event, value) {
@@ -98,6 +151,42 @@ export default {
         },
         ariaLabelTemplate(index) {
             return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
+        },
+        iconClasses(i) {
+            const iconOn = i > this.modelValue && !this.hasIconSlot() ? this.onIcon : null;
+            const iconOff = i <= this.modelValue && !this.hasIconSlot() ? this.offIcon : null;
+
+            return ['p-rating-icon', iconOn, iconOff, { 'p-focus': i === this.focusIndex }];
+        },
+        cancelIconClasses() {
+            const focusOnCancel = this.focusIndex === 0 && (this.modelValue === 0 || this.modelValue === null);
+
+            if (this.$slots.cancel) {
+                return ['p-rating-icon', { 'p-focus': focusOnCancel }];
+            }
+
+            return ['p-rating-icon p-rating-cancel', this.cancelIcon, { 'p-focus': focusOnCancel }];
+        },
+        hasIconSlot() {
+            return this.$slots.onIcon && this.$slots.offIcon;
+        },
+        bindOutsideClickListener() {
+            this.outsideClickListener = (event) => {
+                if (this.focusIndex !== null && this.isOutsideRatingClicked(event)) {
+                    this.focusIndex = null;
+                }
+            };
+
+            document.addEventListener('click', this.outsideClickListener);
+        },
+        unbindOutsideClickListener() {
+            document.removeEventListener('click', this.outsideClickListener);
+            this.outsideClickListener = null;
+        },
+        isOutsideRatingClicked(event) {
+            const ratingRef = this.$refs.rating;
+
+            return !(ratingRef.isSameNode(event.target) || ratingRef.contains(event.target));
         }
     },
     computed: {
@@ -117,6 +206,7 @@ export default {
 <style>
 .p-rating-icon {
     cursor: pointer;
+    display: inline-block;
 }
 
 .p-rating.p-rating-readonly .p-rating-icon {
diff --git a/src/views/rating/RatingDemo.vue b/src/views/rating/RatingDemo.vue
index 44337194b5..cf7ce7fcd5 100755
--- a/src/views/rating/RatingDemo.vue
+++ b/src/views/rating/RatingDemo.vue
@@ -21,6 +21,22 @@
 
                 <h5>Disabled</h5>
                 <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+
+                <h5>Custom Icons</h5>
+                <Rating v-model="val3" on-icon="pi pi-heart" off-icon="pi pi-heart-fill" :stars="5" name="primeIcons" cancel-icon="pi pi-times" />
+
+                <h5>Templating</h5>
+                <Rating v-model="val4" name="templating">
+                    <template #cancel>
+                        <img src="demo/images/rating/cancel.png" class="cursor-pointer" height="24" width="24" />
+                    </template>
+                    <template #onIcon>
+                        <img src="demo/images/rating/custom-asset-2.png" height="24" width="24" class="cursor-pointer" />
+                    </template>
+                    <template #offIcon>
+                        <img src="demo/images/rating/custom-asset.png" height="24" width="24" class="cursor-pointer" />
+                    </template>
+                </Rating>
             </div>
         </div>
 
@@ -35,7 +51,9 @@ export default {
     data() {
         return {
             val1: null,
-            val2: 3
+            val2: 3,
+            val3: 2,
+            val4: 2
         };
     },
     components: {
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index da074ed98a..f7f90f4279 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -32,6 +32,24 @@ import Rating from 'primevue/rating';
         <pre v-code><code>
 &lt;Rating v-model="val" :cancel="false" /&gt;
 
+</code></pre>
+
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the icon instance is available as the implicit variable.</p>
+        <pre v-code><code><template v-pre>
+        &lt;Rating :modelValue="3">
+            &lt;template #cancel&gt;
+                &lt;img src="demo/images/rating/cancel.png" class="cursor-pointer" height="24" width="24"&gt;
+            &lt;/template&gt;
+            &lt;template #onIcon&gt;
+                &lt;img src="demo/images/rating/custom-asset-2.png" height="24" width="24" class="ml-2 cursor-pointer"&gt;
+            &lt;/template&gt;
+            &lt;template #offIcon&gt;
+                &lt;img src="demo/images/rating/custom-asset.png" height="24" width="24" class="ml-2 cursor-pointer"&gt;
+            &lt;/template&gt;
+        &lt;/Rating&gt;
+
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -83,6 +101,24 @@ import Rating from 'primevue/rating';
                         <td>true</td>
                         <td>When specified a cancel icon is displayed to allow clearing the value.</td>
                     </tr>
+                    <tr>
+                        <td>onIcon</td>
+                        <td>string</td>
+                        <td>pi pi-star</td>
+                        <td>Can be used to add different icon</td>
+                    </tr>
+                    <tr>
+                        <td>offIcon</td>
+                        <td>string</td>
+                        <td>pi pi-star-fill</td>
+                        <td>Can be used to add different icon</td>
+                    </tr>
+                    <tr>
+                        <td>cancelIcon</td>
+                        <td>string</td>
+                        <td>pi pi-ban</td>
+                        <td>Can be used to add different cancel icon</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
@@ -215,6 +251,19 @@ export default {
 
         <h5>Disabled</h5>
         <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+
+        <h5>Templating</h5>
+        <Rating v-model="val4" name="templating">
+            <template #cancel>
+                <img src="data:image/png;base64,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" class="cursor-pointer" height="24" width="24"/>
+            </template>
+            <template #onIcon>
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAQBElEQVR4AdWYBXQbV9qGnztzRyxZsmNKbMdhLHeZeTfLXWZmZmZmZmZmxjI3TTlO4zCahSPNzIXfa09r1Sm3Pz3nvOfOFX7v/UDA/2csuMLy/xvJncDEA5eK2nG9a0rHV+8hjNwYut5w0gtK0tUpsGgjW60wUU4Q7POaevu2euF8mZveARjuIOL8Lw1ye+msFNYUs60nZJLNx6aLtRNFqZlycgrSQNIDVwKA1hBE4IOpC3QtFYiweMU/LnR+d6Th/hrYfrsNfOsFy7mtnDi4ZNWy/Pjbil3VpyZ7Kll6gUIJ8psgsw4Sq0H2ATlAgG2COQrBHvB3QO0amDoCPjBdaB3en//5VHLoo7fHiLjiS/fgVjNeTnRnqm/v6qm+2euppekBeu8KpS2QuQc4m4AS4AIOIJjHAhowQB3sCLQugum/wdHTZ6UJyxlVOT//qbF01weAxq02cOUbN3JrUGn3uFWde7+eX1q7O33AspOh75mQfQjQBygwdcC0GWjHxCYsOFkgBZShdRaM/Qj2/htqUN1XvHRirPgi4NJbZWD0XcPcEtPZ7seekLniF4mhwGOpBytfBl3PBopgymBVHLAE4QJOLBHLLMiq2IgC4YJTBBRUfwOjn4GDU6gD0m6fXPsM4Ce3XELvvYUMWPHs4/qu/h7LgKGVsOb1kLnnfOCmCcID6wJuHLwEBOCAcMBawLaZ0GAjwLQZ8cDtgtYI7Po07NmKPQjXHF37MuCrN2vgqves5aaYajmPvu/Qtb9nqYHhdbD2LZBeBnoKcAAXrAQh4sCvM+Ic2wPWtAfddh3LKnA6QIWw63MwehYcgEvHNzwN+OlNGtj67g3AsdSbZsM9e3ZeKVcYl+UrYe1bIVkAZsCJy4T2NZZob2BxbA9YvSh4s7AaBTYH2oPRz87qQvRewRW15ScD2+BYpBBNFlOjO3ly1/afyD7j0r0EBp8FwkC0D6QLNg4aMR+wbQvcOhxrwC7qg3gVsSHsgrmoBiYDy54MzRnc1rVs4NDPTt/xgFOAGosQf37RQ1nMpv7LPjDUP/5OhiTM9hKlTUAFPAmuAOnEAQPIBTM4CxLi2BJabAQdr/H9SoOyc+ucCX8cRr4FB2rsGFn+OeC1xxgYecNy2rkkHBp+yuC5e+SAgdV3gWUPBVEDKUDK+dV1wImblHaJhfUYAywK3i4YsBa0AWNAmQUTFGBiK1zzF8xBOF1v3gCM0IY82J2nnfs2dr1X5gx0lKCwAaJJcKJ45DmgHbBxFpz4pB0XrADDQmbsDQ0sGNGxxzjgOS0YiK/npXzIDEHnIE75AMOHjnwIeAJtyOH6EYgZs/3LO5PjTyULFIbBEaDKIAUoF4QAEZ9wJCAhISUBszA+mwaE4IbYeLGQduO9AiQ0Aog0WOIMxNLxalJQWAG5QywrTD3uX9fcfx2wgxg5cvA4iOns3/W0bE4lyeQhWYJoBlzigJwFAy4g3blg9p2zl9N/t4+uvjSPfN4mnM4u8CMQAOKGJtISMznNn757NTMTLe7/6OUM3Ws5VOL6nzNwXQbsvJQPXg5yS0glxp2BJXufCbyLGDl7AzF40eTjKADpTgCIGoCzYMARoON6L0iu+t0uPvf2KwhbEIYwsnWMV33hPqQ689CM2jJhIeXRmpzk8686h23n1Egk4Ow/HuS1H66z6RGrYCacN6GJTz9eIw1GQLITvHFKufHHfd855b2ABpB/KAwCcO+Z6dUbOtQpxgocJwkqAAGI2EC8YsVcMP6eaX72lRGWFGHjxiR+03LB+TX++Z2redQbjwer5wMAcBwg4p/fvobtF9d4wP0SpNOCq68J+MmXtvO2dTmyvVloRfHJE5++WTAlJSblkXaCzXevTm0GLgeQsxsAVqTG75GQkdQyjSMcUM34xBfVPgIShq2nH6JZDjnpuAQOmlJecPxmh21njvGgJ0yR7s9AoAAgI2cN+2w7e4zjN7kUcxatNJs3Jth2Rcilpx/mPs8aBh3ETUxbKcUmsBgvhS77HH/qznteb+D4k3cCcO2VXZtOEGAcF0uE0AEoCa5pG4tx/Qea/Tvr5FLgVxSykEXXI1KeolwJOTRaZvVSCSqKn2s4tLuMboWkCpZqw0OmUkTVBrk0HNhTg6gFVl8/RuMMxBlRoCOMcEhkLZOTpU3EyPJkCYCMZrkRAGB1hNASXAvKAWgrIQd8Q+BH+A1Y/cBhTnjUENXxgL9/+Sqa+2pUp1uAAqUAwIJfCfDLBjGU40GvOI5ib4ptf9jL6Lf34JcDqLUA4pIRoG44Uq0OsYBXMNRG5RAxcnYDgOc1O7UAY5l7MMYDIxZSKgyIeJxKGD/YZOjEEg946RBMlek8OcOWl63lo8/bStAIwSrQ1xkQNGshzQAe9Yp1DJwsYHKGB750OddsLTN2sNY2eTRxBtq+KimsCTBWExlIJmodxMjZDQDakFIWDAZrVPyCgAM41xkREBpIuqy5Rx+bTynAeBVmNFSqDKzJcr9nDlPoSUJdg2Gehia/JMsDn79i9jEu7KqCEmAqPPiJ/Wy/vACOC60ANGBjxQYwFqs1xhgUArTKECPjU8IgrbFgjMUag7UWQVwyVoBlflV2LrgnPGMpWAWTIXguKGAq4EnP6ceGCirhvHGAimLTCXk23bUEU03QEhxgUrF+fZr1G/JQbYKOp5wxYB3AgrXYOZn51YBGEIOMN4TGDa0Go5hza61GmNhAUoIUC2NRWag1Fxpbxz0SWqCFsIB1wBAH4UCkYgkQ8WsJFxoKrAIl4h82QEqAbyGYCwZrFEb/R/MHrJHNNgMSACVS00rFH4hzTROB1WA9pnfVcRPQsTILaQ808SkBWDB2Yd6HAkS8xwJiXgawsUx8u43HsysgKQAD5YCjIz75bIJsMQlhONeTRmu0ElgNjWamTIyc3cRX+X2hOkpSWbQGT4XgRBjl8bXvHWbfrgb3OAnWrEuxcv0Segc7EIUkpCV4ou0HmAOwyEB8HYONGzQ04Cta002O7K0wOjLJyPaIc7fBEx7fy5Nmy5RmBHMZAKUstWmXwip1gBg5uwFgaqS2PUi5pCOLikArjasDdAjG9Vi65dWMTB/h3D+fifPLgxRTB+nthqWD0DeQodSdJpvz8JKzSjhIGY9dwBqLUoYo1LR8Rb0SMDXmc/hAwKGDMDkFNQVOcRlLT3owve4BguBC0CHoABNpVAQqtDSqkuJJlauB+Nx7KgBMV1acF9amddQybhRavCQkwgCZcFmSa7H0Pg9l470fyMS+HUzsHWV8z3YmD+xi2+E9+KOHsc0yVk3PKgQLIj5oiK+JZ4GbwPEKuJlBckuWUjxhmM0DK+lduZGugWFKA+v586dfR5939nwFBMG8+QiiQCM74JqLV55HjJzdAPCoLxzeOfJOb1t9qnlqIm+JIlBzT7B0l1pcc8avWXPq3SkWCgze98EkHvo4HAdM5BP6DZr1GvXaDH61QtCoE4at+T4CXJlAJtOkMlkyhSKZfAfpbB4vkwMniTaWVqNMs15n6sAo0zv/zfBDU9Dy0dcHb1EtTSNIbj8Y5q8iRnzlhacSQzrc/fZ7d09/SPalyRY90hmXbHeC0Z11vvzzFA9/x68Y3nwXpAiQVpH0JF4ySTKRJJFw8QS3iggII0sQBLMKCZUi0gJFkrO+9wkq572XN71mEFv3abUMvq9pzET4h5uMR8s+ArydGLkxfYQYPn6++cmWJ2TeU66HCZlykZ5LNKNYva7E+sEj/PuTz2LN3R9CafnJ9K89iVLPMnKlTpyEiytu+MPSxutiNBAY8P2QernMzOQ44/uvZWz0MmoHL2f/tn/xlEd3QMIQBhBGEDQNQUPR8IWNiv0/pA3xz7eeSjuZxv4f5uX4MzJ9GXJFj2TapaMnwf4JyXe/e5C0AJJgE0USpSEKfWsp9KwgU+on29FNKtNBMpNBesm4gTVKRbR8n8Cv4lcnqE0dpTa+n+rRXTRn9mODKZJCUSvDwFrJC587BOUajYal6Ssa5YhgvMGRZtcfgMfQhvj3K7pop9ravKpbnTvaOWxJdaTJFjyyKUFmIMfp57S4+IIJhgdAK0vLB78OTR8iDcIFIedX1xVYAdZYrIYoBKNAaJASMhlI5yCVhlQKmk3BRD3BU57Qx8CSiNpYQBBa/FpIc6ZF/ZBlT/qem4GraUP84lX3YTErei7/mN7ZeHPHWo9MIUEq7VLMS2RXjl//tcrua2cYWuYhBCAEAgAzd9rmP9JtE0jEcgSO6yKcWSGwWKwFIcTcKR8eh4dt6eekdYLGEZ9mZGg1FM1qRO1AiO+mvgy8gkWIs1+RZTEbXiEyV35UXFzqrG/M9qZJ5T1SKZdSh8Tkc/zq7xUO7Jyhv8eda15tLLcVIcB1BNVqxFTN4X4P7ONum1z8ozWaEbR8TasW4Y81mZnO7Fn9cnsyUGYRcuWzOYagZv1Vg+Kpuw8lr/CSLawQAEwbS4k6T91S4u/nJ7j8kgkKqZCOohf/jzunWwp8TlpZxo6GkEyx5dF9bF5paR2u4QfQamla9Yio0mK64rFimX2a+h1ljgWx7+1ZboqJ/ZknNWTl5z0DGplLk8g4pJIuHTmX5JIcOw4Kzr94hpmxGpmkpVCQOK7A2psOPgoN5bJCCY+BlR3c7+4FutMBtbEmzdASBprAV0T1gMlDgmRQeC7wPW4CcdEzurg57EbnRcGOyte7+xVeMYWXdvGSLmlPUOxOE8oMV+yKGN1dY3LMx2qFdEBgiROHtWAQRFqQTHv0L8uxbnWG9UMutlJnZiYg1A5RoIiairAaMHnQIbM581rgcwAnv6kiAHuMAWu5Rba+pevJtcONn3T1hE62y8NJenMmpIRsyiHXnUU7KY7MWManNdOVcK4xQ2URQNJzyGYlnSVJf5eku2jBb1KbatKMQCnmgtez8mdCJsYl2c789Sd/109PLQR/Gw1c/8S938iftPti/Y2sE5zS2SuQaQ937sPOwRGQTjpkcx5uIoGVEuE4GCEQ1iK47qeiQgUR9fq8OWMsKpxVZNCNkJkpg99IXDW4yXkhcCHAypc2bir42ECNmyeH4BAA9sivs9mDh3hn/Yh6Q7EYefmSi0xLXM+dq31HgiPE9eXjCAAwCKy1WByssWhtscqiIz1XMrWyoVKV5PLys4Mb7fuBmd7H+oI+Ym7OgOXWINiJAAzA7jM6Nhy40rwlKqunFrJBMl8UJFIubtLBcR2EI+bUjjV2XsqgIksUaKplQ72RUKm8/Hn3oPMJ4DKANRuqDo/GHhv47TYQo7hBOvd/O71xYp84rTxhHuu49ngZ2UTSNSTyloQLwmEeYwmVoBUKwshBWRGhxdW5bve3/Uv1b4AriBnY0nIAw61E2FFuD4IRiM0wfrEry43U+iiv76EzzsbKfjkUWlsUymTAoh2nmfZEuSOvDghltye0c36XCLYDIUDXPbTgRAAstxFh93D7sXFG7hh36DWEBRfQ3Bn8C0H/zZzkOIIJACx3Ev8FpgY0DjuQs6gAAAAASUVORK5CYII=" height="24" width="24" class="ml-2 cursor-pointer"  />
+            </template>
+            <template #offIcon>
+                <img src="data:image/png;base64,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" height="24" width="24" class="ml-2 cursor-pointer" />
+            </template>
+        </Rating>
     </div>
 </template>
 
@@ -224,6 +273,8 @@ export default {
         return {
             val1: null,
             val2: 3,
+            val3: 2,
+            val4: 2
         }
     }
 }
@@ -246,6 +297,19 @@ export default {
 
         <h5>Disabled</h5>
         <Rating :modelValue="8" :disabled="true" :stars="10" name="disabled" />
+
+        <h5>Templating</h5>
+        <Rating v-model="val4" name="templating">
+            <template #cancel>
+                <img src="data:image/png;base64,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" class="cursor-pointer" height="24" width="24"/>
+            </template>
+            <template #onIcon>
+                <img src="data:image/png;base64,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" height="24" width="24" class="ml-2 cursor-pointer"  />
+            </template>
+            <template #offIcon>
+                <img src="data:image/png;base64,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" height="24" width="24" class="ml-2 cursor-pointer" />
+            </template>
+        </Rating>
     </div>
 </template>
 
@@ -256,6 +320,8 @@ export default {
     setup() {
         const val1 = ref();
         const val2 = ref(3);
+        const val3 = ref(2);
+        const val4 = ref(2);
 
         return { val1, val2 }
     }
@@ -278,6 +344,19 @@ export default {
 
             <h5>Disabled</h5>
             <p-rating :modelValue="8" :disabled="true" :stars="10" name="disabled"></p-rating>
+
+            <h5>Templating</h5>
+            <p-rating v-model="val4" name="templating">
+            <template #cancel>
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAHAUlEQVR42u1ZbWwTdRx+Nrvd9bZrB4hMRA2STTroOkNsu7Z7QSTxgyaGxMSXRIPxJRg1orLwMtGBiFbGxnib42WMMUTFoCbqBz+YGL9o4geDRoEgwjq2ttetL9e73rXbmVv/hXNr99qBMfslT653u3t+z/O73//+978BszEbs/H/j/gjj+QmVq16bNDhWJ9YvZqZyVyJ6uq1ierqdfFHHy3MpoG8uN3enFi27Id4Tc2dMyVeXr2aSVgsJ+MWy1fxNWvmZ4945cp1ksEQlPLzE7LJdFh2OG7LuniHg5bN5nqZYaISRcXkyspd8Yceoqdf/dra5+WiogEJUIahkpeVfSQ7HPOyKr68fItUUBC6lkevF2Sb7f34ypVTM6E8/HCuXFv7nFRUFIoByr9AUZJcVtYmW63zsyCekS2W+hjLjsoj0bQoW607hyZr4ufy8nzlwQdfFouKBkaJT4GmZclkOiQ5HAumKj5msxVKFss7MZaNZsojUFQsYbe7lTVr2AkT/1hSUuU3GC4qgCKqJGQ7CjQdj5WWHhPt9kkPbNFqNYpm8/YYy4rpuAWCIUDhaTryU2npkxMm/3rx4oL9wCY/EFRNRAmEdKCoQbGkpEOw2++YKL9gtRrE5cu3iYWFiXScai6eiBeAwQ6g9ZvFi+dOqkLbAeYk8IYPiCqEmNeY0UKgaUVYurRdqKy8fTze6IoVBsFsbhBYdigdF68RzwPxL4ADjcCcKfXoXoA+DtR5AV4hxBFNEi2iSRNHok5nxnYSHI450bKydwSDIS1HmPAT8fIZoPXQVMWnYjdAdQB1vcRElCRKmdGCpyglajK1C07nXaMq73TOEyyW7Xxh4ejrCGcIUAaT29jnwMFWoCgrz+k9QN4JoK4bCA+RpEGSdCQiyTvRGbXb705dz9ts86Jm8w6eZdNeE9KI7wdiZ4D9zYAxqzNlE3DLceB1DxAiVRo2EUojJpyfr/ClpScjLlcx/8ADhbzZvDPMMNeEas8PEmjE72sEDDPyrrIX0H0KbLgMhIaIgH6NCC1COp0SMZtb+Pvv3xTS668Z1mKAGFK5AkDsK+BgU7baJlO0AXmdwKbL5BEbGcNEkKaHQgUFieAY4geJ+DPAwT3THbATjWYgrwvY2A0MDBEh/ZNAYHTbHGgCbr2ha4Q9AN0JbLwCDCSIII6IGwupc+Tkb/k0sH83cBtuRjQl54k3LwH9IqkuN454jkyKfclHZfMNr/zIeA/IawNeOpeTcyk0QuhIBMjA787J8XUCO9zZflRONb6/5x7m7Ny5XwZyc4dF+jOAI3fpnNH4y/dLliz5T4iP1dZS4ooVGwIGg8efk5NRfAo+1UhBQb9gNjeL1dXzbqr4fqeTCVgsWzmjMcQRcSn4M/xO7XN6vRwwmdoGXK4FN0U853AUcOXl27wsG/YCyljoI8JHHvMmTRwNuFwLb7R4vd9sVsVH+ogYLXoB5armfSm1n+5cL0XJ/nvvPcY5nTfGhN9q1fuTlU8r/iqB+tZ6CUicB4ZXXJlMqMf7aFrili49zlVWzmw7cU4n5Vu+/O0+o5G/SpJroR7rIc95dUycAD74CHj1CjAoaf6e7rpevV7yl5Z2cC7X/JkR73JRvoqKt3pZNppOvCrMQ8SrPf4ZcHg3cKsbYNqB+ktAfFwTNC17TaajXE1Ndic3v9PJ+C2Whl6DQchU+W6N+FNAazNwbXnZAhjbgU1/AbJEjHoyFOEqTcs+k+kYV1WVnTvhq6pifRUV23oZRuohSVJIVfMy6fnepPh9bqA4zcrOeASouwDIIjGg5dCil6LiPpOp02e3T29M+Fwutq+iosGj18c8aRKpx65cf7cZ+gRo+RDImLQRYE8AG84DUoxc352Gd5g7L2/QW1bW6bXZiqckXlq1yui1WLb2MIycSbyHrAd6gPip5Epq3Jn1IMAcBerOkTvRk8HEML9Op/SZTB1iTc3kTHxTUmIUbbZ3exhG6BlDfDi5L38KHNg1ibfKFkDfDmy8AIgx0nqZTHTrdIpw332d35aUTLydPl+0yPWrXn8xNEaFBpLtEzsF7G0EJj3gUibOAyGemPCkaU+1SBd1usjHxcWPT5j88MKFuvXAs78BXn6ECc918WIX0LJzGmvYJiD/ELDhDyAYJAPaoxkb4eSWdwNvPwHoJ51gM/DE74Bf1JAHk0aELqA5G58+3EDeYWD9BSCgNRFNio80AvX1wC1TTrAZeOos4BWuV0ToBJqzuRhxA7ojwGvnAG6AfOj6GwjvAt7aCuimnWAz8MyfgJ8D4l3AHvcMfPrYBejagNevAGH1Du8AGl7Jhng1XgRyPwDcXcB3DZoZNttRB+S3A+2twOmngblZI34ByN0CPNYIrN8MzOh/Kd3A2neBdWuBQszGbMzGuPEP0f6Mp5gQKNsAAAAASUVORK5CYII=" class="cursor-pointer" height="24" width="24"/>
+            </template>
+            <template #onIcon>
+                <img src="data:image/png;base64,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" height="24" width="24" class="ml-2 cursor-pointer"  />
+            </template>
+            <template #offIcon>
+                <img src="data:image/png;base64,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" height="24" width="24" class="ml-2 cursor-pointer" />
+            </template>
+            </p-rating>
         </div>
 
         <script type="module">
@@ -287,6 +366,8 @@ export default {
             setup() {
                 const val1 = ref();
                 const val2 = ref(3);
+                const val3 = ref(2);
+                const val4 = ref(2);
 
                 return { val1, val2 }
             },