UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

2 lines 5.39 kB
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`),r=require(`../avatar/avatar.cjs`),i=require(`../badge/badge.cjs`),a=require(`../lazy-show/lazy-show.cjs`),o=require(`../list-item/list-item.cjs`),s=require(`./feed-item-row-constants.cjs`);let c=require(`vue`),l=require(`@dialpad/dialtone-icons/vue3`);var u={compatConfig:{MODE:3},name:`DtRecipeFeedItemRow`,components:{DtAvatar:r.default,DtLazyShow:a.default,DtListItem:o.default,DtBadge:i.default,DtIconUser:l.DtIconUser},mixins:[n.default],inheritAttrs:!1,props:{avatarSeed:{type:String,default:null},showHeader:{type:Boolean,default:!1},avatarImageUrl:{type:String,default:``},displayName:{type:String,default:``},noInitials:{type:Boolean,default:!1},time:{type:String,default:``},shortTime:{type:String,default:``},labelText:{type:String,default:``},isActive:{type:Boolean,default:!1},state:{type:String,default:s.DEFAULT_FEED_ROW_STATE,validator:e=>Object.keys(s.FEED_ROW_STATE_BACKGROUND_COLOR).includes(e)}},emits:[`hover`,`focus`,`keydown`],data(){return{transitionActive:!1}},computed:{feedListeners(){return{mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:e=>{switch(e.code){case`Tab`:this.trapFocus(e);break}this.$emit(`keydown`,e)}}},listItemClasses(){return[`d-recipe-feed-item-row`,{"d-recipe-feed-item-row--active":this.isActive&&this.state===`NORMAL`},{"d-recipe-feed-item-row__state-transition":this.transitionActive},s.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]},hasAttachmentContent(){return e.hasSlotContent(this.$slots.attachment)}},watch:{state:{immediate:!0,handler:function(e){e!==`NORMAL`&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===`NORMAL`&&(this.transitionActive=!1)},trapFocus(e){this.focusTrappedTabPress(e)},setFocus(e){this.$emit(`focus`,e)},setHover(e){this.$emit(`hover`,e)}}},d={key:0,class:`d-recipe-feed-item-row__avatar-container`},f={class:`d-recipe-feed-item-row__content`},p={key:0,"data-qa":`dt-recipe-feed-item-row--header`,class:`d-recipe-feed-item-row__header`},m={class:`d-recipe-feed-item-row__header-name`},h={class:`d-recipe-feed-item-row__header-time`},g={"data-qa":`dt-recipe-feed-item-row--content`},_={key:1,"data-qa":`dt-recipe-feed-item-row--attachment`,class:`d-recipe-feed-item-row__attachment`},v={key:0,class:`d-recipe-feed-item-row__reactions`,"data-qa":`dt-recipe-feed-item-row--reactions`},y={key:1,class:`d-recipe-feed-item-row__threading`},b={"data-qa":`dt-recipe-feed-item-row--menu`,class:`d-recipe-feed-item-row__menu`};function x(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-icon-user`),s=(0,c.resolveComponent)(`dt-avatar`),l=(0,c.resolveComponent)(`dt-badge`),u=(0,c.resolveComponent)(`dt-lazy-show`),x=(0,c.resolveComponent)(`dt-list-item`);return(0,c.openBlock)(),(0,c.createBlock)(x,(0,c.mergeProps)({ref:`FeedItemRef`,"navigation-type":`none`},e.$attrs,{class:a.listItemClasses,"data-qa":`dt-recipe-feed-item-row`},(0,c.toHandlers)(a.feedListeners)),{left:(0,c.withCtx)(()=>[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`avatar`,{},()=>[(0,c.createVNode)(s,{"full-name":n.displayName,"image-src":n.avatarImageUrl,"image-alt":``,seed:n.avatarSeed},(0,c.createSlots)({_:2},[n.noInitials?{name:`icon`,fn:(0,c.withCtx)(({iconSize:e})=>[(0,c.createVNode)(o,{size:e},null,8,[`size`])]),key:`0`}:void 0]),1032,[`full-name`,`image-src`,`seed`])])])):(0,c.createCommentVNode)(``,!0),n.showHeader?(0,c.createCommentVNode)(``,!0):(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,class:`d-recipe-feed-item-row__left-time`,"data-qa":`dt-recipe-feed-item-row--left-time`},(0,c.toDisplayString)(n.shortTime),513)),[[c.vShow,n.isActive]])]),bottom:(0,c.withCtx)(()=>[e.$slots.reactions?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,v,[(0,c.renderSlot)(e.$slots,`reactions`)])):(0,c.createCommentVNode)(``,!0),e.$slots.threading?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,y,[(0,c.renderSlot)(e.$slots,`threading`)])):(0,c.createCommentVNode)(``,!0),(0,c.withDirectives)((0,c.createElementVNode)(`div`,b,[(0,c.createVNode)(u,{appear:!0,transition:`fade`,show:n.isActive},{default:(0,c.withCtx)(()=>[(0,c.renderSlot)(e.$slots,`menu`)]),_:3},8,[`show`])],512),[[c.vShow,n.isActive]])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`article`,f,[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,p,[(0,c.renderSlot)(e.$slots,`displayName`,{},()=>[(0,c.createElementVNode)(`p`,m,(0,c.toDisplayString)(n.displayName),1)]),(0,c.createElementVNode)(`time`,h,(0,c.toDisplayString)(n.time),1),n.labelText?((0,c.openBlock)(),(0,c.createBlock)(l,{key:0,text:n.labelText},null,8,[`text`])):(0,c.createCommentVNode)(``,!0)])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`span`,g,[(0,c.renderSlot)(e.$slots,`default`)]),a.hasAttachmentContent?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,_,[(0,c.renderSlot)(e.$slots,`attachment`)])):(0,c.createCommentVNode)(``,!0)])]),_:3},16,[`class`])}var S=t.t(u,[[`render`,x]]);exports.default=S; //# sourceMappingURL=feed-item-row.cjs.map