@dialpad/dialtone 9.56.1 → 9.56.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone.css +13 -4
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-light.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/css/variables-tmo-dark.css +1 -1
- package/dist/tokens/css/variables-tmo-light.css +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-light.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/tokens/less/variables-tmo-dark.less +1 -1
- package/dist/tokens/less/variables-tmo-light.less +1 -1
- package/dist/vue2/lib/combobox-multi-select.cjs +3 -1
- package/dist/vue2/lib/combobox-multi-select.cjs.map +1 -1
- package/dist/vue2/lib/combobox-multi-select.js +3 -1
- package/dist/vue2/lib/combobox-multi-select.js.map +1 -1
- package/dist/vue2/lib/emoji-text-wrapper.cjs +9 -6
- package/dist/vue2/lib/emoji-text-wrapper.cjs.map +1 -1
- package/dist/vue2/lib/emoji-text-wrapper.js +9 -6
- package/dist/vue2/lib/emoji-text-wrapper.js.map +1 -1
- package/dist/vue2/lib/emoji.cjs +1 -1
- package/dist/vue2/lib/emoji.cjs.map +1 -1
- package/dist/vue2/lib/emoji.js +1 -1
- package/dist/vue2/lib/emoji.js.map +1 -1
- package/dist/vue2/style.css +10 -14
- package/dist/vue2/types/components/emoji_text_wrapper/emoji_text_wrapper.vue.d.ts.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.cjs +3 -1
- package/dist/vue3/lib/combobox-multi-select.cjs.map +1 -1
- package/dist/vue3/lib/combobox-multi-select.js +3 -1
- package/dist/vue3/lib/combobox-multi-select.js.map +1 -1
- package/dist/vue3/lib/emoji-text-wrapper.cjs +6 -4
- package/dist/vue3/lib/emoji-text-wrapper.cjs.map +1 -1
- package/dist/vue3/lib/emoji-text-wrapper.js +6 -4
- package/dist/vue3/lib/emoji-text-wrapper.js.map +1 -1
- package/dist/vue3/lib/emoji.cjs +1 -1
- package/dist/vue3/lib/emoji.cjs.map +1 -1
- package/dist/vue3/lib/emoji.js +1 -1
- package/dist/vue3/lib/emoji.js.map +1 -1
- package/dist/vue3/style.css +10 -14
- package/dist/vue3/types/components/emoji_text_wrapper/emoji_text_wrapper.vue.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const
|
|
1
|
+
{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return h(DtEmoji, { code: item, size: this.size });\n }\n return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /**\n * Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode|*}\n */\n searchVNodes (VNode) {\n if (typeof VNode === 'string') return this.searchCodes(VNode);\n if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /**\n * Find codes in text.\n * @param textContent string\n * @returns {Array<VNode|string>|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n if (replaceList.length === 0) return textContent;\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render () {\n const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;AAUK,MAAA,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,mBAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY;AAAQ,eAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAO,EAAE,SAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU;AAAU,eAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS;AAAU,eAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa;AAAW,eAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAO,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAa,eAAe,WAAW;AAC7C,YAAM,SAAS,WAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW;AAAG,eAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;"}
|
package/dist/vue3/lib/emoji.cjs
CHANGED
|
@@ -130,7 +130,7 @@ const _hoisted_1 = ["aria-label", "alt", "title", "src"];
|
|
|
130
130
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
131
131
|
const _component_dt_skeleton = vue.resolveComponent("dt-skeleton");
|
|
132
132
|
return vue.openBlock(), vue.createElementBlock("span", {
|
|
133
|
-
class: vue.normalizeClass(["d-emoji
|
|
133
|
+
class: vue.normalizeClass(["d-emoji d-icon", $options.emojiSize])
|
|
134
134
|
}, [
|
|
135
135
|
vue.withDirectives(vue.createVNode(_component_dt_skeleton, {
|
|
136
136
|
offset: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji
|
|
1
|
+
{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /**\n * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n */\n code: {\n type: String,\n required: true,\n },\n\n /**\n * The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n\n /**\n * Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n }\n\n if (['100', '200'].includes(this.size)) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData","_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}
|
package/dist/vue3/lib/emoji.js
CHANGED
|
@@ -128,7 +128,7 @@ const _hoisted_1 = ["aria-label", "alt", "title", "src"];
|
|
|
128
128
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
129
129
|
const _component_dt_skeleton = resolveComponent("dt-skeleton");
|
|
130
130
|
return openBlock(), createElementBlock("span", {
|
|
131
|
-
class: normalizeClass(["d-emoji
|
|
131
|
+
class: normalizeClass(["d-emoji d-icon", $options.emojiSize])
|
|
132
132
|
}, [
|
|
133
133
|
withDirectives(createVNode(_component_dt_skeleton, {
|
|
134
134
|
offset: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji.js","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji
|
|
1
|
+
{"version":3,"file":"emoji.js","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /**\n * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n */\n code: {\n type: String,\n required: true,\n },\n\n /**\n * The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n\n /**\n * Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n }\n\n if (['100', '200'].includes(this.size)) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}
|
package/dist/vue3/style.css
CHANGED
|
@@ -1183,7 +1183,6 @@ body > .os-scrollbar {
|
|
|
1183
1183
|
height: var(--dt-size-500);
|
|
1184
1184
|
}
|
|
1185
1185
|
.dt-leftbar-row[data-v-4793665c] .dt-leftbar-row__description {
|
|
1186
|
-
display: block;
|
|
1187
1186
|
overflow: hidden;
|
|
1188
1187
|
color: var(--leftbar-row-description-color-foreground);
|
|
1189
1188
|
font-weight: var(--leftbar-row-description-font-weight);
|
|
@@ -1193,7 +1192,6 @@ body > .os-scrollbar {
|
|
|
1193
1192
|
text-overflow: ellipsis;
|
|
1194
1193
|
}
|
|
1195
1194
|
.dt-leftbar-row[data-v-4793665c] .dt-leftbar-row__status {
|
|
1196
|
-
display: block;
|
|
1197
1195
|
padding-bottom: var(--dt-space-100);
|
|
1198
1196
|
overflow: hidden;
|
|
1199
1197
|
color: var(--leftbar-row-status-color-foreground);
|
|
@@ -1204,7 +1202,7 @@ body > .os-scrollbar {
|
|
|
1204
1202
|
}
|
|
1205
1203
|
.dt-leftbar-row[data-v-4793665c] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
|
|
1206
1204
|
color: var(--dt-theme-sidebar-status-color-foreground);
|
|
1207
|
-
content:
|
|
1205
|
+
content: " • ";
|
|
1208
1206
|
}
|
|
1209
1207
|
.dt-leftbar-row__icon-cc[data-v-4793665c] {
|
|
1210
1208
|
width: calc(var(--dt-size-300) * 3.5);
|
|
@@ -1488,7 +1486,6 @@ body > .os-scrollbar {
|
|
|
1488
1486
|
height: var(--dt-size-500);
|
|
1489
1487
|
}
|
|
1490
1488
|
.dt-leftbar-row[data-v-094eaef1] .dt-leftbar-row__description {
|
|
1491
|
-
display: block;
|
|
1492
1489
|
overflow: hidden;
|
|
1493
1490
|
color: var(--leftbar-row-description-color-foreground);
|
|
1494
1491
|
font-weight: var(--leftbar-row-description-font-weight);
|
|
@@ -1498,7 +1495,6 @@ body > .os-scrollbar {
|
|
|
1498
1495
|
text-overflow: ellipsis;
|
|
1499
1496
|
}
|
|
1500
1497
|
.dt-leftbar-row[data-v-094eaef1] .dt-leftbar-row__status {
|
|
1501
|
-
display: block;
|
|
1502
1498
|
padding-bottom: var(--dt-space-100);
|
|
1503
1499
|
overflow: hidden;
|
|
1504
1500
|
color: var(--leftbar-row-status-color-foreground);
|
|
@@ -1509,7 +1505,7 @@ body > .os-scrollbar {
|
|
|
1509
1505
|
}
|
|
1510
1506
|
.dt-leftbar-row[data-v-094eaef1] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
|
|
1511
1507
|
color: var(--dt-theme-sidebar-status-color-foreground);
|
|
1512
|
-
content:
|
|
1508
|
+
content: " • ";
|
|
1513
1509
|
}
|
|
1514
1510
|
.dt-leftbar-row__icon-cc[data-v-094eaef1] {
|
|
1515
1511
|
width: calc(var(--dt-size-300) * 3.5);
|
|
@@ -2151,11 +2147,11 @@ body > .os-scrollbar {
|
|
|
2151
2147
|
border-width: var(--dt-size-350);
|
|
2152
2148
|
border-color: var(--dt-color-border-subtle);
|
|
2153
2149
|
}
|
|
2154
|
-
.combobox__input-wrapper[data-v-
|
|
2150
|
+
.combobox__input-wrapper[data-v-613edb68] {
|
|
2155
2151
|
position: relative;
|
|
2156
2152
|
display: block;
|
|
2157
2153
|
}
|
|
2158
|
-
.combobox__chip-wrapper[data-v-
|
|
2154
|
+
.combobox__chip-wrapper[data-v-613edb68] {
|
|
2159
2155
|
position: absolute;
|
|
2160
2156
|
margin-left: var(--dt-space-200);
|
|
2161
2157
|
margin-right: var(--dt-space-200);
|
|
@@ -2164,26 +2160,26 @@ body > .os-scrollbar {
|
|
|
2164
2160
|
max-height: initial;
|
|
2165
2161
|
overflow-y: visible;
|
|
2166
2162
|
}
|
|
2167
|
-
.combobox__chip-wrapper-md--collapsed[data-v-
|
|
2163
|
+
.combobox__chip-wrapper-md--collapsed[data-v-613edb68] {
|
|
2168
2164
|
max-height: 2.8rem;
|
|
2169
2165
|
overflow-y: hidden;
|
|
2170
2166
|
}
|
|
2171
|
-
.combobox__chip-wrapper-sm--collapsed[data-v-
|
|
2172
|
-
.combobox__chip-wrapper-xs--collapsed[data-v-
|
|
2167
|
+
.combobox__chip-wrapper-sm--collapsed[data-v-613edb68],
|
|
2168
|
+
.combobox__chip-wrapper-xs--collapsed[data-v-613edb68] {
|
|
2173
2169
|
max-height: 2.5rem;
|
|
2174
2170
|
overflow-y: hidden;
|
|
2175
2171
|
}
|
|
2176
|
-
.combobox__chip[data-v-
|
|
2172
|
+
.combobox__chip[data-v-613edb68] {
|
|
2177
2173
|
margin-top: var(--dt-space-300);
|
|
2178
2174
|
margin-left: var(--dt-space-200);
|
|
2179
2175
|
margin-right: var(--dt-space-200);
|
|
2180
2176
|
z-index: var(--zi-base1);
|
|
2181
2177
|
max-width: var(--dt-size-100-percent);
|
|
2182
2178
|
}
|
|
2183
|
-
.combobox__input[data-v-
|
|
2179
|
+
.combobox__input[data-v-613edb68] {
|
|
2184
2180
|
flex-grow: 1;
|
|
2185
2181
|
}
|
|
2186
|
-
.combobox__list--loading[data-v-
|
|
2182
|
+
.combobox__list--loading[data-v-613edb68] {
|
|
2187
2183
|
text-align: center;
|
|
2188
2184
|
padding-top: var(--dt-space-500);
|
|
2189
2185
|
padding-bottom: var(--dt-space-500);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js"],"names":[],"mappings":";IAmBI;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;IAmBH;;;OAGG;yDADU,MAAM,QAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js"],"names":[],"mappings":";IAmBI;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;IAmBH;;;OAGG;yDADU,MAAM,QAAM,MAAM,CAAC;IAkBhC;;;;OAIG;8BADU,SAAO;;IAgBpB;;;;OAIG;mCADU,MAAM,QAAM,MAAM,CAAC,GAAC,MAAM;;IAvEvC;;OAEG;;;;;IAMH;;OAEG"}
|