├── .prettierignore ├── .vscode └── extensions.json ├── src ├── assets │ └── logo.png ├── main.ts ├── env.d.ts ├── App.vue ├── components │ └── HelloWorld.vue └── vue-floating-ui.ts ├── postcss.config.js ├── tailwind.config.js ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── vite.config.ts ├── LICENSE ├── package.json └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/allindevelopers/vue-floating-ui/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import "tailwindcss/tailwind.css"; 2 | import { createApp } from "vue"; 3 | import App from "./App.vue"; 4 | 5 | createApp(App).mount("#app"); 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module "*.vue" { 4 | import type { DefineComponent } from "vue"; 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any>; 7 | export default component; 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import * as path from "path"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue()], 8 | build: { 9 | lib: { 10 | formats: ["es", "cjs"], 11 | entry: path.resolve(__dirname, "src/vue-floating-ui.ts"), 12 | fileName: (format) => `vue-floating-ui.${format}.js`, 13 | }, 14 | rollupOptions: { 15 | external: ["vue", "@floating-ui/core", "@floating-ui/dom"], 16 | }, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 All In Developers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 35 | 36 | 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@allindevelopers/vue-floating-ui", 3 | "description": "Vue implementation of @floating-ui/react-dom", 4 | "version": "1.1.1", 5 | "license": "MIT", 6 | "author": "Andrew Luca (https://iamandrewluca.com)", 7 | "sideEffects": false, 8 | "keywords": [ 9 | "tooltip", 10 | "popover", 11 | "dropdown", 12 | "menu", 13 | "popup", 14 | "positioning", 15 | "vue" 16 | ], 17 | "files": [ 18 | "dist" 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/allindevelopers/vue-floating-ui.git" 23 | }, 24 | "bugs": "https://github.com/allindevelopers/vue-floating-ui/issues", 25 | "types": "./dist/vue-floating-ui.d.ts", 26 | "main": "./dist/vue-floating-ui.cjs.js", 27 | "module": "./dist/vue-floating-ui.es.js", 28 | "exports": { 29 | ".": { 30 | "import": "./dist/vue-floating-ui.es.js", 31 | "require": "./dist/vue-floating-ui.cjs.js" 32 | } 33 | }, 34 | "scripts": { 35 | "dev": "vite", 36 | "build": "vue-tsc --noEmit && vite build && npm run generate-types", 37 | "preview": "vite preview", 38 | "generate-types": "tsc src/vue-floating-ui.ts --declaration --emitDeclarationOnly --outDir dist", 39 | "test": "exit 0" 40 | }, 41 | "dependencies": { 42 | "@floating-ui/dom": "^0.2.0" 43 | }, 44 | "peerDependencies": { 45 | "vue": "^3.0.0" 46 | }, 47 | "devDependencies": { 48 | "@allindevelopers/prettier-config": "^1.0.0", 49 | "@types/node": "^17.0.19", 50 | "@vitejs/plugin-vue": "^2.2.0", 51 | "autoprefixer": "^10.4.2", 52 | "postcss": "^8.4.6", 53 | "prettier": "^2.5.1", 54 | "tailwindcss": "^3.0.23", 55 | "typescript": "^4.5.4", 56 | "vite": "^2.8.0", 57 | "vue": "^3.2.31", 58 | "vue-tsc": "^0.29.8" 59 | }, 60 | "prettier": "@allindevelopers/prettier-config", 61 | "publishConfig": { 62 | "access": "public" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@allindevelopers/vue-floating-ui` 2 | 3 | Vue implementation of [@floating-ui/react-dom](https://floating-ui.com/docs/react-dom) 4 | 5 | Same core documentation applies. 6 | 7 | [youtube]: https://i3.ytimg.com/vi/Vi480Rjdevo/maxresdefault.jpg 8 | [![youtube]](https://youtu.be/Vi480Rjdevo) 9 | 10 | ## Install 11 | 12 | ```shell 13 | npm install @allindevelopers/vue-floating-ui 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```vue 19 | 27 | 28 | 41 | ``` 42 | 43 | # Vue 3 + Typescript + Vite 44 | 45 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `