feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

src/runtime/components/overlays/Tooltip.vue

@@ -1,19 +1,19 @@
 <template>
-  <div ref="trigger" :class="wrapperClass" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="ui.wrapper" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
-      Hover me
+      hover
     </slot>
 
-    <div v-if="open && !prevent" ref="container" :class="[containerClass, widthClass]">
-      <transition appear v-bind="transitionClass">
-        <div :class="[baseClass, backgroundClass, roundedClass, shadowClass, ringClass]">
+    <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
+      <transition appear v-bind="ui.transition">
+        <div :class="[ui.base, ui.background, ui.rounded, ui.shadow, ui.ring]">
           <slot name="text">
             {{ text }}
           </slot>
 
-          <span v-if="shortcuts?.length" :class="shortcutsClass">
-            <span class="mr-1 u-text-gray-700">&middot;</span>
-            <kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] u-bg-gray-100 rounded u-text-gray-900">
+          <span v-if="shortcuts?.length" :class="ui.shortcuts">
+            <span class="mr-1 text-gray-700 dark:text-gray-200">&middot;</span>
+            <kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] bg-gray-100 dark:bg-gray-800 rounded text-gray-900 dark:text-white">
               {{ shortcut }}
             </kbd>
           </span>
@@ -23,125 +23,108 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
+import { computed, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { computed, ref } from 'vue'
 import { defu } from 'defu'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
-import $ui from '#build/ui'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: null
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    text: {
+      type: String,
+      default: null
+    },
+    prevent: {
+      type: Boolean,
+      default: false
+    },
+    shortcuts: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
+    popper: {
+      type: Object as PropType<PopperOptions>,
+      default: () => ({})
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.tooltip>>,
+      default: () => appConfig.ui.tooltip
+    }
   },
-  prevent: {
-    type: Boolean,
-    default: false
-  },
-  shortcuts: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  wrapperClass: {
-    type: String,
-    default: () => $ui.tooltip.wrapper
-  },
-  containerClass: {
-    type: String,
-    default: () => $ui.tooltip.container
-  },
-  widthClass: {
-    type: String,
-    default: () => $ui.tooltip.width
-  },
-  backgroundClass: {
-    type: String,
-    default: () => $ui.tooltip.background
-  },
-  shadowClass: {
-    type: String,
-    default: () => $ui.tooltip.shadow
-  },
-  ringClass: {
-    type: String,
-    default: () => $ui.tooltip.ring
-  },
-  roundedClass: {
-    type: String,
-    default: () => $ui.tooltip.rounded
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.tooltip.base
-  },
-  transitionClass: {
-    type: Object,
-    default: () => $ui.tooltip.transition
-  },
-  popperOptions: {
-    type: Object as PropType<PopperOptions>,
-    default: () => ({})
-  },
-  shortcutsClass: {
-    type: String,
-    default: () => $ui.tooltip.shortcuts
-  },
-  openDelay: {
-    type: Number,
-    default: 0
-  },
-  closeDelay: {
-    type: Number,
-    default: 0
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defu({}, props.ui, appConfig.ui.tooltip))
+
+    const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
+
+    const [trigger, container] = usePopper(popper.value)
+
+    const open = ref(false)
+
+    let openTimeout: NodeJS.Timeout | null = null
+    let closeTimeout: NodeJS.Timeout | null = null
+
+    // Methods
+
+    function onMouseOver () {
+      // cancel programmed closing
+      if (closeTimeout) {
+        clearTimeout(closeTimeout)
+        closeTimeout = null
+      }
+      // dropdown already open
+      if (open.value) {
+        return
+      }
+      openTimeout = openTimeout || setTimeout(() => {
+        open.value = true
+        openTimeout = null
+      }, props.openDelay)
+    }
+
+    function onMouseLeave () {
+      // cancel programmed opening
+      if (openTimeout) {
+        clearTimeout(openTimeout)
+        openTimeout = null
+      }
+      // dropdown already closed
+      if (!open.value) {
+        return
+      }
+      closeTimeout = closeTimeout || setTimeout(() => {
+        open.value = false
+        closeTimeout = null
+      }, props.closeDelay)
+    }
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      trigger,
+      container,
+      open,
+      onMouseOver,
+      onMouseLeave
+    }
   }
 })
-
-const popperOptions = computed<PopperOptions>(() => defu({}, props.popperOptions, $ui.tooltip.popperOptions))
-
-const [trigger, container] = usePopper(popperOptions.value)
-
-const open = ref(false)
-
-let openTimeout: NodeJS.Timeout | null = null
-let closeTimeout: NodeJS.Timeout | null = null
-
-// Methods
-
-function onMouseOver () {
-  // cancel programmed closing
-  if (closeTimeout) {
-    clearTimeout(closeTimeout)
-    closeTimeout = null
-  }
-  // dropdown already open
-  if (open.value) {
-    return
-  }
-  openTimeout = openTimeout || setTimeout(() => {
-    open.value = true
-    openTimeout = null
-  }, props.openDelay)
-}
-
-function onMouseLeave () {
-  // cancel programmed opening
-  if (openTimeout) {
-    clearTimeout(openTimeout)
-    openTimeout = null
-  }
-  // dropdown already closed
-  if (!open.value) {
-    return
-  }
-  closeTimeout = closeTimeout || setTimeout(() => {
-    open.value = false
-    closeTimeout = null
-  }, props.closeDelay)
-}
-</script>
-
-<script lang="ts">
-export default { name: 'UTooltip' }
 </script>