@dialpad/dialtone 9.119.1 → 9.121.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.
Files changed (30) hide show
  1. package/dist/css/dialtone-default-theme.css +8 -0
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone.css +8 -0
  4. package/dist/css/dialtone.min.css +1 -1
  5. package/dist/tokens/doc.json +10231 -10231
  6. package/dist/vue2/component-documentation.json +1 -1
  7. package/dist/vue2/lib/emoji-picker/emoji-picker-constants.cjs +1 -1
  8. package/dist/vue2/lib/emoji-picker/emoji-picker-constants.cjs.map +1 -1
  9. package/dist/vue2/lib/emoji-picker/emoji-picker-constants.js +10 -9
  10. package/dist/vue2/lib/emoji-picker/emoji-picker-constants.js.map +1 -1
  11. package/dist/vue2/lib/emoji-picker/emoji-picker.cjs +1 -1
  12. package/dist/vue2/lib/emoji-picker/emoji-picker.cjs.map +1 -1
  13. package/dist/vue2/lib/emoji-picker/emoji-picker.js +124 -65
  14. package/dist/vue2/lib/emoji-picker/emoji-picker.js.map +1 -1
  15. package/dist/vue2/lib/hovercard/hovercard.cjs +1 -1
  16. package/dist/vue2/lib/hovercard/hovercard.cjs.map +1 -1
  17. package/dist/vue2/lib/hovercard/hovercard.js +31 -15
  18. package/dist/vue2/lib/hovercard/hovercard.js.map +1 -1
  19. package/dist/vue2/types/components/emoji_picker/emoji_picker.vue.d.ts.map +1 -1
  20. package/dist/vue2/types/components/emoji_picker/emoji_picker_constants.d.ts +1 -0
  21. package/dist/vue2/types/components/emoji_picker/modules/emoji_description.vue.d.ts +3 -1
  22. package/dist/vue2/types/components/emoji_picker/modules/emoji_description.vue.d.ts.map +1 -1
  23. package/dist/vue2/types/components/emoji_picker/modules/emoji_selector.vue.d.ts +11 -1
  24. package/dist/vue2/types/components/hovercard/hovercard.vue.d.ts.map +1 -1
  25. package/dist/vue3/lib/hovercard/hovercard.cjs +1 -1
  26. package/dist/vue3/lib/hovercard/hovercard.cjs.map +1 -1
  27. package/dist/vue3/lib/hovercard/hovercard.js +57 -43
  28. package/dist/vue3/lib/hovercard/hovercard.js.map +1 -1
  29. package/dist/vue3/types/components/hovercard/hovercard.vue.d.ts.map +1 -1
  30. package/package.json +4 -4
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),m=require("../../common/utils/index.cjs"),r=require("../tooltip/tooltip-constants.cjs"),f=require("../popover/popover-constants.cjs"),y=require("../popover/popover.cjs"),g={__name:"hovercard",props:{transition:{type:Boolean,default:!1},open:{type:Boolean,default:null},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(e){return r.TOOLTIP_DIRECTIONS.includes(e)}},padding:{type:String,default:"large",validator:e=>Object.keys(f.POPOVER_PADDING_CLASSES).some(n=>n===e)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return m.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>f.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},enterDelay:{type:Number,default:r.TOOLTIP_DELAY_MS},leaveDelay:{type:Number,default:r.TOOLTIP_DELAY_MS}},emits:["opened"],setup(e){const n=e,o=t.ref(n.open),s=t.ref(null),i=t.ref(null);t.watch(()=>n.open,a=>{o.value=a},{immediate:!0});function p(){s.value=setTimeout(()=>{o.value=!0},n.enterDelay)}function v(){i.value=setTimeout(()=>{o.value=!1},n.leaveDelay)}function u(){n.open===null&&(clearTimeout(i.value),p())}function d(){n.open===null&&(clearTimeout(s.value),v())}return(a,c)=>(t.openBlock(),t.createBlock(t.unref(y.default),{id:e.id,open:o.value,placement:e.placement,"content-class":e.contentClass,"dialog-class":e.dialogClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?"fade":null,offset:e.offset,modal:!1,"initial-focus-element":"none","header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,"data-qa":"dt-hovercard","enter-delay":e.enterDelay,"leave-delay":e.leaveDelay,onOpened:c[0]||(c[0]=l=>a.$emit("opened",l)),onMouseenterPopover:u,onMouseleavePopover:d,onMouseenterPopoverAnchor:u,onMouseleavePopoverAnchor:d},{anchor:t.withCtx(({attrs:l})=>[t.renderSlot(a.$slots,"anchor",t.normalizeProps(t.guardReactiveProps(l)))]),content:t.withCtx(()=>[t.renderSlot(a.$slots,"content")]),headerContent:t.withCtx(()=>[t.renderSlot(a.$slots,"headerContent")]),footerContent:t.withCtx(()=>[t.renderSlot(a.$slots,"footerContent")]),_:3},8,["id","open","placement","content-class","dialog-class","fallback-placements","padding","transition","offset","header-class","footer-class","append-to","enter-delay","leave-delay"]))}};exports.default=g;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=require("../../common/utils/index.cjs"),c=require("../tooltip/tooltip-constants.cjs"),m=require("../popover/popover-constants.cjs"),g=require("../popover/popover.cjs"),C={__name:"hovercard",props:{transition:{type:Boolean,default:!1},open:{type:Boolean,default:null},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(t){return c.TOOLTIP_DIRECTIONS.includes(t)}},padding:{type:String,default:"large",validator:t=>Object.keys(m.POPOVER_PADDING_CLASSES).some(a=>a===t)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return b.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>m.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},enterDelay:{type:Number,default:c.TOOLTIP_DELAY_MS},leaveDelay:{type:Number,default:c.TOOLTIP_DELAY_MS}},emits:["opened"],setup(t){const a=t,l=e.ref(a.open),s=e.ref(null),i=e.ref(null),d=e.ref(null),u=e.ref(null),f=e.ref(null);e.onMounted(()=>{e.nextTick(()=>{var n,r,o;d.value=(o=(r=(n=f.value)==null?void 0:n.$refs)==null?void 0:r.anchor)==null?void 0:o.firstElementChild,u.value=new MutationObserver(()=>{d.value&&!d.value.isConnected&&(l.value=!1)}),u.value.observe(document.body,{childList:!0,subtree:!0})})}),e.onBeforeUnmount(()=>{u.value&&u.value.disconnect(),clearTimeout(s),clearTimeout(i)}),e.watch(()=>a.open,n=>{l.value=n},{immediate:!0});function y(){s.value=setTimeout(()=>{l.value=!0},a.enterDelay)}function T(){i.value=setTimeout(()=>{l.value=!1},a.leaveDelay)}function v(){a.open===null&&(clearTimeout(i.value),y())}function p(){a.open===null&&(clearTimeout(s.value),T())}return(n,r)=>(e.openBlock(),e.createBlock(e.unref(g.default),{id:t.id,ref_key:"popover",ref:f,open:l.value,placement:t.placement,"content-class":t.contentClass,"dialog-class":t.dialogClass,"fallback-placements":t.fallbackPlacements,padding:t.padding,transition:t.transition?"fade":null,offset:t.offset,modal:!1,"initial-focus-element":"none","header-class":t.headerClass,"footer-class":t.footerClass,"append-to":t.appendTo,"data-qa":"dt-hovercard","enter-delay":t.enterDelay,"leave-delay":t.leaveDelay,onOpened:r[0]||(r[0]=o=>n.$emit("opened",o)),onMouseenterPopover:v,onMouseleavePopover:p,onMouseenterPopoverAnchor:v,onMouseleavePopoverAnchor:p},{anchor:e.withCtx(({attrs:o})=>[e.renderSlot(n.$slots,"anchor",e.normalizeProps(e.guardReactiveProps(o)))]),content:e.withCtx(()=>[e.renderSlot(n.$slots,"content")]),headerContent:e.withCtx(()=>[e.renderSlot(n.$slots,"headerContent")]),footerContent:e.withCtx(()=>[e.renderSlot(n.$slots,"footerContent")]),_:3},8,["id","open","placement","content-class","dialog-class","fallback-placements","padding","transition","offset","header-class","footer-class","append-to","enter-delay","leave-delay"]))}};exports.default=C;
2
2
  //# sourceMappingURL=hovercard.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-popover\n :id=\"id\"\n :open=\"hovercardOpen\"\n :placement=\"placement\"\n :content-class=\"contentClass\"\n :dialog-class=\"dialogClass\"\n :fallback-placements=\"fallbackPlacements\"\n :padding=\"padding\"\n :transition=\"transition ? 'fade' : null\"\n :offset=\"offset\"\n :modal=\"false\"\n initial-focus-element=\"none\"\n :header-class=\"headerClass\"\n :footer-class=\"footerClass\"\n :append-to=\"appendTo\"\n data-qa=\"dt-hovercard\"\n :enter-delay=\"enterDelay\"\n :leave-delay=\"leaveDelay\"\n @opened=\"(e) => ($emit('opened', e))\"\n @mouseenter-popover=\"onMouseEnter\"\n @mouseleave-popover=\"onMouseLeave\"\n @mouseenter-popover-anchor=\"onMouseEnter\"\n @mouseleave-popover-anchor=\"onMouseLeave\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n <slot\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <!-- @slot Slot for the content that is displayed in the hovercard. -->\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <!-- @slot Slot for hovercard header content -->\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <!-- @slot Slot for the footer content. -->\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n /**\n * Fade transition when the content display is toggled.\n * @type boolean\n * @values true, false\n */\n transition: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\".\n * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top-start',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * Padding size class for the popover content.\n * @values none, small, medium, large\n */\n padding: {\n type: String,\n default: 'large',\n validator: (padding) => {\n return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Additional class name for the header content wrapper element.\n */\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the footer content wrapper element.\n */\n footerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element.\n */\n dialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * The enter delay in milliseconds before the hovercard is shown.\n * @type number\n */\n enterDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n\n /**\n * The leave delay in milliseconds before the hovercard is hidden.\n * @type number\n */\n leaveDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n});\n\ndefineEmits([\n /**\n * Emitted when hovercard is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\n\nwatch(() => props.open, (open) => {\n hovercardOpen.value = open;\n}, { immediate: true });\n\nfunction setInTimer () {\n inTimer.value = setTimeout(() => {\n hovercardOpen.value = true;\n }, props.enterDelay);\n}\n\nfunction setOutTimer () {\n outTimer.value = setTimeout(() => {\n hovercardOpen.value = false;\n }, props.leaveDelay);\n}\n\nfunction onMouseEnter () {\n if (props.open === null) {\n clearTimeout(outTimer.value);\n setInTimer();\n }\n}\n\nfunction onMouseLeave () {\n if (props.open === null) {\n clearTimeout(inTimer.value);\n setOutTimer();\n }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","inTimer","outTimer","watch","open","setInTimer","setOutTimer","onMouseEnter","onMouseLeave"],"mappings":"osCAuDA,MAAMA,EAAQC,EA4JRC,EAAgBC,EAAG,IAACH,EAAM,IAAI,EAC9BI,EAAUD,EAAAA,IAAI,IAAI,EAClBE,EAAWF,EAAAA,IAAI,IAAI,EAEzBG,EAAK,MAAC,IAAMN,EAAM,KAAOO,GAAS,CAChCL,EAAc,MAAQK,CACxB,EAAG,CAAE,UAAW,EAAI,CAAE,EAEtB,SAASC,GAAc,CACrBJ,EAAQ,MAAQ,WAAW,IAAM,CAC/BF,EAAc,MAAQ,EAC1B,EAAKF,EAAM,UAAU,CACrB,CAEA,SAASS,GAAe,CACtBJ,EAAS,MAAQ,WAAW,IAAM,CAChCH,EAAc,MAAQ,EAC1B,EAAKF,EAAM,UAAU,CACrB,CAEA,SAASU,GAAgB,CACnBV,EAAM,OAAS,OACjB,aAAaK,EAAS,KAAK,EAC3BG,IAEJ,CAEA,SAASG,GAAgB,CACnBX,EAAM,OAAS,OACjB,aAAaI,EAAQ,KAAK,EAC1BK,IAEJ"}
1
+ {"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-popover\n :id=\"id\"\n ref=\"popover\"\n :open=\"hovercardOpen\"\n :placement=\"placement\"\n :content-class=\"contentClass\"\n :dialog-class=\"dialogClass\"\n :fallback-placements=\"fallbackPlacements\"\n :padding=\"padding\"\n :transition=\"transition ? 'fade' : null\"\n :offset=\"offset\"\n :modal=\"false\"\n initial-focus-element=\"none\"\n :header-class=\"headerClass\"\n :footer-class=\"footerClass\"\n :append-to=\"appendTo\"\n data-qa=\"dt-hovercard\"\n :enter-delay=\"enterDelay\"\n :leave-delay=\"leaveDelay\"\n @opened=\"(e) => ($emit('opened', e))\"\n @mouseenter-popover=\"onMouseEnter\"\n @mouseleave-popover=\"onMouseLeave\"\n @mouseenter-popover-anchor=\"onMouseEnter\"\n @mouseleave-popover-anchor=\"onMouseLeave\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n <slot\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <!-- @slot Slot for the content that is displayed in the hovercard. -->\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <!-- @slot Slot for hovercard header content -->\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <!-- @slot Slot for the footer content. -->\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n /**\n * Fade transition when the content display is toggled.\n * @type boolean\n * @values true, false\n */\n transition: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\".\n * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top-start',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * Padding size class for the popover content.\n * @values none, small, medium, large\n */\n padding: {\n type: String,\n default: 'large',\n validator: (padding) => {\n return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Additional class name for the header content wrapper element.\n */\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the footer content wrapper element.\n */\n footerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element.\n */\n dialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * The enter delay in milliseconds before the hovercard is shown.\n * @type number\n */\n enterDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n\n /**\n * The leave delay in milliseconds before the hovercard is hidden.\n * @type number\n */\n leaveDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n});\n\ndefineEmits([\n /**\n * Emitted when hovercard is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n nextTick(() => {\n anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n observer.value = new MutationObserver(() => {\n if (anchorEl.value && !anchorEl.value.isConnected) {\n hovercardOpen.value = false;\n }\n });\n\n observer.value.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n});\n\nonBeforeUnmount(() => {\n if (observer.value) {\n observer.value.disconnect();\n }\n clearTimeout(inTimer);\n clearTimeout(outTimer);\n});\nwatch(() => props.open, (open) => {\n hovercardOpen.value = open;\n}, { immediate: true });\n\nfunction setInTimer () {\n inTimer.value = setTimeout(() => {\n hovercardOpen.value = true;\n }, props.enterDelay);\n}\n\nfunction setOutTimer () {\n outTimer.value = setTimeout(() => {\n hovercardOpen.value = false;\n }, props.leaveDelay);\n}\n\nfunction onMouseEnter () {\n if (props.open === null) {\n clearTimeout(outTimer.value);\n setInTimer();\n }\n}\n\nfunction onMouseLeave () {\n if (props.open === null) {\n clearTimeout(inTimer.value);\n setOutTimer();\n }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","inTimer","outTimer","anchorEl","observer","popover","onMounted","nextTick","_c","_b","_a","onBeforeUnmount","watch","open","setInTimer","setOutTimer","onMouseEnter","onMouseLeave"],"mappings":"osCAwDA,MAAMA,EAAQC,EA4JRC,EAAgBC,EAAG,IAACH,EAAM,IAAI,EAC9BI,EAAUD,EAAAA,IAAI,IAAI,EAClBE,EAAWF,EAAAA,IAAI,IAAI,EACnBG,EAAWH,EAAAA,IAAI,IAAI,EACnBI,EAAWJ,EAAAA,IAAI,IAAI,EACnBK,EAAUL,EAAAA,IAAI,IAAI,EAExBM,EAAAA,UAAU,IAAM,CACdC,EAAAA,SAAS,IAAM,WACbJ,EAAS,OAAQK,GAAAC,GAAAC,EAAAL,EAAQ,QAAR,YAAAK,EAAe,QAAf,YAAAD,EAAsB,SAAtB,YAAAD,EAA8B,kBAE/CJ,EAAS,MAAQ,IAAI,iBAAiB,IAAM,CACtCD,EAAS,OAAS,CAACA,EAAS,MAAM,cACpCJ,EAAc,MAAQ,GAE9B,CAAK,EAEDK,EAAS,MAAM,QAAQ,SAAS,KAAM,CACpC,UAAW,GACX,QAAS,EACf,CAAK,CACL,CAAG,CACH,CAAC,EAEDO,EAAAA,gBAAgB,IAAM,CAChBP,EAAS,OACXA,EAAS,MAAM,aAEjB,aAAaH,CAAO,EACpB,aAAaC,CAAQ,CACvB,CAAC,EACDU,EAAK,MAAC,IAAMf,EAAM,KAAOgB,GAAS,CAChCd,EAAc,MAAQc,CACxB,EAAG,CAAE,UAAW,EAAI,CAAE,EAEtB,SAASC,GAAc,CACrBb,EAAQ,MAAQ,WAAW,IAAM,CAC/BF,EAAc,MAAQ,EAC1B,EAAKF,EAAM,UAAU,CACrB,CAEA,SAASkB,GAAe,CACtBb,EAAS,MAAQ,WAAW,IAAM,CAChCH,EAAc,MAAQ,EAC1B,EAAKF,EAAM,UAAU,CACrB,CAEA,SAASmB,GAAgB,CACnBnB,EAAM,OAAS,OACjB,aAAaK,EAAS,KAAK,EAC3BY,IAEJ,CAEA,SAASG,GAAgB,CACnBpB,EAAM,OAAS,OACjB,aAAaI,EAAQ,KAAK,EAC1Bc,IAEJ"}
@@ -1,9 +1,9 @@
1
- import { ref as s, watch as v, openBlock as g, createBlock as O, unref as P, withCtx as o, renderSlot as l, normalizeProps as T, guardReactiveProps as S } from "vue";
2
- import { getUniqueString as C } from "../../common/utils/index.js";
3
- import { TOOLTIP_DIRECTIONS as h, TOOLTIP_DELAY_MS as m } from "../tooltip/tooltip-constants.js";
4
- import { POPOVER_PADDING_CLASSES as A, POPOVER_APPEND_TO_VALUES as b } from "../popover/popover-constants.js";
5
- import D from "../popover/popover.js";
6
- const j = {
1
+ import { ref as o, onMounted as O, nextTick as h, onBeforeUnmount as P, watch as b, openBlock as C, createBlock as S, unref as A, withCtx as u, renderSlot as i, normalizeProps as D, guardReactiveProps as E } from "vue";
2
+ import { getUniqueString as M } from "../../common/utils/index.js";
3
+ import { TOOLTIP_DIRECTIONS as k, TOOLTIP_DELAY_MS as y } from "../tooltip/tooltip-constants.js";
4
+ import { POPOVER_PADDING_CLASSES as L, POPOVER_APPEND_TO_VALUES as I } from "../popover/popover-constants.js";
5
+ import $ from "../popover/popover.js";
6
+ const U = {
7
7
  __name: "hovercard",
8
8
  props: {
9
9
  /**
@@ -47,7 +47,7 @@ const j = {
47
47
  type: String,
48
48
  default: "top-start",
49
49
  validator(e) {
50
- return h.includes(e);
50
+ return k.includes(e);
51
51
  }
52
52
  },
53
53
  /**
@@ -57,7 +57,7 @@ const j = {
57
57
  padding: {
58
58
  type: String,
59
59
  default: "large",
60
- validator: (e) => Object.keys(A).some((t) => t === e)
60
+ validator: (e) => Object.keys(L).some((a) => a === e)
61
61
  },
62
62
  /**
63
63
  * Displaces the content box from its anchor element
@@ -74,7 +74,7 @@ const j = {
74
74
  id: {
75
75
  type: String,
76
76
  default() {
77
- return C();
77
+ return M();
78
78
  }
79
79
  },
80
80
  /**
@@ -113,7 +113,7 @@ const j = {
113
113
  appendTo: {
114
114
  type: [HTMLElement, String],
115
115
  default: "body",
116
- validator: (e) => b.includes(e) || e instanceof HTMLElement
116
+ validator: (e) => I.includes(e) || e instanceof HTMLElement
117
117
  },
118
118
  /**
119
119
  * The enter delay in milliseconds before the hovercard is shown.
@@ -121,7 +121,7 @@ const j = {
121
121
  */
122
122
  enterDelay: {
123
123
  type: Number,
124
- default: m
124
+ default: y
125
125
  },
126
126
  /**
127
127
  * The leave delay in milliseconds before the hovercard is hidden.
@@ -129,7 +129,7 @@ const j = {
129
129
  */
130
130
  leaveDelay: {
131
131
  type: Number,
132
- default: m
132
+ default: y
133
133
  }
134
134
  },
135
135
  emits: [
@@ -142,29 +142,43 @@ const j = {
142
142
  "opened"
143
143
  ],
144
144
  setup(e) {
145
- const t = e, n = s(t.open), i = s(null), u = s(null);
146
- v(() => t.open, (a) => {
147
- n.value = a;
145
+ const a = e, l = o(a.open), d = o(null), c = o(null), f = o(null), s = o(null), m = o(null);
146
+ O(() => {
147
+ h(() => {
148
+ var t, r, n;
149
+ f.value = (n = (r = (t = m.value) == null ? void 0 : t.$refs) == null ? void 0 : r.anchor) == null ? void 0 : n.firstElementChild, s.value = new MutationObserver(() => {
150
+ f.value && !f.value.isConnected && (l.value = !1);
151
+ }), s.value.observe(document.body, {
152
+ childList: !0,
153
+ subtree: !0
154
+ });
155
+ });
156
+ }), P(() => {
157
+ s.value && s.value.disconnect(), clearTimeout(d), clearTimeout(c);
158
+ }), b(() => a.open, (t) => {
159
+ l.value = t;
148
160
  }, { immediate: !0 });
149
- function p() {
150
- i.value = setTimeout(() => {
151
- n.value = !0;
152
- }, t.enterDelay);
161
+ function g() {
162
+ d.value = setTimeout(() => {
163
+ l.value = !0;
164
+ }, a.enterDelay);
153
165
  }
154
- function y() {
155
- u.value = setTimeout(() => {
156
- n.value = !1;
157
- }, t.leaveDelay);
166
+ function T() {
167
+ c.value = setTimeout(() => {
168
+ l.value = !1;
169
+ }, a.leaveDelay);
158
170
  }
159
- function d() {
160
- t.open === null && (clearTimeout(u.value), p());
171
+ function v() {
172
+ a.open === null && (clearTimeout(c.value), g());
161
173
  }
162
- function c() {
163
- t.open === null && (clearTimeout(i.value), y());
174
+ function p() {
175
+ a.open === null && (clearTimeout(d.value), T());
164
176
  }
165
- return (a, f) => (g(), O(P(D), {
177
+ return (t, r) => (C(), S(A($), {
166
178
  id: e.id,
167
- open: n.value,
179
+ ref_key: "popover",
180
+ ref: m,
181
+ open: l.value,
168
182
  placement: e.placement,
169
183
  "content-class": e.contentClass,
170
184
  "dialog-class": e.dialogClass,
@@ -180,29 +194,29 @@ const j = {
180
194
  "data-qa": "dt-hovercard",
181
195
  "enter-delay": e.enterDelay,
182
196
  "leave-delay": e.leaveDelay,
183
- onOpened: f[0] || (f[0] = (r) => a.$emit("opened", r)),
184
- onMouseenterPopover: d,
185
- onMouseleavePopover: c,
186
- onMouseenterPopoverAnchor: d,
187
- onMouseleavePopoverAnchor: c
197
+ onOpened: r[0] || (r[0] = (n) => t.$emit("opened", n)),
198
+ onMouseenterPopover: v,
199
+ onMouseleavePopover: p,
200
+ onMouseenterPopoverAnchor: v,
201
+ onMouseleavePopoverAnchor: p
188
202
  }, {
189
- anchor: o(({ attrs: r }) => [
190
- l(a.$slots, "anchor", T(S(r)))
203
+ anchor: u(({ attrs: n }) => [
204
+ i(t.$slots, "anchor", D(E(n)))
191
205
  ]),
192
- content: o(() => [
193
- l(a.$slots, "content")
206
+ content: u(() => [
207
+ i(t.$slots, "content")
194
208
  ]),
195
- headerContent: o(() => [
196
- l(a.$slots, "headerContent")
209
+ headerContent: u(() => [
210
+ i(t.$slots, "headerContent")
197
211
  ]),
198
- footerContent: o(() => [
199
- l(a.$slots, "footerContent")
212
+ footerContent: u(() => [
213
+ i(t.$slots, "footerContent")
200
214
  ]),
201
215
  _: 3
202
216
  }, 8, ["id", "open", "placement", "content-class", "dialog-class", "fallback-placements", "padding", "transition", "offset", "header-class", "footer-class", "append-to", "enter-delay", "leave-delay"]));
203
217
  }
204
218
  };
205
219
  export {
206
- j as default
220
+ U as default
207
221
  };
208
222
  //# sourceMappingURL=hovercard.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-popover\n :id=\"id\"\n :open=\"hovercardOpen\"\n :placement=\"placement\"\n :content-class=\"contentClass\"\n :dialog-class=\"dialogClass\"\n :fallback-placements=\"fallbackPlacements\"\n :padding=\"padding\"\n :transition=\"transition ? 'fade' : null\"\n :offset=\"offset\"\n :modal=\"false\"\n initial-focus-element=\"none\"\n :header-class=\"headerClass\"\n :footer-class=\"footerClass\"\n :append-to=\"appendTo\"\n data-qa=\"dt-hovercard\"\n :enter-delay=\"enterDelay\"\n :leave-delay=\"leaveDelay\"\n @opened=\"(e) => ($emit('opened', e))\"\n @mouseenter-popover=\"onMouseEnter\"\n @mouseleave-popover=\"onMouseLeave\"\n @mouseenter-popover-anchor=\"onMouseEnter\"\n @mouseleave-popover-anchor=\"onMouseLeave\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n <slot\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <!-- @slot Slot for the content that is displayed in the hovercard. -->\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <!-- @slot Slot for hovercard header content -->\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <!-- @slot Slot for the footer content. -->\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n /**\n * Fade transition when the content display is toggled.\n * @type boolean\n * @values true, false\n */\n transition: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\".\n * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top-start',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * Padding size class for the popover content.\n * @values none, small, medium, large\n */\n padding: {\n type: String,\n default: 'large',\n validator: (padding) => {\n return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Additional class name for the header content wrapper element.\n */\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the footer content wrapper element.\n */\n footerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element.\n */\n dialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * The enter delay in milliseconds before the hovercard is shown.\n * @type number\n */\n enterDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n\n /**\n * The leave delay in milliseconds before the hovercard is hidden.\n * @type number\n */\n leaveDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n});\n\ndefineEmits([\n /**\n * Emitted when hovercard is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\n\nwatch(() => props.open, (open) => {\n hovercardOpen.value = open;\n}, { immediate: true });\n\nfunction setInTimer () {\n inTimer.value = setTimeout(() => {\n hovercardOpen.value = true;\n }, props.enterDelay);\n}\n\nfunction setOutTimer () {\n outTimer.value = setTimeout(() => {\n hovercardOpen.value = false;\n }, props.leaveDelay);\n}\n\nfunction onMouseEnter () {\n if (props.open === null) {\n clearTimeout(outTimer.value);\n setInTimer();\n }\n}\n\nfunction onMouseLeave () {\n if (props.open === null) {\n clearTimeout(inTimer.value);\n setOutTimer();\n }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","inTimer","outTimer","watch","open","setInTimer","setOutTimer","onMouseEnter","onMouseLeave"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,UAAMA,IAAQC,GA4JRC,IAAgBC,EAAIH,EAAM,IAAI,GAC9BI,IAAUD,EAAI,IAAI,GAClBE,IAAWF,EAAI,IAAI;AAEzB,IAAAG,EAAM,MAAMN,EAAM,MAAM,CAACO,MAAS;AAChC,MAAAL,EAAc,QAAQK;AAAA,IACxB,GAAG,EAAE,WAAW,GAAI,CAAE;AAEtB,aAASC,IAAc;AACrB,MAAAJ,EAAQ,QAAQ,WAAW,MAAM;AAC/B,QAAAF,EAAc,QAAQ;AAAA,MAC1B,GAAKF,EAAM,UAAU;AAAA,IACrB;AAEA,aAASS,IAAe;AACtB,MAAAJ,EAAS,QAAQ,WAAW,MAAM;AAChC,QAAAH,EAAc,QAAQ;AAAA,MAC1B,GAAKF,EAAM,UAAU;AAAA,IACrB;AAEA,aAASU,IAAgB;AACvB,MAAIV,EAAM,SAAS,SACjB,aAAaK,EAAS,KAAK,GAC3BG;IAEJ;AAEA,aAASG,IAAgB;AACvB,MAAIX,EAAM,SAAS,SACjB,aAAaI,EAAQ,KAAK,GAC1BK;IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-popover\n :id=\"id\"\n ref=\"popover\"\n :open=\"hovercardOpen\"\n :placement=\"placement\"\n :content-class=\"contentClass\"\n :dialog-class=\"dialogClass\"\n :fallback-placements=\"fallbackPlacements\"\n :padding=\"padding\"\n :transition=\"transition ? 'fade' : null\"\n :offset=\"offset\"\n :modal=\"false\"\n initial-focus-element=\"none\"\n :header-class=\"headerClass\"\n :footer-class=\"footerClass\"\n :append-to=\"appendTo\"\n data-qa=\"dt-hovercard\"\n :enter-delay=\"enterDelay\"\n :leave-delay=\"leaveDelay\"\n @opened=\"(e) => ($emit('opened', e))\"\n @mouseenter-popover=\"onMouseEnter\"\n @mouseleave-popover=\"onMouseLeave\"\n @mouseenter-popover-anchor=\"onMouseEnter\"\n @mouseleave-popover-anchor=\"onMouseLeave\"\n >\n <template #anchor=\"{ attrs }\">\n <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n <slot\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <!-- @slot Slot for the content that is displayed in the hovercard. -->\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <!-- @slot Slot for hovercard header content -->\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <!-- @slot Slot for the footer content. -->\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n /**\n * Fade transition when the content display is toggled.\n * @type boolean\n * @values true, false\n */\n transition: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n */\n open: {\n type: Boolean,\n default: null,\n },\n\n /**\n * If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\".\n * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n */\n fallbackPlacements: {\n type: Array,\n default: () => {\n return ['auto'];\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n */\n placement: {\n type: String,\n default: 'top-start',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /**\n * Padding size class for the popover content.\n * @values none, small, medium, large\n */\n padding: {\n type: String,\n default: 'large',\n validator: (padding) => {\n return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n },\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The id of the tooltip\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Additional class name for the header content wrapper element.\n */\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the footer content wrapper element.\n */\n footerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element.\n */\n dialogClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * The enter delay in milliseconds before the hovercard is shown.\n * @type number\n */\n enterDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n\n /**\n * The leave delay in milliseconds before the hovercard is hidden.\n * @type number\n */\n leaveDelay: {\n type: Number,\n default: TOOLTIP_DELAY_MS,\n },\n});\n\ndefineEmits([\n /**\n * Emitted when hovercard is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n nextTick(() => {\n anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n observer.value = new MutationObserver(() => {\n if (anchorEl.value && !anchorEl.value.isConnected) {\n hovercardOpen.value = false;\n }\n });\n\n observer.value.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n});\n\nonBeforeUnmount(() => {\n if (observer.value) {\n observer.value.disconnect();\n }\n clearTimeout(inTimer);\n clearTimeout(outTimer);\n});\nwatch(() => props.open, (open) => {\n hovercardOpen.value = open;\n}, { immediate: true });\n\nfunction setInTimer () {\n inTimer.value = setTimeout(() => {\n hovercardOpen.value = true;\n }, props.enterDelay);\n}\n\nfunction setOutTimer () {\n outTimer.value = setTimeout(() => {\n hovercardOpen.value = false;\n }, props.leaveDelay);\n}\n\nfunction onMouseEnter () {\n if (props.open === null) {\n clearTimeout(outTimer.value);\n setInTimer();\n }\n}\n\nfunction onMouseLeave () {\n if (props.open === null) {\n clearTimeout(inTimer.value);\n setOutTimer();\n }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","inTimer","outTimer","anchorEl","observer","popover","onMounted","nextTick","_c","_b","_a","onBeforeUnmount","watch","open","setInTimer","setOutTimer","onMouseEnter","onMouseLeave"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,UAAMA,IAAQC,GA4JRC,IAAgBC,EAAIH,EAAM,IAAI,GAC9BI,IAAUD,EAAI,IAAI,GAClBE,IAAWF,EAAI,IAAI,GACnBG,IAAWH,EAAI,IAAI,GACnBI,IAAWJ,EAAI,IAAI,GACnBK,IAAUL,EAAI,IAAI;AAExB,IAAAM,EAAU,MAAM;AACd,MAAAC,EAAS,MAAM;;AACb,QAAAJ,EAAS,SAAQK,KAAAC,KAAAC,IAAAL,EAAQ,UAAR,gBAAAK,EAAe,UAAf,gBAAAD,EAAsB,WAAtB,gBAAAD,EAA8B,mBAE/CJ,EAAS,QAAQ,IAAI,iBAAiB,MAAM;AAC1C,UAAID,EAAS,SAAS,CAACA,EAAS,MAAM,gBACpCJ,EAAc,QAAQ;AAAA,QAE9B,CAAK,GAEDK,EAAS,MAAM,QAAQ,SAAS,MAAM;AAAA,UACpC,WAAW;AAAA,UACX,SAAS;AAAA,QACf,CAAK;AAAA,MACL,CAAG;AAAA,IACH,CAAC,GAEDO,EAAgB,MAAM;AACpB,MAAIP,EAAS,SACXA,EAAS,MAAM,cAEjB,aAAaH,CAAO,GACpB,aAAaC,CAAQ;AAAA,IACvB,CAAC,GACDU,EAAM,MAAMf,EAAM,MAAM,CAACgB,MAAS;AAChC,MAAAd,EAAc,QAAQc;AAAA,IACxB,GAAG,EAAE,WAAW,GAAI,CAAE;AAEtB,aAASC,IAAc;AACrB,MAAAb,EAAQ,QAAQ,WAAW,MAAM;AAC/B,QAAAF,EAAc,QAAQ;AAAA,MAC1B,GAAKF,EAAM,UAAU;AAAA,IACrB;AAEA,aAASkB,IAAe;AACtB,MAAAb,EAAS,QAAQ,WAAW,MAAM;AAChC,QAAAH,EAAc,QAAQ;AAAA,MAC1B,GAAKF,EAAM,UAAU;AAAA,IACrB;AAEA,aAASmB,IAAgB;AACvB,MAAInB,EAAM,SAAS,SACjB,aAAaK,EAAS,KAAK,GAC3BY;IAEJ;AAEA,aAASG,IAAgB;AACvB,MAAIpB,EAAM,SAAS,SACjB,aAAaI,EAAQ,KAAK,GAC1Bc;IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"AAgDA;;;;;;;qBAutB6B,GAAG;qBACF,GAAG;2BACG,GAAG;2BACH,GAAG"}
1
+ {"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"AAiDA;;;;;;;qBAgxB6B,GAAG;qBACF,GAAG;2BACG,GAAG;2BACH,GAAG"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone",
3
- "version": "9.119.1",
3
+ "version": "9.121.0",
4
4
  "description": "Dialpad's Dialtone design system monorepo",
5
5
  "files": [
6
6
  "dist"
@@ -80,9 +80,9 @@
80
80
  "overlayscrollbars": "2.10.0",
81
81
  "regex-combined-emojis": "1.6.0",
82
82
  "tippy.js": "6.3.7",
83
- "@dialpad/dialtone-emojis": "1.1.2",
84
- "@dialpad/dialtone-icons": "4.38.1",
85
- "@dialpad/dialtone-tokens": "1.43.2"
83
+ "@dialpad/dialtone-icons": "4.39.0",
84
+ "@dialpad/dialtone-tokens": "1.43.2",
85
+ "@dialpad/dialtone-emojis": "1.1.2"
86
86
  },
87
87
  "devDependencies": {
88
88
  "@commitlint/cli": "^18.4.3",