UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

2 lines 3.32 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(`./list-item-constants.cjs`),r=require(`../item-layout/item-layout.cjs`);let i=require(`vue`),a=require(`@dialpad/dialtone-icons/vue3`);var o=[`listitem`,`menuitem`,`option`],s={compatConfig:{MODE:3},name:`DtListItem`,components:{DtItemLayout:r.default,DtIconCheck:a.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return e.default.getUniqueString()}},role:{type:String,default:`listitem`,validator:e=>o.includes(e)},elementType:{type:String,default:`li`},type:{type:String,default:n.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(n.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:n.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(n.LIST_ITEM_NAVIGATION_TYPES).includes(e)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:``}},emits:[`keydown`,`mousemove`,`mouseleave`],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===n.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{keydown:e=>{[`enter`,`space`].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit(`keydown`,e)},mousemove:e=>{this.onMouseHover(e),this.$emit(`mousemove`,e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit(`mouseleave`,e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===n.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==n.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit(`click`,e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function c(e,t,n,r,a,o){let s=(0,i.resolveComponent)(`dt-icon-check`),c=(0,i.resolveComponent)(`dt-item-layout`);return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.elementType),(0,i.mergeProps)({id:n.id,class:[`d-list-item`,{"d-list-item--focusable":o.isFocusable,"d-list-item--highlighted":o.isHighlighted,"d-list-item--static":!o.isHoverable}],tabindex:o.isFocusable?0:-1,role:n.role,"aria-selected":n.role===`listitem`?void 0:o.isHighlighted},(0,i.toHandlers)(o.listItemListeners)),{default:(0,i.withCtx)(()=>[o.isDefaultType?((0,i.openBlock)(),(0,i.createBlock)(c,{key:0,unstyled:``,class:(0,i.normalizeClass)([`d-list-item__wrapper`,n.wrapperClass]),"left-class":`d-list-item__left`,"content-class":`d-list-item__content`,"title-class":`d-list-item__title`,"subtitle-class":`d-list-item__subtitle`,"bottom-class":`d-list-item__bottom`,"right-class":`d-list-item__right`,"selected-class":`d-list-item__selected`,"data-qa":`dt-list-item-wrapper`},(0,i.createSlots)({_:2},[(0,i.renderList)(e.$slots,(t,n)=>({name:n,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,n)])})),n.selected?{name:`selected`,fn:(0,i.withCtx)(()=>[(0,i.createVNode)(s,{size:`400`})]),key:`0`}:void 0]),1032,[`class`])):(0,i.renderSlot)(e.$slots,`default`,{key:1})]),_:3},16,[`id`,`class`,`tabindex`,`role`,`aria-selected`])}var l=t.t(s,[[`render`,c]]);exports.default=l; //# sourceMappingURL=list-item.cjs.map