plain-design 1.0.0-beta.71 → 1.0.0-beta.72

package/src/packages/components/useWatchAutoClear/index.ts

@@ -1,5 +1,5 @@
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-
-export {useWatchAutoClear};
-
-export default useWatchAutoClear;
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export {useWatchAutoClear};
+
+export default useWatchAutoClear;

package/src/packages/directives/ClickWave/click-wave.scss

@@ -1,57 +1,57 @@
-$waves: (
-  large:6px,
-  normal:4px,
-  small:4px,
-  mini:4px,
-);
-
-@each $key, $value in $waves {
-  [plain-click-node-#{$key}] {
-    &.plain-click-node, & .plain-click-node {
-      position: relative;
-
-      &:after {
-        display: none;
-
-        content: '';
-        position: absolute;
-        top: 1px;
-        left: 1px;
-        bottom: 1px;
-        right: 1px;
-        border-radius: inherit;
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        opacity: 0.6;
-        animation: fade-effect-#{$key} 1s cubic-bezier(0.08, 0.82, 0.17, 1), wave-effect-#{$key} 100ms cubic-bezier(0.08, 0.82, 0.17, 1);
-        animation-fill-mode: forwards;
-        pointer-events: none;
-      }
-    }
-
-    &[plain-click-node-waving] {
-      &.plain-click-node, & .plain-click-node {
-        &:after {
-          display: initial;
-        }
-      }
-    }
-  }
-
-  @keyframes wave-effect-#{$key} {
-    100% {
-      top: -$value;
-      left: -$value;
-      bottom: -$value;
-      right: -$value;
-      border-width: 6px;
-    }
-  }
-
-  @keyframes fade-effect-#{$key} {
-    100% {
-      opacity: 0;
-    }
-  }
-}
+$waves: (
+  large:6px,
+  normal:4px,
+  small:4px,
+  mini:4px,
+);
+
+@each $key, $value in $waves {
+  [plain-click-node-#{$key}] {
+    &.plain-click-node, & .plain-click-node {
+      position: relative;
+
+      &:after {
+        display: none;
+
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        bottom: 1px;
+        right: 1px;
+        border-radius: inherit;
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        opacity: 0.6;
+        animation: fade-effect-#{$key} 1s cubic-bezier(0.08, 0.82, 0.17, 1), wave-effect-#{$key} 100ms cubic-bezier(0.08, 0.82, 0.17, 1);
+        animation-fill-mode: forwards;
+        pointer-events: none;
+      }
+    }
+
+    &[plain-click-node-waving] {
+      &.plain-click-node, & .plain-click-node {
+        &:after {
+          display: initial;
+        }
+      }
+    }
+  }
+
+  @keyframes wave-effect-#{$key} {
+    100% {
+      top: -$value;
+      left: -$value;
+      bottom: -$value;
+      right: -$value;
+      border-width: 6px;
+    }
+  }
+
+  @keyframes fade-effect-#{$key} {
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/packages/directives/ClickWave/index.tsx

@@ -1,78 +1,78 @@
-import {onBeforeUnmount, watch} from 'plain-design-composition';
-import './click-wave.scss';
-import {delay} from "plain-utils/utils/delay";
-import {ThemeSize} from "../../uses/useStyle";
-
-export interface ClickWaveOptions {
-  disabled?: boolean,
-  size?: () => typeof ThemeSize.TYPE,
-}
-
-function createClickWaveManager(el: HTMLElement, o?: ClickWaveOptions | string) {
-  let option: ClickWaveOptions;
-  let wavingTimer = null as null | number;
-
-  const onClick = () => {
-    // console.log(this.option,this.option.disabled === true)
-    if (option.disabled) return;
-    if (!!wavingTimer) return;
-    el.setAttribute('plain-click-node-waving', 'active');
-    wavingTimer = setTimeout(() => {
-      el.removeAttribute('plain-click-node-waving');
-      wavingTimer = null;
-    }, 500) as any as number;
-  };
-
-  const updateOption = (o?: ClickWaveOptions | string) => {
-    o = o || {};
-    if (typeof o === "string") {
-      o = { size: o as any };
-    }
-    option = o;
-  };
-
-  updateOption(o);
-  el.setAttribute(`plain-click-node-${option!.size?.() || 'normal'}`, 'active');
-  el.addEventListener('mousedown', onClick, true);
-
-  return {
-    updateOption,
-    destroy: () => {el.removeEventListener('click', onClick, true);},
-  };
-}
-
-type WaveManager = ReturnType<typeof createClickWaveManager>
-
-/**
- * 代替 plain-ui for Vue3.0 中 v-click-wave 指令
- * @author  韦胜健
- * @date    2021/3/16 11:03
- */
-export function useClickWave(
-  {
-    elGetter,
-    optionsGetter,
-  }: {
-    elGetter: () => HTMLElement | undefined | null,
-    optionsGetter?: () => string | ClickWaveOptions,
-  }) {
-
-  const state = {
-    waveManager: null as null | WaveManager,
-  };
-
-  watch(elGetter, async el => {
-    await delay(0);
-    if (!!state.waveManager) {state.waveManager.destroy();}
-    state.waveManager = null;
-    !!el && (state.waveManager = createClickWaveManager(el, !!optionsGetter ? optionsGetter() : undefined));
-  }, { immediate: true });
-
-  !!optionsGetter && watch(optionsGetter, opt => {
-    !!state.waveManager && state.waveManager.updateOption(opt);
-  });
-
-  onBeforeUnmount(() => {
-    !!state.waveManager && state.waveManager.destroy();
-  });
-}
+import {onBeforeUnmount, watch} from 'plain-design-composition';
+import './click-wave.scss';
+import {delay} from "plain-utils/utils/delay";
+import {ThemeSize} from "../../uses/useStyle";
+
+export interface ClickWaveOptions {
+  disabled?: boolean,
+  size?: () => typeof ThemeSize.TYPE,
+}
+
+function createClickWaveManager(el: HTMLElement, o?: ClickWaveOptions | string) {
+  let option: ClickWaveOptions;
+  let wavingTimer = null as null | number;
+
+  const onClick = () => {
+    // console.log(this.option,this.option.disabled === true)
+    if (option.disabled) return;
+    if (!!wavingTimer) return;
+    el.setAttribute('plain-click-node-waving', 'active');
+    wavingTimer = setTimeout(() => {
+      el.removeAttribute('plain-click-node-waving');
+      wavingTimer = null;
+    }, 500) as any as number;
+  };
+
+  const updateOption = (o?: ClickWaveOptions | string) => {
+    o = o || {};
+    if (typeof o === "string") {
+      o = { size: o as any };
+    }
+    option = o;
+  };
+
+  updateOption(o);
+  el.setAttribute(`plain-click-node-${option!.size?.() || 'normal'}`, 'active');
+  el.addEventListener('mousedown', onClick, true);
+
+  return {
+    updateOption,
+    destroy: () => {el.removeEventListener('click', onClick, true);},
+  };
+}
+
+type WaveManager = ReturnType<typeof createClickWaveManager>
+
+/**
+ * 代替 plain-ui for Vue3.0 中 v-click-wave 指令
+ * @author  韦胜健
+ * @date    2021/3/16 11:03
+ */
+export function useClickWave(
+  {
+    elGetter,
+    optionsGetter,
+  }: {
+    elGetter: () => HTMLElement | undefined | null,
+    optionsGetter?: () => string | ClickWaveOptions,
+  }) {
+
+  const state = {
+    waveManager: null as null | WaveManager,
+  };
+
+  watch(elGetter, async el => {
+    await delay(0);
+    if (!!state.waveManager) {state.waveManager.destroy();}
+    state.waveManager = null;
+    !!el && (state.waveManager = createClickWaveManager(el, !!optionsGetter ? optionsGetter() : undefined));
+  }, { immediate: true });
+
+  !!optionsGetter && watch(optionsGetter, opt => {
+    !!state.waveManager && state.waveManager.updateOption(opt);
+  });
+
+  onBeforeUnmount(() => {
+    !!state.waveManager && state.waveManager.destroy();
+  });
+}

package/src/packages/directives/ResizeDetector/index.tsx

@@ -1,100 +1,107 @@
-import {onBeforeUnmount, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
-
-export interface ResizeDetectFuncParam {
-  width?: number;
-  height?: number;
-  oldWidth?: number;
-  oldHeight?: number;
-  el?: HTMLElement;
-
-  [key: string]: any;
-}
-
-export interface ResizeDetectFunc {(option: ResizeDetectFuncParam): void;}
-
-function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc) {
-
-  const state = {
-    observer: undefined as undefined | MutationObserver,
-    width: undefined as undefined | number,
-    height: undefined as undefined | number,
-    oldWidth: undefined as undefined | number,
-    oldHeight: undefined as undefined | number,
-  };
-
-  const runCallback = (data: ResizeDetectFuncParam) => {
-    Object.keys(data).forEach(key => {
-      if (data[key] != null && typeof data[key] === 'number') data[key] = Math.ceil(data[key]);
-    });
-    callback(data);
-  };
-
-  const detect = () => {
-    const { scrollHeight: height, scrollWidth: width } = el;
-    if (width === state.width && height === state.height) return;
-    const ret = {} as ResizeDetectFuncParam;
-    if (width !== state.width) {
-      ret.width = width;
-      ret.oldWidth = state.width;
-      state.width = width;
-    }
-    if (height !== state.height) {
-      ret.height = height;
-      ret.oldHeight = state.height;
-      state.height = height;
-    }
-    runCallback(ret);
-  };
-
-  const destroy = () => {
-    if (!!state.observer) {
-      state.observer.disconnect();
-      state.observer = undefined;
-    }
-  };
-
-  const init = () => {
-    if (!el) {return console.error(`el is ${typeof el}`);}
-    state.observer = new MutationObserver(detect);
-    state.observer.observe(el, { childList: true, subtree: true });
-    // const {width, height} = el.getBoundingClientRect()
-    const { scrollHeight, scrollWidth } = el;
-    state.width = scrollWidth;
-    state.height = scrollHeight;
-    runCallback({ ...state, el, });
-  };
-
-  init();
-
-  return {
-    detect,
-    destroy,
-  };
-}
-
-type ResizeDetector = ReturnType<typeof createResizeDetector>
-
-export function useResizeDetector(
-  {
-    elGetter,
-    onResize,
-  }: {
-    elGetter: () => HTMLElement | undefined | null,
-    onResize: ResizeDetectFunc,
-  }) {
-
-  const state = { resizeDetector: null as null | ResizeDetector, };
-
-  watch(elGetter, async el => {
-    await delay(0);
-    if (!!state.resizeDetector) {state.resizeDetector.destroy();}
-    state.resizeDetector = null;
-    !!el && (state.resizeDetector = createResizeDetector(el, onResize));
-  }, { immediate: true });
-
-  !!state.resizeDetector && state.resizeDetector.detect();
-
-  onBeforeUnmount(() => {!!state.resizeDetector && state.resizeDetector.destroy();});
-}
-
+import {onBeforeUnmount, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+export interface ResizeDetectFuncParam {
+  width?: number;
+  height?: number;
+  oldWidth?: number;
+  oldHeight?: number;
+  el?: HTMLElement;
+
+  [key: string]: any;
+}
+
+export interface ResizeDetectFunc {(option: ResizeDetectFuncParam): void;}
+
+function createResizeDetector(el: HTMLElement, callback: ResizeDetectFunc, mutateOption?: MutationObserverInit) {
+
+  const state = {
+    observer: undefined as undefined | MutationObserver,
+    width: undefined as undefined | number,
+    height: undefined as undefined | number,
+    oldWidth: undefined as undefined | number,
+    oldHeight: undefined as undefined | number,
+  };
+
+  const runCallback = (data: ResizeDetectFuncParam) => {
+    Object.keys(data).forEach(key => {
+      if (data[key] != null && typeof data[key] === 'number') data[key] = Math.ceil(data[key]);
+    });
+    callback(data);
+  };
+
+  const detect = () => {
+    const { scrollHeight: height, scrollWidth: width } = el;
+    if (width === state.width && height === state.height) return;
+    const ret = {} as ResizeDetectFuncParam;
+    if (width !== state.width) {
+      ret.width = width;
+      ret.oldWidth = state.width;
+      state.width = width;
+    }
+    if (height !== state.height) {
+      ret.height = height;
+      ret.oldHeight = state.height;
+      state.height = height;
+    }
+
+    runCallback(ret);
+  };
+
+  const destroy = () => {
+    if (!!state.observer) {
+      state.observer.disconnect();
+      state.observer = undefined;
+    }
+  };
+
+  const init = () => {
+    if (!el) {return console.error(`el is ${typeof el}`);}
+    state.observer = new MutationObserver(detect);
+    state.observer.observe(el, {
+      childList: true,
+      subtree: true,
+      ...mutateOption,
+    });
+    // const {width, height} = el.getBoundingClientRect()
+    const { scrollHeight, scrollWidth } = el;
+    state.width = scrollWidth;
+    state.height = scrollHeight;
+    runCallback({ ...state, el, });
+  };
+
+  init();
+
+  return {
+    detect,
+    destroy,
+  };
+}
+
+type ResizeDetector = ReturnType<typeof createResizeDetector>
+
+export function useResizeDetector(
+  {
+    elGetter,
+    onResize,
+    mutateOption,
+  }: {
+    elGetter: () => HTMLElement | undefined | null,
+    onResize: ResizeDetectFunc,
+    mutateOption?: MutationObserverInit,
+  }) {
+
+  const state = { resizeDetector: null as null | ResizeDetector, };
+
+  watch(elGetter, async el => {
+    await delay(0);
+    if (!!state.resizeDetector) {state.resizeDetector.destroy();}
+    state.resizeDetector = null;
+    !!el && (state.resizeDetector = createResizeDetector(el, onResize, mutateOption));
+  }, { immediate: true });
+
+  !!state.resizeDetector && state.resizeDetector.detect();
+
+  onBeforeUnmount(() => {!!state.resizeDetector && state.resizeDetector.destroy();});
+}
+