@varlet/use 3.14.1 → 3.15.0-alpha.1776572752298

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.
Files changed (5) hide show
  1. package/lib/index.cjs +383 -533
  2. package/lib/index.d.cts +88 -74
  3. package/lib/index.d.ts +88 -74
  4. package/lib/index.js +368 -508
  5. package/package.json +7 -7
package/lib/index.js CHANGED
@@ -1,542 +1,402 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
- var __hasOwnProp = Object.prototype.hasOwnProperty;
4
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __spreadValues = (a, b) => {
7
- for (var prop in b || (b = {}))
8
- if (__hasOwnProp.call(b, prop))
9
- __defNormalProp(a, prop, b[prop]);
10
- if (__getOwnPropSymbols)
11
- for (var prop of __getOwnPropSymbols(b)) {
12
- if (__propIsEnum.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- }
15
- return a;
16
- };
17
- var __objRest = (source, exclude) => {
18
- var target = {};
19
- for (var prop in source)
20
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
21
- target[prop] = source[prop];
22
- if (source != null && __getOwnPropSymbols)
23
- for (var prop of __getOwnPropSymbols(source)) {
24
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
25
- target[prop] = source[prop];
26
- }
27
- return target;
28
- };
29
-
30
- // src/useEventListener.ts
31
- import { isRef, onBeforeUnmount, onDeactivated, unref, watch } from "vue";
32
- import { inBrowser, isFunction } from "@varlet/shared";
33
-
34
- // src/onSmartMounted.ts
35
- import { nextTick, onActivated, onMounted } from "vue";
1
+ import { call, getScrollTop, inBrowser, isArray, isFunction, kebabCase, motion, removeItem } from "@varlet/shared";
2
+ import { computed, getCurrentInstance, inject, isRef, isVNode, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, onUnmounted, provide, reactive, ref, unref, watch } from "vue";
3
+ //#region src/onSmartMounted.ts
36
4
  function onSmartMounted(hook) {
37
- let isMounted = false;
38
- onMounted(() => {
39
- hook();
40
- nextTick(() => {
41
- isMounted = true;
42
- });
43
- });
44
- onActivated(() => {
45
- if (!isMounted) {
46
- return;
47
- }
48
- hook();
49
- });
5
+ let isMounted = false;
6
+ onMounted(() => {
7
+ hook();
8
+ nextTick(() => {
9
+ isMounted = true;
10
+ });
11
+ });
12
+ onActivated(() => {
13
+ if (!isMounted) return;
14
+ hook();
15
+ });
50
16
  }
51
-
52
- // src/useEventListener.ts
17
+ //#endregion
18
+ //#region src/useEventListener.ts
53
19
  function useEventListener(target, type, listener, options = {}) {
54
- if (!inBrowser()) {
55
- return;
56
- }
57
- const { passive = false, capture = false } = options;
58
- let listening = false;
59
- let cleaned = false;
60
- const getElement = (target2) => isFunction(target2) ? target2() : unref(target2);
61
- const add = (target2) => {
62
- if (listening || cleaned) {
63
- return;
64
- }
65
- const element = getElement(target2);
66
- if (element) {
67
- element.addEventListener(type, listener, {
68
- passive,
69
- capture
70
- });
71
- listening = true;
72
- }
73
- };
74
- const remove = (target2) => {
75
- if (!listening || cleaned) {
76
- return;
77
- }
78
- const element = getElement(target2);
79
- if (element) {
80
- element.removeEventListener(type, listener, {
81
- capture
82
- });
83
- listening = false;
84
- }
85
- };
86
- let watchStopHandle;
87
- if (isRef(target)) {
88
- watchStopHandle = watch(
89
- () => target.value,
90
- (newValue, oldValue) => {
91
- remove(oldValue);
92
- add(newValue);
93
- }
94
- );
95
- }
96
- const cleanup = () => {
97
- watchStopHandle == null ? void 0 : watchStopHandle();
98
- remove(target);
99
- cleaned = true;
100
- };
101
- onSmartMounted(() => {
102
- add(target);
103
- });
104
- onBeforeUnmount(() => {
105
- remove(target);
106
- });
107
- onDeactivated(() => {
108
- remove(target);
109
- });
110
- return cleanup;
20
+ if (!inBrowser()) return;
21
+ const { passive = false, capture = false } = options;
22
+ let listening = false;
23
+ let cleaned = false;
24
+ const getElement = (target) => isFunction(target) ? target() : unref(target);
25
+ const add = (target) => {
26
+ if (listening || cleaned) return;
27
+ const element = getElement(target);
28
+ if (element) {
29
+ element.addEventListener(type, listener, {
30
+ passive,
31
+ capture
32
+ });
33
+ listening = true;
34
+ }
35
+ };
36
+ const remove = (target) => {
37
+ if (!listening || cleaned) return;
38
+ const element = getElement(target);
39
+ if (element) {
40
+ element.removeEventListener(type, listener, { capture });
41
+ listening = false;
42
+ }
43
+ };
44
+ let watchStopHandle;
45
+ if (isRef(target)) watchStopHandle = watch(() => target.value, (newValue, oldValue) => {
46
+ remove(oldValue);
47
+ add(newValue);
48
+ });
49
+ const cleanup = () => {
50
+ watchStopHandle?.();
51
+ remove(target);
52
+ cleaned = true;
53
+ };
54
+ onSmartMounted(() => {
55
+ add(target);
56
+ });
57
+ onBeforeUnmount(() => {
58
+ remove(target);
59
+ });
60
+ onDeactivated(() => {
61
+ remove(target);
62
+ });
63
+ return cleanup;
111
64
  }
112
-
113
- // src/useClickOutside.ts
114
- import { unref as unref2 } from "vue";
115
- import { inBrowser as inBrowser2, isFunction as isFunction2 } from "@varlet/shared";
65
+ //#endregion
66
+ //#region src/useClickOutside.ts
116
67
  function useClickOutside(target, type, listener) {
117
- if (!inBrowser2()) {
118
- return;
119
- }
120
- const handler = (event) => {
121
- const element = isFunction2(target) ? target() : unref2(target);
122
- if (element && !element.contains(event.target)) {
123
- listener(event);
124
- }
125
- };
126
- useEventListener(document, type, handler);
68
+ if (!inBrowser()) return;
69
+ const handler = (event) => {
70
+ const element = isFunction(target) ? target() : unref(target);
71
+ if (element && !element.contains(event.target)) listener(event);
72
+ };
73
+ useEventListener(document, type, handler);
127
74
  }
128
-
129
- // src/onSmartUnmounted.ts
130
- import { onDeactivated as onDeactivated2, onUnmounted } from "vue";
75
+ //#endregion
76
+ //#region src/onSmartUnmounted.ts
131
77
  function onSmartUnmounted(hook) {
132
- let keepalive = false;
133
- onDeactivated2(() => {
134
- keepalive = true;
135
- hook();
136
- });
137
- onUnmounted(() => {
138
- if (keepalive) {
139
- return;
140
- }
141
- hook();
142
- });
78
+ let keepalive = false;
79
+ onDeactivated(() => {
80
+ keepalive = true;
81
+ hook();
82
+ });
83
+ onUnmounted(() => {
84
+ if (keepalive) return;
85
+ hook();
86
+ });
143
87
  }
144
-
145
- // src/useParent.ts
146
- import {
147
- computed,
148
- getCurrentInstance,
149
- inject,
150
- nextTick as nextTick2,
151
- onBeforeUnmount as onBeforeUnmount2,
152
- onMounted as onMounted2
153
- } from "vue";
88
+ //#endregion
89
+ //#region src/useParent.ts
154
90
  function keyInProvides(key) {
155
- const instance = getCurrentInstance();
156
- return key in instance.provides;
91
+ return key in getCurrentInstance().provides;
157
92
  }
158
93
  function useParent(key) {
159
- if (!keyInProvides(key)) {
160
- return {
161
- index: null,
162
- parentProvider: null,
163
- bindParent: null
164
- };
165
- }
166
- const provider = inject(key);
167
- const _a = provider, { childInstances, collect, clear } = _a, parentProvider = __objRest(_a, ["childInstances", "collect", "clear"]);
168
- const childInstance = getCurrentInstance();
169
- const index = computed(() => childInstances.indexOf(childInstance));
170
- const bindParent = (childProvider) => {
171
- onMounted2(() => {
172
- nextTick2().then(() => {
173
- collect(childInstance, childProvider);
174
- });
175
- });
176
- onBeforeUnmount2(() => {
177
- nextTick2().then(() => {
178
- clear(childInstance, childProvider);
179
- });
180
- });
181
- };
182
- return {
183
- index,
184
- parentProvider,
185
- bindParent
186
- };
94
+ if (!keyInProvides(key)) return {
95
+ index: null,
96
+ parentProvider: null,
97
+ bindParent: null
98
+ };
99
+ const { childInstances, collect, clear, ...parentProvider } = inject(key);
100
+ const childInstance = getCurrentInstance();
101
+ const index = computed(() => childInstances.indexOf(childInstance));
102
+ const bindParent = (childProvider) => {
103
+ onMounted(() => {
104
+ nextTick().then(() => {
105
+ collect(childInstance, childProvider);
106
+ });
107
+ });
108
+ onBeforeUnmount(() => {
109
+ nextTick().then(() => {
110
+ clear(childInstance, childProvider);
111
+ });
112
+ });
113
+ };
114
+ return {
115
+ index,
116
+ parentProvider,
117
+ bindParent
118
+ };
187
119
  }
188
-
189
- // src/useChildren.ts
190
- import {
191
- computed as computed2,
192
- getCurrentInstance as getCurrentInstance2,
193
- isVNode,
194
- provide,
195
- reactive
196
- } from "vue";
197
- import { isArray, removeItem } from "@varlet/shared";
120
+ //#endregion
121
+ //#region src/useChildren.ts
198
122
  function flatVNodes(subTree) {
199
- const vNodes = [];
200
- const flat = (subTree2) => {
201
- if (subTree2 == null ? void 0 : subTree2.component) {
202
- flat(subTree2 == null ? void 0 : subTree2.component.subTree);
203
- return;
204
- }
205
- if (isArray(subTree2 == null ? void 0 : subTree2.children)) {
206
- subTree2.children.forEach((child) => {
207
- if (isVNode(child)) {
208
- vNodes.push(child);
209
- flat(child);
210
- }
211
- });
212
- }
213
- };
214
- flat(subTree);
215
- return vNodes;
123
+ const vNodes = [];
124
+ const flat = (subTree) => {
125
+ if (subTree?.component) {
126
+ flat(subTree?.component.subTree);
127
+ return;
128
+ }
129
+ if (isArray(subTree?.children)) subTree.children.forEach((child) => {
130
+ if (isVNode(child)) {
131
+ vNodes.push(child);
132
+ flat(child);
133
+ }
134
+ });
135
+ };
136
+ flat(subTree);
137
+ return vNodes;
216
138
  }
217
139
  function useChildren(key) {
218
- const parentInstance = getCurrentInstance2();
219
- const childInstances = reactive([]);
220
- const childProviders = [];
221
- const length = computed2(() => childInstances.length);
222
- const sortInstances = () => {
223
- const vNodes = flatVNodes(parentInstance.subTree);
224
- childInstances.sort((a, b) => vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode));
225
- };
226
- const collect = (childInstance, childProvider) => {
227
- childInstances.push(childInstance);
228
- childProviders.push(childProvider);
229
- sortInstances();
230
- };
231
- const clear = (childInstance, childProvider) => {
232
- removeItem(childInstances, childInstance);
233
- removeItem(childProviders, childProvider);
234
- };
235
- const bindChildren = (parentProvider) => {
236
- provide(key, __spreadValues({
237
- childInstances,
238
- collect,
239
- clear
240
- }, parentProvider));
241
- };
242
- return {
243
- length,
244
- childProviders,
245
- bindChildren
246
- };
140
+ const parentInstance = getCurrentInstance();
141
+ const childInstances = reactive([]);
142
+ const childProviders = [];
143
+ const length = computed(() => childInstances.length);
144
+ const sortInstances = () => {
145
+ const vNodes = flatVNodes(parentInstance.subTree);
146
+ childInstances.sort((a, b) => vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode));
147
+ };
148
+ const collect = (childInstance, childProvider) => {
149
+ childInstances.push(childInstance);
150
+ childProviders.push(childProvider);
151
+ sortInstances();
152
+ };
153
+ const clear = (childInstance, childProvider) => {
154
+ removeItem(childInstances, childInstance);
155
+ removeItem(childProviders, childProvider);
156
+ };
157
+ const bindChildren = (parentProvider) => {
158
+ provide(key, {
159
+ childInstances,
160
+ collect,
161
+ clear,
162
+ ...parentProvider
163
+ });
164
+ };
165
+ return {
166
+ length,
167
+ childProviders,
168
+ bindChildren
169
+ };
247
170
  }
248
-
249
- // src/onWindowResize.ts
171
+ //#endregion
172
+ //#region src/onWindowResize.ts
250
173
  function onWindowResize(listener) {
251
- useEventListener(() => window, "resize", listener, { passive: true });
252
- useEventListener(() => window, "orientationchange", listener, { passive: true });
174
+ useEventListener(() => window, "resize", listener, { passive: true });
175
+ useEventListener(() => window, "orientationchange", listener, { passive: true });
253
176
  }
254
-
255
- // src/useInitialized.ts
256
- import { ref, watch as watch2 } from "vue";
177
+ //#endregion
178
+ //#region src/useInitialized.ts
257
179
  function useInitialized(source, value) {
258
- const initialized = ref(false);
259
- watch2(
260
- source,
261
- (newValue) => {
262
- if (value === newValue) {
263
- initialized.value = true;
264
- }
265
- },
266
- { immediate: true }
267
- );
268
- return initialized;
180
+ const initialized = ref(false);
181
+ watch(source, (newValue) => {
182
+ if (value === newValue) initialized.value = true;
183
+ }, { immediate: true });
184
+ return initialized;
269
185
  }
270
-
271
- // src/useTouch.ts
272
- import { ref as ref2 } from "vue";
273
- import { getScrollTop } from "@varlet/shared";
186
+ //#endregion
187
+ //#region src/useTouch.ts
274
188
  function getDirection(x, y) {
275
- if (x > y) {
276
- return "horizontal";
277
- }
278
- if (y > x) {
279
- return "vertical";
280
- }
189
+ if (x > y) return "horizontal";
190
+ if (y > x) return "vertical";
281
191
  }
282
192
  function useTouch() {
283
- const startX = ref2(0);
284
- const startY = ref2(0);
285
- const deltaX = ref2(0);
286
- const deltaY = ref2(0);
287
- const offsetX = ref2(0);
288
- const offsetY = ref2(0);
289
- const prevX = ref2(0);
290
- const prevY = ref2(0);
291
- const moveX = ref2(0);
292
- const moveY = ref2(0);
293
- const direction = ref2();
294
- const touching = ref2(false);
295
- const dragging = ref2(false);
296
- const startTime = ref2(0);
297
- const distance = ref2(0);
298
- let draggingAnimationFrame = null;
299
- const resetTouch = () => {
300
- startX.value = 0;
301
- startY.value = 0;
302
- deltaX.value = 0;
303
- deltaY.value = 0;
304
- offsetX.value = 0;
305
- offsetY.value = 0;
306
- prevX.value = 0;
307
- prevY.value = 0;
308
- moveX.value = 0;
309
- moveY.value = 0;
310
- direction.value = void 0;
311
- touching.value = false;
312
- dragging.value = false;
313
- startTime.value = 0;
314
- distance.value = 0;
315
- };
316
- const startTouch = (event) => {
317
- resetTouch();
318
- const { clientX: x, clientY: y } = event.touches[0];
319
- startX.value = x;
320
- startY.value = y;
321
- prevX.value = x;
322
- prevY.value = y;
323
- touching.value = true;
324
- startTime.value = performance.now();
325
- dragging.value = false;
326
- if (draggingAnimationFrame) {
327
- window.cancelAnimationFrame(draggingAnimationFrame);
328
- }
329
- };
330
- const moveTouch = (event) => {
331
- const { clientX: x, clientY: y } = event.touches[0];
332
- dragging.value = true;
333
- deltaX.value = x - startX.value;
334
- deltaY.value = y - startY.value;
335
- offsetX.value = Math.abs(deltaX.value);
336
- offsetY.value = Math.abs(deltaY.value);
337
- distance.value = Math.sqrt(offsetX.value ** 2 + offsetY.value ** 2);
338
- moveX.value = x - prevX.value;
339
- moveY.value = y - prevY.value;
340
- if (!direction.value) {
341
- direction.value = getDirection(offsetX.value, offsetY.value);
342
- }
343
- prevX.value = x;
344
- prevY.value = y;
345
- };
346
- const endTouch = () => {
347
- touching.value = false;
348
- draggingAnimationFrame = window.requestAnimationFrame(() => {
349
- dragging.value = false;
350
- });
351
- };
352
- const isReachTop = (element) => {
353
- const scrollTop = getScrollTop(element);
354
- return scrollTop === 0 && deltaY.value > 0;
355
- };
356
- const isReachBottom = (element, offset = 1) => {
357
- const { scrollHeight, clientHeight, scrollTop } = element;
358
- const offsetBottom = Math.abs(scrollHeight - scrollTop - clientHeight);
359
- return deltaY.value < 0 && offsetBottom <= offset;
360
- };
361
- return {
362
- startX,
363
- startY,
364
- deltaX,
365
- deltaY,
366
- offsetX,
367
- offsetY,
368
- prevX,
369
- prevY,
370
- moveX,
371
- moveY,
372
- direction,
373
- touching,
374
- dragging,
375
- startTime,
376
- distance,
377
- resetTouch,
378
- startTouch,
379
- moveTouch,
380
- endTouch,
381
- isReachTop,
382
- isReachBottom
383
- };
193
+ const startX = ref(0);
194
+ const startY = ref(0);
195
+ const deltaX = ref(0);
196
+ const deltaY = ref(0);
197
+ const offsetX = ref(0);
198
+ const offsetY = ref(0);
199
+ const prevX = ref(0);
200
+ const prevY = ref(0);
201
+ const moveX = ref(0);
202
+ const moveY = ref(0);
203
+ const direction = ref();
204
+ const touching = ref(false);
205
+ const dragging = ref(false);
206
+ const startTime = ref(0);
207
+ const distance = ref(0);
208
+ let draggingAnimationFrame = null;
209
+ const resetTouch = () => {
210
+ startX.value = 0;
211
+ startY.value = 0;
212
+ deltaX.value = 0;
213
+ deltaY.value = 0;
214
+ offsetX.value = 0;
215
+ offsetY.value = 0;
216
+ prevX.value = 0;
217
+ prevY.value = 0;
218
+ moveX.value = 0;
219
+ moveY.value = 0;
220
+ direction.value = void 0;
221
+ touching.value = false;
222
+ dragging.value = false;
223
+ startTime.value = 0;
224
+ distance.value = 0;
225
+ };
226
+ const startTouch = (event) => {
227
+ resetTouch();
228
+ const { clientX: x, clientY: y } = event.touches[0];
229
+ startX.value = x;
230
+ startY.value = y;
231
+ prevX.value = x;
232
+ prevY.value = y;
233
+ touching.value = true;
234
+ startTime.value = performance.now();
235
+ dragging.value = false;
236
+ if (draggingAnimationFrame) window.cancelAnimationFrame(draggingAnimationFrame);
237
+ };
238
+ const moveTouch = (event) => {
239
+ const { clientX: x, clientY: y } = event.touches[0];
240
+ dragging.value = true;
241
+ deltaX.value = x - startX.value;
242
+ deltaY.value = y - startY.value;
243
+ offsetX.value = Math.abs(deltaX.value);
244
+ offsetY.value = Math.abs(deltaY.value);
245
+ distance.value = Math.sqrt(offsetX.value ** 2 + offsetY.value ** 2);
246
+ moveX.value = x - prevX.value;
247
+ moveY.value = y - prevY.value;
248
+ if (!direction.value) direction.value = getDirection(offsetX.value, offsetY.value);
249
+ prevX.value = x;
250
+ prevY.value = y;
251
+ };
252
+ const endTouch = () => {
253
+ touching.value = false;
254
+ draggingAnimationFrame = window.requestAnimationFrame(() => {
255
+ dragging.value = false;
256
+ });
257
+ };
258
+ const isReachTop = (element) => {
259
+ return getScrollTop(element) === 0 && deltaY.value > 0;
260
+ };
261
+ const isReachBottom = (element, offset = 1) => {
262
+ const { scrollHeight, clientHeight, scrollTop } = element;
263
+ const offsetBottom = Math.abs(scrollHeight - scrollTop - clientHeight);
264
+ return deltaY.value < 0 && offsetBottom <= offset;
265
+ };
266
+ return {
267
+ startX,
268
+ startY,
269
+ deltaX,
270
+ deltaY,
271
+ offsetX,
272
+ offsetY,
273
+ prevX,
274
+ prevY,
275
+ moveX,
276
+ moveY,
277
+ direction,
278
+ touching,
279
+ dragging,
280
+ startTime,
281
+ distance,
282
+ resetTouch,
283
+ startTouch,
284
+ moveTouch,
285
+ endTouch,
286
+ isReachTop,
287
+ isReachBottom
288
+ };
384
289
  }
385
-
386
- // src/useId.ts
387
- import { getCurrentInstance as getCurrentInstance3, ref as ref3 } from "vue";
388
- import { kebabCase } from "@varlet/shared";
290
+ //#endregion
291
+ //#region src/useId.ts
389
292
  function useId() {
390
- const id = ref3();
391
- const instance = getCurrentInstance3();
392
- const name = kebabCase(instance.type.name);
393
- id.value = process.env.NODE_ENV === "test" ? `${name}-mock-id` : `${name}-${instance.uid}`;
394
- return id;
293
+ const id = ref();
294
+ const instance = getCurrentInstance();
295
+ const name = kebabCase(instance.type.name);
296
+ id.value = process.env.NODE_ENV === "test" ? `${name}-mock-id` : `${name}-${instance.uid}`;
297
+ return id;
395
298
  }
396
-
397
- // src/useClientId.ts
398
- import { getCurrentInstance as getCurrentInstance4, onMounted as onMounted3, ref as ref4 } from "vue";
399
- import { kebabCase as kebabCase2 } from "@varlet/shared";
299
+ //#endregion
300
+ //#region src/useClientId.ts
400
301
  function useClientId() {
401
- const instance = getCurrentInstance4();
402
- const name = kebabCase2(instance.type.name);
403
- const id = ref4(process.env.NODE_ENV === "test" ? `${name}-mock-id` : void 0);
404
- onMounted3(() => {
405
- if (process.env.NODE_ENV !== "test") {
406
- id.value = `${name}-${instance.uid}`;
407
- }
408
- });
409
- return id;
302
+ const instance = getCurrentInstance();
303
+ const name = kebabCase(instance.type.name);
304
+ const id = ref(process.env.NODE_ENV === "test" ? `${name}-mock-id` : void 0);
305
+ onMounted(() => {
306
+ if (process.env.NODE_ENV !== "test") id.value = `${name}-${instance.uid}`;
307
+ });
308
+ return id;
410
309
  }
411
-
412
- // src/useWindowSize.ts
413
- import { ref as ref5 } from "vue";
414
- import { inBrowser as inBrowser3 } from "@varlet/shared";
310
+ //#endregion
311
+ //#region src/useWindowSize.ts
415
312
  function useWindowSize(options = {}) {
416
- const { initialWidth = 0, initialHeight = 0 } = options;
417
- const width = ref5(initialWidth);
418
- const height = ref5(initialHeight);
419
- const update = () => {
420
- if (!inBrowser3()) {
421
- return;
422
- }
423
- width.value = window.innerWidth;
424
- height.value = window.innerHeight;
425
- };
426
- onSmartMounted(update);
427
- onWindowResize(update);
428
- return {
429
- width,
430
- height
431
- };
313
+ const { initialWidth = 0, initialHeight = 0 } = options;
314
+ const width = ref(initialWidth);
315
+ const height = ref(initialHeight);
316
+ const update = () => {
317
+ if (!inBrowser()) return;
318
+ width.value = window.innerWidth;
319
+ height.value = window.innerHeight;
320
+ };
321
+ onSmartMounted(update);
322
+ onWindowResize(update);
323
+ return {
324
+ width,
325
+ height
326
+ };
432
327
  }
433
-
434
- // src/useVModel.ts
435
- import { computed as computed3, nextTick as nextTick3, ref as ref6, watch as watch3 } from "vue";
436
- import { call } from "@varlet/shared";
328
+ //#endregion
329
+ //#region src/useVModel.ts
437
330
  function useVModel(props, key, options = {}) {
438
- const { passive = true, eventName, defaultValue, emit } = options;
439
- const event = eventName != null ? eventName : `onUpdate:${key.toString()}`;
440
- const getValue = () => {
441
- var _a;
442
- return (_a = props[key]) != null ? _a : defaultValue;
443
- };
444
- if (!passive) {
445
- return computed3({
446
- get() {
447
- return getValue();
448
- },
449
- set(value) {
450
- emit ? emit(event, value) : call(props[event], value);
451
- }
452
- });
453
- }
454
- const proxy = ref6(getValue());
455
- let shouldEmit = true;
456
- watch3(
457
- () => props[key],
458
- () => {
459
- shouldEmit = false;
460
- proxy.value = getValue();
461
- nextTick3(() => {
462
- shouldEmit = true;
463
- });
464
- }
465
- );
466
- watch3(
467
- () => proxy.value,
468
- (newValue) => {
469
- if (!shouldEmit) {
470
- return;
471
- }
472
- emit ? emit(event, newValue) : call(props[event], newValue);
473
- }
474
- );
475
- return proxy;
331
+ const { passive = true, eventName, defaultValue, emit } = options;
332
+ const event = eventName ?? `onUpdate:${key.toString()}`;
333
+ const getValue = () => props[key] ?? defaultValue;
334
+ if (!passive) return computed({
335
+ get() {
336
+ return getValue();
337
+ },
338
+ set(value) {
339
+ emit ? emit(event, value) : call(props[event], value);
340
+ }
341
+ });
342
+ const proxy = ref(getValue());
343
+ let shouldEmit = true;
344
+ watch(() => props[key], () => {
345
+ shouldEmit = false;
346
+ proxy.value = getValue();
347
+ nextTick(() => {
348
+ shouldEmit = true;
349
+ });
350
+ });
351
+ watch(() => proxy.value, (newValue) => {
352
+ if (!shouldEmit) return;
353
+ emit ? emit(event, newValue) : call(props[event], newValue);
354
+ });
355
+ return proxy;
476
356
  }
477
-
478
- // src/useMotion.ts
479
- import { ref as ref7 } from "vue";
480
- import { isFunction as isFunction3, motion } from "@varlet/shared";
357
+ //#endregion
358
+ //#region src/useMotion.ts
481
359
  function useMotion(options) {
482
- const value = ref7(getter(options.from));
483
- const state = ref7("pending");
484
- let ctx = createMotionContext();
485
- function getter(value2) {
486
- return isFunction3(value2) ? value2() : value2;
487
- }
488
- function reset() {
489
- ctx.reset();
490
- value.value = getter(options.from);
491
- state.value = "pending";
492
- ctx = createMotionContext();
493
- }
494
- function start() {
495
- ctx.start();
496
- }
497
- function pause() {
498
- ctx.pause();
499
- }
500
- function createMotionContext() {
501
- return motion({
502
- from: getter(options.from),
503
- to: getter(options.to),
504
- duration: options.duration ? getter(options.duration) : 300,
505
- timingFunction: options.timingFunction,
506
- onStateChange(newState) {
507
- state.value = newState;
508
- },
509
- frame({ value: newValue, done }) {
510
- var _a;
511
- value.value = newValue;
512
- if (done) {
513
- (_a = options.onFinished) == null ? void 0 : _a.call(options, value.value);
514
- }
515
- }
516
- });
517
- }
518
- return {
519
- value,
520
- state,
521
- start,
522
- pause,
523
- reset
524
- };
360
+ const value = ref(getter(options.from));
361
+ const state = ref("pending");
362
+ let ctx = createMotionContext();
363
+ function getter(value) {
364
+ return isFunction(value) ? value() : value;
365
+ }
366
+ function reset() {
367
+ ctx.reset();
368
+ value.value = getter(options.from);
369
+ state.value = "pending";
370
+ ctx = createMotionContext();
371
+ }
372
+ function start() {
373
+ ctx.start();
374
+ }
375
+ function pause() {
376
+ ctx.pause();
377
+ }
378
+ function createMotionContext() {
379
+ return motion({
380
+ from: getter(options.from),
381
+ to: getter(options.to),
382
+ duration: options.duration ? getter(options.duration) : 300,
383
+ timingFunction: options.timingFunction,
384
+ onStateChange(newState) {
385
+ state.value = newState;
386
+ },
387
+ frame({ value: newValue, done }) {
388
+ value.value = newValue;
389
+ if (done) options.onFinished?.(value.value);
390
+ }
391
+ });
392
+ }
393
+ return {
394
+ value,
395
+ state,
396
+ start,
397
+ pause,
398
+ reset
399
+ };
525
400
  }
526
- export {
527
- keyInProvides,
528
- onSmartMounted,
529
- onSmartUnmounted,
530
- onWindowResize,
531
- useChildren,
532
- useClickOutside,
533
- useClientId,
534
- useEventListener,
535
- useId,
536
- useInitialized,
537
- useMotion,
538
- useParent,
539
- useTouch,
540
- useVModel,
541
- useWindowSize
542
- };
401
+ //#endregion
402
+ export { keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };