@tiddh/brave-vue 1.92.20 → 1.92.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/brave-vue.esm.js +17 -17
- package/dist/brave-vue.min.js +1 -1
- package/dist/brave-vue.ssr.js +2 -2
- package/dist/src/Navigation/Stepper.vue +52 -46
- package/dist/src/Navigation/TopBar.stories.js +69 -0
- package/dist/src/Navigation/TopBar.vue +70 -0
- package/dist/src/Preview/PreviewWithTools.vue +1 -1
- package/dist/src/PreviewWithTools.vue +1 -1
- package/dist/src/Stepper.vue +52 -46
- package/dist/src/TopBar.stories.js +69 -0
- package/dist/src/TopBar.vue +10 -55
- package/dist/src/components/Navigation/Stepper.vue +52 -46
- package/dist/src/components/Navigation/TopBar.stories.js +69 -0
- package/dist/src/components/Navigation/TopBar.vue +70 -0
- package/dist/src/components/Preview/PreviewWithTools.vue +1 -1
- package/package.json +1 -1
package/dist/brave-vue.ssr.js
CHANGED
|
@@ -1518,7 +1518,7 @@ have_layout:{type:Boolean,required:!1,default:!1},
|
|
|
1518
1518
|
have_birth_date:{type:Boolean,required:!1,default:!1},
|
|
1519
1519
|
/** Show Pet. */
|
|
1520
1520
|
have_pet:{type:Boolean,required:!1,default:!1},typeLanguage:{type:String,required:!1,default:"br"},apiUrl:{type:String,required:!1,default:"https://builder.dentrodahistoria.com.br"}},data:function(){return{isLoaded:!0,isMobile:!1,uuid:"ddh5e5fb1b09b88d",pages:32,age:6,character_id:57,product_id:595}},mounted:function(){var t=this;t.isMobile=t.detectSize(),window.addEventListener("resize",(function(e){t.isMobile=t.detectSize()}))},methods:{detectSize:function(){var t=!1;return window.innerWidth<990&&(t=!0),t},isLoadingMethod:function(t){this.isLoaded=t},changeUuid:function(t){this.uuid=t,//.uuid
|
|
1521
|
-
this.isLoaded=!0}}},void 0,!1,"data-v-379ddc4b",!1,void 0,b,void 0),xt=g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"stepper"},t._l(t.routes,(function(e,i){return t._ssrNode('<div class="stepper-links" data-v-50d03b51>',"</div>",[t._ssrNode('<div class="stepper-links-item-area" data-v-50d03b51>',"</div>",[a("Paragraph",{staticClass:"stepper-link-text",class:t.routes.length-1==i?"is-current":null,attrs:{size:"sm",color:"#AFA2BA"},on:{click:function(e){t.routes.length-1==i&&t.click()}}},[t._v(t._s(e.stepperName))])],1),t._ssrNode(" "),t.routes.length-1!=i?a("Paragraph",{staticClass:"stepper-link-divider",attrs:{size:"sm",color:"#AFA2BA"},domProps:{innerHTML:t._s("/")}}):t._e()],2)})),0)},staticRenderFns:[]},(function(t){t&&t("data-v-50d03b51_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-50d03b51]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-50d03b51]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-50d03b51]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-50d03b51]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-50d03b51]{font-size:14px}}@media (min-width:1024px){[data-v-50d03b51]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-50d03b51]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-50d03b51]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-50d03b51]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-50d03b51]{font-size:1.56vw}}html[data-v-50d03b51]{box-sizing:border-box}*[data-v-50d03b51],[data-v-50d03b51]::after,[data-v-50d03b51]::before{box-sizing:border-box}.stepper[data-v-50d03b51]{display:flex;flex-wrap:wrap;position:relative}.stepper .stepper-links[data-v-50d03b51]{display:flex;flex-wrap:wrap}.stepper .stepper-links .stepper-links-item-area[data-v-50d03b51]{display:flex;cursor:pointer}.stepper .stepper-links .stepper-links-item-area:hover p[data-v-50d03b51]{color:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon[data-v-50d03b51]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon svg[data-v-50d03b51]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon svg path[data-v-50d03b51]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper[data-v-50d03b51]{display:block;position:absolute;top:24px;padding:1.1428571429rem;display:flex;flex-wrap:wrap;width:180px;left:40px;box-shadow:4px 4px 16px rgba(175,162,186,.24);background-color:#fff}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper .stepper-links[data-v-50d03b51]{width:100%}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper .stepper-links p[data-v-50d03b51]{width:100%;text-align:center}.stepper .stepper-links .stepper-links-item-area .dropdown-stepper[data-v-50d03b51]{display:none}.stepper .stepper-links .stepper-links-item-area .stepper-link-text.is-current[data-v-50d03b51]{cursor:default;color:#68596e!important}.stepper .stepper-links .stepper-links-item-area .icon[data-v-50d03b51]{width:1.1428571429rem;height:1.1428571429rem;position:relative}.stepper .stepper-links .stepper-links-item-area .icon svg[data-v-50d03b51]{width:1.1428571429rem;height:1.1428571429rem}.stepper .stepper-links .stepper-link-divider[data-v-50d03b51]{margin-right:.380952381rem;margin-left:.380952381rem}',map:void 0,media:void 0})}),{name:"Stepper",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k},props:{routes:{type:Array,required:!0}},methods:{onClick:function(){this.$emit("click")},action:function(){this.$emit("changeUrl")},closeModal:function(){this.$emit("closeModal"),document.getElementsByTagName("html")[0].removeAttribute("style"),document.getElementsByTagName("body")[0].removeAttribute("style"),document.getElementsByClassName("boxes")&&document.getElementsByClassName("boxes").length>0&&document.getElementsByClassName("boxes")[0].removeAttribute("style")}},computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-50d03b51",!1,"data-v-50d03b51",!1,void 0,b,void 0),yt=g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return t.isLoaded?a("div",{staticClass:"preview-full"},[t._ssrNode('<div class="top-bar-area">',"</div>",[a("TopBar",{attrs:{breadcrumbs:t.breadcrumbs}})],1),t._ssrNode(" "),t.isLoaded&&!t.isMobile?t._ssrNode('<div class="preview-desktop-area">',"</div>",[a("Preview",{attrs:{uuid:t.uuid,pages:t.pages,book_format:t.book_format,product_id:t.product_id,typeLanguage:t.typeLanguage}})],1):t._e(),t._ssrNode(" "),t.isLoaded&&t.isMobile?t._ssrNode('<div class="preview-mobile-area">',"</div>",[a("PreviewMobile",{attrs:{uuid:t.uuid,pages:t.pages,book_format:t.book_format,product_id:t.product_id,typeLanguage:t.typeLanguage}})],1):t._e(),t._ssrNode(" "),t._ssrNode("<div"+t._ssrClass("preview-mobile-tools",t.isLoaded?"":"invisible")+">","</div>",[t.have_tools?a("PreviewTools",{attrs:{dedication_text:t.dedication_text,uuid:t.uuid,slug:t.slug,character_id:t.character_id,have_dedication:t.have_dedication,product_id:t.product_id,gender:t.gender,typeLanguage:t.typeLanguage,language:t.language,languages:t.languages,layout:t.layout,layouts:t.layouts,preview_color:t.preview_color,character_position_id:t.character_position_id,typeRead:t.typeRead,custom_mes:t.custom_mes,custom_numero:t.custom_numero},on:{isLoadingMethod:t.isLoadingMethod,changeUuid:t.changeUuid,changeName:t.changeName,changeBirthday:t.changeBirthday}}):t._e()],1),t._ssrNode(" "),t._ssrNode('<div class="bottom-bar-area">',"</div>",[a("BottomBar",{attrs:{uuid:t.uuid,book_brand:t.book_brand,book_name:t.book_name},on:{changeUrl:t.changeUrl}})],1)],2):t._e()},staticRenderFns:[]},(function(t){t&&t("data-v-ccc4fcae_0",{source:'.storybook-6{width:columns("lg", 6)}.storybook-12{width:columns("lg", 12)}.storybook-25{width:columns("lg", 25)}.invisible{opacity:0}.preview-full{height:100vh}.preview-mobile-area{width:100%;position:relative}.preview-desktop-area{position:relative;z-index:4;height:calc(100vh - px-size("lg", 190px));display:flex;justify-content:center}@media (max-width:990px){.preview-mobile-tools{position:relative;z-index:20}}.custom-properties{position:absolute;top:30px}',map:void 0,media:void 0})}),{name:"PreviewWithTools",components:{Preview:vt,PreviewMobile:gt,PreviewTools:bt,TopBar:g({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"top-bar"},[this._ssrNode('<div class="preview-button" data-v-62150712>',"</div>",[e("Icon",{staticClass:"back-button",attrs:{name:"arrow-left",fill:"#AFA2BA",stroke:"transparent"}})],1),this._ssrNode(" "),this.breadcrumbs?this._ssrNode('<div class="steppers" data-v-62150712>',"</div>",[e("Stepper",{attrs:{routes:this.breadcrumbs}})],1):this._e()],2)},staticRenderFns:[]},(function(t){t&&t("data-v-62150712_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-62150712]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-62150712]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-62150712]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-62150712]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-62150712]{font-size:14px}}@media (min-width:1024px){[data-v-62150712]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-62150712]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-62150712]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-62150712]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-62150712]{font-size:1.56vw}}html[data-v-62150712]{box-sizing:border-box}*[data-v-62150712],[data-v-62150712]::after,[data-v-62150712]::before{box-sizing:border-box}.top-bar[data-v-62150712]{position:relative;width:100%;top:0;left:0;padding-top:1.1428571429rem;padding-bottom:1.1428571429rem;display:flex;flex-wrap:wrap;align-items:center;padding-left:2.7777777778vw}.top-bar .preview-button[data-v-62150712]{width:1.1428571429rem;height:1.1428571429rem;margin-right:.7619047619rem}.top-bar .preview-button .icon[data-v-62150712]{width:1.1428571429rem;height:1.1428571429rem;display:block}.top-bar .preview-button .icon svg[data-v-62150712]{width:1.1428571429rem;height:1.1428571429rem}.preview-button[data-v-62150712]{cursor:pointer}',map:void 0,media:void 0})}),{name:"TopBar",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k,Stepper:xt},props:{breadcrumbs:{type:Array,required:!0}},data:function(){return{}},methods:{onClick:function(){this.$emit("click")}},computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-62150712",!1,"data-v-62150712",!1,void 0,b,void 0),BottomBar:g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"bottom-bar"},[t._ssrNode('<div class="book-area" data-v-099f5504>',"</div>",[t._ssrNode('<div class="book-cover" data-v-099f5504><img'+t._ssrAttr("src","https://builder.dentrodahistoria.com.br/api/builder/getpreview/"+t.uuid+"?page=1&w=500&v=0&noCache=true")+' width="46" alt data-v-099f5504></div> '),t._ssrNode('<div class="book-info" data-v-099f5504>',"</div>",[t._ssrNode("<div data-v-099f5504>","</div>",[t.book_brand?a("Paragraph",{attrs:{size:"sm",color:"'#ccc'"}},[t._v(t._s(t.book_brand))]):t._e(),t._ssrNode(" "),t.book_name?a("Paragraph",{attrs:{size:"sm",color:"'#ccc'",type:"bold"}},[t._v(t._s(t.book_name))]):t._e()],2)])],2),t._ssrNode(" "),t._ssrNode('<div class="btn-foward" data-v-099f5504>',"</div>",[a("Button",{attrs:{kind:"primary",size:"md",width:"liquid"},on:{click:t.action}},[a("span",[t._v("Continuar")])])],1)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-099f5504_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-099f5504]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-099f5504]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-099f5504]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-099f5504]{font-size:14px}}@media (min-width:1024px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-099f5504]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-099f5504]{font-size:1.56vw}}html[data-v-099f5504]{box-sizing:border-box}*[data-v-099f5504],[data-v-099f5504]::after,[data-v-099f5504]::before{box-sizing:border-box}.bottom-bar[data-v-099f5504]{position:relative;width:100%;bottom:0;left:0;box-shadow:0 10px 26px rgba(104,89,110,.24);padding-top:1.1428571429rem;padding-bottom:1.1428571429rem;display:flex;flex-wrap:wrap;align-items:center;width:100%;justify-content:space-between;padding-left:1.7142857143rem;z-index:4;position:absolute;z-index:23;bottom:0}.bottom-bar .book-area[data-v-099f5504]{display:flex;align-content:center;flex-wrap:wrap}.bottom-bar .book-area .book-cover[data-v-099f5504]{display:flex;align-content:center;flex-wrap:wrap}.bottom-bar .book-area .book-info[data-v-099f5504]{display:flex;padding-left:1.7142857143rem;flex-wrap:nowrap;align-items:center}.bottom-bar .book-area .book-info p[data-v-099f5504]{width:100%}.bottom-bar .btn-foward[data-v-099f5504]{display:flex;padding-right:1.7142857143rem}',map:void 0,media:void 0})}),{name:"BottomBar",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k,Stepper:xt},props:{uuid:{type:String,required:!1},book_name:{type:String,required:!1},book_brand:{type:String,required:!1}},data:function(){return{isMobile:null,routes:[{path:"index",stepperName:"Etapa 2"},{path:"second",stepperName:"5 - Próximos personagens"}]}},mounted:function(){var t=this;t.isMobile=t.detectSize(),window.addEventListener("resize",(function(e){t.isMobile=t.detectSize()}))},methods:(ht={detectSize:function(){var t=!1;return window.innerWidth<990&&(t=!0),t},onClick:function(){this.$emit("click")},action:function(){this.$emit("changeUrl")}},T(ht,"detectSize",(function(){var t=!1;return window.innerWidth<990&&(t=!0),t})),T(ht,"closeModal",(function(){this.$emit("closeModal"),document.getElementsByTagName("html")[0].removeAttribute("style"),document.getElementsByTagName("body")[0].removeAttribute("style"),document.getElementsByClassName("boxes")&&document.getElementsByClassName("boxes").length>0&&document.getElementsByClassName("boxes")[0].removeAttribute("style")})),ht),computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-099f5504",!1,"data-v-099f5504",!1,void 0,b,void 0)},props:{dedication_text:{type:String,required:!1},
|
|
1521
|
+
this.isLoaded=!0}}},void 0,!1,"data-v-379ddc4b",!1,void 0,b,void 0),xt=g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"stepper"},t._l(t.routes,(function(e,i){return t._ssrNode('<div class="stepper-links" data-v-01f01c98>',"</div>",[t._ssrNode('<div class="stepper-links-item-area" data-v-01f01c98>',"</div>",[a("Paragraph",{staticClass:"stepper-link-text",class:t.routes.length-1==i?"is-current":"not-current",attrs:{size:"sm",color:t.color},on:{click:function(a){t.routes.length,t.onClick(e)}}},[a("div",{staticClass:"preview-button",style:"color:"+t.color,on:{click:function(a){return t.onClick(e)}}},[0==i?a("Icon",{staticClass:"back-button",attrs:{name:"arrow-left",fill:t.color,color:t.color,size:"sm",stroke:"transparent"}}):t._e()],1),t._v("\n\n\t\t\t\t"+t._s(e.stepperName))])],1),t._ssrNode(" "),t.routes.length-1!=i?a("Paragraph",{staticClass:"stepper-link-divider",attrs:{size:"sm",color:t.color},domProps:{innerHTML:t._s("/")}}):t._e()],2)})),0)},staticRenderFns:[]},(function(t){t&&t("data-v-01f01c98_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-01f01c98]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-01f01c98]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-01f01c98]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-01f01c98]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-01f01c98]{font-size:14px}}@media (min-width:1024px){[data-v-01f01c98]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-01f01c98]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-01f01c98]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-01f01c98]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-01f01c98]{font-size:1.56vw}}html[data-v-01f01c98]{box-sizing:border-box}*[data-v-01f01c98],[data-v-01f01c98]::after,[data-v-01f01c98]::before{box-sizing:border-box}.stepper[data-v-01f01c98]{display:flex;flex-wrap:wrap;position:relative}.stepper .stepper-links[data-v-01f01c98]{display:flex;flex-wrap:wrap}.stepper .stepper-links .stepper-links-item-area[data-v-01f01c98]{display:flex;cursor:pointer}.stepper .stepper-links .stepper-links-item-area:hover .preview-button .icon[data-v-01f01c98]{color:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon[data-v-01f01c98]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon svg[data-v-01f01c98]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .icon svg path[data-v-01f01c98]{fill:#12d3db!important}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper[data-v-01f01c98]{display:block;position:absolute;top:24px;padding:1.1428571429rem;display:flex;flex-wrap:wrap;width:180px;left:40px;box-shadow:4px 4px 16px rgba(175,162,186,.24);background-color:#fff}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper .stepper-links[data-v-01f01c98]{width:100%}.stepper .stepper-links .stepper-links-item-area:hover .dropdown-stepper .stepper-links p[data-v-01f01c98]{width:100%;text-align:center}.stepper .stepper-links .stepper-links-item-area .dropdown-stepper[data-v-01f01c98]{display:none}.stepper .stepper-links .stepper-links-item-area .stepper-link-text[data-v-01f01c98]{display:flex;flex-wrap:wrap;align-content:center;align-items:center}.stepper .stepper-links .stepper-links-item-area .stepper-link-text.is-current[data-v-01f01c98]{cursor:default;font-weight:700}.stepper .stepper-links .stepper-links-item-area .stepper-link-text:hover.not-current[data-v-01f01c98]{color:#12d3db!important}.stepper .stepper-links .stepper-links-item-area .icon[data-v-01f01c98]{margin-right:.380952381rem}@media (max-width:479px){.stepper .stepper-links .stepper-links-item-area .icon[data-v-01f01c98]{margin-right:.7619047619rem}}.stepper .stepper-links .stepper-link-divider[data-v-01f01c98]{margin-right:.380952381rem;margin-left:.380952381rem}',map:void 0,media:void 0})}),{name:"Stepper",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k},props:{routes:{type:Array,required:!0},color:{type:String,required:!0,default:"#68596E"}},methods:{onClick:function(t){this.$emit("click",t)},action:function(){this.$emit("changeUrl")},closeModal:function(){this.$emit("closeModal"),document.getElementsByTagName("html")[0].removeAttribute("style"),document.getElementsByTagName("body")[0].removeAttribute("style"),document.getElementsByClassName("boxes")&&document.getElementsByClassName("boxes").length>0&&document.getElementsByClassName("boxes")[0].removeAttribute("style")}},computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-01f01c98",!1,"data-v-01f01c98",!1,void 0,b,void 0),yt=g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return t.isLoaded?a("div",{staticClass:"preview-full"},[t._ssrNode('<div class="top-bar-area">',"</div>",[a("TopBar",{attrs:{breadcrumbs:t.breadcrumbs}})],1),t._ssrNode(" "),t.isLoaded&&!t.isMobile?t._ssrNode('<div class="preview-desktop-area">',"</div>",[a("Preview",{attrs:{uuid:t.uuid,pages:t.pages,book_format:t.book_format,product_id:t.product_id,typeLanguage:t.typeLanguage}})],1):t._e(),t._ssrNode(" "),t.isLoaded&&t.isMobile?t._ssrNode('<div class="preview-mobile-area">',"</div>",[a("PreviewMobile",{attrs:{uuid:t.uuid,pages:t.pages,book_format:t.book_format,product_id:t.product_id,typeLanguage:t.typeLanguage}})],1):t._e(),t._ssrNode(" "),t._ssrNode("<div"+t._ssrClass("preview-mobile-tools",t.isLoaded?"":"invisible")+">","</div>",[t.have_tools?a("PreviewTools",{attrs:{dedication_text:t.dedication_text,uuid:t.uuid,slug:t.slug,character_id:t.character_id,have_dedication:t.have_dedication,product_id:t.product_id,gender:t.gender,typeLanguage:t.typeLanguage,language:t.language,languages:t.languages,layout:t.layout,layouts:t.layouts,preview_color:t.preview_color,character_position_id:t.character_position_id,typeRead:t.typeRead,custom_mes:t.custom_mes,custom_numero:t.custom_numero},on:{isLoadingMethod:t.isLoadingMethod,changeUuid:t.changeUuid,changeName:t.changeName,changeBirthday:t.changeBirthday}}):t._e()],1),t._ssrNode(" "),t._ssrNode('<div class="bottom-bar-area">',"</div>",[a("BottomBar",{attrs:{uuid:t.uuid,book_brand:t.book_brand,book_name:t.book_name},on:{changeUrl:t.changeUrl}})],1)],2):t._e()},staticRenderFns:[]},(function(t){t&&t("data-v-a0af81c4_0",{source:'.storybook-6{width:columns("lg", 6)}.storybook-12{width:columns("lg", 12)}.storybook-25{width:columns("lg", 25)}.invisible{opacity:0}.preview-full{height:100vh}.preview-mobile-area{width:100%;position:relative}.preview-desktop-area{position:relative;z-index:4;height:calc(100vh - px-size("lg", 190px));display:flex;justify-content:center}@media (max-width:990px){.preview-mobile-tools{position:relative;z-index:20}}.custom-properties{position:absolute;top:30px}',map:void 0,media:void 0})}),{name:"PreviewWithTools",components:{Preview:vt,PreviewMobile:gt,PreviewTools:bt,TopBar:g({render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"top-bar"},[this.breadcrumbs?this._ssrNode('<div class="steppers" data-v-6c0d6a82>',"</div>",[e("Stepper",{attrs:{routes:this.breadcrumbs,color:this.color},on:{click:this.onClick}})],1):this._e()])},staticRenderFns:[]},(function(t){t&&t("data-v-6c0d6a82_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-6c0d6a82]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-6c0d6a82]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-6c0d6a82]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-6c0d6a82]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-6c0d6a82]{font-size:14px}}@media (min-width:1024px){[data-v-6c0d6a82]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-6c0d6a82]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-6c0d6a82]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-6c0d6a82]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-6c0d6a82]{font-size:1.56vw}}html[data-v-6c0d6a82]{box-sizing:border-box}*[data-v-6c0d6a82],[data-v-6c0d6a82]::after,[data-v-6c0d6a82]::before{box-sizing:border-box}.top-bar[data-v-6c0d6a82]{position:relative;width:100%;top:0;left:0;padding-top:1.1428571429rem;padding-bottom:1.1428571429rem;display:flex;flex-wrap:wrap;align-items:center;padding-left:2.7777777778vw}.preview-button[data-v-6c0d6a82]{cursor:pointer}',map:void 0,media:void 0})}),{name:"TopBar",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k,Stepper:xt},props:{breadcrumbs:{type:Array,required:!0},color:{type:String,required:!0,default:"#AFA2BA"}},methods:{onClick:function(t){this.$emit("click",t)}},computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-6c0d6a82",!1,"data-v-6c0d6a82",!1,void 0,b,void 0),BottomBar:g({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"bottom-bar"},[t._ssrNode('<div class="book-area" data-v-099f5504>',"</div>",[t._ssrNode('<div class="book-cover" data-v-099f5504><img'+t._ssrAttr("src","https://builder.dentrodahistoria.com.br/api/builder/getpreview/"+t.uuid+"?page=1&w=500&v=0&noCache=true")+' width="46" alt data-v-099f5504></div> '),t._ssrNode('<div class="book-info" data-v-099f5504>',"</div>",[t._ssrNode("<div data-v-099f5504>","</div>",[t.book_brand?a("Paragraph",{attrs:{size:"sm",color:"'#ccc'"}},[t._v(t._s(t.book_brand))]):t._e(),t._ssrNode(" "),t.book_name?a("Paragraph",{attrs:{size:"sm",color:"'#ccc'",type:"bold"}},[t._v(t._s(t.book_name))]):t._e()],2)])],2),t._ssrNode(" "),t._ssrNode('<div class="btn-foward" data-v-099f5504>',"</div>",[a("Button",{attrs:{kind:"primary",size:"md",width:"liquid"},on:{click:t.action}},[a("span",[t._v("Continuar")])])],1)],2)},staticRenderFns:[]},(function(t){t&&t("data-v-099f5504_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-099f5504]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-099f5504]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-099f5504]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-099f5504]{font-size:14px}}@media (min-width:1024px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-099f5504]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-099f5504]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-099f5504]{font-size:1.56vw}}html[data-v-099f5504]{box-sizing:border-box}*[data-v-099f5504],[data-v-099f5504]::after,[data-v-099f5504]::before{box-sizing:border-box}.bottom-bar[data-v-099f5504]{position:relative;width:100%;bottom:0;left:0;box-shadow:0 10px 26px rgba(104,89,110,.24);padding-top:1.1428571429rem;padding-bottom:1.1428571429rem;display:flex;flex-wrap:wrap;align-items:center;width:100%;justify-content:space-between;padding-left:1.7142857143rem;z-index:4;position:absolute;z-index:23;bottom:0}.bottom-bar .book-area[data-v-099f5504]{display:flex;align-content:center;flex-wrap:wrap}.bottom-bar .book-area .book-cover[data-v-099f5504]{display:flex;align-content:center;flex-wrap:wrap}.bottom-bar .book-area .book-info[data-v-099f5504]{display:flex;padding-left:1.7142857143rem;flex-wrap:nowrap;align-items:center}.bottom-bar .book-area .book-info p[data-v-099f5504]{width:100%}.bottom-bar .btn-foward[data-v-099f5504]{display:flex;padding-right:1.7142857143rem}',map:void 0,media:void 0})}),{name:"BottomBar",components:{Button:C,Heading:nt,Paragraph:lt,Icon:k,Stepper:xt},props:{uuid:{type:String,required:!1},book_name:{type:String,required:!1},book_brand:{type:String,required:!1}},data:function(){return{isMobile:null,routes:[{path:"index",stepperName:"Etapa 2"},{path:"second",stepperName:"5 - Próximos personagens"}]}},mounted:function(){var t=this;t.isMobile=t.detectSize(),window.addEventListener("resize",(function(e){t.isMobile=t.detectSize()}))},methods:(ht={detectSize:function(){var t=!1;return window.innerWidth<990&&(t=!0),t},onClick:function(){this.$emit("click")},action:function(){this.$emit("changeUrl")}},T(ht,"detectSize",(function(){var t=!1;return window.innerWidth<990&&(t=!0),t})),T(ht,"closeModal",(function(){this.$emit("closeModal"),document.getElementsByTagName("html")[0].removeAttribute("style"),document.getElementsByTagName("body")[0].removeAttribute("style"),document.getElementsByClassName("boxes")&&document.getElementsByClassName("boxes").length>0&&document.getElementsByClassName("boxes")[0].removeAttribute("style")})),ht),computed:{shadowVar:function(){return{"--shadow-color":this.shadowColor}}}},"data-v-099f5504",!1,"data-v-099f5504",!1,void 0,b,void 0)},props:{dedication_text:{type:String,required:!1},
|
|
1522
1522
|
/** Product id of Builder. `595` */
|
|
1523
1523
|
product_id:{type:Number,required:!0},
|
|
1524
1524
|
/** Character id of Builder. `57` */
|
|
@@ -1553,7 +1553,7 @@ this.$emit("completedName",t)},completedBirthday:function(t){
|
|
|
1553
1553
|
/**
|
|
1554
1554
|
* Função disparada ao ser finalizada customização. Recebe um objeto.
|
|
1555
1555
|
*/
|
|
1556
|
-
this.$emit("completedBirthday",t)}}},void 0,!1,"data-v-
|
|
1556
|
+
this.$emit("completedBirthday",t)}}},void 0,!1,"data-v-a0af81c4",!1,void 0,b,void 0),zt=g({render:function(){var t=this.$createElement;return(this._self._c||t)("hr",this._g(this._b({staticClass:"hr-group",class:"kind-"+this.kind,style:{height:this.height,backgroundColor:this.backgroundColor}},"hr",this.$attrs,!1),this.$listeners),[])},staticRenderFns:[]},(function(t){t&&t("data-v-c1ad1038_0",{source:'@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,900&display=swap);[data-v-c1ad1038]:root{--column-width:6.6666666667vw}@media (min-width:0px){[data-v-c1ad1038]:root{--column-width:6.6666666667vw}}@media (min-width:480px){[data-v-c1ad1038]:root{--column-width:2.7777777778vw}}@media (min-width:0px){html[data-v-c1ad1038]{font-size:2.9166666667vw}}@media (min-width:480px){html[data-v-c1ad1038]{font-size:14px}}@media (min-width:1024px){[data-v-c1ad1038]:root{--column-width:2.7777777778vw}}@media (min-width:1920px){[data-v-c1ad1038]:root{--column-width:2.7777777778vw}}@media (min-width:2620px){[data-v-c1ad1038]:root{--column-width:2.7777777778vw}}@media (min-width:1024px){html[data-v-c1ad1038]{font-size:1.5648854962vw}}@media (min-width:2620px){html[data-v-c1ad1038]{font-size:1.56vw}}html[data-v-c1ad1038]{box-sizing:border-box}*[data-v-c1ad1038],[data-v-c1ad1038]::after,[data-v-c1ad1038]::before{box-sizing:border-box}.hr-group[data-v-c1ad1038]{width:100%;margin:0;border:0;background-color:#dfdae4}',map:void 0,media:void 0})}),{name:"HR",props:{
|
|
1557
1557
|
/**
|
|
1558
1558
|
* Tipo do HR<br>
|
|
1559
1559
|
* Values: `primary` `variable`
|
|
@@ -8,18 +8,39 @@
|
|
|
8
8
|
<div class="stepper-links-item-area">
|
|
9
9
|
<Paragraph
|
|
10
10
|
:size="'sm'"
|
|
11
|
-
color="
|
|
11
|
+
:color="color"
|
|
12
12
|
class="stepper-link-text"
|
|
13
|
-
:class="
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
:class="
|
|
14
|
+
routes.length - 1 == indexRoute ? 'is-current' : 'not-current'
|
|
15
|
+
"
|
|
16
|
+
@click="
|
|
17
|
+
routes.length - 1 == indexRoute ? onClick(option) : onClick(option)
|
|
18
|
+
"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="preview-button"
|
|
22
|
+
@click="onClick(option)"
|
|
23
|
+
:style="'color:' + color"
|
|
24
|
+
>
|
|
25
|
+
<Icon
|
|
26
|
+
v-if="indexRoute == 0"
|
|
27
|
+
name="arrow-left"
|
|
28
|
+
:fill="color"
|
|
29
|
+
:color="color"
|
|
30
|
+
size="sm"
|
|
31
|
+
stroke="transparent"
|
|
32
|
+
class="back-button"
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
{{ option.stepperName }}</Paragraph
|
|
16
37
|
>
|
|
17
38
|
</div>
|
|
18
39
|
|
|
19
40
|
<Paragraph
|
|
20
41
|
v-if="routes.length - 1 != indexRoute"
|
|
21
42
|
:size="'sm'"
|
|
22
|
-
color="
|
|
43
|
+
:color="color"
|
|
23
44
|
v-html="'/'"
|
|
24
45
|
class="stepper-link-divider"
|
|
25
46
|
></Paragraph>
|
|
@@ -49,38 +70,16 @@
|
|
|
49
70
|
type: Array,
|
|
50
71
|
required: true,
|
|
51
72
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
// type: String,
|
|
58
|
-
// required: true,
|
|
59
|
-
// },
|
|
60
|
-
// headingSize: {
|
|
61
|
-
// type: String,
|
|
62
|
-
// default: "sm",
|
|
63
|
-
// },
|
|
64
|
-
// headingColor: {
|
|
65
|
-
// type: String,
|
|
66
|
-
// default: "#68596E",
|
|
67
|
-
// },
|
|
68
|
-
// paragraph: {
|
|
69
|
-
// type: String,
|
|
70
|
-
// },
|
|
71
|
-
// paragraphSize: {
|
|
72
|
-
// type: String,
|
|
73
|
-
// default: "lg",
|
|
74
|
-
// },
|
|
75
|
-
// haveClose: {
|
|
76
|
-
// type: Boolean,
|
|
77
|
-
// default: true,
|
|
78
|
-
// },
|
|
73
|
+
color: {
|
|
74
|
+
type: String,
|
|
75
|
+
required: true,
|
|
76
|
+
default: "#68596E",
|
|
77
|
+
},
|
|
79
78
|
},
|
|
80
79
|
|
|
81
80
|
methods: {
|
|
82
|
-
onClick() {
|
|
83
|
-
this.$emit("click");
|
|
81
|
+
onClick(payload) {
|
|
82
|
+
this.$emit("click", payload);
|
|
84
83
|
},
|
|
85
84
|
|
|
86
85
|
action() {
|
|
@@ -126,8 +125,10 @@
|
|
|
126
125
|
cursor: pointer;
|
|
127
126
|
|
|
128
127
|
&:hover {
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
.preview-button {
|
|
129
|
+
.icon {
|
|
130
|
+
color: $color-brand-primary-medium !important;
|
|
131
|
+
}
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
.icon {
|
|
@@ -168,23 +169,28 @@
|
|
|
168
169
|
}
|
|
169
170
|
|
|
170
171
|
.stepper-link-text {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-wrap: wrap;
|
|
174
|
+
align-content: center;
|
|
175
|
+
align-items: center;
|
|
174
176
|
|
|
175
177
|
&.is-current {
|
|
176
178
|
cursor: default;
|
|
177
|
-
|
|
179
|
+
font-weight: bold;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&:hover {
|
|
183
|
+
&.not-current {
|
|
184
|
+
color: $color-brand-primary-medium !important;
|
|
185
|
+
}
|
|
178
186
|
}
|
|
179
187
|
}
|
|
180
188
|
|
|
181
189
|
.icon {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
width: px-size("md", $icon-width-sm);
|
|
187
|
-
height: px-size("md", $icon-width-sm);
|
|
190
|
+
margin-right: px-size("lg", $spacing-inline-xs);
|
|
191
|
+
|
|
192
|
+
@include media-breakpoint-down("sm") {
|
|
193
|
+
margin-right: px-size("lg", $spacing-inline-sm);
|
|
188
194
|
}
|
|
189
195
|
}
|
|
190
196
|
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { action } from "@storybook/addon-actions";
|
|
2
|
+
import { linkTo } from "@storybook/addon-links";
|
|
3
|
+
import { withKnobs, text, object } from "@storybook/addon-knobs";
|
|
4
|
+
|
|
5
|
+
import TopBar from "./TopBar";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Navigation/TopBar",
|
|
9
|
+
decorators: [withKnobs],
|
|
10
|
+
component: TopBar,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const routes = [
|
|
14
|
+
{
|
|
15
|
+
name: "index",
|
|
16
|
+
stepperName: "Etapa 2",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: "second",
|
|
20
|
+
stepperName: "5 - Resumo do pedido",
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
const color = "#ffffff";
|
|
25
|
+
|
|
26
|
+
export const Basic = () => ({
|
|
27
|
+
components: { TopBar },
|
|
28
|
+
props: {
|
|
29
|
+
breadcrumbs: {
|
|
30
|
+
default: routes,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
template: `<div>
|
|
34
|
+
<div class="storybook-18">
|
|
35
|
+
<TopBar :breadcrumbs="breadcrumbs" />
|
|
36
|
+
</div>
|
|
37
|
+
<br>
|
|
38
|
+
|
|
39
|
+
</div>`,
|
|
40
|
+
methods: {
|
|
41
|
+
updateData(payload) {
|
|
42
|
+
console.log(payload);
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
export const BasicColor = () => ({
|
|
48
|
+
components: { TopBar },
|
|
49
|
+
props: {
|
|
50
|
+
breadcrumbs: {
|
|
51
|
+
default: routes,
|
|
52
|
+
},
|
|
53
|
+
color: {
|
|
54
|
+
default: color,
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
template: `<div>
|
|
58
|
+
<div class="storybook-18" style="background-color:#923FDA">
|
|
59
|
+
<TopBar :breadcrumbs="breadcrumbs" :color="color" />
|
|
60
|
+
</div>
|
|
61
|
+
<br>
|
|
62
|
+
|
|
63
|
+
</div>`,
|
|
64
|
+
methods: {
|
|
65
|
+
updateData(payload) {
|
|
66
|
+
console.log(payload);
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="top-bar">
|
|
3
|
+
<div class="steppers" v-if="breadcrumbs">
|
|
4
|
+
<Stepper :routes="breadcrumbs" :color="color" @click="onClick" />
|
|
5
|
+
</div>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import Button from "../Buttons/Button.vue";
|
|
11
|
+
import Heading from "../Typography/Heading.vue";
|
|
12
|
+
import Paragraph from "../Typography/Paragraph.vue";
|
|
13
|
+
import Icon from "../Icons/Icon.vue";
|
|
14
|
+
import Stepper from "./Stepper.vue";
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
name: "TopBar",
|
|
18
|
+
components: { Button, Heading, Paragraph, Icon, Stepper },
|
|
19
|
+
props: {
|
|
20
|
+
breadcrumbs: {
|
|
21
|
+
type: Array,
|
|
22
|
+
required: true,
|
|
23
|
+
},
|
|
24
|
+
color: {
|
|
25
|
+
type: String,
|
|
26
|
+
required: true,
|
|
27
|
+
default: "#AFA2BA",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
methods: {
|
|
31
|
+
onClick(payload) {
|
|
32
|
+
this.$emit("click", payload);
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
computed: {
|
|
36
|
+
shadowVar() {
|
|
37
|
+
return {
|
|
38
|
+
"--shadow-color": this.shadowColor,
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<style lang="scss" scoped>
|
|
46
|
+
@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
|
|
47
|
+
|
|
48
|
+
.top-bar {
|
|
49
|
+
/* color / surface / neutral / light */
|
|
50
|
+
|
|
51
|
+
// background: #ffffff;
|
|
52
|
+
/* shadow / level 02 */
|
|
53
|
+
position: relative;
|
|
54
|
+
width: 100%;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
// box-shadow: 0px 10px 26px rgba(104, 89, 110, 0.24);
|
|
58
|
+
padding-top: px-size("lg", $spacing-stack-md);
|
|
59
|
+
padding-bottom: px-size("lg", $spacing-stack-md);
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
align-items: center;
|
|
63
|
+
//max-width: px-size("lg", );
|
|
64
|
+
padding-left: columns("lg", 1);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.preview-button {
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
import Preview from "./Preview.vue";
|
|
69
69
|
import PreviewMobile from "./PreviewMobile.vue";
|
|
70
70
|
import PreviewTools from "./PreviewTools.vue";
|
|
71
|
-
import TopBar from "
|
|
71
|
+
import TopBar from "../Navigation/TopBar.vue";
|
|
72
72
|
import BottomBar from "./BottomBar.vue";
|
|
73
73
|
|
|
74
74
|
//const $ = jQuery
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
import Preview from "./Preview.vue";
|
|
69
69
|
import PreviewMobile from "./PreviewMobile.vue";
|
|
70
70
|
import PreviewTools from "./PreviewTools.vue";
|
|
71
|
-
import TopBar from "
|
|
71
|
+
import TopBar from "../Navigation/TopBar.vue";
|
|
72
72
|
import BottomBar from "./BottomBar.vue";
|
|
73
73
|
|
|
74
74
|
//const $ = jQuery
|
package/dist/src/Stepper.vue
CHANGED
|
@@ -8,18 +8,39 @@
|
|
|
8
8
|
<div class="stepper-links-item-area">
|
|
9
9
|
<Paragraph
|
|
10
10
|
:size="'sm'"
|
|
11
|
-
color="
|
|
11
|
+
:color="color"
|
|
12
12
|
class="stepper-link-text"
|
|
13
|
-
:class="
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
:class="
|
|
14
|
+
routes.length - 1 == indexRoute ? 'is-current' : 'not-current'
|
|
15
|
+
"
|
|
16
|
+
@click="
|
|
17
|
+
routes.length - 1 == indexRoute ? onClick(option) : onClick(option)
|
|
18
|
+
"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="preview-button"
|
|
22
|
+
@click="onClick(option)"
|
|
23
|
+
:style="'color:' + color"
|
|
24
|
+
>
|
|
25
|
+
<Icon
|
|
26
|
+
v-if="indexRoute == 0"
|
|
27
|
+
name="arrow-left"
|
|
28
|
+
:fill="color"
|
|
29
|
+
:color="color"
|
|
30
|
+
size="sm"
|
|
31
|
+
stroke="transparent"
|
|
32
|
+
class="back-button"
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
{{ option.stepperName }}</Paragraph
|
|
16
37
|
>
|
|
17
38
|
</div>
|
|
18
39
|
|
|
19
40
|
<Paragraph
|
|
20
41
|
v-if="routes.length - 1 != indexRoute"
|
|
21
42
|
:size="'sm'"
|
|
22
|
-
color="
|
|
43
|
+
:color="color"
|
|
23
44
|
v-html="'/'"
|
|
24
45
|
class="stepper-link-divider"
|
|
25
46
|
></Paragraph>
|
|
@@ -49,38 +70,16 @@
|
|
|
49
70
|
type: Array,
|
|
50
71
|
required: true,
|
|
51
72
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
// type: String,
|
|
58
|
-
// required: true,
|
|
59
|
-
// },
|
|
60
|
-
// headingSize: {
|
|
61
|
-
// type: String,
|
|
62
|
-
// default: "sm",
|
|
63
|
-
// },
|
|
64
|
-
// headingColor: {
|
|
65
|
-
// type: String,
|
|
66
|
-
// default: "#68596E",
|
|
67
|
-
// },
|
|
68
|
-
// paragraph: {
|
|
69
|
-
// type: String,
|
|
70
|
-
// },
|
|
71
|
-
// paragraphSize: {
|
|
72
|
-
// type: String,
|
|
73
|
-
// default: "lg",
|
|
74
|
-
// },
|
|
75
|
-
// haveClose: {
|
|
76
|
-
// type: Boolean,
|
|
77
|
-
// default: true,
|
|
78
|
-
// },
|
|
73
|
+
color: {
|
|
74
|
+
type: String,
|
|
75
|
+
required: true,
|
|
76
|
+
default: "#68596E",
|
|
77
|
+
},
|
|
79
78
|
},
|
|
80
79
|
|
|
81
80
|
methods: {
|
|
82
|
-
onClick() {
|
|
83
|
-
this.$emit("click");
|
|
81
|
+
onClick(payload) {
|
|
82
|
+
this.$emit("click", payload);
|
|
84
83
|
},
|
|
85
84
|
|
|
86
85
|
action() {
|
|
@@ -126,8 +125,10 @@
|
|
|
126
125
|
cursor: pointer;
|
|
127
126
|
|
|
128
127
|
&:hover {
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
.preview-button {
|
|
129
|
+
.icon {
|
|
130
|
+
color: $color-brand-primary-medium !important;
|
|
131
|
+
}
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
.icon {
|
|
@@ -168,23 +169,28 @@
|
|
|
168
169
|
}
|
|
169
170
|
|
|
170
171
|
.stepper-link-text {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-wrap: wrap;
|
|
174
|
+
align-content: center;
|
|
175
|
+
align-items: center;
|
|
174
176
|
|
|
175
177
|
&.is-current {
|
|
176
178
|
cursor: default;
|
|
177
|
-
|
|
179
|
+
font-weight: bold;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&:hover {
|
|
183
|
+
&.not-current {
|
|
184
|
+
color: $color-brand-primary-medium !important;
|
|
185
|
+
}
|
|
178
186
|
}
|
|
179
187
|
}
|
|
180
188
|
|
|
181
189
|
.icon {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
width: px-size("md", $icon-width-sm);
|
|
187
|
-
height: px-size("md", $icon-width-sm);
|
|
190
|
+
margin-right: px-size("lg", $spacing-inline-xs);
|
|
191
|
+
|
|
192
|
+
@include media-breakpoint-down("sm") {
|
|
193
|
+
margin-right: px-size("lg", $spacing-inline-sm);
|
|
188
194
|
}
|
|
189
195
|
}
|
|
190
196
|
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { action } from "@storybook/addon-actions";
|
|
2
|
+
import { linkTo } from "@storybook/addon-links";
|
|
3
|
+
import { withKnobs, text, object } from "@storybook/addon-knobs";
|
|
4
|
+
|
|
5
|
+
import TopBar from "./TopBar";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Navigation/TopBar",
|
|
9
|
+
decorators: [withKnobs],
|
|
10
|
+
component: TopBar,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const routes = [
|
|
14
|
+
{
|
|
15
|
+
name: "index",
|
|
16
|
+
stepperName: "Etapa 2",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
name: "second",
|
|
20
|
+
stepperName: "5 - Resumo do pedido",
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
const color = "#ffffff";
|
|
25
|
+
|
|
26
|
+
export const Basic = () => ({
|
|
27
|
+
components: { TopBar },
|
|
28
|
+
props: {
|
|
29
|
+
breadcrumbs: {
|
|
30
|
+
default: routes,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
template: `<div>
|
|
34
|
+
<div class="storybook-18">
|
|
35
|
+
<TopBar :breadcrumbs="breadcrumbs" />
|
|
36
|
+
</div>
|
|
37
|
+
<br>
|
|
38
|
+
|
|
39
|
+
</div>`,
|
|
40
|
+
methods: {
|
|
41
|
+
updateData(payload) {
|
|
42
|
+
console.log(payload);
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
export const BasicColor = () => ({
|
|
48
|
+
components: { TopBar },
|
|
49
|
+
props: {
|
|
50
|
+
breadcrumbs: {
|
|
51
|
+
default: routes,
|
|
52
|
+
},
|
|
53
|
+
color: {
|
|
54
|
+
default: color,
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
template: `<div>
|
|
58
|
+
<div class="storybook-18" style="background-color:#923FDA">
|
|
59
|
+
<TopBar :breadcrumbs="breadcrumbs" :color="color" />
|
|
60
|
+
</div>
|
|
61
|
+
<br>
|
|
62
|
+
|
|
63
|
+
</div>`,
|
|
64
|
+
methods: {
|
|
65
|
+
updateData(payload) {
|
|
66
|
+
console.log(payload);
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|