@leaflink/stash 53.4.0 → 53.4.2

package/dist/directives/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/directives/tooltip/tooltip.ts"],"sourcesContent":["import debounce from 'lodash-es/debounce';\nimport { DirectiveBinding, nextTick } from 'vue';\n\nimport calculateElementOverflow from '../../utils/calculateElementOverflow';\n\nexport enum Positions {\n  Bottom = 'bottom',\n  Left = 'left',\n  Right = 'right',\n  Top = 'top',\n}\n\ntype HTMLDirectiveElement = HTMLElement & { observer?: ResizeObserver; cachedVal: any };\n\nconst defaultPosition = Positions.Top;\nconst positions = Object.values(Positions);\n\n/**\n * Gets position name based on modifiers provided. Defaults to Top.\n */\nfunction getPosition(modifiers: Record<string, boolean>): Positions {\n  let position = defaultPosition;\n\n  positions.forEach((pos) => {\n    if (modifiers[pos]) {\n      position = pos;\n      return false;\n    }\n  });\n\n  return position;\n}\n\n/**\n * Appends a new tooltip element to the directive element.\n *\n * Adds .tooltip-toggle class to element.\n *\n */\nfunction mount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  if (binding.value) {\n    const tooltip = document.createElement('div');\n\n    const styles = `tooltip tooltip--${getPosition(binding.modifiers)}`;\n\n    tooltip.classList.value = styles;\n    tooltip.setAttribute('role', 'tooltip');\n    tooltip.innerHTML = binding.value;\n\n    el.appendChild(tooltip);\n\n    // Add classname to wrapper element for styling\n    el.classList.add('tooltip-toggle');\n    // Apply tabindex to make focusable (if it doesn't already have)\n    el.tabIndex = 0;\n\n    nextTick().then(() => {\n      if (styles.includes('bottom') || styles.includes('top')) {\n        const overflow = calculateElementOverflow(tooltip);\n\n        if (overflow?.value) {\n          const symbol = overflow.side === 'right' ? '-' : '';\n\n          tooltip.style.setProperty('--offset', `${symbol}${overflow.value}`);\n        }\n      }\n    });\n  }\n}\n\n/**\n * Removes tooltip & cleans up any classnames added\n */\nfunction unmount(el: HTMLElement) {\n  const tooltip = el.querySelector('.tooltip');\n\n  el.classList.remove('tooltip-toggle');\n  el.style.removeProperty('--offset');\n\n  if (tooltip) {\n    tooltip.remove();\n  }\n}\n\n/**\n * Remounts tooltip to re-calc placement\n */\nfunction remount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  unmount(el);\n  mount(el, binding);\n\n  // If the value has not changed, avoid re-initializing observer\n  // This prevents a `remount` infinite loop\n  if (el.cachedVal !== binding.value) {\n    el.cachedVal = binding.value;\n    destroyObserver(el);\n    setupObserver(el, binding);\n  }\n}\n\n/**\n * Initializes a ResizeObserver for the current element to remount on resize\n */\nfunction setupObserver(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  /**\n   * Cache value on element because when we setup observer\n   * it's still referencing the original value from on `beforeMount`.\n   * When the directive updates with a new value, we'll verify\n   * the new value is different from the cached one during remount.\n   */\n  el.cachedVal = binding.value;\n\n  if ('ResizeObserver' in window && 'body' in document) {\n    // debounce to limit remounts to after resize\n    el.observer = new ResizeObserver(\n      debounce(() => {\n        remount(el, binding);\n      }, 300),\n    );\n\n    el.observer.observe(document.body);\n  }\n}\n\n/**\n * Removes the current observer\n */\nfunction destroyObserver(el: HTMLDirectiveElement) {\n  if (el.observer && document.body) {\n    el.observer.unobserve(document.body);\n    el.observer.disconnect();\n    el.observer = undefined;\n  }\n}\n\n/**\n * Tooltip directive\n * @deprecated Use the `Tooltip` component from `@leaflink/stash/Tooltip.vue` instead\n */\nexport default {\n  beforeMount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n    mount(el, binding);\n    setupObserver(el, binding);\n  },\n\n  updated(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n    const { oldValue, value } = binding;\n\n    if (oldValue !== value) {\n      remount(el, binding);\n    }\n  },\n\n  unmounted(el: HTMLDirectiveElement) {\n    destroyObserver(el);\n    unmount(el);\n  },\n};\n"],"names":["Positions","defaultPosition","positions","getPosition","modifiers","position","pos","mount","el","binding","tooltip","styles","nextTick","overflow","calculateElementOverflow","symbol","unmount","remount","destroyObserver","setupObserver","debounce","oldValue","value"],"mappings":";;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAJIA,IAAAA,KAAA,CAAA,CAAA;AASZ,MAAMC,IAAkB,OAClBC,IAAY,OAAO,OAAOF,CAAS;AAKzC,SAASG,EAAYC,GAA+C;AAClE,MAAIC,IAAWJ;AAEf,SAAAC,EAAU,QAAQ,CAACI,MAAQ;AACzB,QAAIF,EAAUE,CAAG;AACf,aAAAD,IAAWC,GACJ;AAAA,EAEX,CAAC,GAEMD;AACT;AAQA,SAASE,EAAMC,GAA0BC,GAA2B;AAClE,MAAIA,EAAQ,OAAO;AACjB,UAAMC,IAAU,SAAS,cAAc,KAAK,GAEtCC,IAAS,oBAAoBR,EAAYM,EAAQ,SAAS,CAAC;AAEjE,IAAAC,EAAQ,UAAU,QAAQC,GAC1BD,EAAQ,aAAa,QAAQ,SAAS,GACtCA,EAAQ,YAAYD,EAAQ,OAE5BD,EAAG,YAAYE,CAAO,GAGtBF,EAAG,UAAU,IAAI,gBAAgB,GAEjCA,EAAG,WAAW,GAEdI,EAAA,EAAW,KAAK,MAAM;AACpB,UAAID,EAAO,SAAS,QAAQ,KAAKA,EAAO,SAAS,KAAK,GAAG;AACvD,cAAME,IAAWC,EAAyBJ,CAAO;AAEjD,YAAIG,KAAA,QAAAA,EAAU,OAAO;AACnB,gBAAME,IAASF,EAAS,SAAS,UAAU,MAAM;AAEjD,UAAAH,EAAQ,MAAM,YAAY,YAAY,GAAGK,CAAM,GAAGF,EAAS,KAAK,EAAE;AAAA,QACpE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAKA,SAASG,EAAQR,GAAiB;AAChC,QAAME,IAAUF,EAAG,cAAc,UAAU;AAE3C,EAAAA,EAAG,UAAU,OAAO,gBAAgB,GACpCA,EAAG,MAAM,eAAe,UAAU,GAE9BE,KACFA,EAAQ,OAAA;AAEZ;AAKA,SAASO,EAAQT,GAA0BC,GAA2B;AACpE,EAAAO,EAAQR,CAAE,GACVD,EAAMC,GAAIC,CAAO,GAIbD,EAAG,cAAcC,EAAQ,UAC3BD,EAAG,YAAYC,EAAQ,OACvBS,EAAgBV,CAAE,GAClBW,EAAcX,GAAIC,CAAO;AAE7B;AAKA,SAASU,EAAcX,GAA0BC,GAA2B;AAO1E,EAAAD,EAAG,YAAYC,EAAQ,OAEnB,oBAAoB,UAAU,UAAU,aAE1CD,EAAG,WAAW,IAAI;AAAA,IAChBY,EAAS,MAAM;AACb,MAAAH,EAAQT,GAAIC,CAAO;AAAA,IACrB,GAAG,GAAG;AAAA,EAAA,GAGRD,EAAG,SAAS,QAAQ,SAAS,IAAI;AAErC;AAKA,SAASU,EAAgBV,GAA0B;AACjD,EAAIA,EAAG,YAAY,SAAS,SAC1BA,EAAG,SAAS,UAAU,SAAS,IAAI,GACnCA,EAAG,SAAS,WAAA,GACZA,EAAG,WAAW;AAElB;AAMA,MAAAE,IAAe;AAAA,EACb,YAAYF,GAA0BC,GAA2B;AAC/D,IAAAF,EAAMC,GAAIC,CAAO,GACjBU,EAAcX,GAAIC,CAAO;AAAA,EAC3B;AAAA,EAEA,QAAQD,GAA0BC,GAA2B;AAC3D,UAAM,EAAE,UAAAY,GAAU,OAAAC,EAAA,IAAUb;AAE5B,IAAIY,MAAaC,KACfL,EAAQT,GAAIC,CAAO;AAAA,EAEvB;AAAA,EAEA,UAAUD,GAA0B;AAClC,IAAAU,EAAgBV,CAAE,GAClBQ,EAAQR,CAAE;AAAA,EACZ;AACF;"}
+{"version":3,"file":"tooltip.js","sources":["../../src/directives/tooltip/tooltip.ts"],"sourcesContent":["import debounce from 'lodash-es/debounce';\nimport { DirectiveBinding, nextTick } from 'vue';\n\nimport calculateElementOverflow from '../../utils/calculateElementOverflow';\n\nexport enum Positions {\n  Bottom = 'bottom',\n  Left = 'left',\n  Right = 'right',\n  Top = 'top',\n}\n\ntype HTMLDirectiveElement = HTMLElement & { observer?: ResizeObserver; cachedVal: any };\n\nconst defaultPosition = Positions.Top;\nconst positions = Object.values(Positions);\n\n/**\n * Gets position name based on modifiers provided. Defaults to Top.\n */\nfunction getPosition(modifiers: DirectiveBinding['modifiers']): Positions {\n  let position = defaultPosition;\n\n  positions.forEach((pos) => {\n    if (modifiers[pos]) {\n      position = pos;\n      return false;\n    }\n  });\n\n  return position;\n}\n\n/**\n * Appends a new tooltip element to the directive element.\n *\n * Adds .tooltip-toggle class to element.\n *\n */\nfunction mount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  if (binding.value) {\n    const tooltip = document.createElement('div');\n\n    const styles = `tooltip tooltip--${getPosition(binding.modifiers)}`;\n\n    tooltip.classList.value = styles;\n    tooltip.setAttribute('role', 'tooltip');\n    tooltip.innerHTML = binding.value;\n\n    el.appendChild(tooltip);\n\n    // Add classname to wrapper element for styling\n    el.classList.add('tooltip-toggle');\n    // Apply tabindex to make focusable (if it doesn't already have)\n    el.tabIndex = 0;\n\n    nextTick().then(() => {\n      if (styles.includes('bottom') || styles.includes('top')) {\n        const overflow = calculateElementOverflow(tooltip);\n\n        if (overflow?.value) {\n          const symbol = overflow.side === 'right' ? '-' : '';\n\n          tooltip.style.setProperty('--offset', `${symbol}${overflow.value}`);\n        }\n      }\n    });\n  }\n}\n\n/**\n * Removes tooltip & cleans up any classnames added\n */\nfunction unmount(el: HTMLElement) {\n  const tooltip = el.querySelector('.tooltip');\n\n  el.classList.remove('tooltip-toggle');\n  el.style.removeProperty('--offset');\n\n  if (tooltip) {\n    tooltip.remove();\n  }\n}\n\n/**\n * Remounts tooltip to re-calc placement\n */\nfunction remount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  unmount(el);\n  mount(el, binding);\n\n  // If the value has not changed, avoid re-initializing observer\n  // This prevents a `remount` infinite loop\n  if (el.cachedVal !== binding.value) {\n    el.cachedVal = binding.value;\n    destroyObserver(el);\n    setupObserver(el, binding);\n  }\n}\n\n/**\n * Initializes a ResizeObserver for the current element to remount on resize\n */\nfunction setupObserver(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n  /**\n   * Cache value on element because when we setup observer\n   * it's still referencing the original value from on `beforeMount`.\n   * When the directive updates with a new value, we'll verify\n   * the new value is different from the cached one during remount.\n   */\n  el.cachedVal = binding.value;\n\n  if ('ResizeObserver' in window && 'body' in document) {\n    // debounce to limit remounts to after resize\n    el.observer = new ResizeObserver(\n      debounce(() => {\n        remount(el, binding);\n      }, 300),\n    );\n\n    el.observer.observe(document.body);\n  }\n}\n\n/**\n * Removes the current observer\n */\nfunction destroyObserver(el: HTMLDirectiveElement) {\n  if (el.observer && document.body) {\n    el.observer.unobserve(document.body);\n    el.observer.disconnect();\n    el.observer = undefined;\n  }\n}\n\n/**\n * Tooltip directive\n * @deprecated Use the `Tooltip` component from `@leaflink/stash/Tooltip.vue` instead\n */\nexport default {\n  beforeMount(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n    mount(el, binding);\n    setupObserver(el, binding);\n  },\n\n  updated(el: HTMLDirectiveElement, binding: DirectiveBinding) {\n    const { oldValue, value } = binding;\n\n    if (oldValue !== value) {\n      remount(el, binding);\n    }\n  },\n\n  unmounted(el: HTMLDirectiveElement) {\n    destroyObserver(el);\n    unmount(el);\n  },\n};\n"],"names":["Positions","defaultPosition","positions","getPosition","modifiers","position","pos","mount","el","binding","tooltip","styles","nextTick","overflow","calculateElementOverflow","symbol","unmount","remount","destroyObserver","setupObserver","debounce","oldValue","value"],"mappings":";;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAJIA,IAAAA,KAAA,CAAA,CAAA;AASZ,MAAMC,IAAkB,OAClBC,IAAY,OAAO,OAAOF,CAAS;AAKzC,SAASG,EAAYC,GAAqD;AACxE,MAAIC,IAAWJ;AAEf,SAAAC,EAAU,QAAQ,CAACI,MAAQ;AACzB,QAAIF,EAAUE,CAAG;AACf,aAAAD,IAAWC,GACJ;AAAA,EAEX,CAAC,GAEMD;AACT;AAQA,SAASE,EAAMC,GAA0BC,GAA2B;AAClE,MAAIA,EAAQ,OAAO;AACjB,UAAMC,IAAU,SAAS,cAAc,KAAK,GAEtCC,IAAS,oBAAoBR,EAAYM,EAAQ,SAAS,CAAC;AAEjE,IAAAC,EAAQ,UAAU,QAAQC,GAC1BD,EAAQ,aAAa,QAAQ,SAAS,GACtCA,EAAQ,YAAYD,EAAQ,OAE5BD,EAAG,YAAYE,CAAO,GAGtBF,EAAG,UAAU,IAAI,gBAAgB,GAEjCA,EAAG,WAAW,GAEdI,EAAA,EAAW,KAAK,MAAM;AACpB,UAAID,EAAO,SAAS,QAAQ,KAAKA,EAAO,SAAS,KAAK,GAAG;AACvD,cAAME,IAAWC,EAAyBJ,CAAO;AAEjD,YAAIG,KAAA,QAAAA,EAAU,OAAO;AACnB,gBAAME,IAASF,EAAS,SAAS,UAAU,MAAM;AAEjD,UAAAH,EAAQ,MAAM,YAAY,YAAY,GAAGK,CAAM,GAAGF,EAAS,KAAK,EAAE;AAAA,QACpE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAKA,SAASG,EAAQR,GAAiB;AAChC,QAAME,IAAUF,EAAG,cAAc,UAAU;AAE3C,EAAAA,EAAG,UAAU,OAAO,gBAAgB,GACpCA,EAAG,MAAM,eAAe,UAAU,GAE9BE,KACFA,EAAQ,OAAA;AAEZ;AAKA,SAASO,EAAQT,GAA0BC,GAA2B;AACpE,EAAAO,EAAQR,CAAE,GACVD,EAAMC,GAAIC,CAAO,GAIbD,EAAG,cAAcC,EAAQ,UAC3BD,EAAG,YAAYC,EAAQ,OACvBS,EAAgBV,CAAE,GAClBW,EAAcX,GAAIC,CAAO;AAE7B;AAKA,SAASU,EAAcX,GAA0BC,GAA2B;AAO1E,EAAAD,EAAG,YAAYC,EAAQ,OAEnB,oBAAoB,UAAU,UAAU,aAE1CD,EAAG,WAAW,IAAI;AAAA,IAChBY,EAAS,MAAM;AACb,MAAAH,EAAQT,GAAIC,CAAO;AAAA,IACrB,GAAG,GAAG;AAAA,EAAA,GAGRD,EAAG,SAAS,QAAQ,SAAS,IAAI;AAErC;AAKA,SAASU,EAAgBV,GAA0B;AACjD,EAAIA,EAAG,YAAY,SAAS,SAC1BA,EAAG,SAAS,UAAU,SAAS,IAAI,GACnCA,EAAG,SAAS,WAAA,GACZA,EAAG,WAAW;AAElB;AAMA,MAAAE,IAAe;AAAA,EACb,YAAYF,GAA0BC,GAA2B;AAC/D,IAAAF,EAAMC,GAAIC,CAAO,GACjBU,EAAcX,GAAIC,CAAO;AAAA,EAC3B;AAAA,EAEA,QAAQD,GAA0BC,GAA2B;AAC3D,UAAM,EAAE,UAAAY,GAAU,OAAAC,EAAA,IAAUb;AAE5B,IAAIY,MAAaC,KACfL,EAAQT,GAAIC,CAAO;AAAA,EAEvB;AAAA,EAEA,UAAUD,GAA0B;AAClC,IAAAU,EAAgBV,CAAE,GAClBQ,EAAQR,CAAE;AAAA,EACZ;AACF;"}