@dialpad/dialtone-vue 3.150.1 → 3.151.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 +4 -1
- package/dist/components/emoji_picker/modules/emoji_search.vue.cjs.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_search.vue.js +4 -1
- package/dist/components/emoji_picker/modules/emoji_search.vue.js.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs +1 -0
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs.map +1 -1
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.js +1 -0
- package/dist/components/emoji_picker/modules/emoji_tabset.vue.js.map +1 -1
- package/package.json +4 -4
|
@@ -61,12 +61,15 @@ const _sfc_main = {
|
|
|
61
61
|
fn: vue.withCtx(() => [
|
|
62
62
|
vue.createVNode(vue.unref(button), {
|
|
63
63
|
importance: "clear",
|
|
64
|
+
size: "xs",
|
|
65
|
+
class: "d-mrn4",
|
|
66
|
+
circle: "",
|
|
64
67
|
kind: "muted",
|
|
65
68
|
onClick: clearSearch
|
|
66
69
|
}, {
|
|
67
70
|
icon: vue.withCtx(() => [
|
|
68
71
|
vue.createVNode(vue.unref(icon), {
|
|
69
|
-
name: "
|
|
72
|
+
name: "close",
|
|
70
73
|
size: "200"
|
|
71
74
|
})
|
|
72
75
|
]),
|
|
@@ -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=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\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=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\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 setup>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n modelValue: {\n type: String,\n default: '',\n },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n emits('update:modelValue', '');\n focusSearchInput();\n}\n\nfunction focusSearchInput () {\n searchInput.value.focus();\n}\nonMounted(() => {\n focusSearchInput();\n});\n\ndefineExpose({\n focusSearchInput,\n});\n</script>\n"],"names":["ref","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2DA,UAAM,QAAQ;AAEd,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACAC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -60,12 +60,15 @@ const _sfc_main = {
|
|
|
60
60
|
fn: withCtx(() => [
|
|
61
61
|
createVNode(unref(DtButton), {
|
|
62
62
|
importance: "clear",
|
|
63
|
+
size: "xs",
|
|
64
|
+
class: "d-mrn4",
|
|
65
|
+
circle: "",
|
|
63
66
|
kind: "muted",
|
|
64
67
|
onClick: clearSearch
|
|
65
68
|
}, {
|
|
66
69
|
icon: withCtx(() => [
|
|
67
70
|
createVNode(unref(DtIcon), {
|
|
68
|
-
name: "
|
|
71
|
+
name: "close",
|
|
69
72
|
size: "200"
|
|
70
73
|
})
|
|
71
74
|
]),
|
|
@@ -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=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\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=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\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 setup>\nimport { DtInput } from '@/components/input';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n modelValue: {\n type: String,\n default: '',\n },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n emits('update:modelValue', '');\n focusSearchInput();\n}\n\nfunction focusSearchInput () {\n searchInput.value.focus();\n}\nonMounted(() => {\n focusSearchInput();\n});\n\ndefineExpose({\n focusSearchInput,\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA,UAAM,QAAQ;AAEd,UAAM,cAAc,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACA,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -127,6 +127,7 @@ const _sfc_main = {
|
|
|
127
127
|
return (_ctx, _cache) => {
|
|
128
128
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
129
129
|
vue.createVNode(vue.unref(tab_group), {
|
|
130
|
+
size: "sm",
|
|
130
131
|
"tab-list-class": "d-emoji-picker__tabset-list",
|
|
131
132
|
selected: selectedTab.value
|
|
132
133
|
}, {
|
|
@@ -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=\"el => { if (el) setTabsetRef(el) }\"\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 setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\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 /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabsetLabels: {\n type: Array,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n */\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst 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\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n"],"names":["EMOJI_PICKER_CATEGORIES","computed","tab","ref","toRefs","watch"],"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=\"el => { if (el) setTabsetRef(el) }\"\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 setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\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 /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabsetLabels: {\n type: Array,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n */\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst 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\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n"],"names":["EMOJI_PICKER_CATEGORIES","computed","tab","ref","toRefs","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAqCd,UAAM,QAAQ;AAYd,UAAM,YAAY;AAAA,MAChB,EAAE,OAAOA,uBAAuB,wBAAC,oBAAoB,MAAM,QAAS;AAAA,MACpE,EAAE,OAAOA,uBAAuB,wBAAC,oBAAoB,MAAM,YAAa;AAAA,MACxE,EAAE,OAAOA,uBAAuB,wBAAC,QAAQ,MAAM,eAAgB;AAAA,MAC/D,EAAE,OAAOA,uBAAuB,wBAAC,MAAM,MAAM,OAAQ;AAAA,MACrD,EAAE,OAAOA,uBAAuB,wBAAC,UAAU,MAAM,SAAU;AAAA,MAC3D,EAAE,OAAOA,uBAAuB,wBAAC,QAAQ,MAAM,iBAAkB;AAAA,MACjE,EAAE,OAAOA,uBAAuB,wBAAC,SAAS,MAAM,YAAa;AAAA,MAC7D,EAAE,OAAOA,uBAAuB,wBAAC,SAAS,MAAM,QAAS;AAAA,MACzD,EAAE,OAAOA,uBAAuB,wBAAC,OAAO,MAAM,OAAQ;AAAA,IACxD;AAEA,UAAM,OAAOC,IAAQ,SAAC,MAAM;AAC1B,YAAM,WAAW,MAAM,sBAAsB,YAAY,UAAU,MAAM,CAAC;AAE1E,aAAO,SAAS,IAAI,CAACC,MAAK,WAAW;AAAA,QACnC,GAAGA;AAAA,QACH,OAAO,MAAM,aAAa,KAAK;AAAA,QAC/B,KAAK,QAAQ,GAAG,SAAU;AAAA,QAC1B,UAAU,QAAQ,GAAG,SAAU;AAAA,MAChC,EAAC;AAAA,IACJ,CAAC;AAED,UAAM,cAAcD,IAAQ,SAAC,MAAM,MAAM,YAAY,SAAS,CAAC;AAE/D,UAAM,cAAcE,IAAAA,IAAI,GAAG;AAE3B,UAAM,EAAE,YAAa,IAAGC,WAAO,KAAK;AAEpC,UAAM,YAAYD,IAAAA,IAAI,CAAA,CAAE;AAExBE,QAAAA;AAAAA,MAAM,MAAM,MAAM;AAAA,MAChB,MAAM;AACJ,YAAI,CAAC,YAAY,SAAS,CAAC,YAAY,OAAO;AAC5C,sBAAY,SAAS,MAAM,gBAAgB,GAAG;QAC/C;AAAA,MACL;AAAA,IAAG;AAEHA,QAAAA;AAAAA,MAAM;AAAA,MACJ,MAAM;AACJ,YAAI,YAAY,OAAO;AACrB,sBAAY,QAAQ;AAAA,QACrB;AAAA,MACL;AAAA,IAAG;AAOH,aAAS,aAAc,IAAI;AACzB,UAAI,CAAC,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MACrB;AACD,YAAM,mBAAmB,EAAE;AAAA,IAC7B;AAEA,aAAS,aAAc,KAAK;AAG1B,gBAAU,MAAM,KAAK,IAAI,GAAG;AAAA,IAC9B;AAEA,aAAS,cAAe;AACtB,gBAAU,MAAM,CAAC,EAAE,MAAK;AAAA,IAC1B;AAEA,aAAS,cAAe,OAAO,OAAO;AACpC,UAAI,MAAM,QAAQ,SAAS;AACzB,qBAAa,KAAK;AAElB,kBAAU,MAAM,QAAQ,CAAC,EAAE,KAAI;AAAA,MAChC;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAc;AACpB,YAAI,MAAM,UAAU;AAClB,gBAAM,qBAAqB;AAAA,QACjC,OAAW;AACL,gBAAM,oBAAoB;AAAA,QAC3B;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,aAAa;AAE7B,cAAM,oBAAoB;AAAA,MAC3B;AAAA,IACH;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -126,6 +126,7 @@ const _sfc_main = {
|
|
|
126
126
|
return (_ctx, _cache) => {
|
|
127
127
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
128
128
|
createVNode(unref(DtTabGroup), {
|
|
129
|
+
size: "sm",
|
|
129
130
|
"tab-list-class": "d-emoji-picker__tabset-list",
|
|
130
131
|
selected: selectedTab.value
|
|
131
132
|
}, {
|
|
@@ -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=\"el => { if (el) setTabsetRef(el) }\"\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 setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\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 /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabsetLabels: {\n type: Array,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n */\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst 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\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n"],"names":["ref"],"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=\"el => { if (el) setTabsetRef(el) }\"\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 setup>\nimport { computed, ref, toRefs, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tabs';\nimport { DtIcon } from '@/components/icon';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nconst props = defineProps({\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\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 /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabsetLabels: {\n type: Array,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n */\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst 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\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n return tabsData.map((tab, index) => ({\n ...tab,\n label: props.tabsetLabels[index],\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst { isScrolling } = toRefs(props);\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isScrolling.value && !isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n if (!isScrolling.value) {\n selectedTab.value = id;\n }\n emits('selected-tabset', id);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(ref.$el);\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAqCd,UAAM,QAAQ;AAYd,UAAM,YAAY;AAAA,MAChB,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,QAAS;AAAA,MACpE,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,YAAa;AAAA,MACxE,EAAE,OAAO,wBAAwB,QAAQ,MAAM,eAAgB;AAAA,MAC/D,EAAE,OAAO,wBAAwB,MAAM,MAAM,OAAQ;AAAA,MACrD,EAAE,OAAO,wBAAwB,UAAU,MAAM,SAAU;AAAA,MAC3D,EAAE,OAAO,wBAAwB,QAAQ,MAAM,iBAAkB;AAAA,MACjE,EAAE,OAAO,wBAAwB,SAAS,MAAM,YAAa;AAAA,MAC7D,EAAE,OAAO,wBAAwB,SAAS,MAAM,QAAS;AAAA,MACzD,EAAE,OAAO,wBAAwB,OAAO,MAAM,OAAQ;AAAA,IACxD;AAEA,UAAM,OAAO,SAAS,MAAM;AAC1B,YAAM,WAAW,MAAM,sBAAsB,YAAY,UAAU,MAAM,CAAC;AAE1E,aAAO,SAAS,IAAI,CAAC,KAAK,WAAW;AAAA,QACnC,GAAG;AAAA,QACH,OAAO,MAAM,aAAa,KAAK;AAAA,QAC/B,KAAK,QAAQ,GAAG,SAAU;AAAA,QAC1B,UAAU,QAAQ,GAAG,SAAU;AAAA,MAChC,EAAC;AAAA,IACJ,CAAC;AAED,UAAM,cAAc,SAAS,MAAM,MAAM,YAAY,SAAS,CAAC;AAE/D,UAAM,cAAc,IAAI,GAAG;AAE3B,UAAM,EAAE,YAAa,IAAG,OAAO,KAAK;AAEpC,UAAM,YAAY,IAAI,CAAA,CAAE;AAExB;AAAA,MAAM,MAAM,MAAM;AAAA,MAChB,MAAM;AACJ,YAAI,CAAC,YAAY,SAAS,CAAC,YAAY,OAAO;AAC5C,sBAAY,SAAS,MAAM,gBAAgB,GAAG;QAC/C;AAAA,MACL;AAAA,IAAG;AAEH;AAAA,MAAM;AAAA,MACJ,MAAM;AACJ,YAAI,YAAY,OAAO;AACrB,sBAAY,QAAQ;AAAA,QACrB;AAAA,MACL;AAAA,IAAG;AAOH,aAAS,aAAc,IAAI;AACzB,UAAI,CAAC,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MACrB;AACD,YAAM,mBAAmB,EAAE;AAAA,IAC7B;AAEA,aAAS,aAAcA,MAAK;AAG1B,gBAAU,MAAM,KAAKA,KAAI,GAAG;AAAA,IAC9B;AAEA,aAAS,cAAe;AACtB,gBAAU,MAAM,CAAC,EAAE,MAAK;AAAA,IAC1B;AAEA,aAAS,cAAe,OAAO,OAAO;AACpC,UAAI,MAAM,QAAQ,SAAS;AACzB,qBAAa,KAAK;AAElB,kBAAU,MAAM,QAAQ,CAAC,EAAE,KAAI;AAAA,MAChC;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAc;AACpB,YAAI,MAAM,UAAU;AAClB,gBAAM,qBAAqB;AAAA,QACjC,OAAW;AACL,gBAAM,oBAAoB;AAAA,QAC3B;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,aAAa;AAE7B,cAAM,oBAAoB;AAAA,MAC3B;AAAA,IACH;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.151.0",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -82,12 +82,12 @@
|
|
|
82
82
|
"vue-tsc": "^1.8.25",
|
|
83
83
|
"yo": "^5.0.0",
|
|
84
84
|
"yorkie": "^2.0.0",
|
|
85
|
-
"@dialpad/
|
|
86
|
-
"@dialpad/dialtone
|
|
85
|
+
"@dialpad/dialtone-css": "8.43.0",
|
|
86
|
+
"@dialpad/generator-dialtone": "0.1.0"
|
|
87
87
|
},
|
|
88
88
|
"peerDependencies": {
|
|
89
89
|
"vue": ">=3.2",
|
|
90
|
-
"@dialpad/dialtone-css": "^8.
|
|
90
|
+
"@dialpad/dialtone-css": "^8.43.0"
|
|
91
91
|
},
|
|
92
92
|
"bugs": {
|
|
93
93
|
"email": "dialtone@dialpad.com"
|