vue-tippy 6.0.0-alpha.50 → 6.0.0-alpha.51

package/dist/vue-tippy.cjs

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/dist/vue-tippy.esm-browser.js

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/dist/vue-tippy.iife.js

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/dist/vue-tippy.iife.prod.js

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/dist/vue-tippy.mjs

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/dist/vue-tippy.prod.cjs

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.50
+  * vue-tippy v6.0.0-alpha.51
   * (c) 2022 
   * @license MIT
   */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tippy",
-  "version": "6.0.0-alpha.50",
+  "version": "6.0.0-alpha.51",
   "main": "index.js",
   "module": "dist/vue-tippy.mjs",
   "unpkg": "dist/vue-tippy.iife.js",
@@ -29,6 +29,7 @@
   "sideEffects": false,
   "license": "MIT",
   "files": [
+    "src/**/*",
     "dist/*.js",
     "dist/*.mjs",
     "dist/*.cjs",
@@ -36,6 +37,7 @@
     "index.js",
     "index.cjs",
     "vetur/*.json",
+    "tsconfig.json",
     "LICENSE",
     "README.md"
   ],

package/src/components/Tippy.ts

@@ -0,0 +1,141 @@
+import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted, nextTick, watch, unref } from 'vue'
+import { TippyOptions } from '../types'
+import { useTippy } from '../composables'
+import tippy, { DefaultProps } from 'tippy.js'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProps extends TippyOptions { }
+}
+
+// const pluginProps = [
+//   'animateFill',
+//   'followCursor',
+//   'inlinePositioning',
+//   'sticky',
+// ]
+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: prop === 'arrow' ? [String, Boolean, SVGElement, DocumentFragment] : Boolean,
+      default: function () {
+        return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
+      },
+    }
+  } else {
+    props[prop] = {
+      default: function () {
+        return tippy.defaultProps[prop as keyof DefaultProps]
+      },
+    }
+  }
+})
+
+props['to'] = {}
+
+props['tag'] = {
+  default: 'span'
+}
+
+props['contentTag'] = {
+  default: 'span'
+}
+
+props['contentClass'] = {
+  default: null
+}
+
+const TippyComponent = defineComponent({
+  props,
+  emits: ['state'],
+  setup(props, { slots, emit, expose }) {
+    const elem = ref<Element>()
+    const contentElem = ref<Element>()
+    const mounted = ref(false)
+
+    let options = { ...props } as TippyOptions;
+
+    for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
+      if (options.hasOwnProperty(prop)) {
+        // @ts-ignore
+        delete options[prop];
+      }
+    }
+
+    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)
+      }
+    }
+
+    const tippy = useTippy(target, options)
+
+    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(props)
+    })
+
+    let exposed = {
+      elem,
+      contentElem,
+      mounted,
+      ...tippy
+    }
+
+    expose(exposed)
+
+    const slot = slots.default ? slots.default(exposed) : []
+
+    return () => {
+
+      return h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
+        slot,
+        h(
+          props.contentTag,
+          {
+            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 { TippyOptions } from '../types'
+import TippyComponent from './../components/Tippy'
+
+export function useTippyComponent(
+  opts: TippyOptions = {},
+  children?: any
+) {
+  const instance = ref()
+
+  return {
+    instance,
+    TippyComponent: h(
+      TippyComponent,
+      {
+        ...opts,
+        onVnodeMounted: vnode => {
+          //@ts-ignore
+          instance.value = vnode.component.ctx
+        },
+      },
+      children
+    ),
+  }
+}

package/src/directive/index.ts

@@ -0,0 +1,89 @@
+import { useTippy } from '../composables'
+import { Directive } from 'vue'
+
+const directive: Directive = {
+  mounted(el, binding, vnode) {
+    const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {}
+
+    const modifiers = Object.keys(binding.modifiers || {})
+    const placement = modifiers.find(modifier => modifier !== 'arrow')
+    const withArrow = modifiers.findIndex(modifier => modifier === 'arrow') !== -1
+
+    if (placement) {
+      opts.placement = opts.placement || placement
+    }
+
+    if (withArrow) {
+      opts.arrow = opts.arrow !== undefined ? opts.arrow : true
+    }
+
+    if (vnode.props && vnode.props.onTippyShow) {
+      opts.onShow = function (...args: any[]) {
+        return vnode.props?.onTippyShow(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onTippyShown) {
+      opts.onShown = function (...args: any[]) {
+        return vnode.props?.onTippyShown(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onTippyHidden) {
+      opts.onHidden = function (...args: any[]) {
+        return vnode.props?.onTippyHidden(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onTippyHide) {
+      opts.onHide = function (...args: any[]) {
+        return vnode.props?.onTippyHide(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onTippyMount) {
+      opts.onMount = function (...args: any[]) {
+        return vnode.props?.onTippyMount(...args)
+      }
+    }
+
+    if (el.getAttribute('title') && !opts.content) {
+      opts.content = el.getAttribute('title')
+      el.removeAttribute('title')
+    }
+
+    if (el.getAttribute('content') && !opts.content) {
+      opts.content = el.getAttribute('content')
+    }
+
+    useTippy(el, opts)
+  },
+  unmounted(el) {
+    if (el.$tippy) {
+      el.$tippy.destroy()
+    } else if (el._tippy) {
+      el._tippy.destroy()
+    }
+  },
+
+  updated(el, binding) {
+    const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {}
+
+    if (el.getAttribute('title') && !opts.content) {
+      opts.content = el.getAttribute('title')
+      el.removeAttribute('title')
+    }
+
+    if (el.getAttribute('content') && !opts.content) {
+      opts.content = el.getAttribute('content')
+    }
+
+    if (el.$tippy) {
+      el.$tippy.setProps(opts || {})
+    } else if (el._tippy) {
+      el._tippy.setProps(opts || {})
+    }
+  },
+}
+
+export default directive

package/src/global.d.ts

@@ -0,0 +1,4 @@
+// Global compile-time constants
+declare var __DEV__: boolean
+declare var __BROWSER__: boolean
+declare var __CI__: boolean

package/src/index.ts

@@ -0,0 +1,39 @@
+import tippy, {
+  sticky,
+  inlinePositioning,
+  followCursor,
+  animateFill,
+  roundArrow,
+} from 'tippy.js'
+
+import Tippy from './components/Tippy'
+import TippySingleton from './components/TippySingleton'
+import directive from './directive'
+import plugin from './plugin'
+
+import { useTippy } from './composables/useTippy'
+import { useTippyComponent } from './composables/useTippyComponent'
+import { useSingleton } from './composables/useSingleton'
+
+const setDefaultProps = tippy.setDefaultProps
+
+setDefaultProps({
+  ignoreAttributes: true,
+  plugins: [sticky, inlinePositioning, followCursor, animateFill],
+})
+
+export {
+  useTippy,
+  useTippyComponent,
+  roundArrow,
+  tippy,
+  useSingleton,
+  setDefaultProps,
+  Tippy,
+  TippySingleton,
+  directive,
+  plugin,
+}
+
+export * from './types'
+export default plugin

package/src/plugin/index.ts

@@ -0,0 +1,18 @@
+import TippyComponent from '../components/Tippy'
+import TippySingletonComponent from '../components/TippySingleton'
+import directive from '../directive'
+import { Plugin } from 'vue'
+import tippy from 'tippy.js'
+import { TippyPluginOptions } from '../types'
+
+const plugin: Plugin = {
+  install(app, options: TippyPluginOptions = {}) {
+    tippy.setDefaultProps(options.defaultProps || {})
+
+    app.directive(options.directive || 'tippy', directive)
+    app.component(options.component || 'tippy', TippyComponent)
+    app.component(options.componentSingleton || 'tippy-singleton', TippySingletonComponent)
+  },
+}
+
+export default plugin

package/src/types/index.ts

@@ -0,0 +1,30 @@
+import Tippy from '../components/Tippy'
+import { Props, Content, DefaultProps, Instance } from 'tippy.js'
+import { VNode, Ref, Component } from 'vue'
+
+export declare type TippyContent = Content | VNode | Component | Ref
+export declare type TippyTarget =
+  | Element
+  | Element[]
+  | Ref<Element | undefined>
+  | Ref<Element[] | undefined>
+  | null
+
+export declare type TippyOptions = Partial<
+  Omit<Props, 'content' | 'triggerTarget'> & {
+    content: TippyContent
+    triggerTarget: TippyTarget
+  }
+>
+
+export declare type TippyComponent = InstanceType<typeof Tippy>
+
+export interface TippyPluginOptions {
+  directive?: string
+  component?: string
+  componentSingleton?: string
+  defaultProps?: Partial<DefaultProps>
+}
+
+export type TippyInstance = Instance | Element | undefined
+export type TippyInstances = Ref<TippyInstance>[] | Ref<TippyInstance[]> | (() => TippyInstance[])

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
+    "sourceMap": false,
+    "noEmit": true,
+
+    "target": "es2019",
+    "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"]
+  }
+}