@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
155 lines (154 loc) • 3.81 kB
JavaScript
import e from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { LIST_ITEM_NAVIGATION_TYPES as n, LIST_ITEM_TYPES as r } from "./list-item-constants.js";
import i from "../item-layout/item-layout.js";
import { createBlock as a, createSlots as o, createVNode as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p, resolveDynamicComponent as m, toHandlers as h, withCtx as g } from "vue";
import { DtIconCheck as _ } from "@dialpad/dialtone-icons/vue3";
//#region components/list_item/list_item.vue
var v = [
"listitem",
"menuitem",
"option"
], y = {
compatConfig: { MODE: 3 },
name: "DtListItem",
components: {
DtItemLayout: i,
DtIconCheck: _
},
inject: { highlightId: { default: null } },
props: {
id: {
type: String,
default() {
return e.getUniqueString();
}
},
role: {
type: String,
default: "listitem",
validator: (e) => v.includes(e)
},
elementType: {
type: String,
default: "li"
},
type: {
type: String,
default: r.DEFAULT,
validator: (e) => Object.values(r).includes(e)
},
navigationType: {
type: String,
default: n.NONE,
validator: (e) => Object.values(n).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 === r.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.TAB;
},
isHoverable() {
return this.navigationType !== n.NONE;
}
},
methods: {
onClick(e) {
this.$emit("click", e);
},
onMouseHover() {
this.mouseHighlighted = !0;
},
onMouseLeave() {
this.mouseHighlighted = !1;
}
}
};
function b(e, t, n, r, i, _) {
let v = p("dt-icon-check"), y = p("dt-item-layout");
return u(), a(m(n.elementType), c({
id: n.id,
class: ["d-list-item", {
"d-list-item--focusable": _.isFocusable,
"d-list-item--highlighted": _.isHighlighted,
"d-list-item--static": !_.isHoverable
}],
tabindex: _.isFocusable ? 0 : -1,
role: n.role,
"aria-selected": n.role === "listitem" ? void 0 : _.isHighlighted
}, h(_.listItemListeners)), {
default: g(() => [_.isDefaultType ? (u(), a(y, {
key: 0,
unstyled: "",
class: l(["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"
}, o({ _: 2 }, [d(e.$slots, (t, n) => ({
name: n,
fn: g(() => [f(e.$slots, n)])
})), n.selected ? {
name: "selected",
fn: g(() => [s(v, { size: "400" })]),
key: "0"
} : void 0]), 1032, ["class"])) : f(e.$slots, "default", { key: 1 })]),
_: 3
}, 16, [
"id",
"class",
"tabindex",
"role",
"aria-selected"
]);
}
var x = /* @__PURE__ */ t(y, [["render", b]]);
//#endregion
export { x as default };
//# sourceMappingURL=list-item.js.map