@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 5.61 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),c=require("../../localization/index.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),n=require("../button/button.cjs"),l=require("../image-viewer/image-viewer.cjs"),u={name:"DtProgressBar",props:{ariaLabel:{type:String,required:!0},progress:{type:Number,default:20}},data:()=>({circleCircumference:50}),computed:{cssVars(){return{"--stroke-dashoffset":this.circleCircumference-this.circleCircumference*this.progress/100,"--stroke-dasharray":this.circleCircumference}}},mounted(){this.circleCircumference=this.$refs.progressbarCircle.getTotalLength()}};var m=function(){var e=this,r=e._self._c;return r("div",{attrs:{role:"progressbar","aria-label":e.ariaLabel,tabindex:"-1","aria-valuenow":e.progress,"aria-valuemin":"0","aria-valuemax":"100"}},[r("svg",{staticClass:"d-recipe-attachment-carousel__progress-bar",style:e.cssVars},[r("circle",{ref:"progressbarCircle",staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}}),r("circle",{staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}})])])},_=[],d=i.n(u,m,_);const h=d.exports,f={name:"DtImageCarousel",components:{DtImageViewer:l.default,DtButton:n.default,DtIconClose:o.DtIconClose,DtProgressBar:h},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:["remove-media"],data(){return{i18n:new c.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{removeMediaItem(t){this.$emit("remove-media",t)}}};var p=function(){var e=this,r=e._self._c;return r("li",{staticClass:"d-recipe-attachment-carousel__image"},[r("dt-image-viewer",{attrs:{"image-button-class":"d-recipe-attachment-carousel__image-viewer","image-src":e.mediaItem.path,"image-alt":e.mediaItem.altText,"aria-label":e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")}}),r("div",{staticClass:"d-recipe-attachment-carousel__image-top-right"},[e.mediaItem.isUploading?r("dt-progress-bar",{staticClass:"d-recipe-attachment-carousel__image-progress-bar",attrs:{progress:e.mediaItem.progress,"aria-label":e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")}}):e._e(),r("dt-button",{staticClass:"d-recipe-attachment-carousel__image-close-button",attrs:{id:`closeButton-${e.index}`,tabindex:"0",circle:"",size:"xs",importance:"clear","aria-label":e.closeButtonTitle,title:e.closeButtonTitle},on:{click:function(s){return e.removeMediaItem(e.index)}},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-close",{attrs:{size:"200"}})]},proxy:!0}])})],1)],1)},g=[],w=i.n(f,p,g);const v=w.exports,A=64,L={name:"DtRecipeAttachmentCarousel",components:{DtButton:n.default,DtIconArrowRight:o.DtIconArrowRight,DtIconArrowLeft:o.DtIconArrowLeft,DtImageCarousel:v},props:{mediaList:{type:Array,default:()=>[]}},emits:["remove-media"],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1,i18n:new c.DialtoneLocalization}},computed:{filteredMediaList(){return this.mediaList.filter(t=>t.type==="image"||t.type==="video")}},mounted:function(){this.showLeftArrow=this.$refs.carousel.scrollLeft>0,this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth},methods:{onItemFocus(t){t.currentTarget.scrollIntoView({behavior:"smooth"})},mediaComponent(t){switch(t){case"image":return"dt-image-carousel";default:return null}},removeMediaItem(t){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+A,this.$emit("remove-media",t)},closeButton(t,e){this.showCloseButton[e]=t},handleScroll(){const t=this.$refs.carousel;this.showLeftArrow=t.scrollLeft>0,this.showRightArrow=t.scrollLeft+t.clientWidth!==t.scrollWidth},leftScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft-100,behavior:"smooth"})},rightScroll(){this.$refs.carousel.scrollTo({left:this.$refs.carousel.scrollLeft+100,behavior:"smooth"})}}};var b=function(){var e=this,r=e._self._c;return r("div",{staticClass:"d-recipe-attachment-carousel",attrs:{role:"presentation"}},[e.mediaList.length>0?r("ul",{ref:"carousel",staticClass:"d-recipe-attachment-carousel__media-list",on:{scroll:e.handleScroll}},e._l(e.filteredMediaList,function(s,a){return r(e.mediaComponent(s.type),{key:`media-${a}`,tag:"component",attrs:{index:a,"media-item":s},on:{"remove-media":function(R){return e.removeMediaItem(a)},focusin:e.onItemFocus}})}),1):e._e(),r("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showLeftArrow,expression:"showLeftArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",attrs:{tabindex:"-1","aria-label":e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),circle:"",size:"xs",importance:"clear"},on:{click:e.leftScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-arrow-left",{attrs:{size:"100"}})]},proxy:!0}])}),r("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showRightArrow,expression:"showRightArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",attrs:{tabindex:"-1","aria-label":e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),circle:"",size:"xs",importance:"clear"},on:{click:e.rightScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-arrow-right",{attrs:{size:"100"}})]},proxy:!0}])})],1)},C=[],I=i.n(L,b,C);const $=I.exports;exports.default=$;
//# sourceMappingURL=attachment-carousel.cjs.map