fix: remove window

components/_util/css-animation/Event.js

@@ -87,7 +87,7 @@ const TransitionEvents = {
 
   addStartEventListener(node, eventListener) {
     if (startEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
+      setTimeout(eventListener, 0);
       return;
     }
     startEvents.forEach(startEvent => {
@@ -109,7 +109,7 @@ const TransitionEvents = {
 
   addEndEventListener(node, eventListener) {
     if (endEvents.length === 0) {
-      window.setTimeout(eventListener, 0);
+      setTimeout(eventListener, 0);
       return;
     }
     endEvents.forEach(endEvent => {

components/_util/css-animation/index.js

@@ -3,6 +3,7 @@
 import Event from './Event';
 import classes from '../component-classes';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
+import { inBrowser } from '../env';
 
 const isCssAnimationSupported = Event.endEvents.length !== 0;
 const capitalPrefixes = [
@@ -15,6 +16,7 @@ const capitalPrefixes = [
 const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
 
 function getStyleProperty(node, name) {
+  if (inBrowser) return '';
   // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
   const style = window.getComputedStyle(node, null);
   let ret = '';

components/_util/dom-closest.js

@@ -1,24 +0,0 @@
-/**
- * source by `dom-closest`
- * https://github.com/necolas/dom-closest.git
- */
-
-import matches from './dom-matches';
-
-/**
- * @param element {Element}
- * @param selector {String}
- * @param context {Element=}
- * @return {Element}
- */
-export default function (element, selector, context) {
-  context = context || document;
-  // guard against orphans
-  element = { parentNode: element };
-
-  while ((element = element.parentNode) && element !== context) {
-    if (matches(element, selector)) {
-      return element;
-    }
-  }
-}

components/_util/dom-matches.js

@@ -1,47 +0,0 @@
-/**
- * source by `dom-matches`
- * https://github.com/necolas/dom-matches.git
- */
-
-/**
- * Determine if a DOM element matches a CSS selector
- *
- * @param {Element} elem
- * @param {String} selector
- * @return {Boolean}
- * @api public
- */
-
-export default function matches(elem, selector) {
-  // Vendor-specific implementations of `Element.prototype.matches()`.
-  const proto = window.Element.prototype;
-  const nativeMatches =
-    proto.matches ||
-    proto.mozMatchesSelector ||
-    proto.msMatchesSelector ||
-    proto.oMatchesSelector ||
-    proto.webkitMatchesSelector;
-
-  if (!elem || elem.nodeType !== 1) {
-    return false;
-  }
-
-  const parentElem = elem.parentNode;
-
-  // use native 'matches'
-  if (nativeMatches) {
-    return nativeMatches.call(elem, selector);
-  }
-
-  // native support for `matches` is missing and a fallback is required
-  const nodes = parentElem.querySelectorAll(selector);
-  const len = nodes.length;
-
-  for (let i = 0; i < len; i++) {
-    if (nodes[i] === elem) {
-      return true;
-    }
-  }
-
-  return false;
-}

components/_util/transition.tsx

@@ -147,7 +147,7 @@ const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSM
       style.value = getCurrentHeight(node);
     },
     onLeave: node => {
-      window.setTimeout(() => {
+      setTimeout(() => {
         style.value = getCollapsedHeight(node);
       });
     },

components/_util/wave.jsx

@@ -129,7 +129,7 @@ export default defineComponent({
           getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
           getComputedStyle(node).getPropertyValue('border-color') ||
           getComputedStyle(node).getPropertyValue('background-color');
-        this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
+        this.clickWaveTimeoutId = setTimeout(() => this.onClick(node, waveColor), 0);
         raf.cancel(this.animationStartId);
         this.animationStart = true;
 

components/button/button.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
       val => {
         clearTimeout(delayTimeoutRef.value);
         if (typeof loadingOrDelay.value === 'number') {
-          delayTimeoutRef.value = window.setTimeout(() => {
+          delayTimeoutRef.value = setTimeout(() => {
             innerLoading.value = val;
           }, loadingOrDelay.value);
         } else {

components/form/ErrorList.tsx

@@ -24,14 +24,14 @@ export default defineComponent({
     const timeout = ref();
     const cacheErrors = ref([...props.errors]);
     watch([() => [...props.errors], () => props.help], newValues => {
-      window.clearTimeout(timeout.value);
+      clearTimeout(timeout.value);
       if (props.help) {
         visible.value = !!(props.errors && props.errors.length);
         if (visible.value) {
           cacheErrors.value = newValues[0];
         }
       } else {
-        timeout.value = window.setTimeout(() => {
+        timeout.value = setTimeout(() => {
           visible.value = !!(props.errors && props.errors.length);
           if (visible.value) {
             cacheErrors.value = newValues[0];
@@ -40,7 +40,7 @@ export default defineComponent({
       }
     });
     onBeforeUnmount(() => {
-      window.clearTimeout(timeout.value);
+      clearTimeout(timeout.value);
     });
     // Memo status in same visible
     watch([visible, status], () => {

components/menu/src/Menu.tsx

@@ -214,10 +214,10 @@ export default defineComponent({
       { immediate: true },
     );
 
-    let timeout: number;
+    let timeout: any;
     const changeActiveKeys = (keys: Key[]) => {
-      window.clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
         if (props.activeKey === undefined) {
           activeKeys.value = keys;
         }

components/statistic/Countdown.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
   }),
   emits: ['finish', 'change'],
   setup(props, { emit }) {
-    const countdownId = ref<number>();
+    const countdownId = ref<any>();
     const statistic = ref();
     const syncTimer = () => {
       const { value } = props;
@@ -32,7 +32,7 @@ export default defineComponent({
     const startTimer = () => {
       if (countdownId.value) return;
       const timestamp = getTime(props.value);
-      countdownId.value = window.setInterval(() => {
+      countdownId.value = setInterval(() => {
         statistic.value.$forceUpdate();
         if (timestamp > Date.now()) {
           emit('change', timestamp - Date.now());

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -181,16 +181,16 @@ export default defineComponent<FilterDropdownProps<any>>({
     const openRef = ref();
 
     const onOpenChange = (keys: string[]) => {
-      openRef.value = window.setTimeout(() => {
+      openRef.value = setTimeout(() => {
         openKeys.value = keys;
       });
     };
     const onMenuClick = () => {
-      window.clearTimeout(openRef.value);
+      clearTimeout(openRef.value);
     };
 
     onBeforeUnmount(() => {
-      window.clearTimeout(openRef.value);
+      clearTimeout(openRef.value);
     });
 
     // ======================= Submit ========================

components/tabs/src/TabNavList/index.tsx

@@ -129,7 +129,7 @@ export default defineComponent({
     };
 
     // ========================= Mobile ========================
-    const touchMovingRef = ref<number>();
+    const touchMovingRef = ref<any>();
     const [lockAnimation, setLockAnimation] = useState<number>();
 
     const doLockAnimation = () => {
@@ -137,7 +137,7 @@ export default defineComponent({
     };
 
     const clearTouchMoving = () => {
-      window.clearTimeout(touchMovingRef.value);
+      clearTimeout(touchMovingRef.value);
     };
     const doMove = (setState: (fn: (val: number) => number) => void, offset: number) => {
       setState((value: number) => {
@@ -171,7 +171,7 @@ export default defineComponent({
     watch(lockAnimation, () => {
       clearTouchMoving();
       if (lockAnimation.value) {
-        touchMovingRef.value = window.setTimeout(() => {
+        touchMovingRef.value = setTimeout(() => {
           setLockAnimation(0);
         }, 100);
       }

components/tabs/src/hooks/useTouchMove.ts

@@ -18,14 +18,14 @@ export default function useTouchMove(
   const [lastTimestamp, setLastTimestamp] = useState<number>(0);
   const [lastTimeDiff, setLastTimeDiff] = useState<number>(0);
   const [lastOffset, setLastOffset] = useState<{ x: number; y: number }>();
-  const motionRef = ref<number>();
+  const motionInterval = ref<any>();
 
   // ========================= Events =========================
   // >>> Touch events
   function onTouchStart(e: TouchEvent) {
     const { screenX, screenY } = e.touches[0];
     setTouchPosition({ x: screenX, y: screenY });
-    window.clearInterval(motionRef.value);
+    clearInterval(motionInterval.value);
   }
 
   function onTouchMove(e: TouchEvent) {
@@ -62,9 +62,9 @@ export default function useTouchMove(
       let currentX = distanceX;
       let currentY = distanceY;
 
-      motionRef.value = window.setInterval(() => {
+      motionInterval.value = setInterval(() => {
         if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
-          window.clearInterval(motionRef.value);
+          clearInterval(motionInterval.value);
           return;
         }
 

components/typography/Base.tsx

@@ -139,7 +139,7 @@ const Base = defineComponent<InternalBlockProps>({
     });
 
     onBeforeUnmount(() => {
-      window.clearTimeout(state.copyId);
+      clearTimeout(state.copyId);
       raf.cancel(state.rafId);
     });
 
@@ -223,7 +223,7 @@ const Base = defineComponent<InternalBlockProps>({
           copyConfig.onCopy();
         }
 
-        state.copyId = window.setTimeout(() => {
+        state.copyId = setTimeout(() => {
           state.copied = false;
         }, 3000);
       });

components/vc-align/hooks/useBuffer.tsx

@@ -5,7 +5,7 @@ export default (callback: () => boolean, buffer: ComputedRef<number>) => {
   let timeout = null;
 
   function cancelTrigger() {
-    window.clearTimeout(timeout);
+    clearTimeout(timeout);
   }
 
   function trigger(force?: boolean) {
@@ -17,12 +17,12 @@ export default (callback: () => boolean, buffer: ComputedRef<number>) => {
 
       called = true;
       cancelTrigger();
-      timeout = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         called = false;
       }, buffer.value);
     } else {
       cancelTrigger();
-      timeout = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         called = false;
         trigger();
       }, buffer.value);

components/vc-mentions/src/Mentions.tsx

@@ -173,7 +173,7 @@ export default defineComponent({
       onBlur(event);
     };
     const onFocus = (event: Event) => {
-      window.clearTimeout(focusId.value);
+      clearTimeout(focusId.value);
       const { isFocus } = state;
       if (!isFocus && event) {
         emit('focus', event);
@@ -181,7 +181,7 @@ export default defineComponent({
       state.isFocus = true;
     };
     const onBlur = (event: Event) => {
-      focusId.value = window.setTimeout(() => {
+      focusId.value = setTimeout(() => {
         state.isFocus = false;
         stopMeasure();
         emit('blur', event);

components/vc-picker/RangePicker.tsx

@@ -395,7 +395,7 @@ function RangerPicker<DateType>() {
       function triggerOpenAndFocus(index: 0 | 1) {
         triggerOpen(true, index);
         // Use setTimeout to make sure panel DOM exists
-        window.setTimeout(() => {
+        setTimeout(() => {
           const inputRef = [startInputRef, endInputRef][index];
           if (inputRef.value) {
             inputRef.value.focus();

components/vc-select/hooks/useDelayReset.ts

@@ -9,10 +9,10 @@ export default function useDelayReset(
   timeout = 10,
 ): [Ref<Boolean>, (val: boolean, callback?: () => void) => void, () => void] {
   const bool = ref(false);
-  let delay: number;
+  let delay: any;
 
   const cancelLatest = () => {
-    window.clearTimeout(delay);
+    clearTimeout(delay);
   };
 
   onMounted(() => {
@@ -20,7 +20,7 @@ export default function useDelayReset(
   });
   const delaySetBool = (value: boolean, callback: () => void) => {
     cancelLatest();
-    delay = window.setTimeout(() => {
+    delay = setTimeout(() => {
       bool.value = value;
       if (callback) {
         callback();

components/vc-select/hooks/useLock.ts

@@ -8,10 +8,10 @@ import { onBeforeUpdate } from 'vue';
  */
 export default function useLock(duration = 250): [() => boolean | null, (lock: boolean) => void] {
   let lock: boolean | null = null;
-  let timeout: number;
+  let timeout: any;
 
   onBeforeUpdate(() => {
-    window.clearTimeout(timeout);
+    clearTimeout(timeout);
   });
 
   function doLock(locked: boolean) {
@@ -19,8 +19,8 @@ export default function useLock(duration = 250): [() => boolean | null, (lock: b
       lock = locked;
     }
 
-    window.clearTimeout(timeout);
-    timeout = window.setTimeout(() => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
       lock = null;
     }, duration);
   }

components/vc-table/hooks/useFrame.ts

@@ -35,17 +35,17 @@ export function useTimeoutLock<State>(
   defaultState?: State,
 ): [(state: UnwrapRef<State>) => void, () => UnwrapRef<State> | null] {
   const frameRef = ref<State | null>(defaultState || null);
-  const timeoutRef = ref<number>();
+  const timeoutRef = ref<any>();
 
   function cleanUp() {
-    window.clearTimeout(timeoutRef.value);
+    clearTimeout(timeoutRef.value);
   }
 
   function setState(newState: UnwrapRef<State>) {
     frameRef.value = newState;
     cleanUp();
 
-    timeoutRef.value = window.setTimeout(() => {
+    timeoutRef.value = setTimeout(() => {
       frameRef.value = null;
       timeoutRef.value = undefined;
     }, 100);

site/src/components/DemoBox.vue

@@ -78,7 +78,7 @@
       </div>
     </section>
     <section :class="highlightClass">
-      <div class="highlight" ref="codeRef">
+      <div ref="codeRef" class="highlight">
         <slot v-if="type === 'TS'" name="htmlCode" />
         <slot v-else name="jsVersionHtml" />
       </div>