Merge branch 'develop' into dev-to-mas

.devcontainer/Dockerfile

@@ -0,0 +1,5 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye
+
+# [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

@@ -0,0 +1,80 @@
+// 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": {
+            "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"
+		}
+	},
+
+	// 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",
+
+	// 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"
+				}
+			}
+		}
+	},
+    "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
+    ]
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/scripts/postCreateCommand.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+echo "Set permissions"
+sudo chown -R node:node node_modules
+
+echo "Installing Deps"
+yarn install

.github/dependabot.yml

@@ -0,0 +1,14 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+    - package-ecosystem: 'devcontainers'
+      directory: '/'
+      schedule:
+          interval: weekly
+      ignore:
+          - dependency-name: '*'

packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue

@@ -108,6 +108,10 @@ export default {
           name: 'kup-box-dragstarted',
           type: 'CustomEvent',
         },
+        {
+          name: 'kup-box-loadmoreclick',
+          type: 'click',
+        },
         {
           name: 'kup-box-selected',
           type: 'CustomEvent',
@@ -266,6 +270,30 @@ export default {
           default: 'false',
           try: 'switch',
         },
+        {
+          prop: 'loadMoreLimit',
+          description:
+            'Sets a maximum limit of new records which can be required by the load more functionality.',
+          type: 'number',
+          default: '1000',
+          try: 'field',
+        },
+        {
+          prop: 'loadMoreMode',
+          description:
+            'Establish the modality of how many new records will be downloaded.',
+          type: 'LoadMoreMode',
+          default: 'progressive_threshold',
+          try: 'field',
+        },
+        {
+          prop: 'loadMoreStep',
+          description:
+            'The number of records which will be requested to be downloaded when clicking on the load more button.',
+          type: 'number',
+          default: '60',
+          try: 'field',
+        },
         {
           prop: 'multiSelection',
           description: 'Enable multi selection.',
@@ -317,6 +345,14 @@ export default {
           default: '[]',
           try: 'json',
         },
+        {
+          prop: 'showLoadMore',
+          description:
+            'If set to true, displays the button to load more records.',
+          type: 'boolean',
+          default: 'false',
+          try: 'switch',
+        },
         {
           prop: 'showSelection',
           description: 'If enabled, highlights the selected box/boxes.',

packages/ketchup/src/assets/index.js

@@ -186,6 +186,10 @@ components.data = [
         value: 'Planner example 4',
         id: 'planner-example-4.html',
     },
+    {
+        value: 'Planner example 5',
+        id: 'planner-example-5.html',
+    },
     {
         value: 'Progress Bar',
         id: 'progress-bar.html',

packages/ketchup/src/assets/planner-example-4.js

@@ -22101,11 +22101,11 @@ const phases = {
                     },
                     isEditable: false,
                     obj: {
-                        k: '20230904',
+                        k: '20210904',
                         p: '*YYMD',
                         t: 'D8',
                     },
-                    value: '2023-09-04',
+                    value: '2021-09-04',
                 },
                 STIPER: {
                     data: {
@@ -22297,11 +22297,11 @@ const phases = {
                     },
                     isEditable: false,
                     obj: {
-                        k: '20230522',
+                        k: '20210522',
                         p: '*YYMD',
                         t: 'D8',
                     },
-                    value: '2023-05-22',
+                    value: '2021-05-22',
                 },
                 DATFPO: {
                     data: {