chore(components): clean and import required components

src/components/elements/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="relative inline-flex items-center justify-center overflow-hidden" :class="avatarClass" @click="goto">
-    <img v-if="url" :src="url" :alt="alt" :class="roundedClass" />
+    <img v-if="url" :src="url" :alt="alt" :class="roundedClass">
     <span v-else-if="gradientPlaceholder" class="w-full h-full" v-html="gradientPlaceholder" />
     <span
       v-else-if="placeholder"

src/components/elements/AvatarGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <TwAvatar
+    <Avatar
       v-for="(avatar, index) of displayedGroup"
       :key="index"
       :src="avatar.src"
@@ -8,7 +8,7 @@
       :size="size"
       :status="avatar.status"
     />
-    <TwAvatar
+    <Avatar
       v-if="remainingGroupSize > 0"
       class="shadow-solid -ml-1.5 first:ml-0 text-[10px]"
       :size="size"
@@ -18,7 +18,12 @@
 </template>
 
 <script>
+import Avatar from './Avatar.vue'
+
 export default {
+  components: {
+    Avatar
+  },
   props: {
     group: {
       type: Array,

src/components/elements/Button.vue

@@ -12,10 +12,12 @@
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from './icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   props: {
     type: {
       type: String,

src/components/elements/Dropdown.vue

@@ -133,10 +133,13 @@
 <script>
 import { createPopper } from '@popperjs/core'
 import { directive as onClickaway } from 'vue-clickaway'
-import Icon from '../elements/icon'
+
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   directives: {
     onClickaway
   },

src/components/elements/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="name" />
+  <div :class="name" />
 </template>
 
 <script>

src/components/elements/Link.vue

@@ -4,7 +4,6 @@
       v-bind="$attrs"
       :href="href"
       :class="isActive ? activeClass : inactiveClass"
-      v-on="$listeners"
       @click="navigate"
     >
       <slot v-bind="{ isActive }" />
@@ -12,7 +11,7 @@
   </NuxtLink>
 </template>
 
-<script lang="ts">
+<script>
 import Vue from 'vue'
 
 const RouterLink = Vue.component('RouterLink')

src/components/elements/Toggle.vue

@@ -51,10 +51,12 @@
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   props: {
     value: {
       type: Boolean,

src/components/feedback/Alert.vue

@@ -23,10 +23,12 @@
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   props: {
     variant: {
       type: String,

src/components/forms/Input.vue

@@ -15,7 +15,7 @@
       ref="input"
       v-focus="autofocus"
       :name="name"
-      :value="value"
+      :value="modelValue"
       :type="type"
       :required="required"
       :placeholder="placeholder"
@@ -44,15 +44,18 @@
 
 <script>
 import Focus from '../../directives/focus'
-import Icon from '../elements/icon'
+
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   directives: {
     focus: Focus
   },
   props: {
-    value: {
+    modelValue: {
       type: [String, Number],
       default: ''
     },
@@ -135,6 +138,7 @@ export default {
       default: false
     }
   },
+  emits: ['update:modelValue', 'focus', 'blur'],
   computed: {
     sizeClass () {
       return ({
@@ -246,7 +250,7 @@ export default {
   },
   methods: {
     updateValue (value) {
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
     }
   }
 }

src/components/forms/RadioGroup.vue

@@ -1,9 +1,11 @@
 <template>
   <fieldset :id="name">
-    <legend v-if="label" class="sr-only">{{ label }}</legend>
+    <legend v-if="label" class="sr-only">
+      {{ label }}
+    </legend>
 
     <div :class="wrapperClass">
-      <TwRadio
+      <Radio
         v-for="(option, index) in options"
         :key="index"
         :checked="option.value === value"
@@ -18,7 +20,12 @@
 </template>
 
 <script>
+import Radio from './Radio'
+
 export default {
+  components: {
+    Radio
+  },
   model: {
     event: 'change'
   },

src/components/forms/Select.vue

@@ -41,12 +41,15 @@
 
 <script>
 import get from 'lodash/get'
-import Icon from '../elements/icon'
+
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   props: {
-    value: {
+    modelValue: {
       type: [String, Number, Object],
       default: ''
     },
@@ -106,6 +109,7 @@ export default {
       default: null
     }
   },
+  emits: ['update:modelValue'],
   computed: {
     sizeClass () {
       return {
@@ -177,7 +181,7 @@ export default {
       return normalizedOptions
     },
     normalizedValue () {
-      const foundOption = this.normalizedOptionsWithPlaceholder.find(option => option.value === this.value)
+      const foundOption = this.normalizedOptionsWithPlaceholder.find(option => option.value === this.modelValue)
       if (!foundOption) {
         return null
       }
@@ -207,7 +211,7 @@ export default {
       }
     },
     updateValue (value) {
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
     }
   }
 }

src/components/forms/SelectCustom.vue

@@ -114,10 +114,13 @@
 import get from 'lodash/get'
 import { createPopper } from '@popperjs/core'
 import { directive as onClickaway } from 'vue-clickaway'
-import Icon from '../elements/icon'
+
+import Icon from '../elements/Icon'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon
+  },
   directives: {
     onClickaway
   },

src/components/forms/Textarea.vue

@@ -5,7 +5,7 @@
       ref="textarea"
       v-focus="autofocus"
       :name="name"
-      :value="value"
+      :value="modelValue"
       :rows="rows"
       :required="required"
       :disabled="disabled"
@@ -25,7 +25,7 @@ export default {
     focus: Focus
   },
   props: {
-    value: {
+    modelValue: {
       type: [String, Number],
       default: ''
     },
@@ -84,6 +84,7 @@ export default {
       default: false
     }
   },
+  emits: ['update:modelValue'],
   computed: {
     sizeClass () {
       return ({
@@ -151,7 +152,7 @@ export default {
       })
     },
     updateValue (value) {
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
     }
   }
 }

src/components/navigation/Pills.vue

@@ -1,21 +1,26 @@
 <template>
   <nav class="flex items-center space-x-1.5">
     <div v-for="(link, index) of links" :key="index">
-      <TwButton
+      <Button
         :size="size"
         :to="link.to"
         :label="link.label"
         :icon="link.icon"
         :variant="isActive(link) ? activeVariant : variant"
         :custom-class="isActive(link) ? activeClass : ''"
-        @click.native="click(link)"
+        @click="click(link)"
       />
     </div>
   </nav>
 </template>
 
 <script>
+import Button from '../elements/Button'
+
 export default {
+  components: {
+    Button
+  },
   props: {
     links: {
       type: Array,

src/components/navigation/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="flex items-center gap-6">
-    <TwLink
+    <Link
       v-for="(link, index) of links"
       :key="index"
       :to="link.to"
@@ -10,12 +10,17 @@
       :inactive-class="inactiveClass"
     >
       {{ link.label }}
-    </TwLink>
+    </Link>
   </nav>
 </template>
 
 <script>
+import Link from '../elements/Link'
+
 export default {
+  components: {
+    Link
+  },
   props: {
     links: {
       type: Array,

src/components/navigation/VerticalNavigation.vue

@@ -10,7 +10,7 @@
     </h3>
 
     <div class="space-y-1">
-      <TwLink
+      <Link
         v-for="link of links"
         v-slot="{ isActive }"
         :key="link.to || link.label"
@@ -52,16 +52,20 @@
             </span>
           </slot>
         </span>
-      </TwLink>
+      </Link>
     </div>
   </nav>
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
+import Link from '../elements/Link'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon,
+    Link
+  },
   props: {
     links: {
       type: Array,

src/components/overlays/Modal.vue

@@ -26,7 +26,7 @@
         @before-leave="contentLeaving = true"
         @after-leave="contentLeaving = false"
       >
-        <TwCard
+        <Card
           v-if="showContent"
           v-bind="$attrs"
           class="z-50 flex flex-col flex-1 w-screen h-screen mx-auto overflow-hidden shadow-xl"
@@ -34,7 +34,6 @@
           variant="white"
           ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
           aria-modal="true"
-          v-on="$listeners"
         >
           <template v-if="$slots.header" #header>
             <slot name="header" />
@@ -60,17 +59,21 @@
           <template v-if="$slots.footer" #footer>
             <slot name="footer" />
           </template>
-        </TwCard>
+        </Card>
       </transition>
     </div>
   </div>
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
+import Card from '../layout/Card'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon,
+    Card
+  },
   props: {
     value: {
       type: Boolean,

src/components/overlays/Notification.vue

@@ -26,7 +26,7 @@
               <p v-if="description" class="mt-1 text-sm leading-5 text-tw-gray-500">
                 {{ description }}
               </p>
-              <TwButton
+              <Button
                 v-if="undo"
                 variant="white"
                 size="xs"
@@ -39,7 +39,7 @@
                     Z
                   </span>
                 </div>
-              </TwButton>
+              </Button>
             </div>
             <div class="flex-shrink-0 ml-4">
               <button
@@ -61,10 +61,14 @@
 </template>
 
 <script>
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
+import Button from '../elements/Button'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon,
+    Button
+  },
   props: {
     id: {
       type: String,

src/components/overlays/Slideover.vue

@@ -22,7 +22,7 @@
           @before-leave="contentLeaving = true"
           @after-leave="contentLeaving = false"
         >
-          <TwCard
+          <Card
             v-if="showContent"
             v-bind="$attrs"
             role="dialog"
@@ -32,7 +32,6 @@
             ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
             variant="white"
             :rounded="false"
-            v-on="$listeners"
           >
             <template v-if="$slots.header" #header>
               <slot name="header" />
@@ -58,7 +57,7 @@
             <template v-if="$slots.footer" #footer>
               <slot name="footer" />
             </template>
-          </TwCard>
+          </Card>
         </transition>
       </section>
     </div>
@@ -68,10 +67,14 @@
 <script>
 import focusLock from 'dom-focus-lock'
 
-import Icon from '../elements/icon'
+import Icon from '../elements/Icon'
+import Card from '../layout/Card'
 
 export default {
-  components: { Icon },
+  components: {
+    Icon,
+    Card
+  },
   props: {
     value: {
       type: Boolean,