v9.6.4

.devcontainer/Dockerfile

@@ -1,5 +1,12 @@
 FROM mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye
 
+# Install deps
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends chromium
+
+# Define env vars
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+
 # [Optional] Uncomment if you want to install an additional version of node using nvm
 ARG EXTRA_NODE_VERSION="lts/hydrogen"
 RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

.devcontainer/devcontainer.json

@@ -1,80 +1,81 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
 {
-	"name": "@sme.up/ketchup-root",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"build": {
-		"dockerfile": "Dockerfile",
-		"args": {
+    "name": "@sme.up/ketchup-root",
+    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+    "build": {
+        "dockerfile": "Dockerfile",
+        "args": {
             "VARIANT": "18-bullseye",
             "EXTRA_NODE_VERSION": "18.16"
         }
-	},
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	"features": {
-		// "ghcr.io/devcontainers/features/node:1": {
-		// 	"nodeGypDependencies": true,
-		// 	"version": "lts",
-		// 	"nvmVersion": "latest"
-		// },
-		"ghcr.io/devcontainers-contrib/features/lerna-npm:1": {
-			"version": "latest"
-		},
-		"ghcr.io/devcontainers-contrib/features/nx-npm:1": {
-			"version": "latest"
-		}
-	},
+    },
+    // Features to add to the dev container. More info: https://containers.dev/features.
+    "features": {
+        // "ghcr.io/devcontainers/features/node:1": {
+        // 	"nodeGypDependencies": true,
+        // 	"version": "lts",
+        // 	"nvmVersion": "latest"
+        // },
+        "ghcr.io/devcontainers-contrib/features/lerna-npm:1": {
+            "version": "latest"
+        },
+        "ghcr.io/devcontainers-contrib/features/nx-npm:1": {
+            "version": "latest"
+        }
+    },
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    // "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
 
-	// Configure tool-specific properties.
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"esbenp.prettier-vscode",
-				"dbaeumer.vscode-eslint",
-				"octref.vetur"
-			],
-			"settings": {
-				"editor.formatOnSave": true,
-				"editor.codeActionsOnSave": {
-					"source.fixAll.eslint": "explicit"
-				},
-				"eslint.validate": ["vue", "html", "javascript", "typescript"],
-				"eslint.run": "onSave",
-				"[typescriptreact]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[typescript]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[vue]": {
-					"editor.defaultFormatter": "octref.vetur"
-				},
-				"[html]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[javascript]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[json]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[jsonc]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				}
-			}
-		}
-	},
+    // Configure tool-specific properties.
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "esbenp.prettier-vscode",
+                "dbaeumer.vscode-eslint",
+                "firsttris.vscode-jest-runner",
+                "octref.vetur"
+            ],
+            "settings": {
+                "editor.formatOnSave": true,
+                "editor.codeActionsOnSave": {
+                    "source.fixAll.eslint": "explicit"
+                },
+                "eslint.validate": ["vue", "html", "javascript", "typescript"],
+                "eslint.run": "onSave",
+                "[typescriptreact]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                },
+                "[typescript]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                },
+                "[vue]": {
+                    "editor.defaultFormatter": "octref.vetur"
+                },
+                "[html]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                },
+                "[javascript]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                },
+                "[json]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                },
+                "[jsonc]": {
+                    "editor.defaultFormatter": "esbenp.prettier-vscode"
+                }
+            }
+        }
+    },
     "mounts": [
-      "source=ketchup-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", // deps volume
-      "source=ketchup-vscode-extensions,target=/root/.vscode-server/extensions,type=volume" // vscode extensions volume
+        "source=ketchup-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", // deps volume
+        "source=ketchup-vscode-extensions,target=/root/.vscode-server/extensions,type=volume" // vscode extensions volume
     ]
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
+    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+    // "remoteUser": "root"
 }

package.json

@@ -30,6 +30,8 @@
         "lerna": "lerna",
         "k:build": "lerna run build --scope @sme.up/ketchup --stream && lerna run build --scope @sme.up/ketchup-react --stream",
         "k:start": "lerna run start --scope @sme.up/ketchup --stream",
+        "k:test:all": "lerna run test --scope @sme.up/ketchup --stream",
+        "k:test:e2e": "lerna run test:e2e --scope @sme.up/ketchup --stream",
         "k:test:unit": "lerna run test:spec --scope @sme.up/ketchup --stream",
         "k:test:unitcov": "lerna run test:speccov --scope @sme.up/ketchup --stream",
         "ksc:serve": "lerna run serve --scope @sme.up/ketchup-showcase --stream",

packages/ketchup-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup-react",
-    "version": "9.6.3",
+    "version": "9.6.4",
     "module": "dist/index.js",
     "typings": "dist/index.d.ts",
     "keywords": [
@@ -20,7 +20,7 @@
     "description": "Ketchup React Components library by smeup",
     "license": "Apache-2.0",
     "dependencies": {
-        "@sme.up/ketchup": "^9.6.3",
+        "@sme.up/ketchup": "^9.6.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

packages/ketchup-react/src/index.ts

@@ -44,11 +44,13 @@ export const KupHorizontalScroll = /*@__PURE__*/createReactComponent<JSX.KupHori
 export const KupIframe = /*@__PURE__*/createReactComponent<JSX.KupIframe, HTMLKupIframeElement>('kup-iframe');
 export const KupImage = /*@__PURE__*/createReactComponent<JSX.KupImage, HTMLKupImageElement>('kup-image');
 export const KupImageList = /*@__PURE__*/createReactComponent<JSX.KupImageList, HTMLKupImageListElement>('kup-image-list');
+export const KupInputPanel = /*@__PURE__*/createReactComponent<JSX.KupInputPanel, HTMLKupInputPanelElement>('kup-input-panel');
 export const KupLazy = /*@__PURE__*/createReactComponent<JSX.KupLazy, HTMLKupLazyElement>('kup-lazy');
 export const KupList = /*@__PURE__*/createReactComponent<JSX.KupList, HTMLKupListElement>('kup-list');
 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

@@ -19,12 +19,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@sme.up/ketchup": "^9.6.3",
+    "@sme.up/ketchup": "^9.6.4",
     "core-js": "^3.30.2",
     "vue": "^2.6.14",
     "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

@@ -55,8 +55,8 @@
           @kup-tree-nodeselected="treeClick"
         ></kup-tree
         ><div class="version"
-          ><a href="https://github.com/smeup/ketchup/releases/tag/v9.6.3"
-            >v9.6.3</a
+          ><a href="https://github.com/smeup/ketchup/releases/tag/v9.6.4"
+            >v9.6.4</a
           ></div
         ></div
       >
@@ -405,6 +405,16 @@ export default {
                 value: 'Image list',
                 visible: true,
               },
+              {
+                cells: {
+                  ROUTE: {
+                    value: 'inputpanel',
+                  },
+                },
+                icon: 'mode_edit',
+                value: 'Input Panel',
+                visible: true,
+              },
               {
                 cells: {
                   ROUTE: {
@@ -634,6 +644,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',
@@ -240,6 +245,12 @@ const advancedRoutes = [
     component: () =>
       import(`@/views/components/advanced/imagelist/ImageList.vue`),
   },
+  {
+    path: `/inputpanel`,
+    name: 'inputpanel',
+    component: () =>
+      import(`@/views/components/advanced/inputpanel/InputPanel.vue`),
+  },
   {
     path: `/tree`,
     name: 'tree',

packages/ketchup-showcase/src/views/components/advanced/inputpanel/InputPanel.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <comp :giturl="giturl" :headtitle="headtitle" :titles="titles">
+      <template v-slot:0>
+        <input-panel-demo></input-panel-demo>
+      </template>
+      <template v-slot:1>
+        <input-panel-basic></input-panel-basic>
+      </template>
+    </comp>
+  </div>
+</template>
+
+<script>
+import InputPanelDemo from '@/views/components/advanced/inputpanel/examples/InputPanelDemo';
+import InputPanelBasic from '@/views/components/advanced/inputpanel/examples/InputPanelBasic';
+import Comp from '@/views/templates/Comp';
+export default {
+  components: {
+    InputPanelDemo,
+    InputPanelBasic,
+    Comp,
+  },
+  data() {
+    return {
+      giturl:
+        'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/components/kup-input-panel',
+      headtitle: 'Input Panel',
+      titles: ['Playground', 'Basic usage'],
+    };
+  },
+  title: 'Ketchup | Input Panel',
+};
+</script>

packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelBasic.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>The Input Panel component arranges different input fields.</p>
+      <p class="centered">Sample markup</p>
+      <code class="flat">{{ markupBasic }}</code>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputPanelBasic',
+  data() {
+    return {
+      markupBasic: '<kup-input-panel></kup-input-panel>',
+    };
+  },
+};
+</script>