@dialpad/dialtone-vue 2.157.1 → 2.158.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/components/emoji_picker/modules/emoji_search.vue.cjs +3 -3
- package/dist/components/emoji_picker/modules/emoji_search.vue.cjs.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_search.vue.js +3 -3
- package/dist/components/emoji_picker/modules/emoji_search.vue.js.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.js +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.js.map +1 -1
- package/package.json +3 -3
|
@@ -60,9 +60,9 @@ var _sfc_render = function render() {
|
|
|
60
60
|
}] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
|
|
61
61
|
return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
|
|
62
62
|
}, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
|
|
63
|
-
return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
64
|
-
return [_c("dt-icon", { attrs: { "name": "
|
|
65
|
-
}, proxy: true }], null, false,
|
|
63
|
+
return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
64
|
+
return [_c("dt-icon", { attrs: { "name": "close", "size": "200" } })];
|
|
65
|
+
}, proxy: true }], null, false, 1154370889) })];
|
|
66
66
|
}, proxy: true } : null], null, true) })], 1);
|
|
67
67
|
};
|
|
68
68
|
var _sfc_staticRenderFns = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"
|
|
1
|
+
{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-mrn4\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIcon,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n"],"names":["DtInput","DtIcon","DtButton"],"mappings":";;;;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA;AAAAA,IACA,QAAAC;AAAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -59,9 +59,9 @@ var _sfc_render = function render() {
|
|
|
59
59
|
}] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
|
|
60
60
|
return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
|
|
61
61
|
}, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
|
|
62
|
-
return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
63
|
-
return [_c("dt-icon", { attrs: { "name": "
|
|
64
|
-
}, proxy: true }], null, false,
|
|
62
|
+
return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
63
|
+
return [_c("dt-icon", { attrs: { "name": "close", "size": "200" } })];
|
|
64
|
+
}, proxy: true }], null, false, 1154370889) })];
|
|
65
65
|
}, proxy: true } : null], null, true) })], 1);
|
|
66
66
|
};
|
|
67
67
|
var _sfc_staticRenderFns = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"
|
|
1
|
+
{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n <dt-input\n id=\"searchInput\"\n ref=\"searchInputRef\"\n :placeholder=\"searchPlaceholderLabel\"\n :value=\"modelValue\"\n @input=\"updateModelValue\"\n @keydown.up=\"focusTabset\"\n @keydown.down.prevent=\"focusEmojiSelector\"\n @keydown.enter=\"selectFirstEmoji\"\n >\n <template #leftIcon>\n <dt-icon\n name=\"search\"\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #rightIcon\n >\n <dt-button\n importance=\"clear\"\n size=\"xs\"\n class=\"d-mrn4\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'EmojiSearch',\n\n components: {\n DtInput,\n DtIcon,\n DtButton,\n },\n\n props: {\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n\n modelValue: {\n type: String,\n default: '',\n },\n },\n\n mounted () {\n this.focusSearchInput();\n },\n\n methods: {\n updateModelValue (value) {\n this.$emit('update:model-value', value);\n },\n\n focusEmojiSelector () {\n this.$emit('focus-emoji-selector');\n },\n\n focusTabset () {\n this.$emit('focus-tabset');\n },\n\n selectFirstEmoji () {\n this.$emit('select-first-emoji');\n },\n\n clearSearch () {\n this.$emit('update:model-value', '');\n this.focusSearchInput();\n },\n\n focusSearchInput () {\n this.$refs.searchInputRef.focus();\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -125,7 +125,7 @@ const _sfc_main = {
|
|
|
125
125
|
};
|
|
126
126
|
var _sfc_render = function render() {
|
|
127
127
|
var _vm = this, _c = _vm._self._c;
|
|
128
|
-
return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
|
|
128
|
+
return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
|
|
129
129
|
return _vm._l(_vm.tabs, function(tab2, index) {
|
|
130
130
|
return _c("dt-tab", { key: tab2.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab2.id, "panel-id": tab2.panelId, "label": tab2.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
|
|
131
131
|
$event.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n DtIcon,\n },\n\n props: {\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n ],\n };\n },\n\n computed: {\n tabs () {\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isScrolling && !this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n if (!this.isScrolling) {\n this.selectedTab = id;\n }\n this.$emit('selected-tabset', id);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","DtIcon","EMOJI_PICKER_CATEGORIES","tab"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n DtIcon,\n },\n\n props: {\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n ],\n };\n },\n\n computed: {\n tabs () {\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isScrolling && !this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n if (!this.isScrolling) {\n this.selectedTab = id;\n }\n this.$emit('selected-tabset', id);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","DtIcon","EMOJI_PICKER_CATEGORIES","tab"],"mappings":"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"}
|
|
@@ -124,7 +124,7 @@ const _sfc_main = {
|
|
|
124
124
|
};
|
|
125
125
|
var _sfc_render = function render() {
|
|
126
126
|
var _vm = this, _c = _vm._self._c;
|
|
127
|
-
return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
|
|
127
|
+
return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
|
|
128
128
|
return _vm._l(_vm.tabs, function(tab, index) {
|
|
129
129
|
return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
|
|
130
130
|
$event.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n DtIcon,\n },\n\n props: {\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n ],\n };\n },\n\n computed: {\n tabs () {\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isScrolling && !this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n if (!this.isScrolling) {\n this.selectedTab = id;\n }\n this.$emit('selected-tabset', id);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n <div class=\"d-emoji-picker__tabset\">\n <dt-tab-group\n size=\"sm\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n :selected=\"selectedTab\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :ref=\"`tabsetRef-${index}`\"\n :key=\"tab.id\"\n :panel-id=\"tab.panelId\"\n :label=\"tab.label\"\n aria-controls=\"d-emoji-picker-list\"\n :tabindex=\"index + 1\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n >\n <dt-icon\n size=\"400\"\n :name=\"tab.icon\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n name: 'EmojiTabset',\n\n components: {\n DtTabGroup,\n DtTab,\n DtIcon,\n },\n\n props: {\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n isScrolling: {\n type: Boolean,\n default: false,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n tabSetLabels: {\n type: Array,\n required: true,\n },\n },\n\n data () {\n return {\n selectedTab: '1',\n tabsetRef: [],\n TABS_DATA: [\n { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n ],\n };\n },\n\n computed: {\n tabs () {\n const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n return tabsData.map((tab, index) => ({\n ...tab,\n label: this.tabSetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n },\n\n isSearching () {\n return this.emojiFilter.length > 0;\n },\n },\n\n watch: {\n scrollIntoTab: function (newVal) {\n if (!this.isScrolling && !this.isSearching) {\n this.selectedTab = (newVal + 1).toString();\n }\n },\n\n isSearching: function (newVal) {\n if (newVal) {\n this.selectedTab = null;\n }\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.setTabsetRef();\n });\n },\n\n methods: {\n selectTabset (id) {\n if (!this.isScrolling) {\n this.selectedTab = id;\n }\n this.$emit('selected-tabset', id);\n },\n\n setTabsetRef () {\n this.tabs.forEach((skin, index) => {\n const refKey = `tabsetRef-${index}`;\n if (this.$refs[refKey]) {\n this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n }\n });\n },\n\n focusTabset () {\n if (this.tabsetRef[0]) {\n this.tabsetRef[0].focus();\n }\n },\n\n // eslint-disable-next-line complexity\n handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n this.selectTabset(tabId);\n if (this.tabsetRef[tabId - 1]) {\n this.tabsetRef[tabId - 1].blur();\n }\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n this.$emit('focus-skin-selector');\n } else {\n this.$emit('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n this.$emit('focus-search-input');\n }\n },\n },\n};\n</script>\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.158.0",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -84,12 +84,12 @@
|
|
|
84
84
|
"vue-tsc": "^1.8.25",
|
|
85
85
|
"yo": "^5.0.0",
|
|
86
86
|
"yorkie": "^2.0.0",
|
|
87
|
-
"@dialpad/dialtone-css": "8.
|
|
87
|
+
"@dialpad/dialtone-css": "8.43.0",
|
|
88
88
|
"@dialpad/generator-dialtone": "0.1.0"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
91
|
"vue": ">=2.6",
|
|
92
|
-
"@dialpad/dialtone-css": "^8.
|
|
92
|
+
"@dialpad/dialtone-css": "^8.43.0"
|
|
93
93
|
},
|
|
94
94
|
"bugs": {
|
|
95
95
|
"email": "dialtone@dialpad.com"
|