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

Sign up to get free protection for your applications and to get access to all the features.
@@ -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