@vue-pivottable/multi-value-renderer 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,24 @@
 
 Multi-value aggregator renderer for vue-pivottable. Display multiple aggregated values per cell, each with its own aggregation function.
 
+## Screenshots
+
+### Vue 3 - PivotTable
+
+![Vue 3 Example](examples/screenshot-vue3.png)
+
+### Vue 3 - PivotTable UI
+
+![Vue 3 UI Example](examples/screenshot-vue3-ui.png)
+
+### Vue 2 - PivotTable
+
+![Vue 2 Example](examples/screenshot-vue2.png)
+
+### Vue 2 - PivotTable UI
+
+![Vue 2 UI Example](examples/screenshot-vue2-ui.png)
+
 ## Features
 
 - **Multiple Values per Cell**: Display sales (Sum), quantity (Average), and more in a single pivot table cell
@@ -138,7 +156,7 @@ Custom display labels for value columns:
 Import the included CSS for default styling:
 
 ```js
-import '@vue-pivottable/multi-value-renderer/dist/styles.css'
+import '@vue-pivottable/multi-value-renderer/styles.css'
 ```
 
 Or customize with your own CSS targeting these classes:

package/dist/styles.css

@@ -87,25 +87,6 @@
   font-weight: 600;
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .multi-value-label {
-    color: #aaa;
-  }
-
-  .layout-horizontal .multi-value-item {
-    border-right-color: #444;
-  }
-
-  .pvtMultiVal:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-
-  .pvtTotal.pvtMultiVal,
-  .pvtGrandTotal.pvtMultiVal {
-    background-color: #2a2a2a;
-  }
-}
 
 /* Print styles */
 @media print {

package/dist/vue2.js

@@ -203,7 +203,7 @@ function makeMultiValueRenderer(opts = {}) {
               staticClass: "multi-value-label"
             }, `${label}: `) : null,
             h("span", {
-              staticClass: ["multi-value-value"]
+              staticClass: "multi-value-value"
             }, formatted)
           ]);
         });
@@ -211,7 +211,7 @@ function makeMultiValueRenderer(opts = {}) {
           return items.join(" / ");
         }
         return h("div", {
-          staticClass: ["multi-value-cell", `layout-${this.cellLayout}`]
+          staticClass: `multi-value-cell layout-${this.cellLayout}`
         }, items);
       },
       /**
@@ -249,7 +249,7 @@ function makeMultiValueRenderer(opts = {}) {
       } catch (error) {
         console.error("Multi-Value Renderer Error:", error);
         return h("div", {
-          staticClass: ["pvtError"]
+          staticClass: "pvtError"
         }, `Error: ${error.message}`);
       }
       const colAttrs = pivotData.props.cols;
@@ -275,7 +275,7 @@ function makeMultiValueRenderer(opts = {}) {
         return null;
       };
       return h("table", {
-        staticClass: ["pvtTable", "pvtMultiValueTable"]
+        staticClass: "pvtTable pvtMultiValueTable"
       }, [
         // THEAD
         h("thead", [
@@ -290,13 +290,13 @@ function makeMultiValueRenderer(opts = {}) {
                 }
               }) : void 0,
               // Column attribute label
-              h("th", { staticClass: ["pvtAxisLabel"] }, c),
+              h("th", { staticClass: "pvtAxisLabel" }, c),
               // Column keys
               colKeys.map((colKey, i) => {
                 const x = this.spanSize(colKeys, i, j);
                 if (x === -1) return null;
                 return h("th", {
-                  staticClass: ["pvtColLabel"],
+                  staticClass: "pvtColLabel",
                   attrs: {
                     key: `colKey${i}`,
                     colSpan: x,
@@ -306,7 +306,7 @@ function makeMultiValueRenderer(opts = {}) {
               }),
               // Totals header
               j === 0 && this.rowTotal ? h("th", {
-                staticClass: ["pvtTotalLabel"],
+                staticClass: "pvtTotalLabel",
                 attrs: {
                   rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
                 }
@@ -317,13 +317,13 @@ function makeMultiValueRenderer(opts = {}) {
           rowAttrs.length !== 0 ? h("tr", [
             rowAttrs.map((r, i) => {
               return h("th", {
-                staticClass: ["pvtAxisLabel"],
+                staticClass: "pvtAxisLabel",
                 key: `rowAttr${i}`
               }, r);
             }),
             this.rowTotal ? h(
               "th",
-              { staticClass: ["pvtTotalLabel"] },
+              { staticClass: "pvtTotalLabel" },
               colAttrs.length === 0 ? this.localeStrings.totals : null
             ) : colAttrs.length === 0 ? void 0 : h("th")
           ]) : void 0
@@ -339,7 +339,7 @@ function makeMultiValueRenderer(opts = {}) {
                 const x = this.spanSize(rowKeys, i, j);
                 if (x === -1) return null;
                 return h("th", {
-                  staticClass: ["pvtRowLabel"],
+                  staticClass: "pvtRowLabel",
                   attrs: {
                     key: `rowKeyLabel${i}-${j}`,
                     rowSpan: x,
@@ -353,14 +353,14 @@ function makeMultiValueRenderer(opts = {}) {
                 const value = aggregator.value();
                 const clickHandler = getClickHandler(value, rowKey, colKey);
                 return h("td", {
-                  staticClass: ["pvVal", "pvtMultiVal"],
+                  staticClass: "pvVal pvtMultiVal",
                   attrs: { key: `pvtVal${i}-${j}` },
                   on: clickHandler ? { click: clickHandler } : {}
                 }, [this.renderMultiValueCell(h, value, rowKey, colKey)]);
               }),
               // Row total
               this.rowTotal ? h("td", {
-                staticClass: ["pvtTotal", "pvtMultiVal"],
+                staticClass: "pvtTotal pvtMultiVal",
                 on: getClickHandler(totalAggregator.value(), rowKey, []) ? { click: getClickHandler(totalAggregator.value(), rowKey, []) } : {}
               }, [this.renderMultiValueCell(h, totalAggregator.value(), rowKey, [])]) : void 0
             ]);
@@ -368,7 +368,7 @@ function makeMultiValueRenderer(opts = {}) {
           // Column totals row
           h("tr", [
             this.colTotal ? h("th", {
-              staticClass: ["pvtTotalLabel"],
+              staticClass: "pvtTotalLabel",
               attrs: {
                 colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
               }
@@ -377,13 +377,13 @@ function makeMultiValueRenderer(opts = {}) {
               const totalAggregator = pivotData.getAggregator([], colKey);
               const clickHandler = getClickHandler(totalAggregator.value(), [], colKey);
               return h("td", {
-                staticClass: ["pvtTotal", "pvtMultiVal"],
+                staticClass: "pvtTotal pvtMultiVal",
                 attrs: { key: `total${i}` },
                 on: clickHandler ? { click: clickHandler } : {}
               }, [this.renderMultiValueCell(h, totalAggregator.value(), [], colKey)]);
             }) : void 0,
             this.colTotal && this.rowTotal ? h("td", {
-              staticClass: ["pvtGrandTotal", "pvtMultiVal"],
+              staticClass: "pvtGrandTotal pvtMultiVal",
               on: getClickHandler(grandTotalAggregator.value(), [], []) ? { click: getClickHandler(grandTotalAggregator.value(), [], []) } : {}
             }, [this.renderMultiValueCell(h, grandTotalAggregator.value(), [], [])]) : void 0
           ])

package/dist/vue2.mjs

@@ -201,7 +201,7 @@ function makeMultiValueRenderer(opts = {}) {
               staticClass: "multi-value-label"
             }, `${label}: `) : null,
             h("span", {
-              staticClass: ["multi-value-value"]
+              staticClass: "multi-value-value"
             }, formatted)
           ]);
         });
@@ -209,7 +209,7 @@ function makeMultiValueRenderer(opts = {}) {
           return items.join(" / ");
         }
         return h("div", {
-          staticClass: ["multi-value-cell", `layout-${this.cellLayout}`]
+          staticClass: `multi-value-cell layout-${this.cellLayout}`
         }, items);
       },
       /**
@@ -247,7 +247,7 @@ function makeMultiValueRenderer(opts = {}) {
       } catch (error) {
         console.error("Multi-Value Renderer Error:", error);
         return h("div", {
-          staticClass: ["pvtError"]
+          staticClass: "pvtError"
         }, `Error: ${error.message}`);
       }
       const colAttrs = pivotData.props.cols;
@@ -273,7 +273,7 @@ function makeMultiValueRenderer(opts = {}) {
         return null;
       };
       return h("table", {
-        staticClass: ["pvtTable", "pvtMultiValueTable"]
+        staticClass: "pvtTable pvtMultiValueTable"
       }, [
         // THEAD
         h("thead", [
@@ -288,13 +288,13 @@ function makeMultiValueRenderer(opts = {}) {
                 }
               }) : void 0,
               // Column attribute label
-              h("th", { staticClass: ["pvtAxisLabel"] }, c),
+              h("th", { staticClass: "pvtAxisLabel" }, c),
               // Column keys
               colKeys.map((colKey, i) => {
                 const x = this.spanSize(colKeys, i, j);
                 if (x === -1) return null;
                 return h("th", {
-                  staticClass: ["pvtColLabel"],
+                  staticClass: "pvtColLabel",
                   attrs: {
                     key: `colKey${i}`,
                     colSpan: x,
@@ -304,7 +304,7 @@ function makeMultiValueRenderer(opts = {}) {
               }),
               // Totals header
               j === 0 && this.rowTotal ? h("th", {
-                staticClass: ["pvtTotalLabel"],
+                staticClass: "pvtTotalLabel",
                 attrs: {
                   rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
                 }
@@ -315,13 +315,13 @@ function makeMultiValueRenderer(opts = {}) {
           rowAttrs.length !== 0 ? h("tr", [
             rowAttrs.map((r, i) => {
               return h("th", {
-                staticClass: ["pvtAxisLabel"],
+                staticClass: "pvtAxisLabel",
                 key: `rowAttr${i}`
               }, r);
             }),
             this.rowTotal ? h(
               "th",
-              { staticClass: ["pvtTotalLabel"] },
+              { staticClass: "pvtTotalLabel" },
               colAttrs.length === 0 ? this.localeStrings.totals : null
             ) : colAttrs.length === 0 ? void 0 : h("th")
           ]) : void 0
@@ -337,7 +337,7 @@ function makeMultiValueRenderer(opts = {}) {
                 const x = this.spanSize(rowKeys, i, j);
                 if (x === -1) return null;
                 return h("th", {
-                  staticClass: ["pvtRowLabel"],
+                  staticClass: "pvtRowLabel",
                   attrs: {
                     key: `rowKeyLabel${i}-${j}`,
                     rowSpan: x,
@@ -351,14 +351,14 @@ function makeMultiValueRenderer(opts = {}) {
                 const value = aggregator.value();
                 const clickHandler = getClickHandler(value, rowKey, colKey);
                 return h("td", {
-                  staticClass: ["pvVal", "pvtMultiVal"],
+                  staticClass: "pvVal pvtMultiVal",
                   attrs: { key: `pvtVal${i}-${j}` },
                   on: clickHandler ? { click: clickHandler } : {}
                 }, [this.renderMultiValueCell(h, value, rowKey, colKey)]);
               }),
               // Row total
               this.rowTotal ? h("td", {
-                staticClass: ["pvtTotal", "pvtMultiVal"],
+                staticClass: "pvtTotal pvtMultiVal",
                 on: getClickHandler(totalAggregator.value(), rowKey, []) ? { click: getClickHandler(totalAggregator.value(), rowKey, []) } : {}
               }, [this.renderMultiValueCell(h, totalAggregator.value(), rowKey, [])]) : void 0
             ]);
@@ -366,7 +366,7 @@ function makeMultiValueRenderer(opts = {}) {
           // Column totals row
           h("tr", [
             this.colTotal ? h("th", {
-              staticClass: ["pvtTotalLabel"],
+              staticClass: "pvtTotalLabel",
               attrs: {
                 colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
               }
@@ -375,13 +375,13 @@ function makeMultiValueRenderer(opts = {}) {
               const totalAggregator = pivotData.getAggregator([], colKey);
               const clickHandler = getClickHandler(totalAggregator.value(), [], colKey);
               return h("td", {
-                staticClass: ["pvtTotal", "pvtMultiVal"],
+                staticClass: "pvtTotal pvtMultiVal",
                 attrs: { key: `total${i}` },
                 on: clickHandler ? { click: clickHandler } : {}
               }, [this.renderMultiValueCell(h, totalAggregator.value(), [], colKey)]);
             }) : void 0,
             this.colTotal && this.rowTotal ? h("td", {
-              staticClass: ["pvtGrandTotal", "pvtMultiVal"],
+              staticClass: "pvtGrandTotal pvtMultiVal",
               on: getClickHandler(grandTotalAggregator.value(), [], []) ? { click: getClickHandler(grandTotalAggregator.value(), [], []) } : {}
             }, [this.renderMultiValueCell(h, grandTotalAggregator.value(), [], [])]) : void 0
           ])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-pivottable/multi-value-renderer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Multi-value aggregator renderer for vue-pivottable (Vue 2/3 compatible)",
   "author": "Seungwoo321",
   "license": "MIT",
@@ -24,6 +24,7 @@
       "import": "./dist/vue3.mjs",
       "require": "./dist/vue3.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./dist/styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
@@ -49,8 +50,9 @@
     }
   },
   "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.4",
     "@vitejs/plugin-vue": "^5.0.0",
-    "release-it": "^17.0.0",
+    "release-it": "^19.2.3",
     "rimraf": "^5.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",