gd-bs 6.5.3 → 6.5.5

package/index.html

@@ -23,6 +23,7 @@
         <div id="panel"></div>
         <div id="badge"></div>
         <div id="card"></div>
+        <div id="card-group"></div>
         <div id="tooltip"></div>
         <div id="toolbar"></div>
         <div id="ddl"></div>
@@ -165,6 +166,92 @@
                 }]
             });
 
+            window["cardGroup"] = GD.Components.CardGroup({
+                el: document.getElementById("card-group"),
+                className: "g-4",
+                col: 4,
+                cards: [
+                {
+                        body: [{
+                            title: "Card Title 1",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 2",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 3",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 4",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 5",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    },
+                    {
+                        body: [{
+                            title: "Card Title 6",
+                            text: "This is the card contents.",
+                            actions: [{
+                                text: "Card Action",
+                                buttonType: GD.Components.ButtonTypes.OutlinePrimary,
+                                onClick: function(action, card) {
+                                    alert(card.title + " was clicked.");
+                                }
+                            }]
+                        }]
+                    }
+                ]
+            });
+
             window["cbg"] = GD.Components.CheckboxGroup({
                 el: document.getElementById("cbGroup"),
                 label: "Label",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.5.3",
+    "version": "6.5.5",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/button/index.ts

@@ -5,8 +5,6 @@ import { ClassNames } from "../classNames";
 import { Spinner } from "../spinner";
 import { HTML, HTMLBlock, HTMLLink } from "./templates";
 
-declare var GD;
-
 /**
  * Button Types
  */

package/src/components/card/item.ts

@@ -37,7 +37,7 @@ export class CardBody {
         // Update the title
         let elTitle = this._el.querySelector(".card-title") as HTMLElement;
         if (this._props.title || this._props.onRenderTitle) {
-            // Append the content
+            // Append the title
             appendContent(elTitle, this._props.title);
 
             // Call the render event
@@ -50,25 +50,34 @@ export class CardBody {
         // Update the sub-title
         let subTitle = this._el.querySelector(".card-subtitle");
         if (this._props.subTitle) {
-            // Set the title
+            // Set the sub-title
             subTitle.innerHTML = this._props.subTitle;
         } else {
-            // Remove the title
+            // Remove the sub-title
             this._el.removeChild(subTitle);
         }
 
         // Update the text
         let text = this._el.querySelector(".card-text");
         if (this._props.text) {
-            // Set the title
+            // Set the text
             text.innerHTML = this._props.text;
-        } else {
-            // Remove the title
+        }
+        // Else, see if there is content
+        else if (this._props.content && typeof (this._props.content) === "string") {
+            // Set the text
+            text.innerHTML = this._props.content;
+        }
+        else {
+            // Remove the text
             this._el.removeChild(text);
         }
 
-        // Append the content
-        appendContent(this._el, this._props.content);
+        // See if the content is an element
+        if (this._props.content && typeof (this._props.content) !== "string") {
+            // Append the content
+            appendContent(this._el, this._props.content);
+        }
 
         // Render the actions
         this.renderActions();

package/src/components/cardGroup/index.ts

@@ -21,11 +21,41 @@ class _CardGroup extends Base<ICardGroupProps> implements ICardGroup {
 
     // Configure the card group
     private configure(cardTemplate: string) {
-        // Parse the cards
         let cards = this.props.cards || [];
+        let isGrid = false;
+
+        // See if we are rendering columns
+        if (typeof (this.props.colSize) === "number") {
+            // Update the flag
+            isGrid = true;
+
+            // Update the class name
+            (this.el as HTMLElement).classList.remove("card-group");
+            (this.el as HTMLElement).classList.add("row");
+
+            // Determine the column class to use
+            let colSize = this.props.colSize > 0 && this.props.colSize <= 12 ? this.props.colSize : 4;
+            (this.el as HTMLElement).classList.add("row-cols-" + colSize);
+        }
+
+        // Parse the cards
         for (let i = 0; i < cards.length; i++) {
-            // Add the card
-            this.el.appendChild(Card(cards[i], cardTemplate).el);
+            // Create the card
+            let card = Card(cards[i], cardTemplate);
+
+            // See if we are using a grid
+            if (isGrid) {
+                // Create a column element
+                let elCol = document.createElement("div");
+                elCol.classList.add("col");
+                elCol.appendChild(card.el);
+
+                // Add the card
+                this.el.appendChild(elCol);
+            } else {
+                // Add the card
+                this.el.appendChild(card.el);
+            }
         }
     }
 }

package/src/components/cardGroup/types.d.ts

@@ -107,4 +107,5 @@ export interface ICardGroup {
  */
 export interface ICardGroupProps extends IBaseProps<ICardGroup> {
     cards?: Array<ICardProps>;
+    colSize?: number;
 }