@dialpad/dialtone 9.99.0-beta.1 → 9.99.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone-default-theme.css +7 -5
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +7 -5
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +20188 -20188
- package/dist/vue2/components/list_item/list_item.vue.cjs +1 -1
- package/dist/vue2/components/list_item/list_item.vue.cjs.map +1 -1
- package/dist/vue2/components/list_item/list_item.vue.js +1 -1
- package/dist/vue2/components/list_item/list_item.vue.js.map +1 -1
- package/dist/vue2/types/components/list_item/list_item.vue.d.ts.map +1 -1
- package/dist/vue3/components/button/button.vue.cjs +1 -2
- package/dist/vue3/components/button/button.vue.cjs.map +1 -1
- package/dist/vue3/components/button/button.vue.js +1 -2
- package/dist/vue3/components/button/button.vue.js.map +1 -1
- package/dist/vue3/types/components/button/button.vue.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -173,7 +173,7 @@ var _sfc_render = function render() {
|
|
|
173
173
|
"d-list-item--highlighted": _vm.isHighlighted,
|
|
174
174
|
"d-list-item--static": !_vm.isHoverable
|
|
175
175
|
}
|
|
176
|
-
], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { "unstyled": "", "
|
|
176
|
+
], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", 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" }, scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
|
|
177
177
|
return { key: slotName, fn: function() {
|
|
178
178
|
return [_vm._t(slotName)];
|
|
179
179
|
}, proxy: true };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-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 <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n
|
|
1
|
+
{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-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 <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n left-class=\"d-list-item__left\"\n content-class=\"d-list-item__content\"\n title-class=\"d-list-item__title\"\n subtitle-class=\"d-list-item__subtitle\"\n bottom-class=\"d-list-item__bottom\"\n right-class=\"d-list-item__right\"\n selected-class=\"d-list-item__selected\"\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-check size=\"400\" />\n </template>\n </dt-item-layout>\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 { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\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 DtIconCheck,\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 isDefaultType () {\n if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n return false;\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"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"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"}
|
|
@@ -171,7 +171,7 @@ var _sfc_render = function render() {
|
|
|
171
171
|
"d-list-item--highlighted": _vm.isHighlighted,
|
|
172
172
|
"d-list-item--static": !_vm.isHoverable
|
|
173
173
|
}
|
|
174
|
-
], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { "unstyled": "", "
|
|
174
|
+
], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", 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" }, scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
|
|
175
175
|
return { key: slotName, fn: function() {
|
|
176
176
|
return [_vm._t(slotName)];
|
|
177
177
|
}, proxy: true };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-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 <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n
|
|
1
|
+
{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-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 <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n left-class=\"d-list-item__left\"\n content-class=\"d-list-item__content\"\n title-class=\"d-list-item__title\"\n subtitle-class=\"d-list-item__subtitle\"\n bottom-class=\"d-list-item__bottom\"\n right-class=\"d-list-item__right\"\n selected-class=\"d-list-item__selected\"\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-check size=\"400\" />\n </template>\n </dt-item-layout>\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 { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\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 DtIconCheck,\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 isDefaultType () {\n if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n return false;\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"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list_item.vue.d.ts","sourceRoot":"","sources":["../../../../components/list_item/list_item.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"list_item.vue.d.ts","sourceRoot":"","sources":["../../../../components/list_item/list_item.vue"],"names":[],"mappings":"AA8CA;"}
|
|
@@ -8,7 +8,6 @@ const link_constants = require("../link/link_constants.cjs");
|
|
|
8
8
|
const _sfc_main = {
|
|
9
9
|
compatConfig: { MODE: 3 },
|
|
10
10
|
name: "DtButton",
|
|
11
|
-
inheritAttrs: false,
|
|
12
11
|
props: {
|
|
13
12
|
/**
|
|
14
13
|
* Whether the button is a circle or not.
|
|
@@ -266,7 +265,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
266
265
|
style: { width: $props.width },
|
|
267
266
|
"aria-live": $options.computedAriaLive,
|
|
268
267
|
"aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
|
|
269
|
-
},
|
|
268
|
+
}, vue.toHandlers($options.buttonListeners, true)), [
|
|
270
269
|
$options.shouldRenderIcon() ? (vue.openBlock(), vue.createElementBlock("span", {
|
|
271
270
|
key: 0,
|
|
272
271
|
"data-qa": "dt-button-icon",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-bind=\"$attrs\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtButton',\n\n inheritAttrs: false,\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n hasSlotContent,\n };\n },\n\n computed: {\n\n buttonListeners () {\n return {\n focusin: (e) => {\n this.isInFocus = this.assertiveOnFocus;\n this.$emit('focusin', e);\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n this.$emit('focusout', e);\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return hasSlotContent(this.$slots.icon) && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n hasSlotContent,\n };\n },\n\n computed: {\n\n buttonListeners () {\n return {\n focusin: (e) => {\n this.isInFocus = this.assertiveOnFocus;\n this.$emit('focusin', e);\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n this.$emit('focusout', e);\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return hasSlotContent(this.$slots.icon) && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","hasSlotContent","BUTTON_ICON_SIZES","warn","getLinkKindModifier","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
|
|
@@ -6,7 +6,6 @@ import { LINK_KIND_MODIFIERS, getLinkKindModifier } from "../link/link_constants
|
|
|
6
6
|
const _sfc_main = {
|
|
7
7
|
compatConfig: { MODE: 3 },
|
|
8
8
|
name: "DtButton",
|
|
9
|
-
inheritAttrs: false,
|
|
10
9
|
props: {
|
|
11
10
|
/**
|
|
12
11
|
* Whether the button is a circle or not.
|
|
@@ -264,7 +263,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
264
263
|
style: { width: $props.width },
|
|
265
264
|
"aria-live": $options.computedAriaLive,
|
|
266
265
|
"aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
|
|
267
|
-
},
|
|
266
|
+
}, toHandlers($options.buttonListeners, true)), [
|
|
268
267
|
$options.shouldRenderIcon() ? (openBlock(), createElementBlock("span", {
|
|
269
268
|
key: 0,
|
|
270
269
|
"data-qa": "dt-button-icon",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-bind=\"$attrs\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtButton',\n\n inheritAttrs: false,\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n hasSlotContent,\n };\n },\n\n computed: {\n\n buttonListeners () {\n return {\n focusin: (e) => {\n this.isInFocus = this.assertiveOnFocus;\n this.$emit('focusin', e);\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n this.$emit('focusout', e);\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return hasSlotContent(this.$slots.icon) && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.vue.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n hasSlotContent,\n };\n },\n\n computed: {\n\n buttonListeners () {\n return {\n focusin: (e) => {\n this.isInFocus = this.assertiveOnFocus;\n this.$emit('focusin', e);\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n this.$emit('focusout', e);\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return hasSlotContent(this.$slots.icon) && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAyV+B,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone",
|
|
3
|
-
"version": "9.99.
|
|
3
|
+
"version": "9.99.1-beta.1",
|
|
4
4
|
"description": "Dialpad's Dialtone design system monorepo",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"overlayscrollbars": "2.10.0",
|
|
77
77
|
"regex-combined-emojis": "1.6.0",
|
|
78
78
|
"tippy.js": "6.3.7",
|
|
79
|
-
"@dialpad/dialtone-icons": "4.33.0",
|
|
80
79
|
"@dialpad/dialtone-emojis": "1.1.0",
|
|
80
|
+
"@dialpad/dialtone-icons": "4.33.0",
|
|
81
81
|
"@dialpad/dialtone-tokens": "1.40.0"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|