@dialpad/dialtone 9.119.0 → 9.120.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone-default-theme.css +4 -0
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +4 -0
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +20050 -20050
- package/dist/vue2/dialtone-vue.cjs +1 -1
- package/dist/vue2/dialtone-vue.js +357 -359
- package/dist/vue2/dialtone-vue.js.map +1 -1
- package/dist/vue2/lib/hovercard/hovercard.cjs +1 -1
- package/dist/vue2/lib/hovercard/hovercard.cjs.map +1 -1
- package/dist/vue2/lib/hovercard/hovercard.js +31 -15
- package/dist/vue2/lib/hovercard/hovercard.js.map +1 -1
- package/dist/vue2/lib/scrollbar-directive/scrollbar.cjs +1 -1
- package/dist/vue2/lib/scrollbar-directive/scrollbar.cjs.map +1 -1
- package/dist/vue2/lib/scrollbar-directive/scrollbar.js +17 -11
- package/dist/vue2/lib/scrollbar-directive/scrollbar.js.map +1 -1
- package/dist/vue2/types/components/hovercard/hovercard.vue.d.ts.map +1 -1
- package/dist/vue2/types/directives/scrollbar_directive/scrollbar.d.ts.map +1 -1
- package/dist/vue2/types/index.d.ts +0 -1
- package/dist/vue3/lib/hovercard/hovercard.cjs +1 -1
- package/dist/vue3/lib/hovercard/hovercard.cjs.map +1 -1
- package/dist/vue3/lib/hovercard/hovercard.js +57 -43
- package/dist/vue3/lib/hovercard/hovercard.js.map +1 -1
- package/dist/vue3/lib/scrollbar-directive/scrollbar.cjs +1 -1
- package/dist/vue3/lib/scrollbar-directive/scrollbar.cjs.map +1 -1
- package/dist/vue3/lib/scrollbar-directive/scrollbar.js +14 -8
- package/dist/vue3/lib/scrollbar-directive/scrollbar.js.map +1 -1
- package/dist/vue3/types/components/hovercard/hovercard.vue.d.ts.map +1 -1
- package/dist/vue3/types/directives/scrollbar_directive/scrollbar.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/vue2/localization/dp-DP.cjs +0 -11
- package/dist/vue2/localization/dp-DP.cjs.map +0 -1
- package/dist/vue2/localization/dp-DP.js +0 -14
- package/dist/vue2/localization/dp-DP.js.map +0 -1
- package/dist/vue2/localization/en-US.cjs +0 -11
- package/dist/vue2/localization/en-US.cjs.map +0 -1
- package/dist/vue2/localization/en-US.js +0 -14
- package/dist/vue2/localization/en-US.js.map +0 -1
- package/dist/vue2/localization/es-LA.cjs +0 -11
- package/dist/vue2/localization/es-LA.cjs.map +0 -1
- package/dist/vue2/localization/es-LA.js +0 -14
- package/dist/vue2/localization/es-LA.js.map +0 -1
- package/dist/vue2/localization/index.cjs +0 -2
- package/dist/vue2/localization/index.cjs.map +0 -1
- package/dist/vue2/localization/index.js +0 -38
- package/dist/vue2/localization/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../popover/popover.cjs"),o=require("../tooltip/tooltip-constants.cjs"),a=require("../popover/popover-constants.cjs"),u={name:"DtHovercard",components:{DtPopover:l.default},props:{open:{type:Boolean,default:null},transition:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(t){return o.TOOLTIP_DIRECTIONS.includes(t)}},padding:{type:String,default:"large",validator:t=>Object.keys(a.POPOVER_PADDING_CLASSES).some(e=>e===t)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return s.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=>a.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},enterDelay:{type:Number,default:o.TOOLTIP_DELAY_MS},leaveDelay:{type:Number,default:o.TOOLTIP_DELAY_MS}},emits:["opened"],data(){return{hovercardOpen:this.open,anchorEl:null,observer:null,inTimer:null,outTimer:null}},watch:{open:{handler:function(t){this.hovercardOpen=t},immediate:!0}},mounted(){this.$nextTick(()=>{var t,e,r;this.anchorEl=(r=(e=(t=this.$refs.popover)==null?void 0:t.$refs)==null?void 0:e.anchor)==null?void 0:r.firstElementChild,this.observer=new MutationObserver(()=>{this.anchorEl&&!this.anchorEl.isConnected&&(this.hovercardOpen=!1)}),this.observer.observe(document.body,{childList:!0,subtree:!0})})},beforeDestroy(){this.observer&&this.observer.disconnect(),clearTimeout(this.inTimer),clearTimeout(this.outTimer)},methods:{setInTimer(){this.inTimer=setTimeout(()=>{this.hovercardOpen=!0},this.enterDelay)},setOutTimer(){this.outTimer=setTimeout(()=>{this.hovercardOpen=!1},this.leaveDelay)},onMouseEnter(){this.open===null&&(clearTimeout(this.outTimer),this.setInTimer())},onMouseLeave(){this.open===null&&(clearTimeout(this.inTimer),this.setOutTimer())}}};var c=function(){var e=this,r=e._self._c;return r("dt-popover",{ref:"popover",attrs:{id:e.id,open:e.hovercardOpen,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},on:{opened:n=>e.$emit("opened",n),"mouseenter-popover":e.onMouseEnter,"mouseleave-popover":e.onMouseLeave,"mouseenter-popover-anchor":e.onMouseEnter,"mouseleave-popover-anchor":e.onMouseLeave},scopedSlots:e._u([{key:"anchor",fn:function({attrs:n}){return[e._t("anchor",null,null,n)]}},{key:"content",fn:function(){return[e._t("content")]},proxy:!0},{key:"headerContent",fn:function(){return[e._t("headerContent")]},proxy:!0},{key:"footerContent",fn:function(){return[e._t("footerContent")]},proxy:!0}],null,!0)})},d=[],p=i.n(u,c,d);const f=p.exports;exports.default=f;
|
|
2
2
|
//# sourceMappingURL=hovercard.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<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\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script>\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\nexport default {\n name: 'DtHovercard',\n\n components: {\n DtPopover,\n },\n\n props: {\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 * 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 * 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\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n ],\n\n data () {\n return {\n hovercardOpen: this.open,\n inTimer: null,\n outTimer: null,\n };\n },\n\n watch: {\n open: {\n handler: function (open) {\n this.hovercardOpen = open;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n setInTimer () {\n this.inTimer = setTimeout(() => {\n this.hovercardOpen = true;\n }, this.enterDelay);\n },\n\n setOutTimer () {\n this.outTimer = setTimeout(() => {\n this.hovercardOpen = false;\n }, this.leaveDelay);\n },\n\n onMouseEnter () {\n if (this.open === null) {\n clearTimeout(this.outTimer);\n this.setInTimer();\n }\n },\n\n onMouseLeave () {\n if (this.open === null) {\n clearTimeout(this.inTimer);\n this.setOutTimer();\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open"],"mappings":"
|
|
1
|
+
{"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<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\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script>\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\nexport default {\n name: 'DtHovercard',\n\n components: {\n DtPopover,\n },\n\n props: {\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 * 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 * 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\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n ],\n\n data () {\n return {\n hovercardOpen: this.open,\n anchorEl: null,\n observer: null,\n inTimer: null,\n outTimer: null,\n };\n },\n\n watch: {\n open: {\n handler: function (open) {\n this.hovercardOpen = open;\n },\n\n immediate: true,\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n this.observer = new MutationObserver(() => {\n if (this.anchorEl && !this.anchorEl.isConnected) {\n // If the anchor element is removed from the DOM, close the hovercard\n this.hovercardOpen = false;\n }\n });\n\n this.observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n },\n\n beforeDestroy () {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n clearTimeout(this.inTimer);\n clearTimeout(this.outTimer);\n },\n\n methods: {\n setInTimer () {\n this.inTimer = setTimeout(() => {\n this.hovercardOpen = true;\n }, this.enterDelay);\n },\n\n setOutTimer () {\n this.outTimer = setTimeout(() => {\n this.hovercardOpen = false;\n }, this.leaveDelay);\n },\n\n onMouseEnter () {\n if (this.open === null) {\n clearTimeout(this.outTimer);\n this.setInTimer();\n }\n },\n\n onMouseLeave () {\n if (this.open === null) {\n clearTimeout(this.inTimer);\n this.setOutTimer();\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":"oVAkDAA,EAAA,CACA,KAAA,cAEA,WAAA,CACA,UAAAC,EAAA,OACA,EAEA,MAAA,CAOA,KAAA,CACA,KAAA,QACA,QAAA,IACA,EAOA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,mBAAA,CACA,KAAA,MACA,QAAA,IACA,CAAA,MAAA,CAEA,EAWA,UAAA,CACA,KAAA,OACA,QAAA,YACA,UAAAC,EAAA,CACA,OAAAC,EAAA,mBAAA,SAAAD,CAAA,CACA,CACA,EAMA,QAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAE,GACA,OAAA,KAAAC,yBAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAOA,OAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EAAA,EAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAG,EAAA,gBAAA,CAAA,CACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAC,GACAC,EAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAMA,WAAA,CACA,KAAA,OACA,QAAAE,EAAA,gBACA,EAMA,WAAA,CACA,KAAA,OACA,QAAAA,EAAA,gBACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,KACA,SAAA,KACA,SAAA,KACA,QAAA,KACA,SAAA,IACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,SAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAEA,UAAA,EACA,CACA,EAEA,SAAA,CACA,KAAA,UAAA,IAAA,WACA,KAAA,UAAAC,GAAAC,GAAAC,EAAA,KAAA,MAAA,UAAA,YAAAA,EAAA,QAAA,YAAAD,EAAA,SAAA,YAAAD,EAAA,kBAEA,KAAA,SAAA,IAAA,iBAAA,IAAA,CACA,KAAA,UAAA,CAAA,KAAA,SAAA,cAEA,KAAA,cAAA,GAEA,CAAA,EAEA,KAAA,SAAA,QAAA,SAAA,KAAA,CACA,UAAA,GACA,QAAA,EACA,CAAA,CACA,CAAA,CACA,EAEA,eAAA,CACA,KAAA,UACA,KAAA,SAAA,aAGA,aAAA,KAAA,OAAA,EACA,aAAA,KAAA,QAAA,CACA,EAEA,QAAA,CACA,YAAA,CACA,KAAA,QAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,CACA,EAEA,aAAA,CACA,KAAA,SAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,CACA,EAEA,cAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,QAAA,EACA,KAAA,WAAA,EAEA,EAEA,cAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,OAAA,EACA,KAAA,YAAA,EAEA,CACA,CACA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { getUniqueString as a } from "../../common/utils/index.js";
|
|
2
|
-
import { n as
|
|
3
|
-
import
|
|
4
|
-
import { TOOLTIP_DIRECTIONS as
|
|
5
|
-
import { POPOVER_PADDING_CLASSES as u, POPOVER_APPEND_TO_VALUES as
|
|
6
|
-
const
|
|
2
|
+
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
|
|
3
|
+
import i from "../popover/popover.js";
|
|
4
|
+
import { TOOLTIP_DIRECTIONS as l, TOOLTIP_DELAY_MS as o } from "../tooltip/tooltip-constants.js";
|
|
5
|
+
import { POPOVER_PADDING_CLASSES as u, POPOVER_APPEND_TO_VALUES as d } from "../popover/popover-constants.js";
|
|
6
|
+
const c = {
|
|
7
7
|
name: "DtHovercard",
|
|
8
8
|
components: {
|
|
9
|
-
DtPopover:
|
|
9
|
+
DtPopover: i
|
|
10
10
|
},
|
|
11
11
|
props: {
|
|
12
12
|
/**
|
|
@@ -50,7 +50,7 @@ const d = {
|
|
|
50
50
|
type: String,
|
|
51
51
|
default: "top-start",
|
|
52
52
|
validator(t) {
|
|
53
|
-
return
|
|
53
|
+
return l.includes(t);
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
/**
|
|
@@ -116,7 +116,7 @@ const d = {
|
|
|
116
116
|
appendTo: {
|
|
117
117
|
type: [HTMLElement, String],
|
|
118
118
|
default: "body",
|
|
119
|
-
validator: (t) =>
|
|
119
|
+
validator: (t) => d.includes(t) || t instanceof HTMLElement
|
|
120
120
|
},
|
|
121
121
|
/**
|
|
122
122
|
* The enter delay in milliseconds before the hovercard is shown.
|
|
@@ -124,7 +124,7 @@ const d = {
|
|
|
124
124
|
*/
|
|
125
125
|
enterDelay: {
|
|
126
126
|
type: Number,
|
|
127
|
-
default:
|
|
127
|
+
default: o
|
|
128
128
|
},
|
|
129
129
|
/**
|
|
130
130
|
* The leave delay in milliseconds before the hovercard is hidden.
|
|
@@ -132,7 +132,7 @@ const d = {
|
|
|
132
132
|
*/
|
|
133
133
|
leaveDelay: {
|
|
134
134
|
type: Number,
|
|
135
|
-
default:
|
|
135
|
+
default: o
|
|
136
136
|
}
|
|
137
137
|
},
|
|
138
138
|
emits: [
|
|
@@ -147,6 +147,8 @@ const d = {
|
|
|
147
147
|
data() {
|
|
148
148
|
return {
|
|
149
149
|
hovercardOpen: this.open,
|
|
150
|
+
anchorEl: null,
|
|
151
|
+
observer: null,
|
|
150
152
|
inTimer: null,
|
|
151
153
|
outTimer: null
|
|
152
154
|
};
|
|
@@ -159,6 +161,20 @@ const d = {
|
|
|
159
161
|
immediate: !0
|
|
160
162
|
}
|
|
161
163
|
},
|
|
164
|
+
mounted() {
|
|
165
|
+
this.$nextTick(() => {
|
|
166
|
+
var t, e, r;
|
|
167
|
+
this.anchorEl = (r = (e = (t = this.$refs.popover) == null ? void 0 : t.$refs) == null ? void 0 : e.anchor) == null ? void 0 : r.firstElementChild, this.observer = new MutationObserver(() => {
|
|
168
|
+
this.anchorEl && !this.anchorEl.isConnected && (this.hovercardOpen = !1);
|
|
169
|
+
}), this.observer.observe(document.body, {
|
|
170
|
+
childList: !0,
|
|
171
|
+
subtree: !0
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
},
|
|
175
|
+
beforeDestroy() {
|
|
176
|
+
this.observer && this.observer.disconnect(), clearTimeout(this.inTimer), clearTimeout(this.outTimer);
|
|
177
|
+
},
|
|
162
178
|
methods: {
|
|
163
179
|
setInTimer() {
|
|
164
180
|
this.inTimer = setTimeout(() => {
|
|
@@ -178,9 +194,9 @@ const d = {
|
|
|
178
194
|
}
|
|
179
195
|
}
|
|
180
196
|
};
|
|
181
|
-
var
|
|
182
|
-
var e = this,
|
|
183
|
-
return
|
|
197
|
+
var p = function() {
|
|
198
|
+
var e = this, r = e._self._c;
|
|
199
|
+
return r("dt-popover", { ref: "popover", attrs: { id: e.id, open: e.hovercardOpen, 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 }, on: { opened: (n) => e.$emit("opened", n), "mouseenter-popover": e.onMouseEnter, "mouseleave-popover": e.onMouseLeave, "mouseenter-popover-anchor": e.onMouseEnter, "mouseleave-popover-anchor": e.onMouseLeave }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: n }) {
|
|
184
200
|
return [e._t("anchor", null, null, n)];
|
|
185
201
|
} }, { key: "content", fn: function() {
|
|
186
202
|
return [e._t("content")];
|
|
@@ -189,9 +205,9 @@ var c = function() {
|
|
|
189
205
|
}, proxy: !0 }, { key: "footerContent", fn: function() {
|
|
190
206
|
return [e._t("footerContent")];
|
|
191
207
|
}, proxy: !0 }], null, !0) });
|
|
192
|
-
}, f = [], m = /* @__PURE__ */
|
|
193
|
-
d,
|
|
208
|
+
}, f = [], m = /* @__PURE__ */ s(
|
|
194
209
|
c,
|
|
210
|
+
p,
|
|
195
211
|
f
|
|
196
212
|
);
|
|
197
213
|
const O = m.exports;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<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\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script>\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\nexport default {\n name: 'DtHovercard',\n\n components: {\n DtPopover,\n },\n\n props: {\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 * 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 * 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\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n ],\n\n data () {\n return {\n hovercardOpen: this.open,\n inTimer: null,\n outTimer: null,\n };\n },\n\n watch: {\n open: {\n handler: function (open) {\n this.hovercardOpen = open;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n setInTimer () {\n this.inTimer = setTimeout(() => {\n this.hovercardOpen = true;\n }, this.enterDelay);\n },\n\n setOutTimer () {\n this.outTimer = setTimeout(() => {\n this.hovercardOpen = false;\n }, this.leaveDelay);\n },\n\n onMouseEnter () {\n if (this.open === null) {\n clearTimeout(this.outTimer);\n this.setInTimer();\n }\n },\n\n onMouseLeave () {\n if (this.open === null) {\n clearTimeout(this.inTimer);\n this.setOutTimer();\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<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\n name=\"anchor\"\n v-bind=\"attrs\"\n />\n </template>\n <template #content>\n <slot name=\"content\" />\n </template>\n <template #headerContent>\n <slot name=\"headerContent\" />\n </template>\n\n <template #footerContent>\n <slot name=\"footerContent\" />\n </template>\n </dt-popover>\n</template>\n\n<script>\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\nexport default {\n name: 'DtHovercard',\n\n components: {\n DtPopover,\n },\n\n props: {\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 * 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 * 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\n emits: [\n /**\n * Emitted when popover is shown or hidden\n *\n * @event opened\n * @type {Boolean | Array}\n */\n 'opened',\n ],\n\n data () {\n return {\n hovercardOpen: this.open,\n anchorEl: null,\n observer: null,\n inTimer: null,\n outTimer: null,\n };\n },\n\n watch: {\n open: {\n handler: function (open) {\n this.hovercardOpen = open;\n },\n\n immediate: true,\n },\n },\n\n mounted () {\n this.$nextTick(() => {\n this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n this.observer = new MutationObserver(() => {\n if (this.anchorEl && !this.anchorEl.isConnected) {\n // If the anchor element is removed from the DOM, close the hovercard\n this.hovercardOpen = false;\n }\n });\n\n this.observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n },\n\n beforeDestroy () {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n clearTimeout(this.inTimer);\n clearTimeout(this.outTimer);\n },\n\n methods: {\n setInTimer () {\n this.inTimer = setTimeout(() => {\n this.hovercardOpen = true;\n }, this.enterDelay);\n },\n\n setOutTimer () {\n this.outTimer = setTimeout(() => {\n this.hovercardOpen = false;\n }, this.leaveDelay);\n },\n\n onMouseEnter () {\n if (this.open === null) {\n clearTimeout(this.outTimer);\n this.setInTimer();\n }\n },\n\n onMouseLeave () {\n if (this.open === null) {\n clearTimeout(this.inTimer);\n this.setOutTimer();\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":";;;;;AAkDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MACA,CAAA,MAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MACA,OAAA,KAAAC,CAAA,EAAA,KAAA,CAAAC,MAAAA,MAAAF,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAG,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MACAC,EAAA,SAAAD,CAAA,KACAA,aAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAE;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,SAAAC,GAAA;AACA,aAAA,gBAAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,UAAA,MAAA;;AACA,WAAA,YAAAC,KAAAC,KAAAC,IAAA,KAAA,MAAA,YAAA,gBAAAA,EAAA,UAAA,gBAAAD,EAAA,WAAA,gBAAAD,EAAA,mBAEA,KAAA,WAAA,IAAA,iBAAA,MAAA;AACA,QAAA,KAAA,YAAA,CAAA,KAAA,SAAA,gBAEA,KAAA,gBAAA;AAAA,MAEA,CAAA,GAEA,KAAA,SAAA,QAAA,SAAA,MAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,MACA,CAAA;AAAA,IACA,CAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,IAAA,KAAA,YACA,KAAA,SAAA,cAGA,aAAA,KAAA,OAAA,GACA,aAAA,KAAA,QAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA;AACA,WAAA,UAAA,WAAA,MAAA;AACA,aAAA,gBAAA;AAAA,MACA,GAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,WAAA,WAAA,MAAA;AACA,aAAA,gBAAA;AAAA,MACA,GAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,MAAA,KAAA,SAAA,SACA,aAAA,KAAA,QAAA,GACA,KAAA,WAAA;AAAA,IAEA;AAAA,IAEA,eAAA;AACA,MAAA,KAAA,SAAA,SACA,aAAA,KAAA,OAAA,GACA,KAAA,YAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("overlayscrollbars"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("overlayscrollbars"),a={name:"dt-scrollbar-directive",install(s){l.OverlayScrollbars.plugin(l.ClickScrollPlugin);const t=new WeakMap;s.directive("dt-scrollbar",{inserted(e,r){const c=l.OverlayScrollbars({target:e,elements:{viewport:e.children[0]}},{scrollbars:{autoHide:`${r.arg||"leave"}`,clickScroll:!0,autoHideDelay:`${!r.arg||r.arg==="leave"?0:1300}`}});e.setAttribute("data-overlayscrollbars-initialize",!0),e.classList.add("d-scrollbar"),t.set(e,c)},unbind(e){t.get(e).destroy()}})}};exports.DtScrollbarDirective=a;exports.default=a;
|
|
2
2
|
//# sourceMappingURL=scrollbar.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbar.cjs","sources":["../../../directives/scrollbar_directive/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg || 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg || binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["DtScrollbarDirective","Vue","OverlayScrollbars","ClickScrollPlugin","el","binding"],"mappings":"iJAEaA,EAAuB,CAClC,KAAM,yBACN,QAASC,EAAK,CACZC,oBAAkB,OAAOC,EAAAA,iBAAiB,
|
|
1
|
+
{"version":3,"file":"scrollbar.cjs","sources":["../../../directives/scrollbar_directive/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n const instances = new WeakMap();\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n const os = OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg || 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg || binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n instances.set(el, os);\n },\n unbind (el) {\n instances.get(el).destroy();\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["DtScrollbarDirective","Vue","OverlayScrollbars","ClickScrollPlugin","instances","el","binding","os"],"mappings":"iJAEaA,EAAuB,CAClC,KAAM,yBACN,QAASC,EAAK,CACZC,oBAAkB,OAAOC,EAAAA,iBAAiB,EAC1C,MAAMC,EAAY,IAAI,QACtBH,EAAI,UAAU,eAAgB,CAC5B,SAAUI,EAAIC,EAAS,CACrB,MAAMC,EAAKL,EAAAA,kBAAkB,CAC3B,OAAQG,EACR,SAAU,CACR,SAAUA,EAAG,SAAS,CAAC,CACxB,CACX,EAAW,CACD,WAAY,CACV,SAAU,GAAGC,EAAQ,KAAO,OAAO,GACnC,YAAa,GACb,cAAe,GAAG,CAACA,EAAQ,KAAOA,EAAQ,MAAQ,QAAU,EAAI,IAAI,EACrE,CACX,CAAS,EACDD,EAAG,aAAa,oCAAqC,EAAI,EACzDA,EAAG,UAAU,IAAI,aAAa,EAC9BD,EAAU,IAAIC,EAAIE,CAAE,CACrB,EACD,OAAQF,EAAI,CACVD,EAAU,IAAIC,CAAE,EAAE,QAAO,CAC1B,CACP,CAAK,CACF,CACH"}
|
|
@@ -1,27 +1,33 @@
|
|
|
1
|
-
import { OverlayScrollbars as
|
|
2
|
-
const
|
|
1
|
+
import { OverlayScrollbars as a, ClickScrollPlugin as c } from "overlayscrollbars";
|
|
2
|
+
const o = {
|
|
3
3
|
name: "dt-scrollbar-directive",
|
|
4
|
-
install(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
install(l) {
|
|
5
|
+
a.plugin(c);
|
|
6
|
+
const t = /* @__PURE__ */ new WeakMap();
|
|
7
|
+
l.directive("dt-scrollbar", {
|
|
8
|
+
inserted(r, e) {
|
|
9
|
+
const s = a({
|
|
8
10
|
target: r,
|
|
9
11
|
elements: {
|
|
10
12
|
viewport: r.children[0]
|
|
11
13
|
}
|
|
12
14
|
}, {
|
|
13
15
|
scrollbars: {
|
|
14
|
-
autoHide: `${
|
|
16
|
+
autoHide: `${e.arg || "leave"}`,
|
|
15
17
|
clickScroll: !0,
|
|
16
|
-
autoHideDelay: `${!
|
|
18
|
+
autoHideDelay: `${!e.arg || e.arg === "leave" ? 0 : 1300}`
|
|
17
19
|
}
|
|
18
|
-
})
|
|
20
|
+
});
|
|
21
|
+
r.setAttribute("data-overlayscrollbars-initialize", !0), r.classList.add("d-scrollbar"), t.set(r, s);
|
|
22
|
+
},
|
|
23
|
+
unbind(r) {
|
|
24
|
+
t.get(r).destroy();
|
|
19
25
|
}
|
|
20
26
|
});
|
|
21
27
|
}
|
|
22
28
|
};
|
|
23
29
|
export {
|
|
24
|
-
|
|
25
|
-
|
|
30
|
+
o as DtScrollbarDirective,
|
|
31
|
+
o as default
|
|
26
32
|
};
|
|
27
33
|
//# sourceMappingURL=scrollbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbar.js","sources":["../../../directives/scrollbar_directive/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg || 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg || binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["DtScrollbarDirective","Vue","OverlayScrollbars","ClickScrollPlugin","el","binding"],"mappings":";AAEY,MAACA,IAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAASC,GAAK;AACZ,IAAAC,EAAkB,OAAOC,CAAiB,
|
|
1
|
+
{"version":3,"file":"scrollbar.js","sources":["../../../directives/scrollbar_directive/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n const instances = new WeakMap();\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n const os = OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg || 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg || binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n instances.set(el, os);\n },\n unbind (el) {\n instances.get(el).destroy();\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["DtScrollbarDirective","Vue","OverlayScrollbars","ClickScrollPlugin","instances","el","binding","os"],"mappings":";AAEY,MAACA,IAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAASC,GAAK;AACZ,IAAAC,EAAkB,OAAOC,CAAiB;AAC1C,UAAMC,IAAY,oBAAI;AACtB,IAAAH,EAAI,UAAU,gBAAgB;AAAA,MAC5B,SAAUI,GAAIC,GAAS;AACrB,cAAMC,IAAKL,EAAkB;AAAA,UAC3B,QAAQG;AAAA,UACR,UAAU;AAAA,YACR,UAAUA,EAAG,SAAS,CAAC;AAAA,UACxB;AAAA,QACX,GAAW;AAAA,UACD,YAAY;AAAA,YACV,UAAU,GAAGC,EAAQ,OAAO,OAAO;AAAA,YACnC,aAAa;AAAA,YACb,eAAe,GAAG,CAACA,EAAQ,OAAOA,EAAQ,QAAQ,UAAU,IAAI,IAAI;AAAA,UACrE;AAAA,QACX,CAAS;AACD,QAAAD,EAAG,aAAa,qCAAqC,EAAI,GACzDA,EAAG,UAAU,IAAI,aAAa,GAC9BD,EAAU,IAAIC,GAAIE,CAAE;AAAA,MACrB;AAAA,MACD,OAAQF,GAAI;AACV,QAAAD,EAAU,IAAIC,CAAE,EAAE,QAAO;AAAA,MAC1B;AAAA,IACP,CAAK;AAAA,EACF;AACH;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"AA4CA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../directives/scrollbar_directive/scrollbar.js"],"names":[],"mappings":";;IAIE,
|
|
1
|
+
{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../directives/scrollbar_directive/scrollbar.js"],"names":[],"mappings":";;IAIE,iCAyBC"}
|
|
@@ -77,7 +77,6 @@ export * from './recipes/leftbar/group_row';
|
|
|
77
77
|
export * from './recipes/leftbar/unread_pill';
|
|
78
78
|
export * from './recipes/notices/top_banner_info';
|
|
79
79
|
export { validationMessageValidator } from './common/validators';
|
|
80
|
-
export { DialtoneLocalizationPlugin } from './localization';
|
|
81
80
|
export { VALIDATION_MESSAGE_TYPES, DESCRIPTION_SIZE_TYPES, DEFAULT_VALIDATION_MESSAGE_TYPE } from './common/constants';
|
|
82
81
|
export { getUniqueString, formatMessages, filterFormattedMessages, getValidationState, disableRootScrolling, enableRootScrolling } from './common/utils';
|
|
83
82
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
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":"
|
|
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
|
|
2
|
-
import { getUniqueString as
|
|
3
|
-
import { TOOLTIP_DIRECTIONS as
|
|
4
|
-
import { POPOVER_PADDING_CLASSES as
|
|
5
|
-
import
|
|
6
|
-
const
|
|
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
|
|
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(
|
|
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
|
|
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) =>
|
|
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:
|
|
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:
|
|
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
|
|
146
|
-
|
|
147
|
-
|
|
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
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
},
|
|
161
|
+
function g() {
|
|
162
|
+
d.value = setTimeout(() => {
|
|
163
|
+
l.value = !0;
|
|
164
|
+
}, a.enterDelay);
|
|
153
165
|
}
|
|
154
|
-
function
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
},
|
|
166
|
+
function T() {
|
|
167
|
+
c.value = setTimeout(() => {
|
|
168
|
+
l.value = !1;
|
|
169
|
+
}, a.leaveDelay);
|
|
158
170
|
}
|
|
159
|
-
function
|
|
160
|
-
|
|
171
|
+
function v() {
|
|
172
|
+
a.open === null && (clearTimeout(c.value), g());
|
|
161
173
|
}
|
|
162
|
-
function
|
|
163
|
-
|
|
174
|
+
function p() {
|
|
175
|
+
a.open === null && (clearTimeout(d.value), T());
|
|
164
176
|
}
|
|
165
|
-
return (
|
|
177
|
+
return (t, r) => (C(), S(A($), {
|
|
166
178
|
id: e.id,
|
|
167
|
-
|
|
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:
|
|
184
|
-
onMouseenterPopover:
|
|
185
|
-
onMouseleavePopover:
|
|
186
|
-
onMouseenterPopoverAnchor:
|
|
187
|
-
onMouseleavePopoverAnchor:
|
|
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:
|
|
190
|
-
|
|
203
|
+
anchor: u(({ attrs: n }) => [
|
|
204
|
+
i(t.$slots, "anchor", D(E(n)))
|
|
191
205
|
]),
|
|
192
|
-
content:
|
|
193
|
-
|
|
206
|
+
content: u(() => [
|
|
207
|
+
i(t.$slots, "content")
|
|
194
208
|
]),
|
|
195
|
-
headerContent:
|
|
196
|
-
|
|
209
|
+
headerContent: u(() => [
|
|
210
|
+
i(t.$slots, "headerContent")
|
|
197
211
|
]),
|
|
198
|
-
footerContent:
|
|
199
|
-
|
|
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
|
-
|
|
220
|
+
U as default
|
|
207
221
|
};
|
|
208
222
|
//# sourceMappingURL=hovercard.js.map
|