@malloydata/render 0.0.108-dev231130212526 → 0.0.108

package/dist/component/render.js

@@ -32,12 +32,49 @@ exports.MalloyRender = void 0;
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
 require("./table");
+// Get the first valid theme value or fallback to CSS variable
+function getThemeValue(prop, ...themes) {
+    let value;
+    for (const theme of themes) {
+        value = theme === null || theme === void 0 ? void 0 : theme.text(prop);
+        if (typeof value !== 'undefined')
+            break;
+    }
+    // If no theme overrides, convert prop name from camelCase to kebab and pull from --malloy-theme-- variable
+    return (value !== null && value !== void 0 ? value : `var(--malloy-theme--${prop
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()})`);
+}
 let MalloyRender = exports.MalloyRender = class MalloyRender extends lit_1.LitElement {
     render() {
-        const isCompact = this.result.resultExplore.modelTag.has('renderer_next', 'compact');
+        const modelTag = this.result.resultExplore.modelTag;
+        const { tag: resultTag } = this.result.tagParse();
+        const modelTheme = modelTag.tag('theme');
+        const localTheme = resultTag.tag('theme');
+        const tableRowHeight = getThemeValue('tableRowHeight', localTheme, modelTheme);
+        const tableBodyColor = getThemeValue('tableBodyColor', localTheme, modelTheme);
+        const tableFontSize = getThemeValue('tableFontSize', localTheme, modelTheme);
+        const tableHeaderColor = getThemeValue('tableHeaderColor', localTheme, modelTheme);
+        const tableHeaderWeight = getThemeValue('tableHeaderWeight', localTheme, modelTheme);
+        const tableBodyWeight = getThemeValue('tableBodyWeight', localTheme, modelTheme);
+        const tableBorder = getThemeValue('tableBorder', localTheme, modelTheme);
+        const tableBackground = getThemeValue('tableBackground', localTheme, modelTheme);
+        const tableGutterSize = getThemeValue('tableGutterSize', localTheme, modelTheme);
+        const tablePinnedBackground = getThemeValue('tablePinnedBackground', localTheme, modelTheme);
+        const tablePinnedBorder = getThemeValue('tablePinnedBorder', localTheme, modelTheme);
         const dynamicStyle = (0, lit_1.html) `<style>
       :host {
-        --table-row-height: ${isCompact ? '28px' : '36px'};
+        --malloy-render--table-row-height: ${tableRowHeight};
+        --malloy-render--table-body-color: ${tableBodyColor};
+        --malloy-render--table-font-size: ${tableFontSize};
+        --malloy-render--table-header-color: ${tableHeaderColor};
+        --malloy-render--table-header-weight: ${tableHeaderWeight};
+        --malloy-render--table-body-weight: ${tableBodyWeight};
+        --malloy-render--table-border: ${tableBorder};
+        --malloy-render--table-background: ${tableBackground};
+        --malloy-render--table-gutter-size: ${tableGutterSize};
+        --malloy-render--table-pinned-background: ${tablePinnedBackground};
+        --malloy-render--table-pinned-border: ${tablePinnedBorder};
       }
     </style>`;
         return (0, lit_1.html) `${dynamicStyle}<malloy-table
@@ -48,19 +85,20 @@ let MalloyRender = exports.MalloyRender = class MalloyRender extends lit_1.LitEl
 };
 MalloyRender.styles = (0, lit_1.css) `
     :host {
-      --table-font-size: 12px;
-      --table-header-color: #5d626b;
-      --table-header-weight: bold;
-      --table-body-color: #727883;
-      --table-body-weight: 400;
-      --table-border: 1px solid #e5e7eb;
-      --table-background: white;
-      --table-gutter-size: 15px;
-      --table-pinned-background: #f5fafc;
-      --table-pinned-border: 1px solid #daedf3;
+      --malloy-theme--table-row-height: 28px;
+      --malloy-theme--table-font-size: 12px;
+      --malloy-theme--table-header-color: #5d626b;
+      --malloy-theme--table-header-weight: bold;
+      --malloy-theme--table-body-color: #727883;
+      --malloy-theme--table-body-weight: 400;
+      --malloy-theme--table-border: 1px solid #e5e7eb;
+      --malloy-theme--table-background: white;
+      --malloy-theme--table-gutter-size: 15px;
+      --malloy-theme--table-pinned-background: #f5fafc;
+      --malloy-theme--table-pinned-border: 1px solid #daedf3;
 
       font-family: Inter, system-ui, sans-serif;
-      font-size: var(--table-font-size);
+      font-size: var(--malloy-render--table-font-size);
     }
 
     @supports (font-variation-settings: normal) {

package/dist/component/table.js

@@ -216,7 +216,7 @@ Table.styles = (0, lit_1.css) `
 
     table {
       border-collapse: collapse;
-      background: var(--table-background);
+      background: var(--malloy-render--table-background);
     }
 
     th {
@@ -228,7 +228,7 @@ Table.styles = (0, lit_1.css) `
     }
 
     .column-cell {
-      height: var(--table-row-height);
+      height: var(--malloy-render--table-row-height);
       overflow: hidden;
       white-space: nowrap;
       text-align: left;
@@ -238,13 +238,13 @@ Table.styles = (0, lit_1.css) `
     }
 
     td.column-cell {
-      font-weight: var(--table-body-weight);
-      color: var(--table-body-color);
+      font-weight: var(--malloy-render--table-body-weight);
+      color: var(--malloy-render--table-body-color);
     }
 
     th.column-cell {
-      font-weight: var(--table-header-weight);
-      color: var(--table-header-color);
+      font-weight: var(--malloy-render--table-header-weight);
+      color: var(--malloy-render--table-header-color);
     }
 
     .column-cell.numeric {
@@ -253,25 +253,25 @@ Table.styles = (0, lit_1.css) `
     }
 
     .cell-wrapper {
-      height: var(--table-row-height);
+      height: var(--malloy-render--table-row-height);
       display: flex;
       align-items: center;
       overflow: hidden;
     }
 
     .cell-content {
-      border-top: var(--table-border);
-      height: var(--table-row-height);
-      line-height: var(--table-row-height);
+      border-top: var(--malloy-render--table-border);
+      height: var(--malloy-render--table-row-height);
+      line-height: var(--malloy-render--table-row-height);
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .cell-gutter {
-      border-top: var(--table-border);
-      height: var(--table-row-height);
-      width: var(--table-gutter-size);
+      border-top: var(--malloy-render--table-border);
+      height: var(--malloy-render--table-row-height);
+      width: var(--malloy-render--table-gutter-size);
       transition: border-color 0.25s;
     }
 
@@ -284,11 +284,11 @@ Table.styles = (0, lit_1.css) `
     }
 
     .pinned-header th {
-      background: var(--table-background);
+      background: var(--malloy-render--table-background);
     }
 
     .pinned-header.scrolled th {
-      background: var(--table-pinned-background);
+      background: var(--malloy-render--table-pinned-background);
       box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
     }
 
@@ -296,7 +296,7 @@ Table.styles = (0, lit_1.css) `
       .cell-content,
       .cell-gutter,
       .cell-gutter.hide-gutter-border {
-        border-top: var(--table-pinned-border);
+        border-top: var(--malloy-render--table-pinned-border);
       }
     }
   `;

package/dist/stories/tables.stories.d.ts

@@ -28,10 +28,3 @@ export declare const Nested: {
         view: string;
     };
 };
-export declare const NestedCompact: {
-    args: {
-        source: string;
-        view: string;
-        classes: string;
-    };
-};

package/dist/stories/tables.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NestedCompact = exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
+exports.Nested = exports.Products2Column = exports.ProductsTableCustomTheme = exports.ProductsTable = void 0;
 const tables_malloy_raw_1 = __importDefault(require("./static/tables.malloy?raw"));
 const util_1 = require("./util");
 require("./themes.css");
@@ -50,11 +50,4 @@ exports.Nested = {
         view: 'nested',
     },
 };
-exports.NestedCompact = {
-    args: {
-        source: 'products',
-        view: 'nested',
-        classes: 'compact',
-    },
-};
 //# sourceMappingURL=tables.stories.js.map

package/dist/stories/themes.stories.d.ts

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/html';
+import './themes.css';
+import '../component/render';
+declare const meta: Meta;
+export default meta;
+export declare const ModelThemeOverride: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ViewThemeOverride: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ViewThemeOverrideCSS: {
+    args: {
+        source: string;
+        view: string;
+        classes: string;
+    };
+};

package/dist/stories/themes.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewThemeOverrideCSS = exports.ViewThemeOverride = exports.ModelThemeOverride = void 0;
+const themes_malloy_raw_1 = __importDefault(require("./static/themes.malloy?raw"));
+const util_1 = require("./util");
+require("./themes.css");
+require("../component/render");
+const meta = {
+    title: 'Malloy Next/Themes',
+    render: ({ classes }, context) => {
+        const parent = document.createElement('div');
+        parent.style.height = '1000px';
+        parent.style.position = 'relative';
+        const el = document.createElement('malloy-render');
+        if (classes)
+            el.classList.add(classes);
+        el.result = context.loaded['result'];
+        parent.appendChild(el);
+        return parent;
+    },
+    loaders: [(0, util_1.createLoader)(themes_malloy_raw_1.default)],
+    argTypes: {},
+};
+exports.default = meta;
+exports.ModelThemeOverride = {
+    args: {
+        source: 'products',
+        view: `records`,
+    },
+};
+exports.ViewThemeOverride = {
+    args: {
+        source: 'products',
+        view: `records_override`,
+    },
+};
+exports.ViewThemeOverrideCSS = {
+    args: {
+        source: 'products',
+        view: `records_override`,
+        classes: 'night',
+    },
+};
+//# sourceMappingURL=themes.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.108-dev231130212526",
+  "version": "0.0.108",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.108-dev231130212526",
+    "@malloydata/malloy": "^0.0.108",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",