@dialpad/dialtone 9.35.0 → 9.36.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.css +4 -151
- package/dist/css/dialtone.min.css +1 -1
- 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/chunks/{dropdown-IaLNHmVd.js → dropdown-2D4i6Qkg.js} +2 -2
- package/dist/vue2/chunks/{dropdown-IaLNHmVd.js.map → dropdown-2D4i6Qkg.js.map} +1 -1
- package/dist/vue2/chunks/{dropdown-DTtcQEFC.js → dropdown-8L_PePwv.js} +2 -2
- package/dist/vue2/chunks/{dropdown-DTtcQEFC.js.map → dropdown-8L_PePwv.js.map} +1 -1
- package/dist/vue2/chunks/{popover_constants-Qkpb0yh2.js → popover_constants-kQaX7G4a.js} +10 -13
- package/dist/vue2/chunks/popover_constants-kQaX7G4a.js.map +1 -0
- package/dist/vue2/chunks/{popover_constants-JwBF9h1Z.js → popover_constants-qUYTzsS3.js} +10 -13
- package/dist/vue2/chunks/popover_constants-qUYTzsS3.js.map +1 -0
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/dialtone-vue.cjs +2 -2
- package/dist/vue2/dialtone-vue.js +2 -2
- package/dist/vue2/lib/callbar-button-with-popover.cjs +2 -2
- package/dist/vue2/lib/callbar-button-with-popover.js +2 -2
- package/dist/vue2/lib/callbar-button.cjs +1 -2
- package/dist/vue2/lib/callbar-button.cjs.map +1 -1
- package/dist/vue2/lib/callbar-button.js +1 -2
- package/dist/vue2/lib/callbar-button.js.map +1 -1
- package/dist/vue2/lib/combobox-multi-select.cjs +1 -1
- package/dist/vue2/lib/combobox-multi-select.js +1 -1
- package/dist/vue2/lib/combobox-with-popover.cjs +1 -1
- package/dist/vue2/lib/combobox-with-popover.js +1 -1
- package/dist/vue2/lib/contact-row.cjs +1 -2
- package/dist/vue2/lib/contact-row.cjs.map +1 -1
- package/dist/vue2/lib/contact-row.js +1 -2
- package/dist/vue2/lib/contact-row.js.map +1 -1
- package/dist/vue2/lib/datepicker.cjs +1 -2
- package/dist/vue2/lib/datepicker.cjs.map +1 -1
- package/dist/vue2/lib/datepicker.js +1 -2
- package/dist/vue2/lib/datepicker.js.map +1 -1
- package/dist/vue2/lib/dropdown.cjs +2 -2
- package/dist/vue2/lib/dropdown.js +2 -2
- package/dist/vue2/lib/editor.cjs +1 -1
- package/dist/vue2/lib/editor.js +1 -1
- package/dist/vue2/lib/emoji-picker.cjs +1 -2
- package/dist/vue2/lib/emoji-picker.cjs.map +1 -1
- package/dist/vue2/lib/emoji-picker.js +1 -2
- package/dist/vue2/lib/emoji-picker.js.map +1 -1
- package/dist/vue2/lib/emoji-row.cjs +1 -2
- package/dist/vue2/lib/emoji-row.cjs.map +1 -1
- package/dist/vue2/lib/emoji-row.js +1 -2
- package/dist/vue2/lib/emoji-row.js.map +1 -1
- package/dist/vue2/lib/general-row.cjs +32 -8
- package/dist/vue2/lib/general-row.cjs.map +1 -1
- package/dist/vue2/lib/general-row.js +32 -8
- package/dist/vue2/lib/general-row.js.map +1 -1
- package/dist/vue2/lib/group-row.cjs +1 -2
- package/dist/vue2/lib/group-row.cjs.map +1 -1
- package/dist/vue2/lib/group-row.js +1 -2
- package/dist/vue2/lib/group-row.js.map +1 -1
- package/dist/vue2/lib/hovercard.cjs +1 -1
- package/dist/vue2/lib/hovercard.js +1 -1
- package/dist/vue2/lib/ivr-node.cjs +2 -2
- package/dist/vue2/lib/ivr-node.js +2 -2
- package/dist/vue2/lib/message-input.cjs +2 -2
- package/dist/vue2/lib/message-input.js +2 -2
- package/dist/vue2/lib/popover.cjs +2 -2
- package/dist/vue2/lib/popover.cjs.map +1 -1
- package/dist/vue2/lib/popover.js +3 -3
- package/dist/vue2/lib/popover.js.map +1 -1
- package/dist/vue2/lib/tooltip-directive.cjs +1 -2
- package/dist/vue2/lib/tooltip-directive.cjs.map +1 -1
- package/dist/vue2/lib/tooltip-directive.js +1 -2
- package/dist/vue2/lib/tooltip-directive.js.map +1 -1
- package/dist/vue2/lib/tooltip.cjs +36 -31
- package/dist/vue2/lib/tooltip.cjs.map +1 -1
- package/dist/vue2/lib/tooltip.js +37 -32
- package/dist/vue2/lib/tooltip.js.map +1 -1
- package/dist/vue2/style.css +87 -55
- package/dist/vue2/types/components/popover/tippy_utils.d.ts +1 -6
- package/dist/vue2/types/components/popover/tippy_utils.d.ts.map +1 -1
- package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts +40 -36
- package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/leftbar/general_row/general_row.vue.d.ts +19 -0
- package/dist/vue2/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
- package/dist/vue3/chunks/{dropdown-w8Do29L5.js → dropdown-XFYig-ys.js} +2 -2
- package/dist/vue3/chunks/{dropdown-w8Do29L5.js.map → dropdown-XFYig-ys.js.map} +1 -1
- package/dist/vue3/chunks/{dropdown-Hn-TeTvZ.js → dropdown-tVfEPEl1.js} +2 -2
- package/dist/vue3/chunks/{dropdown-Hn-TeTvZ.js.map → dropdown-tVfEPEl1.js.map} +1 -1
- package/dist/vue3/chunks/{popover_constants-Qkpb0yh2.js → popover_constants-kQaX7G4a.js} +10 -13
- package/dist/vue3/chunks/popover_constants-kQaX7G4a.js.map +1 -0
- package/dist/vue3/chunks/{popover_constants-JwBF9h1Z.js → popover_constants-qUYTzsS3.js} +10 -13
- package/dist/vue3/chunks/popover_constants-qUYTzsS3.js.map +1 -0
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/dialtone-vue.cjs +2 -2
- package/dist/vue3/dialtone-vue.js +2 -2
- package/dist/vue3/lib/callbar-button-with-popover.cjs +2 -2
- package/dist/vue3/lib/callbar-button-with-popover.js +2 -2
- package/dist/vue3/lib/callbar-button.cjs +1 -2
- package/dist/vue3/lib/callbar-button.cjs.map +1 -1
- package/dist/vue3/lib/callbar-button.js +1 -2
- package/dist/vue3/lib/callbar-button.js.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.cjs +1 -1
- package/dist/vue3/lib/combobox-multi-select.js +1 -1
- package/dist/vue3/lib/combobox-with-popover.cjs +1 -1
- package/dist/vue3/lib/combobox-with-popover.js +1 -1
- package/dist/vue3/lib/contact-row.cjs +1 -2
- package/dist/vue3/lib/contact-row.cjs.map +1 -1
- package/dist/vue3/lib/contact-row.js +1 -2
- package/dist/vue3/lib/contact-row.js.map +1 -1
- package/dist/vue3/lib/datepicker.cjs +1 -2
- package/dist/vue3/lib/datepicker.cjs.map +1 -1
- package/dist/vue3/lib/datepicker.js +1 -2
- package/dist/vue3/lib/datepicker.js.map +1 -1
- package/dist/vue3/lib/dropdown.cjs +2 -2
- package/dist/vue3/lib/dropdown.js +2 -2
- package/dist/vue3/lib/editor.cjs +1 -1
- package/dist/vue3/lib/editor.js +1 -1
- package/dist/vue3/lib/emoji-picker.cjs +1 -2
- package/dist/vue3/lib/emoji-picker.cjs.map +1 -1
- package/dist/vue3/lib/emoji-picker.js +1 -2
- package/dist/vue3/lib/emoji-picker.js.map +1 -1
- package/dist/vue3/lib/emoji-row.cjs +1 -2
- package/dist/vue3/lib/emoji-row.cjs.map +1 -1
- package/dist/vue3/lib/emoji-row.js +1 -2
- package/dist/vue3/lib/emoji-row.js.map +1 -1
- package/dist/vue3/lib/general-row.cjs +47 -10
- package/dist/vue3/lib/general-row.cjs.map +1 -1
- package/dist/vue3/lib/general-row.js +47 -10
- package/dist/vue3/lib/general-row.js.map +1 -1
- package/dist/vue3/lib/group-row.cjs +1 -2
- package/dist/vue3/lib/group-row.cjs.map +1 -1
- package/dist/vue3/lib/group-row.js +1 -2
- package/dist/vue3/lib/group-row.js.map +1 -1
- package/dist/vue3/lib/hovercard.cjs +1 -1
- package/dist/vue3/lib/hovercard.js +1 -1
- package/dist/vue3/lib/ivr-node.cjs +2 -2
- package/dist/vue3/lib/ivr-node.js +2 -2
- package/dist/vue3/lib/message-input.cjs +2 -2
- package/dist/vue3/lib/message-input.js +2 -2
- package/dist/vue3/lib/popover.cjs +2 -2
- package/dist/vue3/lib/popover.cjs.map +1 -1
- package/dist/vue3/lib/popover.js +3 -3
- package/dist/vue3/lib/popover.js.map +1 -1
- package/dist/vue3/lib/tooltip-directive.cjs +1 -2
- package/dist/vue3/lib/tooltip-directive.cjs.map +1 -1
- package/dist/vue3/lib/tooltip-directive.js +1 -2
- package/dist/vue3/lib/tooltip-directive.js.map +1 -1
- package/dist/vue3/lib/tooltip.cjs +40 -52
- package/dist/vue3/lib/tooltip.cjs.map +1 -1
- package/dist/vue3/lib/tooltip.js +42 -54
- package/dist/vue3/lib/tooltip.js.map +1 -1
- package/dist/vue3/style.css +87 -55
- package/dist/vue3/types/components/popover/tippy_utils.d.ts +1 -6
- package/dist/vue3/types/components/popover/tippy_utils.d.ts.map +1 -1
- package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts +22 -47
- package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts +19 -0
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/vue2/chunks/popover_constants-JwBF9h1Z.js.map +0 -1
- package/dist/vue2/chunks/popover_constants-Qkpb0yh2.js.map +0 -1
- package/dist/vue2/types/components/tooltip/modifiers.d.ts +0 -8
- package/dist/vue2/types/components/tooltip/modifiers.d.ts.map +0 -1
- package/dist/vue3/chunks/popover_constants-JwBF9h1Z.js.map +0 -1
- package/dist/vue3/chunks/popover_constants-Qkpb0yh2.js.map +0 -1
- package/dist/vue3/types/components/tooltip/modifiers.d.ts +0 -8
- package/dist/vue3/types/components/tooltip/modifiers.d.ts.map +0 -1
|
@@ -23,7 +23,7 @@ const lib_collapsible = require("./lib/collapsible.cjs");
|
|
|
23
23
|
const lib_combobox = require("./chunks/index-gj1jEXP4.js");
|
|
24
24
|
const lib_datepicker = require("./lib/datepicker.cjs");
|
|
25
25
|
const lib_descriptionList = require("./lib/description-list.cjs");
|
|
26
|
-
const dropdown = require("./chunks/dropdown-
|
|
26
|
+
const dropdown = require("./chunks/dropdown-2D4i6Qkg.js");
|
|
27
27
|
const lib_dropdown = require("./lib/dropdown.cjs");
|
|
28
28
|
const dropdown_constants = require("./chunks/dropdown_constants-2pGCXy7m.js");
|
|
29
29
|
const lib_emoji = require("./lib/emoji.cjs");
|
|
@@ -49,7 +49,7 @@ const notice_action = require("./chunks/notice_action-P6uDyE9x.js");
|
|
|
49
49
|
const notice_constants = require("./chunks/notice_constants-UXo9e3bS.js");
|
|
50
50
|
const lib_pagination = require("./lib/pagination.cjs");
|
|
51
51
|
const lib_popover = require("./lib/popover.cjs");
|
|
52
|
-
const popover_constants = require("./chunks/popover_constants-
|
|
52
|
+
const popover_constants = require("./chunks/popover_constants-qUYTzsS3.js");
|
|
53
53
|
const lib_presence = require("./lib/presence.cjs");
|
|
54
54
|
const lib_radio = require("./lib/radio.cjs");
|
|
55
55
|
const lib_radioGroup = require("./lib/radio-group.cjs");
|
|
@@ -21,7 +21,7 @@ import { DtCollapsible } from "./lib/collapsible.js";
|
|
|
21
21
|
import { DtCombobox, LABEL_SIZES } from "./chunks/index-eJ-WWRdf.js";
|
|
22
22
|
import { DtDatepicker, formatLong, formatMedium, formatNoYear, formatNumerical, formatShort } from "./lib/datepicker.js";
|
|
23
23
|
import { DT_DESCRIPTION_LIST_DIRECTION, DtDescriptionList } from "./lib/description-list.js";
|
|
24
|
-
import { DtDropdown } from "./chunks/dropdown-
|
|
24
|
+
import { DtDropdown } from "./chunks/dropdown-8L_PePwv.js";
|
|
25
25
|
import { DtDropdownSeparator } from "./lib/dropdown.js";
|
|
26
26
|
import { DROPDOWN_PADDING_CLASSES } from "./chunks/dropdown_constants-w1MXGC3Z.js";
|
|
27
27
|
import { DtEmoji } from "./lib/emoji.js";
|
|
@@ -47,7 +47,7 @@ import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_a
|
|
|
47
47
|
import { NOTICE_KINDS, NOTICE_ROLES } from "./chunks/notice_constants-7Qt2CQEY.js";
|
|
48
48
|
import { DtPagination } from "./lib/pagination.js";
|
|
49
49
|
import { DtPopover } from "./lib/popover.js";
|
|
50
|
-
import { POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS, POPOVER_DIRECTIONS, POPOVER_HEADER_FOOTER_PADDING_CLASSES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_PADDING_CLASSES, POPOVER_ROLES, POPOVER_STICKY_VALUES, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-
|
|
50
|
+
import { POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS, POPOVER_DIRECTIONS, POPOVER_HEADER_FOOTER_PADDING_CLASSES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_PADDING_CLASSES, POPOVER_ROLES, POPOVER_STICKY_VALUES, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-kQaX7G4a.js";
|
|
51
51
|
import { DtPresence, PRESENCE_STATES, PRESENCE_STATES_LIST } from "./lib/presence.js";
|
|
52
52
|
import { DtRadio, RADIO_INPUT_VALIDATION_CLASSES } from "./lib/radio.js";
|
|
53
53
|
import { DtRadioGroup } from "./lib/radio-group.js";
|
|
@@ -9,12 +9,12 @@ const lib_icon = require("./icon.cjs");
|
|
|
9
9
|
require("../common/constants.cjs");
|
|
10
10
|
require("vue");
|
|
11
11
|
require("./tooltip.cjs");
|
|
12
|
-
require("../chunks/popover_constants-
|
|
12
|
+
require("../chunks/popover_constants-qUYTzsS3.js");
|
|
13
13
|
require("tippy.js");
|
|
14
|
-
require("./lazy-show.cjs");
|
|
15
14
|
require("@linusborg/vue-simple-portal");
|
|
16
15
|
require("../chunks/modal-VgxXAQFP.js");
|
|
17
16
|
require("../chunks/sr_only_close_button-ZaGdAHz7.js");
|
|
17
|
+
require("./lazy-show.cjs");
|
|
18
18
|
require("../chunks/link_constants-Huj7D_hm.js");
|
|
19
19
|
require("@dialpad/dialtone-icons/vue2");
|
|
20
20
|
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
@@ -7,12 +7,12 @@ import { DtIcon } from "./icon.js";
|
|
|
7
7
|
import "../common/constants.js";
|
|
8
8
|
import "vue";
|
|
9
9
|
import "./tooltip.js";
|
|
10
|
-
import "../chunks/popover_constants-
|
|
10
|
+
import "../chunks/popover_constants-kQaX7G4a.js";
|
|
11
11
|
import "tippy.js";
|
|
12
|
-
import "./lazy-show.js";
|
|
13
12
|
import "@linusborg/vue-simple-portal";
|
|
14
13
|
import "../chunks/modal-XOr4kiNZ.js";
|
|
15
14
|
import "../chunks/sr_only_close_button-81bHIpPu.js";
|
|
15
|
+
import "./lazy-show.js";
|
|
16
16
|
import "../chunks/link_constants-nWVlXQBs.js";
|
|
17
17
|
import "@dialpad/dialtone-icons/vue2";
|
|
18
18
|
import "../chunks/icon_constants-Dy4MEUJL.js";
|
|
@@ -7,9 +7,8 @@ const lib_tooltip = require("./tooltip.cjs");
|
|
|
7
7
|
require("../common/constants.cjs");
|
|
8
8
|
require("vue");
|
|
9
9
|
require("../chunks/link_constants-Huj7D_hm.js");
|
|
10
|
-
require("../chunks/popover_constants-
|
|
10
|
+
require("../chunks/popover_constants-qUYTzsS3.js");
|
|
11
11
|
require("tippy.js");
|
|
12
|
-
require("./lazy-show.cjs");
|
|
13
12
|
const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
|
|
14
13
|
const _sfc_main = {
|
|
15
14
|
name: "DtRecipeCallbarButton",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbar-button.cjs","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n <dt-tooltip\n :id=\"id\"\n :offset=\"[0, 8]\"\n >\n <template #anchor>\n <span\n :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n >\n <dt-button\n :importance=\"buttonImportance\"\n kind=\"muted\"\n icon-position=\"top\"\n :aria-disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :label-class=\"callbarButtonTextClass\"\n :width=\"buttonWidth\"\n :class=\"callbarButtonClass\"\n v-bind=\"$attrs\"\n v-on=\"callbarButtonListeners\"\n >\n <slot />\n <template #icon>\n <slot name=\"icon\" />\n </template>\n </dt-button>\n </span>\n </template>\n <slot name=\"tooltip\" />\n </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButton',\n\n components: { DtButton, DtTooltip },\n\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 * 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 * 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 * Whether the button is a circle or not.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n circle: {\n type: Boolean,\n default: false,\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 * 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 * 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: '',\n },\n\n },\n\n emits: [\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n callbarButtonClass () {\n return [\n this.buttonClass,\n 'dt-recipe-callbar-button',\n 'd-px0',\n {\n 'dt-recipe-callbar-button--circle': this.circle,\n 'dt-recipe-callbar-button--active': this.active,\n 'dt-recipe-callbar-button--danger': this.danger,\n 'd-btn--disabled d-bgc-transparent': this.disabled,\n 'd-fc-primary': !this.disabled,\n }];\n },\n\n callbarButtonTextClass () {\n return [\n 'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n this.textClass,\n ];\n },\n\n buttonWidth () {\n switch (this.buttonWidthSize) {\n case 'sm':\n return '4.5rem';\n case 'md':\n return '6rem';\n default:\n return '8.4rem';\n }\n },\n\n buttonImportance () {\n if (this.importance) {\n return this.importance;\n }\n return this.circle ? 'outlined' : 'clear';\n },\n\n callbarButtonListeners () {\n return {\n ...this.$listeners,\n click: (event) => this.$emit('click', event),\n };\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n background-color: unset;\n opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n .base-button__icon {\n color: var(--primary-color);\n }\n}\n\n.dt-recipe-callbar-button--disabled {\n cursor: not-allowed;\n}\n</style>\n"],"names":["DtButton","DtTooltip","utils","this"],"mappings":"
|
|
1
|
+
{"version":3,"file":"callbar-button.cjs","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n <dt-tooltip\n :id=\"id\"\n :offset=\"[0, 8]\"\n >\n <template #anchor>\n <span\n :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n >\n <dt-button\n :importance=\"buttonImportance\"\n kind=\"muted\"\n icon-position=\"top\"\n :aria-disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :label-class=\"callbarButtonTextClass\"\n :width=\"buttonWidth\"\n :class=\"callbarButtonClass\"\n v-bind=\"$attrs\"\n v-on=\"callbarButtonListeners\"\n >\n <slot />\n <template #icon>\n <slot name=\"icon\" />\n </template>\n </dt-button>\n </span>\n </template>\n <slot name=\"tooltip\" />\n </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButton',\n\n components: { DtButton, DtTooltip },\n\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 * 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 * 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 * Whether the button is a circle or not.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n circle: {\n type: Boolean,\n default: false,\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 * 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 * 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: '',\n },\n\n },\n\n emits: [\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n callbarButtonClass () {\n return [\n this.buttonClass,\n 'dt-recipe-callbar-button',\n 'd-px0',\n {\n 'dt-recipe-callbar-button--circle': this.circle,\n 'dt-recipe-callbar-button--active': this.active,\n 'dt-recipe-callbar-button--danger': this.danger,\n 'd-btn--disabled d-bgc-transparent': this.disabled,\n 'd-fc-primary': !this.disabled,\n }];\n },\n\n callbarButtonTextClass () {\n return [\n 'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n this.textClass,\n ];\n },\n\n buttonWidth () {\n switch (this.buttonWidthSize) {\n case 'sm':\n return '4.5rem';\n case 'md':\n return '6rem';\n default:\n return '8.4rem';\n }\n },\n\n buttonImportance () {\n if (this.importance) {\n return this.importance;\n }\n return this.circle ? 'outlined' : 'clear';\n },\n\n callbarButtonListeners () {\n return {\n ...this.$listeners,\n click: (event) => this.$emit('click', event),\n };\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n background-color: unset;\n opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n .base-button__icon {\n color: var(--primary-color);\n }\n}\n\n.dt-recipe-callbar-button--disabled {\n cursor: not-allowed;\n}\n</style>\n"],"names":["DtButton","DtTooltip","utils","this"],"mappings":";;;;;;;;;;;AAAY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;ACsCtE,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,UAAAA,WAAA,UAAA,WAAAC,sBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAC,aAAAA,QAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AACA,eAAA,SAAAC,SAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA,gCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,qCAAA,KAAA;AAAA,UACA,gBAAA,CAAA,KAAA;AAAA,QACA;AAAA,MAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,cAAA,KAAA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,UAAA,KAAA,YAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAA,UAAA,KAAA,MAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,9 +5,8 @@ import { DtTooltip } from "./tooltip.js";
|
|
|
5
5
|
import "../common/constants.js";
|
|
6
6
|
import "vue";
|
|
7
7
|
import "../chunks/link_constants-nWVlXQBs.js";
|
|
8
|
-
import "../chunks/popover_constants-
|
|
8
|
+
import "../chunks/popover_constants-kQaX7G4a.js";
|
|
9
9
|
import "tippy.js";
|
|
10
|
-
import "./lazy-show.js";
|
|
11
10
|
const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
|
|
12
11
|
const _sfc_main = {
|
|
13
12
|
name: "DtRecipeCallbarButton",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbar-button.js","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n <dt-tooltip\n :id=\"id\"\n :offset=\"[0, 8]\"\n >\n <template #anchor>\n <span\n :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n >\n <dt-button\n :importance=\"buttonImportance\"\n kind=\"muted\"\n icon-position=\"top\"\n :aria-disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :label-class=\"callbarButtonTextClass\"\n :width=\"buttonWidth\"\n :class=\"callbarButtonClass\"\n v-bind=\"$attrs\"\n v-on=\"callbarButtonListeners\"\n >\n <slot />\n <template #icon>\n <slot name=\"icon\" />\n </template>\n </dt-button>\n </span>\n </template>\n <slot name=\"tooltip\" />\n </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButton',\n\n components: { DtButton, DtTooltip },\n\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 * 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 * 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 * Whether the button is a circle or not.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n circle: {\n type: Boolean,\n default: false,\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 * 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 * 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: '',\n },\n\n },\n\n emits: [\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n callbarButtonClass () {\n return [\n this.buttonClass,\n 'dt-recipe-callbar-button',\n 'd-px0',\n {\n 'dt-recipe-callbar-button--circle': this.circle,\n 'dt-recipe-callbar-button--active': this.active,\n 'dt-recipe-callbar-button--danger': this.danger,\n 'd-btn--disabled d-bgc-transparent': this.disabled,\n 'd-fc-primary': !this.disabled,\n }];\n },\n\n callbarButtonTextClass () {\n return [\n 'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n this.textClass,\n ];\n },\n\n buttonWidth () {\n switch (this.buttonWidthSize) {\n case 'sm':\n return '4.5rem';\n case 'md':\n return '6rem';\n default:\n return '8.4rem';\n }\n },\n\n buttonImportance () {\n if (this.importance) {\n return this.importance;\n }\n return this.circle ? 'outlined' : 'clear';\n },\n\n callbarButtonListeners () {\n return {\n ...this.$listeners,\n click: (event) => this.$emit('click', event),\n };\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n background-color: unset;\n opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n .base-button__icon {\n color: var(--primary-color);\n }\n}\n\n.dt-recipe-callbar-button--disabled {\n cursor: not-allowed;\n}\n</style>\n"],"names":["this"],"mappings":"
|
|
1
|
+
{"version":3,"file":"callbar-button.js","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n <dt-tooltip\n :id=\"id\"\n :offset=\"[0, 8]\"\n >\n <template #anchor>\n <span\n :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n >\n <dt-button\n :importance=\"buttonImportance\"\n kind=\"muted\"\n icon-position=\"top\"\n :aria-disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :label-class=\"callbarButtonTextClass\"\n :width=\"buttonWidth\"\n :class=\"callbarButtonClass\"\n v-bind=\"$attrs\"\n v-on=\"callbarButtonListeners\"\n >\n <slot />\n <template #icon>\n <slot name=\"icon\" />\n </template>\n </dt-button>\n </span>\n </template>\n <slot name=\"tooltip\" />\n </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButton',\n\n components: { DtButton, DtTooltip },\n\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 * 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 * 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 * Whether the button is a circle or not.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n circle: {\n type: Boolean,\n default: false,\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 * 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 * 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: '',\n },\n\n },\n\n emits: [\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n callbarButtonClass () {\n return [\n this.buttonClass,\n 'dt-recipe-callbar-button',\n 'd-px0',\n {\n 'dt-recipe-callbar-button--circle': this.circle,\n 'dt-recipe-callbar-button--active': this.active,\n 'dt-recipe-callbar-button--danger': this.danger,\n 'd-btn--disabled d-bgc-transparent': this.disabled,\n 'd-fc-primary': !this.disabled,\n }];\n },\n\n callbarButtonTextClass () {\n return [\n 'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n this.textClass,\n ];\n },\n\n buttonWidth () {\n switch (this.buttonWidthSize) {\n case 'sm':\n return '4.5rem';\n case 'md':\n return '6rem';\n default:\n return '8.4rem';\n }\n },\n\n buttonImportance () {\n if (this.importance) {\n return this.importance;\n }\n return this.circle ? 'outlined' : 'clear';\n },\n\n callbarButtonListeners () {\n return {\n ...this.$listeners,\n click: (event) => this.$emit('click', event),\n };\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n background-color: unset;\n opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n .base-button__icon {\n color: var(--primary-color);\n }\n}\n\n.dt-recipe-callbar-button--disabled {\n cursor: not-allowed;\n}\n</style>\n"],"names":["this"],"mappings":";;;;;;;;;AAAY,MAAC,kCAAkC,CAAC,MAAM,MAAM,MAAM,IAAI;ACsCtE,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,UAAA,UAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAA,MAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AACA,eAAA,SAAAA,SAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA,gCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,oCAAA,KAAA;AAAA,UACA,qCAAA,KAAA;AAAA,UACA,gBAAA,CAAA,KAAA;AAAA,QACA;AAAA,MAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,cAAA,KAAA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,UAAA,KAAA,YAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA,SAAA,aAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAA,UAAA,KAAA,MAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,7 +5,7 @@ const lib_input = require("./input.cjs");
|
|
|
5
5
|
const lib_chip = require("./chip.cjs");
|
|
6
6
|
const lib_validationMessages = require("./validation-messages.cjs");
|
|
7
7
|
const common_validators = require("../common/validators.cjs");
|
|
8
|
-
const popover_constants = require("../chunks/popover_constants-
|
|
8
|
+
const popover_constants = require("../chunks/popover_constants-qUYTzsS3.js");
|
|
9
9
|
const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
|
|
10
10
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
11
11
|
require("../chunks/index-gj1jEXP4.js");
|
|
@@ -3,7 +3,7 @@ import { DtInput } from "./input.js";
|
|
|
3
3
|
import { DtChip } from "./chip.js";
|
|
4
4
|
import { DtValidationMessages } from "./validation-messages.js";
|
|
5
5
|
import { validationMessageValidator } from "../common/validators.js";
|
|
6
|
-
import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-
|
|
6
|
+
import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-kQaX7G4a.js";
|
|
7
7
|
import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
|
|
8
8
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
9
9
|
import "../chunks/index-eJ-WWRdf.js";
|
|
@@ -6,7 +6,7 @@ const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js
|
|
|
6
6
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
7
7
|
const lib_popover = require("./popover.cjs");
|
|
8
8
|
const dropdown_constants = require("../chunks/dropdown_constants-2pGCXy7m.js");
|
|
9
|
-
const popover_constants = require("../chunks/popover_constants-
|
|
9
|
+
const popover_constants = require("../chunks/popover_constants-qUYTzsS3.js");
|
|
10
10
|
require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
|
|
11
11
|
require("./list-item.cjs");
|
|
12
12
|
require("../chunks/list_item_constants-EiqkqZvP.js");
|
|
@@ -4,7 +4,7 @@ import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.
|
|
|
4
4
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
5
5
|
import { DtPopover } from "./popover.js";
|
|
6
6
|
import { DROPDOWN_PADDING_CLASSES } from "../chunks/dropdown_constants-w1MXGC3Z.js";
|
|
7
|
-
import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-
|
|
7
|
+
import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-kQaX7G4a.js";
|
|
8
8
|
import "../chunks/keyboard_list_navigation-ScXhrxya.js";
|
|
9
9
|
import "./list-item.js";
|
|
10
10
|
import "../chunks/list_item_constants-u1xcN9Dd.js";
|
|
@@ -21,9 +21,8 @@ require("./badge.cjs");
|
|
|
21
21
|
require("./button.cjs");
|
|
22
22
|
require("../chunks/link_constants-Huj7D_hm.js");
|
|
23
23
|
require("./tooltip.cjs");
|
|
24
|
-
require("../chunks/popover_constants-
|
|
24
|
+
require("../chunks/popover_constants-qUYTzsS3.js");
|
|
25
25
|
require("tippy.js");
|
|
26
|
-
require("./lazy-show.cjs");
|
|
27
26
|
const _sfc_main = {
|
|
28
27
|
name: "DtRecipeContactRow",
|
|
29
28
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-row.cjs","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"iconName\"\n icon-size=\"200\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n />\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n */\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Text describing the user's presence, such as \"in a meeting\"\n */\n presenceText: {\n type: String,\n default: '',\n },\n\n /**\n * Name of the contact\n */\n name: {\n type: String,\n required: true,\n },\n\n /**\n * Status as set by the user.\n */\n userStatus: {\n type: String,\n default: '',\n },\n\n /**\n * Gives a faded style to be used when muted\n */\n muted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: String,\n default: null,\n },\n\n /**\n * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n */\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Initials will never be shown. Instead it will show a \"User\" icon.\n */\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Shows an \"is typing\" animation over the avatar when true.\n */\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the contact row should display a call button when hovered.\n */\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Text shown when the call button is hovered.\n */\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /**\n * Text shown when the unread count is hovered.\n */\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /**\n * Native click event on the row itself\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Call button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","safeConcatStrings"],"mappings":"
|
|
1
|
+
{"version":3,"file":"contact-row.cjs","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"iconName\"\n icon-size=\"200\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n />\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n */\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Text describing the user's presence, such as \"in a meeting\"\n */\n presenceText: {\n type: String,\n default: '',\n },\n\n /**\n * Name of the contact\n */\n name: {\n type: String,\n required: true,\n },\n\n /**\n * Status as set by the user.\n */\n userStatus: {\n type: String,\n default: '',\n },\n\n /**\n * Gives a faded style to be used when muted\n */\n muted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: String,\n default: null,\n },\n\n /**\n * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n */\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Initials will never be shown. Instead it will show a \"User\" icon.\n */\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Shows an \"is typing\" animation over the avatar when true.\n */\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the contact row should display a call button when hovered.\n */\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Text shown when the call button is hovered.\n */\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /**\n * Text shown when the unread count is hovered.\n */\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /**\n * Native click event on the row itself\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Call button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","safeConcatStrings"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,WAAA;AAAA,IACA,oBAAAC,eAAA;AAAA,IACA,oBAAAC,qBAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,cAAA,KAAA,gBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAAC,aAAA,kBAAA,CAAA,KAAA,MAAA,KAAA,cAAA,KAAA,UAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,aAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -19,9 +19,8 @@ import "./badge.js";
|
|
|
19
19
|
import "./button.js";
|
|
20
20
|
import "../chunks/link_constants-nWVlXQBs.js";
|
|
21
21
|
import "./tooltip.js";
|
|
22
|
-
import "../chunks/popover_constants-
|
|
22
|
+
import "../chunks/popover_constants-kQaX7G4a.js";
|
|
23
23
|
import "tippy.js";
|
|
24
|
-
import "./lazy-show.js";
|
|
25
24
|
const _sfc_main = {
|
|
26
25
|
name: "DtRecipeContactRow",
|
|
27
26
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-row.js","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"iconName\"\n icon-size=\"200\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n />\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n */\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Text describing the user's presence, such as \"in a meeting\"\n */\n presenceText: {\n type: String,\n default: '',\n },\n\n /**\n * Name of the contact\n */\n name: {\n type: String,\n required: true,\n },\n\n /**\n * Status as set by the user.\n */\n userStatus: {\n type: String,\n default: '',\n },\n\n /**\n * Gives a faded style to be used when muted\n */\n muted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: String,\n default: null,\n },\n\n /**\n * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n */\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Initials will never be shown. Instead it will show a \"User\" icon.\n */\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Shows an \"is typing\" animation over the avatar when true.\n */\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the contact row should display a call button when hovered.\n */\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Text shown when the call button is hovered.\n */\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /**\n * Text shown when the unread count is hovered.\n */\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /**\n * Native click event on the row itself\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Call button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\n },\n },\n};\n</script>\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"contact-row.js","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"iconName\"\n icon-size=\"200\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n />\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n */\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Text describing the user's presence, such as \"in a meeting\"\n */\n presenceText: {\n type: String,\n default: '',\n },\n\n /**\n * Name of the contact\n */\n name: {\n type: String,\n required: true,\n },\n\n /**\n * Status as set by the user.\n */\n userStatus: {\n type: String,\n default: '',\n },\n\n /**\n * Gives a faded style to be used when muted\n */\n muted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: String,\n default: null,\n },\n\n /**\n * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n */\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Initials will never be shown. Instead it will show a \"User\" icon.\n */\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Shows an \"is typing\" animation over the avatar when true.\n */\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the contact row should display a call button when hovered.\n */\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Text shown when the call button is hovered.\n */\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /**\n * Text shown when the unread count is hovered.\n */\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /**\n * Native click event on the row itself\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Call button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,cAAA,KAAA,gBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA,kBAAA,CAAA,KAAA,MAAA,KAAA,cAAA,KAAA,UAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,aAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -7,12 +7,11 @@ const lib_button = require("./button.cjs");
|
|
|
7
7
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
8
8
|
const lib_icon = require("./icon.cjs");
|
|
9
9
|
require("../chunks/stack_constants-SMzMWnAQ.js");
|
|
10
|
-
require("../chunks/popover_constants-
|
|
10
|
+
require("../chunks/popover_constants-qUYTzsS3.js");
|
|
11
11
|
require("tippy.js");
|
|
12
12
|
require("../common/utils.cjs");
|
|
13
13
|
require("../common/constants.cjs");
|
|
14
14
|
require("vue");
|
|
15
|
-
require("./lazy-show.cjs");
|
|
16
15
|
require("../chunks/link_constants-Huj7D_hm.js");
|
|
17
16
|
require("@dialpad/dialtone-icons/vue2");
|
|
18
17
|
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n startOfWeek, addDays, getMonth, isEqual,\n addMonths, startOfMonth, getDay, getDate,\n subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n const dates = [];\n for (let i = 0; i < 7; i++) {\n const next = addDays(startDate, i);\n const isNext = getMonth(next) !== month;\n dates.push({\n text: next.getDate(),\n value: next,\n currentMonth: !isNext,\n isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n // will be selected if the date is the same as the selected day and is from the current month\n selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n });\n }\n return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n if (!date || !dateToCompare) {\n return false;\n }\n return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n const weeks = [];\n const firstDate = _parsedGetDate(new Date(year, month));\n const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n const weekStartsOn = WEEK_START;\n\n const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n const addDaysToWeek = (date) => {\n const days = getWeekDays(date, month, selectedDay);\n\n weeks.push({ days });\n\n if (\n !weeks[weeks.length - 1].days.some((day) =>\n isDateEqual(day.value, lastDate),\n )\n ) {\n const nextDate = addDays(date, 7);\n addDaysToWeek(nextDate);\n }\n };\n\n addDaysToWeek(firstDateInCalendar);\n\n return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n // Get list in order from sun ... sat\n const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n .slice(0, 2);\n });\n\n // Get days that are in order before specified week start\n const beforeWeekStart = days.slice(0, weekStart);\n // Get days that are in order after specified week start\n const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n // return them in correct order\n return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n const nextMonthDate = addMonths(date, 1);\n const nextMonthStart = startOfMonth(nextMonthDate);\n const nextMonthStartWeekday = getDay(nextMonthStart);\n\n const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n // Add the difference in days to the first day of the next month\n const focusDate = addDays(nextMonthStart, dayDifference);\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n\n // Move to the last day of the previous month\n const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n let focusDate = lastDayOfPrevMonth;\n\n // Adjust to the same weekday in the last week of the previous month\n while (getDay(focusDate) !== currentWeekday) {\n focusDate = addDays(focusDate, -1);\n }\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n","<template>\n <dt-stack\n direction=\"row\"\n class=\"d-datepicker__month-year\"\n gap=\"300\"\n >\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"prevYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevYearButton\"\n :ref=\"refNames[0]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n @click=\"changeYear(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"prevMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevMonthButton\"\n :ref=\"refNames[1]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n @click=\"changeMonth(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n <div\n id=\"calendar-heading\"\n class=\"d-datepicker__month-year-title\"\n >\n {{ formattedMonth(selectMonth) }}\n\n {{ selectYear }}\n </div>\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"nextMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextMonthButton\"\n :ref=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n @click=\"changeMonth(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"nextYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextYearButton\"\n :ref=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n @click=\"changeYear(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n props: {\n locale: {\n type: String,\n required: true,\n },\n\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n changeToLabel: {\n type: String,\n required: true,\n },\n\n selectedDate: {\n type: Date,\n required: true,\n },\n },\n\n emits: [\n /**\n * Will retrieve the calendar days of the given date\n *\n * @event calendar-days\n * @type {Array}\n */\n 'calendar-days',\n\n /**\n * Will focus first day in calendar\n *\n * @event focus-first-day\n */\n 'focus-first-day',\n\n /**\n * Will focus last day in calendar\n *\n * @event focus-last-day\n */\n 'focus-last-day',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear || month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\n","<template>\n <table\n class=\"d-datepicker__calendar\"\n aria-labelledby=\"calendar-heading\"\n >\n <thead>\n <tr>\n <th\n v-for=\"day in weekDays\"\n :key=\"day\"\n scope=\"col\"\n class=\"d-datepicker__cell d-datepicker__cell--header\"\n >\n <span\n class=\"d-datepicker__weekday\"\n :title=\"day\"\n :aria-label=\"day\"\n > {{ day }}</span>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"(week, indexWeek) in calendarDays\"\n :key=\"indexWeek\"\n >\n <td\n v-for=\"(day, indexDays) in week.days\"\n :key=\"indexWeek + indexDays\"\n class=\"d-datepicker__cell\"\n role=\"listbox\"\n >\n <dt-button\n :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n class=\"d-datepicker__day\"\n :circle=\"true\"\n size=\"sm\"\n importance=\"clear\"\n :disabled=\"!day.currentMonth\"\n :class=\"{\n 'd-datepicker__day--disabled': !day.currentMonth,\n 'd-datepicker__day--selected': selectedDay\n ? ((day.text === selectedDay) && day.currentMonth)\n : day.selected,\n }\"\n type=\"button\"\n :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n :aria-label=\"dayAriaLabel(day)\"\n role=\"option\"\n @click=\"selectDay(day)\"\n @keydown=\"handleKeyDown($event)\"\n >\n {{ day.text }}\n </dt-button>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\n calendarDays: {\n type: Array,\n required: true,\n },\n\n locale: {\n type: String,\n required: true,\n },\n\n selectDayLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event select-date\n * @type {Date}\n */\n 'select-date',\n\n /**\n * Will focus the month and year picker\n *\n * @event focus-month-year-picker\n */\n 'focus-month-year-picker',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\n};\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-stack\n class=\"d-datepicker\"\n gap=\"400\"\n >\n <div class=\"d-datepicker__hd\">\n <month-year-picker\n ref=\"monthYearPicker\"\n :locale=\"locale\"\n :prev-month-label=\"prevMonthLabel\"\n :next-month-label=\"nextMonthLabel\"\n :prev-year-label=\"prevYearLabel\"\n :next-year-label=\"nextYearLabel\"\n :change-to-label=\"changeToLabel\"\n :selected-date=\"selectedDate\"\n @calendar-days=\"updateCalendarDays\"\n @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n @focus-last-day=\"$refs.calendar.focusLastDay()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n />\n </div>\n <div class=\"d-datepicker__bd\">\n <calendar\n ref=\"calendar\"\n :locale=\"locale\"\n :calendar-days=\"calendarDays\"\n :select-day-label=\"selectDayLabel\"\n @select-date=\"$emit('selected-date', $event)\"\n @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n />\n </div>\n </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\n /**\n * Label for the previous month button\n *\n * @type {String}\n * @example 'Previous month'\n */\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next month button\n *\n * @type {String}\n * @example 'Next month'\n */\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the previous year button\n *\n * @type {String}\n * @example 'Previous year'\n */\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next year button\n *\n * @type {String}\n * @example 'Next year'\n */\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the select day button\n *\n * @type {String}\n * @example 'Select day'\n */\n selectDayLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the change to button\n *\n * @type {String}\n * @example 'Change to'\n */\n changeToLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Locale for the calendar\n *\n * @type {String}\n */\n locale: {\n type: String,\n default: 'en-US',\n },\n\n /**\n * Selected date\n *\n * @type {Date}\n */\n selectedDate: {\n type: Date,\n default: () => (new Date()),\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event selected-date\n * @type {Date}\n */\n 'selected-date',\n\n /**\n * Event fired when user presses the esc key\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n calendarDays: [],\n };\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n const monthFormat = abbreviated ? 'short' : 'long';\n return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n formatLong,\n formatMedium,\n formatShort,\n formatNoYear,\n formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n startOfWeek, addDays, getMonth, isEqual,\n addMonths, startOfMonth, getDay, getDate,\n subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n const dates = [];\n for (let i = 0; i < 7; i++) {\n const next = addDays(startDate, i);\n const isNext = getMonth(next) !== month;\n dates.push({\n text: next.getDate(),\n value: next,\n currentMonth: !isNext,\n isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n // will be selected if the date is the same as the selected day and is from the current month\n selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n });\n }\n return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n if (!date || !dateToCompare) {\n return false;\n }\n return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n const weeks = [];\n const firstDate = _parsedGetDate(new Date(year, month));\n const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n const weekStartsOn = WEEK_START;\n\n const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n const addDaysToWeek = (date) => {\n const days = getWeekDays(date, month, selectedDay);\n\n weeks.push({ days });\n\n if (\n !weeks[weeks.length - 1].days.some((day) =>\n isDateEqual(day.value, lastDate),\n )\n ) {\n const nextDate = addDays(date, 7);\n addDaysToWeek(nextDate);\n }\n };\n\n addDaysToWeek(firstDateInCalendar);\n\n return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n // Get list in order from sun ... sat\n const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n .slice(0, 2);\n });\n\n // Get days that are in order before specified week start\n const beforeWeekStart = days.slice(0, weekStart);\n // Get days that are in order after specified week start\n const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n // return them in correct order\n return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n const nextMonthDate = addMonths(date, 1);\n const nextMonthStart = startOfMonth(nextMonthDate);\n const nextMonthStartWeekday = getDay(nextMonthStart);\n\n const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n // Add the difference in days to the first day of the next month\n const focusDate = addDays(nextMonthStart, dayDifference);\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n\n // Move to the last day of the previous month\n const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n let focusDate = lastDayOfPrevMonth;\n\n // Adjust to the same weekday in the last week of the previous month\n while (getDay(focusDate) !== currentWeekday) {\n focusDate = addDays(focusDate, -1);\n }\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n","<template>\n <dt-stack\n direction=\"row\"\n class=\"d-datepicker__month-year\"\n gap=\"300\"\n >\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"prevYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevYearButton\"\n :ref=\"refNames[0]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n @click=\"changeYear(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"prevMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevMonthButton\"\n :ref=\"refNames[1]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n @click=\"changeMonth(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n <div\n id=\"calendar-heading\"\n class=\"d-datepicker__month-year-title\"\n >\n {{ formattedMonth(selectMonth) }}\n\n {{ selectYear }}\n </div>\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"nextMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextMonthButton\"\n :ref=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n @click=\"changeMonth(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"nextYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextYearButton\"\n :ref=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n @click=\"changeYear(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n props: {\n locale: {\n type: String,\n required: true,\n },\n\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n changeToLabel: {\n type: String,\n required: true,\n },\n\n selectedDate: {\n type: Date,\n required: true,\n },\n },\n\n emits: [\n /**\n * Will retrieve the calendar days of the given date\n *\n * @event calendar-days\n * @type {Array}\n */\n 'calendar-days',\n\n /**\n * Will focus first day in calendar\n *\n * @event focus-first-day\n */\n 'focus-first-day',\n\n /**\n * Will focus last day in calendar\n *\n * @event focus-last-day\n */\n 'focus-last-day',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear || month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\n","<template>\n <table\n class=\"d-datepicker__calendar\"\n aria-labelledby=\"calendar-heading\"\n >\n <thead>\n <tr>\n <th\n v-for=\"day in weekDays\"\n :key=\"day\"\n scope=\"col\"\n class=\"d-datepicker__cell d-datepicker__cell--header\"\n >\n <span\n class=\"d-datepicker__weekday\"\n :title=\"day\"\n :aria-label=\"day\"\n > {{ day }}</span>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"(week, indexWeek) in calendarDays\"\n :key=\"indexWeek\"\n >\n <td\n v-for=\"(day, indexDays) in week.days\"\n :key=\"indexWeek + indexDays\"\n class=\"d-datepicker__cell\"\n role=\"listbox\"\n >\n <dt-button\n :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n class=\"d-datepicker__day\"\n :circle=\"true\"\n size=\"sm\"\n importance=\"clear\"\n :disabled=\"!day.currentMonth\"\n :class=\"{\n 'd-datepicker__day--disabled': !day.currentMonth,\n 'd-datepicker__day--selected': selectedDay\n ? ((day.text === selectedDay) && day.currentMonth)\n : day.selected,\n }\"\n type=\"button\"\n :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n :aria-label=\"dayAriaLabel(day)\"\n role=\"option\"\n @click=\"selectDay(day)\"\n @keydown=\"handleKeyDown($event)\"\n >\n {{ day.text }}\n </dt-button>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\n calendarDays: {\n type: Array,\n required: true,\n },\n\n locale: {\n type: String,\n required: true,\n },\n\n selectDayLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event select-date\n * @type {Date}\n */\n 'select-date',\n\n /**\n * Will focus the month and year picker\n *\n * @event focus-month-year-picker\n */\n 'focus-month-year-picker',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\n};\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-stack\n class=\"d-datepicker\"\n gap=\"400\"\n >\n <div class=\"d-datepicker__hd\">\n <month-year-picker\n ref=\"monthYearPicker\"\n :locale=\"locale\"\n :prev-month-label=\"prevMonthLabel\"\n :next-month-label=\"nextMonthLabel\"\n :prev-year-label=\"prevYearLabel\"\n :next-year-label=\"nextYearLabel\"\n :change-to-label=\"changeToLabel\"\n :selected-date=\"selectedDate\"\n @calendar-days=\"updateCalendarDays\"\n @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n @focus-last-day=\"$refs.calendar.focusLastDay()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n />\n </div>\n <div class=\"d-datepicker__bd\">\n <calendar\n ref=\"calendar\"\n :locale=\"locale\"\n :calendar-days=\"calendarDays\"\n :select-day-label=\"selectDayLabel\"\n @select-date=\"$emit('selected-date', $event)\"\n @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n />\n </div>\n </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\n /**\n * Label for the previous month button\n *\n * @type {String}\n * @example 'Previous month'\n */\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next month button\n *\n * @type {String}\n * @example 'Next month'\n */\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the previous year button\n *\n * @type {String}\n * @example 'Previous year'\n */\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next year button\n *\n * @type {String}\n * @example 'Next year'\n */\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the select day button\n *\n * @type {String}\n * @example 'Select day'\n */\n selectDayLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the change to button\n *\n * @type {String}\n * @example 'Change to'\n */\n changeToLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Locale for the calendar\n *\n * @type {String}\n */\n locale: {\n type: String,\n default: 'en-US',\n },\n\n /**\n * Selected date\n *\n * @type {Date}\n */\n selectedDate: {\n type: Date,\n default: () => (new Date()),\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event selected-date\n * @type {Date}\n */\n 'selected-date',\n\n /**\n * Event fired when user presses the esc key\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n calendarDays: [],\n };\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n const monthFormat = abbreviated ? 'short' : 'long';\n return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n formatLong,\n formatMedium,\n formatShort,\n formatNoYear,\n formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}
|
|
@@ -5,12 +5,11 @@ import { DtButton } from "./button.js";
|
|
|
5
5
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
6
6
|
import { DtIcon } from "./icon.js";
|
|
7
7
|
import "../chunks/stack_constants-HraCekPm.js";
|
|
8
|
-
import "../chunks/popover_constants-
|
|
8
|
+
import "../chunks/popover_constants-kQaX7G4a.js";
|
|
9
9
|
import "tippy.js";
|
|
10
10
|
import "../common/utils.js";
|
|
11
11
|
import "../common/constants.js";
|
|
12
12
|
import "vue";
|
|
13
|
-
import "./lazy-show.js";
|
|
14
13
|
import "../chunks/link_constants-nWVlXQBs.js";
|
|
15
14
|
import "@dialpad/dialtone-icons/vue2";
|
|
16
15
|
import "../chunks/icon_constants-Dy4MEUJL.js";
|