Merge pull request #1480 from smeup/dev-to-master

Up version 6.5.0
smeup · Sep 28, 2022 · b233c52 · b233c52
2 parents 5e5a68d + 16b4579
commit b233c52
Show file tree

Hide file tree

Showing 52 changed files with 419 additions and 187 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ketchup-showcase/package.json b/packages/ketchup-showcase/package.json
@@ -25,7 +25,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@sme.up/ketchup": "^6.4.0",
+    "@sme.up/ketchup": "^6.5.0",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

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/v6.4.0"
-            >v6.4.0</a
+          ><a href="https://github.com/smeup/ketchup/releases/tag/v6.5.0"
+            >v6.5.0</a
           ></div
         ></div
       >

diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardBasic.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardBasic.vue
@@ -24,6 +24,8 @@
       >
       props.
       <br />
+      <span class="code-word">cell</span>: array of cells.
+      <br />
       <span class="code-word">chart</span>: array of objects containing
       <a href="https://ketchup.smeup.com/ketchup-showcase/#/chart">kup-chart</a>
       props.
@@ -39,6 +41,8 @@
       <br />
       <span class="code-word">color</span>: array of CSS color strings.
       <br />
+      <span class="code-word">columns</span>: array of columns.
+      <br />
       <span class="code-word">combobox</span>: array of objects containing
       <a href="https://ketchup.smeup.com/ketchup-showcase/#/combobox"
         >kup-combobox</a

diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue
@@ -485,6 +485,28 @@
         </div>
       </div>
     </div>
+
+    <div class="demo-wrapper">
+      <p>
+        <span class="code-word">Layout 16</span> configuration:
+        <br />
+        <br />
+        <span class="code-word">- columns[0 to n]</span>: labels (left column).
+        <br />
+        <span class="code-word">- cells[0 to n]</span>: values (right column).
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-card
+            size-x="300px"
+            size-y="200px"
+            layout-number="16"
+            :data.prop="data"
+          ></kup-card>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -1073,6 +1095,11 @@ export default {
           { icon: 'widgets', flat: true, title: 'button[1]' },
           { icon: 'widgets', flat: true, title: 'button[2]' },
         ],
+        cell: [
+          { obj: { t: '', p: '', k: 'Cell #1' }, value: 'Cell #1' },
+          { obj: { t: '', p: '', k: 'Cell #2' }, value: 'Cell #2' },
+          { obj: { t: '', p: '', k: 'Cell #3' }, value: 'Cell #3' },
+        ],
         chart: [
           {
             title: 'chart[0]',
@@ -1165,6 +1192,11 @@ export default {
           },
         ],
         color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'],
+        columns: [
+          { name: '1', title: 'Column #1' },
+          { name: '2', title: 'Column #2' },
+          { name: '3', title: 'Column #3' },
+        ],
         combobox: [
           {
             data: {

diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldDemo.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldDemo.vue
@@ -199,6 +199,14 @@ export default {
           default: 'null',
           try: 'field',
         },
+        {
+          prop: 'inputMode',
+          description:
+            'The HTML inputmode of the input element. It has no effect on text areas.',
+          type: 'string',
+          default: 'null',
+          try: 'field',
+        },
         {
           prop: 'inputType',
           description:

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

diff --git a/packages/ketchup/src/assets/card.js b/packages/ketchup/src/assets/card.js
@@ -160,6 +160,8 @@ for (let index = 0; index < cards.length; index++) {
                 title: 'search',
             },
         ],
+        cell: [{ obj: { t: '', p: '', k: 'Cell 1' }, value: 'Cell 1' }],
+        columns: [{ name: '1', title: 'Column 1' }],
         chart: [
             {
                 data: {
@@ -393,6 +395,17 @@ for (let index = 0; index < cards.length; index++) {
                 leadingLabel: true,
             },
         ],
+        object: [
+            { k: 'OBJ KEY #1' },
+            { k: 'OBJ KEY #2' },
+            { k: 'OBJ KEY #3' },
+            { k: 'OBJ KEY #4' },
+            { k: 'OBJ KEY #5' },
+            { k: 'OBJ KEY #6' },
+            { k: 'OBJ KEY #7' },
+            { k: 'OBJ KEY #8' },
+            { k: 'OBJ KEY #9' },
+        ],
         tabbar: [
             {
                 data: [

diff --git a/packages/ketchup/src/card.html b/packages/ketchup/src/card.html
@@ -158,6 +158,13 @@ <h1>Standard layouts</h1>
                     size-x="auto"
                     size-y="auto"
                 ></kup-card>
+                <kup-card
+                    id="standard-card-16"
+                    layout-family="standard"
+                    layout-number="16"
+                    size-x="auto"
+                    size-y="auto"
+                ></kup-card>
                 <h1 style="display: block; width: 100%">Collapsible layouts</h1>
                 <kup-card
                     id="collapsible-card-1"

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -2705,6 +2705,11 @@ export namespace Components {
           * @default ""
          */
         "initialValue": string;
+        /**
+          * The HTML inputmode of the input element.
+          * @default null
+         */
+        "inputMode": string;
         /**
           * The HTML type of the input element. It has no effect on text areas.
           * @default "text"
@@ -5638,6 +5643,11 @@ declare namespace LocalJSX {
           * @default ""
          */
         "initialValue"?: string;
+        /**
+          * The HTML inputmode of the input element.
+          * @default null
+         */
+        "inputMode"?: string;
         /**
           * The HTML type of the input element. It has no effect on text areas.
           * @default "text"

diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md
@@ -131,6 +131,12 @@ graph TD;
   kup-card --> kup-tab-bar
   kup-card --> kup-tree
   kup-card --> kup-switch
+  kup-card --> kup-color-picker
+  kup-card --> kup-rating
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-gauge
+  kup-card --> kup-radio
   kup-card --> kup-card
   kup-badge --> kup-badge
   kup-badge --> kup-card

diff --git a/packages/ketchup/src/components/kup-box/kup-box.tsx b/packages/ketchup/src/components/kup-box/kup-box.tsx
@@ -945,17 +945,27 @@ export class KupBox {
     // render methods
     private renderSectionAsCard(row: KupBoxRow) {
         let skipPush: boolean = false;
-        let cardData: KupCardData = {
+        const cardData: KupCardData = {
             button: [],
+            cell: [],
+            columns: [],
             image: [],
             progressbar: [],
             text: [],
         };
 
+        for (let index = 0; index < this.data.columns.length; index++) {
+            const column = this.data.columns[index];
+            if (column.visible !== false) {
+                cardData.cell.push(row.cells[column.name]);
+                cardData.columns.push(column);
+            }
+        }
+
         //First cycle sets specific binds between cardIDs and cells
-        for (var key in row.cells) {
+        for (const key in row.cells) {
             if (row.cells.hasOwnProperty(key)) {
-                var cell = row.cells[key];
+                const cell = row.cells[key];
                 if (cell.cardID !== undefined) {
                     switch (cell.obj.p) {
                         case 'BTN':
@@ -994,9 +1004,9 @@ export class KupBox {
         }
 
         //Second cycle sets leftover binds automatically
-        for (var key in row.cells) {
+        for (const key in row.cells) {
             if (row.cells.hasOwnProperty(key)) {
-                var cell = row.cells[key];
+                const cell = row.cells[key];
                 if (cell.cardID === undefined) {
                     skipPush = false;
                     switch (cell.obj.p) {
@@ -1007,7 +1017,9 @@ export class KupBox {
                                 index++
                             ) {
                                 //If there are empty elements, the first one will be used
-                                if (cardData.button[index] === {}) {
+                                if (
+                                    !Object.keys(cardData.button[index]).length
+                                ) {
                                     cardData.button[index] = {
                                         label: cell.value,
                                     };
@@ -1029,7 +1041,9 @@ export class KupBox {
                                 index++
                             ) {
                                 //If there are empty elements, the first one will be used
-                                if (cardData.image[index] === {}) {
+                                if (
+                                    !Object.keys(cardData.image[index]).length
+                                ) {
                                     cardData.image[index] = {
                                         resource: cell.value,
                                     };
@@ -1051,7 +1065,10 @@ export class KupBox {
                                 index++
                             ) {
                                 //If there are empty elements, the first one will be used
-                                if (cardData.progressbar[index] === {}) {
+                                if (
+                                    !Object.keys(cardData.progressbar[index])
+                                        .length
+                                ) {
                                     cardData.progressbar[index] = {
                                         value: cell.value,
                                     };

diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md
@@ -171,6 +171,12 @@ graph TD;
   kup-card --> kup-tab-bar
   kup-card --> kup-tree
   kup-card --> kup-switch
+  kup-card --> kup-color-picker
+  kup-card --> kup-rating
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-gauge
+  kup-card --> kup-radio
   kup-card --> kup-card
   kup-badge --> kup-badge
   kup-badge --> kup-card

diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md
@@ -77,6 +77,7 @@ Type: `Promise<void>`
 ### Used by
 
  - [kup-box](../kup-box)
+ - [kup-card](../kup-card)
  - [kup-cell](../kup-cell)
  - [kup-data-table](../kup-data-table)
  - [kup-form](../kup-form)
@@ -104,24 +105,7 @@ graph TD;
   kup-list --> kup-card
   kup-list --> kup-badge
   kup-radio --> kup-card
-  kup-card --> kup-badge
-  kup-card --> kup-button
-  kup-card --> kup-chip
-  kup-card --> kup-list
-  kup-card --> kup-combobox
-  kup-card --> kup-autocomplete
-  kup-card --> kup-checkbox
-  kup-card --> kup-date-picker
-  kup-card --> kup-text-field
-  kup-card --> kup-time-picker
-  kup-card --> kup-data-table
-  kup-card --> kup-spinner
-  kup-card --> kup-progress-bar
-  kup-card --> kup-chart
-  kup-card --> kup-tab-bar
-  kup-card --> kup-tree
-  kup-card --> kup-switch
-  kup-card --> kup-card
+  kup-card --> kup-button-list
   kup-badge --> kup-badge
   kup-badge --> kup-card
   kup-button --> kup-card

diff --git a/packages/ketchup/src/components/kup-calendar/readme.md b/packages/ketchup/src/components/kup-calendar/readme.md
@@ -118,6 +118,12 @@ graph TD;
   kup-card --> kup-tab-bar
   kup-card --> kup-tree
   kup-card --> kup-switch
+  kup-card --> kup-color-picker
+  kup-card --> kup-rating
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-gauge
+  kup-card --> kup-radio
   kup-card --> kup-card
   kup-badge --> kup-badge
   kup-badge --> kup-card

diff --git a/packages/ketchup/src/components/kup-card/kup-card-declarations.ts b/packages/ketchup/src/components/kup-card/kup-card-declarations.ts
@@ -137,6 +137,7 @@ export interface KupCardBuiltInNumeric extends HTMLElement {
 export interface KupCardData {
     autocomplete?: GenericObject[];
     button?: GenericObject[];
+    cell?: GenericObject[];
     chart?: GenericObject[];
     checkbox?: GenericObject[];
     chip?: GenericObject[];

diff --git a/packages/ketchup/src/components/kup-card/readme.md b/packages/ketchup/src/components/kup-card/readme.md
@@ -148,6 +148,12 @@ Type: `Promise<void>`
 - [kup-tab-bar](../kup-tab-bar)
 - [kup-tree](../kup-tree)
 - [kup-switch](../kup-switch)
+- [kup-color-picker](../kup-color-picker)
+- [kup-rating](../kup-rating)
+- [kup-image](../kup-image)
+- [kup-button-list](../kup-button-list)
+- [kup-gauge](../kup-gauge)
+- [kup-radio](../kup-radio)
 - [kup-card](.)
 
 ### Graph

diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-16.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-16.scss
@@ -0,0 +1,21 @@
+.standard-layout-16 {
+    background-color: var(--kup-background-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
+      0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+    color: var(--kup-text-color);
+    font-size: var(--kup-font-size);
+    padding: 0.5em;
+
+    > table {
+      width: 100%;
+    }
+    .label {
+      padding: 0.5em;
+      vertical-align: top;
+    }
+    .value {
+      padding: 0.5em;
+      font-weight: bold;
+    }
+  }
diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard.scss
@@ -13,3 +13,4 @@
 @import 'kup-card-standard-13.scss';
 @import 'kup-card-standard-14.scss';
 @import 'kup-card-standard-15.scss';
+@import 'kup-card-standard-16.scss';