@dialpad/dialtone 9.45.0 → 9.47.0
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.css +2 -2
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-light.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/css/variables-tmo-dark.css +1 -1
- package/dist/tokens/css/variables-tmo-light.css +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-light.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/tokens/less/variables-tmo-dark.less +1 -1
- package/dist/tokens/less/variables-tmo-light.less +1 -1
- package/dist/vue2/lib/callbar-button-with-popover.cjs +16 -1
- package/dist/vue2/lib/callbar-button-with-popover.cjs.map +1 -1
- package/dist/vue2/lib/callbar-button-with-popover.js +16 -1
- package/dist/vue2/lib/callbar-button-with-popover.js.map +1 -1
- package/dist/vue2/lib/input.cjs +1 -1
- package/dist/vue2/lib/input.cjs.map +1 -1
- package/dist/vue2/lib/input.js +1 -1
- package/dist/vue2/lib/input.js.map +1 -1
- package/dist/vue2/lib/message-input.cjs +109 -80
- package/dist/vue2/lib/message-input.cjs.map +1 -1
- package/dist/vue2/lib/message-input.js +109 -80
- package/dist/vue2/lib/message-input.js.map +1 -1
- package/dist/vue2/lib/rich-text-editor.cjs +37 -14
- package/dist/vue2/lib/rich-text-editor.cjs.map +1 -1
- package/dist/vue2/lib/rich-text-editor.js +37 -14
- package/dist/vue2/lib/rich-text-editor.js.map +1 -1
- package/dist/vue2/style.css +64 -6
- package/dist/vue2/types/components/rich_text_editor/rich_text_editor.vue.d.ts +39 -4
- package/dist/vue2/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +31 -0
- package/dist/vue2/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts +47 -0
- package/dist/vue2/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts.map +1 -0
- package/dist/vue2/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts +4 -0
- package/dist/vue2/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts.map +1 -0
- package/dist/vue2/types/recipes/conversation_view/message_input/message_input.vue.d.ts +17 -3
- package/dist/vue2/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/dist/vue3/lib/callbar-button-with-popover.cjs +17 -2
- package/dist/vue3/lib/callbar-button-with-popover.cjs.map +1 -1
- package/dist/vue3/lib/callbar-button-with-popover.js +17 -2
- package/dist/vue3/lib/callbar-button-with-popover.js.map +1 -1
- package/dist/vue3/lib/input.cjs +2 -0
- package/dist/vue3/lib/input.cjs.map +1 -1
- package/dist/vue3/lib/input.js +2 -0
- package/dist/vue3/lib/input.js.map +1 -1
- package/dist/vue3/lib/message-input.cjs +200 -148
- package/dist/vue3/lib/message-input.cjs.map +1 -1
- package/dist/vue3/lib/message-input.js +203 -151
- package/dist/vue3/lib/message-input.js.map +1 -1
- package/dist/vue3/lib/rich-text-editor.cjs +39 -17
- package/dist/vue3/lib/rich-text-editor.cjs.map +1 -1
- package/dist/vue3/lib/rich-text-editor.js +40 -18
- package/dist/vue3/lib/rich-text-editor.js.map +1 -1
- package/dist/vue3/style.css +64 -6
- package/dist/vue3/types/components/rich_text_editor/rich_text_editor.vue.d.ts +39 -5
- package/dist/vue3/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +31 -0
- package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts +73 -0
- package/dist/vue3/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts.map +1 -0
- package/dist/vue3/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts +4 -0
- package/dist/vue3/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts.map +1 -0
- package/dist/vue3/types/recipes/conversation_view/message_input/message_input.vue.d.ts +17 -6
- package/dist/vue3/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/css/dialtone.css
CHANGED
|
@@ -7583,7 +7583,7 @@ body {
|
|
|
7583
7583
|
}
|
|
7584
7584
|
/**
|
|
7585
7585
|
* Do not edit directly
|
|
7586
|
-
* Generated on
|
|
7586
|
+
* Generated on Thu, 13 Jun 2024 20:06:47 GMT
|
|
7587
7587
|
*/
|
|
7588
7588
|
|
|
7589
7589
|
.dialtone-theme-light {
|
|
@@ -8404,7 +8404,7 @@ body {
|
|
|
8404
8404
|
|
|
8405
8405
|
/**
|
|
8406
8406
|
* Do not edit directly
|
|
8407
|
-
* Generated on
|
|
8407
|
+
* Generated on Thu, 13 Jun 2024 20:06:48 GMT
|
|
8408
8408
|
*/
|
|
8409
8409
|
|
|
8410
8410
|
.dialtone-theme-dark {
|
|
@@ -69,6 +69,21 @@ const _sfc_main = {
|
|
|
69
69
|
type: String,
|
|
70
70
|
default: "top"
|
|
71
71
|
},
|
|
72
|
+
/**
|
|
73
|
+
* Displaces the content box from its anchor element
|
|
74
|
+
* by the specified number of pixels.
|
|
75
|
+
* <a
|
|
76
|
+
* class="d-link"
|
|
77
|
+
* href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
|
|
78
|
+
* target="_blank"
|
|
79
|
+
* >
|
|
80
|
+
* Tippy.js docs
|
|
81
|
+
* </a>
|
|
82
|
+
*/
|
|
83
|
+
offset: {
|
|
84
|
+
type: Array,
|
|
85
|
+
default: () => [0, 16]
|
|
86
|
+
},
|
|
72
87
|
/**
|
|
73
88
|
* The element that is focused when the popover is opened. This can be an
|
|
74
89
|
* HTMLElement within the popover, a string starting with '#' which will
|
|
@@ -225,7 +240,7 @@ const _sfc_main = {
|
|
|
225
240
|
};
|
|
226
241
|
var _sfc_render = function render() {
|
|
227
242
|
var _vm = this, _c = _vm._self._c;
|
|
228
|
-
return _c("div", { staticClass: "dt-recipe--callbar-button-with-popover" }, [_c("dt-recipe-callbar-button", { staticClass: "dt-recipe--callbar-button-with-popover--main-button", attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "active": _vm.active, "danger": _vm.danger, "button-class": _vm.buttonClass, "button-width-size": _vm.buttonWidthSize, "text-class": _vm.textClass }, on: { "click": _vm.buttonClick } }, [_vm._t("icon", null, { "slot": "icon" }), _vm._t("tooltip", null, { "slot": "tooltip" }), _vm._t("default")], 2), _vm.showArrowButton ? _c("dt-popover", _vm._b({ staticClass: "dt-recipe--callbar-button-with-popover--popover-wrapper", attrs: { "id": _vm.id, "modal": false, "open": _vm.open, "placement": _vm.placement, "initial-focus-element": _vm.initialFocusElement, "show-close-button": _vm.showCloseButton, "offset":
|
|
243
|
+
return _c("div", { staticClass: "dt-recipe--callbar-button-with-popover" }, [_c("dt-recipe-callbar-button", { staticClass: "dt-recipe--callbar-button-with-popover--main-button", attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "active": _vm.active, "danger": _vm.danger, "button-class": _vm.buttonClass, "button-width-size": _vm.buttonWidthSize, "text-class": _vm.textClass }, on: { "click": _vm.buttonClick } }, [_vm._t("icon", null, { "slot": "icon" }), _vm._t("tooltip", null, { "slot": "tooltip" }), _vm._t("default")], 2), _vm.showArrowButton ? _c("dt-popover", _vm._b({ staticClass: "dt-recipe--callbar-button-with-popover--popover-wrapper", attrs: { "id": _vm.id, "modal": false, "open": _vm.open, "placement": _vm.placement, "initial-focus-element": _vm.initialFocusElement, "show-close-button": _vm.showCloseButton, "offset": _vm.offset, "padding": "none", "dialog-class": ["dt-recipe--callbar-button-with-popover--popover", _vm.contentClass], "header-class": "d-d-flex d-ai-center d-fw-normal d-px12", "open-popover": _vm.showPopover }, on: { "opened": _vm.onModalIsOpened }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
229
244
|
return [_c("dt-button", { class: [
|
|
230
245
|
"dt-recipe--callbar-button-with-popover--arrow",
|
|
231
246
|
{ "dt-recipe--callbar-button-with-popover--arrow--large": !_vm.isCompactMode }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbar-button-with-popover.cjs","sources":["../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"[0, 16]\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon\n name=\"chevron-up\"\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\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 * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIcon","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"callbar-button-with-popover.cjs","sources":["../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon\n name=\"chevron-up\"\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\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 * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIcon","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE"],"mappings":"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"}
|
|
@@ -67,6 +67,21 @@ const _sfc_main = {
|
|
|
67
67
|
type: String,
|
|
68
68
|
default: "top"
|
|
69
69
|
},
|
|
70
|
+
/**
|
|
71
|
+
* Displaces the content box from its anchor element
|
|
72
|
+
* by the specified number of pixels.
|
|
73
|
+
* <a
|
|
74
|
+
* class="d-link"
|
|
75
|
+
* href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
|
|
76
|
+
* target="_blank"
|
|
77
|
+
* >
|
|
78
|
+
* Tippy.js docs
|
|
79
|
+
* </a>
|
|
80
|
+
*/
|
|
81
|
+
offset: {
|
|
82
|
+
type: Array,
|
|
83
|
+
default: () => [0, 16]
|
|
84
|
+
},
|
|
70
85
|
/**
|
|
71
86
|
* The element that is focused when the popover is opened. This can be an
|
|
72
87
|
* HTMLElement within the popover, a string starting with '#' which will
|
|
@@ -223,7 +238,7 @@ const _sfc_main = {
|
|
|
223
238
|
};
|
|
224
239
|
var _sfc_render = function render() {
|
|
225
240
|
var _vm = this, _c = _vm._self._c;
|
|
226
|
-
return _c("div", { staticClass: "dt-recipe--callbar-button-with-popover" }, [_c("dt-recipe-callbar-button", { staticClass: "dt-recipe--callbar-button-with-popover--main-button", attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "active": _vm.active, "danger": _vm.danger, "button-class": _vm.buttonClass, "button-width-size": _vm.buttonWidthSize, "text-class": _vm.textClass }, on: { "click": _vm.buttonClick } }, [_vm._t("icon", null, { "slot": "icon" }), _vm._t("tooltip", null, { "slot": "tooltip" }), _vm._t("default")], 2), _vm.showArrowButton ? _c("dt-popover", _vm._b({ staticClass: "dt-recipe--callbar-button-with-popover--popover-wrapper", attrs: { "id": _vm.id, "modal": false, "open": _vm.open, "placement": _vm.placement, "initial-focus-element": _vm.initialFocusElement, "show-close-button": _vm.showCloseButton, "offset":
|
|
241
|
+
return _c("div", { staticClass: "dt-recipe--callbar-button-with-popover" }, [_c("dt-recipe-callbar-button", { staticClass: "dt-recipe--callbar-button-with-popover--main-button", attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "active": _vm.active, "danger": _vm.danger, "button-class": _vm.buttonClass, "button-width-size": _vm.buttonWidthSize, "text-class": _vm.textClass }, on: { "click": _vm.buttonClick } }, [_vm._t("icon", null, { "slot": "icon" }), _vm._t("tooltip", null, { "slot": "tooltip" }), _vm._t("default")], 2), _vm.showArrowButton ? _c("dt-popover", _vm._b({ staticClass: "dt-recipe--callbar-button-with-popover--popover-wrapper", attrs: { "id": _vm.id, "modal": false, "open": _vm.open, "placement": _vm.placement, "initial-focus-element": _vm.initialFocusElement, "show-close-button": _vm.showCloseButton, "offset": _vm.offset, "padding": "none", "dialog-class": ["dt-recipe--callbar-button-with-popover--popover", _vm.contentClass], "header-class": "d-d-flex d-ai-center d-fw-normal d-px12", "open-popover": _vm.showPopover }, on: { "opened": _vm.onModalIsOpened }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
227
242
|
return [_c("dt-button", { class: [
|
|
228
243
|
"dt-recipe--callbar-button-with-popover--arrow",
|
|
229
244
|
{ "dt-recipe--callbar-button-with-popover--arrow--large": !_vm.isCompactMode }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbar-button-with-popover.js","sources":["../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"[0, 16]\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon\n name=\"chevron-up\"\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\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 * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["this"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"callbar-button-with-popover.js","sources":["../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon\n name=\"chevron-up\"\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\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 * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["this"],"mappings":"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"}
|
package/dist/vue2/lib/input.cjs
CHANGED
|
@@ -473,7 +473,7 @@ var _sfc_render = function render() {
|
|
|
473
473
|
_vm.descriptionSizeClasses[_vm.size]
|
|
474
474
|
], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-input-description" } }, [_vm.$slots.description || _vm.description ? _c("div", [_vm._t("description", function() {
|
|
475
475
|
return [_vm._v(_vm._s(_vm.description))];
|
|
476
|
-
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
476
|
+
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
477
477
|
};
|
|
478
478
|
var _sfc_staticRenderFns = [];
|
|
479
479
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-input__label\"\n :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\n </span>\n </div>\n </label>\n <dt-validation-messages\n :validation-messages=\"validationMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-input-messages\"\n />\n </div>\n</template>\n\n<script>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n return !!(\n this.validationProps.length.description &&\n this.validationProps.length.max\n );\n },\n\n shouldLimitMaxLength () {\n return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n },\n\n // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning || this.isInputFocused || this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize || !this.isValidSize) {\n return '';\n }\n\n const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-input__input',\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\n ];\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n clear () {\n this.$emit('input', '');\n this.$emit('clear');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-input__label\"\n :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\n </span>\n </div>\n </label>\n <dt-validation-messages\n :validation-messages=\"validationMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-input-messages\"\n />\n </div>\n</template>\n\n<script>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n return !!(\n this.validationProps.length.description &&\n this.validationProps.length.max\n );\n },\n\n shouldLimitMaxLength () {\n return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n },\n\n // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning || this.isInputFocused || this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize || !this.isValidSize) {\n return '';\n }\n\n const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-input__input',\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\n ];\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n clear () {\n this.$emit('input', '');\n this.$emit('clear');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES"],"mappings":"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"}
|
package/dist/vue2/lib/input.js
CHANGED
|
@@ -471,7 +471,7 @@ var _sfc_render = function render() {
|
|
|
471
471
|
_vm.descriptionSizeClasses[_vm.size]
|
|
472
472
|
], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-input-description" } }, [_vm.$slots.description || _vm.description ? _c("div", [_vm._t("description", function() {
|
|
473
473
|
return [_vm._v(_vm._s(_vm.description))];
|
|
474
|
-
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
474
|
+
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
475
475
|
};
|
|
476
476
|
var _sfc_staticRenderFns = [];
|
|
477
477
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|