Media folder management page, android media folder scanner

components/ui/Checkbox.vue

@@ -0,0 +1,71 @@
+<template>
+  <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
+    <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
+      <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? '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 text-gray-100" :class="labelClassname">{{ label }}</div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    label: String,
+    small: Boolean,
+    checkboxBg: {
+      type: String,
+      default: 'white'
+    },
+    borderColor: {
+      type: String,
+      default: 'gray-400'
+    },
+    checkColor: {
+      type: String,
+      default: 'green-500'
+    },
+    labelClass: {
+      type: String,
+      default: ''
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', !!val)
+      }
+    },
+    wrapperClass() {
+      var classes = [`bg-${this.checkboxBg} border-${this.borderColor}`]
+      if (this.small) classes.push('w-4 h-4')
+      else classes.push('w-6 h-6')
+
+      return classes.join(' ')
+    },
+    labelClassname() {
+      if (this.labelClass) return this.labelClass
+      var classes = ['pl-1']
+      if (this.small) classes.push('text-xs md:text-sm')
+      return classes.join(' ')
+    },
+    svgClass() {
+      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: {},
+  mounted() {}
+}
+</script>

components/ui/Dropdown.vue

@@ -3,7 +3,7 @@
     <p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
-        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
+        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <span class="material-icons">expand_more</span>
@@ -37,7 +37,8 @@ export default {
       default: () => []
     },
     disabled: Boolean,
-    small: Boolean
+    small: Boolean,
+    placeholder: String
   },
   data() {
     return {

components/ui/IconBtn.vue

@@ -0,0 +1,80 @@
+<template>
+  <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
+    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+      </svg>
+    </div>
+    <span v-else :class="outlined ? 'material-icons-outlined' : 'material-icons'" :style="{ fontSize }">{{ icon }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: String,
+    disabled: Boolean,
+    bgColor: {
+      type: String,
+      default: 'primary'
+    },
+    outlined: Boolean,
+    borderless: Boolean,
+    loading: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    className() {
+      var classes = []
+      if (!this.borderless) {
+        classes.push(`bg-${this.bgColor} border border-gray-600`)
+      }
+      return classes.join(' ')
+    },
+    fontSize() {
+      if (this.icon === 'edit') return '1.25rem'
+      return '1.4rem'
+    }
+  },
+  methods: {
+    clickBtn(e) {
+      if (this.disabled || this.loading) {
+        e.preventDefault()
+        return
+      }
+      e.preventDefault()
+      this.$emit('click')
+      e.stopPropagation()
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+button.icon-btn:disabled {
+  cursor: not-allowed;
+}
+button.icon-btn::before {
+  content: '';
+  position: absolute;
+  border-radius: 6px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+button.icon-btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+button.icon-btn:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+button.icon-btn:disabled span {
+  color: #777;
+}
+</style>