@apicart/vue-components
Version:
Apicart Vue.Js components for simple e-commerce platform development
8 lines (6 loc) • 11.5 kB
JavaScript
/**
* @apicart/vue-components v1.0.0-alpha7
* (c) 2018-2020 Apicart Company
* Released under the MIT License.
*/
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("@apicart/core-sdk"),require("../.."),require("./..")):"function"==typeof define&&define.amd?define(["@apicart/core-sdk","../..","./.."],o):(t=t||self).ApicartCartDropdown=o(t.Apicart,t.src,t.components)}(this,(function(t,o,a){"use strict";function e(t,o,a,e){return new(a||(a=Promise))((function(r,i){function n(t){try{s(e.next(t))}catch(t){i(t)}}function c(t){try{s(e.throw(t))}catch(t){i(t)}}function s(t){var o;t.done?r(t.value):(o=t.value,o instanceof a?o:new a((function(t){t(o)}))).then(n,c)}s((e=e.apply(t,o||[])).next())}))}function r(t,o){var a,e,r,i,n={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(i){return function(c){return function(i){if(a)throw new TypeError("Generator is already executing.");for(;n;)try{if(a=1,e&&(r=2&i[0]?e.return:i[0]?e.throw||((r=e.return)&&r.call(e),0):e.next)&&!(r=r.call(e,i[1])).done)return r;switch(e=0,r&&(i=[2&i[0],r.value]),i[0]){case 0:case 1:r=i;break;case 4:return n.label++,{value:i[1],done:!1};case 5:n.label++,e=i[1],i=[0];continue;case 7:i=n.ops.pop(),n.trys.pop();continue;default:if(!(r=n.trys,(r=r.length>0&&r[r.length-1])||6!==i[0]&&2!==i[0])){n=0;continue}if(3===i[0]&&(!r||i[1]>r[0]&&i[1]<r[3])){n.label=i[1];break}if(6===i[0]&&n.label<r[1]){n.label=r[1],r=i;break}if(r&&n.label<r[2]){n.label=r[2],n.ops.push(i);break}r[2]&&n.ops.pop(),n.trys.pop();continue}i=o.call(t,n)}catch(t){i=[6,t],e=0}finally{a=r=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var i,n={dropdownPosition:"left"},c=(t.VueComponentsTranslator||o.Translator).getI18n();function s(){return e(this,void 0,void 0,(function(){var t,o,a,e,n;return r(this,(function(r){switch(r.label){case 0:return t=[],o=!1,this.products=t,a=0,e=0,i&&i.hasCartHash()?[4,i.getCart()]:[3,4];case 1:return[4,r.sent().getEntity()];case 2:return(n=r.sent())?[4,n.getItems()]:[2];case 3:t=r.sent(),o=this.itemsCount!==n.getTotalItemsQuantity(),a=n.getTotalItemsQuantity(),e=n.getTotalPrice(),r.label=4;case 4:return this.products=t,this.itemsCount=a,this.totalPrice=e,o&&this.runToggleButtonQuantityBounceEffect(),[2]}}))}))}var p=null,d="undefined"!=typeof window,l={name:"apicart-cart-dropdown",components:{"apicart-button":d&&window.ApicartButton?window.ApicartButton:a.ApicartButton,"apicart-buy-button-with-quantity":d&&window.ApicartBuyButtonWithQuantity?window.ApicartBuyButtonWithQuantity:a.ApicartBuyButtonWithQuantity},i18n:c,data:function(){return{dataInitialized:!1,products:[],totalPrice:0,itemsCount:0,visible:!1,hideDropdownTimeout:null,dropdownPosition:null,showToggleButtonQuantityBounceEffect:!1}},methods:{open:function(){clearTimeout(p),this.visible=!0},close:function(){var t=this;p=setTimeout((function(){t.visible=!1}),500)},footerButtonClick:function(){this.$emit("footer-button-click"),this.close()},toggleButtonClick:function(){this.$emit("toggle-utton-click")},runToggleButtonQuantityBounceEffect:function(){var t=this;this.showToggleButtonQuantityBounceEffect=!0,setTimeout((function(){t.showToggleButtonQuantityBounceEffect=!1}),500)}},beforeCreate:function(){var o=this;t.Utils.EventDispatcher.addListener("apicart-cart-dropdown-configure-"+this._uid,"apicart:configure",(function(){o.$forceUpdate()}))},created:function(){var o=this;n=t.Utils.Objects.merge(n,t.getConfigParameter("vueComponents.cartDropdown")),i=t.getConfigParameter("store"),this.dropdownPosition=n.dropdownPosition,s.call(this),t.Utils.EventDispatcher.addListener("apicart-cart-dropdown-"+this._uid,"apicart:cart:updated",(function(){s.call(o)}))}};!function(t,o){void 0===o&&(o={});var a=o.insertAt;if(t&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.apicart-cart-dropdown{font-family:-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-font-smoothing:antialiased;box-sizing:border-box;outline:0}.apicart-cart-dropdown *{box-sizing:border-box;outline:0}.apicart-cart-dropdown{display:inline-block}@media (min-width:576px){.apicart-cart-dropdown{position:relative}}.apicart-cart-dropdown__button{cursor:pointer;align-items:center;display:flex;padding:14px}.apicart-cart-dropdown__button-icon-wrapper{position:relative;margin-right:14px}.apicart-cart-dropdown__button-icon{font-size:28px}.apicart-cart-dropdown__button-icon-quantity-wrapper{position:absolute;top:-10px;right:-10px;z-index:1}.apicart-cart-dropdown__button-icon-quantity{width:20px;line-height:20px;font-weight:500;text-align:center;color:#fff;border-radius:100%;font-size:10px;font-weight:500!important;background-color:#121212}.apicart-cart-dropdown__button-icon-quantity--bounce-once{animation:bounce-in .5s}@keyframes bounce-in{0%{transform:scale(1)}50%{transform:scale(1.8)}100%{transform:scale(1)}}.apicart-cart-dropdown__button-label{font-weight:500;text-transform:uppercase}.apicart-cart-dropdown__dropdown{background:#fff;border-radius:2px;transition:opacity .3s;opacity:1;width:100vw;margin-top:-10px;right:0;z-index:1;position:absolute;box-shadow:2px 4px 15px 0 rgba(0,0,0,.1)}@media (min-width:576px){.apicart-cart-dropdown__dropdown{width:500px}}.apicart-cart-dropdown__empty-cart{padding:20px 10px 10px 10px;text-align:center}.apicart-cart-dropdown--left{left:0}.apicart-cart-dropdown__items{max-height:324px;overflow:auto}.apicart-cart-dropdown__item{display:flex;align-items:center;border-bottom:1px solid #e6e6e7;padding:10px;height:76px}.apicart-cart-dropdown__item-image-wrapper{margin-right:10px;width:60px;overflow:hidden;display:flex}.apicart-cart-dropdown__item-image{width:100%;max-height:60px}.apicart-cart-dropdown__item-info{display:flex;align-items:center;justify-content:space-between;flex:1;flex-wrap:wrap}@media (min-width:576px){.apicart-cart-dropdown__item-info{flex-wrap:nowrap}}.apicart-cart-dropdown__item-name{font-size:14px;color:#121212;width:100%;margin-bottom:8px}@media (min-width:576px){.apicart-cart-dropdown__item-name{margin-bottom:0;width:40%}}.apicart-cart-dropdown__item-price{white-space:nowrap;font-size:16px;width:100px;text-align:center;font-weight:500}.apicart-cart-dropdown__footer{padding:10px}.apicart-cart-dropdown__footer-summary{align-items:center;display:flex;justify-content:space-between}.apicart-cart-dropdown__footer-summary-left-item{color:#75788a;font-size:14px}@media (min-width:576px){.apicart-cart-dropdown__footer-summary-left-item{font-size:16px}}.apicart-cart-dropdown__footer-summary-left-item-label{margin-right:8px;display:inline-block}.apicart-cart-dropdown__wrapper.apicart-cart-dropdown__wrapper--hovered .apicart-cart-dropdown{visibility:visible}.apicart-cart-dropdown-enter,.apicart-cart-dropdown-leave-active{opacity:0}.apicart-cart-dropdown-enter,.apicart-cart-dropdown-leave-to{opacity:0}');return function(t,o,a,e,r,i,n,c,s,p){"boolean"!=typeof n&&(s=c,c=n,n=!1);const d="function"==typeof a?a.options:a;let l;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),e&&(d._scopeId=e),i?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(i)},d._ssrRegister=l):o&&(l=n?function(t){o.call(this,p(t,this.$root.$options.shadowRoot))}:function(t){o.call(this,c(t))}),l)if(d.functional){const t=d.render;d.render=function(o,a){return l.call(a),t(o,a)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,l):[l]}return a}({render:function(){var t=this,o=t.$createElement,a=t._self._c||o;return a("div",{staticClass:"apicart-block apicart-cart-dropdown",attrs:{id:t.$t("cartDropdown.id")},on:{mouseover:t.open,mouseleave:t.close}},[a("div",{staticClass:"apicart-cart-dropdown__button",on:{click:t.toggleButtonClick}},[a("div",{staticClass:"apicart-cart-dropdown__button-icon-wrapper"},[a("span",{staticClass:"apicart-cart-dropdown__button-icon apicart-icon-shopping-bag"}),a("div",{staticClass:"apicart-cart-dropdown__button-icon-quantity-wrapper"},[a("div",{class:[{"apicart-cart-dropdown__button-icon-quantity--bounce-once":t.showToggleButtonQuantityBounceEffect},"apicart-cart-dropdown__button-icon-quantity"]},[t._v(" "+t._s(t.itemsCount)+" ")])])]),a("div",{staticClass:"apicart-cart-dropdown__button-label"},[t._v(" "+t._s(t.$t("cartDropdown.toggleButton"))+" ")])]),a("transition",{attrs:{name:"apicart-cart-dropdown"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:t.visible,expression:"visible"}],class:"apicart-cart-dropdown__dropdown apicart-cart-dropdown--"+t.dropdownPosition},[a("div",{staticClass:"apicart-cart-dropdown__items"},[t._l(t.products,(function(o){return a("div",{key:o.getItem().getExternalId(),staticClass:"apicart-cart-dropdown__item"},[o.getItem().getParameterValue("images").primary.url?a("div",{staticClass:"apicart-cart-dropdown__item-image-wrapper"},[a("img",{staticClass:"apicart-cart-dropdown__item-image",attrs:{src:o.getItem().getParameterValue("images").primary.url,loading:"lazy",alt:""}})]):t._e(),a("div",{staticClass:"apicart-cart-dropdown__item-info"},[a("div",{staticClass:"apicart-cart-dropdown__item-name"},[t._v(t._s(o.getItem().getName()))]),a("div",{staticClass:"apicart-cart-dropdown__item-quantity-manipulator"},[a("apicart-buy-button-with-quantity",{attrs:{quantity:o.getQuantity(),productUrl:o.getItem().getDataUrl()}})],1),a("div",{staticClass:"apicart-cart-dropdown__item-price"},[t._v(t._s(t.$n(o.getTotalPrice(),"currency")))])])])})),a("div",{directives:[{name:"show",rawName:"v-show",value:!t.products.length,expression:"!products.length"}],staticClass:"apicart-cart-dropdown__empty-cart"},[t._v(" "+t._s(t.$t("cartDropdown.emptyCart"))+" ")])],2),a("div",{staticClass:"apicart-cart-dropdown__footer"},[a("div",{staticClass:"apicart-cart-dropdown__footer-summary"},[a("div",{staticClass:"apicart-cart-dropdown__footer-summary-left"},[a("div",{staticClass:"apicart-cart-dropdown__footer-summary-left-item"},[a("span",{staticClass:"apicart-cart-dropdown__footer-summary-left-item-label"},[t._v(t._s(t.$t("cartDropdown.itemsCount"))+":")]),a("span",[t._v(t._s(t.itemsCount))])]),a("div",{staticClass:"apicart-cart-dropdown__footer-summary-left-item"},[a("span",{staticClass:"apicart-cart-dropdown__footer-summary-left-item-label"},[t._v(t._s(t.$t("cartDropdown.totalPrice"))+":")]),a("span",[t._v(t._s(t.$n(t.totalPrice,"currency")))])])]),a("div",{staticClass:"apicart-cart-dropdown__footer-summary-right"},[a("apicart-button",{directives:[{name:"show",rawName:"v-show",value:t.products.length,expression:"products.length"}],attrs:{type:"outlined"},nativeOn:{click:function(o){return t.footerButtonClick(o)}}},[t._v(" "+t._s(t.$t("cartDropdown.button"))+" ")])],1)])])])])],1)},staticRenderFns:[]},void 0,l,void 0,!1,void 0,!1,void 0,void 0,void 0)}));