Item-based style

Author: geekhybrid

dev/serve.vue

@@ -119,4 +119,13 @@ button {
   background: blue !important;
 }
 
+.red-background {
+  background: black !important;
+  color: white;
+}
+
+.bold-font {
+  font-weight: bold !important;
+}
+
 </style>

dev/tree.json

@@ -2,6 +2,7 @@
   {
     "name": "Rejection Emails",
     "type": "emails",
+    "styles": ["red-background", "bold-font"],
     "expanded": true,
     "children": [
       {

src/tree-item.ts

@@ -51,6 +51,19 @@ export default defineComponent({
             }
         });
 
+        const styles = computed(() => {
+    
+            var style: Record<string, boolean | undefined> = {
+                'selected-tree-item': !props.isCheckable && props.item.selected
+            }
+
+            if (props.item.styles) {
+                props.item.styles.forEach(s => style[s] = true)
+            }
+
+            return style;
+        });
+
         const updateCheckState = () =>  {
           if (checkbox.value) {
             props.item.checked = checkbox.value.checked;
@@ -122,6 +135,7 @@ export default defineComponent({
         }
 
         return {
+            styles,
             checkbox,
             parent,
             treeState,

src/tree-item.vue

@@ -8,7 +8,7 @@
       </slot>
     </div>
 
-    <div class="pointer tree-item" :class="{ 'selected-tree-item': !isCheckable && item.selected }" style="width: 100%">
+    <div class="pointer tree-item" :class="styles" style="width: 100%">
       <div v-if="!isRenaming" @dblclick="beginRenaming">
         <div v-if="isCheckable" class="tree-item__checkbox-area">
           <input @contextmenu.prevent @change="updateCheckState" type="checkbox" ref="checkbox" :disabled="item.disabled" :class="checkboxStyle" />

src/types.ts

@@ -7,6 +7,7 @@ export interface TreeViewItem {
   expanded?: boolean;
   disabled?: boolean;
   disableDragAndDrop?: boolean;
+  styles?: string[];
   meta?: any;
 }