vue-tippy 6.0.0-alpha.56 → 6.0.0-alpha.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * vue-tippy v6.0.0-alpha.56
2
+ * vue-tippy v6.0.0-alpha.59
3
3
  * (c) 2022
4
4
  * @license MIT
5
5
  */
@@ -4154,7 +4154,7 @@ function useTippyComponent(opts = {}, children) {
4154
4154
  instance,
4155
4155
  TippyComponent: vue.h(TippyComponent, {
4156
4156
  ...opts,
4157
- onVnodeMounted: vnode => {
4157
+ onVnodeMounted: (vnode) => {
4158
4158
  //@ts-ignore
4159
4159
  instance.value = vnode.component.ctx;
4160
4160
  },
@@ -4188,58 +4188,69 @@ function useSingleton(instances, optionalProps) {
4188
4188
  };
4189
4189
  }
4190
4190
 
4191
- // const pluginProps = [
4192
- // 'animateFill',
4193
- // 'followCursor',
4194
- // 'inlinePositioning',
4195
- // 'sticky',
4196
- // ]
4197
- const booleanProps = [
4198
- 'a11y',
4199
- 'allowHTML',
4200
- 'arrow',
4201
- 'flip',
4202
- 'flipOnUpdate',
4203
- 'hideOnClick',
4204
- 'ignoreAttributes',
4205
- 'inertia',
4206
- 'interactive',
4207
- 'lazy',
4208
- 'multiple',
4209
- 'showOnInit',
4210
- 'touch',
4211
- 'touchHold',
4212
- ];
4213
- let props = {};
4214
- Object.keys(tippy.defaultProps).forEach((prop) => {
4215
- if (booleanProps.includes(prop)) {
4216
- props[prop] = {
4217
- type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
4218
- default: function () {
4219
- return tippy.defaultProps[prop];
4220
- },
4221
- };
4222
- }
4223
- else {
4224
- props[prop] = {
4225
- default: function () {
4226
- return tippy.defaultProps[prop];
4227
- },
4228
- };
4229
- }
4230
- });
4231
- props['to'] = {};
4232
- props['tag'] = {
4233
- default: 'span'
4234
- };
4235
- props['contentTag'] = {
4236
- default: 'span'
4237
- };
4238
- props['contentClass'] = {
4239
- default: null
4240
- };
4241
4191
  const TippyComponent = vue.defineComponent({
4242
- props,
4192
+ props: {
4193
+ to: {
4194
+ type: [String, Element],
4195
+ },
4196
+ tag: {
4197
+ type: String,
4198
+ default: 'span'
4199
+ },
4200
+ contentTag: {
4201
+ type: String,
4202
+ default: 'span'
4203
+ },
4204
+ contentClass: {
4205
+ type: String,
4206
+ default: null
4207
+ },
4208
+ appendTo: { default: () => tippy.defaultProps['appendTo'] },
4209
+ aria: { default: () => tippy.defaultProps['aria'] },
4210
+ delay: { default: () => tippy.defaultProps['delay'] },
4211
+ duration: { default: () => tippy.defaultProps['duration'] },
4212
+ getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
4213
+ hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
4214
+ ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
4215
+ interactive: { default: () => tippy.defaultProps['interactive'] },
4216
+ interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
4217
+ interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
4218
+ moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
4219
+ offset: { default: () => tippy.defaultProps['offset'] },
4220
+ onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
4221
+ onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
4222
+ onCreate: { default: () => tippy.defaultProps['onCreate'] },
4223
+ onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
4224
+ onHidden: { default: () => tippy.defaultProps['onHidden'] },
4225
+ onHide: { default: () => tippy.defaultProps['onHide'] },
4226
+ onMount: { default: () => tippy.defaultProps['onMount'] },
4227
+ onShow: { default: () => tippy.defaultProps['onShow'] },
4228
+ onShown: { default: () => tippy.defaultProps['onShown'] },
4229
+ onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
4230
+ onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
4231
+ onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
4232
+ placement: { default: () => tippy.defaultProps['placement'] },
4233
+ plugins: { default: () => tippy.defaultProps['plugins'] },
4234
+ popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
4235
+ render: { default: () => tippy.defaultProps['render'] },
4236
+ showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
4237
+ touch: { default: () => tippy.defaultProps['touch'] },
4238
+ trigger: { default: () => tippy.defaultProps['trigger'] },
4239
+ triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
4240
+ animateFill: { default: () => tippy.defaultProps['animateFill'] },
4241
+ followCursor: { default: () => tippy.defaultProps['followCursor'] },
4242
+ inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
4243
+ sticky: { default: () => tippy.defaultProps['sticky'] },
4244
+ allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
4245
+ animation: { default: () => tippy.defaultProps['animation'] },
4246
+ arrow: { default: () => tippy.defaultProps['arrow'] },
4247
+ content: { default: () => tippy.defaultProps['content'] },
4248
+ inertia: { default: () => tippy.defaultProps['inertia'] },
4249
+ maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
4250
+ role: { default: () => tippy.defaultProps['role'] },
4251
+ theme: { default: () => tippy.defaultProps['theme'] },
4252
+ zIndex: { default: () => tippy.defaultProps['zIndex'] }
4253
+ },
4243
4254
  emits: ['state'],
4244
4255
  setup(props, { slots, emit, expose }) {
4245
4256
  const elem = vue.ref();
@@ -4275,43 +4286,33 @@ const TippyComponent = vue.defineComponent({
4275
4286
  vue.watch(tippy.state, () => {
4276
4287
  emit('state', vue.unref(tippy.state));
4277
4288
  }, { immediate: true, deep: true });
4278
- vue.watch(props, () => {
4289
+ vue.watch(() => props, () => {
4279
4290
  tippy.setProps(getOptions());
4280
4291
  if (slots.content)
4281
4292
  tippy.setContent(() => contentElem.value);
4282
4293
  });
4283
- let exposed = {
4294
+ let exposed = vue.reactive({
4284
4295
  elem,
4285
4296
  contentElem,
4286
4297
  mounted,
4287
4298
  ...tippy
4288
- };
4299
+ });
4289
4300
  expose(exposed);
4290
4301
  return () => {
4291
- let exposedUnref = {
4292
- elem: elem.value,
4293
- contentElem: contentElem.value,
4294
- mounted: mounted.value,
4295
- ...Object.keys(tippy).reduce((acc, key) => {
4296
- //@ts-ignore
4297
- acc[key] = vue.unref(tippy[key]);
4298
- return acc;
4299
- }, {})
4300
- };
4301
- const slot = slots.default ? slots.default(exposedUnref) : [];
4302
+ const slot = slots.default ? slots.default(exposed) : [];
4302
4303
  return vue.h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
4303
4304
  slot,
4304
4305
  vue.h(props.contentTag, {
4305
4306
  ref: contentElem,
4306
4307
  style: { display: mounted.value ? 'inherit' : 'none' },
4307
4308
  class: props.contentClass
4308
- }, slots.content(exposedUnref)),
4309
+ }, slots.content(exposed)),
4309
4310
  ] : slot);
4310
4311
  };
4311
4312
  },
4312
4313
  });
4313
4314
 
4314
- const booleanProps$1 = [
4315
+ const booleanProps = [
4315
4316
  'a11y',
4316
4317
  'allowHTML',
4317
4318
  'arrow',
@@ -4327,10 +4328,10 @@ const booleanProps$1 = [
4327
4328
  'touch',
4328
4329
  'touchHold',
4329
4330
  ];
4330
- let props$1 = {};
4331
+ let props = {};
4331
4332
  Object.keys(tippy.defaultProps).forEach((prop) => {
4332
- if (booleanProps$1.includes(prop)) {
4333
- props$1[prop] = {
4333
+ if (booleanProps.includes(prop)) {
4334
+ props[prop] = {
4334
4335
  type: Boolean,
4335
4336
  default: function () {
4336
4337
  return tippy.defaultProps[prop];
@@ -4338,7 +4339,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
4338
4339
  };
4339
4340
  }
4340
4341
  else {
4341
- props$1[prop] = {
4342
+ props[prop] = {
4342
4343
  default: function () {
4343
4344
  return tippy.defaultProps[prop];
4344
4345
  },
@@ -4346,7 +4347,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
4346
4347
  }
4347
4348
  });
4348
4349
  const TippySingleton = vue.defineComponent({
4349
- props: props$1,
4350
+ props,
4350
4351
  setup(props) {
4351
4352
  const instances = vue.ref([]);
4352
4353
  const { singleton } = useSingleton(instances, props);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-tippy",
3
- "version": "6.0.0-alpha.56",
3
+ "version": "6.0.0-alpha.59",
4
4
  "main": "index.js",
5
5
  "module": "dist/vue-tippy.mjs",
6
6
  "unpkg": "dist/vue-tippy.iife.js",
@@ -49,7 +49,7 @@
49
49
  "prepublishOnly": "yarn build && yarn build:dts"
50
50
  },
51
51
  "peerDependencies": {
52
- "vue": "^3.0.0"
52
+ "vue": "^3.2.0"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@microsoft/api-extractor": "7.8.1",
@@ -59,7 +59,7 @@
59
59
  "@rollup/plugin-replace": "^2.3.3",
60
60
  "@types/webpack": "^4.41.21",
61
61
  "@types/webpack-env": "^1.15.2",
62
- "@vue/compiler-sfc": "^3.0.0",
62
+ "@vue/compiler-sfc": "^3.2.0",
63
63
  "css-loader": "^4.2.0",
64
64
  "html-webpack-plugin": "^4.3.0",
65
65
  "rollup": "^2.23.0",
@@ -71,7 +71,7 @@
71
71
  "ts-loader": "^8.0.2",
72
72
  "ts-node": "^8.10.2",
73
73
  "typescript": "^4.1.3",
74
- "vue": "^3.0.0",
74
+ "vue": "^3.2.0",
75
75
  "vue-loader": "^16.0.0-beta.8",
76
76
  "vue-router": "4",
77
77
  "webpack": "^4.44.1",
@@ -1,76 +1,88 @@
1
- import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted, nextTick, watch, unref } from 'vue'
1
+ import { defineComponent, ref, h, UnwrapNestedRefs, onMounted, nextTick, watch, unref, reactive } from 'vue'
2
2
  import { TippyOptions } from '../types'
3
3
  import { useTippy } from '../composables'
4
- import tippy, { DefaultProps } from 'tippy.js'
5
- declare module '@vue/runtime-core' {
6
- interface ComponentCustomProps extends TippyOptions { }
7
- }
4
+ import tippy from 'tippy.js'
8
5
 
9
- // const pluginProps = [
10
- // 'animateFill',
11
- // 'followCursor',
12
- // 'inlinePositioning',
13
- // 'sticky',
14
- // ]
15
- const booleanProps = [
16
- 'a11y',
17
- 'allowHTML',
18
- 'arrow',
19
- 'flip',
20
- 'flipOnUpdate',
21
- 'hideOnClick',
22
- 'ignoreAttributes',
23
- 'inertia',
24
- 'interactive',
25
- 'lazy',
26
- 'multiple',
27
- 'showOnInit',
28
- 'touch',
29
- 'touchHold',
30
- ]
31
-
32
- let props: ComponentObjectPropsOptions = {}
33
-
34
- Object.keys(tippy.defaultProps).forEach((prop: string) => {
35
- if (booleanProps.includes(prop)) {
36
- props[prop] = {
37
- type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
38
- default: function () {
39
- return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
40
- },
41
- }
42
- } else {
43
- props[prop] = {
44
- default: function () {
45
- return tippy.defaultProps[prop as keyof DefaultProps]
46
- },
47
- }
6
+ declare module '@vue/runtime-core' {
7
+ interface ComponentCustomProps extends TippyOptions {
8
+ to: string | Element
9
+ tag: string
10
+ contentTag: string
11
+ contentClass: string
48
12
  }
49
- })
50
-
51
- props['to'] = {}
52
-
53
- props['tag'] = {
54
- default: 'span'
13
+ interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
55
14
  }
56
15
 
57
- props['contentTag'] = {
58
- default: 'span'
59
- }
60
-
61
- props['contentClass'] = {
62
- default: null
63
- }
64
16
 
65
17
  const TippyComponent = defineComponent({
66
- props,
18
+ props: {
19
+ to: {
20
+ type: [String, Element],
21
+ },
22
+ tag: {
23
+ type: String,
24
+ default: 'span'
25
+ },
26
+ contentTag: {
27
+ type: String,
28
+ default: 'span'
29
+ },
30
+ contentClass: {
31
+ type: String,
32
+ default: null
33
+ },
34
+ appendTo: { default: () => tippy.defaultProps['appendTo'] },
35
+ aria: { default: () => tippy.defaultProps['aria'] },
36
+ delay: { default: () => tippy.defaultProps['delay'] },
37
+ duration: { default: () => tippy.defaultProps['duration'] },
38
+ getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
39
+ hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
40
+ ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
41
+ interactive: { default: () => tippy.defaultProps['interactive'] },
42
+ interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
43
+ interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
44
+ moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
45
+ offset: { default: () => tippy.defaultProps['offset'] },
46
+ onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
47
+ onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
48
+ onCreate: { default: () => tippy.defaultProps['onCreate'] },
49
+ onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
50
+ onHidden: { default: () => tippy.defaultProps['onHidden'] },
51
+ onHide: { default: () => tippy.defaultProps['onHide'] },
52
+ onMount: { default: () => tippy.defaultProps['onMount'] },
53
+ onShow: { default: () => tippy.defaultProps['onShow'] },
54
+ onShown: { default: () => tippy.defaultProps['onShown'] },
55
+ onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
56
+ onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
57
+ onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
58
+ placement: { default: () => tippy.defaultProps['placement'] },
59
+ plugins: { default: () => tippy.defaultProps['plugins'] },
60
+ popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
61
+ render: { default: () => tippy.defaultProps['render'] },
62
+ showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
63
+ touch: { default: () => tippy.defaultProps['touch'] },
64
+ trigger: { default: () => tippy.defaultProps['trigger'] },
65
+ triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
66
+ animateFill: { default: () => tippy.defaultProps['animateFill'] },
67
+ followCursor: { default: () => tippy.defaultProps['followCursor'] },
68
+ inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
69
+ sticky: { default: () => tippy.defaultProps['sticky'] },
70
+ allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
71
+ animation: { default: () => tippy.defaultProps['animation'] },
72
+ arrow: { default: () => tippy.defaultProps['arrow'] },
73
+ content: { default: () => tippy.defaultProps['content'] },
74
+ inertia: { default: () => tippy.defaultProps['inertia'] },
75
+ maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
76
+ role: { default: () => tippy.defaultProps['role'] },
77
+ theme: { default: () => tippy.defaultProps['theme'] },
78
+ zIndex: { default: () => tippy.defaultProps['zIndex'] }
79
+ },
67
80
  emits: ['state'],
68
81
  setup(props, { slots, emit, expose }) {
69
82
  const elem = ref<Element>()
70
83
  const contentElem = ref<Element>()
71
84
  const mounted = ref(false)
72
85
 
73
-
74
86
  const getOptions = () => {
75
87
  let options = { ...props } as TippyOptions;
76
88
  for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
@@ -89,7 +101,7 @@ const TippyComponent = defineComponent({
89
101
  if (typeof Element !== 'undefined' && props.to instanceof Element) {
90
102
  target = () => props.to
91
103
  } else if (typeof props.to === 'string' || props.to instanceof String) {
92
- target = () => document.querySelector(props.to)
104
+ target = () => document.querySelector(props.to as any)
93
105
  }
94
106
  }
95
107
 
@@ -108,48 +120,35 @@ const TippyComponent = defineComponent({
108
120
  emit('state', unref(tippy.state))
109
121
  }, { immediate: true, deep: true })
110
122
 
111
- watch(props, () => {
123
+ watch(() => props, () => {
112
124
  tippy.setProps(getOptions())
113
125
 
114
126
  if (slots.content)
115
127
  tippy.setContent(() => contentElem.value)
116
128
  })
117
129
 
118
- let exposed = {
130
+ let exposed = reactive({
119
131
  elem,
120
132
  contentElem,
121
133
  mounted,
122
134
  ...tippy
123
- }
135
+ })
124
136
 
125
137
  expose(exposed)
126
138
 
127
139
  return () => {
140
+ const slot = slots.default ? slots.default(exposed) : []
128
141
 
129
- let exposedUnref = {
130
- elem: elem.value,
131
- contentElem: contentElem.value,
132
- mounted: mounted.value,
133
- ...Object.keys(tippy).reduce((acc, key) => {
134
- //@ts-ignore
135
- acc[key] = unref(tippy[key])
136
-
137
- return acc;
138
- }, {})
139
- }
140
-
141
- const slot = slots.default ? slots.default(exposedUnref) : []
142
-
143
- return h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
142
+ return h(props.tag as string, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
144
143
  slot,
145
144
  h(
146
- props.contentTag,
145
+ props.contentTag as string,
147
146
  {
148
147
  ref: contentElem,
149
148
  style: { display: mounted.value ? 'inherit' : 'none' },
150
149
  class: props.contentClass
151
150
  },
152
- slots.content(exposedUnref)
151
+ slots.content(exposed)
153
152
  ),
154
153
  ] : slot)
155
154
  }
@@ -1,20 +1,20 @@
1
1
  import { h, ref } from 'vue'
2
- import { TippyOptions } from '../types'
3
- import TippyComponent from './../components/Tippy'
2
+ import { TippyComponent, TippyOptions } from '../types'
3
+ import Tippy from './../components/Tippy'
4
4
 
5
5
  export function useTippyComponent(
6
6
  opts: TippyOptions = {},
7
7
  children?: any
8
8
  ) {
9
- const instance = ref()
9
+ const instance = ref<TippyComponent>()
10
10
 
11
11
  return {
12
12
  instance,
13
13
  TippyComponent: h(
14
- TippyComponent,
14
+ Tippy,
15
15
  {
16
- ...opts,
17
- onVnodeMounted: vnode => {
16
+ ...opts as any,
17
+ onVnodeMounted: (vnode:any) => {
18
18
  //@ts-ignore
19
19
  instance.value = vnode.component.ctx
20
20
  },
@@ -11,9 +11,10 @@ export declare type TippyTarget =
11
11
  | null
12
12
 
13
13
  export declare type TippyOptions = Partial<
14
- Omit<Props, 'content' | 'triggerTarget'> & {
14
+ Omit<Props, 'content' | 'triggerTarget' | 'getReferenceClientRect'> & {
15
15
  content: TippyContent
16
16
  triggerTarget: TippyTarget
17
+ getReferenceClientRect: null | (() => DOMRect & any)
17
18
  }
18
19
  >
19
20