Merge pull request #1925 from smeup/dev-to-mas

v9.6.9
smeup · Jun 7, 2024 · 78c3263 · 78c3263
2 parents fe3dc8c + 3d33082
commit 78c3263
Show file tree

Hide file tree

Showing 89 changed files with 2,745 additions and 2,299 deletions.
diff --git a/packages/ketchup-react/package.json b/packages/ketchup-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup-react",
-    "version": "9.6.8",
+    "version": "9.6.9",
     "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.8",
+        "@sme.up/ketchup": "^9.6.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

diff --git a/packages/ketchup-showcase/package.json b/packages/ketchup-showcase/package.json
@@ -19,7 +19,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@sme.up/ketchup": "^9.6.8",
+    "@sme.up/ketchup": "^9.6.9",
     "core-js": "^3.30.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1"

diff --git a/packages/ketchup-showcase/src/App.vue b/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.8"
-            >v9.6.8</a
+          ><a href="https://github.com/smeup/ketchup/releases/tag/v9.6.9"
+            >v9.6.9</a
           ></div
         ></div
       >

diff --git a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageDemo.vue b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageDemo.vue
@@ -136,6 +136,14 @@ export default {
           default: '100%',
           try: 'field',
         },
+        {
+          prop: 'zoomEnable',
+          description:
+            'When set to true, a dialog will be displayed with the same resource set to 100% when image is clicked',
+          type: 'boolean',
+          default: 'false',
+          try: 'switch',
+        },
       ],
     };
   },

diff --git a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageExtraList.vue
@@ -271,6 +271,10 @@
             ></kup-image>
             <div class="icon-label">block-helper</div>
           </div>
+          <div class="icon-wrapper" title="blue">
+            <kup-image size-x="48px" size-y="48px" resource="blue"></kup-image>
+            <div class="icon-label">blue</div>
+          </div>
           <div class="icon-wrapper" title="book-open">
             <kup-image
               size-x="48px"
@@ -615,6 +619,38 @@
             ></kup-image>
             <div class="icon-label">currency-usd</div>
           </div>
+          <div class="icon-wrapper" title="dark_blue">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="dark_blue"
+            ></kup-image>
+            <div class="icon-label">dark_blue</div>
+          </div>
+          <div class="icon-wrapper" title="dark_green">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="dark_green"
+            ></kup-image>
+            <div class="icon-label">dark_green</div>
+          </div>
+          <div class="icon-wrapper" title="dark_grey">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="dark_grey"
+            ></kup-image>
+            <div class="icon-label">dark_grey</div>
+          </div>
+          <div class="icon-wrapper" title="dark_orange">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="dark_orange"
+            ></kup-image>
+            <div class="icon-label">dark_orange</div>
+          </div>
           <div class="icon-wrapper" title="database">
             <kup-image
               size-x="48px"
@@ -1099,6 +1135,18 @@
             ></kup-image>
             <div class="icon-label">google-chrome</div>
           </div>
+          <div class="icon-wrapper" title="green_light">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="green_light"
+            ></kup-image>
+            <div class="icon-label">green_light</div>
+          </div>
+          <div class="icon-wrapper" title="green">
+            <kup-image size-x="48px" size-y="48px" resource="green"></kup-image>
+            <div class="icon-label">green</div>
+          </div>
           <div class="icon-wrapper" title="help-circle">
             <kup-image
               size-x="48px"
@@ -1191,6 +1239,50 @@
             ></kup-image>
             <div class="icon-label">lightbulb-outline</div>
           </div>
+          <div class="icon-wrapper" title="light_blue">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="light_blue"
+            ></kup-image>
+            <div class="icon-label">light_blue</div>
+          </div>
+          <div class="icon-wrapper" title="light_green">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="light_green"
+            ></kup-image>
+            <div class="icon-label">light_green</div>
+          </div>
+          <div class="icon-wrapper" title="light_grey">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="light_grey"
+            ></kup-image>
+            <div class="icon-label">light_grey</div>
+          </div>
+          <div class="icon-wrapper" title="light_orange">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="light_orange"
+            ></kup-image>
+            <div class="icon-label">light_orange</div>
+          </div>
+          <div class="icon-wrapper" title="light_pink">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="light_pink"
+            ></kup-image>
+            <div class="icon-label">light_pink</div>
+          </div>
+          <div class="icon-wrapper" title="lilac">
+            <kup-image size-x="48px" size-y="48px" resource="lilac"></kup-image>
+            <div class="icon-label">lilac</div>
+          </div>
           <div class="icon-wrapper" title="link_off">
             <kup-image
               size-x="48px"
@@ -1355,6 +1447,7 @@
             ></kup-image>
             <div class="icon-label">open_in_new</div>
           </div>
+
           <div class="icon-wrapper" title="pause-circle">
             <kup-image
               size-x="48px"
@@ -1395,6 +1488,10 @@
             ></kup-image>
             <div class="icon-label">periodic-table-co2</div>
           </div>
+          <div class="icon-wrapper" title="pink">
+            <kup-image size-x="48px" size-y="48px" resource="pink"></kup-image>
+            <div class="icon-label">pink</div>
+          </div>
           <div class="icon-wrapper" title="pinterest">
             <kup-image
               size-x="48px"
@@ -1431,6 +1528,14 @@
             <kup-image size-x="48px" size-y="48px" resource="pound"></kup-image>
             <div class="icon-label">pound</div>
           </div>
+          <div class="icon-wrapper" title="purple">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="purple"
+            ></kup-image>
+            <div class="icon-label">purple</div>
+          </div>
           <div class="icon-wrapper" title="printer">
             <kup-image
               size-x="48px"
@@ -1479,6 +1584,18 @@
             ></kup-image>
             <div class="icon-label">rename-box</div>
           </div>
+          <div class="icon-wrapper" title="red">
+            <kup-image size-x="48px" size-y="48px" resource="red"></kup-image>
+            <div class="icon-label">red</div>
+          </div>
+          <div class="icon-wrapper" title="red_light">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="red_light"
+            ></kup-image>
+            <div class="icon-label">red_light</div>
+          </div>
           <div class="icon-wrapper" title="reddit">
             <kup-image
               size-x="48px"
@@ -1911,6 +2028,10 @@
             ></kup-image>
             <div class="icon-label">webcam</div>
           </div>
+          <div class="icon-wrapper" title="white">
+            <kup-image size-x="48px" size-y="48px" resource="white"></kup-image>
+            <div class="icon-label">white</div>
+          </div>
           <div class="icon-wrapper" title="wikipedia">
             <kup-image
               size-x="48px"
@@ -1947,6 +2068,14 @@
             <kup-image size-x="48px" size-y="48px" resource="xml"></kup-image>
             <div class="icon-label">xml</div>
           </div>
+          <div class="icon-wrapper" title="yellow_light">
+            <kup-image
+              size-x="48px"
+              size-y="48px"
+              resource="yellow_light"
+            ></kup-image>
+            <div class="icon-label">yellow_light</div>
+          </div>
           <div class="icon-wrapper" title="youtube-play">
             <kup-image
               size-x="48px"

diff --git a/packages/ketchup/package.json b/packages/ketchup/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "9.6.8",
+    "version": "9.6.9",
     "keywords": [
         "smeup",
         "KetchUP",

diff --git a/packages/ketchup/src/assets/image.js b/packages/ketchup/src/assets/image.js
@@ -0,0 +1,11 @@
+const comp = document.getElementById('image');
+
+const props = {
+    zoomEnable: true,
+};
+
+if (props) {
+    for (const key in props) {
+        comp[key] = props[key];
+    }
+}
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -2452,6 +2452,11 @@ export namespace Components {
           * @default '100%'
          */
         "sizeY": string;
+        /**
+          * When set to true, a dialog will be displayed with the same resource set to 100% when image is clicked.
+          * @default false
+         */
+        "zoomEnable": boolean;
     }
     interface KupImageList {
         /**
@@ -7243,6 +7248,11 @@ declare namespace LocalJSX {
           * @default '100%'
          */
         "sizeY"?: string;
+        /**
+          * When set to true, a dialog will be displayed with the same resource set to 100% when image is clicked.
+          * @default false
+         */
+        "zoomEnable"?: boolean;
     }
     interface KupImageList {
         /**

diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md
@@ -192,9 +192,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog

diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md
@@ -170,9 +170,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog

diff --git a/packages/ketchup/src/components/kup-box/kup-box.tsx b/packages/ketchup/src/components/kup-box/kup-box.tsx
@@ -830,6 +830,13 @@ export class KupBox {
             this.kupManager.getEventPath(e.target, this.rootElement),
             e
         );
+        if (details.row) {
+            if (this.multiSelection) {
+                this.onSelectionCheckChange(details.row);
+            } else {
+                this.selectedRows = [details.row];
+            }
+        }
         return details;
     }
 
@@ -856,52 +863,6 @@ export class KupBox {
         return false;
     }
 
-    // event listeners
-    private onBoxClick({ target }: MouseEvent, row: KupBoxRow) {
-        if (!(target instanceof HTMLElement)) {
-            return;
-        }
-
-        // searching parent
-        let element = target;
-        let classList = element.classList;
-
-        while (
-            !classList.contains('box-object') &&
-            !classList.contains('box-section') &&
-            !classList.contains('box')
-        ) {
-            element = element.parentElement;
-
-            if (element === null) {
-                break;
-            }
-
-            classList = element.classList;
-        }
-
-        // evaluating column
-        let column = null;
-        if (classList.contains('box-object')) {
-            column = element.dataset.column;
-        }
-
-        this.kupBoxClick.emit({
-            comp: this,
-            id: this.rootElement.id,
-            row,
-            column,
-        });
-
-        // selecting box
-        if (this.multiSelection) {
-            // triggering multi selection
-            this.onSelectionCheckChange(row);
-        } else {
-            this.selectedRows = [row];
-        }
-    }
-
     private onSelectionCheckChange(row: KupBoxRow) {
         var index = -1;
         for (let i = 0; i < this.selectedRows.length; i++) {

diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md
@@ -236,9 +236,10 @@ graph TD;
   kup-time-picker --> kup-card
   kup-time-picker --> kup-list
   kup-time-picker --> kup-dialog
-  kup-image --> kup-spinner
   kup-image --> kup-card
+  kup-image --> kup-image
   kup-image --> kup-dialog
+  kup-image --> kup-spinner
   kup-image --> kup-badge
   kup-spinner --> kup-card
   kup-spinner --> kup-dialog