@inizioevoke/astro-core 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -12,6 +12,7 @@
     "./lib": "./src/lib/index.ts",
     "./lib/FlipCard": "./src/components/FlipCard/index.ts",
     "./lib/Modal": "./src/components/Modal/index.ts",
+    "./lib/PdfViewer": "./src/components/PdfViewer/index.ts",
     "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts",
     "./lib/swipe": "./src/lib/swipe.ts",
     "./v2": "./src/components/v2.ts",

package/src/components/PdfViewer/PdfViewer.astro

@@ -11,11 +11,16 @@ interface Props {
   zoom?: 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150;
   page?: number;
   pages?: string;
-  bookmarks?: Record<string, number>;
-  bookmarkText?: string;
+  // bookmarks?: Record<string, number>;
+  // bookmarkText?: string;
   toolbar?: {
+    nav?: boolean;
     page?: boolean;
     zoom?: boolean;
+    bookmarks?: {
+      placeholder?: string;
+      items: Record<string, number>;
+    }
   }
 }
 const { 
@@ -26,8 +31,6 @@ const {
   pdf,
   zoom,
   page = 1,
-  bookmarks,
-  bookmarkText = 'Jump to',
   toolbar,
   ...rest 
 } = Astro.props;
@@ -50,7 +53,7 @@ if (height) {
       <slot name="toolbar-start" />
     </div>
     <div class="evo-pdf-viewer-toolbar-controls">
-      <div class="evo-pdf-viewer-toolbar-arrows">
+      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar?.nav === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-prev" title="Previous">
           <slot name="toolbar-prev">
             <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -69,8 +72,7 @@ if (height) {
       <div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
         <select><option value="1">1</option></select> of <span class="evo-pdf-viewer-nav-page-count">1</span>
       </div>
-      {toolbar?.zoom !== false &&
-      <div class="evo-pdf-viewer-toolbar-zoom">
+      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar?.zoom === false ? 'evo-hidden' : null]}>
         <button class="evo-pdf-viewer-toolbar-zoom-out" title="Zoom out">
           <slot name="toolbar-zoom-out">
             <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -91,12 +93,12 @@ if (height) {
             </svg>
           </slot>
         </button>
-      </div>}
-      {bookmarks && Object.keys(bookmarks).length > 0 && 
+      </div>
+      {toolbar?.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
       <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
-          <option value="" disabled selected hidden>{bookmarkText}</option>
-          {Object.entries(bookmarks).map((b) => (
+          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? 'Jump To'}</option>
+          {Object.entries(toolbar.bookmarks.items).map((b) => (
             <option value={b[1]}>{b[0]}</option>
           ))}
         </select>

package/src/components/PdfViewer/PdfViewer.css

@@ -14,6 +14,9 @@
   }
 
   .evo-pdf-viewer-toolbar {
+    --evo-pdf-viewer-toolbar-font-color: #333333;
+    --evo-pdf-viewer-toolbar-separator-color: #cccccc;
+    --evo-pdf-viewer-toolbar-hover: #dddddd;
     display: flex;
     justify-content: var(--evo-pdf-viewer-toolbar-align);
     align-items: center;
@@ -48,13 +51,18 @@
       background-color: transparent;
       /* border: 1px solid #888888;
       border-radius: 6px; */
-      &:hover {
-        background-color: rgba(0,0,0,0.1);
+      &:active {
+        background-color: var(--evo-pdf-viewer-toolbar-hover);
+      }
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--evo-pdf-viewer-toolbar-hover);
+        }
       }
 
       .evo-pdf-viewer-toolbar-icon {
         path {
-          stroke: #000000;
+          stroke: var(--evo-pdf-viewer-toolbar-font-color);
         }
       }
     }
@@ -64,7 +72,7 @@
       height: 24px;
       padding: 0;
       cursor: pointer;
-      color: #000000;
+      color: var(--evo-pdf-viewer-toolbar-font-color);
       font-family: sans-serif;
       font-size: 16px;
       line-height: 24px;
@@ -79,7 +87,8 @@
       height: 30px;
       margin: 0;
       padding: 0 0 0 8px;
-      border-left: 1px solid black;
+      border-left: 1px solid var(--evo-pdf-viewer-toolbar-separator-color);
+      color: var(--evo-pdf-viewer-toolbar-font-color);
       font-family: sans-serif;
       font-size: 16px;
       line-height: 30px;
@@ -133,6 +142,7 @@
     .evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
       .evo-scroll-content {
+        overflow-x: hidden;
         .evo-pdf-viewer-page-wrapper {
           display: block;
           margin: 18px auto;
@@ -167,7 +177,7 @@
     }
   }
 
-  &.evo-pdf-viewer-theme-modern {
+  /* &.evo-pdf-viewer-theme-modern {
     .evo-pdf-viewer-toolbar {
       button {
         background-color: transparent;
@@ -178,30 +188,17 @@
         }
       }
     }
-  }
+  } */
   &.evo-pdf-viewer-theme-dark {
     background-color: #555555;
     .evo-pdf-viewer-toolbar {
-      button {
-        &:hover {
-          background-color: #333333;
-        }
-        .evo-pdf-viewer-toolbar-icon {
-          path {
-            stroke: #ffffff;
-          }
-        }
-      }
+      --evo-pdf-viewer-toolbar-font-color: white;
+      --evo-pdf-viewer-toolbar-separator-color: #888888;
+      --evo-pdf-viewer-toolbar-hover: #333333;
       select {
-        color: white;
         border: 1px solid rgba(255,255,255,0.25);
         background-color: #333333;
       }
-      .evo-pdf-viewer-nav-page,
-      .evo-pdf-viewer-toolbar-bookmarks {
-        color: #ffffff;
-        border-color: #cccccc;
-      }
     }
     .evo-pdf-viewer-container {
       .evo-scroll-container {
@@ -213,26 +210,13 @@
   &.evo-pdf-viewer-theme-black {
     background-color: #000000;
     .evo-pdf-viewer-toolbar {
-      button {
-        &:hover {
-          background-color: #333333;
-        }
-        .evo-pdf-viewer-toolbar-icon {
-          path {
-            stroke: #ffffff;
-          }
-        }
-      }
+      --evo-pdf-viewer-toolbar-font-color: white;
+      --evo-pdf-viewer-toolbar-separator-color: #666666;
+      --evo-pdf-viewer-toolbar-hover: #666666;
       select {
-        color: white;
         border: 1px solid rgba(255,255,255,0.15);
         background-color: #333333;
       }
-      .evo-pdf-viewer-nav-page,
-      .evo-pdf-viewer-toolbar-bookmarks {
-        color: #ffffff;
-        border-color: #cccccc;
-      }
     }
     .evo-pdf-viewer-container {
       .evo-scroll-container {

package/src/components/PdfViewer/index.ts

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

package/src/lib/index.ts

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