feat: allow icon to be colored

Author: m2a2x

lib/calendar.svg

@@ -1,18 +1,35 @@
-import type {
-  ColumnDataSchemaModel,
-  HyperFunc,
-  VNode,
+import {
+  type ColumnDataSchemaModel,
+  type HyperFunc,
+  type VNode,
 } from '@revolist/revogrid';
 
+const svg = `<svg aria-hidden="true" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" transform="translate(2 2)">
+        <path d="m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path d="m.5 4.5h16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+        <g fill="currentColor">
+            <circle cx="8.5" cy="8.5" r="1"></circle>
+            <circle cx="4.5" cy="8.5" r="1"></circle>
+            <circle cx="12.5" cy="8.5" r="1"></circle>
+            <circle cx="8.5" cy="12.5" r="1"></circle>
+            <circle cx="4.5" cy="12.5" r="1"></circle>
+            <circle cx="12.5" cy="12.5" r="1"></circle>
+        </g>
+    </g>
+</svg>
+`;
+
 export const ColumnRenderer = (
   h: HyperFunc<VNode>,
   { model, prop }: ColumnDataSchemaModel,
 ): VNode[] => {
   let val = model[prop];
   return [
     h('div', { class: { 'cell-value-wrapper': true } }, [val]),
-    h('span', {
+    h('button', {
       class: { calendar: true },
+      innerHTML: svg,
       onClick: (e: MouseEvent) => {
         const ev = new MouseEvent('dblclick', {
           bubbles: true,

lib/renderer.ts

@@ -43,14 +43,17 @@
 
 revogr-data .calendar {
     position: absolute;
-    right: 5px;
+    right: 0;
     top: 0;
-    width: 20px;
+    border: 0;
+    width: 24px;
     height: 100%;
-    background: url(calendar.svg);
-    
-    background-size: 14px;
-    background-repeat: no-repeat;
-    background-position: center;
     opacity: .5;
+    text-align: center;
+    background-color: transparent;
+
+    svg {
+        width: 14px;
+        vertical-align: middle;
+    }
 }

lib/style.css

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid-column-date",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "description": "Date format for RevoGrid system based on duetds-date-picker",
   "module": "./dist/revogrid-column-date.js",
   "main": "./dist/revogrid-column-date.umd.cjs",
@@ -51,7 +51,7 @@
   "license": "MIT",
   "devDependencies": {
     "@duetds/date-picker": "^1.4.0",
-    "@revolist/revogrid": "^4.8.13",
+    "@revolist/revogrid": "^4.10.1",
     "@types/lodash": "^4.14.149",
     "lodash": "4.17.20",
     "typescript": "^5.2.2",