vue-tippy 6.0.0-alpha.9 → 6.0.0-beta.0

package/index.cjs

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/vue-tippy.prod.cjs')
+} else {
+  module.exports = require('./dist/vue-tippy.cjs')
+}

package/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./dist/vue-tippy.prod.cjs')
+} else {
+    module.exports = require('./dist/vue-tippy.cjs')
+}

package/package.json

@@ -1,28 +1,51 @@
 {
   "name": "vue-tippy",
-  "version": "6.0.0-alpha.9",
-  "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",
+  "version": "6.0.0-beta.0",
+  "main": "index.js",
+  "module": "dist/vue-tippy.mjs",
+  "unpkg": "dist/vue-tippy.iife.js",
+  "jsdelivr": "dist/vue-tippy.iife.js",
   "types": "dist/vue-tippy.d.ts",
+  "exports": {
+    ".": {
+      "browser": "./dist/vue-tippy.esm-browser.js",
+      "node": {
+        "import": "./dist/vue-tippy.mjs",
+        "require": {
+          "production": "./dist/vue-tippy.prod.cjs",
+          "development": "./dist/vue-tippy.cjs",
+          "default": "./index.js"
+        }
+      },
+      "import": "./dist/vue-tippy.mjs"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
   "sideEffects": false,
   "license": "MIT",
   "files": [
+    "src/**/*",
     "dist/*.js",
+    "dist/*.mjs",
+    "dist/*.cjs",
     "dist/vue-tippy.d.ts",
+    "index.js",
+    "index.cjs",
     "vetur/*.json",
+    "tsconfig.json",
+    "LICENSE",
     "README.md"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c rollup.config.js",
     "build:dts": "api-extractor run --local --verbose",
-    "dev": "webpack-dev-server --mode=development"
+    "dev": "webpack-dev-server --mode=development",
+    "dev:docs": "cd docs && yarn dev",
+    "prepublishOnly": "yarn build && yarn build:dts"
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-beta.22",
-    "vue": "^2.0.0 || >=3.0.0"
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",
@@ -32,7 +55,7 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@types/webpack": "^4.41.21",
     "@types/webpack-env": "^1.15.2",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/compiler-sfc": "^3.2.0",
     "css-loader": "^4.2.0",
     "html-webpack-plugin": "^4.3.0",
     "rollup": "^2.23.0",
@@ -44,16 +67,16 @@
     "ts-loader": "^8.0.2",
     "ts-node": "^8.10.2",
     "typescript": "^4.1.3",
-    "vue": "^3.0.0",
+    "vue": "^3.2.0",
     "vue-loader": "^16.0.0-beta.8",
+    "vue-router": "4",
     "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "tippy.js": "^6.2.6",
-    "vue-demi": "^0.5.3"
+    "tippy.js": "^6.3.7"
   },
   "vetur": {
     "tags": "vetur/tags.json",

package/src/components/Tippy.ts

@@ -0,0 +1,158 @@
+import { defineComponent, ref, h, UnwrapNestedRefs, onMounted, nextTick, watch, unref, reactive, PropType } from 'vue'
+import { TippyOptions } from '../types'
+import { useTippy } from '../composables'
+import tippy from 'tippy.js'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProps extends TippyOptions {
+    to: string | Element
+    tag: string
+    contentTag: string
+    contentClass: string
+  }
+  interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
+}
+
+
+const TippyComponent = defineComponent({
+  props: {
+    to: {
+      type: [String, Function] as PropType<string | Element>,
+    },
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    contentTag: {
+      type: String,
+      default: 'span'
+    },
+    contentClass: {
+      type: String,
+      default: null
+    },
+    appendTo: { default: () => tippy.defaultProps['appendTo'] },
+    aria: { default: () => tippy.defaultProps['aria'] },
+    delay: { default: () => tippy.defaultProps['delay'] },
+    duration: { default: () => tippy.defaultProps['duration'] },
+    getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
+    hideOnClick: { type: [Boolean, String], default: () => tippy.defaultProps['hideOnClick'] },
+    ignoreAttributes: { type: Boolean, default: () => tippy.defaultProps['ignoreAttributes'] },
+    interactive: { type: Boolean, default: () => tippy.defaultProps['interactive'] },
+    interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
+    interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
+    moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
+    offset: { default: () => tippy.defaultProps['offset'] },
+    onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
+    onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
+    onCreate: { default: () => tippy.defaultProps['onCreate'] },
+    onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
+    onHidden: { default: () => tippy.defaultProps['onHidden'] },
+    onHide: { default: () => tippy.defaultProps['onHide'] },
+    onMount: { default: () => tippy.defaultProps['onMount'] },
+    onShow: { default: () => tippy.defaultProps['onShow'] },
+    onShown: { default: () => tippy.defaultProps['onShown'] },
+    onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
+    onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
+    onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
+    placement: { default: () => tippy.defaultProps['placement'] },
+    plugins: { default: () => tippy.defaultProps['plugins'] },
+    popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
+    render: { default: () => tippy.defaultProps['render'] },
+    showOnCreate: { type: Boolean, default: () => tippy.defaultProps['showOnCreate'] },
+    touch: { type: [Boolean, String, Array], default: () => tippy.defaultProps['touch'] },
+    trigger: { default: () => tippy.defaultProps['trigger'] },
+    triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
+    animateFill: { type: Boolean, default: () => tippy.defaultProps['animateFill'] },
+    followCursor: { type: [Boolean, String], default: () => tippy.defaultProps['followCursor'] },
+    inlinePositioning: { type: Boolean, default: () => tippy.defaultProps['inlinePositioning'] },
+    sticky: { type: [Boolean, String], default: () => tippy.defaultProps['sticky'] },
+    allowHTML: { type: Boolean, default: () => tippy.defaultProps['allowHTML'] },
+    animation: { default: () => tippy.defaultProps['animation'] },
+    arrow: { default: () => tippy.defaultProps['arrow'] },
+    content: { default: () => tippy.defaultProps['content'] },
+    inertia: { default: () => tippy.defaultProps['inertia'] },
+    maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
+    role: { default: () => tippy.defaultProps['role'] },
+    theme: { default: () => tippy.defaultProps['theme'] },
+    zIndex: { default: () => tippy.defaultProps['zIndex'] }
+  },
+  emits: ['state'],
+  setup(props, { slots, emit, expose }) {
+    const elem = ref<Element>()
+    const contentElem = ref<Element>()
+    const mounted = ref(false)
+
+    const getOptions = () => {
+      let options = { ...props } as any as TippyOptions;
+      for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
+        if (options.hasOwnProperty(prop)) {
+          // @ts-ignore
+          delete options[prop];
+        }
+      }
+
+      return options
+    }
+
+    let target: any = elem
+
+    if (props.to) {
+      if (typeof Element !== 'undefined' && props.to instanceof Element) {
+        target = () => props.to
+      } else if (typeof props.to === 'string' || props.to instanceof String) {
+        target = () => document.querySelector(props.to as any)
+      }
+    }
+
+    const tippy = useTippy(target, getOptions())
+
+    onMounted(() => {
+      mounted.value = true
+
+      nextTick(() => {
+        if (slots.content)
+          tippy.setContent(() => contentElem.value)
+      })
+    })
+
+    watch(tippy.state, () => {
+      emit('state', unref(tippy.state))
+    }, { immediate: true, deep: true })
+
+    watch(() => props, () => {
+      tippy.setProps(getOptions())
+
+      if (slots.content)
+        tippy.setContent(() => contentElem.value)
+    },{ deep: true})
+
+    let exposed = reactive({
+      elem,
+      contentElem,
+      mounted,
+      ...tippy
+    })
+
+    expose(exposed)
+
+    return () => {
+      const slot = slots.default ? slots.default(exposed) : []
+
+      return h(props.tag as string, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
+        slot,
+        h(
+          props.contentTag as string,
+          {
+            ref: contentElem,
+            style: { display: mounted.value ? 'inherit' : 'none' },
+            class: props.contentClass
+          },
+          slots.content(exposed)
+        ),
+      ] : slot)
+    }
+  },
+})
+
+export default TippyComponent

package/src/components/TippySingleton.ts

@@ -0,0 +1,74 @@
+import { Instance } from 'tippy.js'
+import { ComponentObjectPropsOptions, defineComponent, h, ref } from 'vue'
+import { useSingleton } from '../composables'
+import { TippyOptions } from '../types'
+import tippy, { DefaultProps } from 'tippy.js'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProps extends TippyOptions {}
+}
+
+const booleanProps = [
+  'a11y',
+  'allowHTML',
+  'arrow',
+  'flip',
+  'flipOnUpdate',
+  'hideOnClick',
+  'ignoreAttributes',
+  'inertia',
+  'interactive',
+  'lazy',
+  'multiple',
+  'showOnInit',
+  'touch',
+  'touchHold',
+]
+
+let props: ComponentObjectPropsOptions = {}
+
+Object.keys(tippy.defaultProps).forEach((prop: string) => {
+  if (booleanProps.includes(prop)) {
+    props[prop] = {
+      type: Boolean,
+      default: function () {
+        return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
+      },
+    }
+  } else {
+    props[prop] = {
+      default: function () {
+        return tippy.defaultProps[prop as keyof DefaultProps]
+      },
+    }
+  }
+})
+
+
+const TippySingleton = defineComponent({
+  props,
+  setup(props) {
+    const instances = ref<Instance<any>[]>([])
+
+    const { singleton } = useSingleton(instances, props)
+
+    return { instances, singleton }
+  },
+  mounted() {
+    const parent = this.$el.parentElement
+    const elements = parent.querySelectorAll('[data-v-tippy]')
+
+    this.instances = Array.from(elements)
+      .map((el: any) => el._tippy)
+      .filter(Boolean)
+
+    this.singleton?.setInstances(this.instances)
+  },
+  render() {
+    let slot = this.$slots.default ? this.$slots.default() : []
+
+    return h(() => slot)
+  },
+})
+
+export default TippySingleton

package/src/composables/index.ts

@@ -0,0 +1,3 @@
+export { useTippy } from './useTippy'
+export { useTippyComponent } from './useTippyComponent'
+export { useSingleton } from './useSingleton'

package/src/composables/useSingleton.ts

@@ -0,0 +1,44 @@
+import { TippyInstance, TippyInstances } from '../types'
+import {
+  createSingleton,
+  CreateSingletonProps,
+  Instance,
+  Props,
+} from 'tippy.js'
+import { onMounted, ref } from 'vue'
+
+export function useSingleton(
+  instances: TippyInstances,
+  optionalProps?: Partial<CreateSingletonProps<Props>>
+) {
+  const singleton = ref<ReturnType<typeof createSingleton>>()
+
+  onMounted(() => {
+    const pendingTippyInstances: TippyInstance[] = Array.isArray(instances)
+      ? instances.map(i => i.value)
+      : typeof instances === 'function'
+      ? instances()
+      : instances.value
+
+    const tippyInstances: Instance<any>[] = pendingTippyInstances
+      .map((instance: TippyInstance) => {
+        if (instance instanceof Element) {
+          //@ts-ignore
+          return instance._tippy
+        }
+        return instance
+      })
+      .filter(Boolean)
+
+    singleton.value = createSingleton(
+      tippyInstances,
+      optionalProps
+        ? { allowHTML: true, ...optionalProps }
+        : { allowHTML: true }
+    )
+  })
+
+  return {
+    singleton,
+  }
+}

package/src/composables/useTippy.ts

@@ -0,0 +1,255 @@
+import tippy, { Instance, Props, Content } from 'tippy.js'
+import {
+  ref,
+  onMounted,
+  Ref,
+  isRef,
+  isReactive,
+  isVNode,
+  render,
+  watch,
+  VNode,
+  h,
+  onUnmounted,
+  getCurrentInstance,
+} from 'vue'
+import { TippyOptions, TippyContent } from '../types'
+
+tippy.setDefaultProps({
+  //@ts-ignore
+  onShow: instance => {
+    if (!instance.props.content) return false
+  },
+})
+
+export function useTippy(
+  el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
+  opts: TippyOptions = {},
+  settings: {
+    mount: boolean
+  } = { mount: true }
+) {
+  const vm = getCurrentInstance()
+  const instance = ref<Instance>()
+  const state = ref({
+    isEnabled: false,
+    isVisible: false,
+    isDestroyed: false,
+    isMounted: false,
+    isShown: false,
+  })
+
+  let container: any = null
+
+  const getContainer = () => {
+    if (container) return container
+    container = document.createDocumentFragment()
+    return container
+  }
+
+  const getContent = (content: TippyContent): Content => {
+    let newContent: Content
+
+    let unwrappedContent: Content | VNode | { render: Function } = isRef(
+      content
+    )
+      ? content.value
+      : content
+
+    if (isVNode(unwrappedContent)) {
+      if (vm) {
+        unwrappedContent.appContext = vm.appContext
+      }
+
+      render(unwrappedContent, getContainer())
+      newContent = () => getContainer()
+    } else if (typeof unwrappedContent === 'object') {
+      let comp = h(unwrappedContent)
+
+      if (vm) {
+        comp.appContext = vm.appContext
+      }
+
+      render(comp, getContainer())
+
+      newContent = () => getContainer()
+    } else {
+      newContent = unwrappedContent
+    }
+
+    return newContent
+  }
+
+  const getProps = (opts: TippyOptions): Partial<Props> => {
+    let options: any = {}
+
+    if (isRef(opts)) {
+      options = opts.value || {}
+    } else if (isReactive(opts)) {
+      options = { ...opts }
+    } else {
+      options = { ...opts }
+    }
+
+    if (options.content) {
+      options.content = getContent(options.content)
+    }
+
+    if (options.triggerTarget) {
+      options.triggerTarget = isRef(options.triggerTarget)
+        ? options.triggerTarget.value
+        : options.triggerTarget
+    }
+
+    if (!options.plugins || !Array.isArray(options.plugins)) {
+      options.plugins = []
+    }
+
+    options.plugins = options.plugins.filter((plugin: any) => plugin.name !== 'vueTippyReactiveState');
+
+    options.plugins.push({
+      name: 'vueTippyReactiveState',
+      fn: () => {
+        return {
+          onCreate() {
+            state.value.isEnabled = true
+          },
+          onMount() {
+            state.value.isMounted = true
+          },
+          onShow() {
+            state.value.isMounted = true
+            state.value.isVisible = true
+          },
+          onShown() {
+            state.value.isShown = true
+          },
+          onHide() {
+            state.value.isMounted = false
+            state.value.isVisible = false
+          },
+          onHidden() {
+            state.value.isShown = false
+          },
+          onUnmounted() {
+            state.value.isMounted = false
+          },
+          onDestroy() {
+            state.value.isDestroyed = true
+          },
+        }
+      }
+    })
+
+    return options as Props
+  }
+
+  const refresh = () => {
+    if (!instance.value) return
+
+    instance.value.setProps(getProps(opts))
+  }
+
+  const refreshContent = () => {
+    if (!instance.value || !opts.content) return
+
+    instance.value.setContent(getContent(opts.content))
+  }
+
+  const setContent = (value: TippyContent) => {
+    instance.value?.setContent(getContent(value))
+  }
+
+  const setProps = (value: TippyOptions) => {
+    instance.value?.setProps(getProps(value))
+  }
+
+  const destroy = () => {
+    if (instance.value) {
+      try {
+        //@ts-ignore
+        // delete instance.value.reference.$tippy
+      } catch (error) { }
+
+      instance.value.destroy()
+      instance.value = undefined
+    }
+    container = null
+  }
+
+  const show = () => {
+    instance.value?.show()
+  }
+
+  const hide = () => {
+    instance.value?.hide()
+  }
+
+  const disable = () => {
+    instance.value?.disable()
+    state.value.isEnabled = false;
+  }
+
+  const enable = () => {
+    instance.value?.enable()
+    state.value.isEnabled = true;
+  }
+
+  const unmount = () => {
+    instance.value?.unmount()
+  }
+
+  const mount = () => {
+    if (!el) return
+
+    let target = isRef(el) ? el.value : el
+
+    if (typeof target === 'function') target = target()
+
+    if (target) {
+      instance.value = tippy(target, getProps(opts))
+      //@ts-ignore
+      target.$tippy = response
+    }
+  }
+
+  const response = {
+    tippy: instance,
+    refresh,
+    refreshContent,
+    setContent,
+    setProps,
+    destroy,
+    hide,
+    show,
+    disable,
+    enable,
+    unmount,
+    mount,
+    state,
+  }
+
+  if (settings.mount) {
+    if (vm) {
+      if (vm.isMounted) {
+        mount()
+      } else {
+        onMounted(mount)
+      }
+
+      onUnmounted(() => {
+        destroy()
+      })
+    } else {
+      mount()
+    }
+  }
+
+  if (isRef(opts) || isReactive(opts)) {
+    watch(opts, refresh, { immediate: false })
+  } else if (isRef(opts.content)) {
+    watch(opts.content, refreshContent, { immediate: false })
+  }
+
+  return response
+}

package/src/composables/useTippyComponent.ts

@@ -0,0 +1,25 @@
+import { h, ref } from 'vue'
+import { TippyComponent, TippyOptions } from '../types'
+import Tippy from './../components/Tippy'
+
+export function useTippyComponent(
+  opts: TippyOptions = {},
+  children?: any
+) {
+  const instance = ref<TippyComponent>()
+
+  return {
+    instance,
+    TippyComponent: h(
+      Tippy,
+      {
+        ...opts as any,
+        onVnodeMounted: (vnode:any) => {
+          //@ts-ignore
+          instance.value = vnode.component.ctx
+        },
+      },
+      children
+    ),
+  }
+}