yc-pro-components 0.0.1

package/lib/components/yc-count-to/src/normal/index.d.ts

@@ -0,0 +1,136 @@
+import { DefineComponent, PropType, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
+declare const _default: DefineComponent<{
+    startVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    endVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<number>;
+        default: number;
+    };
+    autoplay: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    decimals: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+    color: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    fontSize: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    decimal: {
+        type: PropType<string>;
+        default: string;
+    };
+    separator: {
+        type: PropType<string>;
+        default: string;
+    };
+    prefix: {
+        type: PropType<string>;
+        default: string;
+    };
+    suffix: {
+        type: PropType<string>;
+        default: string;
+    };
+    useEasing: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    easingFn: {
+        type: PropType<(t: number, b: number, c: number, d: number) => number>;
+        default(t: number, b: number, c: number, d: number): number;
+    };
+}, (() => any) & {
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+    reset: () => void;
+    pauseResume: () => void;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "callback")[], "mounted" | "callback", PublicProps, Readonly< ExtractPropTypes<{
+    startVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    endVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<number>;
+        default: number;
+    };
+    autoplay: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    decimals: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+    color: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    fontSize: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    decimal: {
+        type: PropType<string>;
+        default: string;
+    };
+    separator: {
+        type: PropType<string>;
+        default: string;
+    };
+    prefix: {
+        type: PropType<string>;
+        default: string;
+    };
+    suffix: {
+        type: PropType<string>;
+        default: string;
+    };
+    useEasing: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    easingFn: {
+        type: PropType<(t: number, b: number, c: number, d: number) => number>;
+        default(t: number, b: number, c: number, d: number): number;
+    };
+}>> & {
+    onMounted?: ((...args: any[]) => any) | undefined;
+    onCallback?: ((...args: any[]) => any) | undefined;
+}, {
+    duration: number;
+    color: string;
+    separator: string;
+    fontSize: string;
+    prefix: string;
+    startVal: number;
+    endVal: number;
+    autoplay: boolean;
+    decimals: number;
+    decimal: string;
+    suffix: string;
+    useEasing: boolean;
+    easingFn: (t: number, b: number, c: number, d: number) => number;
+}, {}>;
+export default _default;

package/lib/components/yc-count-to/src/normal/index.js

@@ -0,0 +1,157 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var props = require('./props.js');
+var lodashEs = require('lodash-es');
+
+var YcNormalCountTo = /* @__PURE__ */ vue.defineComponent({
+  name: "YcCountTo",
+  props: props.countToProps,
+  emits: ["mounted", "callback"],
+  setup(props, {
+    emit
+  }) {
+    const state = vue.reactive({
+      localStartVal: props.startVal,
+      displayValue: formatNumber(props.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: props.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null,
+      color: void 0,
+      fontSize: "16px"
+    });
+    const getCountDown = vue.computed(() => {
+      return props.startVal > props.endVal;
+    });
+    vue.watch([() => props.startVal, () => props.endVal], () => {
+      if (props.autoplay) {
+        start();
+      }
+    });
+    function start() {
+      const {
+        startVal,
+        duration,
+        color,
+        fontSize
+      } = props;
+      state.localStartVal = startVal;
+      state.startTime = null;
+      state.localDuration = duration;
+      state.paused = false;
+      state.color = color;
+      state.fontSize = fontSize || "16px";
+      state.rAF = requestAnimationFrame(count);
+    }
+    function pauseResume() {
+      if (state.paused) {
+        resume();
+        state.paused = false;
+      } else {
+        pause();
+        state.paused = true;
+      }
+    }
+    function pause() {
+      if (state.rAF) {
+        cancelAnimationFrame(state.rAF);
+      }
+    }
+    function resume() {
+      state.startTime = null;
+      state.localDuration = +state.remaining;
+      state.localStartVal = +state.printVal;
+      requestAnimationFrame(count);
+    }
+    function reset() {
+      state.startTime = null;
+      if (state.rAF) {
+        cancelAnimationFrame(state.rAF);
+      }
+      state.displayValue = formatNumber(props.startVal);
+    }
+    function count(timestamp) {
+      const {
+        useEasing,
+        easingFn,
+        endVal
+      } = props;
+      if (!state.startTime) state.startTime = timestamp;
+      state.timestamp = timestamp;
+      const progress = timestamp - state.startTime;
+      state.remaining = state.localDuration - progress;
+      if (useEasing) {
+        if (vue.unref(getCountDown)) {
+          state.printVal = state.localStartVal - easingFn(progress, 0, state.localStartVal - endVal, state.localDuration);
+        } else {
+          state.printVal = easingFn(progress, state.localStartVal, endVal - state.localStartVal, state.localDuration);
+        }
+      } else {
+        if (vue.unref(getCountDown)) {
+          state.printVal = state.localStartVal - (state.localStartVal - endVal) * (progress / state.localDuration);
+        } else {
+          state.printVal = state.localStartVal + (endVal - state.localStartVal) * (progress / state.localDuration);
+        }
+      }
+      if (vue.unref(getCountDown)) {
+        state.printVal = state.printVal < endVal ? endVal : state.printVal;
+      } else {
+        state.printVal = state.printVal > endVal ? endVal : state.printVal;
+      }
+      state.displayValue = formatNumber(state.printVal);
+      if (progress < state.localDuration) {
+        state.rAF = requestAnimationFrame(count);
+      } else {
+        emit("callback");
+      }
+    }
+    function formatNumber(num) {
+      const {
+        decimals,
+        decimal,
+        separator,
+        suffix,
+        prefix
+      } = props;
+      num = Number(num).toFixed(decimals);
+      num += "";
+      const x = num.split(".");
+      let x1 = x[0];
+      const x2 = x.length > 1 ? decimal + x[1] : "";
+      const rgx = /(\d+)(\d{3})/;
+      if (separator && !lodashEs.isNumber(separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, "$1" + separator + "$2");
+        }
+      }
+      return prefix + x1 + x2 + suffix;
+    }
+    vue.onMounted(() => {
+      if (props.autoplay) {
+        start();
+      }
+      emit("mounted");
+    });
+    const exposed = {
+      start,
+      pause,
+      resume,
+      reset,
+      pauseResume
+    };
+    return Object.assign(() => vue.createVNode(vue.Fragment, null, [vue.createVNode("span", {
+      "style": {
+        color: props.color,
+        fontSize: props.fontSize
+      }
+    }, [state.displayValue])]), exposed);
+  }
+});
+
+exports.default = YcNormalCountTo;

package/lib/components/yc-count-to/src/normal/props.d.ts

@@ -0,0 +1,86 @@
+import { PropType } from 'vue';
+
+export declare const countToProps: {
+    startVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    endVal: {
+        type: PropType<number>;
+        default: number;
+    };
+    duration: {
+        type: PropType<number>;
+        default: number;
+    };
+    autoplay: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    decimals: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+    color: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    fontSize: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    decimal: {
+        type: PropType<string>;
+        default: string;
+    };
+    separator: {
+        type: PropType<string>;
+        default: string;
+    };
+    prefix: {
+        type: PropType<string>;
+        default: string;
+    };
+    suffix: {
+        type: PropType<string>;
+        default: string;
+    };
+    useEasing: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    easingFn: {
+        type: PropType<(t: number, b: number, c: number, d: number) => number>;
+        default(t: number, b: number, c: number, d: number): number;
+    };
+};
+export interface YcCountToProps {
+    /** 起始值 */
+    startVal?: number;
+    /** 结束值 */
+    endVal?: number;
+    /** 动画持续时间（毫秒） */
+    duration?: number;
+    /** 是否自动播放 */
+    autoplay?: boolean;
+    /** 小数位数 */
+    decimals?: number;
+    /** 文字颜色 */
+    color?: string;
+    /** 文字大小 */
+    fontSize?: string;
+    /** 小数点符号 */
+    decimal?: string;
+    /** 千位分隔符 */
+    separator?: string;
+    /** 前缀 */
+    prefix?: string;
+    /** 后缀 */
+    suffix?: string;
+    /** 是否使用缓动函数 */
+    useEasing?: boolean;
+    /** 自定义缓动函数 */
+    easingFn?: (t: number, b: number, c: number, d: number) => number;
+}

package/lib/components/yc-count-to/src/normal/props.js

@@ -0,0 +1,64 @@
+'use strict';
+
+const countToProps = {
+  startVal: {
+    type: Number,
+    default: 0
+  },
+  endVal: {
+    type: Number,
+    default: 2020
+  },
+  duration: {
+    type: Number,
+    default: 1300
+  },
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  decimals: {
+    type: Number,
+    required: false,
+    default: 0,
+    validator(value) {
+      return value >= 0;
+    }
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  fontSize: {
+    type: String,
+    default: void 0
+  },
+  decimal: {
+    type: String,
+    default: "."
+  },
+  separator: {
+    type: String,
+    default: ","
+  },
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
+    type: String,
+    default: ""
+  },
+  useEasing: {
+    type: Boolean,
+    default: true
+  },
+  easingFn: {
+    type: Function,
+    default(t, b, c, d) {
+      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+    }
+  }
+};
+
+exports.countToProps = countToProps;

package/lib/components/yc-count-to/src/rebound/index.d.ts

@@ -0,0 +1,38 @@
+import { DefineComponent, PropType, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
+
+declare const _default: DefineComponent<{
+    delay: {
+        type: PropType<number>;
+        default: number;
+    };
+    blur: {
+        type: PropType<number>;
+        default: number;
+    };
+    i: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+}, () => any, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    delay: {
+        type: PropType<number>;
+        default: number;
+    };
+    blur: {
+        type: PropType<number>;
+        default: number;
+    };
+    i: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+}>>, {
+    i: number;
+    blur: number;
+    delay: number;
+}, {}>;
+export default _default;

package/lib/components/yc-count-to/src/rebound/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var props = require('./props.js');
+
+var YcReboundCountTo = /* @__PURE__ */ vue.defineComponent({
+  name: "YcReboundCountTo",
+  props: props.reboundProps,
+  setup(props) {
+    const ulRef = vue.ref();
+    const timer = vue.ref(null);
+    vue.onBeforeMount(() => {
+      const ua = navigator.userAgent.toLowerCase();
+      const testUA = (regexp) => regexp.test(ua);
+      const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
+      if (isSafari) {
+        timer.value = setTimeout(() => {
+          var _a;
+          (_a = ulRef.value) == null ? void 0 : _a.setAttribute("style", `
+        animation: none;
+        transform: translateY(calc(var(--i) * -9.09%))
+      `);
+        }, props.delay * 1e3);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (vue.unref(timer)) {
+        clearTimeout(vue.unref(timer));
+      }
+    });
+    return () => vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+      "class": "scroll-num",
+      "style": {
+        "--i": props.i,
+        "--delay": props.delay
+      }
+    }, [vue.createVNode("ul", {
+      "ref": ulRef,
+      "style": {
+        fontSize: "32px"
+      }
+    }, [vue.createVNode("li", null, [vue.createTextVNode("0")]), vue.createVNode("li", null, [vue.createTextVNode("1")]), vue.createVNode("li", null, [vue.createTextVNode("2")]), vue.createVNode("li", null, [vue.createTextVNode("3")]), vue.createVNode("li", null, [vue.createTextVNode("4")]), vue.createVNode("li", null, [vue.createTextVNode("5")]), vue.createVNode("li", null, [vue.createTextVNode("6")]), vue.createVNode("li", null, [vue.createTextVNode("7")]), vue.createVNode("li", null, [vue.createTextVNode("8")]), vue.createVNode("li", null, [vue.createTextVNode("9")]), vue.createVNode("li", null, [vue.createTextVNode("0")])]), vue.createVNode("svg", {
+      "width": "0",
+      "height": "0"
+    }, [vue.createVNode("filter", {
+      "id": "blur"
+    }, [vue.createVNode("feGaussianBlur", {
+      "in": "SourceGraphic",
+      "stdDeviation": `0 ${props.blur}`
+    }, null)])])])]);
+  }
+});
+
+exports.default = YcReboundCountTo;

package/lib/components/yc-count-to/src/rebound/props.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from 'vue';
+
+export declare const reboundProps: {
+    delay: {
+        type: PropType<number>;
+        default: number;
+    };
+    blur: {
+        type: PropType<number>;
+        default: number;
+    };
+    i: {
+        type: PropType<number>;
+        required: boolean;
+        default: number;
+        validator(value: number): boolean;
+    };
+};
+export interface YcReboundCountToProps {
+    /** 动画延迟时间（秒） */
+    delay?: number;
+    /** 模糊程度 */
+    blur?: number;
+    /** 显示的数字（0-9） */
+    i?: number;
+}

package/lib/components/yc-count-to/src/rebound/props.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const reboundProps = {
+  delay: {
+    type: Number,
+    default: 1
+  },
+  blur: {
+    type: Number,
+    default: 2
+  },
+  i: {
+    type: Number,
+    required: false,
+    default: 0,
+    validator(value) {
+      return value < 10 && value >= 0 && Number.isInteger(value);
+    }
+  }
+};
+
+exports.reboundProps = reboundProps;