@leaflink/stash 48.21.1 → 49.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "48.21.1",
+  "version": "49.0.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",
@@ -31,6 +31,11 @@
       "import": "./dist/utils/*.js",
       "default": "./dist/utils/*.js"
     },
+    "./directives/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/directives/*.js",
+      "default": "./dist/directives/*.js"
+    },
     "./*.vue": {
       "types": "./dist/*.vue.d.ts",
       "import": "./dist/*.js",

package/styles/base.css

@@ -652,7 +652,7 @@
 
   background: var(--color-ice-900);
   border-radius: theme('borderRadius.DEFAULT');
-  box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 2px 0 rgba(38, 38, 38, 0.05), 0 2px 6px 0 rgba(38, 38, 38, 0.10);
   color: var(--color-white);
   font-size: 0.75rem;
   line-height: calc(16 / 12);
@@ -745,7 +745,7 @@
     z-index: theme('zIndex.modal');
 
     .tooltip {
-      opacity: 1;
+      opacity: 0.95;
       visibility: visible;
     }
   }

package/dist/autofocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"autofocus.js","sources":["../src/directives/autofocus/autofocus.ts"],"sourcesContent":["interface AutofocusBinding {\n  modifiers: {\n    empty?: boolean;\n  };\n  value?: boolean;\n}\n\ntype AutofocusElementTargets = HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement;\n\nexport default {\n  mounted(el: HTMLElement, { modifiers, value }: AutofocusBinding) {\n    const matchesTarget = /input|textarea|button/i.test(el.nodeName);\n    const targetElement = matchesTarget\n      ? (el as AutofocusElementTargets)\n      : el.querySelector<AutofocusElementTargets>('input, textarea, button');\n\n    const isNotEmptyWithModifiers = !!targetElement && !(modifiers.empty && targetElement.value);\n    const shouldFocus = isNotEmptyWithModifiers && value !== false;\n\n    shouldFocus && targetElement.focus();\n  },\n};\n"],"names":["autofocus","el","modifiers","value","targetElement"],"mappings":"AASA,MAAeA,IAAA;AAAA,EACb,QAAQC,GAAiB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AAE/D,UAAMC,IADgB,yBAAyB,KAAKH,EAAG,QAAQ,IAE1DA,IACDA,EAAG,cAAuC,yBAAyB;AAKvE,IAHgC,CAAC,CAACG,KAAiB,EAAEF,EAAU,SAASE,EAAc,UACvCD,MAAU,MAE1CC,EAAc;EAC/B;AACF;"}

package/dist/clickoutside.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clickoutside.js","sources":["../src/directives/clickoutside/clickoutside.ts"],"sourcesContent":["/**\n * Determine whether a click occurred outside the referenced\n * element(s) or not. Trigger the directive's handler if so.\n */\nexport default {\n  beforeMount(el, binding) {\n    el._handler = (e) => {\n      if (!el.contains(e.target) && binding.value) {\n        binding.value(e);\n      }\n    };\n\n    document.body.addEventListener('click', el._handler);\n  },\n  unmounted(el) {\n    document.body.removeEventListener('click', el._handler);\n  },\n};\n"],"names":["vClickoutside","el","binding","e"],"mappings":"AAIA,MAAeA,IAAA;AAAA,EACb,YAAYC,GAAIC,GAAS;AACpB,IAAAD,EAAA,WAAW,CAACE,MAAM;AACnB,MAAI,CAACF,EAAG,SAASE,EAAE,MAAM,KAAKD,EAAQ,SACpCA,EAAQ,MAAMC,CAAC;AAAA,IACjB,GAGF,SAAS,KAAK,iBAAiB,SAASF,EAAG,QAAQ;AAAA,EACrD;AAAA,EACA,UAAUA,GAAI;AACZ,aAAS,KAAK,oBAAoB,SAASA,EAAG,QAAQ;AAAA,EACxD;AACF;"}

package/dist/observe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"observe.js","sources":["../src/directives/observe/observe.ts"],"sourcesContent":["const YES = 'yes';\nconst NO = 'no';\nconst observerKey = Symbol('v-observe');\n\nfunction markObserved(el) {\n  el.dataset.vObserved = YES;\n}\n\nfunction markNotObserved(el) {\n  el.dataset.vObserved = NO;\n}\n\nfunction cacheObserver(el, observer) {\n  el[observerKey] = observer;\n}\n\nfunction removeCachedObserver(el) {\n  el[observerKey] = undefined;\n}\n\nexport default {\n  mounted(el, { value: observer }) {\n    if (observer instanceof IntersectionObserver) {\n      observer.observe(el);\n      markObserved(el);\n      cacheObserver(el, observer);\n    } else {\n      markNotObserved(el);\n      removeCachedObserver(el);\n    }\n  },\n\n  updated(el, { value: observer }) {\n    const cached = el[observerKey];\n    const sameObserver = observer === cached;\n    const observed = el.dataset.vObserved === YES;\n    const newObserver = observer instanceof IntersectionObserver;\n\n    if (!observed) {\n      if (newObserver) {\n        observer.observe(el);\n        markObserved(el);\n        cacheObserver(el, observer);\n      }\n\n      return;\n    }\n\n    if (!newObserver) {\n      markNotObserved(el);\n\n      if (cached) {\n        cached.unobserve(el);\n        removeCachedObserver(el);\n      }\n\n      return;\n    }\n\n    if (sameObserver) {\n      return;\n    }\n\n    if (cached) {\n      cached.unobserve(el);\n    }\n\n    observer.observe(el);\n    markObserved(el);\n    cacheObserver(el, observer);\n  },\n\n  unmounted(el) {\n    const cached = el[observerKey];\n\n    if (cached instanceof IntersectionObserver) {\n      cached.unobserve(el);\n    }\n\n    markNotObserved(el);\n    removeCachedObserver(el);\n  },\n};\n"],"names":["YES","NO","observerKey","markObserved","el","markNotObserved","cacheObserver","observer","removeCachedObserver","observe","cached","sameObserver","observed","newObserver"],"mappings":"AAAA,MAAMA,IAAM,OACNC,IAAK,MACLC,IAAc,OAAO,WAAW;AAEtC,SAASC,EAAaC,GAAI;AACxB,EAAAA,EAAG,QAAQ,YAAYJ;AACzB;AAEA,SAASK,EAAgBD,GAAI;AAC3B,EAAAA,EAAG,QAAQ,YAAYH;AACzB;AAEA,SAASK,EAAcF,GAAIG,GAAU;AACnC,EAAAH,EAAGF,CAAW,IAAIK;AACpB;AAEA,SAASC,EAAqBJ,GAAI;AAChC,EAAAA,EAAGF,CAAW,IAAI;AACpB;AAEA,MAAeO,IAAA;AAAA,EACb,QAAQL,GAAI,EAAE,OAAOG,KAAY;AAC/B,IAAIA,aAAoB,wBACtBA,EAAS,QAAQH,CAAE,GACnBD,EAAaC,CAAE,GACfE,EAAcF,GAAIG,CAAQ,MAE1BF,EAAgBD,CAAE,GAClBI,EAAqBJ,CAAE;AAAA,EAE3B;AAAA,EAEA,QAAQA,GAAI,EAAE,OAAOG,KAAY;AACzB,UAAAG,IAASN,EAAGF,CAAW,GACvBS,IAAeJ,MAAaG,GAC5BE,IAAWR,EAAG,QAAQ,cAAcJ,GACpCa,IAAcN,aAAoB;AAExC,QAAI,CAACK,GAAU;AACb,MAAIC,MACFN,EAAS,QAAQH,CAAE,GACnBD,EAAaC,CAAE,GACfE,EAAcF,GAAIG,CAAQ;AAG5B;AAAA;AAGF,QAAI,CAACM,GAAa;AAChB,MAAAR,EAAgBD,CAAE,GAEdM,MACFA,EAAO,UAAUN,CAAE,GACnBI,EAAqBJ,CAAE;AAGzB;AAAA;AAGF,IAAIO,MAIAD,KACFA,EAAO,UAAUN,CAAE,GAGrBG,EAAS,QAAQH,CAAE,GACnBD,EAAaC,CAAE,GACfE,EAAcF,GAAIG,CAAQ;AAAA,EAC5B;AAAA,EAEA,UAAUH,GAAI;AACN,UAAAM,IAASN,EAAGF,CAAW;AAE7B,IAAIQ,aAAkB,wBACpBA,EAAO,UAAUN,CAAE,GAGrBC,EAAgBD,CAAE,GAClBI,EAAqBJ,CAAE;AAAA,EACzB;AACF;"}

package/dist/sticky.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sticky.js","sources":["../src/directives/sticky/sticky.ts"],"sourcesContent":["/**\n * The v-sticky directive makes an element sticky and toggles the \"is-sticky\" class when stickiness changes.\n * Note: the \"is-sticky\" class is user-defined and therefore varies in usage\n * @example\n * // sticks to the top of the screen\n * v-sticky\n * @example\n * // sticks 60px from the top of the screen\n * v-sticky=\"60\" or v-sticky:top=\"60\"\n * @example\n * // sticks 0px from the left of the screen\n * v-sticky:left\n */\n\n/**\n * Create an instance of window.IntersectionObserver and begin observing the element's position\n * Note: the instance is saved on the element under _stickyObserver so that it can be easily disconnected later\n * @param {Object} config\n * @param {Object} config.element - the HTMLElement that is sticky\n * @param {String} [config.position] - where the element should stick\n * @param {Number} [config.offset] - space from edge of screen in pixels when sticky\n */\nfunction observeStickiness({ element, position = 'top', offset = 0 }) {\n  if (!window.IntersectionObserver || !element) {\n    return;\n  }\n\n  const topMargin = `${position === 'top' ? -(offset + 1) : 0}px`;\n  const rightMargin = `${position === 'right' ? -(offset + 1) : 0}px`;\n  const bottomMargin = `${position === 'bottom' ? -(offset + 1) : 0}px`;\n  const leftMargin = `${position === 'left' ? -(offset + 1) : 0}px`;\n\n  if (offset === null) {\n    return;\n  }\n\n  // @ts-ignore - todo\n  element._stickyObserver = new window.IntersectionObserver(updateStickyStyles, {\n    root: null,\n    threshold: 1.0,\n    rootMargin: `${topMargin} ${rightMargin} ${bottomMargin} ${leftMargin}`,\n  }); // InteractionObserver docs: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n\n  element.style.position = 'sticky';\n  element.style[position] = `${offset}px`;\n  element._stickyObserver.observe(element);\n}\n\n/**\n * Stop observing, disconnect the InteractionObserver instance, and prepare for instance for garbage collection\n * @param {Object} element - an HTMLElement which may have a _stickyObserver property\n */\nfunction removeSticky(element) {\n  element.classList.remove('is-sticky');\n\n  if (element._stickyObserver) {\n    element._stickyObserver.unobserve(element);\n    element._stickyObserver.disconnect();\n    element._stickyObserver = undefined;\n  }\n}\n\n/**\n * This is the callback function for the IntersectionObserver; it toggles the \"is-sticky\" class\n * @param {Object[]} entries - The IntersectionObserverEntry objects being observed. https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry\n */\nfunction updateStickyStyles(entries = []) {\n  entries.forEach((entry) => {\n    // @ts-ignore - todo\n    // The target element is \"intersecting\" with the root element when it is not touching the nav bar\n    entry.target.classList.toggle('is-sticky', !entry.isIntersecting);\n  });\n}\n\nexport default {\n  mounted(el, binding) {\n    observeStickiness({\n      element: el,\n      position: binding.arg,\n      offset: binding.value,\n    });\n  },\n\n  unmounted(el) {\n    removeSticky(el);\n  },\n\n  updated(el, binding) {\n    removeSticky(el);\n    observeStickiness({\n      element: el,\n      position: binding.arg,\n      offset: binding.value,\n    });\n  },\n};\n"],"names":["observeStickiness","element","position","offset","topMargin","rightMargin","bottomMargin","leftMargin","updateStickyStyles","removeSticky","entries","entry","sticky","el","binding"],"mappings":"AAsBA,SAASA,EAAkB,EAAE,SAAAC,GAAS,UAAAC,IAAW,OAAO,QAAAC,IAAS,KAAK;AACpE,MAAI,CAAC,OAAO,wBAAwB,CAACF;AACnC;AAGF,QAAMG,IAAY,GAAGF,MAAa,QAAQ,EAAEC,IAAS,KAAK,OACpDE,IAAc,GAAGH,MAAa,UAAU,EAAEC,IAAS,KAAK,OACxDG,IAAe,GAAGJ,MAAa,WAAW,EAAEC,IAAS,KAAK,OAC1DI,IAAa,GAAGL,MAAa,SAAS,EAAEC,IAAS,KAAK;AAE5D,EAAIA,MAAW,SAKfF,EAAQ,kBAAkB,IAAI,OAAO,qBAAqBO,GAAoB;AAAA,IAC5E,MAAM;AAAA,IACN,WAAW;AAAA,IACX,YAAY,GAAGJ,KAAaC,KAAeC,KAAgBC;AAAA,EAAA,CAC5D,GAEDN,EAAQ,MAAM,WAAW,UACjBA,EAAA,MAAMC,CAAQ,IAAI,GAAGC,OACrBF,EAAA,gBAAgB,QAAQA,CAAO;AACzC;AAMA,SAASQ,EAAaR,GAAS;AACrB,EAAAA,EAAA,UAAU,OAAO,WAAW,GAEhCA,EAAQ,oBACFA,EAAA,gBAAgB,UAAUA,CAAO,GACzCA,EAAQ,gBAAgB,cACxBA,EAAQ,kBAAkB;AAE9B;AAMA,SAASO,EAAmBE,IAAU,IAAI;AAChC,EAAAA,EAAA,QAAQ,CAACC,MAAU;AAGzB,IAAAA,EAAM,OAAO,UAAU,OAAO,aAAa,CAACA,EAAM,cAAc;AAAA,EAAA,CACjE;AACH;AAEA,MAAeC,IAAA;AAAA,EACb,QAAQC,GAAIC,GAAS;AACD,IAAAd,EAAA;AAAA,MAChB,SAASa;AAAA,MACT,UAAUC,EAAQ;AAAA,MAClB,QAAQA,EAAQ;AAAA,IAAA,CACjB;AAAA,EACH;AAAA,EAEA,UAAUD,GAAI;AACZ,IAAAJ,EAAaI,CAAE;AAAA,EACjB;AAAA,EAEA,QAAQA,GAAIC,GAAS;AACnB,IAAAL,EAAaI,CAAE,GACGb,EAAA;AAAA,MAChB,SAASa;AAAA,MACT,UAAUC,EAAQ;AAAA,MAClB,QAAQA,EAAQ;AAAA,IAAA,CACjB;AAAA,EACH;AACF;"}

package/dist/tooltip.js.map

@@ -1 +0,0 @@
-{"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\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\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    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 */\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","vTooltip","oldValue","value"],"mappings":";;;;;;;;;AAKY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAJIA,IAAAA,KAAA,CAAA,CAAA;AAUZ,MAAMC,IAAkB,OAClBC,IAAY,OAAO,OAAOF,CAAS;AAKzC,SAASG,EAAYC,GAA+C;AAClE,MAAIC,IAAWJ;AAEL,SAAAC,EAAA,QAAQ,CAACI,MAAQ;AACrB,QAAAF,EAAUE,CAAG;AACJ,aAAAD,IAAAC,GACJ;AAAA,EACT,CACD,GAEMD;AACT;AAQA,SAASE,EAAMC,GAA0BC,GAA2B;AAClE,MAAIA,EAAQ,OAAO;AACX,UAAAC,IAAU,SAAS,cAAc,KAAK,GACtCC,IAAS,oBAAoBR,EAAYM,EAAQ,SAAS;AAEhE,IAAAC,EAAQ,UAAU,QAAQC,GAClBD,EAAA,aAAa,QAAQ,SAAS,GACtCA,EAAQ,YAAYD,EAAQ,OAE5BD,EAAG,YAAYE,CAAO,GAGnBF,EAAA,UAAU,IAAI,gBAAgB,GAEjCA,EAAG,WAAW,GAELI,EAAA,EAAE,KAAK,MAAM;AACpB,UAAID,EAAO,SAAS,QAAQ,KAAKA,EAAO,SAAS,KAAK,GAAG;AACjD,cAAAE,IAAWC,EAAyBJ,CAAO;AAEjD,YAAIG,KAAA,QAAAA,EAAU,OAAO;AACnB,gBAAME,IAASF,EAAS,SAAS,UAAU,MAAM;AAEjD,UAAAH,EAAQ,MAAM,YAAY,YAAY,GAAGK,IAASF,EAAS,OAAO;AAAA;AAAA;AAAA,IAEtE,CACD;AAAA;AAEL;AAKA,SAASG,EAAQR,GAAiB;AAC1B,QAAAE,IAAUF,EAAG,cAAc,UAAU;AAExC,EAAAA,EAAA,UAAU,OAAO,gBAAgB,GACjCA,EAAA,MAAM,eAAe,UAAU,GAE9BE,KACFA,EAAQ,OAAO;AAEnB;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,OAClB,GAAG;AAAA,EAAA,GAGLD,EAAA,SAAS,QAAQ,SAAS,IAAI;AAErC;AAKA,SAASU,EAAgBV,GAA0B;AAC7C,EAAAA,EAAG,YAAY,SAAS,SACvBA,EAAA,SAAS,UAAU,SAAS,IAAI,GACnCA,EAAG,SAAS,cACZA,EAAG,WAAW;AAElB;AAKA,MAAea,IAAA;AAAA,EACb,YAAYb,GAA0BC,GAA2B;AAC/D,IAAAF,EAAMC,GAAIC,CAAO,GACjBU,EAAcX,GAAIC,CAAO;AAAA,EAC3B;AAAA,EAEA,QAAQD,GAA0BC,GAA2B;AACrD,UAAA,EAAE,UAAAa,GAAU,OAAAC,EAAU,IAAAd;AAE5B,IAAIa,MAAaC,KACfN,EAAQT,GAAIC,CAAO;AAAA,EAEvB;AAAA,EAEA,UAAUD,GAA0B;AAClC,IAAAU,EAAgBV,CAAE,GAClBQ,EAAQR,CAAE;AAAA,EACZ;AACF;"}

package/dist/viewable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"viewable.js","sources":["../src/directives/viewable/viewable.ts"],"sourcesContent":["import isEqual from 'lodash-es/isEqual';\nimport { nextTick } from 'vue';\n\nconst viewableKey = Symbol('v-viewable');\n\ntype ViewableCallback = (result: boolean, entry: IntersectionObserverEntry) => void;\n\nclass ViewableState {\n  private observer: IntersectionObserver | null;\n  private el: Element;\n  private frozen: boolean;\n  private options: {\n    callback: ViewableCallback;\n    intersection: IntersectionObserverInit;\n  };\n  private oldResult: undefined | boolean;\n  private callback: ViewableCallback | null;\n  private modifiers?: {\n    once?: boolean;\n  };\n\n  constructor(el, options, modifiers = {}) {\n    this.el = el;\n    this.modifiers = modifiers;\n    this.observer = null;\n    this.callback = null;\n    this.frozen = false;\n    this.options = {\n      callback: () => {},\n      intersection: {},\n    };\n    this.createObserver(options);\n  }\n\n  /**\n   * Default threshold of 100%.\n   * Informs when the element is 100% visibile, or at the provided threshold(s)\n   * Does not support an array of values.\n   * @see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#thresholds\n   */\n  get threshold() {\n    return this.options.intersection && typeof this.options.intersection.threshold === 'number'\n      ? this.options.intersection.threshold\n      : 1;\n  }\n\n  get intersectionObserverOptions() {\n    return {\n      threshold: this.threshold,\n      ...this.options.intersection,\n    };\n  }\n\n  createObserver(options) {\n    if (this.observer) {\n      this.destroyObserver();\n    }\n\n    if (this.frozen) {\n      return;\n    }\n\n    this.options = this.processOptions(options);\n\n    this.callback = (result, entry) => {\n      this.options.callback(result, entry);\n\n      if (result && this.modifiers?.once) {\n        this.frozen = true;\n        this.destroyObserver();\n      }\n    };\n\n    this.oldResult = undefined;\n\n    if ('IntersectionObserver' in window) {\n      this.observer = new IntersectionObserver((entries) => {\n        let entry = entries[0];\n\n        if (entries.length > 1) {\n          const intersectingEntry = entries.find((e) => e.isIntersecting);\n\n          if (intersectingEntry) {\n            entry = intersectingEntry;\n          }\n        }\n\n        if (this.callback) {\n          // Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.\n          const result = entry.isIntersecting && entry.intersectionRatio >= this.threshold;\n\n          if (result === this.oldResult) {\n            return;\n          }\n\n          this.oldResult = result;\n          this.callback(result, entry);\n        }\n      }, this.intersectionObserverOptions);\n    }\n\n    // Wait for the element to be in document\n    nextTick(() => {\n      if (this.observer) {\n        this.observer.observe(this.el);\n      }\n    });\n  }\n\n  destroyObserver() {\n    if (this.observer) {\n      this.observer.unobserve(this.el);\n      this.observer.disconnect();\n      this.observer = null;\n    }\n  }\n\n  private processOptions(value) {\n    const options =\n      typeof value === 'function'\n        ? { callback: value } // Simple options (callback-only)\n        : value; // Options object\n\n    return options;\n  }\n}\n\nfunction mount(el, { modifiers = {}, value }) {\n  if (!value) {\n    return;\n  }\n\n  if (value.intersection?.threshold instanceof Array) {\n    throw new Error('`threshold` must be a number. v-viewable does not support `threshold` as an array.');\n  }\n\n  const state = new ViewableState(el, value, modifiers);\n\n  el[viewableKey] = state;\n}\n\nfunction updated(el, { modifiers, value, oldValue }) {\n  if (isEqual(value, oldValue) || value.toString() === oldValue.toString()) {\n    return;\n  }\n\n  const state = el[viewableKey];\n\n  if (!value) {\n    unmount(el);\n    return;\n  }\n\n  if (state) {\n    state.createObserver(value);\n  } else {\n    mount(el, { modifiers, value });\n  }\n}\n\nfunction unmount(el) {\n  const state = el[viewableKey];\n\n  if (state) {\n    state.destroyObserver();\n    delete el[viewableKey];\n  }\n}\n\nexport default {\n  beforeMount: mount,\n  updated,\n  unmounted: unmount,\n};\n"],"names":["viewableKey","ViewableState","el","options","modifiers","__publicField","result","entry","_a","entries","intersectingEntry","e","nextTick","value","mount","state","updated","oldValue","isEqual","unmount","viewable"],"mappings":"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"}