chore: clean components

src/components/elements/Avatar.vue

@@ -70,7 +70,7 @@ export default {
       type: String,
       default: null,
       validator (value) {
-        return ['online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
+        return [null, 'online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
       }
     }
   },

src/components/forms/SelectCustom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" v-on-clickaway="close">
+  <div ref="container">
     <input :value="value" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default">
 
     <slot :toggle="toggle" :open="open">
@@ -113,7 +113,7 @@
 <script>
 import get from 'lodash/get'
 import { createPopper } from '@popperjs/core'
-import { directive as onClickaway } from 'vue-clickaway'
+// import { directive as onClickaway } from 'vue-clickaway'
 
 import Icon from '../elements/Icon'
 
@@ -121,9 +121,9 @@ export default {
   components: {
     Icon
   },
-  directives: {
-    onClickaway
-  },
+  // directives: {
+  //   onClickaway
+  // },
   shortcuts: {
     disabled () {
       return !this.open

src/components/forms/Textarea.vue

@@ -3,7 +3,6 @@
     <textarea
       :id="name"
       ref="textarea"
-      v-focus="autofocus"
       :name="name"
       :value="modelValue"
       :rows="rows"
@@ -18,12 +17,12 @@
 </template>
 
 <script>
-import Focus from '../../directives/focus'
+// import Focus from '../../directives/focus'
 
 export default {
-  directives: {
-    focus: Focus
-  },
+  // directives: {
+  //   focus: Focus
+  // },
   props: {
     modelValue: {
       type: [String, Number],

src/components/layout/Card.vue

@@ -1,9 +1,10 @@
 <template>
   <component
-    :is="$attrs && $attrs.submit ? 'form': 'div'"
+    :is="$attrs.onSubmit ? 'form': 'div'"
     :class="[padded && rounded && 'rounded-md', !padded && rounded && 'sm:rounded-md', wrapperClass, ringClass, shadowClass, backgroundClass]"
-    @submit.prevent="$attrs && $attrs.submit ? $attrs.submit() : null"
+    v-bind="$attrs"
   >
+    {{ $attrs }}
     <div
       v-if="$slots.header"
       :class="[headerClass, headerBackgroundClass, borderColorClass, !!$slots.default && 'border-b']"
@@ -77,6 +78,9 @@ export default {
       type: String,
       default: 'border-gray-200 dark:border-gray-700'
     }
+  },
+  setup (props, { attrs }) {
+    console.log('attrs', attrs)
   }
 }
 </script>

src/components/overlays/Popover.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="container"
-    v-on-clickaway="onClickaway"
     class="inline whitespace-normal"
     @mouseover="mode === 'hover' ? mouseover() : () => {}"
     @mouseleave="mode === 'hover' ? mouseleave() : () => {}"
@@ -18,7 +17,7 @@
         leave-to-class="opacity-0"
       >
         <div
-          v-if="show && ready && $scopedSlots.content"
+          v-if="show && ready && $slots.content"
           ref="popover"
           class="z-30 flex bg-white rounded-md shadow ring-1 ring-gray-200 dark:ring-gray-700"
           :class="[
@@ -38,12 +37,12 @@
 
 <script>
 import { createPopper } from '@popperjs/core'
-import { directive as onClickaway } from 'vue-clickaway'
+// import { directive as onClickaway } from 'vue-clickaway'
 
 export default {
-  directives: {
-    onClickaway
-  },
+  // directives: {
+  //   onClickaway
+  // },
   props: {
     darken: {
       type: Boolean,

src/components/overlays/Slideover.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import focusLock from 'dom-focus-lock'
+// import focusLock from 'dom-focus-lock'
 
 import Icon from '../elements/Icon'
 import Card from '../layout/Card'
@@ -164,7 +164,7 @@ export default {
   },
   beforeDestroy () {
     if (this.lock) {
-      focusLock.off(this.$refs.container)
+      // focusLock.off(this.$refs.container)
       this.lock = false
     }
   },
@@ -183,7 +183,7 @@ export default {
       document.activeElement?.blur()
       this.$nextTick(() => {
         if (this.$refs.container && !this.lock) {
-          focusLock.on(this.$refs.container)
+          // focusLock.on(this.$refs.container)
           this.lock = true
         }
       })
@@ -192,7 +192,7 @@ export default {
       this.showBackdrop = false
       this.showContent = false
       if (this.lock) {
-        focusLock.off(this.$refs.container)
+        // focusLock.off(this.$refs.container)
         this.lock = false
       }
     },

src/components/overlays/Tooltip.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div ref="container" v-on-clickaway="close" @mouseover="mouseover" @mouseleave="mouseleave">
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave">
     <slot />
 
     <transition
@@ -44,12 +44,12 @@
 
 <script>
 import { createPopper } from '@popperjs/core'
-import { directive as onClickaway } from 'vue-clickaway'
+// import { directive as onClickaway } from 'vue-clickaway'
 
 export default {
-  directives: {
-    onClickaway
-  },
+  // directives: {
+  //   onClickaway
+  // },
   props: {
     text: {
       type: String,