add format & badge

Author: Kenneth Cheng

src/VueExcelColumn.vue

@@ -8,7 +8,7 @@ export default {
     field: {type: String, default: 'dummy'},
     label: {type: String, default: null},
     type: {type: String, default: 'string'},
-    initStyle: {type: Object, default () {return {}}},
+    initStyle: {type: Object, default: null},
     width: {type: String, default: '100px'},
     invisible: {type: Boolean, default: false},
     readonly: {type: Boolean, default: null},
@@ -21,6 +21,7 @@ export default {
     validate: {type: Function, default: null},
     change: {type: Function, default: null},
     link: {type: Function, default: null},
+    format: {type: String, default: 'text'},
     cellClick: {type: Function, default: null},
     autoFillWidth: {type: Boolean, default: false},
 
@@ -34,6 +35,8 @@ export default {
     sort: {type: Function, default: null},
     masking: {type: String, default: '•'},
     placeholder: {type: String, default: ''},
+    color: {type: [String, Function], default: null},
+    bgcolor: {type: [String, Function], default: null},
 
     toValue: {
       type: Function,
@@ -113,6 +116,8 @@ export default {
             return this.masking.repeat(val?.length || 0)
           case 'action':
             return this.placeholder || ''
+          case 'badge':
+            return `<span class='badge'>${val}</span>`
           default:
             return val
         }
@@ -126,7 +131,7 @@ export default {
   methods: {
     init () {
       const self = this
-      let style = this.initStyle
+      let style = this.initStyle || {}
       let validate = this.validate
       let allowKeys = this.allowKeys
       let lengthLimit = this.lengthLimit
@@ -209,6 +214,12 @@ export default {
         case 'action':
           this._listByClick = true
           break
+        case 'badge':
+          this._color = 'white'
+          this._bgcolor = 'blue'
+          this._format = 'html'
+          style.textAlign = 'center'
+          break
         default:
           throw new Error('VueExcelColumn: Not supported type:' + this.type)
       }
@@ -259,12 +270,15 @@ export default {
         options: this.options,
         summary: this.summary,
         masking: this.masking,
+        format: this._format || this.format,
         toValue: this.toValue,
         toText: this.toText,
         register: this.register,
         placeholder: this.placeholder,
         cellClick: this.cellClick,
-        listByClick: this.listByClick || this._listByClick
+        listByClick: this.listByClick || this._listByClick,
+        color: this.color || this._color,
+        bgcolor: this.bgcolor || this._bgcolor
       })
     }
   }

src/VueExcelEditor.vue

@@ -118,12 +118,15 @@
                     link: item.link,
                     select: item.options,
                     datepick: item.type == 'date',
-                    'sticky-column': item.sticky
+                    stickyColumn: item.sticky
                   }"
                   :key="p"
-                  :style="Object.assign(cellStyle(record, item), renderColumnCellStyle(item))"
+                  :style="Object.assign(cellStyle(record, item), renderColumnCellStyle(item, record))"
                   @mouseover="cellMouseOver"
-                  @mousemove="cellMouseMove">{{ item.toText(record[item.name]) }}</td>
+                  @mousemove="cellMouseMove">
+                  <template v-if="item.format=='html'"><span v-html="item.toText(record[item.name])" /></template>
+                  <template v-else>{{ item.toText(record[item.name]) }}</template>
+                </td>
               <td v-if="vScroller.buttonHeight < vScroller.height" class="last-col"></td>
             </tr>
           </tbody>
@@ -904,10 +907,14 @@ export default defineComponent({
       const instance = getCurrentInstance()
       instance?.proxy?.$forceUpdate()
     },
-    renderColumnCellStyle (field) {
+    renderColumnCellStyle (field, record) {
       let result = field.initStyle
       if (field.readonly) result = Object.assign(result, this.readonlyStyle)
       if (field.left) result = Object.assign(result, {left: field.left})
+      if (record && field.bgcolor)
+        result = Object.assign(result, {'--bgcolor': typeof field.bgcolor === 'function' ? field.bgcolor(record) : field.bgcolor })
+      if (record && field.color)
+        result = Object.assign(result, {'--color': typeof field.color === 'function' ? field.color(record) : field.color })
       return result
     },
     localeDate (d) {
@@ -2299,7 +2306,7 @@ export default defineComponent({
       const row = e.target.parentNode
       const colPos = Array.from(row.children).indexOf(e.target) - 1
       const currentField = this.fields[colPos]
-      if (currentField.type === 'action')
+      if (currentField?.type === 'action')
         cursor = 'pointer'
       e.target.style.cursor = cursor
     },
@@ -2970,8 +2977,16 @@ input:focus, input:active:focus, input.active:focus {
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  color: var(--color);
   /* animation: fadein 0.2s; */
 }
+.systable tbody td :deep(.badge) {
+  padding: 0px 10px;
+  border-radius: 10px;
+  background-color: var(--bgcolor);
+  font-weight: 600
+}
+
 .systable tbody td.link {
   color: blue;
   cursor: pointer !important;