chore: init

src/components/Footer.vue

@@ -0,0 +1,31 @@
+
+<template>
+  <div
+    class="text-xl mt-4"
+  >
+    <div
+      class="inline-block mx-2 cursor-pointer select-none"
+      @click="isDark = !isDark"
+    >
+      <Icon
+        class="inline-block"
+        :icon="isDark ? 'carbon:moon' : 'carbon:sun'"
+      />
+    </div>
+
+    <a
+      class="mx-2"
+      href="https://github.com/antfu/vitesse"
+      target="_blank"
+    >
+      <Icon
+        class="inline-block"
+        icon="carbon:code"
+      />
+    </a>
+  </div>
+</template>
+
+<script setup lang='ts'>
+export { isDark } from '../utils/dark'
+</script>

src/components/Icon.vue

@@ -0,0 +1,49 @@
+<template>
+  <div ref="el" :class="$attrs.class" style="vertical-align: text-bottom" />
+</template>
+
+<script setup="props" lang="ts">
+import { watch, ref, onMounted, nextTick } from 'vue'
+
+declare const props: {
+  icon: string
+}
+
+export const el = ref<HTMLElement | null>(null)
+
+const update = async() => {
+  if (el.value) {
+    await nextTick()
+    // @ts-ignore
+    const data = window.Iconify.getSVGObject(props.icon)
+    if (data) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      for (const key of Object.keys(data.attributes))
+        svg.setAttribute(key, data.attributes[key])
+      svg.innerHTML = data ? data.body : null
+      el.value.textContent = ''
+      el.value.appendChild(svg)
+    }
+    else {
+      const span = document.createElement('span')
+      span.className = 'iconify'
+      span.dataset.icon = props.icon
+      el.value.textContent = ''
+      el.value.appendChild(span)
+    }
+  }
+}
+
+watch(() => props.icon, update, { flush: 'post' })
+
+onMounted(update)
+</script>
+
+<style>
+span.iconify {
+  background: #5551;
+  border-radius: 100%;
+  min-width: 10px;
+  min-height: 1em;
+}
+</style>

src/components/Modal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="fixed top-0 bottom-0 left-0 right-0 z-40"
+    :class="value ? '': 'pointer-events-none'"
+  >
+    <div
+      class="bg-white bg-opacity-85 bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out"
+      :class="value ? '': 'opacity-0'"
+      @click="$emit('update:value', false)"
+    />
+    <div
+      class="bg-white absolute transition-all duration-200 ease-out border-gray-200"
+      :class="positionClass"
+      :style="value ? {}: {transform}"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup="props" lang="ts">
+import { computed } from 'vue'
+
+declare const props: {
+  value?: boolean
+  direction?: 'bottom' | 'top' | 'left' | 'right'
+}
+
+const defaultDirection = 'bottom'
+
+export const positionClass = computed(() => {
+  switch (props.direction || defaultDirection) {
+    case 'bottom':
+      return 'bottom-0 left-0 right-0 border-t'
+    case 'top':
+      return 'top-0 left-0 right-0 border-b'
+    case 'left':
+      return 'bottom-0 left-0 top-0 border-r'
+    case 'right':
+      return 'bottom-0 top-0 right-0 border-l'
+  }
+})
+
+export const transform = computed(() => {
+  switch (props.direction || defaultDirection) {
+    case 'bottom':
+      return 'translateY(100%)'
+    case 'top':
+      return 'translateY(-100%)'
+    case 'left':
+      return 'translateX(-100%)'
+    case 'right':
+      return 'translateX(100%)'
+  }
+})
+</script>

src/components/index.ts

@@ -0,0 +1,12 @@
+import { Plugin } from 'vue'
+import Modal from './Modal.vue'
+import Icon from './Icon.vue'
+import Footer from './Footer.vue'
+
+export const registerComponents: Plugin = {
+  install(app) {
+    app.component('Modal', Modal)
+    app.component('Icon', Icon)
+    app.component('Footer', Footer)
+  },
+}