Merge pull request #18 from Chank1e/chank1e/dropdown

feat: gap dropdown

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 .DS_Store
 dist
+dist_types
 dist-ssr
 *.local
 

docs/guide/dropdown/examples/DropdownPlacementExample.vue

@@ -12,8 +12,19 @@
           </template>
         </Button>
       </template>
-      <div class="p-2">
+      <div class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-        Padding content
+        <a href="#" aria-current="true" class="block w-full px-4 py-2 text-white bg-blue-700 border-b border-gray-200 rounded-t-lg cursor-pointer dark:bg-gray-800 dark:border-gray-600">
+          Profile
+        </a>
+        <a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Settings
+        </a>
+        <a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Messages
+        </a>
+        <a href="#" class="block w-full px-4 py-2 rounded-b-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+          Download
+        </a>
       </div>
     </dropdown>
     <dropdown placement="right" text="Right">

package.json

@@ -5,10 +5,12 @@
   "author": "Ralph Schuler <ralph@inhaus.ai>",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "dist_types"
   ],
   "main": "./dist/flowbite-vue.umd.js",
   "module": "./dist/flowbite-vue.es.js",
+  "typings": "./dist_types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/flowbite-vue.es.js",
@@ -19,15 +21,18 @@
     "dev": "vitepress dev docs",
     "serve": "vitepress serve docs",
     "build:docs": "vitepress build docs",
+    "build:package": "npm run build-types && npm run build",
     "build": "vite build",
     "build-types": "vue-tsc --declaration --emitDeclarationOnly",
     "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
     "format": "prettier .  --write",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3",
+    "tailwindcss": "^3"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
@@ -47,13 +52,12 @@
     "postcss": "^8.4.14",
     "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.3.2",
-    "tailwindcss": "^3.1.4",
     "typescript": "^4.7.3",
     "vite": "^2.4.3",
     "vitepress": "^1.0.0-alpha.4",
     "vitest": "^0.16.0",
     "vue-eslint-parser": "^9.0.3",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.30.0"
   },
   "dependencies": {
     "@vueuse/core": "^8.9.1"

src/components/Dropdown/composables/useDropdownClasses.ts

@@ -5,6 +5,8 @@ import type { DropdownPlacement } from '../types'
 
 const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
 
+const defaultGapInPx = 8
+
 const placementDropdownClasses: Record<DropdownPlacement, string> = {
     bottom: '',
     left: 'top-0',
@@ -20,16 +22,16 @@ export type UseDropdownClassesProps = {
 
 const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
     bottom(rect: DOMRect): string {
-        return `bottom: -${rect.height}px;`
+        return `bottom: -${rect.height + defaultGapInPx}px;`
     },
     left(rect: DOMRect): string {
-        return `left: -${rect.width}px;`
+        return `left: -${rect.width + defaultGapInPx}px;`
     },
     right(rect: DOMRect): string {
-        return `right: -${rect.width}px;`
+        return `right: -${rect.width + defaultGapInPx}px;`
     },
     top(rect: DOMRect): string {
-        return `top: -${rect.height}px;`
+        return `top: -${rect.height + defaultGapInPx}px;`
     },
 
 }

src/components/Tabs/Tabs.vue

@@ -5,10 +5,10 @@
         <tab-pane
             v-for="(item, id) in tabsChildren"
             :key="id"
-            :active="modelValueRef === item.props.name"
+            :active="modelValueRef === item.props?.name"
-            :name="item.props.name"
+            :name="item.props?.name"
-            :disabled="item.props.disabled"
+            :disabled="item.props?.disabled"
-            :title="item.props.title"
+            :title="item.props?.title"
         />
       </ul>
     </div>

src/env.d.ts

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

src/index.ts

@@ -1,8 +1,18 @@
-export { default as Button } from './components/Button/Button.vue'
+import Button from './components/Button/Button.vue'
-export { default as Spinner } from './components/Spinner/Spinner.vue'
+import Spinner from './components/Spinner/Spinner.vue'
-export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
+import ButtonGroup from './components/ButtonGroup/ButtonGroup.vue'
-export { default as Alert } from './components/Alert/Alert.vue'
+import Alert from './components/Alert/Alert.vue'
-export { default as Tabs } from './components/Tabs/Tabs.vue'
+import Tabs from './components/Tabs/Tabs.vue'
-export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
+import Tab from './components/Tabs/components/Tab/Tab.vue'
-export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
+import Dropdown from './components/Dropdown/Dropdown.vue'
-export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+import FlowbiteThemable from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export {
+    Button,
+    Spinner,
+    ButtonGroup,
+    Alert,
+    Tabs,
+    Tab,
+    Dropdown,
+    FlowbiteThemable,
+}

tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
+  "compilerOptions": {
+    "outDir": "dist_types",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",

vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   },
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, './src/index.ts'),
       name: 'flowbite-vue',
     },
     rollupOptions: {