@dialpad/dialtone-vue/dist/lib/list-item/list-item.js

Vue component library for Dialpad's design system Dialtone

import { LIST_ITEM_NAVIGATION_TYPES as i, LIST_ITEM_TYPES as l } from "./list-item-constants.js";
import r from "../../common/utils/index.js";
import { DtIconCheck as n } from "@dialpad/dialtone-icons/vue2";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import d from "../item-layout/item-layout.js";
const u = ["listitem", "menuitem", "option"], m = {
  name: "DtListItem",
  components: {
    DtItemLayout: d,
    DtIconCheck: n
  },
  /**
   * Value provided from keyboard_list_navigation.js using id prop.
   */
  inject: {
    highlightId: { default: null }
  },
  props: {
    /**
     * Id for the item.
     */
    id: {
      type: String,
      default() {
        return r.getUniqueString();
      }
    },
    /**
     * String to use for the item's role.
     */
    role: {
      type: String,
      default: "listitem",
      validator: (e) => u.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: i.NONE,
      validator: (e) => Object.values(i).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: [
    /**
     * Native click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * 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 {
        ...this.$listeners,
        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 === i.TAB;
    },
    /**
     * Whether to apply hover styles.
     */
    isHoverable() {
      return this.navigationType !== i.NONE;
    }
  },
  methods: {
    onClick(e) {
      this.$emit("click", e);
    },
    onMouseHover() {
      this.mouseHighlighted = !0;
    },
    onMouseLeave() {
      this.mouseHighlighted = !1;
    }
  }
};
var c = function() {
  var t = this, s = t._self._c;
  return s(t.elementType, t._g({ tag: "component", class: [
    "d-list-item",
    {
      "d-list-item--focusable": t.isFocusable,
      "d-list-item--highlighted": t.isHighlighted,
      "d-list-item--static": !t.isHoverable
    }
  ], attrs: { id: t.id, tabindex: t.isFocusable ? 0 : -1, role: t.role, "aria-selected": t.role === "listitem" ? void 0 : t.isHighlighted } }, t.listItemListeners), [t.isDefaultType ? s("dt-item-layout", { class: ["d-list-item__wrapper", t.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: t._u([t._l(t.$slots, function(_, o) {
    return { key: o, fn: function() {
      return [t._t(o)];
    }, proxy: !0 };
  }), t.selected ? { key: "selected", fn: function() {
    return [s("dt-icon-check", { attrs: { size: "400" } })];
  }, proxy: !0 } : null], null, !0) }) : t._t("default")], 2);
}, h = [], p = /* @__PURE__ */ a(
  m,
  c,
  h
);
const I = p.exports;
export {
  I as default
};
//# sourceMappingURL=list-item.js.map