revise readme

Author: Kenneth Cheng

README.md

@@ -132,8 +132,10 @@ In your template
 | summary        | Optional  | String            | Summary: 'sum', 'avg', 'max', 'min'. Default is null |
 | sort           | Optional  | Function          | The custom function for sorting the column |
 | link           | Optional  | Function          | The function to react to the alt-click on cell text |
+| is-link        | Optional  | Function          | The function to identify it is a link |
 | to-text        | Optional  | Function          | The function to convert from object value to edit-text |
 | to-value       | Optional  | Function          | The function to convert from edit-text to object value |
+| placeholder    | Optional  | String            | The custom text if the field is null |
 
 @ - Function can return a promise
 
@@ -153,6 +155,7 @@ In your template
 | datetick        | unix timestamp      | yyyy-mm-dd          | left    | valid date         | none         | Y |
 | datetimetick    | unix timestamp      | yyyy-mm-dd hh:mn    | left    | valid datetime     | none         | Y |
 | datetimesectick | unix timestamp      | yyyy-mm-dd hh:mn:ss | left    | valid datetimesec  | none         | Y |
+| action          | string              | null                | center  | none               | none         | Y |
 
 ## Hot Key List
 
@@ -230,18 +233,20 @@ In your template
 
 ### Variable Component: vue-excel-editor
 
-| Name          | Type    | Description |
-| :---          | :---    | :---        |
-| processing    | Boolean | Component is busy or not |
-| pageTop       | Number  | The top row number of the current page |
-| pageSize      | Number  | The number of rows of each page |
-| fields        | AOO     | It contains the column spec create when mount |
-| filterColumn  | Object  | Contains the current filters, developer can access the filter string via this |
-| table         | AOO     | It contains the filtered records |
-| selected      | Object  | Contains all the selected rows, the key is row number and the value is internal $id |
-| selectedCount | Number  | Number of rows are selected |
-| errmsg        | Object  | Contains all the validation error messages, the key is internal $id plus field name |
-| redo          | AOA     | The buffer of undo, it will be removed after undo or table changed |
+| Name           | Type    | Description |
+| :---           | :---    | :---        |
+| processing     | Boolean | Component is busy or not |
+| pageTop        | Number  | The top row number of the current page |
+| pageSize       | Number  | The number of rows of each page |
+| fields         | AOO     | It contains the column spec create when mount |
+| filterColumn   | Object  | Contains the current filters, developer can access the filter string via this |
+| table          | AOO     | It contains the filtered records |
+| selected       | Object  | Contains all the selected rows, the key is row number and the value is internal $id |
+| selectedCount@ | Number  | Number of rows are selected |
+| errmsg         | Object  | Contains all the validation error messages, the key is internal $id plus field name |
+| redo           | AOA     | The buffer of undo, it will be removed after undo or table changed |
+
+@ - allow v-model binding
 
 AOA = Array of Array, i.e. [[...], [...]]  
 AOO = Array of Object, i.e. [{...}, {...}]
@@ -451,22 +456,31 @@ methods: {
 You may also want to watch the selected records count for displaying the action buttons. For example:
 
 ```html
+<vue-excel-editor v-model:selected-count="count">
+...
+</vue-excel-editor>
+
 <button v-show="showDeleteAction"> Delete </button>
 <button v-show="showSendEmailInvitationAction"> Invite </button>
 <button v-show="showSendBirthdayGreetingAction"> Greeting </button>
 ```
 
 ```js
+data () {
+    return {
+        count: 0
+    }
+}
 computed: {
     showDeleteAction () {
-        return this.$refs.grid.selectedCount > 0  // Show if any records selected
+        return this.count > 0  // Show if any records selected
     },
     showSendEmailInvitationAction () {
-        return this.$refs.grid.selectedCount === 1  // Show if single record is selected
+        return this.count === 1  // Show if single record is selected
     },
     showSendBirthdayGreetingAction () {
         // Show only if any selected people birthday matched today
-        if (this.$refs.grid.selectedCount > 0) {
+        if (this.count > 0) {
             return this.$refs.grid.getSelectedRecords().filter(item => item.birth === today).length > 0
         else
             return false
@@ -732,18 +746,23 @@ Use this with care. The summary calculation eats resource, so it only calculates
 This is a nice feature in enterprise applications. Actually, I was learning from SAP UI. When the user holds the function key (Alt-key here) and move the mouse over the cell content, the text will show as a link. If user clicks on the link, your custom function will be triggered. The following example shows how to route to the user profile page by clicking on the name column cell.
 
 ```html
-<vue-excel-column field="name" label="Name" type="string" width="150px" :link="routeToUserFunc" />
+<vue-excel-column field="name" label="Name" type="string" width="150px" :link="routeToUserFunc" :is-link="showLinkOrString" />
 ```
 
 ```js
 methods: {
     // Hold Alt Key and click on any name, program will route to the page "User Profile"
     routeToUserFunc (content, record) {
         this.$router.push(`/user/${record.user}`)
+    },
+    showLinkOrString(record) {
+        return record.gender === 'M' // Only gender M show the link
     }
 }
 ```
 
+All links will be set as readonly
+
 ### Text/Value conversion
 
 Sometimes displaying text and the store value will be different. In order to deal with this, you could use column properties to-text and to-value.
@@ -765,6 +784,54 @@ methods: {
 }
 ```
 
+### Badge
+
+Sometimes we want to display the text in badge style.
+
+```html
+<vue-excel-column field="user" label="User ID" type="badge" width="80px" :bg-color="badgeColor" />
+```
+
+```js
+methods: {
+    badgeColor (rec) {
+        return 'blue'
+    }
+}
+```
+
+All badge will be set as readonly
+
+### Action
+
+Sometimes we want to display the list of actions for record processing, such as Edit/Remove.
+
+```html
+<vue-excel-column field="do" label="Action" type="action" :options="['Edit', 'Remove']" width="100px" :change="doAction" placeholder="Action" />
+```
+
+```js
+methods: {
+    doAction (rec) {
+        if (rec.do === 'Edit')
+            // do Edit process
+        else if (rec.do === 'Remove')
+            // do Remove process
+    }
+}
+```
+
+All action will be set as non-readonly
+
+### Password
+
+For password editing:
+
+```html
+<vue-excel-column type="password" field="pwd" label="Password" width="90px" />
+```
+
+
 ### Localization
 
 The developer may override the default values through localized-label prop.

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -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: null},
+    initStyle: {type: [Object, Function], 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},
+    isLink: {type: Function, default: null},
     format: {type: String, default: 'text'},
     cellClick: {type: Function, default: null},
     autoFillWidth: {type: Boolean, default: false},
@@ -115,7 +116,7 @@ export default {
           case 'password':
             return this.masking.repeat(val?.length || 0)
           case 'action':
-            return this.placeholder || ''
+            return ''
           case 'badge':
             if (this.bgcolor) {
               let bgcolor = this.bgcolor
@@ -234,7 +235,7 @@ export default {
       if (this.textAlign) style.textAlign = this.textAlign
       // if (this.readonly && this.$parent.readonlyStyle) style = Object.assign(style, this.$parent.readonlyStyle)
 
-      this._autocomplete = self.autocomplete
+      this._autocomplete = self.autocomplete || self.type === 'action'
       this._readonly = self.readonly
 
       this.$parent.registerColumn({
@@ -247,6 +248,7 @@ export default {
         validate: validate,
         change: this.change,
         link: this.link,
+        isLink: this.isLink || (this.link ? () => true : null),
         sort: this.sort,
 
         keyField: this.keyField,
@@ -267,6 +269,8 @@ export default {
         initStyle: style,
         invisible: this.invisible,
         get readonly () {
+          if (self.link) return true
+          if (self.type === 'action') return false
           return self._readonly === null ? self.$parent.readonly : self._readonly
         },
         set readonly (val) {
@@ -278,7 +282,11 @@ export default {
         masking: this.masking,
         format: this._format || this.format,
         toValue: this.toValue,
-        toText: this.toText,
+        toText: (...arg) => {
+          const result = this.toText(...arg)
+          if (this.placeholder && result === '') return this.placeholder
+          return result
+        },
         register: this.register,
         placeholder: this.placeholder,
         cellClick: this.cellClick,

src/VueExcelColumn.vue

@@ -115,7 +115,7 @@
                   :class="{
                     readonly: item.readonly,
                     error: errmsg[`id-${record.$id}-${item.name}`],
-                    link: item.link && item.toText(record[item.name]),
+                    link: item.link && item.isLink && item.isLink(record),
                     select: item.options,
                     datepick: item.type == 'date',
                     stickyColumn: item.sticky
@@ -918,6 +918,7 @@ export default defineComponent({
     },
     renderColumnCellStyle (field, record) {
       let result = field.initStyle
+      if (typeof result === 'function') result = result(record, field)
       if (field.readonly) result = Object.assign(result, this.readonlyStyle)
       if (field.left) result.left = field.left
       if (record && field.color)