UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

3 lines (2 loc) 3.22 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./list-item-constants.cjs"),r=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c=require("../item-layout/item-layout.cjs"),m=["listitem","menuitem","option"],_={compatConfig:{MODE:3},name:"DtListItem",components:{DtItemLayout:c.default,DtIconCheck:d.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return r.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>m.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:s.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(s.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:s.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(s.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===s.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===s.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==s.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,T,l,I,f,i){const a=t.resolveComponent("dt-icon-check"),n=t.resolveComponent("dt-item-layout");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["d-list-item",{"d-list-item--focusable":i.isFocusable,"d-list-item--highlighted":i.isHighlighted,"d-list-item--static":!i.isHoverable}],tabindex:i.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:i.isHighlighted},t.toHandlers(i.listItemListeners)),{default:t.withCtx(()=>[i.isDefaultType?(t.openBlock(),t.createBlock(n,{key:0,unstyled:"",class:t.normalizeClass(["d-list-item__wrapper",l.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"},t.createSlots({_:2},[t.renderList(e.$slots,(y,o)=>({name:o,fn:t.withCtx(()=>[t.renderSlot(e.$slots,o)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(a,{size:"400"})]),key:"0"}:void 0]),1032,["class"])):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=u._(_,[["render",h]]);exports.default=g; //# sourceMappingURL=list-item.cjs.map