@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
212 lines (211 loc) • 5.72 kB
JavaScript
import { LIST_ITEM_NAVIGATION_TYPES as s, LIST_ITEM_TYPES as l } from "./list-item-constants.js";
import h from "../../common/utils/index.js";
import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as r, createBlock as n, openBlock as d, resolveDynamicComponent as f, mergeProps as _, toHandlers as p, withCtx as a, renderSlot as m, normalizeClass as y, createSlots as v, renderList as T, createVNode as b } from "vue";
import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import k from "../item-layout/item-layout.js";
const L = ["listitem", "menuitem", "option"], S = {
compatConfig: { MODE: 3 },
name: "DtListItem",
components: {
DtItemLayout: k,
DtIconCheck: g
},
/**
* Value provided from keyboard_list_navigation.js using id prop.
*/
inject: {
highlightId: { default: null }
},
props: {
/**
* Id for the item.
*/
id: {
type: String,
default() {
return h.getUniqueString();
}
},
/**
* String to use for the item's role.
*/
role: {
type: String,
default: "listitem",
validator: (e) => L.includes(e)
},
/**
* HTML element type (tag name) of the content wrapper element.
*/
elementType: {
type: String,
default: "li"
},
/**
* The type of child list item to use.
* @values default, custom
*/
type: {
type: String,
default: l.DEFAULT,
validator: (e) => Object.values(l).includes(e)
},
/**
* The type of navigation that this component should support.
* - "arrow-keys" for items that are navigated with UP/DOWN keys.
* - "tab" for items that are navigated using the TAB key.
* - "none" for static items that are not interactive.
* @values arrow-keys, tab, none
*/
navigationType: {
type: String,
default: s.NONE,
validator: (e) => Object.values(s).includes(e)
},
/**
* Applies selected styles to the list item
*/
selected: {
type: Boolean,
default: !1
},
/**
* Additional Classes to apply to the wrapper element,
* note: it only applies on "default" type
* Can accept all of: String, Object, and Array, i.e. has the
* same api as Vue's built-in handling of the class attribute.
*/
wrapperClass: {
type: [String, Object, Array],
default: ""
}
},
emits: [
/**
* Key down event
*
* @event keydown
* @type {KeyboardEvent}
*/
"keydown",
/**
* Native mouse move event
*
* @event mousemove
* @type {MouseEvent}
*/
"mousemove",
/**
* Native mouse leave event
*
* @event mouseleave
* @type {MouseEvent}
*/
"mouseleave"
],
data() {
return {
injected: !1,
mouseHighlighted: !1
};
},
computed: {
isDefaultType() {
return this.type === l.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);
}
};
},
/**
* For keyboard navigation, whether this item is currently highlighted.
* An injected highlightId will override the default mouseover highlight.
*/
isHighlighted() {
return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
},
isFocusable() {
return this.navigationType === s.TAB;
},
/**
* Whether to apply hover styles.
*/
isHoverable() {
return this.navigationType !== s.NONE;
}
},
methods: {
onClick(e) {
this.$emit("click", e);
},
onMouseHover() {
this.mouseHighlighted = !0;
},
onMouseLeave() {
this.mouseHighlighted = !1;
}
}
};
function H(e, C, i, D, E, t) {
const c = r("dt-icon-check"), u = r("dt-item-layout");
return d(), n(f(i.elementType), _({
id: i.id,
class: [
"d-list-item",
{
"d-list-item--focusable": t.isFocusable,
"d-list-item--highlighted": t.isHighlighted,
"d-list-item--static": !t.isHoverable
}
],
tabindex: t.isFocusable ? 0 : -1,
role: i.role,
"aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
}, p(t.listItemListeners)), {
default: a(() => [
t.isDefaultType ? (d(), n(u, {
key: 0,
unstyled: "",
class: y(["d-list-item__wrapper", i.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"
}, v({ _: 2 }, [
T(e.$slots, (w, o) => ({
name: o,
fn: a(() => [
m(e.$slots, o)
])
})),
i.selected ? {
name: "selected",
fn: a(() => [
b(c, { size: "400" })
]),
key: "0"
} : void 0
]), 1032, ["class"])) : m(e.$slots, "default", { key: 1 })
]),
_: 3
}, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
}
const B = /* @__PURE__ */ I(S, [["render", H]]);
export {
B as default
};
//# sourceMappingURL=list-item.js.map