Add: experimental match tab with google books search #59, Add: isbn field for books #59

client/components/ui/Checkbox.vue

@@ -0,0 +1,33 @@
+<template>
+  <label class="flex justify-start items-start">
+    <div class="bg-white border-2 rounded border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
+      <input v-model="selected" type="checkbox" class="opacity-0 absolute" />
+      <svg v-if="selected" class="fill-current w-4 h-4 text-green-500 pointer-events-none" 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>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    label: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', !!val)
+      }
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/ui/Dropdown.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutside">
-    <p class="text-sm text-opacity-75 mb-1">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative h-10 w-full border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <p class="text-sm font-semibold">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border border-gray-500 rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" :class="small ? 'h-9' : 'h-10'" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
-        <span class="block truncate">{{ selectedText }}</span>
+        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <span class="material-icons text-gray-100">expand_more</span>
@@ -36,7 +36,8 @@ export default {
       type: Array,
       default: () => []
     },
-    disabled: Boolean
+    disabled: Boolean,
+    small: Boolean
   },
   data() {
     return {

client/components/ui/TextInput.vue

@@ -80,6 +80,7 @@ input {
   border-style: inherit !important;
 }
 input:read-only {
+  color: #aaa;
   background-color: #444;
 }
 </style>

client/components/ui/TextInputWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">
       {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
     </p>
     <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full" />

client/components/ui/TextareaInput.vue

@@ -38,10 +38,11 @@ export default {
 </script>
 
 <style scoped>
-input {
+textarea {
   border-style: inherit !important;
 }
-input:read-only {
-  background-color: #eee;
+textarea:read-only {
+  color: #aaa;
+  background-color: #444;
 }
 </style>

client/components/ui/TextareaWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">{{ label }}</p>
-    <ui-textarea-input v-model="inputValue" :rows="rows" class="w-full" />
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
+    <ui-textarea-input v-model="inputValue" :disabled="disabled" :rows="rows" class="w-full" />
   </div>
 </template>
 
@@ -10,6 +10,7 @@ export default {
   props: {
     value: [String, Number],
     label: String,
+    disabled: Boolean,
     rows: {
       type: Number,
       default: 2