feat: New Dropdown component

ChrisGV04 · Feb 16, 2024 · 2e4f8e6 · 2e4f8e6
1 parent c976fda
commit 2e4f8e6
Show file tree

Hide file tree

Showing 12 changed files with 551 additions and 289 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/docs/components/TheHeader.vue b/docs/components/TheHeader.vue
@@ -1,61 +1,53 @@
 <script setup lang="ts">
-import { UiIcon } from "#components";
-import { useId, useRuntimeConfig } from "#imports";
-import {
-  Popover,
-  PopoverButton,
-  PopoverGroup,
-  PopoverPanel,
-  provideUseId,
-} from "@headlessui/vue";
-import type { RouteLocationRaw } from "vue-router";
+import { UiIcon } from '#components';
+import { useId, useRuntimeConfig } from '#imports';
+import { Popover, PopoverButton, PopoverGroup, PopoverPanel, provideUseId } from '@headlessui/vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 interface NavigationItem {
   name: string;
   route?: RouteLocationRaw;
-  children?: Omit<NavigationItem, "children">[];
+  children?: Omit<NavigationItem, 'children'>[];
 }
 
 const env = useRuntimeConfig();
 provideUseId(() => useId());
 
 const navigation: NavigationItem[] = [
   {
-    name: "Elements",
+    name: 'Elements',
     children: [
-      { name: "Badge", route: "/badge" },
-      { name: "Icon", route: "/icon" },
-      { name: "Link", route: "/link" },
-      { name: "Button", route: "/button" },
-      { name: "Highlights", route: "/highlights" },
+      { name: 'Badge', route: '/badge' },
+      { name: 'Icon', route: '/icon' },
+      { name: 'Link', route: '/link' },
+      { name: 'Button', route: '/button' },
+      { name: 'Highlights', route: '/highlights' },
+      { name: 'Dropdown Menu', route: '/dropdown' },
     ],
   },
   {
-    name: "Data",
-    children: [{ name: "Rich Text", route: "/rich-text" }],
+    name: 'Data',
+    children: [{ name: 'Rich Text', route: '/rich-text' }],
   },
   {
-    name: "Layout",
-    children: [{ name: "Marquee", route: "/marquee" }],
+    name: 'Layout',
+    children: [{ name: 'Marquee', route: '/marquee' }],
   },
   {
-    name: "Overlays",
+    name: 'Overlays',
     children: [
-      { name: "Dialog", route: "/dialog" },
-      { name: "Slideover", route: "/slideover" },
-      { name: "Tooltip", route: "/tooltip" },
-      { name: "Breakpoint Viewer", route: "/breakpoints" },
+      { name: 'Dialog', route: '/dialog' },
+      { name: 'Slideover', route: '/slideover' },
+      { name: 'Tooltip', route: '/tooltip' },
+      { name: 'Breakpoint Viewer', route: '/breakpoints' },
     ],
   },
 ];
 </script>
 
 <template>
   <header class="border-b border-gray-900/10 bg-white">
-    <nav
-      aria-label="Global"
-      class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
-    >
+    <nav aria-label="Global" class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
       <div class="flex lg:flex-1">
         <NuxtLink to="/">
           <span class="text-lg font-semibold text-gray-900">CGV WEB UI</span>
@@ -64,43 +56,19 @@ const navigation: NavigationItem[] = [
 
       <PopoverGroup class="hidden lg:flex lg:gap-x-12">
         <template v-for="item in navigation" :key="item.name">
-          <NuxtLink
-            v-if="item.route"
-            :to="item.route"
-            class="text-sm font-semibold leading-6 text-gray-900"
-          >
+          <NuxtLink v-if="item.route" :to="item.route" class="text-sm font-semibold leading-6 text-gray-900">
             {{ item.name }}
           </NuxtLink>
 
           <Popover v-if="item.children" v-slot="{ close }" class="relative">
-            <PopoverButton
-              class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900"
-            >
+            <PopoverButton class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
               {{ item.name }}
-              <UiIcon
-                name="i-heroicons-chevron-down-20-solid"
-                class="h-5 w-5 flex-none text-gray-400"
-              />
+              <UiIcon name="i-heroicons-chevron-down-20-solid" class="h-5 w-5 flex-none text-gray-400" />
             </PopoverButton>
 
-            <Transition
-              enter-active-class="transition ease-out duration-200"
-              enter-from-class="opacity-0 translate-y-1"
-              enter-to-class="opacity-100 translate-y-0"
-              leave-active-class="transition ease-in duration-150"
-              leave-from-class="opacity-100 translate-y-0"
-              leave-to-class="opacity-0 translate-y-1"
-            >
-              <PopoverPanel
-                class="absolute -left-8 top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5"
-              >
-                <NuxtLink
-                  v-for="child in item.children"
-                  :key="child.name"
-                  :to="child.route"
-                  class="block rounded-lg px-3 py-2 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50"
-                  @click="close"
-                >
+            <Transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
+              <PopoverPanel class="absolute -left-8 top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
+                <NuxtLink v-for="child in item.children" :key="child.name" :to="child.route" class="block rounded-lg px-3 py-2 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50" @click="close">
                   {{ child.name }}
                 </NuxtLink>
               </PopoverPanel>
@@ -109,9 +77,7 @@ const navigation: NavigationItem[] = [
         </template>
       </PopoverGroup>
 
-      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-        v{{ env.public.version }}
-      </div>
+      <div class="hidden lg:flex lg:flex-1 lg:justify-end">v{{ env.public.version }}</div>
     </nav>
   </header>
 </template>
diff --git a/docs/pages/dropdown.vue b/docs/pages/dropdown.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { UiButton, UiContainer, UiDropdown } from '#components';
+import type { DropdownItem } from '#ui/types';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+const demoItems: DropdownItem[][] = [
+  [
+    { label: 'Profile', icon: 'i-heroicons-user' },
+    { label: 'Billing', icon: 'i-heroicons-credit-card' },
+    { label: 'Settings', icon: 'i-heroicons-cog-6-tooth' },
+  ],
+  [
+    { label: 'Teams', icon: 'i-heroicons-users' },
+    { label: 'New Team', icon: 'i-heroicons-plus', disabled: true },
+  ],
+];
+</script>
+
+<template>
+  <UiContainer class="py-8">
+    <h1 class="demo-page-title">Dropdown menu</h1>
+    <p class="demo-page-description">
+      Displays a menu to the user with a set of links or actions after being triggered.
+    </p>
+
+    <div class="demo-category-container mt-4">
+      <span class="demo-category-title">Controlled component (isOpen: {{ isOpen }})</span>
+
+      <div class="mt-2 flex items-center gap-4">
+        <UiDropdown v-model:open="isOpen" :items="demoItems">
+          <UiButton label="Menu" trailing-icon="i-heroicons-bars-3-16-solid" />
+        </UiDropdown>
+        <UiButton variant="white-solid" label="Open from external" @click="isOpen = true" />
+      </div>
+    </div>
+
+    <div class="demo-category-container mt-4">
+      <span class="demo-category-title">Uncontrolled</span>
+
+      <div class="mt-2 flex items-center gap-4">
+        <UiDropdown :items="demoItems" label="My Account">
+          <UiButton label="Options" variant="white-solid" trailing-icon="i-heroicons-chevron-down-16-solid" />
+        </UiDropdown>
+      </div>
+    </div>
+  </UiContainer>
+</template>
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
   },
   "peerDependencies": {
     "@headlessui/vue": "^1.7.0",
-    "@vueuse/core": "^10"
+    "@vueuse/core": "^10",
+    "radix-vue": "^1.4.6"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.7.4",
@@ -46,6 +47,7 @@
     "just-omit": "^2.2.0",
     "just-safe-get": "^4.2.0",
     "nuxt-icon": "^0.6.8",
+    "tailwindcss-animate": "^1.0.7",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1"
   },
@@ -63,6 +65,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "nuxt": "^3.10.2",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "radix-vue": "^1.4.6",
     "release-it": "^17.0.3",
     "vue-tsc": "^1.8.27"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/prettier.config.cjs b/prettier.config.cjs
@@ -0,0 +1,14 @@
+/** @type {import("prettier").Options} */
+const config = {
+  semi: true,
+  tabWidth: 2,
+  useTabs: false,
+  printWidth: 110,
+  endOfLine: 'auto',
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSameLine: false,
+  plugins: ['prettier-plugin-tailwindcss'],
+};
+
+module.exports = config;