wip

2020-08-01 00:54:16 +03:00
commit 609f8caf0c
14 changed files with 2529 additions and 0 deletions
@@ -0,0 +1,3 @@
+dist
+node_modules
+yarn-error.log
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
@@ -0,0 +1,36 @@
+# Contributing
+
+Contributions are **welcome** and will be fully **credited**.
+
+We accept contributions via Pull Requests on [Github](https://github.com/KABBOUCHI/vue-tippy).
+
+
+## Pull Requests
+
+- **Keep the same style** - eslint will automatically be ran before committing
+
+- **Tip** to pass lint tests easier use the `npm run lint:fix` command
+
+- **Add tests!** - Your patch won't be accepted if it doesn't have tests.
+
+- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
+
+- **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
+
+- **Create feature branches** - Don't ask us to pull from your master branch.
+
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+
+- **Send coherent history** - Make sure your commits message means something
+
+
+## Running Tests
+
+Launch visual tests and watch the components at the same time
+
+``` bash
+$ npm run dev
+```
+
+
+**Happy coding**!
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Georges KABBOUCHI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,118 @@
+# VueTippy
+
+[![npm](https://img.shields.io/npm/v/vue-tippy.svg)](https://www.npmjs.com/package/vue-tippy) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![download](https://img.shields.io/npm/dt/vue-tippy.svg)](https://www.npmjs.com/package/vue-tippy)
+
+> Directive wrapper for Tippy.js
+
+![](https://github.com/KABBOUCHI/vue-tippy/blob/master/preview.gif?v0.3.0)
+
+<aside class="notice">
+<a href="https://github.com/KABBOUCHI/vue-tippy/tree/v1">For tippyJS v1 use v1 branch</a>
+</aside>
+
+## Documentation
+
+For full v4 documentation, visit [https://kabbouchi.github.io/vue-tippy/4.0/](https://kabbouchi.github.io/vue-tippy/4.0/).
+
+## Installation
+
+```bash
+npm install --save vue-tippy
+# or
+yarn add vue-tippy
+```
+
+## Usage
+
+### Bundler (Webpack, Rollup)
+
+```js
+import Vue from "vue";
+import VueTippy, { TippyComponent } from "vue-tippy";
+
+Vue.use(VueTippy);
+Vue.component("tippy", TippyComponent);
+
+// or
+Vue.use(VueTippy, {
+  directive: "tippy", // => v-tippy
+  flipDuration: 0,
+  popperOptions: {
+    modifiers: {
+      preventOverflow: {
+        enabled: false
+      }
+    }
+  }
+});
+Vue.component("tippy", TippyComponent);
+
+
+// Add additional themes.
+import "tippy.js/themes/light.css";
+import "tippy.js/themes/light-border.css";
+import "tippy.js/themes/google.css";
+import "tippy.js/themes/translucent.css";
+```
+
+### Browser
+
+```html
+<!-- From CDN -->
+<script src="https://unpkg.com/vue-tippy/dist/vue-tippy.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-tippy/dist/vue-tippy.min.js"></script>
+```
+
+#### Basic Usage
+
+```html
+<button content="Hi!" v-tippy>My Button!</button>
+<button :content="dynamicTitle" v-tippy>My Button!</button>
+<button content="Hello" v-tippy="{ placement : 'top',  arrow: true }">
+  My Button!
+</button>
+```
+
+#### Using Vue component
+
+```html
+<tippy to="myTrigger" arrow>
+  <div>
+    <h3>Header</h3>
+    <p style="color: black">{{ message }} - data binding</p>
+    <button @click="clicked">Click</button>
+  </div>
+</tippy>
+
+<button name="myTrigger">Tippy Trigger</button>
+```
+
+```html
+<tippy arrow>
+  <template v-slot:trigger>
+    <button>Tippy Trigger</button>
+  </template>
+
+  <div>
+    <h3>Header</h3>
+    <p style="color: black">{{ message }} - data binding</p>
+    <button @click="clicked">Click</button>
+  </div>
+</tippy>
+```
+
+```html
+<tippy :content="`tooltip: ${message}`" arrow>
+  <template v-slot:trigger>
+    <button>Tippy Trigger</button>
+  </template>
+</tippy>
+```
+
+> For full v4 documentation, visit [https://kabbouchi.github.io/vue-tippy/4.0/](https://kabbouchi.github.io/vue-tippy/4.0/).
+
+> For more info on TippyJS view the documentation and demo here: ~https://atomiks.github.io/tippyjs/~ https://kabbouchi.github.io/tippyjs-v4-docs/
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VueTippy v6</title>
+    <link
+      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app" class="h-screen flex justify-center items-center"></div>
+
+    <script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.js"></script>
+    <script src="./dist/vue-tippy.global.js"></script>
+    <script>
+      const { createApp, h, ref } = Vue
+      const { useTippy } = VueTippy
+
+      createApp({
+        setup() {
+          const element = ref()
+
+          useTippy(element, {
+            content: 'Test',
+          })
+          return () => [
+            h('span', { ref: element }, 'HI!'),
+            h(VueTippy.Tippy, { content: 'test' }, 'HI2!'),
+          ]
+        },
+      }).mount(document.querySelector('#app'))
+    </script>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+{
+  "name": "vue-tippy",
+  "version": "6.0.0-beta.0",
+  "main": "dist/vue-tippy.cjs.js",
+  "browser": "dist/vue-tippy.esm.js",
+  "unpkg": "dist/vue-tippy.global.js",
+  "jsdelivr": "dist/vue-tippy.global.js",
+  "module": "dist/vue-tippy.esm-bundler.js",
+  "types": "dist/vue-tippy.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/*.js",
+    "dist/vue-tippy.d.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "NODE_ENV=production rollup -c rollup.config.js",
+    "dev": "webpack-dev-server --mode=development"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "rollup": "^2.23.0",
+    "rollup-plugin-css-only": "^2.1.0",
+    "rollup-plugin-postcss": "^3.1.3",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.9.7",
+    "vue": "^3.0.0-rc.5"
+  },
+  "dependencies": {
+    "tippy.js": "^6.2.6"
+  }
+}
@@ -0,0 +1,191 @@
+import path from 'path'
+import ts from 'rollup-plugin-typescript2'
+import replace from '@rollup/plugin-replace'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+
+const pkg = require('./package.json')
+const name = pkg.name
+
+const banner = `/*!
+  * ${pkg.name} v${pkg.version}
+  * (c) ${new Date().getFullYear()} Georges KABBOUCHI
+  * @license MIT
+  */`
+
+// ensure TS checks only once for each build
+let hasTSChecked = false
+
+const outputConfigs = {
+  // each file name has the format: `dist/${name}.${format}.js`
+  // format being a key of this object
+  'esm-bundler': {
+    file: pkg.module,
+    format: `es`,
+  },
+  cjs: {
+    file: pkg.main,
+    format: `cjs`,
+  },
+  global: {
+    file: pkg.unpkg,
+    format: `iife`,
+  },
+  esm: {
+    file: pkg.browser,
+    format: `es`,
+  },
+}
+
+const allFormats = Object.keys(outputConfigs)
+// in vue-router there are not that many
+const packageFormats = allFormats
+const packageConfigs = packageFormats.map(format =>
+  createConfig(format, outputConfigs[format])
+)
+
+// only add the production ready if we are bundling the options
+packageFormats.forEach(format => {
+  if (format === 'cjs') {
+    packageConfigs.push(createProductionConfig(format))
+  } else if (format === 'global') {
+    packageConfigs.push(createMinifiedConfig(format))
+  }
+})
+
+export default packageConfigs
+
+function createConfig(format, output, plugins = []) {
+  if (!output) {
+    console.log(require('chalk').yellow(`invalid format: "${format}"`))
+    process.exit(1)
+  }
+
+  output.sourcemap = !!process.env.SOURCE_MAP
+  output.banner = banner
+  output.externalLiveBindings = false
+  output.globals = { vue: 'Vue' }
+
+  const isProductionBuild = /\.prod\.js$/.test(output.file)
+  const isGlobalBuild = format === 'global'
+  const isRawESMBuild = format === 'esm'
+  const isNodeBuild = format === 'cjs'
+  const isBundlerESMBuild = /esm-bundler/.test(format)
+
+  if (isGlobalBuild) output.name = 'VueTippy'
+
+  const shouldEmitDeclarations = !hasTSChecked
+
+  const tsPlugin = ts({
+    check: !hasTSChecked,
+    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
+    cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
+    tsconfigOverride: {
+      compilerOptions: {
+        sourceMap: output.sourcemap,
+        declaration: shouldEmitDeclarations,
+        declarationMap: shouldEmitDeclarations,
+      },
+      exclude: [],
+    },
+  })
+  // we only need to check TS and generate declarations once for each build.
+  // it also seems to run into weird issues when checking multiple times
+  // during a single build.
+  hasTSChecked = true
+
+  const external = ['vue']
+
+  const nodePlugins = [resolve(), commonjs()]
+
+  return {
+    input: `src/index.ts`,
+    // Global and Browser ESM builds inlines everything so that they can be
+    // used alone.
+    external,
+    plugins: [
+      tsPlugin,
+      createReplacePlugin(
+        isProductionBuild,
+        isBundlerESMBuild,
+        // isBrowserBuild?
+        isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
+        isGlobalBuild,
+        isNodeBuild
+      ),
+      ...nodePlugins,
+      ...plugins,
+      postcss(),
+    ],
+    output,
+    // onwarn: (msg, warn) => {
+    //   if (!/Circular/.test(msg)) {
+    //     warn(msg)
+    //   }
+    // },
+  }
+}
+
+function createReplacePlugin(
+  isProduction,
+  isBundlerESMBuild,
+  isBrowserBuild,
+  isGlobalBuild,
+  isNodeBuild
+) {
+  const replacements = {
+    __COMMIT__: `"${process.env.COMMIT}"`,
+    __VERSION__: `"${pkg.version}"`,
+    __DEV__: isBundlerESMBuild
+      ? // preserve to be handled by bundlers
+        `(process.env.NODE_ENV !== 'production')`
+      : // hard coded dev/prod builds
+        !isProduction,
+    // this is only used during tests
+    __TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
+    // If the build is expected to run directly in the browser (global / esm builds)
+    __BROWSER__: isBrowserBuild,
+    // is targeting bundlers?
+    __BUNDLER__: isBundlerESMBuild,
+    __GLOBAL__: isGlobalBuild,
+    // is targeting Node (SSR)?
+    __NODE_JS__: isNodeBuild,
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  }
+  // allow inline overrides like
+  //__RUNTIME_COMPILE__=true yarn build
+  Object.keys(replacements).forEach(key => {
+    if (key in process.env) {
+      replacements[key] = process.env[key]
+    }
+  })
+  return replace(replacements)
+}
+
+function createProductionConfig(format) {
+  return createConfig(format, {
+    file: `dist/${name}.${format}.prod.js`,
+    format: outputConfigs[format].format,
+  })
+}
+
+function createMinifiedConfig(format) {
+  const { terser } = require('rollup-plugin-terser')
+  return createConfig(
+    format,
+    {
+      file: `dist/${name}.${format}.prod.js`,
+      format: outputConfigs[format].format,
+    },
+    [
+      terser({
+        module: /^esm/.test(format),
+        compress: {
+          ecma: 2015,
+          pure_getters: true,
+        },
+      }),
+    ]
+  )
+}
@@ -0,0 +1,21 @@
+import { defineComponent, ref, h, PropType } from 'vue'
+import { Content } from 'tippy.js'
+import { useTippy } from 'src'
+
+export default defineComponent({
+  props: {
+    content: Object as PropType<Content>,
+  },
+  setup(props) {
+    const elem = ref<Element>()
+
+    useTippy(elem, props)
+
+    return { elem }
+  },
+  render() {
+    let slot = this.$slots.default ? this.$slots.default() : []
+
+    return h('span', { ref: 'elem' }, slot)
+  },
+})
@@ -0,0 +1,21 @@
+import tippy, { Instance, Props } from 'tippy.js'
+import { ref, onMounted, Ref, isRef } from 'vue'
+
+export function useTippy(
+  el: Element | Ref<Element> | Ref<Element | undefined>,
+  opts: Partial<Props> = {}
+) {
+  const instance = ref<Instance>()
+
+  onMounted(() => {
+    if (!el) return
+
+    let target = isRef(el) ? el.value : el
+
+    target && (instance.value = tippy(target, opts))
+  })
+
+  return {
+    tippy: instance,
+  }
+}
@@ -0,0 +1,4 @@
+// Global compile-time constants
+declare var __DEV__: boolean
+declare var __BROWSER__: boolean
+declare var __CI__: boolean
@@ -0,0 +1,7 @@
+import tippy from 'tippy.js'
+import Tippy from './components/Tippy'
+import { useTippy } from './composables/useTippy'
+
+import 'tippy.js/dist/tippy.css'
+
+export { tippy, Tippy, useTippy }
@@ -0,0 +1,31 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
+    "sourceMap": false,
+    "noEmit": true,
+
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": false,
+
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "strict": true,
+    "isolatedModules": false,
+
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+    "types": ["node"]
+  }
+}