WIP: initial setup with vite and vitepress, example with button

src/components/Button/Button.vue

@@ -0,0 +1,29 @@
+<template>
+  <button type="button" :class="buttonVariantClasses[variant]">
+    <slot />
+  </button>
+</template>
+<script lang="ts" setup>
+import { PropType } from "vue";
+
+export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
+
+defineProps({
+  variant: {
+    type: String as PropType<ButtonVariant>,
+    default: 'default',
+  }
+})
+
+const buttonVariantClasses: Record<ButtonVariant, string[]> = {
+  default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
+  alternative: 'py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
+  dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
+  light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
+  green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
+  red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
+  yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900'.split(' '),
+  purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
+}
+
+</script>

src/components/Dropdown.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const props = defineProps({
-  autoClose: {
-    type: Boolean,
-    default: true,
-  },
-  fixed: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const isVisible = ref(false);
-const dropdown = ref(null);
-
-function toggle() {
-  isVisible.value = !isVisible.value;
-  if (isVisible.value && props.autoClose) {
-    document.addEventListener("click", handleClickOutside);
-  } else {
-    document.removeEventListener("click", handleClickOutside);
-  }
-}
-
-function handleClickOutside(event: MouseEvent) {
-  if (event.target instanceof HTMLElement) {
-    const target = event.target as HTMLElement;
-    const self = dropdown.value as unknown as HTMLElement;
-    if (self && (self.contains(target) || self === target)) {
-      return;
-    }
-  }
-  toggle();
-}
-</script>
-
-<template>
-  <div ref="dropdown">
-    <slot name="trigger" :toggle="toggle" :is-visible="isVisible" />
-    <div
-      :class="{
-        fixed: fixed,
-      }"
-    >
-      <slot :is-visible="isVisible" />
-    </div>
-  </div>
-</template>

src/components/index.ts

@@ -1 +0,0 @@
-export * as Accordion from './Accordion.vue';

src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/index.ts

@@ -1,12 +1 @@
-import type { App } from 'vue'
-import * as components from './components'
-
-export type ObjectKey = keyof typeof components;
-
-export default {
-    install(app: App, options: any) {
-        Object.keys(components).forEach(component => {
-            app.component(component, components[component as ObjectKey])
-        })
-    }
-}
+export { default as Button } from './components/Button/Button.vue'