@inizioevoke/astro-core 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/components/ScrollContainer/ScrollContainer.astro

@@ -38,7 +38,7 @@ if (innerWidth) {
   contentAttrs.style = `width:${typeof innerWidth == 'number' || /^\d+$/.test(innerWidth) ? `${innerWidth}px` : innerWidth};`
 }
 ---
-<scroll-container class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
+<evo-scroll-container class:list={['evo-scroll-container', cssClass]} {...containerAttrs}>
   <div class="evo-scroll-content" {...contentAttrs}>
     <slot />
   </div>
@@ -48,7 +48,7 @@ if (innerWidth) {
   {horizontal && <div class="evo-scroll-track evo-scroll-track-x">
     <div class="evo-scroll-thumb"></div>
   </div>}
-</scroll-container>
+</evo-scroll-container>
 
 <script>
   import './ScrollContainer';

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -1,5 +1,3 @@
-
-
 const intersectionObserver = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
@@ -26,15 +24,12 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-export interface IScrollContainer {
-  scroll(args?: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' }): void;
-  getScroll(): { left: number, top: number }
-  resize(args: { height?: number }): void;
-  refresh(): void;
-}
 
+export class EvoScrollContainerElement extends HTMLElement {
+  static get htmlTagName() {
+    return 'evo-scroll-container';
+  }
 
-export class ScrollContainer extends HTMLElement implements IScrollContainer {
   // #container: HTMLElement & { evoScrollContainer: ScrollContainer };
   #content!: HTMLElement;
   #track!: HTMLElement;
@@ -238,9 +233,13 @@ export class ScrollContainer extends HTMLElement implements IScrollContainer {
     this.#thumb.style.top = `${top}px`;
   }
 }
-customElements.define('scroll-container', ScrollContainer);
+if (!customElements.get(EvoScrollContainerElement.htmlTagName)) {
+  customElements.define(EvoScrollContainerElement.htmlTagName, EvoScrollContainerElement);
+}
+
+export type IScrollContainer = InstanceType<typeof EvoScrollContainerElement>;
 
-export function resize(selector: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
+export function resize(selector: string | HTMLElement, { height }: { height?: number }) {
   if (typeof height == 'number') {
     const sc = getScrollContainer(selector);
     if (sc) {
@@ -249,20 +248,20 @@ export function resize(selector: string | HTMLElement | ScrollContainer, { heigh
   }
 }
 
-export function refresh(selector?: string | HTMLElement | ScrollContainer) {
+export function refresh(selector?: string | HTMLElement) {
   if (selector) {
     const sc = getScrollContainer(selector);
     if (sc) {
       sc.refresh()
     }
   } else {
-    [...scrollContainers.values()].forEach((selector) => {
+    [...document.querySelectorAll<EvoScrollContainerElement>(EvoScrollContainerElement.htmlTagName)].forEach((selector) => {
       selector.refresh();
     });
   }
 }
 
-export function getScroll(selector: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
+export function getScroll(selector: string | HTMLElement): { left: number, top: number } | undefined {
   const sc = getScrollContainer(selector);
   if (sc) {
     return sc.getScroll();
@@ -271,7 +270,7 @@ export function getScroll(selector: string | HTMLElement | ScrollContainer): { l
   }
 }
 
-export function scroll(selector: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+export function scroll(selector: string | HTMLElement, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
   const sc = getScrollContainer(selector);
   if (sc) {
     const current = sc.getScroll();
@@ -279,12 +278,12 @@ export function scroll(selector: string | HTMLElement | ScrollContainer, { left,
   }
 }
 
-export function getScrollContainer(selector: string | HTMLElement | ScrollContainer): IScrollContainer | undefined {
-  if (selector instanceof ScrollContainer) {
+export function getScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+  if (selector instanceof EvoScrollContainerElement) {
     return selector;
   }
   const scrollContainer = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
-  return scrollContainer instanceof ScrollContainer ? scrollContainer as IScrollContainer : undefined;
+  return scrollContainer instanceof EvoScrollContainerElement ? scrollContainer as IScrollContainer : undefined;
   // const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
   // return key ? scrollContainers.get(key) : undefined;
 }