@dialpad/dialtone 9.70.0 → 9.71.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone-default-theme.css +4 -4
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/tokens/tokens-dp-dark.css +3 -3
- package/dist/css/tokens/tokens-dp-light.css +4 -4
- package/dist/css/tokens/tokens-expressive-dark.css +3 -3
- package/dist/css/tokens/tokens-expressive-light.css +4 -4
- package/dist/css/tokens/tokens-expressive-sm-dark.css +3 -3
- package/dist/css/tokens/tokens-expressive-sm-light.css +4 -4
- package/dist/css/tokens/tokens-tmo-dark.css +3 -3
- package/dist/css/tokens/tokens-tmo-light.css +4 -4
- package/dist/tokens/css/tokens-dp-dark.css +3 -3
- package/dist/tokens/css/tokens-dp-light.css +4 -4
- package/dist/tokens/css/tokens-expressive-dark.css +3 -3
- package/dist/tokens/css/tokens-expressive-light.css +4 -4
- package/dist/tokens/css/tokens-expressive-sm-dark.css +3 -3
- package/dist/tokens/css/tokens-expressive-sm-light.css +4 -4
- package/dist/tokens/css/tokens-tmo-dark.css +3 -3
- package/dist/tokens/css/tokens-tmo-light.css +4 -4
- package/dist/tokens/doc.json +11658 -11658
- package/dist/tokens/less/tokens-dp-dark.less +2 -2
- package/dist/tokens/less/tokens-dp-light.less +2 -2
- package/dist/tokens/less/tokens-expressive-dark.less +2 -2
- package/dist/tokens/less/tokens-expressive-light.less +2 -2
- package/dist/tokens/less/tokens-expressive-sm-dark.less +2 -2
- package/dist/tokens/less/tokens-expressive-sm-light.less +2 -2
- package/dist/tokens/less/tokens-tmo-dark.less +2 -2
- package/dist/tokens/less/tokens-tmo-light.less +2 -2
- package/dist/tokens/themes/dp-dark.cjs +1 -1
- package/dist/tokens/themes/dp-dark.js +1 -1
- package/dist/tokens/themes/dp-light.cjs +1 -1
- package/dist/tokens/themes/dp-light.js +1 -1
- package/dist/tokens/themes/expressive-dark.cjs +1 -1
- package/dist/tokens/themes/expressive-dark.js +1 -1
- package/dist/tokens/themes/expressive-light.cjs +1 -1
- package/dist/tokens/themes/expressive-light.js +1 -1
- package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
- package/dist/tokens/themes/expressive-sm-dark.js +1 -1
- package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
- package/dist/tokens/themes/expressive-sm-light.js +1 -1
- package/dist/tokens/themes/tmo-dark.cjs +1 -1
- package/dist/tokens/themes/tmo-dark.js +1 -1
- package/dist/tokens/themes/tmo-light.cjs +1 -1
- package/dist/tokens/themes/tmo-light.js +1 -1
- package/dist/tokens/tokens-dp-dark.json +1 -1
- package/dist/tokens/tokens-dp-light.json +2 -2
- package/dist/tokens/tokens-expressive-dark.json +1 -1
- package/dist/tokens/tokens-expressive-light.json +2 -2
- package/dist/tokens/tokens-expressive-sm-dark.json +1 -1
- package/dist/tokens/tokens-expressive-sm-light.json +2 -2
- package/dist/tokens/tokens-tmo-dark.json +1 -1
- package/dist/tokens/tokens-tmo-light.json +2 -2
- package/dist/vue3/chunks/{dropdown-oA-_Gotg.js → dropdown-h2VaPT4B.js} +2 -2
- package/dist/vue3/chunks/{dropdown-oA-_Gotg.js.map → dropdown-h2VaPT4B.js.map} +1 -1
- package/dist/vue3/chunks/{dropdown-p-Azgwov.js → dropdown-yF5Kg42u.js} +2 -2
- package/dist/vue3/chunks/{dropdown-p-Azgwov.js.map → dropdown-yF5Kg42u.js.map} +1 -1
- package/dist/vue3/chunks/{notice_action-p-ePanW_.js → notice_action-5nPX2mSu.js} +6 -8
- package/dist/vue3/chunks/notice_action-5nPX2mSu.js.map +1 -0
- package/dist/vue3/chunks/{notice_action-WTucGhvr.js → notice_action-i55KZMfG.js} +6 -8
- package/dist/vue3/chunks/notice_action-i55KZMfG.js.map +1 -0
- package/dist/vue3/chunks/{sr_only_close_button-xGrHFjwA.js → sr_only_close_button-Gl43uI6m.js} +5 -5
- package/dist/vue3/chunks/sr_only_close_button-Gl43uI6m.js.map +1 -0
- package/dist/vue3/chunks/{sr_only_close_button-3EdsV-dH.js → sr_only_close_button-q23hJuAf.js} +5 -5
- package/dist/vue3/chunks/sr_only_close_button-q23hJuAf.js.map +1 -0
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/dialtone-vue.cjs +4 -4
- package/dist/vue3/dialtone-vue.js +4 -4
- package/dist/vue3/lib/attachment-carousel.cjs +10 -20
- package/dist/vue3/lib/attachment-carousel.cjs.map +1 -1
- package/dist/vue3/lib/attachment-carousel.js +10 -20
- package/dist/vue3/lib/attachment-carousel.js.map +1 -1
- package/dist/vue3/lib/avatar.cjs +31 -45
- package/dist/vue3/lib/avatar.cjs.map +1 -1
- package/dist/vue3/lib/avatar.js +33 -47
- package/dist/vue3/lib/avatar.js.map +1 -1
- package/dist/vue3/lib/banner.cjs +5 -5
- package/dist/vue3/lib/banner.js +5 -5
- package/dist/vue3/lib/callbar-button-with-popover.cjs +5 -9
- package/dist/vue3/lib/callbar-button-with-popover.cjs.map +1 -1
- package/dist/vue3/lib/callbar-button-with-popover.js +5 -9
- package/dist/vue3/lib/callbar-button-with-popover.js.map +1 -1
- package/dist/vue3/lib/callbox.cjs +14 -6
- package/dist/vue3/lib/callbox.cjs.map +1 -1
- package/dist/vue3/lib/callbox.js +15 -7
- package/dist/vue3/lib/callbox.js.map +1 -1
- package/dist/vue3/lib/chip.cjs +4 -10
- package/dist/vue3/lib/chip.cjs.map +1 -1
- package/dist/vue3/lib/chip.js +4 -10
- package/dist/vue3/lib/chip.js.map +1 -1
- package/dist/vue3/lib/collapsible.cjs +12 -9
- package/dist/vue3/lib/collapsible.cjs.map +1 -1
- package/dist/vue3/lib/collapsible.js +12 -9
- package/dist/vue3/lib/collapsible.js.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.cjs +2 -5
- package/dist/vue3/lib/combobox-multi-select.cjs.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.js +2 -5
- package/dist/vue3/lib/combobox-multi-select.js.map +1 -1
- package/dist/vue3/lib/combobox-with-popover.cjs +2 -5
- package/dist/vue3/lib/combobox-with-popover.cjs.map +1 -1
- package/dist/vue3/lib/combobox-with-popover.js +2 -5
- package/dist/vue3/lib/combobox-with-popover.js.map +1 -1
- package/dist/vue3/lib/combobox.cjs +1 -4
- package/dist/vue3/lib/combobox.cjs.map +1 -1
- package/dist/vue3/lib/combobox.js +1 -4
- package/dist/vue3/lib/combobox.js.map +1 -1
- package/dist/vue3/lib/contact-info.cjs +28 -10
- package/dist/vue3/lib/contact-info.cjs.map +1 -1
- package/dist/vue3/lib/contact-info.js +29 -11
- package/dist/vue3/lib/contact-info.js.map +1 -1
- package/dist/vue3/lib/contact-row.cjs +14 -9
- package/dist/vue3/lib/contact-row.cjs.map +1 -1
- package/dist/vue3/lib/contact-row.js +15 -10
- package/dist/vue3/lib/contact-row.js.map +1 -1
- package/dist/vue3/lib/datepicker.cjs +5 -20
- package/dist/vue3/lib/datepicker.cjs.map +1 -1
- package/dist/vue3/lib/datepicker.js +5 -20
- package/dist/vue3/lib/datepicker.js.map +1 -1
- package/dist/vue3/lib/dropdown.cjs +2 -5
- package/dist/vue3/lib/dropdown.cjs.map +1 -1
- package/dist/vue3/lib/dropdown.js +2 -5
- package/dist/vue3/lib/dropdown.js.map +1 -1
- package/dist/vue3/lib/editor.cjs +2 -2
- package/dist/vue3/lib/editor.js +2 -2
- package/dist/vue3/lib/emoji-picker.cjs +5 -11
- package/dist/vue3/lib/emoji-picker.cjs.map +1 -1
- package/dist/vue3/lib/emoji-picker.js +5 -11
- package/dist/vue3/lib/emoji-picker.js.map +1 -1
- package/dist/vue3/lib/feed-item-row.cjs +16 -10
- package/dist/vue3/lib/feed-item-row.cjs.map +1 -1
- package/dist/vue3/lib/feed-item-row.js +17 -11
- package/dist/vue3/lib/feed-item-row.js.map +1 -1
- package/dist/vue3/lib/general-row.cjs +12 -18
- package/dist/vue3/lib/general-row.cjs.map +1 -1
- package/dist/vue3/lib/general-row.js +12 -18
- package/dist/vue3/lib/general-row.js.map +1 -1
- package/dist/vue3/lib/group-row.cjs +7 -10
- package/dist/vue3/lib/group-row.cjs.map +1 -1
- package/dist/vue3/lib/group-row.js +7 -10
- package/dist/vue3/lib/group-row.js.map +1 -1
- package/dist/vue3/lib/grouped-chip.cjs +1 -4
- package/dist/vue3/lib/grouped-chip.cjs.map +1 -1
- package/dist/vue3/lib/grouped-chip.js +1 -4
- package/dist/vue3/lib/grouped-chip.js.map +1 -1
- package/dist/vue3/lib/hovercard.cjs +2 -5
- package/dist/vue3/lib/hovercard.cjs.map +1 -1
- package/dist/vue3/lib/hovercard.js +2 -5
- package/dist/vue3/lib/hovercard.js.map +1 -1
- package/dist/vue3/lib/image-viewer.cjs +4 -8
- package/dist/vue3/lib/image-viewer.cjs.map +1 -1
- package/dist/vue3/lib/image-viewer.js +4 -8
- package/dist/vue3/lib/image-viewer.js.map +1 -1
- package/dist/vue3/lib/ivr-node.cjs +4 -4
- package/dist/vue3/lib/ivr-node.js +4 -4
- package/dist/vue3/lib/list-item.cjs +4 -8
- package/dist/vue3/lib/list-item.cjs.map +1 -1
- package/dist/vue3/lib/list-item.js +4 -8
- package/dist/vue3/lib/list-item.js.map +1 -1
- package/dist/vue3/lib/message-input.cjs +8 -10
- package/dist/vue3/lib/message-input.cjs.map +1 -1
- package/dist/vue3/lib/message-input.js +8 -10
- package/dist/vue3/lib/message-input.js.map +1 -1
- package/dist/vue3/lib/modal.cjs +5 -11
- package/dist/vue3/lib/modal.cjs.map +1 -1
- package/dist/vue3/lib/modal.js +5 -11
- package/dist/vue3/lib/modal.js.map +1 -1
- package/dist/vue3/lib/notice.cjs +2 -2
- package/dist/vue3/lib/notice.js +2 -2
- package/dist/vue3/lib/pagination.cjs +10 -18
- package/dist/vue3/lib/pagination.cjs.map +1 -1
- package/dist/vue3/lib/pagination.js +10 -18
- package/dist/vue3/lib/pagination.js.map +1 -1
- package/dist/vue3/lib/popover.cjs +5 -11
- package/dist/vue3/lib/popover.cjs.map +1 -1
- package/dist/vue3/lib/popover.js +5 -11
- package/dist/vue3/lib/popover.js.map +1 -1
- package/dist/vue3/lib/rich-text-editor.cjs +1 -2
- package/dist/vue3/lib/rich-text-editor.cjs.map +1 -1
- package/dist/vue3/lib/rich-text-editor.js +1 -2
- package/dist/vue3/lib/rich-text-editor.js.map +1 -1
- package/dist/vue3/lib/settings-menu-button.cjs +6 -15
- package/dist/vue3/lib/settings-menu-button.cjs.map +1 -1
- package/dist/vue3/lib/settings-menu-button.js +6 -15
- package/dist/vue3/lib/settings-menu-button.js.map +1 -1
- package/dist/vue3/lib/split-button.cjs +2 -5
- package/dist/vue3/lib/split-button.cjs.map +1 -1
- package/dist/vue3/lib/split-button.js +2 -5
- package/dist/vue3/lib/split-button.js.map +1 -1
- package/dist/vue3/lib/toast.cjs +5 -5
- package/dist/vue3/lib/toast.js +5 -5
- package/dist/vue3/style.css +111 -111
- package/dist/vue3/types/components/avatar/avatar.vue.d.ts +6 -34
- package/dist/vue3/types/components/avatar/avatar.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/chip/chip.vue.d.ts +1 -1
- package/dist/vue3/types/components/collapsible/collapsible.vue.d.ts +1 -1
- package/dist/vue3/types/components/collapsible/collapsible.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/image_viewer/image_viewer.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts +2 -8
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/notice/notice_action.vue.d.ts +5 -4
- package/dist/vue3/types/components/notice/notice_action.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/pagination/pagination.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/split_button/split_button-omega.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts +0 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/item_layout/contact_info/contact_info.vue.d.ts +3 -3
- package/dist/vue3/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts +0 -1
- package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/vue3/chunks/notice_action-WTucGhvr.js.map +0 -1
- package/dist/vue3/chunks/notice_action-p-ePanW_.js.map +0 -1
- package/dist/vue3/chunks/sr_only_close_button-3EdsV-dH.js.map +0 -1
- package/dist/vue3/chunks/sr_only_close_button-xGrHFjwA.js.map +0 -1
- package/dist/vue3/types/common/storybook_utils.d.ts +0 -25
- package/dist/vue3/types/common/storybook_utils.d.ts.map +0 -1
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
"dtActionColorBorderBaseOutlinedDefault": "#AB7EFF",
|
|
347
347
|
"dtActionColorBorderCriticalOutlinedDefault": "#FF8585",
|
|
348
348
|
"dtActionColorBorderInvertedOutlinedDefault": "#000000",
|
|
349
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
349
|
+
"dtActionColorBorderMutedOutlinedDefault": "#ffffff",
|
|
350
350
|
"dtThemeColorBase": "#E6E6E6",
|
|
351
351
|
"dtThemeTopbarColorForeground": "#E6E6E6",
|
|
352
352
|
"dtThemeTopbarColorBackground": "#262626",
|
|
@@ -345,8 +345,8 @@
|
|
|
345
345
|
"dtActionColorBackgroundPositivePrimaryActive": "#1AA340",
|
|
346
346
|
"dtActionColorBorderBaseOutlinedDefault": "#7C52FF",
|
|
347
347
|
"dtActionColorBorderCriticalOutlinedDefault": "#EC0E0E",
|
|
348
|
-
"dtActionColorBorderInvertedOutlinedDefault": "#
|
|
349
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
348
|
+
"dtActionColorBorderInvertedOutlinedDefault": "#ffffff",
|
|
349
|
+
"dtActionColorBorderMutedOutlinedDefault": "#000000",
|
|
350
350
|
"dtThemeColorBase": "#000000",
|
|
351
351
|
"dtThemeTopbarColorForeground": "#000000",
|
|
352
352
|
"dtThemeTopbarColorBackground": "#F9F9F9",
|
|
@@ -352,7 +352,7 @@
|
|
|
352
352
|
"dtActionColorBorderBaseOutlinedDefault": "#AB7EFF",
|
|
353
353
|
"dtActionColorBorderCriticalOutlinedDefault": "#FF8585",
|
|
354
354
|
"dtActionColorBorderInvertedOutlinedDefault": "#000000",
|
|
355
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
355
|
+
"dtActionColorBorderMutedOutlinedDefault": "#ffffff",
|
|
356
356
|
"dtThemeColorBase": "#E6E6E6",
|
|
357
357
|
"dtThemeTopbarColorForeground": "#E6E6E6",
|
|
358
358
|
"dtThemeTopbarColorBackground": "#262626",
|
|
@@ -351,8 +351,8 @@
|
|
|
351
351
|
"dtActionColorBackgroundPositivePrimaryActive": "#1AA340",
|
|
352
352
|
"dtActionColorBorderBaseOutlinedDefault": "#7C52FF",
|
|
353
353
|
"dtActionColorBorderCriticalOutlinedDefault": "#EC0E0E",
|
|
354
|
-
"dtActionColorBorderInvertedOutlinedDefault": "#
|
|
355
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
354
|
+
"dtActionColorBorderInvertedOutlinedDefault": "#ffffff",
|
|
355
|
+
"dtActionColorBorderMutedOutlinedDefault": "#000000",
|
|
356
356
|
"dtThemeColorBase": "#000000",
|
|
357
357
|
"dtThemeTopbarColorForeground": "#000000",
|
|
358
358
|
"dtThemeTopbarColorBackground": "#F9F9F9",
|
|
@@ -352,7 +352,7 @@
|
|
|
352
352
|
"dtActionColorBorderBaseOutlinedDefault": "#AB7EFF",
|
|
353
353
|
"dtActionColorBorderCriticalOutlinedDefault": "#FF8585",
|
|
354
354
|
"dtActionColorBorderInvertedOutlinedDefault": "#000000",
|
|
355
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
355
|
+
"dtActionColorBorderMutedOutlinedDefault": "#ffffff",
|
|
356
356
|
"dtThemeColorBase": "#E6E6E6",
|
|
357
357
|
"dtThemeTopbarColorForeground": "#E6E6E6",
|
|
358
358
|
"dtThemeTopbarColorBackground": "#262626",
|
|
@@ -351,8 +351,8 @@
|
|
|
351
351
|
"dtActionColorBackgroundPositivePrimaryActive": "#1AA340",
|
|
352
352
|
"dtActionColorBorderBaseOutlinedDefault": "#7C52FF",
|
|
353
353
|
"dtActionColorBorderCriticalOutlinedDefault": "#EC0E0E",
|
|
354
|
-
"dtActionColorBorderInvertedOutlinedDefault": "#
|
|
355
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
354
|
+
"dtActionColorBorderInvertedOutlinedDefault": "#ffffff",
|
|
355
|
+
"dtActionColorBorderMutedOutlinedDefault": "#000000",
|
|
356
356
|
"dtThemeColorBase": "#000000",
|
|
357
357
|
"dtThemeTopbarColorForeground": "#000000",
|
|
358
358
|
"dtThemeTopbarColorBackground": "#F9F9F9",
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
"dtActionColorBorderBaseOutlinedDefault": "#AB7EFF",
|
|
347
347
|
"dtActionColorBorderCriticalOutlinedDefault": "#FF8585",
|
|
348
348
|
"dtActionColorBorderInvertedOutlinedDefault": "#000000",
|
|
349
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
349
|
+
"dtActionColorBorderMutedOutlinedDefault": "#ffffff",
|
|
350
350
|
"dtThemeColorBase": "#F285BC",
|
|
351
351
|
"dtThemeTopbarColorForeground": "#F285BC",
|
|
352
352
|
"dtThemeTopbarColorBackground": "#262626",
|
|
@@ -345,8 +345,8 @@
|
|
|
345
345
|
"dtActionColorBackgroundPositivePrimaryActive": "#1AA340",
|
|
346
346
|
"dtActionColorBorderBaseOutlinedDefault": "#7C52FF",
|
|
347
347
|
"dtActionColorBorderCriticalOutlinedDefault": "#EC0E0E",
|
|
348
|
-
"dtActionColorBorderInvertedOutlinedDefault": "#
|
|
349
|
-
"dtActionColorBorderMutedOutlinedDefault": "#
|
|
348
|
+
"dtActionColorBorderInvertedOutlinedDefault": "#ffffff",
|
|
349
|
+
"dtActionColorBorderMutedOutlinedDefault": "#000000",
|
|
350
350
|
"dtThemeColorBase": "#E20074",
|
|
351
351
|
"dtThemeTopbarColorForeground": "#E20074",
|
|
352
352
|
"dtThemeTopbarColorBackground": "#F9F9F9",
|
|
@@ -2,7 +2,7 @@ import { KeyboardNavigation } from "./keyboard_list_navigation-ScXhrxya.js";
|
|
|
2
2
|
import { DROPDOWN_PADDING_CLASSES } from "./dropdown_constants-w1MXGC3Z.js";
|
|
3
3
|
import { getUniqueString } from "../common/utils.js";
|
|
4
4
|
import { EVENT_KEYNAMES } from "../common/constants.js";
|
|
5
|
-
import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "./sr_only_close_button-
|
|
5
|
+
import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "./sr_only_close_button-q23hJuAf.js";
|
|
6
6
|
import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, renderSlot, createElementVNode, normalizeClass, createCommentVNode } from "vue";
|
|
7
7
|
import { _export_sfc } from "./_plugin-vue_export-helper-caHeSgYY.js";
|
|
8
8
|
import { DtPopover } from "../lib/popover.js";
|
|
@@ -440,4 +440,4 @@ const DtDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_rende
|
|
|
440
440
|
export {
|
|
441
441
|
DtDropdown
|
|
442
442
|
};
|
|
443
|
-
//# sourceMappingURL=dropdown-
|
|
443
|
+
//# sourceMappingURL=dropdown-h2VaPT4B.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-oA-_Gotg.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-h2VaPT4B.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ const keyboard_list_navigation = require("./keyboard_list_navigation-fJnl_Iox.js
|
|
|
3
3
|
const dropdown_constants = require("./dropdown_constants-2pGCXy7m.js");
|
|
4
4
|
const common_utils = require("../common/utils.cjs");
|
|
5
5
|
const common_constants = require("../common/constants.cjs");
|
|
6
|
-
const sr_only_close_button = require("./sr_only_close_button-
|
|
6
|
+
const sr_only_close_button = require("./sr_only_close_button-Gl43uI6m.js");
|
|
7
7
|
const vue = require("vue");
|
|
8
8
|
const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
|
|
9
9
|
const lib_popover = require("../lib/popover.cjs");
|
|
@@ -439,4 +439,4 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
439
439
|
}
|
|
440
440
|
const DtDropdown = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
441
441
|
exports.DtDropdown = DtDropdown;
|
|
442
|
-
//# sourceMappingURL=dropdown-
|
|
442
|
+
//# sourceMappingURL=dropdown-yF5Kg42u.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-p-Azgwov.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["DtPopover","SrOnlyCloseButton","KeyboardNavigation","SrOnlyCloseButtonMixin","DROPDOWN_PADDING_CLASSES","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-yF5Kg42u.js","sources":["../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n <dt-popover\n ref=\"popover\"\n :content-width=\"contentWidth\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n :fallback-placements=\"fallbackPlacements\"\n padding=\"none\"\n role=\"menu\"\n :append-to=\"appendTo\"\n :modal=\"modal\"\n :max-height=\"maxHeight\"\n :max-width=\"maxWidth\"\n :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n :open-on-context=\"openOnContext\"\n v-bind=\"$attrs\"\n :tether=\"tether\"\n :transition=\"transition\"\n v-on=\"dropdownListeners\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the dropdown -->\n <slot\n ref=\"anchor\"\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content=\"{ close }\">\n <!-- eslint-disable-next-line max-len -->\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n <ul\n :id=\"listId\"\n ref=\"listWrapper\"\n :class=\"listClasses\"\n data-qa=\"dt-dropdown-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <!-- @slot Slot for the list component -->\n <slot\n name=\"list\"\n :close=\"close\"\n />\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :tabindex=\"isArrowKeyNav ? -1 : 0\"\n @close=\"close\"\n />\n </ul>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtDropdown',\n\n components: {\n DtPopover,\n SrOnlyCloseButton,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n listItemRole: 'menuitem',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n focusOnKeyboardNavigation: true,\n }),\n SrOnlyCloseButtonMixin,\n ],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n * Supports v-model\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Opens the dropdown on right click (context menu). If you set this value to `true`,\n * the default trigger behavior will be disabled.\n */\n openOnContext: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Vertical padding size around the list element.\n * @values none, small, large\n */\n padding: {\n type: String,\n default: 'small',\n validator: (padding) => {\n return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n * below it, but it is invisible.\n */\n modal: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Width configuration for the popover content. When its value is 'anchor',\n * the popover content will have the same width as the anchor.\n * @values null, anchor\n */\n contentWidth: {\n type: String,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n maxHeight: {\n type: String,\n default: '',\n },\n\n /**\n * Determines maximum width for the popover before overflow.\n * Possible units rem|px|%|em\n */\n maxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * If the dropdown does not fit in the direction described by \"placement\",\n * it will attempt to change it's direction to the \"fallbackPlacements\".\n *\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n * */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the dropdown displays relative to the anchor.\n */\n placement: {\n type: String,\n default: 'bottom',\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * If set to false the dialog will display over top of the anchor when there is insufficient space.\n * If set to true it will never move from its position relative to the anchor and will clip instead.\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * @values true, false\n */\n tether: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n },\n\n emits: [\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n\n /**\n * Event fired when dropdown is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n\n /**\n * Event fired to sync the open prop with the parent component\n * @event update:open\n */\n 'update:open',\n ],\n\n data () {\n return {\n LIST_ITEM_NAVIGATION_TYPES,\n DROPDOWN_PADDING_CLASSES,\n EVENT_KEYNAMES,\n openedWithKeyboard: false,\n isOpen: null,\n };\n },\n\n computed: {\n dropdownListeners () {\n return {\n opened: isPopoverOpen => {\n this.updateInitialHighlightIndex(isPopoverOpen);\n },\n\n keydown: event => {\n const eventCode = event.code;\n\n switch (eventCode) {\n case EVENT_KEYNAMES.up:\n case EVENT_KEYNAMES.arrowup:\n this.onUpKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.down:\n case EVENT_KEYNAMES.arrowdown:\n this.onDownKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.space:\n case EVENT_KEYNAMES.spacebar:\n this.onSpaceKey();\n break;\n case EVENT_KEYNAMES.enter:\n this.onEnterKey();\n break;\n case EVENT_KEYNAMES.home:\n this.onHomeKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n case EVENT_KEYNAMES.end:\n this.onEndKeyPress(event);\n event.stopPropagation();\n event.preventDefault();\n break;\n default:\n this.onKeyPress(event);\n break;\n }\n\n this.$emit('keydown', event);\n },\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemEl () {\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n\n isArrowKeyNav () {\n return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n },\n\n listClasses () {\n return [\n 'd-dropdown-list',\n DROPDOWN_PADDING_CLASSES[this.padding],\n this.listClass,\n { 'd-context-menu-list': this.openOnContext },\n ];\n },\n\n shouldOpenWithArrowKeys () {\n return !this.openOnContext;\n },\n },\n\n methods: {\n onMouseHighlight (e) {\n const liElement = e.target.closest('li');\n\n if (liElement && liElement.role && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n liElement.focus();\n }\n },\n\n getListElement () {\n return this.$refs.listWrapper;\n },\n\n clearHighlightIndex () {\n this.setHighlightIndex(-1);\n },\n\n afterHighlight () {\n if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n return;\n }\n\n this.$emit('highlight', this.highlightIndex);\n },\n\n updateInitialHighlightIndex (isPopoverOpen) {\n this.isOpen = isPopoverOpen;\n\n if (isPopoverOpen) {\n if (this.openedWithKeyboard && this.isArrowKeyNav) {\n this.setHighlightIndex(0);\n }\n this.$emit('opened', true);\n } else {\n this.clearHighlightIndex();\n this.openedWithKeyboard = false;\n this.$emit('opened', false);\n }\n },\n\n onSpaceKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onEnterKey () {\n if (!this.open) {\n this.openedWithKeyboard = true;\n }\n },\n\n onUpKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onUpKey();\n }\n },\n\n onDownKeyPress () {\n if (!this.isOpen) {\n this.openedWithKeyboard = true;\n return;\n }\n if (this.isArrowKeyNav) {\n return this.onDownKey();\n }\n },\n\n onHomeKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onHomeKey();\n },\n\n onEndKeyPress () {\n if (!this.isOpen || !this.isArrowKeyNav) {\n return;\n }\n\n return this.onEndKey();\n },\n\n onKeyPress (e) {\n if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n return this.onNavigationKey(e.key);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n width: var(--dt-size-850);\n}\n.d-dropdown-list {\n position: relative;\n margin: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n padding-right: var(--dt-space-0);\n >.dt-list-item {\n margin-top: var(--dt-space-200);\n }\n}\n</style>\n"],"names":["DtPopover","SrOnlyCloseButton","KeyboardNavigation","SrOnlyCloseButtonMixin","DROPDOWN_PADDING_CLASSES","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createElementVNode"],"mappings":"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"}
|
|
@@ -3,7 +3,8 @@ import { hasSlotContent } from "../common/utils.js";
|
|
|
3
3
|
import { resolveComponent, openBlock, createElementBlock, renderSlot, createVNode, createCommentVNode, createTextVNode, toDisplayString, createElementVNode, createBlock, mergeProps, withCtx } from "vue";
|
|
4
4
|
import { _export_sfc } from "./_plugin-vue_export-helper-caHeSgYY.js";
|
|
5
5
|
import { DtIcon } from "../lib/icon.js";
|
|
6
|
-
import {
|
|
6
|
+
import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
|
|
7
|
+
import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "./sr_only_close_button-q23hJuAf.js";
|
|
7
8
|
import { DtButton } from "../lib/button.js";
|
|
8
9
|
const kindToIcon = /* @__PURE__ */ new Map([
|
|
9
10
|
["info", "info"],
|
|
@@ -122,7 +123,7 @@ const DtNoticeContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sf
|
|
|
122
123
|
const _sfc_main = {
|
|
123
124
|
name: "DtNoticeAction",
|
|
124
125
|
components: {
|
|
125
|
-
|
|
126
|
+
DtIconClose,
|
|
126
127
|
DtButton,
|
|
127
128
|
SrOnlyCloseButton
|
|
128
129
|
},
|
|
@@ -185,7 +186,7 @@ const _hoisted_1 = {
|
|
|
185
186
|
"data-qa": "notice-content-actions"
|
|
186
187
|
};
|
|
187
188
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
188
|
-
const
|
|
189
|
+
const _component_dt_icon_close = resolveComponent("dt-icon-close");
|
|
189
190
|
const _component_dt_button = resolveComponent("dt-button");
|
|
190
191
|
const _component_sr_only_close_button = resolveComponent("sr-only-close-button");
|
|
191
192
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
@@ -200,10 +201,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
200
201
|
"aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
|
|
201
202
|
}, $props.closeButtonProps, { onClick: $options.close }), {
|
|
202
203
|
icon: withCtx(() => [
|
|
203
|
-
createVNode(
|
|
204
|
-
name: "close",
|
|
205
|
-
size: "200"
|
|
206
|
-
})
|
|
204
|
+
createVNode(_component_dt_icon_close, { size: "200" })
|
|
207
205
|
]),
|
|
208
206
|
_: 1
|
|
209
207
|
}, 16, ["aria-label", "onClick"])) : createCommentVNode("", true),
|
|
@@ -220,4 +218,4 @@ export {
|
|
|
220
218
|
DtNoticeContent,
|
|
221
219
|
DtNoticeIcon
|
|
222
220
|
};
|
|
223
|
-
//# sourceMappingURL=notice_action-
|
|
221
|
+
//# sourceMappingURL=notice_action-5nPX2mSu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notice_action-5nPX2mSu.js","sources":["../../components/notice/notice_icon.vue","../../components/notice/notice_content.vue","../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <dt-icon\n :name=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n ['info', 'info'],\n ['success', 'check-circle'],\n ['warning', 'alert-triangle'],\n ['error', 'alert-circle'],\n ['base', 'bell'],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIcon,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n data () {\n return {\n hasSlotContent,\n };\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__content\"\n data-qa=\"notice-content\"\n >\n <p\n v-if=\"title || hasSlotContent($slots.titleOverride)\"\n :id=\"titleId\"\n class=\"d-notice__title\"\n data-qa=\"notice-content-title\"\n >\n <!-- @slot Slot for the title -->\n <slot name=\"titleOverride\">\n {{ title }}\n </slot>\n </p>\n <p\n :id=\"contentId\"\n class=\"d-notice__message\"\n data-qa=\"notice-content-message\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </p>\n </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtNoticeContent',\n\n props: {\n /**\n * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * ID for the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n */\n titleId: {\n type: String,\n default: undefined,\n },\n\n /**\n * ID for the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n */\n contentId: {\n type: String,\n default: undefined,\n },\n },\n\n data () {\n return {\n hasSlotContent,\n };\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__actions\"\n data-qa=\"notice-content-actions\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"!hideAction\" />\n <dt-button\n v-if=\"!hideClose\"\n ref=\"closeButton\"\n data-qa=\"dt-notice-action-close-button\"\n size=\"sm\"\n importance=\"clear\"\n circle\n :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n v-bind=\"closeButtonProps\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"close\"\n />\n </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtNoticeAction',\n\n components: {\n DtIconClose,\n DtButton,\n SrOnlyCloseButton,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * Hides the close button from the notice\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Hides the action from the notice\n * @values true, false\n */\n hideAction: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n ],\n\n created () {\n if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n }\n },\n\n mounted () {\n if (!this.hideClose) {\n this.lastFocusedElement = document.activeElement;\n }\n },\n\n beforeUnmount () {\n this.lastFocusedElement?.focus();\n },\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["_sfc_main","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_createElementVNode","_createBlock","_mergeProps"],"mappings":"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"}
|
|
@@ -4,7 +4,8 @@ const common_utils = require("../common/utils.cjs");
|
|
|
4
4
|
const vue = require("vue");
|
|
5
5
|
const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
|
|
6
6
|
const lib_icon = require("../lib/icon.cjs");
|
|
7
|
-
const
|
|
7
|
+
const vue3 = require("@dialpad/dialtone-icons/vue3");
|
|
8
|
+
const sr_only_close_button = require("./sr_only_close_button-Gl43uI6m.js");
|
|
8
9
|
const lib_button = require("../lib/button.cjs");
|
|
9
10
|
const kindToIcon = /* @__PURE__ */ new Map([
|
|
10
11
|
["info", "info"],
|
|
@@ -123,7 +124,7 @@ const DtNoticeContent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc
|
|
|
123
124
|
const _sfc_main = {
|
|
124
125
|
name: "DtNoticeAction",
|
|
125
126
|
components: {
|
|
126
|
-
|
|
127
|
+
DtIconClose: vue3.DtIconClose,
|
|
127
128
|
DtButton: lib_button.DtButton,
|
|
128
129
|
SrOnlyCloseButton: sr_only_close_button.SrOnlyCloseButton
|
|
129
130
|
},
|
|
@@ -186,7 +187,7 @@ const _hoisted_1 = {
|
|
|
186
187
|
"data-qa": "notice-content-actions"
|
|
187
188
|
};
|
|
188
189
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
189
|
-
const
|
|
190
|
+
const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
|
|
190
191
|
const _component_dt_button = vue.resolveComponent("dt-button");
|
|
191
192
|
const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
|
|
192
193
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
@@ -201,10 +202,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
201
202
|
"aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
|
|
202
203
|
}, $props.closeButtonProps, { onClick: $options.close }), {
|
|
203
204
|
icon: vue.withCtx(() => [
|
|
204
|
-
vue.createVNode(
|
|
205
|
-
name: "close",
|
|
206
|
-
size: "200"
|
|
207
|
-
})
|
|
205
|
+
vue.createVNode(_component_dt_icon_close, { size: "200" })
|
|
208
206
|
]),
|
|
209
207
|
_: 1
|
|
210
208
|
}, 16, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
|
|
@@ -219,4 +217,4 @@ const DtNoticeAction = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_
|
|
|
219
217
|
exports.DtNoticeAction = DtNoticeAction;
|
|
220
218
|
exports.DtNoticeContent = DtNoticeContent;
|
|
221
219
|
exports.DtNoticeIcon = DtNoticeIcon;
|
|
222
|
-
//# sourceMappingURL=notice_action-
|
|
220
|
+
//# sourceMappingURL=notice_action-i55KZMfG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notice_action-i55KZMfG.js","sources":["../../components/notice/notice_icon.vue","../../components/notice/notice_content.vue","../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <dt-icon\n :name=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n ['info', 'info'],\n ['success', 'check-circle'],\n ['warning', 'alert-triangle'],\n ['error', 'alert-circle'],\n ['base', 'bell'],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIcon,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n data () {\n return {\n hasSlotContent,\n };\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__content\"\n data-qa=\"notice-content\"\n >\n <p\n v-if=\"title || hasSlotContent($slots.titleOverride)\"\n :id=\"titleId\"\n class=\"d-notice__title\"\n data-qa=\"notice-content-title\"\n >\n <!-- @slot Slot for the title -->\n <slot name=\"titleOverride\">\n {{ title }}\n </slot>\n </p>\n <p\n :id=\"contentId\"\n class=\"d-notice__message\"\n data-qa=\"notice-content-message\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </p>\n </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n name: 'DtNoticeContent',\n\n props: {\n /**\n * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * ID for the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n */\n titleId: {\n type: String,\n default: undefined,\n },\n\n /**\n * ID for the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n */\n contentId: {\n type: String,\n default: undefined,\n },\n },\n\n data () {\n return {\n hasSlotContent,\n };\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__actions\"\n data-qa=\"notice-content-actions\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"!hideAction\" />\n <dt-button\n v-if=\"!hideClose\"\n ref=\"closeButton\"\n data-qa=\"dt-notice-action-close-button\"\n size=\"sm\"\n importance=\"clear\"\n circle\n :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n v-bind=\"closeButtonProps\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"close\"\n />\n </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtNoticeAction',\n\n components: {\n DtIconClose,\n DtButton,\n SrOnlyCloseButton,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * Hides the close button from the notice\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Hides the action from the notice\n * @values true, false\n */\n hideAction: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n ],\n\n created () {\n if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n }\n },\n\n mounted () {\n if (!this.hideClose) {\n this.lastFocusedElement = document.activeElement;\n }\n },\n\n beforeUnmount () {\n this.lastFocusedElement?.focus();\n },\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtIcon","NOTICE_KINDS","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_createElementVNode","DtIconClose","DtButton","SrOnlyCloseButton","SrOnlyCloseButtonMixin","_createBlock","_mergeProps"],"mappings":"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"}
|
package/dist/vue3/chunks/{sr_only_close_button-xGrHFjwA.js → sr_only_close_button-Gl43uI6m.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
const vue3 = require("@dialpad/dialtone-icons/vue3");
|
|
2
3
|
const vue = require("vue");
|
|
3
4
|
const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
|
|
4
|
-
const lib_icon = require("../lib/icon.cjs");
|
|
5
5
|
const lib_button = require("../lib/button.cjs");
|
|
6
6
|
const SrOnlyCloseButtonMixin = {
|
|
7
7
|
props: {
|
|
@@ -48,7 +48,7 @@ const SrOnlyCloseButtonMixin = {
|
|
|
48
48
|
const _sfc_main = {
|
|
49
49
|
name: "SrOnlyCloseButton",
|
|
50
50
|
components: {
|
|
51
|
-
|
|
51
|
+
DtIconClose: vue3.DtIconClose,
|
|
52
52
|
DtButton: lib_button.DtButton
|
|
53
53
|
},
|
|
54
54
|
props: {
|
|
@@ -69,7 +69,7 @@ const _sfc_main = {
|
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
71
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
72
|
-
const
|
|
72
|
+
const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
|
|
73
73
|
const _component_dt_button = vue.resolveComponent("dt-button");
|
|
74
74
|
return vue.openBlock(), vue.createBlock(_component_dt_button, {
|
|
75
75
|
id: "sr-only-close-button",
|
|
@@ -80,7 +80,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
80
80
|
onKeydown: vue.withKeys(vue.withModifiers($options.close, ["prevent", "stop"]), ["space"])
|
|
81
81
|
}, {
|
|
82
82
|
default: vue.withCtx(() => [
|
|
83
|
-
vue.createVNode(
|
|
83
|
+
vue.createVNode(_component_dt_icon_close)
|
|
84
84
|
]),
|
|
85
85
|
_: 1
|
|
86
86
|
}, 8, ["aria-label", "onClick", "onKeydown"]);
|
|
@@ -88,4 +88,4 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
88
88
|
const SrOnlyCloseButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
89
89
|
exports.SrOnlyCloseButton = SrOnlyCloseButton;
|
|
90
90
|
exports.SrOnlyCloseButtonMixin = SrOnlyCloseButtonMixin;
|
|
91
|
-
//# sourceMappingURL=sr_only_close_button-
|
|
91
|
+
//# sourceMappingURL=sr_only_close_button-Gl43uI6m.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sr_only_close_button-Gl43uI6m.js","sources":["../../common/mixins/sr_only_close_button.js","../../common/sr_only_close_button.vue"],"sourcesContent":["/**\n * @displayName Sr-Only close button mixin\n */\nexport default {\n props: {\n /**\n * If true, a hidden close button is included for screen readers\n * @values true, false\n */\n visuallyHiddenClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateVisuallyHiddenCloseProps();\n },\n },\n },\n\n computed: {\n showVisuallyHiddenClose () {\n return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;\n },\n },\n\n methods: {\n validateVisuallyHiddenCloseProps () {\n if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {\n console.error(`If visuallyHiddenClose prop is true, the component includes\n a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);\n }\n },\n },\n};\n","<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon-close />\n </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIconClose,\n DtButton,\n },\n\n props: {\n /**\n * Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["DtIconClose","DtButton","_createBlock","_createVNode"],"mappings":";;;;;AAGA,MAAe,yBAAA;AAAA,EACb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,iCAAgC;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,0BAA2B;AACzB,aAAO,KAAK,uBAAuB,KAAK,4BAA4B;AAAA,IACrE;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,mCAAoC;AAClC,UAAI,KAAK,uBAAuB,CAAC,KAAK,0BAA0B;AAC9D,gBAAQ,MAAM;AAAA,8FACwE;AAAA,MACvF;AAAA,IACF;AAAA,EACF;AACH;AC/BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,iBACVA,KAAW;AAAA,IACX,UAAAC,WAAQ;AAAA,EACT;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;0BAzCEC,IASY,YAAA,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,0CAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;yBAElC,MAAiB;AAAA,MAAjBC,IAAAA,YAAiB,wBAAA;AAAA;;;;;;;"}
|
package/dist/vue3/chunks/{sr_only_close_button-3EdsV-dH.js → sr_only_close_button-q23hJuAf.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
|
|
1
2
|
import { resolveComponent, openBlock, createBlock, withKeys, withModifiers, withCtx, createVNode } from "vue";
|
|
2
3
|
import { _export_sfc } from "./_plugin-vue_export-helper-caHeSgYY.js";
|
|
3
|
-
import { DtIcon } from "../lib/icon.js";
|
|
4
4
|
import { DtButton } from "../lib/button.js";
|
|
5
5
|
const SrOnlyCloseButtonMixin = {
|
|
6
6
|
props: {
|
|
@@ -47,7 +47,7 @@ const SrOnlyCloseButtonMixin = {
|
|
|
47
47
|
const _sfc_main = {
|
|
48
48
|
name: "SrOnlyCloseButton",
|
|
49
49
|
components: {
|
|
50
|
-
|
|
50
|
+
DtIconClose,
|
|
51
51
|
DtButton
|
|
52
52
|
},
|
|
53
53
|
props: {
|
|
@@ -68,7 +68,7 @@ const _sfc_main = {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
71
|
-
const
|
|
71
|
+
const _component_dt_icon_close = resolveComponent("dt-icon-close");
|
|
72
72
|
const _component_dt_button = resolveComponent("dt-button");
|
|
73
73
|
return openBlock(), createBlock(_component_dt_button, {
|
|
74
74
|
id: "sr-only-close-button",
|
|
@@ -79,7 +79,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
79
79
|
onKeydown: withKeys(withModifiers($options.close, ["prevent", "stop"]), ["space"])
|
|
80
80
|
}, {
|
|
81
81
|
default: withCtx(() => [
|
|
82
|
-
createVNode(
|
|
82
|
+
createVNode(_component_dt_icon_close)
|
|
83
83
|
]),
|
|
84
84
|
_: 1
|
|
85
85
|
}, 8, ["aria-label", "onClick", "onKeydown"]);
|
|
@@ -89,4 +89,4 @@ export {
|
|
|
89
89
|
SrOnlyCloseButton,
|
|
90
90
|
SrOnlyCloseButtonMixin
|
|
91
91
|
};
|
|
92
|
-
//# sourceMappingURL=sr_only_close_button-
|
|
92
|
+
//# sourceMappingURL=sr_only_close_button-q23hJuAf.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sr_only_close_button-q23hJuAf.js","sources":["../../common/mixins/sr_only_close_button.js","../../common/sr_only_close_button.vue"],"sourcesContent":["/**\n * @displayName Sr-Only close button mixin\n */\nexport default {\n props: {\n /**\n * If true, a hidden close button is included for screen readers\n * @values true, false\n */\n visuallyHiddenClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateVisuallyHiddenCloseProps();\n },\n },\n },\n\n computed: {\n showVisuallyHiddenClose () {\n return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;\n },\n },\n\n methods: {\n validateVisuallyHiddenCloseProps () {\n if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {\n console.error(`If visuallyHiddenClose prop is true, the component includes\n a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);\n }\n },\n },\n};\n","<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon-close />\n </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIconClose,\n DtButton,\n },\n\n props: {\n /**\n * Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["_createBlock","_createVNode"],"mappings":";;;;AAGA,MAAe,yBAAA;AAAA,EACb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,iCAAgC;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,0BAA2B;AACzB,aAAO,KAAK,uBAAuB,KAAK,4BAA4B;AAAA,IACrE;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,mCAAoC;AAClC,UAAI,KAAK,uBAAuB,CAAC,KAAK,0BAA0B;AAC9D,gBAAQ,MAAM;AAAA,8FACwE;AAAA,MACvF;AAAA,IACF;AAAA,EACF;AACH;AC/BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;sBAzCEA,YASY,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,kCAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;qBAElC,MAAiB;AAAA,MAAjBC,YAAiB,wBAAA;AAAA;;;;;"}
|