feat(version): 🔖 Update to version 3 (vue 3)

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-/dist
 
 
 # local env files

README.md

@@ -1,35 +1,26 @@
 # vue-bottom-navigation
 
-> ⚠️ **In version > 2 we have many bottom navigations with basic structure but they have individual options**
-
+## Documents
 [Documents](https://vue-bottom-navigation.herokuapp.com/)
 
-[Demos](https://vue-bottom-navigation.herokuapp.com/navigations/)
-
-## Curved bottom navigation
-
-- [**Installation**](https://vue-bottom-navigation.herokuapp.com/guide/curved)
-- [**Demo**](https://vue-bottom-navigation.herokuapp.com/navigations/curved)
-
-## Grow bottom navigation
-
-- [**Installation**](https://vue-bottom-navigation.herokuapp.com/guide/grow)
-- [**Demo**](https://vue-bottom-navigation.herokuapp.com/navigations/grow)
-
-## Swipe bottom navigation
-
-- [**Installation**](https://vue-bottom-navigation.herokuapp.com/guide/swipe)
-- [**Demo**](https://vue-bottom-navigation.herokuapp.com/navigations/swipe)
-
-## Ring bottom navigation
-
-- [**Installation**](https://vue-bottom-navigation.herokuapp.com/guide/ring)
-- [**Demo**](https://vue-bottom-navigation.herokuapp.com/navigations/ring)
-
-## Windows bottom navigation
-
-- [**Installation**](https://vue-bottom-navigation.herokuapp.com/guide/windows)
-- [**Demo**](https://vue-bottom-navigation.herokuapp.com/navigations/windows)
+## Demo
+[Demo](https://vue-bottom-navigation.herokuapp.com/navigations/)
+
+## Installation
+### Vue 3
+```shell
+# npm
+$ npm install bottom-navigation-vue
+# yarn
+$ yarn add bottom-navigation-vue
+```
+### Vue 2
+```shell
+# npm
+$ npm install [email protected]
+# yarn
+$ yarn add [email protected]
+```
 
 # License
 

dist/library.mjs

@@ -0,0 +1 @@
+import{ref as e,computed as t,watch as l,onMounted as n,onBeforeUnmount as o,nextTick as a,openBlock as i,createElementBlock as s,normalizeStyle as c,createElementVNode as r,Fragment as d,renderList as u,normalizeClass as v,toDisplayString as p,createCommentVNode as b,renderSlot as m,createTextVNode as g,withModifiers as h,withDirectives as f,vShow as C,pushScopeId as y,popScopeId as k}from"vue";import{useRouter as w,useRoute as $}from"vue-router";var B={props:{modelValue:{default:null},options:{type:Array,default:()=>[]},foregroundColor:{type:String,default:"#42A5F5"},backgroundColor:{type:String,default:"#FFFFFF"},iconColor:{type:String,default:"#0000008A"},badgeColor:{type:String,default:"#FBC02D"},replaceRoute:{type:Boolean,default:!1}},setup(i,{emit:s}){const c=w();$();const r=e([]),d=e(!1),u=e(!0),v=t((()=>{const e=((r.value.find((e=>e.isActive))||{}).childs||[]).length;return{"--color-foreground":i.foregroundColor,"--color-background":i.backgroundColor,"--color-icon":i.iconColor,"--color-badge":i.badgeColor,"--width-parent":45*e+"px"}})),p=t((()=>r.value.find((e=>e.isActive))));function b(){let e="";const t=document.querySelector(".btn-container").offsetWidth||window.innerWidth;i.options.forEach(((l,n)=>{0===n&&C(l)&&(e+=`\n          .btn-item-${n}.checked .btn-class-showable .btn-child-parent {\n            transform: translateX(${45*l.childs.length/2-35}px);\n            transition: transform 500ms ease 300ms;\n          }\n          `),n===i.options.length-1&&C(l)&&(e+=`\n          .btn-item-${n}.checked .btn-class-showable .btn-child-parent {\n            transform: translateX(-${45*l.childs.length/2-35}px);\n            transition: transform 500ms ease 300ms;\n          }\n          `),e+=`\n        .btn-item-${n} {\n          padding: 10px;\n          transition: transform 100ms ease;\n          width : ${t/i.options.length}px !important;\n          display: flex;\n          justify-content :center;\n          align-items : center;\n          position: relative;\n          z-index: 10;\n        }\n\n        .btn-item-${n}.checked ~ #sweep {\n          transform: translateX(${n*t/i.options.length+t/i.options.length/4}px);\n          transition: transform 500ms ease;\n        }\n        `,C(l)&&l.childs.forEach(((t,o)=>{e+=`\n            .btn-item-${n}.checked .btn-class-showable .btn-child:nth-child(${o+1}) {\n              transform: translateX(${45*(.5+o)-45*l.childs.length/2}px);\n              transition: transform 500ms ease 300ms;\n            }\n          `}))})),document.getElementById("sweep").style.left=`\n      ${t/i.options.length/4-67.5}px`;const l=document.getElementsByTagName("head")[0],n=document.createElement("style");n.id="bottom-navigation-style",n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e)),l.appendChild(n)}function m(e,t=!1){r.value.forEach((t=>t.isActive=h(t,e.id))),t||(s("update:modelValue",e.id),u.value=!1,setTimeout((()=>{u.value=!0}),0),e.path&&Object.keys(e.path).length&&(i.replaceRoute?c.replace(e.path).catch((()=>{})):c.push(e.path)))}function g(){d.value=!d.value}function h(e,t=i.modelValue){return e.id==t||(e.childs||[]).find((e=>e.id==t))}function f(){a((()=>{const e=document.getElementById("bottom-navigation-style");e&&e.remove()})),b()}function C(e){return(e.childs||[]).length}return l((()=>i.modelValue),((e,t)=>{if(e!=t&&u.value){const t=[];r.value.forEach((e=>{e.childs&&t.push(...e.childs)}));const l=[...r.value,...t].find((t=>t.id==e));l&&m(l,C(l))}})),l((()=>i.options),(e=>{e&&(r.value=e.map((e=>({...e,isActive:h(e)}))),b())}),{deep:!0}),n((()=>{b(),window.addEventListener("resize",f)})),o((()=>window.removeEventListener("resize",f))),r.value=i.options.map((e=>({...e,isActive:h(e)}))),{cssVariables:v,handleChildClick:function(e){m(e),g()},handleLabelClick:function(e){d.value&&!e.isActive||g(),m(e,C(e))},hasChild:C,localOptions:r,hasActiveClass:p,showable:d}}};const V=e=>(y("data-v-02d52b78"),e=e(),k(),e),F={class:"btn-container"},x=["onClick"],S={class:"active-label"},_={key:0,class:"btn-badge"},A={class:"btn-title"},N={class:"btn-child-parent"},I=["onClick"],O={class:"btn-child-title"},R={key:0,class:"btn-child-badge"},E={id:"sweep"},T=[V((()=>r("div",{id:"sweep-right"},null,-1))),V((()=>r("div",{id:"sweep-center"},null,-1))),V((()=>r("div",{id:"sweep-left"},null,-1)))];B.render=function(e,t,l,n,o,a){return i(),s("div",{class:"btn-container_foreground",style:c(n.cssVariables)},[r("div",F,[(i(!0),s(d,null,u(n.localOptions,((t,l)=>(i(),s("div",{key:`label-${l}`,class:v({[`btn-item-${l} labels`]:!0,checked:t.isActive,unchecked:!t.isActive}),onClick:e=>n.handleLabelClick(t)},[r("div",S,[t.badge?(i(),s("div",_,p(t.badge),1)):b("v-if",!0),m(e.$slots,"icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)]))]),r("div",A,[m(e.$slots,"title",{props:t},(()=>[g(p(t.title),1)]))]),n.hasChild(t)?(i(),s("div",{key:0,class:v({"btn-super-parent":t.isActive,"btn-class-showable":n.showable})},[r("div",N,[(i(!0),s(d,null,u(t.childs||[],((t,l)=>(i(),s("div",{key:l,class:"btn-child",onClick:h((e=>n.handleChildClick(t)),["stop"])},[m(e.$slots,"child-icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)])),r("span",O,[m(e.$slots,"child-title",{props:t},(()=>[g(p(t.title),1)]))]),t.badge?(i(),s("div",R,p(t.badge),1)):b("v-if",!0)],8,I)))),128))])],2)):b("v-if",!0)],10,x)))),128)),f(r("div",E,T,512),[[C,n.hasActiveClass]])])],4)},B.__scopeId="data-v-02d52b78",B.__file="src/components/CurvedBottomNavigation.vue";var j={props:{modelValue:{default:null},options:{type:Array,default:()=>[]},color:{type:String,default:"#74cbbb"},replaceRoute:{type:Boolean,default:!1}},setup(n,{emit:o}){const a=w(),i=$(),s=e(null),c=e(null),r=e([]),d=e(!0),u=t((()=>{const e=(r.value[c.value]||{}).title;let t=95;e&&15*e.length>110&&(t=95+(15*e.length-110)/2);const l=(r.value[c.value]||{}).color||n.color;return{"--color":l,"--color-background":l+"30","--active-width":`${t}px`}}));function v(e,t){t!==c.value&&(c.value=t,null!==s.value&&(r.value[s.value].selected=!1),r.value[t].selected=!0,s.value=c.value,function(e){o("update:modelValue",e.id),d.value=!1,setTimeout((()=>{d.value=!0}),0),e.path&&Object.keys(e.path).length&&(n.replaceRoute?a.replace(e.path).catch((()=>{})):a.push(e.path))}(e))}l((()=>n.modelValue),((e,t)=>{if(e!=t&&d.value){const t=r.value.findIndex((t=>t.id==e));t>-1&&v(r.value[t],t)}})),r.value=n.options.slice();const p=r.value.findIndex((e=>e.id==n.modelValue||(e.path||{}).name==(i||{}).name));return p>-1&&(c.value=p,s.value=p,r.value[p].selected=!0),{cssVariables:u,handleButtonClick:v,localOptions:r}}};const L=["to","onClick"],W={class:"gr-btn-title"},X={class:"gr-hidden-title"};j.render=function(e,t,l,n,o,a){return i(),s("div",{class:"gr-btn-container-foreground",style:c(n.cssVariables)},[(i(!0),s(d,null,u(n.localOptions,((t,l)=>(i(),s("div",{key:`grow-button-${l}`,class:v(["gr-btn-container",{"gr-btn-container-active":t.selected}]),to:t.path,onClick:e=>n.handleButtonClick(t,l)},[r("div",{class:v(["gr-btn-item",{"gr-btn-item-active":t.selected}])},[r("div",{class:v(["gr-btn-icon",{"gr-btn-icon-active":t.selected}])},[m(e.$slots,"icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)]))],2),r("div",W,[r("span",X,[m(e.$slots,"title",{props:t},(()=>[g(p(t.title),1)]))]),r("span",{class:v(["gr-animated-title",{"gr-animated-title-active":t.selected}])},[m(e.$slots,"title",{props:t},(()=>[g(p(t.title),1)]))],2)])],2)],10,L)))),128))],4)},j.__scopeId="data-v-7301d7fc",j.__file="src/components/GrowBottomNavigation.vue";var z={props:{modelValue:{default:null},options:{type:Array,required:!0},iconColor:{type:String,default:"#669C35"},titleColor:{type:String,default:"#669C35"},borderColor:{type:String,default:"#4F7A28"},backgroundColor:{type:String,default:"#FFFFFF"},badgeColor:{type:String,default:"#FBC02D"},replaceRoute:{type:Boolean,default:!1}},setup(n,{emit:o}){const a=w(),i=$(),s=e(null),c=e(null),r=e([]),d=e(!0),u=t((()=>({"--border-color":n.borderColor,"--icon-color":n.iconColor,"--background-color":n.backgroundColor,"--title-color":n.titleColor,"--badge-color":n.badgeColor})));function v(e,t){if(t!==c.value){if(c.value=t,null!==s.value){const e=s.value;setTimeout((()=>{r.value[e].deselect=!1}),100),r.value[s.value].selected=!1,r.value[s.value].deselect=!0}r.value[t].selected=!0,s.value=c.value,function(e){o("update:modelValue",e.id),d.value=!1,setTimeout((()=>{d.value=!0}),0),e.path&&Object.keys(e.path).length&&(n.replaceRoute?a.replace(e.path).catch((()=>{})):a.push(e.path))}(e)}}l((()=>n.modelValue),((e,t)=>{if(e!=t&&d.value){const t=r.value.findIndex((t=>t.id==e));t>-1&&v(r.value[t],t)}})),r.value=n.options.slice();const p=r.value.findIndex((e=>e.id==n.modelValue||(e.path||{}).name==(i||{}).name));return p>-1&&(c.value=p,s.value=p,r.value[p].selected=!0),{cssVariables:u,handleButtonClick:v,localOptions:r}}};const q=["onClick"],G={class:"rg-btn-item"},D={key:0,class:"rg-btn-badge"};z.render=function(e,t,l,n,o,a){return i(),s("div",{class:"rg-btn-container-foreground",style:c(n.cssVariables)},[(i(!0),s(d,null,u(n.localOptions,((t,l)=>(i(),s("div",{key:`ring-btn-${l}`,class:"rg-btn-container",onClick:e=>n.handleButtonClick(t,l)},[r("div",G,[r("div",{class:v([{"rg-btn-border":t.selected},{"rg-btn-border-deselect":t.deselect}])},null,2),r("div",{class:v(["rg-btn-icon",{"rg-btn-icon-active":t.selected},{"rg-btn-icon-deselect":t.deselect}])},[m(e.$slots,"icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)])),t.badge>0?(i(),s("div",D)):b("v-if",!0)],2),r("div",{class:v(["rg-btn-title",{"rg-btn-title-active":t.selected}])},[m(e.$slots,"title",{props:t},(()=>[g(p(t.title),1)]))],2)])],8,q)))),128))],4)},z.__scopeId="data-v-a2867cc2",z.__file="src/components/RingBottomNavigation.vue";var H={props:{modelValue:{default:null},options:{type:Array,required:!0},backgroundColor:{type:String,default:"#FFFFFF"},iconColor:{type:String,default:"#8066C7"},swiperColor:{type:String,default:"#8066C7"},replaceRoute:{type:Boolean,default:!1}},setup(a,{emit:i}){const s=w(),c=$(),r=e(null),d=e(null),u=e([]),v=e(!0),p=e(0),b=e(null),m=e(null),g=t((()=>({"--swiper-color":a.swiperColor,"--icon-color":a.iconColor,"--background-color":a.backgroundColor})));function h(){p.value=m.value[0].offsetWidth,b.value.style.width=p.value+"px",b.value.style.transform=`translateX(${p.value*d.value}px)`}function f(){h()}function C(e,t){t!==d.value&&(d.value=t,null!==r.value&&(u.value[r.value].selected=!1),u.value[t].selected=!0,r.value=d.value,function(e){i("update:modelValue",e.id),v.value=!1,setTimeout((()=>{v.value=!0}),0),e.path&&Object.keys(e.path).length&&(a.replaceRoute?s.replace(e.path).catch((()=>{})):s.push(e.path))}(e))}l((()=>d.value),(e=>{b.value&&(b.value.style.transform=`translateX(${p.value*e}px)`)})),l((()=>a.modelValue),((e,t)=>{if(e!=t&&v.value){const t=u.value.findIndex((t=>t.id==e));t>-1&&C(u.value[t],t)}})),n((()=>{h(),window.addEventListener("resize",f)})),o((()=>window.removeEventListener("resize",f))),u.value=a.options.slice();const y=u.value.findIndex((e=>e.id==a.modelValue||(e.path||{}).name==(c||{}).name));return y>-1&&(d.value=y,r.value=y,u.value[y].selected=!0),{cssVariables:g,handleButtonClick:C,localOptions:u,borderSwiper:b,btnContainer:m}}};const J=["onClick"],K={class:"sm-btn-item"},M={ref:"borderSwiper",class:"border-swiper"};H.render=function(e,t,l,n,o,a){return i(),s("div",{class:"sm-btn-container-foreground",style:c(n.cssVariables)},[(i(!0),s(d,null,u(n.localOptions,((t,l)=>(i(),s("div",{key:`simple-btn-${l}`,ref_for:!0,ref:"btnContainer",class:"sm-btn-container",onClick:e=>n.handleButtonClick(t,l)},[r("div",K,[r("div",{class:v(["sm-btn-icon",{"sm-btn-icon-active":t.selected}])},[m(e.$slots,"icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)]))],2),r("div",{class:v(["sm-btn-title",{"sm-btn-title-active":t.selected}])},[m(e.$slots,"title",{props:t},(()=>[g(p(t.title),1)]))],2)])],8,J)))),128)),r("div",M,null,512)],4)},H.__scopeId="data-v-22a64d79",H.__file="src/components/SwipeBottomNavigation.vue";var P={props:{modelValue:{default:null},options:{type:Array,required:!0},borderColor:{type:String,default:"#9B9B9B"},backgroundColor:{type:String,default:"#FFFFFF"},badgeColor:{type:String,default:"#828282"},replaceRoute:{type:Boolean,default:!1}},setup(n,{emit:o}){const a=w(),i=$(),s=e(null),c=e(null),r=e([]),d=e(!0),u=t((()=>({"--border-color":n.borderColor,"--background-color":n.backgroundColor,"--badge-color":n.badgeColor})));function v(e,t){if(t!==c.value){if(c.value=t,null!==s.value){const e=s.value;setTimeout((()=>{r.value[e].deselect=!1}),300),r.value[s.value].selected=!1,r.value[s.value].deselect=!0}r.value[t].selected=!0,s.value=c.value,function(e){o("update:modelValue",e.id),d.value=!1,setTimeout((()=>{d.value=!0}),0),e.path&&Object.keys(e.path).length&&(n.replaceRoute?a.replace(e.path).catch((()=>{})):a.push(e.path))}(e)}}l((()=>n.modelValue),((e,t)=>{if(e!=t&&d.value){const t=r.value.findIndex((t=>t.id==e));t>-1&&v(r.value[t],t)}})),r.value=n.options.slice();const p=r.value.findIndex((e=>e.id==n.modelValue||(e.path||{}).name==(i||{}).name));return p>-1&&(c.value=p,s.value=p,r.value[p].selected=!0),{cssVariables:u,handleButtonClick:v,localOptions:r}}};const Q=["onClick"],U={class:"wn-btn-item"},Y={key:0,class:"wn-btn-badge"};P.render=function(e,t,l,n,o,a){return i(),s("div",{class:"wn-btn-container-foreground",style:c(n.cssVariables)},[(i(!0),s(d,null,u(n.localOptions,((t,l)=>(i(),s("div",{key:`windows-btn-${l}`,class:"wn-btn-container",onClick:e=>n.handleButtonClick(t,l)},[r("div",U,[r("div",{class:v(["wn-btn-icon",{"wn-btn-icon-active":t.selected},{"wn-btn-icon-deselect":t.deselect}]),style:c(`color:${t.color}`)},[m(e.$slots,"icon",{props:t},(()=>[r("i",{class:v(`${t.icon}`)},null,2)])),t.badge>0?(i(),s("div",Y,p(t.badge),1)):b("v-if",!0)],6),r("div",{class:v(["wn-btn-border",{"wn-btn-border-selected":t.selected},{"wn-btn-border-deselect":t.deselect}])},null,2)])],8,Q)))),128))],4)},P.__scopeId="data-v-67637842",P.__file="src/components/WindowsBottomNavigation.vue";const Z={install(e){e.component("CurvedBottomNavigation",B),e.component("GrowBottomNavigation",j),e.component("SwipeBottomNavigation",H),e.component("RingBottomNavigation",z),e.component("WindowsBottomNavigation",P)}};export{B as CurvedBottomNavigation,j as GrowBottomNavigation,z as RingBottomNavigation,H as SwipeBottomNavigation,P as WindowsBottomNavigation,Z as default};