@fangzhongya/fang-ui 0.0.32 → 0.0.34

package/dist/components/index.js

@@ -63,6 +63,7 @@ import { BoxTitle } from "./box-title/index.js";
 import { Box } from "./box/index.js";
 import { Popup } from "./popup/index.js";
 import { RightKey } from "./right-key/index.js";
+import { SeamlessScroll } from "./seamless-scroll/index.js";
 import { StickDiv } from "./stick-div/index.js";
 import { StickEdge } from "./stick-edge/index.js";
 import { StickWindow } from "./stick-window/index.js";
@@ -196,6 +197,7 @@ export {
   Retract,
   RightKey,
   RoleSelect,
+  SeamlessScroll,
   Select,
   SelectDialog,
   SelectPopover,

package/dist/components/index.scss

@@ -49,6 +49,7 @@
 @use './box/index.scss' as *;
 @use './popup/index.scss' as *;
 @use './right-key/index.scss' as *;
+@use './seamless-scroll/index.scss' as *;
 @use './window/index.scss' as *;
 @use './global-config/index.scss' as *;
 @use './icon/index.scss' as *;

package/dist/components/page/style/index2.scss

@@ -3,7 +3,7 @@
 @use 'element-plus/theme-chalk/src/message-box.scss' as *;
 
 @use '../../forms/style/index2.scss' as *;
-@use '../../lists/style/index2.scss' as *;
+// @use '../../lists/style/index2.scss' as *;
 @use '../../dialog/style/index2.scss' as *;
 @use '../../tablesp/style/index2.scss' as *;
 @use '../index.scss' as *;

package/dist/components/seamless-scroll/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+;/* empty css                   */
+const withInstall = require("../../utils/vues/withInstall.cjs");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index.cjs");
+const SeamlessScroll = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "SeamlessScroll");
+exports.SeamlessScroll = SeamlessScroll;
+exports.default = SeamlessScroll;

package/dist/components/seamless-scroll/index.css

@@ -0,0 +1,30 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.seamless-scroll {
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  transition: 0s;
+}
+.seamless-scroll .seamless-scroll-warp-line,
+.seamless-scroll .seamless-scroll-warp {
+  padding: 0;
+  margin: 0;
+  transition: 0s;
+  overflow: hidden;
+  /*border-bottom: transparent 1px solid; !* key code *!*/
+  /*box-sizing: border-box;*/
+}

package/dist/components/seamless-scroll/index.d.ts

@@ -0,0 +1,118 @@
+import { SFCWithInstall } from '../../utils/vues';
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+declare const SeamlessScroll: SFCWithInstall<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
+        stepLength: {
+            type: NumberConstructor;
+            default: number;
+            validator: (value: number) => boolean;
+        };
+        reverse: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        limitFps: {
+            type: NumberConstructor;
+            default: number;
+        };
+        pauseOnHover: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onChange?: ((evt: string | string[]) => any) | undefined;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        change: (evt: string | string[]) => void;
+    }, PublicProps, {
+        reverse: boolean;
+        stepLength: number;
+        debug: boolean;
+        limitFps: number;
+        pauseOnHover: boolean;
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        refDom: HTMLDivElement;
+        refWarp: HTMLDivElement;
+        refLine: HTMLDivElement;
+    }, HTMLDivElement, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly< ExtractPropTypes<{
+        stepLength: {
+            type: NumberConstructor;
+            default: number;
+            validator: (value: number) => boolean;
+        };
+        reverse: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        limitFps: {
+            type: NumberConstructor;
+            default: number;
+        };
+        pauseOnHover: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onChange?: ((evt: string | string[]) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        reverse: boolean;
+        stepLength: number;
+        debug: boolean;
+        limitFps: number;
+        pauseOnHover: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
+    stepLength: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    reverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limitFps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((evt: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (evt: string | string[]) => void;
+}, string, {
+    reverse: boolean;
+    stepLength: number;
+    debug: boolean;
+    limitFps: number;
+    pauseOnHover: boolean;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+})>;
+export { SeamlessScroll, SeamlessScroll as default };

package/dist/components/seamless-scroll/index.js

@@ -0,0 +1,8 @@
+/* empty css                 */
+import { withInstall } from "../../utils/vues/withInstall.js";
+import _sfc_main from "./src/index.js";
+const SeamlessScroll = withInstall(_sfc_main, "SeamlessScroll");
+export {
+  SeamlessScroll,
+  SeamlessScroll as default
+};

package/dist/components/seamless-scroll/index.scss

@@ -0,0 +1,19 @@
+@use '../css/common.scss' as *;
+
+$seamless-scroll: 'seamless-scroll';
+@include b($seamless-scroll) {
+	position: relative;
+	overflow: hidden;
+	padding: 0;
+	margin: 0;
+	transition: 0s;
+	.#{z($seamless-scroll, 'warp-line')},
+	.#{z($seamless-scroll, 'warp')} {
+		padding: 0;
+		margin: 0;
+		transition: 0s;
+		overflow: hidden;
+		/*border-bottom: transparent 1px solid; !* key code *!*/
+		/*box-sizing: border-box;*/
+	}
+}

package/dist/components/seamless-scroll/src/data.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const buildProps = require("../../../utils/vues/buildProps.cjs");
+const dataProps = buildProps.buildProps({
+  stepLength: {
+    type: Number,
+    default: 60,
+    validator: (value) => value >= 0
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  debug: {
+    type: Boolean,
+    default: false
+  },
+  limitFps: {
+    type: Number,
+    default: 32
+  },
+  pauseOnHover: {
+    type: Boolean,
+    default: true
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataExpose = {};
+exports.dataEmits = dataEmits;
+exports.dataExpose = dataExpose;
+exports.dataProps = dataProps;

package/dist/components/seamless-scroll/src/data.d.ts

@@ -0,0 +1,44 @@
+import { ExtractPublicPropTypes } from 'vue';
+export declare const dataProps: {
+    stepLength: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    reverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limitFps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export declare const dataEmits: {
+    change: (evt: string | string[]) => void;
+};
+export type DataEmits = typeof dataEmits;
+/**
+ * @slot default 默认插槽
+ */
+export declare const dataSlot: {
+    default: string;
+};
+/**
+ * expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export declare const dataExpose: {};

package/dist/components/seamless-scroll/src/data.js

@@ -0,0 +1,34 @@
+import { buildProps } from "../../../utils/vues/buildProps.js";
+const dataProps = buildProps({
+  stepLength: {
+    type: Number,
+    default: 60,
+    validator: (value) => value >= 0
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  debug: {
+    type: Boolean,
+    default: false
+  },
+  limitFps: {
+    type: Number,
+    default: 32
+  },
+  pauseOnHover: {
+    type: Boolean,
+    default: true
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataExpose = {};
+export {
+  dataEmits,
+  dataExpose,
+  dataProps
+};

package/dist/components/seamless-scroll/src/index.cjs

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const data = require("./data.cjs");
+const index = require("../../../hooks/cssname/index.cjs");
+const d3Timer = require("d3-timer");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  props: data.dataProps,
+  emits: data.dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const cs = index.useCssName("seamless-scroll");
+    const props = __props;
+    const loopCount = vue.ref(new Array(5));
+    let ties = null;
+    let tWatch = null;
+    const refDom = vue.ref();
+    const refLine = vue.ref();
+    const refWarp = vue.ref();
+    let parentHeight = vue.ref(0);
+    const createTimer = (handle, fps = 32) => new Promise((resolve, reject) => {
+      resolve(
+        d3Timer.timer(() => {
+          try {
+            handle();
+          } catch (err) {
+            reject(err);
+          }
+        }, 1e3 / fps)
+      );
+    });
+    const getTime = () => (/* @__PURE__ */ new Date()).getTime();
+    const val = vue.ref();
+    const currentFps = vue.ref(60);
+    let animation = true;
+    let lastTime = getTime();
+    const onStop = () => animation = false;
+    const onPlay = () => {
+      animation = true;
+      lastTime = getTime();
+    };
+    const hideItemsIndex = vue.ref([]);
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        refDom.value.addEventListener("mouseover", onStop);
+        refDom.value.addEventListener("mouseout", onPlay);
+        const parentElementRect = refDom.value.parentElement.getBoundingClientRect();
+        parentHeight.value = parentElementRect.height;
+        let warpLineHeight = refLine.value[0].getBoundingClientRect().height;
+        let lastY = -warpLineHeight;
+        let translateY = -warpLineHeight;
+        loopCount.value = new Array(
+          Math.ceil(parentHeight.value / warpLineHeight) * 3
+        );
+        createTimer(() => {
+          if (!animation && props.pauseOnHover) {
+            return;
+          }
+          const limitHeight = props.reverse ? -warpLineHeight * (loopCount.value.length / 3) : -warpLineHeight * (loopCount.value.length / 3 * 2);
+          const currentTime = getTime();
+          currentFps.value = Math.ceil(1e3 / (currentTime - lastTime));
+          const len = (currentTime - lastTime) * (props.stepLength / 1e3);
+          lastTime = currentTime;
+          translateY += (props.reverse ? 1 : -1) * len;
+          if (props.reverse) {
+            translateY = translateY > limitHeight ? -(warpLineHeight + Math.abs(translateY % warpLineHeight)) : translateY;
+          } else {
+            translateY = translateY < limitHeight ? Math.sign(translateY) * (Math.abs(translateY % warpLineHeight) + warpLineHeight) : translateY;
+          }
+          val.value = translateY;
+          refWarp.value.style.setProperty(
+            "transform",
+            `translate3d(0px ,${translateY}px,0px)`
+          );
+          lastY = translateY;
+          const indexs = [];
+          refLine.value.forEach((item, i) => {
+            let currenRect = refLine.value[i].getBoundingClientRect();
+            let parentElementRect2 = refDom.value.parentElement.getBoundingClientRect();
+            if (currenRect.y + currenRect.height < parentElementRect2.y || currenRect.y > parentElementRect2.y + parentElementRect2.height) {
+              indexs.push(i);
+            } else {
+              indexs.splice(hideItemsIndex.value.indexOf(i), 1);
+            }
+          });
+          hideItemsIndex.value = indexs;
+        }).then((timer2) => {
+          ties = timer2;
+        }).catch((err) => {
+          console.error(err);
+        });
+        createTimer(() => {
+          parentHeight.value = refDom.value.parentElement.getBoundingClientRect().height;
+          warpLineHeight = refLine.value[0].getBoundingClientRect().height;
+          loopCount.value = new Array(
+            Math.ceil(parentHeight.value / warpLineHeight) * 3
+          );
+        }).then((timer2) => {
+          tWatch = timer2;
+        }).catch((err) => {
+          console.error(err);
+        });
+      });
+    });
+    vue.onUnmounted(() => {
+      ties?.stop();
+      tWatch?.stop();
+      if (refDom.value) {
+        refDom.value.removeEventListener("mouseover", onStop);
+        refDom.value.removeEventListener("mouseout", onPlay);
+      }
+    });
+    __expose({
+      ...data.dataExpose
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "refDom",
+        ref: refDom,
+        class: vue.normalizeClass(vue.unref(cs).z()),
+        style: vue.normalizeStyle({ height: vue.unref(parentHeight) + "px" })
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "refWarp",
+          ref: refWarp,
+          class: vue.normalizeClass(vue.unref(cs).z("warp"))
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(loopCount.value.length, (i) => {
+            return vue.openBlock(), vue.createBlock(vue.KeepAlive, {
+              key: "ss_" + i
+            }, [
+              !hideItemsIndex.value.includes(i) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref_for: true,
+                ref_key: "refLine",
+                ref: refLine,
+                class: vue.normalizeClass(vue.unref(cs).z("warp-line"))
+              }, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ], 2)) : vue.createCommentVNode("", true)
+            ], 1024);
+          }), 128))
+        ], 2)
+      ], 6);
+    };
+  }
+});
+exports.default = _sfc_main;

package/dist/components/seamless-scroll/src/index.d.ts

@@ -0,0 +1,80 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        refDom: HTMLDivElement;
+        refWarp: HTMLDivElement;
+        refLine: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
+    stepLength: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    reverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limitFps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (evt: string | string[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    stepLength: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    reverse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limitFps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((evt: string | string[]) => any) | undefined;
+}>, {
+    reverse: boolean;
+    stepLength: number;
+    debug: boolean;
+    limitFps: number;
+    pauseOnHover: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {
+    refDom: HTMLDivElement;
+    refWarp: HTMLDivElement;
+    refLine: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};