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

Dev to master (v6.7.0)
smeup · Dec 5, 2022 · 360883b · 360883b
2 parents 1a11151 + 0dbeef2
commit 360883b
Show file tree

Hide file tree

Showing 38 changed files with 986 additions and 8,191 deletions.
diff --git a/docs/styleGuide.md b/docs/styleGuide.md
@@ -366,3 +366,19 @@ And an example of a prop:
      */
     @Prop() label: string = null;
 ```
+## Commits
+
+Commits should wrap all the edits concerning a common fix or feature and they must be formatted like this: 
+
+```
+Component: name of the fix/feature.
+```
+
+A few examples below.
+
+```
+FTextField: handled input type.
+kup-box: added kanban feature.
+kup-data-table: improved render performances.
+Showcase: created family tree page.
+```
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     },
     "scripts": {
         "lerna": "lerna",
-        "k:build": "lerna run build --scope @sme.up/ketchup --stream",
+        "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:unit": "lerna run test:spec --scope @sme.up/ketchup --stream",
         "k:test:e2e": "lerna run test:e2e --scope @sme.up/ketchup --stream",

diff --git a/packages/ketchup-react/package-lock.json b/packages/ketchup-react/package-lock.json
diff --git a/packages/ketchup-react/package.json b/packages/ketchup-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup-react",
-    "version": "6.6.0",
+    "version": "6.7.0",
     "exports": "./dist/index.js",
     "types": "dist/index.d.ts",
     "keywords": [
@@ -10,6 +10,7 @@
         "custom elements",
         "components"
     ],
+    "type": "module",
     "files": [
         "dist/"
     ],
@@ -20,13 +21,14 @@
     "description": "Ketchup React Components library by smeup",
     "license": "Apache-2.0",
     "dependencies": {
-        "@sme.up/ketchup": "^6.6.0",
+        "@sme.up/ketchup": "^6.7.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "rimraf": "^3.0.2"
     },
     "devDependencies": {
         "typescript": "4.2.3",
+        "@types/geojson": "^7946.0.8",
         "@types/node": "18.0.0",
         "@types/react": "18.0.14",
         "@types/react-dom": "18.0.5"

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.6.0",
+    "@sme.up/ketchup": "^6.7.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.6.0"
-            >v6.6.0</a
+          ><a href="https://github.com/smeup/ketchup/releases/tag/v6.7.0"
+            >v6.7.0</a
           ></div
         ></div
       >

diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardScalable.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardScalable.vue
@@ -239,6 +239,42 @@
         </div>
       </div>
     </div>
+    <div class="demo-wrapper">
+      <p>
+        <span class="code-word">Layout 9</span> settings:
+        <br />
+        <br />
+        <span class="code-word">- color[0]</span>: The color of left vertical
+        bar (optional, by default is primary color of theme).
+        <br />
+        <span class="code-word">- color[1]</span>: The color of background
+        component (optional, by default is background color of theme).
+        <br />
+        <span class="code-word">- color[2]</span>: The color of text in right
+        area (optional, by default is text color of theme).
+        <br />
+        <span class="code-word">- text[0]</span>: The main emphasized text,
+        ideally for a value.
+        <br />
+        <span class="code-word">- text[1]</span>: A description text (optional).
+        <br />
+        <span class="code-word">- button[0-3]</span>: A list of button at bottom
+        of right area (optional).
+        <br />
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-card
+            size-x="300px"
+            size-y="200px"
+            layout-number="9"
+            layout-family="scalable"
+            :data.prop="data"
+          ></kup-card>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -256,6 +292,10 @@ export default {
           },
         ],
         text: ['t[0]', 't[1]', 't[2]', 't[3]'],
+        button: [
+          { id: 'search', icon: 'search', title: 'Find objects' },
+          { id: 'widgets', icon: 'widgets', title: 'Open objects' },
+        ],
       },
     };
   },

diff --git a/packages/ketchup-showcase/src/views/components/advanced/datatable/examples/DatatableDemo.vue b/packages/ketchup-showcase/src/views/components/advanced/datatable/examples/DatatableDemo.vue
@@ -105,6 +105,11 @@ export default {
           name: 'collapseAll',
           description: 'Collapses all groups.',
         },
+        {
+          name: 'deleteRows',
+          description:
+            'This method will delete rows by id from the data table dataset.',
+        },
         {
           name: 'expandAll',
           description: 'Expands all groups.',
@@ -136,6 +141,10 @@ export default {
           description:
             'This method is invoked by KupManager whenever the component changes size.',
         },
+        {
+          name: 'setCellValue',
+          description: 'Sets the a new cell value in table.',
+        },
         {
           name: 'setFocus',
           description: 'Sets the focus on an editable table cell.',

diff --git a/packages/ketchup-showcase/src/views/components/basic/drawer/examples/DrawerBasic.vue b/packages/ketchup-showcase/src/views/components/basic/drawer/examples/DrawerBasic.vue
@@ -7,39 +7,15 @@
       </p>
       <p>
         The Ketchup drawer itself contains only the main structure. The user can
-        append any child component through the usage of slots.
+        append any child component through the usage of slots. <br />Remember
+        that the drawer must be opened to be visible.
       </p>
       <br />
       <br />
       <p class="centered">Sample markup</p>
       <code class="flat"
-        >{{ markupBasic }}<br />{{ markupBasic2 }}<br />{{ markupBasic3
-        }}<br />{{ markupBasic4 }}<br />{{ markupBasic5 }}<br />{{ markupBasic6
-        }}<br />{{ markupBasic7 }}</code
+        >{{ markupBasic }}<br />{{ markupBasic2 }}<br />{{ markupBasic3 }}</code
       >
-      <br />
-      <br />
-      <div>
-        These are two possible slot names presets, which will give a specific
-        style (any other slot's style must be set by the application using
-        kup-drawer):
-        <kup-list
-          show-icons
-          class="handles-custom-style hydrated"
-          :data.prop="listdata"
-          display-mode="description"
-          filter
-          role-type="listbox"
-          selectable
-        ></kup-list>
-        <div
-          >Get a look at the
-          <a href="https://ketchup.smeup.com/ketchup-showcase/#/list">
-            Ketchup List
-          </a>
-          documentation</div
-        >
-      </div>
     </div>
   </div>
 </template>
@@ -50,26 +26,8 @@ export default {
   data() {
     return {
       markupBasic: '<kup-drawer>',
-      markupBasic2: '  <span slot="title">Title</span> ',
-      markupBasic3: '  <span slot="subtitle">Subtitle</span>',
-      markupBasic4: '  <div>',
-      markupBasic5: '     <kup-list></kup-list>',
-      markupBasic6: '  </div>',
-      markupBasic7: '</kup-drawer>',
-
-      listdata: [
-        {
-          value: "slot with the name 'title' to set the title of drawer.",
-          id: '1',
-          icon: 'trending_flat',
-          trailingIcon: true,
-        },
-        {
-          value: "slot with the name 'subtitle' to set the subtitle of drawer.",
-          id: '2',
-          icon: 'trending_flat',
-        },
-      ],
+      markupBasic2: '  <span>Title</span>',
+      markupBasic3: '</kup-drawer>',
     };
   },
 };

diff --git a/packages/ketchup-showcase/src/views/components/basic/list/examples/ListBasic.vue b/packages/ketchup-showcase/src/views/components/basic/list/examples/ListBasic.vue
@@ -8,27 +8,27 @@
         <span class="code-word">data</span> prop, following this structure:
         <br />
         <br />
-        <span class="code-word">text</span> is mandatory and defines the
+        <span class="code-word">id</span> is mandatory and it's the actual value
+        of the item.
+        <br />
+        <span class="code-word">value</span> is mandatory and defines the
         description.
         <br />
+        <span class="code-word">icon</span> is optional and it's the icon
+        associated to the row, it will be displayed through the Image component:
+        any value supported can be found in the
+        <a href="https://ketchup.smeup.com/ketchup-showcase/#/image">Image</a>
+        page.
+        <br />
         <span class="code-word">secondaryText</span> contains an optional string
         that will be displayed below <span class="code-word">text</span> when
         the component's items are arranged in two lines.
         <br />
-        <span class="code-word">value</span> is mandatory and it's the actual
-        value of the item.
-        <br />
         <span class="code-word">separator</span> is optional and will display a
         separator above this item.
         <br />
         <span class="code-word">selected</span> is optional and defines whether
         the tab is selected or not.
-        <br />
-        <span class="code-word">icon</span> is optional and it's the icon
-        associated to the row, it will be displayed through the Image component:
-        any value supported can be found in the
-        <a href="https://ketchup.smeup.com/ketchup-showcase/#/image">Image</a>
-        page.
       </p>
       <br />
       <p class="centered">Sample markup</p>

diff --git a/packages/ketchup-showcase/src/views/components/basic/list/examples/ListDemo.vue b/packages/ketchup-showcase/src/views/components/basic/list/examples/ListDemo.vue
@@ -3,6 +3,7 @@
     <demo
       :demoComp="demoComp"
       :demoEvents="demoEvents"
+      :demoMethods="demoMethods"
       :demoProps="demoProps"
       :demoClasses="demoClasses"
     ></demo>
@@ -75,6 +76,10 @@ export default {
           description:
             "Returns the props' values of the component. When invoked giving true as the only argument, returns the props descriptions instead.",
         },
+        {
+          name: 'getSelectedNode',
+          description: 'Returns the selected node.',
+        },
         {
           name: 'refresh',
           description:

diff --git a/packages/ketchup-showcase/src/views/components/basic/tabbar/examples/TabbarDemo.vue b/packages/ketchup-showcase/src/views/components/basic/tabbar/examples/TabbarDemo.vue
@@ -68,6 +68,10 @@ export default {
           description:
             "Returns the props' values of the component. When invoked giving true as the only argument, returns the props descriptions instead.",
         },
+        {
+          name: 'getSelectedNode',
+          description: 'Returns the selected node.',
+        },
         {
           name: 'refresh',
           description:

diff --git a/...up-showcase/src/views/framework/kup-scroll-on-hover/examples/KupScrollOnHoverFeatures.vue b/...up-showcase/src/views/framework/kup-scroll-on-hover/examples/KupScrollOnHoverFeatures.vue
@@ -13,9 +13,10 @@
             element scrolls.<br /><br />
             - <strong>el (KupScrollOnHoverElement)</strong> - Element to
             watch.<br />
-            - <strong>vertical (boolean)</strong> - Enables vertical scroll..<br />
+            - <strong>vertical (boolean)</strong> - Enables vertical scroll.<br />
             - <strong>percentages (KupScrollOnHoverPercentages)</strong> - Sets
-            how big is the area in which the scroll is enabled.<br /> </p
+            how big is the area in which the scroll is enabled.<br />
+            - <strong>step (number)</strong> - Sets the speed of the scroll.<br /> </p
           ><div class="demo-container">
             <div id="scrolling-div"
               ><kup-card id="scrolling-card"></kup-card>

diff --git a/packages/ketchup/README.md b/packages/ketchup/README.md
@@ -83,7 +83,13 @@ defineCustomElements(window);
 
 ### Contributing
 
-If you have amazing ideas and you wish to contribute to this project, you're welcome to do so. Check out our [style guide](docs/styleGuide.md) for more details about our coding practices.
+In order to keep the code under control, if you want to contribute you must have knowledge of the following fundamentals:
+
+ - Git (how branching works, scoped commits and clear pull requests);
+ - Deep understanding of TypeScript, Sass and JSX (the core of the library);
+ - Basic understanding of Vue2 (this is only for the showcase, yet still important because components must be showcased once created). 
+
+If you respect this prerequisites and you wish to contribute to this project, you're welcome to do so. Check out our [style guide](docs/styleGuide.md) for more details about our coding practices.
 
 ### Issues
 

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