@inizioevoke/astro-core 1.4.2 → 1.5.1

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "",
   "license": "ISC",
   "author": "",
   "type": "module",
   "main": "./index.ts",
   "exports": {
-    "./components": "./src/components/index.ts",
-    "./components/Modal": "./src/components/Modal/index.ts",
-    "./components/ScrollContainer": "./src/components/ScrollContainer/index.ts",
-    "./integrations": "./src/integrations/index.ts"
+    ".": "./src/components/index.ts",
+    "./integrations": "./src/integrations/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./lib/FlipCard": "./src/components/FlipCard/index.ts",
+    "./lib/Modal": "./src/components/Modal/index.ts",
+    "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts"
   },
   "files": [
     "src",

package/src/components/FlipCard/FlipCard.astro

@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './FlipCard.css';
+interface Props extends HTMLAttributes<'div'> {
+  width?: number;
+  height?: number;
+  perspective?: number;
+}
+
+const { 
+  width,
+  height,
+  perspective,
+  ...rest
+} = Astro.props;
+
+const attrs = {...rest};
+
+const style: string[] = [];
+if (attrs.style) {
+  style.push(attrs.style as string);
+}
+if (width) {
+  style.push(`--width:${width}px`);
+}
+if (height) {
+  style.push(`--height:${height}px`);
+}
+if (perspective) {
+  style.push(`--perspective:${perspective}px`);
+}
+
+delete attrs.style;
+
+// Both or default: <div slot="trigger">[content]</div>
+const triggerSlot = Astro.slots.has('trigger') ? await Astro.slots.render('trigger') : undefined;
+// Front: <div slot="front-trigger">[front content]</div>
+const frontTriggerSlot = Astro.slots.has('front-trigger') ? await Astro.slots.render('front-trigger') : triggerSlot;
+// Back: <div slot="back-trigger">[back content]</div>
+const backTriggerSlot = Astro.slots.has('back-trigger') ? await Astro.slots.render('back-trigger') : triggerSlot;
+---
+<evo-flip-card flipped="false" style={style.join(';')} {...attrs}>
+  <div class="evo-flip-card-wrapper">
+    <div class="evo-flip-card-front">
+      <button class="evo-flip-card-trigger">{frontTriggerSlot ?? <Fragment set:html={'&#8635;'} />}</button>
+      <slot name="front" />
+    </div>
+    <div class="evo-flip-card-back">
+      <button class="evo-flip-card-trigger">{backTriggerSlot ?? <Fragment set:html={'&#8635;'} />}</button>
+      <slot name="back" />
+    </div>
+  </div>
+</evo-flip-card>
+
+<script>
+  import './FlipCard';
+</script>

package/src/components/FlipCard/FlipCard.css

@@ -0,0 +1,50 @@
+evo-flip-card {
+  --evo-flip-card-width: 640px;
+  --evo-flip-card-height: 360px;
+  --evo-flip-card-duration: 0.6s;
+
+  display: block;
+  width: var(--evo-flip-card-width);
+  height: var(--evo-flip-card-height);
+  perspective: 1000px;
+
+  .evo-flip-card-wrapper {
+    position: relative;
+    width: 100%;
+    height: var(--evo-flip-card-height);
+    transition: transform var(--evo-flip-card-duration);
+    transform-style: preserve-3d;
+    transform-origin: center center;
+
+    .evo-flip-card-front,
+    .evo-flip-card-back {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: var(--evo-flip-card-height);
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      transform-style: preserve-3d;
+      transform: rotateY(0deg);
+      transform-origin: center center;
+
+      .evo-flip-card-trigger {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        cursor: pointer;
+        z-index: 99;
+      }
+    }
+    .evo-flip-card-back {
+      transform: rotateY(180deg);
+    }
+  }
+
+  &[flipped="true"] {
+    .evo-flip-card-wrapper {
+      transform: rotateY(180deg);
+    }
+  }
+}

package/src/components/FlipCard/FlipCard.ts

@@ -0,0 +1,45 @@
+const TAG_NAME = 'evo-flip-card';
+
+export class EvoFlipCardElement extends HTMLElement {
+
+  static get observedAttributes(): string[] {
+    return ['flipped'];
+  }
+
+  #flipped: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    [...this.querySelectorAll<HTMLButtonElement>('button.evo-flip-card-trigger')].forEach((btn) => {
+      btn.addEventListener('click', this.#handleTriggerClick.bind(this));
+    });
+  }
+
+  get flipped() {
+    return this.#flipped;
+  }
+  set flipped(value: boolean | string) {
+    this.#flipped = typeof value == 'string' ? value.toLowerCase() === 'true' : value === true;
+    this.setAttribute('flipped', this.#flipped.toString());
+  }
+
+  toggleFlipped() {
+    this.flipped = !this.flipped;
+  }
+  flipFront() {
+    this.flipped = false;
+  }
+  flipBack() {
+    this.flipped = true;
+  }
+
+  #handleTriggerClick() {
+    this.toggleFlipped();
+  }
+}
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoFlipCardElement);
+}

package/src/components/FlipCard/index.ts

@@ -0,0 +1 @@
+export * from './FlipCard';

package/src/components/Modal/index.ts

@@ -1,2 +1 @@
-export { default as Modal } from './Modal.astro';
 export * from './Modal';

package/src/components/ScrollContainer/index.ts

@@ -1,2 +1 @@
-export { default as ScrollContainer } from './ScrollContainer.astro';
 export * from './ScrollContainer';

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as FlipCard } from './FlipCard/FlipCard.astro';
 export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalOverlay } from './Modal/ModalOverlay.astro';
 export { default as ModalTrigger } from './Modal/ModalTrigger.astro';

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * as FlipCard from '../components/FlipCard/FlipCard';
+export * as Modal from '../components/Modal/Modal';
+export * as ScrollContainer from '../components/ScrollContainer/ScrollContainer';