Add:Experimental collapse series for library option #322

client/components/ui/Checkbox.vue

@@ -1,10 +1,10 @@
 <template>
-  <label class="flex justify-start items-start">
-    <div class="bg-white border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500" :class="wrapperClass">
-      <input v-model="selected" type="checkbox" class="opacity-0 absolute" />
-      <svg v-if="selected" class="fill-current text-green-500 pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+  <label class="flex justify-start items-center cursor-pointer">
+    <div class="border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
+      <input v-model="selected" type="checkbox" class="opacity-0 absolute cursor-pointer" />
+      <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
-    <div v-if="label" class="select-none">{{ label }}</div>
+    <div v-if="label" class="select-none pl-1 text-gray-100" :class="labelClass">{{ label }}</div>
   </label>
 </template>
 
@@ -12,8 +12,16 @@
 export default {
   props: {
     value: Boolean,
-    label: Boolean,
-    small: Boolean
+    label: String,
+    small: Boolean,
+    checkboxBg: {
+      type: String,
+      default: 'white'
+    },
+    checkColor: {
+      type: String,
+      default: 'green-500'
+    }
   },
   data() {
     return {}
@@ -28,12 +36,22 @@ export default {
       }
     },
     wrapperClass() {
-      if (this.small) return 'w-4 h-4'
-      return 'w-6 h-6'
+      var classes = [`bg-${this.checkboxBg}`]
+      if (this.small) classes.push('w-4 h-4')
+      else classes.push('w-6 h-6')
+
+      return classes.join(' ')
+    },
+    labelClass() {
+      if (this.small) return 'text-sm'
+      return ''
     },
     svgClass() {
-      if (this.small) return 'w-3 h-3'
-      return 'w-4 h-4'
+      var classes = [`text-${this.checkColor}`]
+      if (this.small) classes.push('w-3 h-3')
+      else classes.push('w-4 h-4')
+
+      return classes.join(' ')
     }
   },
   methods: {},