@dialpad/dialtone 9.64.1 → 9.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone-default-theme.css +121 -37
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +121 -37
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +4686 -4686
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/dialtone-vue.cjs +1 -1
- package/dist/vue2/dialtone-vue.js +1 -1
- package/dist/vue2/lib/contact-centers-row.cjs +17 -9
- package/dist/vue2/lib/contact-centers-row.cjs.map +1 -1
- package/dist/vue2/lib/contact-centers-row.js +17 -9
- package/dist/vue2/lib/contact-centers-row.js.map +1 -1
- package/dist/vue2/lib/stack.cjs +51 -14
- package/dist/vue2/lib/stack.cjs.map +1 -1
- package/dist/vue2/lib/stack.js +52 -15
- package/dist/vue2/lib/stack.js.map +1 -1
- package/dist/vue2/style.css +57 -57
- package/dist/vue2/types/components/stack/utils.d.ts +2 -2
- package/dist/vue2/types/components/stack/utils.d.ts.map +1 -1
- package/dist/vue2/types/components/stack/validators.d.ts +1 -1
- package/dist/vue2/types/components/stack/validators.d.ts.map +1 -1
- package/dist/vue2/types/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts +15 -0
- package/dist/vue2/types/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts.map +1 -1
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -1
- package/dist/vue3/dialtone-vue.js +1 -1
- package/dist/vue3/lib/contact-centers-row.cjs +21 -10
- package/dist/vue3/lib/contact-centers-row.cjs.map +1 -1
- package/dist/vue3/lib/contact-centers-row.js +21 -10
- package/dist/vue3/lib/contact-centers-row.js.map +1 -1
- package/dist/vue3/lib/stack.cjs +51 -14
- package/dist/vue3/lib/stack.cjs.map +1 -1
- package/dist/vue3/lib/stack.js +52 -15
- package/dist/vue3/lib/stack.js.map +1 -1
- package/dist/vue3/style.css +57 -57
- package/dist/vue3/types/components/stack/utils.d.ts +2 -2
- package/dist/vue3/types/components/stack/utils.d.ts.map +1 -1
- package/dist/vue3/types/components/stack/validators.d.ts +1 -1
- package/dist/vue3/types/components/stack/validators.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts +15 -0
- package/dist/vue3/types/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -128,8 +128,8 @@ require("@tiptap/suggestion");
|
|
|
128
128
|
require("@tiptap/extension-mention");
|
|
129
129
|
require("@dialpad/dialtone-icons/vue2/hash");
|
|
130
130
|
require("@dialpad/dialtone-icons/vue2/lock");
|
|
131
|
-
require("@dialpad/dialtone-icons/vue2/headphones");
|
|
132
131
|
require("@dialpad/dialtone-icons/vue2/chevron-down");
|
|
132
|
+
require("@dialpad/dialtone-icons/vue2/headphones");
|
|
133
133
|
exports.DEFAULT_VALIDATION_MESSAGE_TYPE = common_constants.DEFAULT_VALIDATION_MESSAGE_TYPE;
|
|
134
134
|
exports.DESCRIPTION_SIZE_TYPES = common_constants.DESCRIPTION_SIZE_TYPES;
|
|
135
135
|
exports.VALIDATION_MESSAGE_TYPES = common_constants.VALIDATION_MESSAGE_TYPES;
|
|
@@ -126,8 +126,8 @@ import "@tiptap/suggestion";
|
|
|
126
126
|
import "@tiptap/extension-mention";
|
|
127
127
|
import "@dialpad/dialtone-icons/vue2/hash";
|
|
128
128
|
import "@dialpad/dialtone-icons/vue2/lock";
|
|
129
|
-
import "@dialpad/dialtone-icons/vue2/headphones";
|
|
130
129
|
import "@dialpad/dialtone-icons/vue2/chevron-down";
|
|
130
|
+
import "@dialpad/dialtone-icons/vue2/headphones";
|
|
131
131
|
export {
|
|
132
132
|
AVATAR_COLORS,
|
|
133
133
|
AVATAR_GROUP_VALIDATOR,
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue2/headphones");
|
|
4
|
-
const DtIconChevronDown = require("@dialpad/dialtone-icons/vue2/chevron-down");
|
|
5
|
-
const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
|
|
6
3
|
const common_utils = require("../common/utils.cjs");
|
|
4
|
+
const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
|
|
5
|
+
const DtIconChevronDown = require("@dialpad/dialtone-icons/vue2/chevron-down");
|
|
6
|
+
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue2/headphones");
|
|
7
7
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
8
8
|
const lib_button = require("./button.cjs");
|
|
9
9
|
const lib_badge = require("./badge.cjs");
|
|
10
|
+
require("../common/constants.cjs");
|
|
11
|
+
require("vue");
|
|
10
12
|
require("../chunks/index-anN_sx1F.js");
|
|
11
13
|
require("emoji-toolkit/emoji_strategy.json");
|
|
12
14
|
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
13
15
|
require("@dialpad/dialtone-icons/icons.json");
|
|
14
16
|
require("./emoji.cjs");
|
|
15
17
|
require("./skeleton.cjs");
|
|
16
|
-
require("../common/constants.cjs");
|
|
17
|
-
require("vue");
|
|
18
18
|
require("../chunks/link_constants-x8NwdqmA.js");
|
|
19
19
|
require("./icon.cjs");
|
|
20
20
|
require("@dialpad/dialtone-icons/vue2");
|
|
21
21
|
const _sfc_main = {
|
|
22
|
-
name: "
|
|
22
|
+
name: "DtRecipeContactCentersRow",
|
|
23
23
|
components: {
|
|
24
24
|
DtButton: lib_button.DtButton,
|
|
25
25
|
DtBadge: lib_badge.DtBadge,
|
|
@@ -50,6 +50,13 @@ const _sfc_main = {
|
|
|
50
50
|
type: Boolean,
|
|
51
51
|
default: false
|
|
52
52
|
},
|
|
53
|
+
/**
|
|
54
|
+
* Making this true will hide the unread count badge, the chevron button, and the right slot
|
|
55
|
+
*/
|
|
56
|
+
hideActions: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: false
|
|
59
|
+
},
|
|
53
60
|
/**
|
|
54
61
|
* Number of unread messages
|
|
55
62
|
*/
|
|
@@ -107,7 +114,8 @@ const _sfc_main = {
|
|
|
107
114
|
watch: {
|
|
108
115
|
$props: {
|
|
109
116
|
deep: true,
|
|
110
|
-
handler() {
|
|
117
|
+
async handler() {
|
|
118
|
+
await this.$nextTick();
|
|
111
119
|
this.adjustLabelWidth();
|
|
112
120
|
}
|
|
113
121
|
}
|
|
@@ -136,7 +144,7 @@ var _sfc_render = function render() {
|
|
|
136
144
|
return _c("div", { class: [
|
|
137
145
|
"dt-leftbar-row__container",
|
|
138
146
|
{ "dt-leftbar-row__container--off-duty": _vm.$slots.timer }
|
|
139
|
-
] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-leftbar-row-icon" } })], 1), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "dt-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "data-qa": "dt-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
|
|
147
|
+
] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-leftbar-row-icon" } })], 1), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hideActions, expression: "!hideActions" }], staticClass: "dt-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "dt-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "data-qa": "dt-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
|
|
140
148
|
$event.stopPropagation();
|
|
141
149
|
return _vm.$emit("click-menu", $event);
|
|
142
150
|
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
@@ -150,7 +158,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
|
150
158
|
_sfc_staticRenderFns,
|
|
151
159
|
false,
|
|
152
160
|
null,
|
|
153
|
-
"
|
|
161
|
+
"aeb8c657",
|
|
154
162
|
null,
|
|
155
163
|
null
|
|
156
164
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div
|
|
1
|
+
{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-show=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue2/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue2/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n */\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /**\n * Text displayed next to the icon. Required.\n */\n description: {\n type: String,\n required: true,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Making this true will hide the unread count badge, the chevron button, and the right slot\n */\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: Number,\n default: 0,\n },\n\n /**\n * Aria label for the menu button.\n */\n menuButtonAriaLabel: {\n type: String,\n required: true,\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 * Menu button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n showUnreadCount () {\n return this.unreadCount > 0;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,WAAA;AAAA,IACA,SAAAC,UAAA;AAAA,IACA,oBAAAC,qBAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;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,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kCAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,gCAAA,KAAA;AAAA,UACA,4BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,YACA,KAAA,YACAC,aAAA,kBAAA,CAAA,KAAA,aAAA,KAAA,kBAAA,CAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA;AACA,aAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA;AACA,SAAA,eAAA,QAAA,KAAA,GAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA;EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,gCAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,WAAA;AACA,WAAA,aAAA,cAAA,aAAA,aAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import DtIconHeadphones from "@dialpad/dialtone-icons/vue2/headphones";
|
|
2
|
-
import DtIconChevronDown from "@dialpad/dialtone-icons/vue2/chevron-down";
|
|
3
|
-
import { DtEmojiTextWrapper } from "./emoji-text-wrapper.js";
|
|
4
1
|
import { safeConcatStrings } from "../common/utils.js";
|
|
2
|
+
import { DtEmojiTextWrapper } from "./emoji-text-wrapper.js";
|
|
3
|
+
import DtIconChevronDown from "@dialpad/dialtone-icons/vue2/chevron-down";
|
|
4
|
+
import DtIconHeadphones from "@dialpad/dialtone-icons/vue2/headphones";
|
|
5
5
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
6
6
|
import { DtButton } from "./button.js";
|
|
7
7
|
import { DtBadge } from "./badge.js";
|
|
8
|
+
import "../common/constants.js";
|
|
9
|
+
import "vue";
|
|
8
10
|
import "../chunks/index-ODod4Oj_.js";
|
|
9
11
|
import "emoji-toolkit/emoji_strategy.json";
|
|
10
12
|
import "../chunks/icon_constants-Dy4MEUJL.js";
|
|
11
13
|
import "@dialpad/dialtone-icons/icons.json";
|
|
12
14
|
import "./emoji.js";
|
|
13
15
|
import "./skeleton.js";
|
|
14
|
-
import "../common/constants.js";
|
|
15
|
-
import "vue";
|
|
16
16
|
import "../chunks/link_constants-AfTWrr-n.js";
|
|
17
17
|
import "./icon.js";
|
|
18
18
|
import "@dialpad/dialtone-icons/vue2";
|
|
19
19
|
const _sfc_main = {
|
|
20
|
-
name: "
|
|
20
|
+
name: "DtRecipeContactCentersRow",
|
|
21
21
|
components: {
|
|
22
22
|
DtButton,
|
|
23
23
|
DtBadge,
|
|
@@ -48,6 +48,13 @@ const _sfc_main = {
|
|
|
48
48
|
type: Boolean,
|
|
49
49
|
default: false
|
|
50
50
|
},
|
|
51
|
+
/**
|
|
52
|
+
* Making this true will hide the unread count badge, the chevron button, and the right slot
|
|
53
|
+
*/
|
|
54
|
+
hideActions: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: false
|
|
57
|
+
},
|
|
51
58
|
/**
|
|
52
59
|
* Number of unread messages
|
|
53
60
|
*/
|
|
@@ -105,7 +112,8 @@ const _sfc_main = {
|
|
|
105
112
|
watch: {
|
|
106
113
|
$props: {
|
|
107
114
|
deep: true,
|
|
108
|
-
handler() {
|
|
115
|
+
async handler() {
|
|
116
|
+
await this.$nextTick();
|
|
109
117
|
this.adjustLabelWidth();
|
|
110
118
|
}
|
|
111
119
|
}
|
|
@@ -134,7 +142,7 @@ var _sfc_render = function render() {
|
|
|
134
142
|
return _c("div", { class: [
|
|
135
143
|
"dt-leftbar-row__container",
|
|
136
144
|
{ "dt-leftbar-row__container--off-duty": _vm.$slots.timer }
|
|
137
|
-
] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-leftbar-row-icon" } })], 1), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "dt-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "data-qa": "dt-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
|
|
145
|
+
] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "dt-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "dt-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-leftbar-row-icon" } })], 1), _c("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hideActions, expression: "!hideActions" }], staticClass: "dt-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "dt-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { "data-qa": "dt-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
|
|
138
146
|
$event.stopPropagation();
|
|
139
147
|
return _vm.$emit("click-menu", $event);
|
|
140
148
|
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
@@ -148,7 +156,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
|
148
156
|
_sfc_staticRenderFns,
|
|
149
157
|
false,
|
|
150
158
|
null,
|
|
151
|
-
"
|
|
159
|
+
"aeb8c657",
|
|
152
160
|
null,
|
|
153
161
|
null
|
|
154
162
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-centers-row.js","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div
|
|
1
|
+
{"version":3,"file":"contact-centers-row.js","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-show=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue2/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue2/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n */\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /**\n * Text displayed next to the icon. Required.\n */\n description: {\n type: String,\n required: true,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Making this true will hide the unread count badge, the chevron button, and the right slot\n */\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: Number,\n default: 0,\n },\n\n /**\n * Aria label for the menu button.\n */\n menuButtonAriaLabel: {\n type: String,\n required: true,\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 * Menu button clicked\n *\n * @event call\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n showUnreadCount () {\n return this.unreadCount > 0;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeDestroy: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;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,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kCAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACA,gCAAA,KAAA;AAAA,UACA,4BAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,YACA,KAAA,YACA,kBAAA,CAAA,KAAA,aAAA,KAAA,kBAAA,CAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA;AACA,aAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA;AACA,SAAA,eAAA,QAAA,KAAA,GAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA;EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,gCAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,eAAA,gBAAA,QAAA,mBAAA,cAAA,8BAAA,mBAAA,gBAAA;AACA,YAAA,WAAA;AACA,WAAA,aAAA,cAAA,aAAA,aAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/vue2/lib/stack.cjs
CHANGED
|
@@ -15,25 +15,52 @@ function _getValidDirection(direction) {
|
|
|
15
15
|
return null;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
function _getValidGap(gap) {
|
|
19
|
+
if (typeof gap === "string") {
|
|
20
|
+
return gap;
|
|
21
|
+
} else if (typeof gap === "object") {
|
|
22
|
+
return gap.default;
|
|
23
|
+
} else {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
18
27
|
function directionPropType(value) {
|
|
19
28
|
return typeof value;
|
|
20
29
|
}
|
|
21
30
|
function getDefaultDirectionClass(direction) {
|
|
22
31
|
return _getValidDirection(direction) ? `d-stack--${stack_constants.DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
|
|
23
32
|
}
|
|
24
|
-
function
|
|
33
|
+
function getResposiveDirectionClasses(direction) {
|
|
25
34
|
if (directionPropType(direction) === "object") {
|
|
26
35
|
return [
|
|
27
36
|
...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
28
|
-
return direction[breakpoint] ? `d-stack--${breakpoint}
|
|
37
|
+
return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
|
|
29
38
|
})
|
|
30
39
|
];
|
|
31
40
|
} else {
|
|
32
|
-
return
|
|
41
|
+
return [];
|
|
33
42
|
}
|
|
34
43
|
}
|
|
35
|
-
function
|
|
36
|
-
|
|
44
|
+
function getResposiveGapClasses(gap) {
|
|
45
|
+
if (typeof gap === "object") {
|
|
46
|
+
return [
|
|
47
|
+
...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
48
|
+
return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
|
|
49
|
+
})
|
|
50
|
+
];
|
|
51
|
+
} else {
|
|
52
|
+
return [];
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
function getResponsiveClasses(direction, gap) {
|
|
56
|
+
return [
|
|
57
|
+
...getResposiveDirectionClasses(direction),
|
|
58
|
+
...getResposiveGapClasses(gap)
|
|
59
|
+
];
|
|
60
|
+
}
|
|
61
|
+
function getDefaultGapClass(gap) {
|
|
62
|
+
const validGap = _getValidGap(gap);
|
|
63
|
+
return stack_constants.DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
|
|
37
64
|
}
|
|
38
65
|
function directionValidator(direction) {
|
|
39
66
|
if (directionPropType(direction) === "string") {
|
|
@@ -46,7 +73,13 @@ function directionValidator(direction) {
|
|
|
46
73
|
}
|
|
47
74
|
}
|
|
48
75
|
function gapValidator(gap) {
|
|
49
|
-
|
|
76
|
+
if (typeof gap === "string") {
|
|
77
|
+
return stack_constants.DT_STACK_GAP.includes(gap);
|
|
78
|
+
}
|
|
79
|
+
if (typeof gap === "object") {
|
|
80
|
+
const { default: defaultStyle } = gap;
|
|
81
|
+
return stack_constants.DT_STACK_GAP.includes(defaultStyle);
|
|
82
|
+
}
|
|
50
83
|
}
|
|
51
84
|
const _sfc_main = {
|
|
52
85
|
name: "DtStack",
|
|
@@ -72,11 +105,15 @@ const _sfc_main = {
|
|
|
72
105
|
default: "div"
|
|
73
106
|
},
|
|
74
107
|
/**
|
|
75
|
-
*
|
|
76
|
-
*
|
|
108
|
+
* The gap property controls the spacing between items in the stack.
|
|
109
|
+
* The gap can be set to a string, or object with breakpoints.
|
|
110
|
+
* All the undefined breakpoints will have the 'default' value.
|
|
111
|
+
* You can override the default gap with 'default' key.
|
|
112
|
+
* In case of string, it will be applied to all the breakpoints.
|
|
113
|
+
* Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
|
|
77
114
|
*/
|
|
78
115
|
gap: {
|
|
79
|
-
type: String,
|
|
116
|
+
type: [String, Object],
|
|
80
117
|
default: "0",
|
|
81
118
|
validator: (gap) => gapValidator(gap)
|
|
82
119
|
}
|
|
@@ -89,14 +126,14 @@ const _sfc_main = {
|
|
|
89
126
|
};
|
|
90
127
|
},
|
|
91
128
|
computed: {
|
|
92
|
-
|
|
93
|
-
return
|
|
129
|
+
defaultGap() {
|
|
130
|
+
return getDefaultGapClass(this.gap);
|
|
94
131
|
},
|
|
95
132
|
defaultDirection() {
|
|
96
133
|
return getDefaultDirectionClass(this.direction);
|
|
97
134
|
},
|
|
98
135
|
stackResponsive() {
|
|
99
|
-
return getResponsiveClasses(this.direction);
|
|
136
|
+
return getResponsiveClasses(this.direction, this.gap);
|
|
100
137
|
}
|
|
101
138
|
}
|
|
102
139
|
};
|
|
@@ -105,8 +142,8 @@ var _sfc_render = function render() {
|
|
|
105
142
|
return _c(_vm.as, { tag: "component", class: [
|
|
106
143
|
"d-stack",
|
|
107
144
|
_vm.defaultDirection,
|
|
108
|
-
_vm.
|
|
109
|
-
_vm.
|
|
145
|
+
_vm.defaultGap,
|
|
146
|
+
_vm.stackResponsive
|
|
110
147
|
] }, [_vm._t("default")], 2);
|
|
111
148
|
};
|
|
112
149
|
var _sfc_staticRenderFns = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n if (directionPropType(direction) === 'string') {\n return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n } else { return null; }\n}\n\nexport function directionPropType (value) {\n return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n return _getValidDirection(direction)\n ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n : null;\n}\n\
|
|
1
|
+
{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n if (directionPropType(direction) === 'string') {\n return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n if (typeof gap === 'string') {\n return gap;\n } else if (typeof gap === 'object') {\n return gap.default;\n } else { return null; }\n}\n\nexport function directionPropType (value) {\n return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n return _getValidDirection(direction)\n ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n if (directionPropType(direction) === 'object') {\n return [\n ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n return direction[breakpoint]\n ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n : null;\n })];\n } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n if (typeof gap === 'object') {\n return [\n ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n return DT_STACK_GAP.includes(gap[breakpoint])\n ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n : null;\n })];\n } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n return [\n ...getResposiveDirectionClasses(direction),\n ...getResposiveGapClasses(gap),\n ];\n}\n\nexport function getDefaultGapClass (gap) {\n const validGap = _getValidGap(gap);\n return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n if (directionPropType(direction) === 'string') {\n return Object.keys(DT_STACK_DIRECTION).includes(direction);\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n } else { return null; }\n}\n\nexport function gapValidator (gap) {\n if (typeof gap === 'string') {\n return DT_STACK_GAP.includes(gap);\n }\n if (typeof gap === 'object') {\n const { default: defaultStyle } = gap;\n\n return DT_STACK_GAP.includes(defaultStyle);\n }\n}\n","<template>\n <component\n :is=\"as\"\n :class=\"[\n 'd-stack',\n defaultDirection,\n defaultGap,\n stackResponsive,\n ]\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n name: 'DtStack',\n\n props: {\n /**\n * Set this prop to the direction to stack the items.\n * You can override the default direction with 'default' key.\n * All the undefined breakpoints will have 'default' value.\n * By default, for the column direction it will have `justify-content: flex-start`\n * and for the row direction `align-items: center`. This can be overriden\n * by utility classes.\n */\n direction: {\n type: [String, Object],\n default: 'column',\n validator: (direction) => directionValidator(direction),\n },\n\n /**\n * Set this prop to render stack as a specific HTML element.\n */\n as: {\n type: String,\n default: 'div',\n },\n\n /**\n * The gap property controls the spacing between items in the stack.\n * The gap can be set to a string, or object with breakpoints.\n * All the undefined breakpoints will have the 'default' value.\n * You can override the default gap with 'default' key.\n * In case of string, it will be applied to all the breakpoints.\n * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n */\n gap: {\n type: [String, Object],\n default: '0',\n validator: (gap) => gapValidator(gap),\n },\n },\n\n data () {\n return {\n DT_STACK_DIRECTION,\n DT_STACK_GAP,\n DT_STACK_RESPONSIVE_BREAKPOINTS,\n };\n },\n\n computed: {\n defaultGap () {\n return getDefaultGapClass(this.gap);\n },\n\n defaultDirection () {\n return getDefaultDirectionClass(this.direction);\n },\n\n stackResponsive () {\n return getResponsiveClasses(this.direction, this.gap);\n },\n },\n};\n</script>\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP"],"mappings":"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"}
|
package/dist/vue2/lib/stack.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DT_STACK_DIRECTION,
|
|
1
|
+
import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from "../chunks/stack_constants-HraCekPm.js";
|
|
2
2
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
3
3
|
function _isDefaultDirection(direction) {
|
|
4
4
|
return direction === DT_STACK_DIRECTION.default;
|
|
@@ -13,25 +13,52 @@ function _getValidDirection(direction) {
|
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
+
function _getValidGap(gap) {
|
|
17
|
+
if (typeof gap === "string") {
|
|
18
|
+
return gap;
|
|
19
|
+
} else if (typeof gap === "object") {
|
|
20
|
+
return gap.default;
|
|
21
|
+
} else {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
16
25
|
function directionPropType(value) {
|
|
17
26
|
return typeof value;
|
|
18
27
|
}
|
|
19
28
|
function getDefaultDirectionClass(direction) {
|
|
20
29
|
return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
|
|
21
30
|
}
|
|
22
|
-
function
|
|
31
|
+
function getResposiveDirectionClasses(direction) {
|
|
23
32
|
if (directionPropType(direction) === "object") {
|
|
24
33
|
return [
|
|
25
34
|
...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
26
|
-
return direction[breakpoint] ? `d-stack--${breakpoint}
|
|
35
|
+
return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
|
|
27
36
|
})
|
|
28
37
|
];
|
|
29
38
|
} else {
|
|
30
|
-
return
|
|
39
|
+
return [];
|
|
31
40
|
}
|
|
32
41
|
}
|
|
33
|
-
function
|
|
34
|
-
|
|
42
|
+
function getResposiveGapClasses(gap) {
|
|
43
|
+
if (typeof gap === "object") {
|
|
44
|
+
return [
|
|
45
|
+
...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
46
|
+
return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
|
|
47
|
+
})
|
|
48
|
+
];
|
|
49
|
+
} else {
|
|
50
|
+
return [];
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function getResponsiveClasses(direction, gap) {
|
|
54
|
+
return [
|
|
55
|
+
...getResposiveDirectionClasses(direction),
|
|
56
|
+
...getResposiveGapClasses(gap)
|
|
57
|
+
];
|
|
58
|
+
}
|
|
59
|
+
function getDefaultGapClass(gap) {
|
|
60
|
+
const validGap = _getValidGap(gap);
|
|
61
|
+
return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
|
|
35
62
|
}
|
|
36
63
|
function directionValidator(direction) {
|
|
37
64
|
if (directionPropType(direction) === "string") {
|
|
@@ -44,7 +71,13 @@ function directionValidator(direction) {
|
|
|
44
71
|
}
|
|
45
72
|
}
|
|
46
73
|
function gapValidator(gap) {
|
|
47
|
-
|
|
74
|
+
if (typeof gap === "string") {
|
|
75
|
+
return DT_STACK_GAP.includes(gap);
|
|
76
|
+
}
|
|
77
|
+
if (typeof gap === "object") {
|
|
78
|
+
const { default: defaultStyle } = gap;
|
|
79
|
+
return DT_STACK_GAP.includes(defaultStyle);
|
|
80
|
+
}
|
|
48
81
|
}
|
|
49
82
|
const _sfc_main = {
|
|
50
83
|
name: "DtStack",
|
|
@@ -70,11 +103,15 @@ const _sfc_main = {
|
|
|
70
103
|
default: "div"
|
|
71
104
|
},
|
|
72
105
|
/**
|
|
73
|
-
*
|
|
74
|
-
*
|
|
106
|
+
* The gap property controls the spacing between items in the stack.
|
|
107
|
+
* The gap can be set to a string, or object with breakpoints.
|
|
108
|
+
* All the undefined breakpoints will have the 'default' value.
|
|
109
|
+
* You can override the default gap with 'default' key.
|
|
110
|
+
* In case of string, it will be applied to all the breakpoints.
|
|
111
|
+
* Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
|
|
75
112
|
*/
|
|
76
113
|
gap: {
|
|
77
|
-
type: String,
|
|
114
|
+
type: [String, Object],
|
|
78
115
|
default: "0",
|
|
79
116
|
validator: (gap) => gapValidator(gap)
|
|
80
117
|
}
|
|
@@ -87,14 +124,14 @@ const _sfc_main = {
|
|
|
87
124
|
};
|
|
88
125
|
},
|
|
89
126
|
computed: {
|
|
90
|
-
|
|
91
|
-
return
|
|
127
|
+
defaultGap() {
|
|
128
|
+
return getDefaultGapClass(this.gap);
|
|
92
129
|
},
|
|
93
130
|
defaultDirection() {
|
|
94
131
|
return getDefaultDirectionClass(this.direction);
|
|
95
132
|
},
|
|
96
133
|
stackResponsive() {
|
|
97
|
-
return getResponsiveClasses(this.direction);
|
|
134
|
+
return getResponsiveClasses(this.direction, this.gap);
|
|
98
135
|
}
|
|
99
136
|
}
|
|
100
137
|
};
|
|
@@ -103,8 +140,8 @@ var _sfc_render = function render() {
|
|
|
103
140
|
return _c(_vm.as, { tag: "component", class: [
|
|
104
141
|
"d-stack",
|
|
105
142
|
_vm.defaultDirection,
|
|
106
|
-
_vm.
|
|
107
|
-
_vm.
|
|
143
|
+
_vm.defaultGap,
|
|
144
|
+
_vm.stackResponsive
|
|
108
145
|
] }, [_vm._t("default")], 2);
|
|
109
146
|
};
|
|
110
147
|
var _sfc_staticRenderFns = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n if (directionPropType(direction) === 'string') {\n return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n } else { return null; }\n}\n\nexport function directionPropType (value) {\n return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n return _getValidDirection(direction)\n ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n : null;\n}\n\
|
|
1
|
+
{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n if (directionPropType(direction) === 'string') {\n return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n if (typeof gap === 'string') {\n return gap;\n } else if (typeof gap === 'object') {\n return gap.default;\n } else { return null; }\n}\n\nexport function directionPropType (value) {\n return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n return _getValidDirection(direction)\n ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n if (directionPropType(direction) === 'object') {\n return [\n ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n return direction[breakpoint]\n ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n : null;\n })];\n } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n if (typeof gap === 'object') {\n return [\n ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n return DT_STACK_GAP.includes(gap[breakpoint])\n ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n : null;\n })];\n } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n return [\n ...getResposiveDirectionClasses(direction),\n ...getResposiveGapClasses(gap),\n ];\n}\n\nexport function getDefaultGapClass (gap) {\n const validGap = _getValidGap(gap);\n return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n if (directionPropType(direction) === 'string') {\n return Object.keys(DT_STACK_DIRECTION).includes(direction);\n } else if (directionPropType(direction) === 'object') {\n const { default: defaultStyle } = direction;\n\n return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n } else { return null; }\n}\n\nexport function gapValidator (gap) {\n if (typeof gap === 'string') {\n return DT_STACK_GAP.includes(gap);\n }\n if (typeof gap === 'object') {\n const { default: defaultStyle } = gap;\n\n return DT_STACK_GAP.includes(defaultStyle);\n }\n}\n","<template>\n <component\n :is=\"as\"\n :class=\"[\n 'd-stack',\n defaultDirection,\n defaultGap,\n stackResponsive,\n ]\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\n name: 'DtStack',\n\n props: {\n /**\n * Set this prop to the direction to stack the items.\n * You can override the default direction with 'default' key.\n * All the undefined breakpoints will have 'default' value.\n * By default, for the column direction it will have `justify-content: flex-start`\n * and for the row direction `align-items: center`. This can be overriden\n * by utility classes.\n */\n direction: {\n type: [String, Object],\n default: 'column',\n validator: (direction) => directionValidator(direction),\n },\n\n /**\n * Set this prop to render stack as a specific HTML element.\n */\n as: {\n type: String,\n default: 'div',\n },\n\n /**\n * The gap property controls the spacing between items in the stack.\n * The gap can be set to a string, or object with breakpoints.\n * All the undefined breakpoints will have the 'default' value.\n * You can override the default gap with 'default' key.\n * In case of string, it will be applied to all the breakpoints.\n * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.\n */\n gap: {\n type: [String, Object],\n default: '0',\n validator: (gap) => gapValidator(gap),\n },\n },\n\n data () {\n return {\n DT_STACK_DIRECTION,\n DT_STACK_GAP,\n DT_STACK_RESPONSIVE_BREAKPOINTS,\n };\n },\n\n computed: {\n defaultGap () {\n return getDefaultGapClass(this.gap);\n },\n\n defaultDirection () {\n return getDefaultDirectionClass(this.direction);\n },\n\n stackResponsive () {\n return getResponsiveClasses(this.direction, this.gap);\n },\n },\n};\n</script>\n"],"names":[],"mappings":"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"}
|