Merge branch 'develop' into staging

.github/workflows/continuum.yaml

@@ -50,7 +50,7 @@ jobs:
 
     # Prepare GitHub Pages Showcase deployment
     - name: Setup GitHub Pages
-      uses: actions/configure-pages@v4
+      uses: actions/configure-pages@v5
     - name: Upload GitHub Pages artifact
       uses: actions/upload-pages-artifact@v3
       with:

packages/ketchup-react/src/index.ts

@@ -50,6 +50,7 @@ export const KupList = /*@__PURE__*/createReactComponent<JSX.KupList, HTMLKupLis
 export const KupMagicBox = /*@__PURE__*/createReactComponent<JSX.KupMagicBox, HTMLKupMagicBoxElement>('kup-magic-box');
 export const KupNavBar = /*@__PURE__*/createReactComponent<JSX.KupNavBar, HTMLKupNavBarElement>('kup-nav-bar');
 export const KupNumericPicker = /*@__PURE__*/createReactComponent<JSX.KupNumericPicker, HTMLKupNumericPickerElement>('kup-numeric-picker');
+export const KupPdf = /*@__PURE__*/createReactComponent<JSX.KupPdf, HTMLKupPdfElement>('kup-pdf');
 export const KupPhotoFrame = /*@__PURE__*/createReactComponent<JSX.KupPhotoFrame, HTMLKupPhotoFrameElement>('kup-photo-frame');
 export const KupPlanner = /*@__PURE__*/createReactComponent<JSX.KupPlanner, HTMLKupPlannerElement>('kup-planner');
 export const KupPlannerRenderer = /*@__PURE__*/createReactComponent<JSX.KupPlannerRenderer, HTMLKupPlannerRendererElement>('kup-planner-renderer');

packages/ketchup-showcase/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: ['@babel/plugin-transform-private-methods'],
 };

packages/ketchup-showcase/package.json

@@ -25,6 +25,7 @@
     "vue-router": "^3.5.1"
   },
   "devDependencies": {
+    "@babel/plugin-transform-private-methods": "^7.24.1",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "@vue/cli-plugin-babel": "~5.0.8",

packages/ketchup-showcase/src/App.vue

@@ -642,6 +642,16 @@ export default {
                 value: 'Numeric picker',
                 visible: true,
               },
+              {
+                cells: {
+                  ROUTE: {
+                    value: 'pdf',
+                  },
+                },
+                icon: 'document',
+                value: 'Pdf',
+                visible: true,
+              },
               {
                 cells: {
                   ROUTE: {

packages/ketchup-showcase/src/plugins/router.ts

@@ -118,6 +118,11 @@ const basicRoutes = [
     component: () =>
       import(`@/views/components/basic/numericpicker/NumericPicker.vue`),
   },
+  {
+    path: `/pdf`,
+    name: 'pdf',
+    component: () => import(`@/views/components/basic/pdf/Pdf.vue`),
+  },
   {
     path: `/progressbar`,
     name: 'progressbar',

packages/ketchup-showcase/src/views/components/basic/pdf/Pdf.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <comp :giturl="giturl" :headtitle="headtitle" :titles="titles">
+      <template v-slot:0>
+        <pdf-demo></pdf-demo>
+      </template>
+      <template v-slot:1>
+        <pdf-basic></pdf-basic>
+      </template>
+    </comp>
+  </div>
+</template>
+
+<script>
+import Comp from '@/views/templates/Comp';
+import PdfDemo from './examples/PdfDemo';
+import PdfBasic from './examples/PdfBasic';
+
+export default {
+  components: {
+    PdfDemo,
+    PdfBasic,
+    Comp,
+  },
+
+  data() {
+    return {
+      giturl:
+        'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/components/kup-pdf',
+      headtitle: 'Pdf',
+      titles: ['Playground', 'Basic Usage'],
+    };
+  },
+  title: 'Ketchup | Pdf',
+};
+</script>

packages/ketchup-showcase/src/views/components/basic/pdf/examples/PdfBasic.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p
+        >The Pdf component provides a streamlined solution for viewing Pdf
+        documents.</p
+      >
+      <div class="demo-container">
+        <p class="centered">Sample markup</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PdfBasic',
+  data() {
+    return {
+      markupBasic: '<kup-pdf></kup-pdf>',
+    };
+  },
+};
+</script>

packages/ketchup-showcase/src/views/components/basic/pdf/examples/PdfDemo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <demo
+      :demoComp="demoComp"
+      :demoEvents="demoEvents"
+      :demoMethods="demoMethods"
+      :demoProps="demoProps"
+    ></demo>
+  </div>
+</template>
+
+<script>
+import Demo from '@/views/templates/Demo';
+
+export default {
+  components: {
+    Demo,
+  },
+  name: 'PdfDemo',
+  data() {
+    return {
+      demoComp: createComp(),
+      demoEvents: [
+        {
+          name: 'kup-pdf-ready',
+          type: 'CustomEvent',
+        },
+      ],
+      demoMethods: [
+        {
+          name: 'getProps',
+          description:
+            "Returns the props' values of the component. When invoked giving true as the only argument, returns the props descriptions instead.",
+        },
+        {
+          name: 'refresh',
+          description:
+            'This method is used to trigger a new render of the component.',
+        },
+        {
+          name: 'setProps',
+          description: 'Sets the props to the component.',
+        },
+      ],
+      demoProps: [
+        {
+          prop: 'pdfPath',
+          description: 'The path to the PDF file.',
+          type: 'string',
+          default: '""',
+          try: 'field',
+        },
+      ],
+    };
+  },
+};
+
+function createComp() {
+  const comp = document.createElement('kup-pdf');
+  comp.id = 'demo-component';
+  comp.pdfPath = '/assets/kup-pdf-sample.pdf';
+  return comp;
+}
+</script>

packages/ketchup/package.json

@@ -55,6 +55,7 @@
         "interactjs": "1.10.12",
         "jquery": "^3.7.0",
         "numeral": "^2.0.6",
+        "pdfjs-dist": "^3.11.174",
         "resize-observer": "^1.0.4",
         "vanilla-picker": "^2.12.1"
     },

packages/ketchup/src/assets/index.js

@@ -174,6 +174,10 @@ components.data = [
         value: 'Numeric picker',
         id: 'numeric-picker.html',
     },
+    {
+        value: 'Pdf',
+        id: 'pdf.html',
+    },
     {
         value: 'Planner',
         id: 'planner.html',

packages/ketchup/src/assets/pdf.js

@@ -0,0 +1,15 @@
+const comp = document.getElementById('pdf');
+
+comp.addEventListener('kup-pdf-ready', (e) => {
+    console.log('Pdf ready', e);
+});
+
+const props = {
+    pdfPath: '../../assets/kup-pdf-sample.pdf',
+};
+
+if (props) {
+    for (const key in props) {
+        comp[key] = props[key];
+    }
+}

packages/ketchup/src/components.d.ts

@@ -2894,6 +2894,28 @@ export namespace Components {
          */
         "setValue": (value: string) => Promise<void>;
     }
+    interface KupPdf {
+        /**
+          * Used to retrieve component's props values.
+          * @param descriptions - When provided and true, the result will be the list of props with their description.
+          * @returns List of props as object, each key will be a prop.
+         */
+        "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * Path of the pdf document
+          * @default null
+         */
+        "pdfPath": string;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
+    }
     interface KupPhotoFrame {
         /**
           * Custom style of the component.
@@ -4238,6 +4260,10 @@ export interface KupNumericPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupNumericPickerElement;
 }
+export interface KupPdfCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupPdfElement;
+}
 export interface KupPhotoFrameCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupPhotoFrameElement;
@@ -4970,6 +4996,23 @@ declare global {
         prototype: HTMLKupNumericPickerElement;
         new (): HTMLKupNumericPickerElement;
     };
+    interface HTMLKupPdfElementEventMap {
+        "kup-pdf-ready": KupEventPayload;
+    }
+    interface HTMLKupPdfElement extends Components.KupPdf, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKupPdfElementEventMap>(type: K, listener: (this: HTMLKupPdfElement, ev: KupPdfCustomEvent<HTMLKupPdfElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKupPdfElementEventMap>(type: K, listener: (this: HTMLKupPdfElement, ev: KupPdfCustomEvent<HTMLKupPdfElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLKupPdfElement: {
+        prototype: HTMLKupPdfElement;
+        new (): HTMLKupPdfElement;
+    };
     interface HTMLKupPhotoFrameElementEventMap {
         "kup-photoframe-placeholderload": KupEventPayload;
         "kup-photoframe-resourceload": KupEventPayload;
@@ -5312,6 +5355,7 @@ declare global {
         "kup-magic-box": HTMLKupMagicBoxElement;
         "kup-nav-bar": HTMLKupNavBarElement;
         "kup-numeric-picker": HTMLKupNumericPickerElement;
+        "kup-pdf": HTMLKupPdfElement;
         "kup-photo-frame": HTMLKupPhotoFrameElement;
         "kup-planner": HTMLKupPlannerElement;
         "kup-planner-renderer": HTMLKupPlannerRendererElement;
@@ -7605,6 +7649,17 @@ declare namespace LocalJSX {
         "onKup-numericpicker-itemclick"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
         "onKup-numericpicker-textfieldsubmit"?: (event: KupNumericPickerCustomEvent<KupNumericPickerEventPayload>) => void;
     }
+    interface KupPdf {
+        /**
+          * Triggered when the component is ready.
+         */
+        "onKup-pdf-ready"?: (event: KupPdfCustomEvent<KupEventPayload>) => void;
+        /**
+          * Path of the pdf document
+          * @default null
+         */
+        "pdfPath"?: string;
+    }
     interface KupPhotoFrame {
         /**
           * Custom style of the component.
@@ -8747,6 +8802,7 @@ declare namespace LocalJSX {
         "kup-magic-box": KupMagicBox;
         "kup-nav-bar": KupNavBar;
         "kup-numeric-picker": KupNumericPicker;
+        "kup-pdf": KupPdf;
         "kup-photo-frame": KupPhotoFrame;
         "kup-planner": KupPlanner;
         "kup-planner-renderer": KupPlannerRenderer;
@@ -8818,6 +8874,7 @@ declare module "@stencil/core" {
             "kup-magic-box": LocalJSX.KupMagicBox & JSXBase.HTMLAttributes<HTMLKupMagicBoxElement>;
             "kup-nav-bar": LocalJSX.KupNavBar & JSXBase.HTMLAttributes<HTMLKupNavBarElement>;
             "kup-numeric-picker": LocalJSX.KupNumericPicker & JSXBase.HTMLAttributes<HTMLKupNumericPickerElement>;
+            "kup-pdf": LocalJSX.KupPdf & JSXBase.HTMLAttributes<HTMLKupPdfElement>;
             "kup-photo-frame": LocalJSX.KupPhotoFrame & JSXBase.HTMLAttributes<HTMLKupPhotoFrameElement>;
             "kup-planner": LocalJSX.KupPlanner & JSXBase.HTMLAttributes<HTMLKupPlannerElement>;
             "kup-planner-renderer": LocalJSX.KupPlannerRenderer & JSXBase.HTMLAttributes<HTMLKupPlannerRendererElement>;