@saasquatch/mint-components 1.15.0-12 → 1.15.0-14

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -25,13 +25,6 @@ export class Leaderboard {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * Hide the viewer's leaderboard row if not in the top results.
-     *
-     * @uiName Hide viewing user
-     * @default
-     */
-    this.hideViewer = false;
     /**
      * @uiName Viewing user text
      */
@@ -54,6 +47,13 @@ export class Leaderboard {
      * @uiName Maximum rows number
      */
     this.maxRows = 10;
+    /**
+     * Hide the viewer's leaderboard row if not in the top results.
+     *
+     * @uiName Hide viewing user
+     * @default
+     */
+    this.hideViewer = false;
     this.ignored = true;
     withHooks(this);
     withShadowView(this);
@@ -77,6 +77,8 @@ export class Leaderboard {
       showRank: this.showRank,
       rankSuffix: this.rankSuffix,
       width: this.width,
+      viewingUserHighlightColor: this.viewingUserHighlightColor,
+      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -231,30 +233,6 @@ export class Leaderboard {
       "attribute": "rank-suffix",
       "reflect": false
     },
-    "hideViewer": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Hide viewing user",
-            "name": "uiName"
-          }, {
-            "text": undefined,
-            "name": "default"
-          }],
-        "text": "Hide the viewer's leaderboard row if not in the top results."
-      },
-      "attribute": "hide-viewer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "viewingUserText": {
       "type": "string",
       "mutable": false,
@@ -276,29 +254,6 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "\"You\""
     },
-    "viewingUserHighlightColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "Viewing user highlight color",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "viewing-user-highlight-color",
-      "reflect": false
-    },
     "hideNames": {
       "type": "boolean",
       "mutable": false,
@@ -452,12 +407,189 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "10"
     },
+    "hideViewer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Hide viewing user",
+            "name": "uiName"
+          }, {
+            "text": undefined,
+            "name": "default"
+          }],
+        "text": "Hide the viewer's leaderboard row if not in the top results."
+      },
+      "attribute": "hide-viewer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "viewingUserHighlightColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Viewing User Highlight Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the background color of the viewing user row in the leaderboard."
+      },
+      "attribute": "viewing-user-highlight-color",
+      "reflect": false
+    },
+    "viewingUserHighlightTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Viewing User Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the text color of the viewing user row in the leaderboard."
+      },
+      "attribute": "viewing-user-highlight-text-color",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the background color of the leaderboard."
+      },
+      "attribute": "background",
+      "reflect": false
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Changes the border color of the table rows."
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Text color of the leaderboard."
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Leaderboard border radius in pixels."
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserhighlightColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserHighlightColor?: string; viewingUserHighlightTextColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; background?: string; borderColor?: string; textColor?: string; borderRadius?: number; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -534,7 +666,6 @@ function useLeaderboardDemo(props) {
       hasLeaders: true,
       isEssentials: false,
       styles: {
-        // viewingUserHighlightColor: props.viewingUserHighlightColor,
         usersheading: props.usersheading
           ? props.usersheading
           : "Top referrers",
@@ -551,6 +682,12 @@ function useLeaderboardDemo(props) {
         hideNames: props.hideNames,
         rankSuffix: props.rankSuffix,
         width: props.width,
+        viewingUserHighlightColor: props.viewingUserHighlightColor,
+        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
+        background: props.background,
+        borderColor: props.borderColor,
+        textColor: props.textColor,
+        borderRadius: props.borderRadius,
       },
     },
     data: {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -39,7 +39,7 @@ export function TimelineEntryView(props) {
         position: "relative",
         top: "4px",
         zIndex: "1",
-        color: "var(--sl-color-primary-500)",
+        color: props.lineColor || "var(--sl-color-primary-500)",
         marginRight: "var(--sl-spacing-large)",
       },
       "& .reward": {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -20,7 +20,6 @@ export class TimelineReward {
   }
   disconnectedCallback() { }
   render() {
-    console.log({ ...getProps(this) });
     useRequestRerender([this.reward]);
     return h(TimelineEntryView, Object.assign({}, getProps(this)));
   }

package/dist/esm/{ShadowViewAddon-8f268346.js → ShadowViewAddon-3651cb42.js}

@@ -99,6 +99,8 @@ function LeaderboardView(props) {
       "& table": {
         width: "100%",
         borderCollapse: "collapse",
+        background: styles.background || "transparent",
+        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
       },
       "& th": {
         textAlign: "left",
@@ -108,7 +110,7 @@ function LeaderboardView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& tr:not(:first-child)": {
-        borderTop: "1px solid var(--sl-color-neutral-200)",
+        borderTop: `1px solid ${styles.borderColor || "var(--sl-color-neutral-200)"}`,
       },
       "& td": {
         fontSize: "var(--sl-font-size-medium)",
@@ -117,14 +119,17 @@ function LeaderboardView(props) {
       "& .ellipses": {
         textAlign: "left",
         padding: "0",
-        color: "var(--sqm-text)",
+        color: styles.textColor || "var(--sqm-text)",
         paddingLeft: "25%",
       },
       "& .highlight": {
-        background: styles.viewingUserhighlightColor || "var(--sl-color-primary-100)",
+        background: styles.viewingUserHighlightColor || "var(--sl-color-primary-200)",
+        "& td, th": {
+          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
+        },
       },
       "& td, th": {
-        color: "var(--sqm-text)",
+        color: styles.textColor || "var(--sqm-text)",
         padding: "var(--sl-spacing-medium)",
       },
       "& .User": {