@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
|
@@ -127,8 +127,8 @@ require("@tiptap/suggestion");
|
|
|
127
127
|
require("@tiptap/extension-mention");
|
|
128
128
|
require("@dialpad/dialtone-icons/vue3/hash");
|
|
129
129
|
require("@dialpad/dialtone-icons/vue3/lock");
|
|
130
|
-
require("@dialpad/dialtone-icons/vue3/headphones");
|
|
131
130
|
require("@dialpad/dialtone-icons/vue3/chevron-down");
|
|
131
|
+
require("@dialpad/dialtone-icons/vue3/headphones");
|
|
132
132
|
exports.DEFAULT_VALIDATION_MESSAGE_TYPE = common_constants.DEFAULT_VALIDATION_MESSAGE_TYPE;
|
|
133
133
|
exports.DESCRIPTION_SIZE_TYPES = common_constants.DESCRIPTION_SIZE_TYPES;
|
|
134
134
|
exports.VALIDATION_MESSAGE_TYPES = common_constants.VALIDATION_MESSAGE_TYPES;
|
|
@@ -125,8 +125,8 @@ import "@tiptap/suggestion";
|
|
|
125
125
|
import "@tiptap/extension-mention";
|
|
126
126
|
import "@dialpad/dialtone-icons/vue3/hash";
|
|
127
127
|
import "@dialpad/dialtone-icons/vue3/lock";
|
|
128
|
-
import "@dialpad/dialtone-icons/vue3/headphones";
|
|
129
128
|
import "@dialpad/dialtone-icons/vue3/chevron-down";
|
|
129
|
+
import "@dialpad/dialtone-icons/vue3/headphones";
|
|
130
130
|
export {
|
|
131
131
|
ARROW_KEYS,
|
|
132
132
|
AVATAR_COLORS,
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue3/headphones");
|
|
4
|
-
const DtIconChevronDown = require("@dialpad/dialtone-icons/vue3/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/vue3/chevron-down");
|
|
6
|
+
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue3/headphones");
|
|
7
7
|
const vue = require("vue");
|
|
8
8
|
const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
|
|
9
9
|
const lib_button = require("./button.cjs");
|
|
10
10
|
const lib_badge = require("./badge.cjs");
|
|
11
|
+
require("../common/constants.cjs");
|
|
11
12
|
require("../chunks/index-lu2o2f4r.js");
|
|
12
13
|
require("@dialpad/dialtone-emojis");
|
|
13
14
|
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
14
15
|
require("@dialpad/dialtone-icons/icons.json");
|
|
15
16
|
require("./emoji.cjs");
|
|
16
17
|
require("./skeleton.cjs");
|
|
17
|
-
require("../common/constants.cjs");
|
|
18
18
|
require("../chunks/link_constants-x8NwdqmA.js");
|
|
19
19
|
require("./icon.cjs");
|
|
20
20
|
require("@dialpad/dialtone-icons/vue3");
|
|
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
|
*/
|
|
@@ -110,7 +117,8 @@ const _sfc_main = {
|
|
|
110
117
|
watch: {
|
|
111
118
|
$props: {
|
|
112
119
|
deep: true,
|
|
113
|
-
handler() {
|
|
120
|
+
async handler() {
|
|
121
|
+
await this.$nextTick();
|
|
114
122
|
this.adjustLabelWidth();
|
|
115
123
|
}
|
|
116
124
|
}
|
|
@@ -136,7 +144,10 @@ const _sfc_main = {
|
|
|
136
144
|
};
|
|
137
145
|
const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
|
|
138
146
|
const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
|
|
139
|
-
const _hoisted_3 = {
|
|
147
|
+
const _hoisted_3 = {
|
|
148
|
+
key: 0,
|
|
149
|
+
class: "dt-leftbar-row__omega"
|
|
150
|
+
};
|
|
140
151
|
const _hoisted_4 = { class: "dt-leftbar-row__action-container" };
|
|
141
152
|
const _hoisted_5 = { class: "dt-leftbar-row__bottom" };
|
|
142
153
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
@@ -186,7 +197,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
186
197
|
})
|
|
187
198
|
], 4)
|
|
188
199
|
], 16, _hoisted_1),
|
|
189
|
-
vue.
|
|
200
|
+
!$props.hideActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
|
|
190
201
|
vue.renderSlot(_ctx.$slots, "right", {}, void 0, true),
|
|
191
202
|
vue.createElementVNode("div", _hoisted_4, [
|
|
192
203
|
$options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
|
|
@@ -216,13 +227,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
216
227
|
_: 1
|
|
217
228
|
}, 8, ["aria-label"])
|
|
218
229
|
])
|
|
219
|
-
])
|
|
230
|
+
])) : vue.createCommentVNode("", true)
|
|
220
231
|
], 2),
|
|
221
232
|
vue.createElementVNode("div", _hoisted_5, [
|
|
222
233
|
vue.renderSlot(_ctx.$slots, "timer", {}, void 0, true)
|
|
223
234
|
])
|
|
224
235
|
], 2);
|
|
225
236
|
}
|
|
226
|
-
const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
237
|
+
const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
|
|
227
238
|
exports.DtRecipeContactCentersRow = contact_centers_row;
|
|
228
239
|
//# sourceMappingURL=contact-centers-row.cjs.map
|
|
@@ -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=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\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=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\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-if=\"!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 { extractVueListeners, 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/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/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 contactRowListeners () {\n return extractVueListeners(this.$attrs);\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 beforeUnmount: 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","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import DtIconHeadphones from "@dialpad/dialtone-icons/vue3/headphones";
|
|
2
|
-
import DtIconChevronDown from "@dialpad/dialtone-icons/vue3/chevron-down";
|
|
3
|
-
import { DtEmojiTextWrapper as _sfc_main$1 } from "./emoji-text-wrapper.js";
|
|
4
1
|
import { safeConcatStrings, extractVueListeners } from "../common/utils.js";
|
|
2
|
+
import { DtEmojiTextWrapper as _sfc_main$1 } from "./emoji-text-wrapper.js";
|
|
3
|
+
import DtIconChevronDown from "@dialpad/dialtone-icons/vue3/chevron-down";
|
|
4
|
+
import DtIconHeadphones from "@dialpad/dialtone-icons/vue3/headphones";
|
|
5
5
|
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toHandlers, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode, withModifiers } from "vue";
|
|
6
6
|
import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
|
|
7
7
|
import { DtButton } from "./button.js";
|
|
8
8
|
import { DtBadge } from "./badge.js";
|
|
9
|
+
import "../common/constants.js";
|
|
9
10
|
import "../chunks/index-GVD15GIB.js";
|
|
10
11
|
import "@dialpad/dialtone-emojis";
|
|
11
12
|
import "../chunks/icon_constants-Dy4MEUJL.js";
|
|
12
13
|
import "@dialpad/dialtone-icons/icons.json";
|
|
13
14
|
import "./emoji.js";
|
|
14
15
|
import "./skeleton.js";
|
|
15
|
-
import "../common/constants.js";
|
|
16
16
|
import "../chunks/link_constants-AfTWrr-n.js";
|
|
17
17
|
import "./icon.js";
|
|
18
18
|
import "@dialpad/dialtone-icons/vue3";
|
|
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
|
*/
|
|
@@ -108,7 +115,8 @@ const _sfc_main = {
|
|
|
108
115
|
watch: {
|
|
109
116
|
$props: {
|
|
110
117
|
deep: true,
|
|
111
|
-
handler() {
|
|
118
|
+
async handler() {
|
|
119
|
+
await this.$nextTick();
|
|
112
120
|
this.adjustLabelWidth();
|
|
113
121
|
}
|
|
114
122
|
}
|
|
@@ -134,7 +142,10 @@ const _sfc_main = {
|
|
|
134
142
|
};
|
|
135
143
|
const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
|
|
136
144
|
const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
|
|
137
|
-
const _hoisted_3 = {
|
|
145
|
+
const _hoisted_3 = {
|
|
146
|
+
key: 0,
|
|
147
|
+
class: "dt-leftbar-row__omega"
|
|
148
|
+
};
|
|
138
149
|
const _hoisted_4 = { class: "dt-leftbar-row__action-container" };
|
|
139
150
|
const _hoisted_5 = { class: "dt-leftbar-row__bottom" };
|
|
140
151
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
@@ -184,7 +195,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
184
195
|
})
|
|
185
196
|
], 4)
|
|
186
197
|
], 16, _hoisted_1),
|
|
187
|
-
|
|
198
|
+
!$props.hideActions ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
188
199
|
renderSlot(_ctx.$slots, "right", {}, void 0, true),
|
|
189
200
|
createElementVNode("div", _hoisted_4, [
|
|
190
201
|
$options.showUnreadCount ? (openBlock(), createBlock(_component_dt_badge, {
|
|
@@ -214,14 +225,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
214
225
|
_: 1
|
|
215
226
|
}, 8, ["aria-label"])
|
|
216
227
|
])
|
|
217
|
-
])
|
|
228
|
+
])) : createCommentVNode("", true)
|
|
218
229
|
], 2),
|
|
219
230
|
createElementVNode("div", _hoisted_5, [
|
|
220
231
|
renderSlot(_ctx.$slots, "timer", {}, void 0, true)
|
|
221
232
|
])
|
|
222
233
|
], 2);
|
|
223
234
|
}
|
|
224
|
-
const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
235
|
+
const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
|
|
225
236
|
export {
|
|
226
237
|
contact_centers_row as DtRecipeContactCentersRow
|
|
227
238
|
};
|
|
@@ -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=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\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=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\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-if=\"!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 { extractVueListeners, 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/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/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 contactRowListeners () {\n return extractVueListeners(this.$attrs);\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 beforeUnmount: 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":["DtEmojiTextWrapper","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;;;AAqFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA,oBAAAA;AAAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKA,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,kCAAmC;AACjC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACE,gCAAgC,KAAK;AAAA,UACrC,4BAA4B,KAAK;AAAA,QAClC;AAAA;IAEJ;AAAA,IAED,eAAgB;AACd,aAAO,KAAK,YACR,KAAK,YACL,kBAAkB,CAAC,KAAK,aAAa,KAAK,kBAAkB,CAAC;AAAA,IAClE;AAAA,IAED,sBAAuB;AACrB,aAAO,oBAAoB,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,kBAAmB;AACjB,aAAO,KAAK,cAAc;AAAA,IAC3B;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM,UAAW;AACf,cAAM,KAAK;AACX,aAAK,iBAAgB;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,iBAAiB,IAAI,eAAe,KAAK,gBAAgB;AAC9D,SAAK,eAAe,QAAQ,KAAK,GAAG;AACpC,SAAK,iBAAgB;AAAA,EACtB;AAAA,EAED,eAAe,WAAY;AACzB,SAAK,eAAe;EACrB;AAAA,EAED,SAAS;AAAA,IACP,mBAAoB;;AAClB,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,gCAAxB,mBAAqD,gBAAe;AACvF,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,8BAAxB,mBAAmD,gBAAe;AACrF,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,8BAAxB,mBAAmD,gBAAe;AACrF,YAAM,WAAW;AACjB,WAAK,aAAa,cAAc,aAAa,aAAa,YAAY;AAAA,IACvE;AAAA,EACF;AACH;;AA/Ma,MAAA,aAAA,EAAA,OAAM,wBAAuB;;;EAqBlC,OAAM;;AAGD,MAAA,aAAA,EAAA,OAAM,mCAAkC;AA0B5C,MAAA,aAAA,EAAA,OAAM,yBAAwB;;;;;;;sBAtErCC,mBAyEM,OAAA;AAAA,IAxEH,OAAKC,eAAA;AAAA;MAAsF,EAAA,uCAAA,KAAA,OAAO,MAAK;AAAA;;IAKxGC,mBA+DM,OAAA;AAAA,MA9DH,sBAAO,SAA+B,+BAAA;AAAA,MACvC,WAAQ;AAAA;MAERA,mBA4BI,KA5BJC,WA4BI;AAAA,QA3BF,OAAM;AAAA,QACL,WAAS,KAAM,OAAA,SAAA,KAAA;AAAA,QACf,cAAY,SAAY;AAAA,QACxB,OAAO,OAAW;AAAA,QAClB,MAAM,KAAM,OAAC,QAAI;AAAA,SACV,KAAM,QACdC,WAA0B,SAAD,qBAAA,IAAA,GAAA;AAAA,QACxB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;QAE7BF,mBAKM,OALN,YAKM;AAAA,UAJJG,YAGE,+BAAA;AAAA,YAFA,MAAK;AAAA,YACL,WAAQ;AAAA;;QAGZH,mBAWM,OAAA;AAAA,UAVJ,OAAM;AAAA,UACL,qCAAsB,MAAU,UAAA,EAAA;AAAA;UAEjCG,YAMwB,kCAAA;AAAA,YALtB,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA;6BAEL,MAAiB;AAAA,8CAAd,OAAW,WAAA,GAAA,CAAA;AAAA;;;;;OAKX,OAAW,eADpBC,aAAAN,mBA6BM,OA7BN,YA6BM;AAAA,QAzBJO,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QACrBL,mBAuBM,OAvBN,YAuBM;AAAA,UArBI,SAAe,gCADvBM,YAQW,qBAAA;AAAA;YANT,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA;6BAEL,MAAiB;AAAA,8CAAd,OAAW,WAAA,GAAA,CAAA;AAAA;;;UAEhBH,YAYY,sBAAA;AAAA,YAXV,OAAM;AAAA,YACN,WAAQ;AAAA,YACP,cAAY,OAAmB;AAAA,YAChC,YAAW;AAAA,YACX,MAAK;AAAA,YACL,QAAA;AAAA,YACC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAI,cAAA,YAAO,KAAK,MAAA,cAAe,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA;YAE5B,cACT,MAAmC;AAAA,cAAnCJ,YAAmC,iCAAA,EAAb,MAAK,MAAK,CAAA;AAAA;;;;;;IAM1CH,mBAEM,OAFN,YAEM;AAAA,MADJK,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;"}
|
package/dist/vue3/lib/stack.cjs
CHANGED
|
@@ -16,25 +16,52 @@ function _getValidDirection(direction) {
|
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
+
function _getValidGap(gap) {
|
|
20
|
+
if (typeof gap === "string") {
|
|
21
|
+
return gap;
|
|
22
|
+
} else if (typeof gap === "object") {
|
|
23
|
+
return gap.default;
|
|
24
|
+
} else {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
19
28
|
function directionPropType(value) {
|
|
20
29
|
return typeof value;
|
|
21
30
|
}
|
|
22
31
|
function getDefaultDirectionClass(direction) {
|
|
23
32
|
return _getValidDirection(direction) ? `d-stack--${stack_constants.DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
|
|
24
33
|
}
|
|
25
|
-
function
|
|
34
|
+
function getResposiveDirectionClasses(direction) {
|
|
26
35
|
if (directionPropType(direction) === "object") {
|
|
27
36
|
return [
|
|
28
37
|
...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
29
|
-
return direction[breakpoint] ? `d-stack--${breakpoint}
|
|
38
|
+
return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
|
|
30
39
|
})
|
|
31
40
|
];
|
|
32
41
|
} else {
|
|
33
|
-
return
|
|
42
|
+
return [];
|
|
34
43
|
}
|
|
35
44
|
}
|
|
36
|
-
function
|
|
37
|
-
|
|
45
|
+
function getResposiveGapClasses(gap) {
|
|
46
|
+
if (typeof gap === "object") {
|
|
47
|
+
return [
|
|
48
|
+
...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
49
|
+
return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
|
|
50
|
+
})
|
|
51
|
+
];
|
|
52
|
+
} else {
|
|
53
|
+
return [];
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function getResponsiveClasses(direction, gap) {
|
|
57
|
+
return [
|
|
58
|
+
...getResposiveDirectionClasses(direction),
|
|
59
|
+
...getResposiveGapClasses(gap)
|
|
60
|
+
];
|
|
61
|
+
}
|
|
62
|
+
function getDefaultGapClass(gap) {
|
|
63
|
+
const validGap = _getValidGap(gap);
|
|
64
|
+
return stack_constants.DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
|
|
38
65
|
}
|
|
39
66
|
function directionValidator(direction) {
|
|
40
67
|
if (directionPropType(direction) === "string") {
|
|
@@ -47,7 +74,13 @@ function directionValidator(direction) {
|
|
|
47
74
|
}
|
|
48
75
|
}
|
|
49
76
|
function gapValidator(gap) {
|
|
50
|
-
|
|
77
|
+
if (typeof gap === "string") {
|
|
78
|
+
return stack_constants.DT_STACK_GAP.includes(gap);
|
|
79
|
+
}
|
|
80
|
+
if (typeof gap === "object") {
|
|
81
|
+
const { default: defaultStyle } = gap;
|
|
82
|
+
return stack_constants.DT_STACK_GAP.includes(defaultStyle);
|
|
83
|
+
}
|
|
51
84
|
}
|
|
52
85
|
const _sfc_main = {
|
|
53
86
|
name: "DtStack",
|
|
@@ -73,11 +106,15 @@ const _sfc_main = {
|
|
|
73
106
|
default: "div"
|
|
74
107
|
},
|
|
75
108
|
/**
|
|
76
|
-
*
|
|
77
|
-
*
|
|
109
|
+
* The gap property controls the spacing between items in the stack.
|
|
110
|
+
* The gap can be set to a string, or object with breakpoints.
|
|
111
|
+
* All the undefined breakpoints will have the 'default' value.
|
|
112
|
+
* You can override the default gap with 'default' key.
|
|
113
|
+
* In case of string, it will be applied to all the breakpoints.
|
|
114
|
+
* Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
|
|
78
115
|
*/
|
|
79
116
|
gap: {
|
|
80
|
-
type: String,
|
|
117
|
+
type: [String, Object],
|
|
81
118
|
default: "0",
|
|
82
119
|
validator: (gap) => gapValidator(gap)
|
|
83
120
|
}
|
|
@@ -90,14 +127,14 @@ const _sfc_main = {
|
|
|
90
127
|
};
|
|
91
128
|
},
|
|
92
129
|
computed: {
|
|
93
|
-
|
|
94
|
-
return
|
|
130
|
+
defaultGap() {
|
|
131
|
+
return getDefaultGapClass(this.gap);
|
|
95
132
|
},
|
|
96
133
|
defaultDirection() {
|
|
97
134
|
return getDefaultDirectionClass(this.direction);
|
|
98
135
|
},
|
|
99
136
|
stackResponsive() {
|
|
100
|
-
return getResponsiveClasses(this.direction);
|
|
137
|
+
return getResponsiveClasses(this.direction, this.gap);
|
|
101
138
|
}
|
|
102
139
|
}
|
|
103
140
|
};
|
|
@@ -106,8 +143,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
106
143
|
class: vue.normalizeClass([
|
|
107
144
|
"d-stack",
|
|
108
145
|
$options.defaultDirection,
|
|
109
|
-
$options.
|
|
110
|
-
$options.
|
|
146
|
+
$options.defaultGap,
|
|
147
|
+
$options.stackResponsive
|
|
111
148
|
])
|
|
112
149
|
}, {
|
|
113
150
|
default: vue.withCtx(() => [
|
|
@@ -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","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}
|
package/dist/vue3/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 { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
|
|
3
3
|
import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
|
|
4
4
|
function _isDefaultDirection(direction) {
|
|
@@ -14,25 +14,52 @@ function _getValidDirection(direction) {
|
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
function _getValidGap(gap) {
|
|
18
|
+
if (typeof gap === "string") {
|
|
19
|
+
return gap;
|
|
20
|
+
} else if (typeof gap === "object") {
|
|
21
|
+
return gap.default;
|
|
22
|
+
} else {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
17
26
|
function directionPropType(value) {
|
|
18
27
|
return typeof value;
|
|
19
28
|
}
|
|
20
29
|
function getDefaultDirectionClass(direction) {
|
|
21
30
|
return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
|
|
22
31
|
}
|
|
23
|
-
function
|
|
32
|
+
function getResposiveDirectionClasses(direction) {
|
|
24
33
|
if (directionPropType(direction) === "object") {
|
|
25
34
|
return [
|
|
26
35
|
...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
27
|
-
return direction[breakpoint] ? `d-stack--${breakpoint}
|
|
36
|
+
return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
|
|
28
37
|
})
|
|
29
38
|
];
|
|
30
39
|
} else {
|
|
31
|
-
return
|
|
40
|
+
return [];
|
|
32
41
|
}
|
|
33
42
|
}
|
|
34
|
-
function
|
|
35
|
-
|
|
43
|
+
function getResposiveGapClasses(gap) {
|
|
44
|
+
if (typeof gap === "object") {
|
|
45
|
+
return [
|
|
46
|
+
...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
|
|
47
|
+
return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
|
|
48
|
+
})
|
|
49
|
+
];
|
|
50
|
+
} else {
|
|
51
|
+
return [];
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
function getResponsiveClasses(direction, gap) {
|
|
55
|
+
return [
|
|
56
|
+
...getResposiveDirectionClasses(direction),
|
|
57
|
+
...getResposiveGapClasses(gap)
|
|
58
|
+
];
|
|
59
|
+
}
|
|
60
|
+
function getDefaultGapClass(gap) {
|
|
61
|
+
const validGap = _getValidGap(gap);
|
|
62
|
+
return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
|
|
36
63
|
}
|
|
37
64
|
function directionValidator(direction) {
|
|
38
65
|
if (directionPropType(direction) === "string") {
|
|
@@ -45,7 +72,13 @@ function directionValidator(direction) {
|
|
|
45
72
|
}
|
|
46
73
|
}
|
|
47
74
|
function gapValidator(gap) {
|
|
48
|
-
|
|
75
|
+
if (typeof gap === "string") {
|
|
76
|
+
return DT_STACK_GAP.includes(gap);
|
|
77
|
+
}
|
|
78
|
+
if (typeof gap === "object") {
|
|
79
|
+
const { default: defaultStyle } = gap;
|
|
80
|
+
return DT_STACK_GAP.includes(defaultStyle);
|
|
81
|
+
}
|
|
49
82
|
}
|
|
50
83
|
const _sfc_main = {
|
|
51
84
|
name: "DtStack",
|
|
@@ -71,11 +104,15 @@ const _sfc_main = {
|
|
|
71
104
|
default: "div"
|
|
72
105
|
},
|
|
73
106
|
/**
|
|
74
|
-
*
|
|
75
|
-
*
|
|
107
|
+
* The gap property controls the spacing between items in the stack.
|
|
108
|
+
* The gap can be set to a string, or object with breakpoints.
|
|
109
|
+
* All the undefined breakpoints will have the 'default' value.
|
|
110
|
+
* You can override the default gap with 'default' key.
|
|
111
|
+
* In case of string, it will be applied to all the breakpoints.
|
|
112
|
+
* Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
|
|
76
113
|
*/
|
|
77
114
|
gap: {
|
|
78
|
-
type: String,
|
|
115
|
+
type: [String, Object],
|
|
79
116
|
default: "0",
|
|
80
117
|
validator: (gap) => gapValidator(gap)
|
|
81
118
|
}
|
|
@@ -88,14 +125,14 @@ const _sfc_main = {
|
|
|
88
125
|
};
|
|
89
126
|
},
|
|
90
127
|
computed: {
|
|
91
|
-
|
|
92
|
-
return
|
|
128
|
+
defaultGap() {
|
|
129
|
+
return getDefaultGapClass(this.gap);
|
|
93
130
|
},
|
|
94
131
|
defaultDirection() {
|
|
95
132
|
return getDefaultDirectionClass(this.direction);
|
|
96
133
|
},
|
|
97
134
|
stackResponsive() {
|
|
98
|
-
return getResponsiveClasses(this.direction);
|
|
135
|
+
return getResponsiveClasses(this.direction, this.gap);
|
|
99
136
|
}
|
|
100
137
|
}
|
|
101
138
|
};
|
|
@@ -104,8 +141,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
104
141
|
class: normalizeClass([
|
|
105
142
|
"d-stack",
|
|
106
143
|
$options.defaultDirection,
|
|
107
|
-
$options.
|
|
108
|
-
$options.
|
|
144
|
+
$options.defaultGap,
|
|
145
|
+
$options.stackResponsive
|
|
109
146
|
])
|
|
110
147
|
}, {
|
|
111
148
|
default: withCtx(() => [
|
|
@@ -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":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}
|