UNPKG

@dialpad/dialtone-vue

Version:

Vue component library for Dialpad's design system Dialtone

3 lines (2 loc) 2.96 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./list-item-constants.cjs"),o=require("../../common/utils/index.cjs"),n=require("@dialpad/dialtone-icons/vue2"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../item-layout/item-layout.cjs"),u=["listitem","menuitem","option"],d={name:"DtListItem",components:{DtItemLayout:a.default,DtIconCheck:n.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return o.default.getUniqueString()}},role:{type:String,default:"listitem",validator:t=>u.includes(t)},elementType:{type:String,default:"li"},type:{type:String,default:i.LIST_ITEM_TYPES.DEFAULT,validator:t=>Object.values(i.LIST_ITEM_TYPES).includes(t)},navigationType:{type:String,default:i.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:t=>Object.values(i.LIST_ITEM_NAVIGATION_TYPES).includes(t)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:""}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===i.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{...this.$listeners,keydown:t=>{["enter","space"].includes(t.code.toLowerCase())&&this.onClick(t),this.$emit("keydown",t)},mousemove:t=>{this.onMouseHover(t),this.$emit("mousemove",t)},mouseleave:t=>{this.onMouseLeave(t),this.$emit("mouseleave",t)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===i.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==i.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(t){this.$emit("click",t)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};var c=function(){var e=this,s=e._self._c;return s(e.elementType,e._g({tag:"component",class:["d-list-item",{"d-list-item--focusable":e.isFocusable,"d-list-item--highlighted":e.isHighlighted,"d-list-item--static":!e.isHoverable}],attrs:{id:e.id,tabindex:e.isFocusable?0:-1,role:e.role,"aria-selected":e.role==="listitem"?void 0:e.isHighlighted}},e.listItemListeners),[e.isDefaultType?s("dt-item-layout",{class:["d-list-item__wrapper",e.wrapperClass],attrs:{unstyled:"","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"},scopedSlots:e._u([e._l(e.$slots,function(g,l){return{key:l,fn:function(){return[e._t(l)]},proxy:!0}}),e.selected?{key:"selected",fn:function(){return[s("dt-icon-check",{attrs:{size:"400"}})]},proxy:!0}:null],null,!0)}):e._t("default")],2)},_=[],m=r.n(d,c,_);const h=m.exports;exports.default=h; //# sourceMappingURL=list-item.cjs.map