@yh-ui/components 0.1.0

package/dist/marquee/src/marquee.d.vue.ts

@@ -0,0 +1,109 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly direction: {
+        readonly type: import("vue").PropType<import("./marquee").MarqueeDirection>;
+        readonly default: "horizontal";
+        readonly validator: (val: string) => boolean;
+    };
+    readonly duration: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    readonly reverse: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly pauseOnHover: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly pauseOnClick: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly gap: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: 0;
+    };
+    readonly gradient: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly gradientColor: {
+        readonly type: StringConstructor;
+        readonly default: "#ffffff";
+    };
+    readonly gradientWidth: {
+        readonly type: import("vue").PropType<number | string>;
+        readonly default: "40px";
+    };
+    readonly autoFill: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly play: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly loop: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly speed: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly delay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly loopDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly pauseOnHidden: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    /** 手动重新计算克隆数量（通常在动态改变内容高度/宽度时调用） */
+    calculateClones: () => Promise<void>;
+    /** 容器 DOM 引用 */
+    containerRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    /** 内容 DOM 引用 */
+    contentRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly reverse: boolean;
+    readonly direction: "horizontal" | "vertical";
+    readonly gap: string | number;
+    readonly play: boolean;
+    readonly pauseOnHover: boolean;
+    readonly duration: number;
+    readonly delay: number;
+    readonly gradient: boolean;
+    readonly loop: number;
+    readonly pauseOnClick: boolean;
+    readonly gradientColor: string;
+    readonly gradientWidth: string | number;
+    readonly autoFill: boolean;
+    readonly speed: number;
+    readonly loopDelay: number;
+    readonly pauseOnHidden: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/marquee/src/marquee.mjs

@@ -0,0 +1,93 @@
+export const marqueeDirections = ["horizontal", "vertical"];
+export const marqueeProps = {
+  /** 滚动方向 */
+  direction: {
+    type: String,
+    default: "horizontal",
+    validator: (val) => marqueeDirections.includes(val)
+  },
+  /** 动画持续时间（秒），数值越小速度越快 */
+  duration: {
+    type: Number,
+    default: 20
+  },
+  /** 是否反向滚动 */
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  /** 鼠标悬停时是否暂停 */
+  pauseOnHover: {
+    type: Boolean,
+    default: true
+  },
+  /** 点击时是否暂停 */
+  pauseOnClick: {
+    type: Boolean,
+    default: false
+  },
+  /** 内容项之间的间距 */
+  gap: {
+    type: [Number, String],
+    default: 0
+  },
+  /** 是否开启边缘渐变遮罩 */
+  gradient: {
+    type: Boolean,
+    default: false
+  },
+  /** 渐变遮罩颜色 */
+  gradientColor: {
+    type: String,
+    default: "#ffffff"
+  },
+  /** 渐变遮罩宽度 */
+  gradientWidth: {
+    type: [Number, String],
+    default: "40px"
+  },
+  /** 是否自动填充，确保内容不足时也能实现无缝滚动 */
+  autoFill: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否播放动画 */
+  play: {
+    type: Boolean,
+    default: true
+  },
+  /** 循环次数 (0 为无限循环) */
+  loop: {
+    type: Number,
+    default: 0
+  },
+  /** 滚动速度 (像素/秒)，设置后将忽略 duration */
+  speed: {
+    type: Number,
+    default: 0
+  },
+  /** 首次启动动画前的延迟时间 (秒) */
+  delay: {
+    type: Number,
+    default: 0
+  },
+  /** 每一轮循环结束后的停顿时间 (秒) */
+  loopDelay: {
+    type: Number,
+    default: 0
+  },
+  /** 当组件离开视口时是否自动暂停动画 (性能优化) */
+  pauseOnHidden: {
+    type: Boolean,
+    default: true
+  },
+  /** 主题覆盖变量 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+export const marqueeEmits = {
+  /** 每次滚动循环完成时触发 */
+  cycleComplete: () => true
+};