@dialpad/dialtone-vue 2.198.3 → 2.198.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/emoji-row/emoji-row.cjs +1 -1
- package/dist/lib/emoji-row/emoji-row.cjs.map +1 -1
- package/dist/lib/emoji-row/emoji-row.js +1 -1
- package/dist/lib/emoji-row/emoji-row.js.map +1 -1
- package/dist/types/recipes/conversation_view/emoji_row/emoji_row.vue.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./emoji-row-constants.cjs"),s=require("../../localization/index.cjs"),a=require("../../common/emoji/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),l=require("../emoji/emoji.cjs"),_=require("../button/button.cjs"),d=require("../tooltip/tooltip.cjs"),p={name:"DtRecipeEmojiRow",components:{DtTooltip:d.default,DtButton:_.default,DtEmoji:l.default,DtEmojiTextWrapper:m.default},props:{reactions:{type:Array,default:()=>[],validator:i=>{for(const e of i)if(!n.REACTIONS_ATTRIBUTES.every(o=>e[o]!==void 0))return!1;return!0}}},emits:["emoji-clicked","emoji-hovered"],data(){return{i18n:new s.DialtoneLocalization}},methods:{emojiClicked(i){this.$emit("emoji-clicked",i.emojiUnicodeOrShortname)},emojiHovered(i,e){this.$emit("emoji-hovered",{reaction:i.emojiUnicodeOrShortname,state:e})},reactionLabel(i){return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL",{reaction:a.getEmojiShortCode(i.emojiUnicodeOrShortname),personCount:i.num})}}};var u=function(){var e=this,t=e._self._c;return t("span",{staticClass:"d-recipe-emoji-row"},[e._l(e.reactions,function(o){return t("span",{key:o.unicodeOutput},[t("dt-tooltip",{staticClass:"d-recipe-emoji-row__tooltip",attrs:{"content-class":"d-recipe-emoji-row__tooltip-content","fallback-placements":["top","bottom"],sticky:"popper"},on:{shown:r=>e.emojiHovered(o,r)},scopedSlots:e._u([{key:"anchor",fn:function({attrs:r}){return[t("dt-button",{class:["d-recipe-emoji-row__reaction",o.isSelected?"d-recipe-emoji-row__reaction--selected":""],attrs:{importance:"clear",size:"sm","data-qa":"feed-item-reaction-button","aria-label":e.reactionLabel(o),attrs:r},on:{click:function(v){return e.emojiClicked(o)}}},[t("span",{staticClass:"d-recipe-emoji-row__emoji"},[t("dt-emoji",{staticClass:"d-recipe-emoji-row__emoji",attrs:{"img-class":"d-recipe-emoji-row__emoji-img",code:o.emojiUnicodeOrShortname}})],1),t("span",{staticClass:"d-recipe-emoji-row__reaction-number"},[e._v(" "+e._s(o.num)+" ")])])]}}],null,!0)},[t("span",{attrs:{"aria-hidden":"true"}},[t("dt-emoji-text-wrapper",{attrs:{size:"800"}},[t("p",{staticClass:"d-recipe-emoji-row__tooltip-emoji"},[e._v(" "+e._s(o.emojiUnicodeOrShortname)+" ")]),t("p",{staticClass:"d-recipe-emoji-row__tooltip-names"},[e._v(" "+e._s(o.names)+" "),t("span",{staticClass:"d-recipe-emoji-row__tooltip-label",domProps:{textContent:e._s(e.reactionLabel(o))}})])])],1)])],1)}),e._t("picker")],2)},j=[],f=c.n(p,u,j);const b=f.exports;exports.default=b;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./emoji-row-constants.cjs"),s=require("../../localization/index.cjs"),a=require("../../common/emoji/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),l=require("../emoji/emoji.cjs"),_=require("../button/button.cjs"),d=require("../tooltip/tooltip.cjs"),p={name:"DtRecipeEmojiRow",components:{DtTooltip:d.default,DtButton:_.default,DtEmoji:l.default,DtEmojiTextWrapper:m.default},props:{reactions:{type:Array,default:()=>[],validator:i=>{for(const e of i)if(!n.REACTIONS_ATTRIBUTES.every(o=>e[o]!==void 0))return!1;return!0}}},emits:["emoji-clicked","emoji-hovered"],data(){return{i18n:new s.DialtoneLocalization}},methods:{emojiClicked(i){this.$emit("emoji-clicked",i.emojiUnicodeOrShortname)},emojiHovered(i,e){this.$emit("emoji-hovered",{reaction:i.emojiUnicodeOrShortname,state:e})},reactionLabel(i){return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL",{reaction:a.getEmojiShortCode(i.emojiUnicodeOrShortname),personCount:i.num})}}};var u=function(){var e=this,t=e._self._c;return t("span",{staticClass:"d-recipe-emoji-row"},[e._l(e.reactions,function(o){return t("span",{key:o.unicodeOutput},[t("dt-tooltip",{staticClass:"d-recipe-emoji-row__tooltip",attrs:{"content-class":"d-recipe-emoji-row__tooltip-content","fallback-placements":["top","bottom"],sticky:"popper"},on:{shown:r=>e.emojiHovered(o,r)},scopedSlots:e._u([{key:"anchor",fn:function({attrs:r}){return[t("dt-button",{class:["d-recipe-emoji-row__reaction",o.isSelected?"d-recipe-emoji-row__reaction--selected":""],attrs:{importance:"clear",size:"sm","data-qa":"feed-item-reaction-button","aria-label":e.reactionLabel(o),attrs:r},on:{click:function(v){return e.emojiClicked(o)}}},[t("span",{staticClass:"d-recipe-emoji-row__emoji"},[t("dt-emoji",{staticClass:"d-recipe-emoji-row__emoji",attrs:{"img-class":"d-recipe-emoji-row__emoji-img",code:o.emojiUnicodeOrShortname}})],1),t("span",{staticClass:"d-recipe-emoji-row__reaction-number"},[e._v(" "+e._s(o.num)+" ")])])]}}],null,!0)},[t("span",{attrs:{"aria-hidden":"true"}},[t("dt-emoji-text-wrapper",{attrs:{size:"800"}},[t("p",{staticClass:"d-recipe-emoji-row__tooltip-emoji"},[e._v(" "+e._s(o.emojiUnicodeOrShortname)+" ")]),t("br"),t("p",{staticClass:"d-recipe-emoji-row__tooltip-names"},[e._v(" "+e._s(o.names)+" "),t("span",{staticClass:"d-recipe-emoji-row__tooltip-label",domProps:{textContent:e._s(e.reactionLabel(o))}})])])],1)])],1)}),e._t("picker")],2)},j=[],f=c.n(p,u,j);const b=f.exports;exports.default=b;
|
|
2
2
|
//# sourceMappingURL=emoji-row.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji-row.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n :fallback-placements=\"['top', 'bottom']\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"800\">\n <p class=\"d-recipe-emoji-row__tooltip-emoji\">\n {{ reaction.emojiUnicodeOrShortname }}\n </p>\n <p class=\"d-recipe-emoji-row__tooltip-names\">\n {{ reaction.names }}\n <span\n class=\"d-recipe-emoji-row__tooltip-label\"\n v-text=\"reactionLabel(reaction)\"\n />\n </p>\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n class=\"d-recipe-emoji-row__emoji\"\n img-class=\"d-recipe-emoji-row__emoji-img\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtEmoji } from '@/components/emoji';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DialtoneLocalization } from '@/localization';\nimport { getEmojiShortCode } from '@/common/emoji';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n props: {\n /**\n * Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n\n reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n reaction: getEmojiShortCode(reaction.emojiUnicodeOrShortname),\n personCount: reaction.num,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state","getEmojiShortCode"],"mappings":"
|
|
1
|
+
{"version":3,"file":"emoji-row.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n :fallback-placements=\"['top', 'bottom']\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"800\">\n <p class=\"d-recipe-emoji-row__tooltip-emoji\">\n {{ reaction.emojiUnicodeOrShortname }}\n </p>\n <br>\n <p class=\"d-recipe-emoji-row__tooltip-names\">\n {{ reaction.names }}\n <span\n class=\"d-recipe-emoji-row__tooltip-label\"\n v-text=\"reactionLabel(reaction)\"\n />\n </p>\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n class=\"d-recipe-emoji-row__emoji\"\n img-class=\"d-recipe-emoji-row__emoji-img\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtEmoji } from '@/components/emoji';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DialtoneLocalization } from '@/localization';\nimport { getEmojiShortCode } from '@/common/emoji';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n props: {\n /**\n * Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n\n reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n reaction: getEmojiShortCode(reaction.emojiUnicodeOrShortname),\n personCount: reaction.num,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state","getEmojiShortCode"],"mappings":"qcAsEAA,EAAA,CACA,KAAA,mBAEA,WAAA,CAAA,UAAAC,EAAAA,QAAA,SAAAC,UAAA,QAAAC,EAAAA,QAAA,mBAAAC,EAAAA,OAAA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAA,CACA,UAAAC,KAAAD,EAEA,GAAA,CADAE,EAAAA,qBAAA,MAAAC,GAAAF,EAAAE,CAAA,IAAA,MAAA,EACA,MAAA,GAEA,MAAA,EACA,CACA,CACA,EAEA,MAAA,CACA,gBACA,eACA,EAEA,MAAA,CACA,MAAA,CACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,QAAA,CACA,aAAAH,EAAA,CACA,KAAA,MAAA,gBAAAA,EAAA,uBAAA,CACA,EAEA,aAAAA,EAAAI,EAAA,CACA,KAAA,MAAA,gBAAA,CACA,SAAAJ,EAAA,wBACA,MAAAI,CACA,CAAA,CACA,EAEA,cAAAJ,EAAA,CACA,OAAA,KAAA,KAAA,GAAA,oCAAA,CACA,SAAAK,EAAAA,kBAAAL,EAAA,uBAAA,EACA,YAAAA,EAAA,GACA,CAAA,CACA,CACA,CACA"}
|
|
@@ -60,7 +60,7 @@ var j = function() {
|
|
|
60
60
|
], attrs: { importance: "clear", size: "sm", "data-qa": "feed-item-reaction-button", "aria-label": e.reactionLabel(t), attrs: r }, on: { click: function(v) {
|
|
61
61
|
return e.emojiClicked(t);
|
|
62
62
|
} } }, [o("span", { staticClass: "d-recipe-emoji-row__emoji" }, [o("dt-emoji", { staticClass: "d-recipe-emoji-row__emoji", attrs: { "img-class": "d-recipe-emoji-row__emoji-img", code: t.emojiUnicodeOrShortname } })], 1), o("span", { staticClass: "d-recipe-emoji-row__reaction-number" }, [e._v(" " + e._s(t.num) + " ")])])];
|
|
63
|
-
} }], null, !0) }, [o("span", { attrs: { "aria-hidden": "true" } }, [o("dt-emoji-text-wrapper", { attrs: { size: "800" } }, [o("p", { staticClass: "d-recipe-emoji-row__tooltip-emoji" }, [e._v(" " + e._s(t.emojiUnicodeOrShortname) + " ")]), o("p", { staticClass: "d-recipe-emoji-row__tooltip-names" }, [e._v(" " + e._s(t.names) + " "), o("span", { staticClass: "d-recipe-emoji-row__tooltip-label", domProps: { textContent: e._s(e.reactionLabel(t)) } })])])], 1)])], 1);
|
|
63
|
+
} }], null, !0) }, [o("span", { attrs: { "aria-hidden": "true" } }, [o("dt-emoji-text-wrapper", { attrs: { size: "800" } }, [o("p", { staticClass: "d-recipe-emoji-row__tooltip-emoji" }, [e._v(" " + e._s(t.emojiUnicodeOrShortname) + " ")]), o("br"), o("p", { staticClass: "d-recipe-emoji-row__tooltip-names" }, [e._v(" " + e._s(t.names) + " "), o("span", { staticClass: "d-recipe-emoji-row__tooltip-label", domProps: { textContent: e._s(e.reactionLabel(t)) } })])])], 1)])], 1);
|
|
64
64
|
}), e._t("picker")], 2);
|
|
65
65
|
}, u = [], f = /* @__PURE__ */ m(
|
|
66
66
|
l,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji-row.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n :fallback-placements=\"['top', 'bottom']\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"800\">\n <p class=\"d-recipe-emoji-row__tooltip-emoji\">\n {{ reaction.emojiUnicodeOrShortname }}\n </p>\n <p class=\"d-recipe-emoji-row__tooltip-names\">\n {{ reaction.names }}\n <span\n class=\"d-recipe-emoji-row__tooltip-label\"\n v-text=\"reactionLabel(reaction)\"\n />\n </p>\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n class=\"d-recipe-emoji-row__emoji\"\n img-class=\"d-recipe-emoji-row__emoji-img\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtEmoji } from '@/components/emoji';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DialtoneLocalization } from '@/localization';\nimport { getEmojiShortCode } from '@/common/emoji';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n props: {\n /**\n * Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n\n reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n reaction: getEmojiShortCode(reaction.emojiUnicodeOrShortname),\n personCount: reaction.num,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state","getEmojiShortCode"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"emoji-row.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n <span class=\"d-recipe-emoji-row\">\n <span\n v-for=\"reaction in reactions\"\n :key=\"reaction.unicodeOutput\"\n >\n <dt-tooltip\n class=\"d-recipe-emoji-row__tooltip\"\n content-class=\"d-recipe-emoji-row__tooltip-content\"\n :fallback-placements=\"['top', 'bottom']\"\n sticky=\"popper\"\n @shown=\"(shown) => emojiHovered(reaction, shown)\"\n >\n <span aria-hidden=\"true\">\n <dt-emoji-text-wrapper size=\"800\">\n <p class=\"d-recipe-emoji-row__tooltip-emoji\">\n {{ reaction.emojiUnicodeOrShortname }}\n </p>\n <br>\n <p class=\"d-recipe-emoji-row__tooltip-names\">\n {{ reaction.names }}\n <span\n class=\"d-recipe-emoji-row__tooltip-label\"\n v-text=\"reactionLabel(reaction)\"\n />\n </p>\n </dt-emoji-text-wrapper>\n </span>\n <template #anchor=\"{ attrs }\">\n <dt-button\n importance=\"clear\"\n size=\"sm\"\n data-qa=\"feed-item-reaction-button\"\n :class=\"[\n 'd-recipe-emoji-row__reaction',\n reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n ]\"\n :aria-label=\"reactionLabel(reaction)\"\n :attrs=\"attrs\"\n @click=\"emojiClicked(reaction)\"\n >\n <span class=\"d-recipe-emoji-row__emoji\">\n <dt-emoji\n class=\"d-recipe-emoji-row__emoji\"\n img-class=\"d-recipe-emoji-row__emoji-img\"\n :code=\"reaction.emojiUnicodeOrShortname\"\n />\n </span>\n <span class=\"d-recipe-emoji-row__reaction-number\">\n {{ reaction.num }}\n </span>\n </dt-button>\n </template>\n </dt-tooltip>\n </span>\n <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\n <!-- @slot Slot for emoji picker component, including the anchor. -->\n <slot name=\"picker\" />\n </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtEmoji } from '@/components/emoji';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DialtoneLocalization } from '@/localization';\nimport { getEmojiShortCode } from '@/common/emoji';\n\nexport default {\n name: 'DtRecipeEmojiRow',\n\n components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n props: {\n /**\n * Provide an array of reaction objects to be shown.\n */\n reactions: {\n type: Array,\n default: () => [],\n validator: (reactions) => {\n for (const reaction of reactions) {\n const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined);\n if (!validInput) return false;\n }\n return true;\n },\n },\n },\n\n emits: [\n 'emoji-clicked',\n 'emoji-hovered',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n methods: {\n emojiClicked (reaction) {\n this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n },\n\n emojiHovered (reaction, state) {\n this.$emit('emoji-hovered', {\n reaction: reaction.emojiUnicodeOrShortname,\n state,\n });\n },\n\n reactionLabel (reaction) {\n return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n reaction: getEmojiShortCode(reaction.emojiUnicodeOrShortname),\n personCount: reaction.num,\n });\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","DialtoneLocalization","state","getEmojiShortCode"],"mappings":";;;;;;;;AAsEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,WAAAC,GAAA,UAAAC,GAAA,SAAAC,GAAA,oBAAAC,EAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,mBAAAC,KAAAD;AAEA,cAAA,CADAE,EAAA,MAAA,CAAAC,MAAAF,EAAAE,CAAA,MAAA,MAAA,EACA,QAAA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAAH,GAAA;AACA,WAAA,MAAA,iBAAAA,EAAA,uBAAA;AAAA,IACA;AAAA,IAEA,aAAAA,GAAAI,GAAA;AACA,WAAA,MAAA,iBAAA;AAAA,QACA,UAAAJ,EAAA;AAAA,QACA,OAAAI;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,cAAAJ,GAAA;AACA,aAAA,KAAA,KAAA,GAAA,qCAAA;AAAA,QACA,UAAAK,EAAAL,EAAA,uBAAA;AAAA,QACA,aAAAA,EAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"emoji_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"names":[],"mappings":"AA4DA;;;;;;;;;;;;;;;;;;;;;;;qCAmIqC,gBAAgB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "2.198.
|
|
3
|
+
"version": "2.198.4",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"overlayscrollbars": "2.10.0",
|
|
45
45
|
"regex-combined-emojis": "1.6.0",
|
|
46
46
|
"tippy.js": "6.3.7",
|
|
47
|
-
"@dialpad/dialtone-
|
|
48
|
-
"@dialpad/dialtone-
|
|
47
|
+
"@dialpad/dialtone-icons": "4.44.0",
|
|
48
|
+
"@dialpad/dialtone-emojis": "1.2.2"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@storybook/addon-a11y": "7.6.20",
|
|
@@ -57,12 +57,12 @@
|
|
|
57
57
|
"react": "17.0.2",
|
|
58
58
|
"storybook-dark-mode": "^3.0.3",
|
|
59
59
|
"vue": "^2.7.15",
|
|
60
|
-
"@dialpad/dialtone-css": "8.64.
|
|
60
|
+
"@dialpad/dialtone-css": "8.64.4",
|
|
61
61
|
"@dialpad/generator-dialtone": "0.1.0"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"vue": ">=2.6",
|
|
65
|
-
"@dialpad/dialtone-css": "^8.64.
|
|
65
|
+
"@dialpad/dialtone-css": "^8.64.4"
|
|
66
66
|
},
|
|
67
67
|
"bugs": {
|
|
68
68
|
"email": "dialtone@dialpad.com"
|