@dialpad/dialtone 9.42.0 → 9.43.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.css +24 -25
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-light.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/css/variables-tmo-dark.css +1 -1
- package/dist/tokens/css/variables-tmo-light.css +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-light.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/tokens/less/variables-tmo-dark.less +1 -1
- package/dist/tokens/less/variables-tmo-light.less +1 -1
- package/dist/vue2/lib/empty-state.cjs +34 -7
- package/dist/vue2/lib/empty-state.cjs.map +1 -1
- package/dist/vue2/lib/empty-state.js +34 -7
- package/dist/vue2/lib/empty-state.js.map +1 -1
- package/dist/vue3/lib/empty-state.cjs +72 -27
- package/dist/vue3/lib/empty-state.cjs.map +1 -1
- package/dist/vue3/lib/empty-state.js +73 -28
- package/dist/vue3/lib/empty-state.js.map +1 -1
- package/dist/vue3/types/components/empty_state/empty_state.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/root_layout/root_layout.vue.d.ts +1 -1
- package/package.json +2 -2
|
@@ -3,10 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
4
4
|
const lib_illustration = require("./illustration.cjs");
|
|
5
5
|
const lib_icon = require("./icon.cjs");
|
|
6
|
+
const lib_stack = require("./stack.cjs");
|
|
6
7
|
const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
|
|
7
8
|
require("@dialpad/dialtone-icons/vue2");
|
|
8
9
|
require("@dialpad/dialtone-icons/illustrations.json");
|
|
9
10
|
require("@dialpad/dialtone-icons/icons.json");
|
|
11
|
+
require("../chunks/stack_constants-SMzMWnAQ.js");
|
|
10
12
|
const EMPTY_STATE_SIZE_MODIFIERS = {
|
|
11
13
|
sm: "d-empty-state--size-sm",
|
|
12
14
|
md: "d-empty-state--size-md",
|
|
@@ -16,7 +18,8 @@ const _sfc_main = {
|
|
|
16
18
|
name: "DtEmptyState",
|
|
17
19
|
components: {
|
|
18
20
|
DtIllustration: lib_illustration.DtIllustration,
|
|
19
|
-
DtIcon: lib_icon.DtIcon
|
|
21
|
+
DtIcon: lib_icon.DtIcon,
|
|
22
|
+
DtStack: lib_stack.DtStack
|
|
20
23
|
},
|
|
21
24
|
props: {
|
|
22
25
|
/**
|
|
@@ -102,16 +105,40 @@ const _sfc_main = {
|
|
|
102
105
|
emptyStateClasses() {
|
|
103
106
|
return ["d-empty-state", this.sizeClass];
|
|
104
107
|
},
|
|
105
|
-
|
|
108
|
+
contentClass() {
|
|
106
109
|
switch (this.size) {
|
|
107
110
|
case "sm":
|
|
108
|
-
return "d-
|
|
111
|
+
return "d-empty-state__content--sm";
|
|
109
112
|
case "md":
|
|
110
|
-
return "d-
|
|
113
|
+
return "d-empty-state__content--md";
|
|
111
114
|
case "lg":
|
|
112
|
-
return "d-
|
|
115
|
+
return "d-empty-state__content--lg";
|
|
113
116
|
default:
|
|
114
|
-
return "d-
|
|
117
|
+
return "d-empty-state__content--lg";
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
headlineClass() {
|
|
121
|
+
switch (this.size) {
|
|
122
|
+
case "sm":
|
|
123
|
+
return "d-headline--md";
|
|
124
|
+
case "md":
|
|
125
|
+
return "d-headline--xl";
|
|
126
|
+
case "lg":
|
|
127
|
+
return "d-headline--xxl";
|
|
128
|
+
default:
|
|
129
|
+
return "d-headline--xxl";
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
bodyClass() {
|
|
133
|
+
switch (this.size) {
|
|
134
|
+
case "sm":
|
|
135
|
+
return "d-body--sm";
|
|
136
|
+
case "md":
|
|
137
|
+
return "d-body--sm";
|
|
138
|
+
case "lg":
|
|
139
|
+
return "d-body--md";
|
|
140
|
+
default:
|
|
141
|
+
return "d-body--md";
|
|
115
142
|
}
|
|
116
143
|
}
|
|
117
144
|
},
|
|
@@ -123,7 +150,7 @@ const _sfc_main = {
|
|
|
123
150
|
};
|
|
124
151
|
var _sfc_render = function render() {
|
|
125
152
|
var _vm = this, _c = _vm._self._c;
|
|
126
|
-
return _c("
|
|
153
|
+
return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? [_vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_c("dt-icon", { attrs: { "name": _vm.iconName, "size": "800" } })], 1) : _vm._e(), _vm.showIllustrationComponent ? _c("span", { staticClass: "d-empty-state__illustration" }, [_c("dt-illustration", { attrs: { "name": _vm.illustrationName } })], 1) : _vm._e()] : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
|
|
127
154
|
};
|
|
128
155
|
var _sfc_staticRenderFns = [];
|
|
129
156
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
@@ -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>\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';\n\nexport default {\n name: 'DtEmptyState',\n\n components: {\n DtIllustration,\n DtIcon,\n DtStack,\n },\n\n props: {\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\n computed: {\n /**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\n showIllustrationComponent () {\n return this.illustrationName && this.notSmSize;\n },\n\n /**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\n showIcon () {\n if (!this.iconName) {\n return false;\n }\n\n return !(this.illustrationName && this.notSmSize);\n },\n\n notSmSize () {\n return this.size !== 'sm';\n },\n\n sizeClass () {\n return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n },\n\n emptyStateClasses () {\n return ['d-empty-state', this.sizeClass];\n },\n\n contentClass () {\n switch (this.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\n headlineClass () {\n switch (this.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\n bodyClass () {\n switch (this.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 },\n\n mounted () {\n if (!this.bodyText && !this.$slots.body) {\n console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n }\n },\n};\n</script>\n"],"names":["DtIllustration","DtIcon","DtStack","ILLUSTRATION_NAMES","ICON_NAMES"],"mappings":";;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AC+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,gBAAAA,iBAAA;AAAA,IACA,QAAAC,SAAA;AAAA,IACA,SAAAC,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAAC,oCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAAC,0BAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAAA;AACA,aAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,EAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,2BAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,MAAA;AACA,cAAA,KAAA,6FAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
|
|
2
2
|
import { DtIllustration, ILLUSTRATION_NAMES } from "./illustration.js";
|
|
3
3
|
import { DtIcon } from "./icon.js";
|
|
4
|
+
import { DtStack } from "./stack.js";
|
|
4
5
|
import { ICON_NAMES } from "../chunks/icon_constants-Dy4MEUJL.js";
|
|
5
6
|
import "@dialpad/dialtone-icons/vue2";
|
|
6
7
|
import "@dialpad/dialtone-icons/illustrations.json";
|
|
7
8
|
import "@dialpad/dialtone-icons/icons.json";
|
|
9
|
+
import "../chunks/stack_constants-HraCekPm.js";
|
|
8
10
|
const EMPTY_STATE_SIZE_MODIFIERS = {
|
|
9
11
|
sm: "d-empty-state--size-sm",
|
|
10
12
|
md: "d-empty-state--size-md",
|
|
@@ -14,7 +16,8 @@ const _sfc_main = {
|
|
|
14
16
|
name: "DtEmptyState",
|
|
15
17
|
components: {
|
|
16
18
|
DtIllustration,
|
|
17
|
-
DtIcon
|
|
19
|
+
DtIcon,
|
|
20
|
+
DtStack
|
|
18
21
|
},
|
|
19
22
|
props: {
|
|
20
23
|
/**
|
|
@@ -100,16 +103,40 @@ const _sfc_main = {
|
|
|
100
103
|
emptyStateClasses() {
|
|
101
104
|
return ["d-empty-state", this.sizeClass];
|
|
102
105
|
},
|
|
103
|
-
|
|
106
|
+
contentClass() {
|
|
104
107
|
switch (this.size) {
|
|
105
108
|
case "sm":
|
|
106
|
-
return "d-
|
|
109
|
+
return "d-empty-state__content--sm";
|
|
107
110
|
case "md":
|
|
108
|
-
return "d-
|
|
111
|
+
return "d-empty-state__content--md";
|
|
109
112
|
case "lg":
|
|
110
|
-
return "d-
|
|
113
|
+
return "d-empty-state__content--lg";
|
|
111
114
|
default:
|
|
112
|
-
return "d-
|
|
115
|
+
return "d-empty-state__content--lg";
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
headlineClass() {
|
|
119
|
+
switch (this.size) {
|
|
120
|
+
case "sm":
|
|
121
|
+
return "d-headline--md";
|
|
122
|
+
case "md":
|
|
123
|
+
return "d-headline--xl";
|
|
124
|
+
case "lg":
|
|
125
|
+
return "d-headline--xxl";
|
|
126
|
+
default:
|
|
127
|
+
return "d-headline--xxl";
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
bodyClass() {
|
|
131
|
+
switch (this.size) {
|
|
132
|
+
case "sm":
|
|
133
|
+
return "d-body--sm";
|
|
134
|
+
case "md":
|
|
135
|
+
return "d-body--sm";
|
|
136
|
+
case "lg":
|
|
137
|
+
return "d-body--md";
|
|
138
|
+
default:
|
|
139
|
+
return "d-body--md";
|
|
113
140
|
}
|
|
114
141
|
}
|
|
115
142
|
},
|
|
@@ -121,7 +148,7 @@ const _sfc_main = {
|
|
|
121
148
|
};
|
|
122
149
|
var _sfc_render = function render() {
|
|
123
150
|
var _vm = this, _c = _vm._self._c;
|
|
124
|
-
return _c("
|
|
151
|
+
return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? [_vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_c("dt-icon", { attrs: { "name": _vm.iconName, "size": "800" } })], 1) : _vm._e(), _vm.showIllustrationComponent ? _c("span", { staticClass: "d-empty-state__illustration" }, [_c("dt-illustration", { attrs: { "name": _vm.illustrationName } })], 1) : _vm._e()] : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
|
|
125
152
|
};
|
|
126
153
|
var _sfc_staticRenderFns = [];
|
|
127
154
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
@@ -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>\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';\n\nexport default {\n name: 'DtEmptyState',\n\n components: {\n DtIllustration,\n DtIcon,\n DtStack,\n },\n\n props: {\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\n computed: {\n /**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\n showIllustrationComponent () {\n return this.illustrationName && this.notSmSize;\n },\n\n /**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\n showIcon () {\n if (!this.iconName) {\n return false;\n }\n\n return !(this.illustrationName && this.notSmSize);\n },\n\n notSmSize () {\n return this.size !== 'sm';\n },\n\n sizeClass () {\n return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n },\n\n emptyStateClasses () {\n return ['d-empty-state', this.sizeClass];\n },\n\n contentClass () {\n switch (this.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\n headlineClass () {\n switch (this.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\n bodyClass () {\n switch (this.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 },\n\n mounted () {\n if (!this.bodyText && !this.$slots.body) {\n console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n }\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AC+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,mBAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,WAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAAA;AACA,aAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,EAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,2BAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,MAAA;AACA,cAAA,KAAA,6FAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|