@dialpad/dialtone 9.99.1-beta.1 → 9.100.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/tokens/doc.json +15826 -15826
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/dialtone-vue.cjs +1 -0
- package/dist/vue2/dialtone-vue.cjs.map +1 -1
- package/dist/vue2/dialtone-vue.js +2 -1
- package/dist/vue2/lib/ivr-node.cjs +1 -0
- package/dist/vue2/lib/ivr-node.cjs.map +1 -1
- package/dist/vue2/lib/ivr-node.js +2 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.cjs +3 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.cjs.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.js +5 -3
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.js.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.cjs +6 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.cjs.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.js +6 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.js.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs +0 -7
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js +0 -7
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue2/types/recipes/cards/ivr_node/index.d.ts +1 -1
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/dist/vue2/types/recipes/conversation_view/editor/editor.vue.d.ts +0 -9
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/components/item_layout/item_layout.vue.cjs +102 -44
- package/dist/vue3/components/item_layout/item_layout.vue.cjs.map +1 -1
- package/dist/vue3/components/item_layout/item_layout.vue.js +103 -45
- package/dist/vue3/components/item_layout/item_layout.vue.js.map +1 -1
- package/dist/vue3/components/list_item/list_item.vue.cjs +24 -17
- package/dist/vue3/components/list_item/list_item.vue.cjs.map +1 -1
- package/dist/vue3/components/list_item/list_item.vue.js +24 -17
- package/dist/vue3/components/list_item/list_item.vue.js.map +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -0
- package/dist/vue3/dialtone-vue.cjs.map +1 -1
- package/dist/vue3/dialtone-vue.js +2 -1
- package/dist/vue3/lib/ivr-node.cjs +1 -0
- package/dist/vue3/lib/ivr-node.cjs.map +1 -1
- package/dist/vue3/lib/ivr-node.js +2 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs +3 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js +5 -3
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs +6 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js +6 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs +1 -0
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js +1 -0
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs +5 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js +5 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs +0 -7
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js +0 -7
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs +51 -21
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js +52 -22
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs +2 -4
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.js +2 -4
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map +1 -1
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.cjs +16 -4
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.cjs.map +1 -1
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.js +16 -4
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.js.map +1 -1
- package/dist/vue3/types/components/item_layout/item_layout.vue.d.ts +64 -0
- package/dist/vue3/types/components/item_layout/item_layout.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts +1 -24
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/cards/ivr_node/index.d.ts +1 -1
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/dist/vue3/types/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/editor/editor.vue.d.ts +0 -9
- package/dist/vue3/types/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/item_layout/contact_info/contact_info.vue.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -21,74 +21,132 @@ const _sfc_main = {
|
|
|
21
21
|
unstyled: {
|
|
22
22
|
type: Boolean,
|
|
23
23
|
default: false
|
|
24
|
+
},
|
|
25
|
+
/**
|
|
26
|
+
* Set the class for the left section.
|
|
27
|
+
*/
|
|
28
|
+
leftClass: {
|
|
29
|
+
type: String,
|
|
30
|
+
default: ""
|
|
31
|
+
},
|
|
32
|
+
/**
|
|
33
|
+
* Set the class for the content section.
|
|
34
|
+
*/
|
|
35
|
+
contentClass: {
|
|
36
|
+
type: String,
|
|
37
|
+
default: ""
|
|
38
|
+
},
|
|
39
|
+
/**
|
|
40
|
+
* Set the class for the title section.
|
|
41
|
+
*/
|
|
42
|
+
titleClass: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: ""
|
|
45
|
+
},
|
|
46
|
+
/**
|
|
47
|
+
* Set the class for the subtitle section.
|
|
48
|
+
*/
|
|
49
|
+
subtitleClass: {
|
|
50
|
+
type: String,
|
|
51
|
+
default: ""
|
|
52
|
+
},
|
|
53
|
+
/**
|
|
54
|
+
* Set the class for the bottom section.
|
|
55
|
+
*/
|
|
56
|
+
bottomClass: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: ""
|
|
59
|
+
},
|
|
60
|
+
/**
|
|
61
|
+
* Set the class for the right section.
|
|
62
|
+
*/
|
|
63
|
+
rightClass: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: ""
|
|
66
|
+
},
|
|
67
|
+
/**
|
|
68
|
+
* Set the class for the selected section.
|
|
69
|
+
*/
|
|
70
|
+
selectedClass: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: ""
|
|
24
73
|
}
|
|
25
74
|
},
|
|
26
|
-
methods: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
class: "d-item-layout--title"
|
|
41
|
-
};
|
|
42
|
-
const _hoisted_4 = {
|
|
43
|
-
key: 2,
|
|
44
|
-
"data-qa": "dt-item-layout-bottom-wrapper",
|
|
45
|
-
class: "d-item-layout--bottom"
|
|
46
|
-
};
|
|
47
|
-
const _hoisted_5 = {
|
|
48
|
-
key: 1,
|
|
49
|
-
"data-qa": "dt-item-layout-right-wrapper",
|
|
50
|
-
class: "d-item-layout--right"
|
|
51
|
-
};
|
|
52
|
-
const _hoisted_6 = {
|
|
53
|
-
key: 2,
|
|
54
|
-
"data-qa": "dt-item-layout-selected-wrapper",
|
|
55
|
-
class: "d-item-layout--selected"
|
|
75
|
+
methods: {
|
|
76
|
+
/**
|
|
77
|
+
* Generate dynamic grid template columns
|
|
78
|
+
*/
|
|
79
|
+
dynamicGridTemplateColumns() {
|
|
80
|
+
const leftContentColumn = this.$slots.left ? "auto" : "";
|
|
81
|
+
const rightContentColumn = this.$slots.right ? "auto" : "";
|
|
82
|
+
const selectedContentColumn = this.$slots.selected ? "auto" : "";
|
|
83
|
+
return `
|
|
84
|
+
grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
|
|
85
|
+
`;
|
|
86
|
+
},
|
|
87
|
+
hasSlotContent: common_utils.hasSlotContent
|
|
88
|
+
}
|
|
56
89
|
};
|
|
57
90
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
58
91
|
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
|
|
59
|
-
class: vue.normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout")
|
|
92
|
+
class: vue.normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
|
|
93
|
+
style: vue.normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
|
|
60
94
|
}, {
|
|
61
95
|
default: vue.withCtx(() => [
|
|
62
|
-
$options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section",
|
|
96
|
+
$options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section", {
|
|
97
|
+
key: 0,
|
|
98
|
+
"data-qa": "dt-item-layout-left-wrapper",
|
|
99
|
+
class: vue.normalizeClass([$props.leftClass, "d-item-layout__left"])
|
|
100
|
+
}, [
|
|
63
101
|
vue.renderSlot(_ctx.$slots, "left")
|
|
64
|
-
])) : vue.createCommentVNode("", true),
|
|
65
|
-
vue.createElementVNode("section",
|
|
66
|
-
|
|
102
|
+
], 2)) : vue.createCommentVNode("", true),
|
|
103
|
+
vue.createElementVNode("section", {
|
|
104
|
+
"data-qa": "dt-item-layout-content-wrapper",
|
|
105
|
+
class: vue.normalizeClass([$props.contentClass, "d-item-layout__content"])
|
|
106
|
+
}, [
|
|
107
|
+
$options.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
108
|
+
key: 0,
|
|
109
|
+
"data-qa": "dt-item-layout-title-wrapper",
|
|
110
|
+
class: vue.normalizeClass([$props.titleClass, "d-item-layout__title"])
|
|
111
|
+
}, [
|
|
67
112
|
vue.renderSlot(_ctx.$slots, "default")
|
|
68
|
-
])) : vue.createCommentVNode("", true),
|
|
113
|
+
], 2)) : vue.createCommentVNode("", true),
|
|
69
114
|
$options.hasSlotContent(_ctx.$slots.subtitle) ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
70
115
|
key: 1,
|
|
71
116
|
"data-qa": "dt-item-layout-subtitle-wrapper",
|
|
72
117
|
class: vue.normalizeClass([
|
|
118
|
+
$props.subtitleClass,
|
|
73
119
|
"d-item-layout--subtitle",
|
|
74
120
|
{ "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
|
|
75
121
|
])
|
|
76
122
|
}, [
|
|
77
123
|
vue.renderSlot(_ctx.$slots, "subtitle")
|
|
78
124
|
], 2)) : vue.createCommentVNode("", true),
|
|
79
|
-
$options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div",
|
|
125
|
+
$options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
126
|
+
key: 2,
|
|
127
|
+
"data-qa": "dt-item-layout-bottom-wrapper",
|
|
128
|
+
class: vue.normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
|
|
129
|
+
}, [
|
|
80
130
|
vue.renderSlot(_ctx.$slots, "bottom")
|
|
81
|
-
])) : vue.createCommentVNode("", true)
|
|
82
|
-
]),
|
|
83
|
-
$options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section",
|
|
131
|
+
], 2)) : vue.createCommentVNode("", true)
|
|
132
|
+
], 2),
|
|
133
|
+
$options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section", {
|
|
134
|
+
key: 1,
|
|
135
|
+
"data-qa": "dt-item-layout-right-wrapper",
|
|
136
|
+
class: vue.normalizeClass([$props.rightClass, "d-item-layout__right"])
|
|
137
|
+
}, [
|
|
84
138
|
vue.renderSlot(_ctx.$slots, "right")
|
|
85
|
-
])) : vue.createCommentVNode("", true),
|
|
86
|
-
$options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section",
|
|
139
|
+
], 2)) : vue.createCommentVNode("", true),
|
|
140
|
+
$options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section", {
|
|
141
|
+
key: 2,
|
|
142
|
+
"data-qa": "dt-item-layout-selected-wrapper",
|
|
143
|
+
class: vue.normalizeClass([$props.selectedClass, "d-item-layout__selected"])
|
|
144
|
+
}, [
|
|
87
145
|
vue.renderSlot(_ctx.$slots, "selected")
|
|
88
|
-
])) : vue.createCommentVNode("", true)
|
|
146
|
+
], 2)) : vue.createCommentVNode("", true)
|
|
89
147
|
]),
|
|
90
148
|
_: 3
|
|
91
|
-
}, 8, ["class"]);
|
|
149
|
+
}, 8, ["class", "style"]);
|
|
92
150
|
}
|
|
93
151
|
const DtItemLayout = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
|
|
94
152
|
exports.default = DtItemLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"d-item-
|
|
1
|
+
{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-item-layout__left']\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n :class=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n subtitleClass,\n 'd-item-layout--subtitle',\n { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[bottomClass, 'd-item-layout__bottom']\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[rightClass, 'd-item-layout__right']\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtItemLayout',\n props: {\n /**\n * Set this prop to render layout as a specific HTML element.\n */\n as: {\n type: String,\n default: 'div',\n },\n\n /**\n * Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Set the class for the left section.\n */\n leftClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the content section.\n */\n contentClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the title section.\n */\n titleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the subtitle section.\n */\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the bottom section.\n */\n bottomClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the right section.\n */\n rightClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the selected section.\n */\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /**\n * Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n\n hasSlotContent,\n },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { hasSlotContent } from "../../common/utils.js";
|
|
2
|
-
import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
|
|
2
|
+
import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
|
|
3
3
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
4
|
const _sfc_main = {
|
|
5
5
|
compatConfig: { MODE: 3 },
|
|
@@ -19,74 +19,132 @@ const _sfc_main = {
|
|
|
19
19
|
unstyled: {
|
|
20
20
|
type: Boolean,
|
|
21
21
|
default: false
|
|
22
|
+
},
|
|
23
|
+
/**
|
|
24
|
+
* Set the class for the left section.
|
|
25
|
+
*/
|
|
26
|
+
leftClass: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: ""
|
|
29
|
+
},
|
|
30
|
+
/**
|
|
31
|
+
* Set the class for the content section.
|
|
32
|
+
*/
|
|
33
|
+
contentClass: {
|
|
34
|
+
type: String,
|
|
35
|
+
default: ""
|
|
36
|
+
},
|
|
37
|
+
/**
|
|
38
|
+
* Set the class for the title section.
|
|
39
|
+
*/
|
|
40
|
+
titleClass: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: ""
|
|
43
|
+
},
|
|
44
|
+
/**
|
|
45
|
+
* Set the class for the subtitle section.
|
|
46
|
+
*/
|
|
47
|
+
subtitleClass: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: ""
|
|
50
|
+
},
|
|
51
|
+
/**
|
|
52
|
+
* Set the class for the bottom section.
|
|
53
|
+
*/
|
|
54
|
+
bottomClass: {
|
|
55
|
+
type: String,
|
|
56
|
+
default: ""
|
|
57
|
+
},
|
|
58
|
+
/**
|
|
59
|
+
* Set the class for the right section.
|
|
60
|
+
*/
|
|
61
|
+
rightClass: {
|
|
62
|
+
type: String,
|
|
63
|
+
default: ""
|
|
64
|
+
},
|
|
65
|
+
/**
|
|
66
|
+
* Set the class for the selected section.
|
|
67
|
+
*/
|
|
68
|
+
selectedClass: {
|
|
69
|
+
type: String,
|
|
70
|
+
default: ""
|
|
22
71
|
}
|
|
23
72
|
},
|
|
24
|
-
methods: {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
class: "d-item-layout--title"
|
|
39
|
-
};
|
|
40
|
-
const _hoisted_4 = {
|
|
41
|
-
key: 2,
|
|
42
|
-
"data-qa": "dt-item-layout-bottom-wrapper",
|
|
43
|
-
class: "d-item-layout--bottom"
|
|
44
|
-
};
|
|
45
|
-
const _hoisted_5 = {
|
|
46
|
-
key: 1,
|
|
47
|
-
"data-qa": "dt-item-layout-right-wrapper",
|
|
48
|
-
class: "d-item-layout--right"
|
|
49
|
-
};
|
|
50
|
-
const _hoisted_6 = {
|
|
51
|
-
key: 2,
|
|
52
|
-
"data-qa": "dt-item-layout-selected-wrapper",
|
|
53
|
-
class: "d-item-layout--selected"
|
|
73
|
+
methods: {
|
|
74
|
+
/**
|
|
75
|
+
* Generate dynamic grid template columns
|
|
76
|
+
*/
|
|
77
|
+
dynamicGridTemplateColumns() {
|
|
78
|
+
const leftContentColumn = this.$slots.left ? "auto" : "";
|
|
79
|
+
const rightContentColumn = this.$slots.right ? "auto" : "";
|
|
80
|
+
const selectedContentColumn = this.$slots.selected ? "auto" : "";
|
|
81
|
+
return `
|
|
82
|
+
grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
|
|
83
|
+
`;
|
|
84
|
+
},
|
|
85
|
+
hasSlotContent
|
|
86
|
+
}
|
|
54
87
|
};
|
|
55
88
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
56
89
|
return openBlock(), createBlock(resolveDynamicComponent($props.as), {
|
|
57
|
-
class: normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout")
|
|
90
|
+
class: normalizeClass($props.unstyled ? "d-item-layout--custom" : "d-item-layout"),
|
|
91
|
+
style: normalizeStyle($props.unstyled && $options.dynamicGridTemplateColumns())
|
|
58
92
|
}, {
|
|
59
93
|
default: withCtx(() => [
|
|
60
|
-
$options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section",
|
|
94
|
+
$options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section", {
|
|
95
|
+
key: 0,
|
|
96
|
+
"data-qa": "dt-item-layout-left-wrapper",
|
|
97
|
+
class: normalizeClass([$props.leftClass, "d-item-layout__left"])
|
|
98
|
+
}, [
|
|
61
99
|
renderSlot(_ctx.$slots, "left")
|
|
62
|
-
])) : createCommentVNode("", true),
|
|
63
|
-
createElementVNode("section",
|
|
64
|
-
|
|
100
|
+
], 2)) : createCommentVNode("", true),
|
|
101
|
+
createElementVNode("section", {
|
|
102
|
+
"data-qa": "dt-item-layout-content-wrapper",
|
|
103
|
+
class: normalizeClass([$props.contentClass, "d-item-layout__content"])
|
|
104
|
+
}, [
|
|
105
|
+
$options.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
|
|
106
|
+
key: 0,
|
|
107
|
+
"data-qa": "dt-item-layout-title-wrapper",
|
|
108
|
+
class: normalizeClass([$props.titleClass, "d-item-layout__title"])
|
|
109
|
+
}, [
|
|
65
110
|
renderSlot(_ctx.$slots, "default")
|
|
66
|
-
])) : createCommentVNode("", true),
|
|
111
|
+
], 2)) : createCommentVNode("", true),
|
|
67
112
|
$options.hasSlotContent(_ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", {
|
|
68
113
|
key: 1,
|
|
69
114
|
"data-qa": "dt-item-layout-subtitle-wrapper",
|
|
70
115
|
class: normalizeClass([
|
|
116
|
+
$props.subtitleClass,
|
|
71
117
|
"d-item-layout--subtitle",
|
|
72
118
|
{ "d-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }
|
|
73
119
|
])
|
|
74
120
|
}, [
|
|
75
121
|
renderSlot(_ctx.$slots, "subtitle")
|
|
76
122
|
], 2)) : createCommentVNode("", true),
|
|
77
|
-
$options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div",
|
|
123
|
+
$options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", {
|
|
124
|
+
key: 2,
|
|
125
|
+
"data-qa": "dt-item-layout-bottom-wrapper",
|
|
126
|
+
class: normalizeClass([$props.bottomClass, "d-item-layout__bottom"])
|
|
127
|
+
}, [
|
|
78
128
|
renderSlot(_ctx.$slots, "bottom")
|
|
79
|
-
])) : createCommentVNode("", true)
|
|
80
|
-
]),
|
|
81
|
-
$options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section",
|
|
129
|
+
], 2)) : createCommentVNode("", true)
|
|
130
|
+
], 2),
|
|
131
|
+
$options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section", {
|
|
132
|
+
key: 1,
|
|
133
|
+
"data-qa": "dt-item-layout-right-wrapper",
|
|
134
|
+
class: normalizeClass([$props.rightClass, "d-item-layout__right"])
|
|
135
|
+
}, [
|
|
82
136
|
renderSlot(_ctx.$slots, "right")
|
|
83
|
-
])) : createCommentVNode("", true),
|
|
84
|
-
$options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section",
|
|
137
|
+
], 2)) : createCommentVNode("", true),
|
|
138
|
+
$options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section", {
|
|
139
|
+
key: 2,
|
|
140
|
+
"data-qa": "dt-item-layout-selected-wrapper",
|
|
141
|
+
class: normalizeClass([$props.selectedClass, "d-item-layout__selected"])
|
|
142
|
+
}, [
|
|
85
143
|
renderSlot(_ctx.$slots, "selected")
|
|
86
|
-
])) : createCommentVNode("", true)
|
|
144
|
+
], 2)) : createCommentVNode("", true)
|
|
87
145
|
]),
|
|
88
146
|
_: 3
|
|
89
|
-
}, 8, ["class"]);
|
|
147
|
+
}, 8, ["class", "style"]);
|
|
90
148
|
}
|
|
91
149
|
const DtItemLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
92
150
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"d-item-
|
|
1
|
+
{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-item-layout__left']\"\n >\n <!-- @slot Slot for left content -->\n <slot name=\"left\" />\n </section>\n <section\n data-qa=\"dt-item-layout-content-wrapper\"\n :class=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-item-layout__title']\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </div>\n <div\n v-if=\"hasSlotContent($slots.subtitle)\"\n data-qa=\"dt-item-layout-subtitle-wrapper\"\n :class=\"[\n subtitleClass,\n 'd-item-layout--subtitle',\n { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n ]\"\n >\n <!-- @slot Slot for content below main content -->\n <slot name=\"subtitle\" />\n </div>\n <div\n v-if=\"hasSlotContent($slots.bottom)\"\n data-qa=\"dt-item-layout-bottom-wrapper\"\n :class=\"[bottomClass, 'd-item-layout__bottom']\"\n >\n <!-- @slot Slot for content below subtitle -->\n <slot name=\"bottom\" />\n </div>\n </section>\n <section\n v-if=\"hasSlotContent($slots.right)\"\n data-qa=\"dt-item-layout-right-wrapper\"\n :class=\"[rightClass, 'd-item-layout__right']\"\n >\n <!-- @slot Slot for right content -->\n <slot name=\"right\" />\n </section>\n <section\n v-if=\"hasSlotContent($slots.selected)\"\n data-qa=\"dt-item-layout-selected-wrapper\"\n :class=\"[selectedClass, 'd-item-layout__selected']\"\n >\n <!-- @slot Slot for selected icon -->\n <slot name=\"selected\" />\n </section>\n </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtItemLayout',\n props: {\n /**\n * Set this prop to render layout as a specific HTML element.\n */\n as: {\n type: String,\n default: 'div',\n },\n\n /**\n * Set this prop to remove the default styling.\n * @values true, false\n */\n unstyled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Set the class for the left section.\n */\n leftClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the content section.\n */\n contentClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the title section.\n */\n titleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the subtitle section.\n */\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the bottom section.\n */\n bottomClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the right section.\n */\n rightClass: {\n type: String,\n default: '',\n },\n\n /**\n * Set the class for the selected section.\n */\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /**\n * Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n\n hasSlotContent,\n },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":"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"}
|
|
@@ -110,13 +110,8 @@ const _sfc_main = {
|
|
|
110
110
|
};
|
|
111
111
|
},
|
|
112
112
|
computed: {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
|
|
116
|
-
return item_layout.default;
|
|
117
|
-
default:
|
|
118
|
-
return null;
|
|
119
|
-
}
|
|
113
|
+
isDefaultType() {
|
|
114
|
+
return this.type === list_item_constants.LIST_ITEM_TYPES.DEFAULT;
|
|
120
115
|
},
|
|
121
116
|
listItemListeners() {
|
|
122
117
|
return {
|
|
@@ -170,19 +165,34 @@ const _sfc_main = {
|
|
|
170
165
|
};
|
|
171
166
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
172
167
|
const _component_dt_icon_check = vue.resolveComponent("dt-icon-check");
|
|
168
|
+
const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
|
|
173
169
|
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({
|
|
174
170
|
id: $props.id,
|
|
175
|
-
class: [
|
|
176
|
-
"d-list-item
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
171
|
+
class: [
|
|
172
|
+
"d-list-item",
|
|
173
|
+
{
|
|
174
|
+
"d-list-item--focusable": $options.isFocusable,
|
|
175
|
+
"d-list-item--highlighted": $options.isHighlighted,
|
|
176
|
+
"d-list-item--static": !$options.isHoverable
|
|
177
|
+
}
|
|
178
|
+
],
|
|
180
179
|
tabindex: $options.isFocusable ? 0 : -1,
|
|
181
180
|
role: $props.role,
|
|
182
181
|
"aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
|
|
183
182
|
}, vue.toHandlers($options.listItemListeners)), {
|
|
184
183
|
default: vue.withCtx(() => [
|
|
185
|
-
$options.
|
|
184
|
+
$options.isDefaultType ? (vue.openBlock(), vue.createBlock(_component_dt_item_layout, {
|
|
185
|
+
key: 0,
|
|
186
|
+
unstyled: "",
|
|
187
|
+
class: "d-list-item__wrapper",
|
|
188
|
+
"left-class": "d-list-item__left",
|
|
189
|
+
"content-class": "d-list-item__content",
|
|
190
|
+
"title-class": "d-list-item__title",
|
|
191
|
+
"subtitle-class": "d-list-item__subtitle",
|
|
192
|
+
"bottom-class": "d-list-item__bottom",
|
|
193
|
+
"right-class": "d-list-item__right",
|
|
194
|
+
"selected-class": "d-list-item__selected"
|
|
195
|
+
}, vue.createSlots({ _: 2 }, [
|
|
186
196
|
vue.renderList(_ctx.$slots, (_, slotName) => {
|
|
187
197
|
return {
|
|
188
198
|
name: slotName,
|
|
@@ -194,10 +204,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
194
204
|
$props.selected ? {
|
|
195
205
|
name: "selected",
|
|
196
206
|
fn: vue.withCtx(() => [
|
|
197
|
-
vue.createVNode(_component_dt_icon_check, {
|
|
198
|
-
size: "400",
|
|
199
|
-
class: "d-list-item--selected-icon"
|
|
200
|
-
})
|
|
207
|
+
vue.createVNode(_component_dt_icon_check, { size: "400" })
|
|
201
208
|
]),
|
|
202
209
|
key: "0"
|
|
203
210
|
} : void 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"['d-list-item'
|
|
1
|
+
{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n left-class=\"d-list-item__left\"\n content-class=\"d-list-item__content\"\n title-class=\"d-list-item__title\"\n subtitle-class=\"d-list-item__subtitle\"\n bottom-class=\"d-list-item__bottom\"\n right-class=\"d-list-item__right\"\n selected-class=\"d-list-item__selected\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check size=\"400\" />\n </template>\n </dt-item-layout>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /**\n * Value provided from keyboard_list_navigation.js using id prop.\n */\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /**\n * String to use for the item's role.\n */\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /**\n * HTML element type (tag name) of the content wrapper element.\n */\n elementType: {\n type: String,\n default: 'li',\n },\n\n /**\n * The type of child list item to use.\n * @values default, custom\n */\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /**\n * The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n */\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /**\n * Applies selected styles to the list item\n */\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Key down event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Native mouse move event\n *\n * @event mousemove\n * @type {MouseEvent}\n */\n 'mousemove',\n\n /**\n * Native mouse leave event\n *\n * @event mouseleave\n * @type {MouseEvent}\n */\n 'mouseleave',\n\n /**\n * Mouse down event\n *\n * @event mousedown\n */\n 'mousedown',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n isDefaultType () {\n return this.type === LIST_ITEM_TYPES.DEFAULT;\n },\n\n listItemListeners () {\n return {\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /**\n * For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n */\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /**\n * Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n // disabled as we do not want to override native click\n // eslint-disable-next-line vue/require-explicit-emits\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}
|
|
@@ -108,13 +108,8 @@ const _sfc_main = {
|
|
|
108
108
|
};
|
|
109
109
|
},
|
|
110
110
|
computed: {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
case LIST_ITEM_TYPES.DEFAULT:
|
|
114
|
-
return DtItemLayout;
|
|
115
|
-
default:
|
|
116
|
-
return null;
|
|
117
|
-
}
|
|
111
|
+
isDefaultType() {
|
|
112
|
+
return this.type === LIST_ITEM_TYPES.DEFAULT;
|
|
118
113
|
},
|
|
119
114
|
listItemListeners() {
|
|
120
115
|
return {
|
|
@@ -168,19 +163,34 @@ const _sfc_main = {
|
|
|
168
163
|
};
|
|
169
164
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
170
165
|
const _component_dt_icon_check = resolveComponent("dt-icon-check");
|
|
166
|
+
const _component_dt_item_layout = resolveComponent("dt-item-layout");
|
|
171
167
|
return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({
|
|
172
168
|
id: $props.id,
|
|
173
|
-
class: [
|
|
174
|
-
"d-list-item
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
169
|
+
class: [
|
|
170
|
+
"d-list-item",
|
|
171
|
+
{
|
|
172
|
+
"d-list-item--focusable": $options.isFocusable,
|
|
173
|
+
"d-list-item--highlighted": $options.isHighlighted,
|
|
174
|
+
"d-list-item--static": !$options.isHoverable
|
|
175
|
+
}
|
|
176
|
+
],
|
|
178
177
|
tabindex: $options.isFocusable ? 0 : -1,
|
|
179
178
|
role: $props.role,
|
|
180
179
|
"aria-selected": $props.role === "listitem" ? void 0 : $options.isHighlighted
|
|
181
180
|
}, toHandlers($options.listItemListeners)), {
|
|
182
181
|
default: withCtx(() => [
|
|
183
|
-
$options.
|
|
182
|
+
$options.isDefaultType ? (openBlock(), createBlock(_component_dt_item_layout, {
|
|
183
|
+
key: 0,
|
|
184
|
+
unstyled: "",
|
|
185
|
+
class: "d-list-item__wrapper",
|
|
186
|
+
"left-class": "d-list-item__left",
|
|
187
|
+
"content-class": "d-list-item__content",
|
|
188
|
+
"title-class": "d-list-item__title",
|
|
189
|
+
"subtitle-class": "d-list-item__subtitle",
|
|
190
|
+
"bottom-class": "d-list-item__bottom",
|
|
191
|
+
"right-class": "d-list-item__right",
|
|
192
|
+
"selected-class": "d-list-item__selected"
|
|
193
|
+
}, createSlots({ _: 2 }, [
|
|
184
194
|
renderList(_ctx.$slots, (_, slotName) => {
|
|
185
195
|
return {
|
|
186
196
|
name: slotName,
|
|
@@ -192,10 +202,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
192
202
|
$props.selected ? {
|
|
193
203
|
name: "selected",
|
|
194
204
|
fn: withCtx(() => [
|
|
195
|
-
createVNode(_component_dt_icon_check, {
|
|
196
|
-
size: "400",
|
|
197
|
-
class: "d-list-item--selected-icon"
|
|
198
|
-
})
|
|
205
|
+
createVNode(_component_dt_icon_check, { size: "400" })
|
|
199
206
|
]),
|
|
200
207
|
key: "0"
|
|
201
208
|
} : void 0
|