@dialpad/dialtone-vue 3.129.0 → 3.129.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/empty-state.cjs +72 -27
- package/dist/lib/empty-state.cjs.map +1 -1
- package/dist/lib/empty-state.js +73 -28
- package/dist/lib/empty-state.js.map +1 -1
- package/dist/types/components/empty_state/empty_state.vue.d.ts.map +1 -1
- package/dist/types/components/root_layout/root_layout.vue.d.ts +1 -1
- package/package.json +2 -2
package/dist/lib/empty-state.cjs
CHANGED
|
@@ -4,18 +4,27 @@ const vue = require("vue");
|
|
|
4
4
|
const common_utils = require("../common/utils.cjs");
|
|
5
5
|
const lib_illustration = require("./illustration.cjs");
|
|
6
6
|
const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
|
|
7
|
+
const lib_stack = require("./stack.cjs");
|
|
7
8
|
const lib_icon = require("./icon.cjs");
|
|
8
9
|
require("../common/constants.cjs");
|
|
9
10
|
require("@dialpad/dialtone-icons/vue3");
|
|
10
11
|
require("@dialpad/dialtone-icons/illustrations.json");
|
|
11
12
|
require("@dialpad/dialtone-icons/icons.json");
|
|
13
|
+
require("../chunks/stack_constants-SMzMWnAQ.js");
|
|
12
14
|
require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
|
|
13
15
|
const EMPTY_STATE_SIZE_MODIFIERS = {
|
|
14
16
|
sm: "d-empty-state--size-sm",
|
|
15
17
|
md: "d-empty-state--size-md",
|
|
16
18
|
lg: "d-empty-state--size-lg"
|
|
17
19
|
};
|
|
18
|
-
const _hoisted_1 = {
|
|
20
|
+
const _hoisted_1 = {
|
|
21
|
+
key: 0,
|
|
22
|
+
class: "d-empty-state__icon"
|
|
23
|
+
};
|
|
24
|
+
const _hoisted_2 = {
|
|
25
|
+
key: 1,
|
|
26
|
+
class: "d-empty-state__illustration"
|
|
27
|
+
};
|
|
19
28
|
const _sfc_main = {
|
|
20
29
|
__name: "empty_state",
|
|
21
30
|
props: {
|
|
@@ -88,16 +97,40 @@ const _sfc_main = {
|
|
|
88
97
|
});
|
|
89
98
|
const sizeClass = vue.computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
|
|
90
99
|
const emptyStateClasses = vue.computed(() => ["d-empty-state", sizeClass.value]);
|
|
91
|
-
const
|
|
100
|
+
const contentClass = vue.computed(() => {
|
|
101
|
+
switch (props.size) {
|
|
102
|
+
case "sm":
|
|
103
|
+
return "d-empty-state__content--sm";
|
|
104
|
+
case "md":
|
|
105
|
+
return "d-empty-state__content--md";
|
|
106
|
+
case "lg":
|
|
107
|
+
return "d-empty-state__content--lg";
|
|
108
|
+
default:
|
|
109
|
+
return "d-empty-state__content--lg";
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
const headlineClass = vue.computed(() => {
|
|
113
|
+
switch (props.size) {
|
|
114
|
+
case "sm":
|
|
115
|
+
return "d-headline--md";
|
|
116
|
+
case "md":
|
|
117
|
+
return "d-headline--xl";
|
|
118
|
+
case "lg":
|
|
119
|
+
return "d-headline--xxl";
|
|
120
|
+
default:
|
|
121
|
+
return "d-headline--xxl";
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
const bodyClass = vue.computed(() => {
|
|
92
125
|
switch (props.size) {
|
|
93
126
|
case "sm":
|
|
94
|
-
return "d-
|
|
127
|
+
return "d-body--sm";
|
|
95
128
|
case "md":
|
|
96
|
-
return "d-
|
|
129
|
+
return "d-body--sm";
|
|
97
130
|
case "lg":
|
|
98
|
-
return "d-
|
|
131
|
+
return "d-body--md";
|
|
99
132
|
default:
|
|
100
|
-
return "d-
|
|
133
|
+
return "d-body--md";
|
|
101
134
|
}
|
|
102
135
|
});
|
|
103
136
|
vue.onMounted(() => {
|
|
@@ -106,28 +139,40 @@ const _sfc_main = {
|
|
|
106
139
|
}
|
|
107
140
|
});
|
|
108
141
|
return (_ctx, _cache) => {
|
|
109
|
-
return vue.openBlock(), vue.
|
|
142
|
+
return vue.openBlock(), vue.createBlock(vue.unref(lib_stack.DtStack), {
|
|
110
143
|
class: vue.normalizeClass(emptyStateClasses.value)
|
|
111
|
-
},
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
144
|
+
}, {
|
|
145
|
+
default: vue.withCtx(() => [
|
|
146
|
+
__props.showIllustration ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
|
|
147
|
+
showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
|
|
148
|
+
vue.createVNode(vue.unref(lib_icon.DtIcon), {
|
|
149
|
+
name: __props.iconName,
|
|
150
|
+
size: "800"
|
|
151
|
+
}, null, 8, ["name"])
|
|
152
|
+
])) : vue.createCommentVNode("", true),
|
|
153
|
+
showIllustrationComponent.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
|
|
154
|
+
vue.createVNode(vue.unref(lib_illustration.DtIllustration), { name: __props.illustrationName }, null, 8, ["name"])
|
|
155
|
+
])) : vue.createCommentVNode("", true)
|
|
156
|
+
], 64)) : vue.createCommentVNode("", true),
|
|
157
|
+
vue.createVNode(vue.unref(lib_stack.DtStack), {
|
|
158
|
+
gap: "450",
|
|
159
|
+
class: vue.normalizeClass(["d-empty-state__content", contentClass.value])
|
|
160
|
+
}, {
|
|
161
|
+
default: vue.withCtx(() => [
|
|
162
|
+
vue.createElementVNode("div", {
|
|
163
|
+
class: vue.normalizeClass(["d-empty-state__header-text", headlineClass.value])
|
|
164
|
+
}, vue.toDisplayString(__props.headerText), 3),
|
|
165
|
+
__props.bodyText ? (vue.openBlock(), vue.createElementBlock("p", {
|
|
166
|
+
key: 0,
|
|
167
|
+
class: vue.normalizeClass(["d-empty-state__body-text", bodyClass.value])
|
|
168
|
+
}, vue.toDisplayString(__props.bodyText), 3)) : vue.createCommentVNode("", true)
|
|
169
|
+
]),
|
|
170
|
+
_: 1
|
|
171
|
+
}, 8, ["class"]),
|
|
172
|
+
vue.renderSlot(_ctx.$slots, "body")
|
|
173
|
+
]),
|
|
174
|
+
_: 3
|
|
175
|
+
}, 8, ["class"]);
|
|
131
176
|
};
|
|
132
177
|
}
|
|
133
178
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty-state.cjs","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n <
|
|
1
|
+
{"version":3,"file":"empty-state.cjs","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <template v-if=\"showIllustration\">\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n <dt-icon\n :name=\"iconName\"\n size=\"800\"\n />\n </span>\n\n <span\n v-if=\"showIllustrationComponent\"\n class=\"d-empty-state__illustration\"\n >\n <dt-illustration\n :name=\"illustrationName\"\n />\n </span>\n </template>\n\n <dt-stack\n gap=\"450\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text', headlineClass]\">\n {{ headerText }}\n </div>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text', bodyClass]\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /**\n * The empty state size.\n * @values 'sm', 'md', 'lg'\n */\n size: {\n type: String,\n default: 'lg',\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * The illustration name in kebab-case\n * This only displays when size is 'lg' or 'md'\n * This has priority over icon.\n * @type {String}\n */\n illustrationName: {\n type: String,\n default: null,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n\n /**\n * The icon name in kebab-case\n * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n * Will always be shown in 'sm' size.\n * @type {String}\n */\n iconName: {\n type: String,\n default: null,\n validator: (name) => ICON_NAMES.includes(name),\n },\n\n /**\n * Header text\n * @type {String}\n */\n headerText: {\n type: String,\n required: true,\n },\n\n /**\n * Body text\n * @type {String}\n */\n bodyText: {\n type: String,\n default: null,\n },\n\n /**\n * Whether to show the illustration\n * @type {Boolean}\n */\n showIllustration: {\n type: Boolean,\n default: true,\n },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n if (!props.iconName) {\n return false;\n }\n return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-empty-state__content--sm';\n case 'md':\n return 'd-empty-state__content--md';\n case 'lg':\n return 'd-empty-state__content--lg';\n default:\n return 'd-empty-state__content--lg';\n }\n});\n\nconst headlineClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-headline--md';\n case 'md':\n return 'd-headline--xl';\n case 'lg':\n return 'd-headline--xxl';\n default:\n return 'd-headline--xxl';\n }\n});\n\nconst bodyClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-body--sm';\n case 'md':\n return 'd-body--sm';\n case 'lg':\n return 'd-body--md';\n default:\n return 'd-body--md';\n }\n});\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"names":["useSlots","computed","onMounted","hasSlotContent"],"mappings":";;;;;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAYC,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4BA,IAAQ,SAAC,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAWA,IAAQ,SAAC,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBA,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACC,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/lib/empty-state.js
CHANGED
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
import { useSlots, computed, onMounted, openBlock,
|
|
1
|
+
import { useSlots, computed, onMounted, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
|
|
2
2
|
import { hasSlotContent } from "../common/utils.js";
|
|
3
3
|
import { ILLUSTRATION_NAMES, DtIllustration as _sfc_main$1 } from "./illustration.js";
|
|
4
4
|
import { ICON_NAMES } from "../chunks/icon_constants-Dy4MEUJL.js";
|
|
5
|
+
import { DtStack } from "./stack.js";
|
|
5
6
|
import { DtIcon } from "./icon.js";
|
|
6
7
|
import "../common/constants.js";
|
|
7
8
|
import "@dialpad/dialtone-icons/vue3";
|
|
8
9
|
import "@dialpad/dialtone-icons/illustrations.json";
|
|
9
10
|
import "@dialpad/dialtone-icons/icons.json";
|
|
11
|
+
import "../chunks/stack_constants-HraCekPm.js";
|
|
10
12
|
import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
|
|
11
13
|
const EMPTY_STATE_SIZE_MODIFIERS = {
|
|
12
14
|
sm: "d-empty-state--size-sm",
|
|
13
15
|
md: "d-empty-state--size-md",
|
|
14
16
|
lg: "d-empty-state--size-lg"
|
|
15
17
|
};
|
|
16
|
-
const _hoisted_1 = {
|
|
18
|
+
const _hoisted_1 = {
|
|
19
|
+
key: 0,
|
|
20
|
+
class: "d-empty-state__icon"
|
|
21
|
+
};
|
|
22
|
+
const _hoisted_2 = {
|
|
23
|
+
key: 1,
|
|
24
|
+
class: "d-empty-state__illustration"
|
|
25
|
+
};
|
|
17
26
|
const _sfc_main = {
|
|
18
27
|
__name: "empty_state",
|
|
19
28
|
props: {
|
|
@@ -86,16 +95,40 @@ const _sfc_main = {
|
|
|
86
95
|
});
|
|
87
96
|
const sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
|
|
88
97
|
const emptyStateClasses = computed(() => ["d-empty-state", sizeClass.value]);
|
|
89
|
-
const
|
|
98
|
+
const contentClass = computed(() => {
|
|
99
|
+
switch (props.size) {
|
|
100
|
+
case "sm":
|
|
101
|
+
return "d-empty-state__content--sm";
|
|
102
|
+
case "md":
|
|
103
|
+
return "d-empty-state__content--md";
|
|
104
|
+
case "lg":
|
|
105
|
+
return "d-empty-state__content--lg";
|
|
106
|
+
default:
|
|
107
|
+
return "d-empty-state__content--lg";
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
const headlineClass = computed(() => {
|
|
111
|
+
switch (props.size) {
|
|
112
|
+
case "sm":
|
|
113
|
+
return "d-headline--md";
|
|
114
|
+
case "md":
|
|
115
|
+
return "d-headline--xl";
|
|
116
|
+
case "lg":
|
|
117
|
+
return "d-headline--xxl";
|
|
118
|
+
default:
|
|
119
|
+
return "d-headline--xxl";
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
const bodyClass = computed(() => {
|
|
90
123
|
switch (props.size) {
|
|
91
124
|
case "sm":
|
|
92
|
-
return "d-
|
|
125
|
+
return "d-body--sm";
|
|
93
126
|
case "md":
|
|
94
|
-
return "d-
|
|
127
|
+
return "d-body--sm";
|
|
95
128
|
case "lg":
|
|
96
|
-
return "d-
|
|
129
|
+
return "d-body--md";
|
|
97
130
|
default:
|
|
98
|
-
return "d-
|
|
131
|
+
return "d-body--md";
|
|
99
132
|
}
|
|
100
133
|
});
|
|
101
134
|
onMounted(() => {
|
|
@@ -104,28 +137,40 @@ const _sfc_main = {
|
|
|
104
137
|
}
|
|
105
138
|
});
|
|
106
139
|
return (_ctx, _cache) => {
|
|
107
|
-
return openBlock(),
|
|
140
|
+
return openBlock(), createBlock(unref(DtStack), {
|
|
108
141
|
class: normalizeClass(emptyStateClasses.value)
|
|
109
|
-
},
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
142
|
+
}, {
|
|
143
|
+
default: withCtx(() => [
|
|
144
|
+
__props.showIllustration ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
145
|
+
showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
|
|
146
|
+
createVNode(unref(DtIcon), {
|
|
147
|
+
name: __props.iconName,
|
|
148
|
+
size: "800"
|
|
149
|
+
}, null, 8, ["name"])
|
|
150
|
+
])) : createCommentVNode("", true),
|
|
151
|
+
showIllustrationComponent.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
|
|
152
|
+
createVNode(unref(_sfc_main$1), { name: __props.illustrationName }, null, 8, ["name"])
|
|
153
|
+
])) : createCommentVNode("", true)
|
|
154
|
+
], 64)) : createCommentVNode("", true),
|
|
155
|
+
createVNode(unref(DtStack), {
|
|
156
|
+
gap: "450",
|
|
157
|
+
class: normalizeClass(["d-empty-state__content", contentClass.value])
|
|
158
|
+
}, {
|
|
159
|
+
default: withCtx(() => [
|
|
160
|
+
createElementVNode("div", {
|
|
161
|
+
class: normalizeClass(["d-empty-state__header-text", headlineClass.value])
|
|
162
|
+
}, toDisplayString(__props.headerText), 3),
|
|
163
|
+
__props.bodyText ? (openBlock(), createElementBlock("p", {
|
|
164
|
+
key: 0,
|
|
165
|
+
class: normalizeClass(["d-empty-state__body-text", bodyClass.value])
|
|
166
|
+
}, toDisplayString(__props.bodyText), 3)) : createCommentVNode("", true)
|
|
167
|
+
]),
|
|
168
|
+
_: 1
|
|
169
|
+
}, 8, ["class"]),
|
|
170
|
+
renderSlot(_ctx.$slots, "body")
|
|
171
|
+
]),
|
|
172
|
+
_: 3
|
|
173
|
+
}, 8, ["class"]);
|
|
129
174
|
};
|
|
130
175
|
}
|
|
131
176
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty-state.js","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n <
|
|
1
|
+
{"version":3,"file":"empty-state.js","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <template v-if=\"showIllustration\">\n <span\n v-if=\"showIcon\"\n class=\"d-empty-state__icon\"\n >\n <dt-icon\n :name=\"iconName\"\n size=\"800\"\n />\n </span>\n\n <span\n v-if=\"showIllustrationComponent\"\n class=\"d-empty-state__illustration\"\n >\n <dt-illustration\n :name=\"illustrationName\"\n />\n </span>\n </template>\n\n <dt-stack\n gap=\"450\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text', headlineClass]\">\n {{ headerText }}\n </div>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text', bodyClass]\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /**\n * The empty state size.\n * @values 'sm', 'md', 'lg'\n */\n size: {\n type: String,\n default: 'lg',\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * The illustration name in kebab-case\n * This only displays when size is 'lg' or 'md'\n * This has priority over icon.\n * @type {String}\n */\n illustrationName: {\n type: String,\n default: null,\n validator: (name) => ILLUSTRATION_NAMES.includes(name),\n },\n\n /**\n * The icon name in kebab-case\n * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n * Will always be shown in 'sm' size.\n * @type {String}\n */\n iconName: {\n type: String,\n default: null,\n validator: (name) => ICON_NAMES.includes(name),\n },\n\n /**\n * Header text\n * @type {String}\n */\n headerText: {\n type: String,\n required: true,\n },\n\n /**\n * Body text\n * @type {String}\n */\n bodyText: {\n type: String,\n default: null,\n },\n\n /**\n * Whether to show the illustration\n * @type {Boolean}\n */\n showIllustration: {\n type: Boolean,\n default: true,\n },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n if (!props.iconName) {\n return false;\n }\n return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-empty-state__content--sm';\n case 'md':\n return 'd-empty-state__content--md';\n case 'lg':\n return 'd-empty-state__content--lg';\n default:\n return 'd-empty-state__content--lg';\n }\n});\n\nconst headlineClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-headline--md';\n case 'md':\n return 'd-headline--xl';\n case 'lg':\n return 'd-headline--xxl';\n default:\n return 'd-headline--xxl';\n }\n});\n\nconst bodyClass = computed(() => {\n switch (props.size) {\n case 'sm':\n return 'd-body--sm';\n case 'md':\n return 'd-body--sm';\n case 'lg':\n return 'd-body--md';\n default:\n return 'd-body--md';\n }\n});\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAY,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4B,SAAS,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAY,SAAS,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoB,SAAS,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAe,SAAS,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAAC,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty_state.vue.d.ts","sourceRoot":"","sources":["../../../../components/empty_state/empty_state.vue.js"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"empty_state.vue.d.ts","sourceRoot":"","sources":["../../../../components/empty_state/empty_state.vue.js"],"names":[],"mappings":";;;;;kBAgR2B,GAAG"}
|
|
@@ -191,9 +191,9 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
191
191
|
contentClass: string | Record<string, any> | unknown[];
|
|
192
192
|
headerClass: string | Record<string, any> | unknown[];
|
|
193
193
|
footerClass: string | Record<string, any> | unknown[];
|
|
194
|
+
bodyClass: string | Record<string, any> | unknown[];
|
|
194
195
|
headerHeight: string;
|
|
195
196
|
headerSticky: boolean;
|
|
196
|
-
bodyClass: string | Record<string, any> | unknown[];
|
|
197
197
|
sidebarClass: string | Record<string, any> | unknown[];
|
|
198
198
|
sidebarWidth: string;
|
|
199
199
|
sidebarPosition: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "3.129.
|
|
3
|
+
"version": "3.129.1",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"regex-combined-emojis": "1.6.0",
|
|
33
33
|
"tippy.js": "6.3.7",
|
|
34
34
|
"@dialpad/dialtone-emojis": "1.0.7",
|
|
35
|
-
"@dialpad/dialtone-icons": "4.
|
|
35
|
+
"@dialpad/dialtone-icons": "4.17.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@percy/cli": "1.28.2",
|