Merge branch 'main' into bulk-import-components

.gitignore

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

README.md

@@ -1,8 +1,8 @@
 <div align="center">
-  <h1>:construction: flowbite-vue (unreleased) :construction:</h1>
+  <h1>flowbite-vue</h1>
   <p>
     <a href="https://flowbite.com">
-      <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github.png">
+      <img alt="Flowbite - Tailwind CSS components" width="350" src="./docs/assets/github.png">
     </a>
   </p>
   <p>

docs/.vitepress/config.ts

@@ -63,9 +63,13 @@ function getUtils() {
  * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js
  */
 export default {
-  title: 'Flowbite Vue 3 Components',
+  title: 'Flowbite Vue 3',
+  head: [
+    ['link', { rel: "icon", type: "image/svg", href: "../assets/logo.svg"}],
+  ],
   themeConfig: {
     docsDir: 'docs',
     sidebar: buildSidebar(),
+    logo: '../assets/logo.svg'
   },
 }

docs/assets/logo.svg

@@ -0,0 +1,49 @@
+<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M107.273 56.6245C106.949 58.8577 105.476 61.8916 103.787 64.5294C101.655 67.8577 98.2729 70.1889 94.4018 70.9984L77.3494 74.5642C74.6087 75.1373 72.1235 76.5717 70.2575 78.6575L59.0764 91.1554C56.9751 93.5043 55.5064 92.9441 55.5064 89.7938C55.4809 89.9107 49.9572 104.156 64.5958 112.599C70.2204 115.844 78.3169 114.678 83.9414 111.434L113.743 94.2437C124.889 87.8151 132.758 76.9397 135.373 64.3507C135.477 63.8527 135.557 63.353 135.643 62.8535L107.273 56.6245Z" fill="url(#paint0_linear_3014_5022)"/>
+    <path d="M99.5443 39.4536C105.169 42.6979 107.467 47.5279 107.467 54.0164C107.467 54.8972 107.398 55.7675 107.273 56.6245L119.281 61.7827L135.643 62.8535C137.738 50.7282 133.633 38.2474 126.272 28.3267C120.733 20.861 113.605 14.3822 105.036 9.43957C98.0753 5.42454 90.8417 2.77918 83.5741 1.32764L75.4085 11.902L72.8291 24.0442L99.5443 39.4536Z" fill="url(#paint1_linear_3014_5022)"/>
+    <path d="M3.42839 48.3516C3.42533 48.3612 3.43379 48.364 3.43698 48.3544C4.06708 46.4645 4.85719 44.3561 5.84357 42.1036C10.996 30.3376 20.9252 22.4902 33.1404 18.4891C45.3556 14.4881 58.693 15.8905 69.8258 22.312L72.8287 24.044L83.5737 1.32743C49.3981 -5.49834 14.4695 14.5798 3.47184 48.22C3.46658 48.2361 3.44747 48.2922 3.42839 48.3516Z" fill="url(#paint2_linear_3014_5022)"/>
+    <path d="M82.7739 111.433C77.1493 114.678 70.2195 114.678 64.595 111.433C63.8315 110.993 63.1117 110.498 62.431 109.962L52.5391 116.763L44.0132 130.54C53.4765 138.415 65.7649 140.947 78.0449 139.539C87.2861 138.479 96.4661 135.552 105.035 130.609C111.996 126.594 117.906 121.658 122.798 116.096L117.714 103.744L109.489 96.0239L82.7739 111.433Z" fill="url(#paint3_linear_3014_5022)"/>
+    <path d="M62.4312 109.961C58.0977 106.548 55.5058 101.312 55.5058 95.7048V95.1455V48.4415C55.5058 45.8003 56.284 45.3514 58.5735 46.672C55.0472 44.638 46.9007 37.6553 36.8421 43.4572C31.2176 46.7015 26.5859 53.8628 26.5859 60.3513V94.731C26.5859 107.588 33.2454 121 42.8503 129.558C43.2303 129.896 43.6236 130.215 44.0133 130.54L62.4312 109.961Z" fill="url(#paint4_linear_3014_5022)"/>
+    <path d="M122.108 23.2417C122.101 23.2343 122.095 23.2402 122.101 23.2477C123.424 24.7379 124.857 26.4757 126.316 28.4553C133.94 38.7963 136.788 51.8936 134.149 64.4628C131.509 77.032 123.625 87.8703 112.492 94.2918L109.489 96.0239L122.798 116.096C145.803 89.9399 145.862 49.6804 122.2 23.3451C122.189 23.3325 122.15 23.2879 122.108 23.2417Z" fill="url(#paint5_linear_3014_5022)"/>
+    <path d="M27.753 60.3516C27.753 53.863 31.2179 47.8674 36.8424 44.6231C37.6059 44.1827 38.395 43.8076 39.2001 43.4866L38.2508 31.5276L31.5814 17.8452C20.0231 22.0952 10.6737 30.8785 5.75434 42.2073C2.0523 50.7327 4.284e-05 60.139 0 70.0242C0 78.0543 1.32365 85.6355 3.6992 92.6493L16.9484 94.427L27.753 91.1704V60.3516V60.3516Z" fill="url(#paint6_linear_3014_5022)"/>
+    <path d="M39.2002 43.4865C44.3259 41.4439 50.1603 41.8191 55.0213 44.623L55.5062 44.9026L94.4234 67.3503C97.1535 68.925 96.9054 70.4745 93.8198 71.1196L96.0648 70.6502C99.019 70.0325 101.718 68.5228 103.782 66.3228C107.33 62.5402 108.633 57.9765 108.633 54.016C108.633 47.5275 105.168 41.5319 99.5439 38.2877L69.7419 21.0978C58.5966 14.6691 45.2347 13.2983 33.0142 17.3298C32.5308 17.4892 32.0576 17.67 31.5815 17.8451L39.2002 43.4865Z" fill="url(#paint7_linear_3014_5022)"/>
+    <path d="M84.5346 138.479C84.5444 138.477 84.5426 138.468 84.5327 138.47C82.5794 138.87 80.3567 139.241 77.9109 139.514C65.1353 140.939 52.3579 136.855 42.7819 128.286C33.206 119.718 27.753 107.477 27.753 94.6346L27.753 91.1704L3.69922 92.6492C14.8701 125.631 49.7391 145.812 84.3987 138.507C84.4153 138.504 84.4735 138.492 84.5346 138.479Z" fill="url(#paint8_linear_3014_5022)"/>
+    <defs>
+        <linearGradient id="paint0_linear_3014_5022" x1="87.7629" y1="103.994" x2="101.533" y2="56.03" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#049253"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_3014_5022" x1="119.479" y1="45.5016" x2="83.2555" y2="9.40562" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#40B983"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_3014_5022" x1="70.7197" y1="21.9675" x2="16.0753" y2="25.4205" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#40B983"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint3_linear_3014_5022" x1="67.0235" y1="125.399" x2="116.097" y2="112.157" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#40B983"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint4_linear_3014_5022" x1="31.8005" y1="68.6116" x2="66.6415" y2="104.714" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#049253"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint5_linear_3014_5022" x1="111.345" y1="94.656" x2="135.655" y2="45.6511" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#40B983"/>
+            <stop offset="1" stop-color="#40B983"/>
+        </linearGradient>
+        <linearGradient id="paint6_linear_3014_5022" x1="23.4669" y1="39.948" x2="10.4586" y2="88.8411" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#19A466"/>
+            <stop offset="1" stop-color="#50BD8C"/>
+        </linearGradient>
+        <linearGradient id="paint7_linear_3014_5022" x1="89.876" y1="37.6223" x2="42.3399" y2="49.4578" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#049252"/>
+            <stop offset="1" stop-color="#19A466"/>
+        </linearGradient>
+        <linearGradient id="paint8_linear_3014_5022" x1="28.0295" y1="93.4354" x2="58.3298" y2="139.014" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4FBD8C"/>
+            <stop offset="1" stop-color="#40B983" stop-opacity="0.6"/>
+        </linearGradient>
+    </defs>
+</svg>

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,13 @@
     "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",
+    "tailwindcss": "^3"
   },
   "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

@@ -6,8 +6,6 @@ export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
 export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
-
-
 export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as Badge } from './components/Badge/Badge.vue'

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: {