@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/list-item.js

@@ -1,19 +1,19 @@
-import { L as l, a as i } from "../chunks/list_item_constants-LTUc74pD.js";
-import r from "./utils.js";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtItemLayout as n } from "./item-layout.js";
-import { DtIcon as u } from "./icon.js";
-import "./constants.js";
+import { LIST_ITEM_TYPES, LIST_ITEM_NAVIGATION_TYPES } from "../chunks/list_item_constants-u1xcN9Dd.js";
+import utils from "../common/utils.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtItemLayout } from "./item-layout.js";
+import { DtIcon } from "./icon.js";
+import "../common/constants.js";
 import "vue";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-const m = ["listitem", "menuitem", "option"], d = {
+const ROLES = ["listitem", "menuitem", "option"];
+const _sfc_main = {
   name: "DtListItem",
   components: {
-    DtItemLayout: n,
-    DtIcon: u
+    DtItemLayout,
+    DtIcon
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -28,7 +28,7 @@ const m = ["listitem", "menuitem", "option"], d = {
     id: {
       type: String,
       default() {
-        return r.getUniqueString();
+        return utils.getUniqueString();
       }
     },
     /**
@@ -37,7 +37,7 @@ const m = ["listitem", "menuitem", "option"], d = {
     role: {
       type: String,
       default: "listitem",
-      validator: (t) => m.includes(t)
+      validator: (role) => ROLES.includes(role)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -52,8 +52,8 @@ const m = ["listitem", "menuitem", "option"], d = {
      */
     type: {
       type: String,
-      default: l.DEFAULT,
-      validator: (t) => Object.values(l).includes(t)
+      default: LIST_ITEM_TYPES.DEFAULT,
+      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t)
     },
     /**
      * The type of navigation that this component should support.
@@ -64,15 +64,15 @@ const m = ["listitem", "menuitem", "option"], d = {
      */
     navigationType: {
       type: String,
-      default: i.NONE,
-      validator: (t) => Object.values(i).includes(t)
+      default: LIST_ITEM_NAVIGATION_TYPES.NONE,
+      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     },
     /**
      * Applies selected styles to the list item
      */
     selected: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: [
@@ -107,15 +107,15 @@ const m = ["listitem", "menuitem", "option"], d = {
   ],
   data() {
     return {
-      injected: !1,
-      mouseHighlighted: !1
+      injected: false,
+      mouseHighlighted: false
     };
   },
   computed: {
     listItemType() {
       switch (this.type) {
-        case l.DEFAULT:
-          return n;
+        case LIST_ITEM_TYPES.DEFAULT:
+          return DtItemLayout;
         default:
           return null;
       }
@@ -123,14 +123,19 @@ const m = ["listitem", "menuitem", "option"], d = {
     listItemListeners() {
       return {
         ...this.$listeners,
-        keydown: (t) => {
-          ["enter", "space"].includes(t.code.toLowerCase()) && this.onClick(t), this.$emit("keydown", t);
+        keydown: (event) => {
+          if (["enter", "space"].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+          this.$emit("keydown", event);
         },
-        mousemove: (t) => {
-          this.onMouseHover(t), this.$emit("mousemove", t);
+        mousemove: (event) => {
+          this.onMouseHover(event);
+          this.$emit("mousemove", event);
         },
-        mouseleave: (t) => {
-          this.onMouseLeave(t), this.$emit("mouseleave", t);
+        mouseleave: (event) => {
+          this.onMouseLeave(event);
+          this.$emit("mouseleave", event);
         }
       };
     },
@@ -139,57 +144,62 @@ const m = ["listitem", "menuitem", "option"], d = {
      * An injected highlightId will override the default mouseover highlight.
      */
     isHighlighted() {
-      return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
+      if (this.isHoverable) {
+        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;
+      }
+      return false;
     },
     isFocusable() {
-      return this.navigationType === i.TAB;
+      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;
     },
     /**
      * Whether to apply hover styles.
      */
     isHoverable() {
-      return this.navigationType !== i.NONE;
+      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;
     }
   },
   methods: {
-    onClick(t) {
-      this.$emit("click", t);
+    onClick(e) {
+      this.$emit("click", e);
     },
     onMouseHover() {
-      this.mouseHighlighted = !0;
+      this.mouseHighlighted = true;
     },
     onMouseLeave() {
-      this.mouseHighlighted = !1;
+      this.mouseHighlighted = false;
     }
   }
 };
-var c = function() {
-  var e = this, s = e._self._c;
-  return s(e.elementType, e._g({ tag: "component", class: ["dt-list-item", {
-    "dt-list-item--focusable": e.isFocusable,
-    "dt-list-item--highlighted": e.isHighlighted,
-    "dt-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.listItemType ? s(e.listItemType, { tag: "component", scopedSlots: e._u([e._l(e.$slots, function(g, o) {
-    return { key: o, fn: function() {
-      return [e._t(o)];
-    }, proxy: !0 };
-  }), e.selected ? { key: "selected", fn: function() {
-    return [s("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { name: "check", size: "400" } })];
-  }, proxy: !0 } : null], null, !0) }) : e._t("default")], 2);
-}, h = [], p = /* @__PURE__ */ a(
-  d,
-  c,
-  h,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["dt-list-item", {
+    "dt-list-item--focusable": _vm.isFocusable,
+    "dt-list-item--highlighted": _vm.isHighlighted,
+    "dt-list-item--static": !_vm.isHoverable
+  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
+    return { key: slotName, fn: function() {
+      return [_vm._t(slotName)];
+    }, proxy: true };
+  }), _vm.selected ? { key: "selected", fn: function() {
+    return [_c("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { "name": "check", "size": "400" } })];
+  }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const E = p.exports;
+const DtListItem = __component__.exports;
 export {
-  E as DtListItem,
-  i as LIST_ITEM_NAVIGATION_TYPES,
-  l as LIST_ITEM_TYPES
+  DtListItem,
+  LIST_ITEM_NAVIGATION_TYPES,
+  LIST_ITEM_TYPES
 };
 //# sourceMappingURL=list-item.js.map

package/dist/lib/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","event","e"],"mappings":"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"}
+{"version":3,"file":"list-item.js","sources":["../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":[],"mappings":"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"}