sard 1.0.29 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/all-components.js +4 -0
- package/components/action-sheet/action-sheet-item.vue.js +1 -1
- package/components/action-sheet/common.d.ts +1 -1
- package/components/button/button.vue.js +1 -1
- package/components/calendar-popout/common.d.ts +1 -1
- package/components/cascader-popout/common.d.ts +1 -1
- package/components/checkbox-popout/common.d.ts +1 -1
- package/components/color-picker-popout/common.d.ts +1 -1
- package/components/crop-image/common.d.ts +1 -1
- package/components/danmaku/common.d.ts +38 -0
- package/components/danmaku/common.js +14 -0
- package/components/danmaku/danmaku.vue.d.ts +23 -0
- package/components/danmaku/danmaku.vue.js +370 -0
- package/components/danmaku/index.css +1 -0
- package/components/danmaku/index.d.ts +5 -0
- package/components/danmaku/index.js +6 -0
- package/components/datetime-picker-popout/common.d.ts +1 -1
- package/components/datetime-range-picker-popout/common.d.ts +1 -1
- package/components/descriptions/common.d.ts +8 -3
- package/components/descriptions/descriptions-item.vue.d.ts +0 -2
- package/components/descriptions/descriptions-item.vue.js +20 -21
- package/components/descriptions/descriptions.vue.js +56 -28
- package/components/descriptions/index.css +1 -1
- package/components/dialog/common.d.ts +1 -1
- package/components/dnd/dnd-item.vue.js +19 -9
- package/components/dnd/index.css +1 -1
- package/components/dropdown/common.d.ts +1 -1
- package/components/ellipsis/ellipsis.vue.js +62 -58
- package/components/ellipsis/index.css +1 -1
- package/components/image/image.vue.d.ts +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +3 -1
- package/components/keyboard/keyboard.vue.d.ts +1 -1
- package/components/keyboard-popout/common.d.ts +1 -1
- package/components/keyboard-popout/keyboard-popout.vue.d.ts +1 -1
- package/components/list/index.css +1 -1
- package/components/load-more/load-more.vue.js +2 -2
- package/components/loading/loading.vue.js +1 -1
- package/components/motion/motion.vue.js +1 -1
- package/components/notify/common.d.ts +1 -1
- package/components/overlay/overlay.vue.js +6 -5
- package/components/picker/picker.vue.js +8 -5
- package/components/picker-popout/common.d.ts +1 -1
- package/components/picker-view/common.d.ts +22 -2
- package/components/picker-view/index.d.ts +2 -2
- package/components/picker-view/index.js +2 -2
- package/components/picker-view/picker-view-column.vue.d.ts +19 -0
- package/components/picker-view/picker-view-column.vue.js +167 -0
- package/components/picker-view/picker-view.vue.d.ts +55 -0
- package/components/picker-view/picker-view.vue.js +60 -0
- package/components/popout/common.d.ts +1 -1
- package/components/popout/popout.vue.js +2 -4
- package/components/popover/common.js +1 -1
- package/components/popover/popover.vue.js +11 -10
- package/components/popup/popup.vue.js +1 -1
- package/components/preview-image/common.d.ts +1 -1
- package/components/preview-image/preview-image.vue.d.ts +1 -1
- package/components/preview-image/preview-image.vue.js +4 -4
- package/components/pull-down-refresh/pull-down-refresh.vue.js +4 -7
- package/components/radio-popout/common.d.ts +1 -1
- package/components/rate/rate.vue.js +2 -2
- package/components/select-popout/common.d.ts +1 -1
- package/components/share-sheet/common.d.ts +1 -1
- package/components/skeleton/skeleton.vue.js +1 -1
- package/components/swiper/index.d.ts +2 -2
- package/components/swiper/index.js +2 -2
- package/components/swiper/swiper-item.vue.d.ts +11 -0
- package/components/swiper/swiper-item.vue.js +32 -0
- package/components/swiper/swiper.vue.d.ts +147 -0
- package/components/swiper/swiper.vue.js +51 -0
- package/components/swiper/useSwiper.d.ts +1 -2
- package/components/swiper/useSwiper.js +12 -12
- package/components/table/table.vue.js +1 -2
- package/components/text-shrink/common.d.ts +28 -0
- package/components/text-shrink/common.js +8 -0
- package/components/text-shrink/index.css +1 -0
- package/components/text-shrink/index.d.ts +5 -0
- package/components/text-shrink/index.js +6 -0
- package/components/text-shrink/text-shrink.vue.d.ts +16 -0
- package/components/text-shrink/text-shrink.vue.js +252 -0
- package/components/toast/common.d.ts +1 -1
- package/global.d.ts +2 -0
- package/index.css +1 -1
- package/index.js +3 -2
- package/package.json +1 -1
- package/utils/createImperativeComponent.d.ts +12 -5
- package/utils/createImperativeComponent.js +13 -37
- package/utils/imperative/agent-runtime.d.ts +28 -0
- package/utils/imperative/agent-runtime.js +33 -0
- package/utils/imperative/imperative-agent.vue.d.ts +35 -0
- package/utils/imperative/imperative-agent.vue.js +60 -0
- package/utils/index.d.ts +0 -1
- package/utils/index.js +1 -2
- package/utils/is.d.ts +4 -1
- package/utils/is.js +5 -3
- package/utils/number.d.ts +1 -1
- package/utils/number.js +20 -19
- package/components/picker-view/picker-view-column.d.ts +0 -3
- package/components/picker-view/picker-view-column.js +0 -139
- package/components/picker-view/picker-view.d.ts +0 -21
- package/components/picker-view/picker-view.js +0 -57
- package/components/swiper/swiper-item.d.ts +0 -3
- package/components/swiper/swiper-item.js +0 -34
- package/components/swiper/swiper.d.ts +0 -57
- package/components/swiper/swiper.js +0 -43
- package/utils/vnode.d.ts +0 -9
- package/utils/vnode.js +0 -69
package/README.md
CHANGED
package/all-components.js
CHANGED
|
@@ -25,6 +25,7 @@ import { CoolIcon } from "./components/cool-icon/index.js";
|
|
|
25
25
|
import { CountDown } from "./components/count-down/index.js";
|
|
26
26
|
import { CountTo } from "./components/count-to/index.js";
|
|
27
27
|
import { CropImage } from "./components/crop-image/index.js";
|
|
28
|
+
import { Danmaku } from "./components/danmaku/index.js";
|
|
28
29
|
import { DateStrip } from "./components/date-strip/index.js";
|
|
29
30
|
import { DatetimePicker } from "./components/datetime-picker/index.js";
|
|
30
31
|
import { DatetimePickerInput } from "./components/datetime-picker-input/index.js";
|
|
@@ -112,6 +113,7 @@ import { Table } from "./components/table/index.js";
|
|
|
112
113
|
import { Tab, Tabs } from "./components/tabs/index.js";
|
|
113
114
|
import { Tag } from "./components/tag/index.js";
|
|
114
115
|
import { Text } from "./components/text/index.js";
|
|
116
|
+
import { TextShrink } from "./components/text-shrink/index.js";
|
|
115
117
|
import { Timeline, TimelineItem } from "./components/timeline/index.js";
|
|
116
118
|
import { Toast } from "./components/toast/index.js";
|
|
117
119
|
import { Tree, TreeBranch, TreeNode } from "./components/tree/index.js";
|
|
@@ -152,6 +154,7 @@ var all_components_default = {
|
|
|
152
154
|
CountDown,
|
|
153
155
|
CountTo,
|
|
154
156
|
CropImage,
|
|
157
|
+
Danmaku,
|
|
155
158
|
DateStrip,
|
|
156
159
|
DatetimePicker,
|
|
157
160
|
DatetimePickerInput,
|
|
@@ -271,6 +274,7 @@ var all_components_default = {
|
|
|
271
274
|
Tabs,
|
|
272
275
|
Tag,
|
|
273
276
|
Text,
|
|
277
|
+
TextShrink,
|
|
274
278
|
Timeline,
|
|
275
279
|
TimelineItem,
|
|
276
280
|
Toast,
|
|
@@ -57,7 +57,7 @@ var action_sheet_item_default = /*@__PURE__*/ defineComponent({
|
|
|
57
57
|
unref(bem).is("loading", props.loading)
|
|
58
58
|
]),
|
|
59
59
|
onClick
|
|
60
|
-
}, [!props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.default ? renderSlot(_ctx.$slots, "default", {
|
|
60
|
+
}, [!props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
|
|
61
61
|
class: normalizeClass(unref(bem).e("item-label")),
|
|
62
62
|
style: normalizeStyle(labelStyle.value)
|
|
63
63
|
}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(props.label), 1)])], 6), props.description || slots.description ? (openBlock(), createElementBlock("div", {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type DefaultProps } from '../config';
|
|
2
|
-
import type { MotionEmits } from '../motion';
|
|
2
|
+
import type { MotionEmits } from '../motion/common';
|
|
3
3
|
import { type UseActionSheetReturn } from './context';
|
|
4
4
|
export interface ActionSheetBeforeClose {
|
|
5
5
|
(type: 'close' | 'cancel', loading: {
|
|
@@ -110,7 +110,7 @@ var button_default = /*@__PURE__*/ defineComponent({
|
|
|
110
110
|
}, [__props.loading ? (openBlock(), createBlock(loading_default, {
|
|
111
111
|
key: 0,
|
|
112
112
|
type: __props.loadingType
|
|
113
|
-
}, null, 8, ["type"])) : renderSlot(_ctx.$slots, "icon", {
|
|
113
|
+
}, null, 8, ["type"])) : renderSlot(_ctx.$slots, "icon", {}, void 0, void 0, 1)], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
|
|
114
114
|
};
|
|
115
115
|
}
|
|
116
116
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type CalendarProps } from '../calendar/common';
|
|
2
2
|
import { type DefaultProps } from '../config';
|
|
3
3
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface CalendarPopoutProps extends FormPopoutProps, CalendarProps {
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultCalendarPopoutProps: DefaultProps<CalendarPopoutProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type CascaderOption, type CascaderProps } from '../cascader/common';
|
|
2
2
|
import { type DefaultProps } from '../config';
|
|
3
3
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface CascaderPopoutProps extends FormPopoutProps, CascaderProps {
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultCascaderPopoutProps: DefaultProps<CascaderPopoutProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type CheckboxGroupProps } from '../checkbox/common';
|
|
2
2
|
import { type DefaultProps } from '../config';
|
|
3
3
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface CheckboxPopoutProps extends FormPopoutProps, CheckboxGroupProps {
|
|
6
6
|
searchable?: boolean;
|
|
7
7
|
filterPlaceholder?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type DefaultProps } from '../config';
|
|
2
2
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
3
3
|
import { type ColorPickerProps } from '../color-picker/common';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface ColorPickerPopoutProps extends FormPopoutProps, ColorPickerProps {
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultColorPickerPopoutProps: DefaultProps<ColorPickerPopoutProps>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type DefaultProps } from '../config';
|
|
2
|
+
export interface DanmakuProps<T> {
|
|
3
|
+
list?: T[];
|
|
4
|
+
rows?: number;
|
|
5
|
+
speed?: number;
|
|
6
|
+
/** 速度浮动范围 (px/s),每条弹幕在 [speed - speedRange, speed + speedRange] 内随机取速,0 表示不浮动 */
|
|
7
|
+
speedRange?: number;
|
|
8
|
+
gap?: number;
|
|
9
|
+
autoPlay?: boolean;
|
|
10
|
+
loop?: boolean;
|
|
11
|
+
/** 页面隐藏或滚出视口时自动暂停,默认开启 */
|
|
12
|
+
autoPause?: boolean;
|
|
13
|
+
/** 同时在飞弹幕数量上限,0 表示不限制 */
|
|
14
|
+
maxItems?: number;
|
|
15
|
+
/** 动画缓动函数 */
|
|
16
|
+
easing?: string;
|
|
17
|
+
/** 轨道高度,数字视为 px */
|
|
18
|
+
rowHeight?: number | string;
|
|
19
|
+
}
|
|
20
|
+
export declare const defaultDanmakuProps: DefaultProps<DanmakuProps<any>>;
|
|
21
|
+
export interface DanmakuSlots<T> {
|
|
22
|
+
item?(props: {
|
|
23
|
+
item: T;
|
|
24
|
+
index: number;
|
|
25
|
+
}): any;
|
|
26
|
+
}
|
|
27
|
+
export interface DanmakuEmits {
|
|
28
|
+
(e: 'play'): void;
|
|
29
|
+
(e: 'pause'): void;
|
|
30
|
+
(e: 'finish'): void;
|
|
31
|
+
}
|
|
32
|
+
export interface DanmakuExpose<T> {
|
|
33
|
+
play: () => void;
|
|
34
|
+
pause: () => void;
|
|
35
|
+
resume: () => void;
|
|
36
|
+
stop: () => void;
|
|
37
|
+
send: (item: T) => void;
|
|
38
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
//#region packages/sard/components/danmaku/common.ts
|
|
2
|
+
const defaultDanmakuProps = {
|
|
3
|
+
rows: 3,
|
|
4
|
+
speed: 100,
|
|
5
|
+
speedRange: 0,
|
|
6
|
+
gap: 40,
|
|
7
|
+
autoPlay: true,
|
|
8
|
+
loop: false,
|
|
9
|
+
autoPause: true,
|
|
10
|
+
maxItems: 0,
|
|
11
|
+
easing: "linear"
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { defaultDanmakuProps };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type DanmakuProps, type DanmakuSlots, type DanmakuEmits, type DanmakuExpose } from './common';
|
|
2
|
+
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import("vue").PublicProps & __VLS_PrettifyLocal<DanmakuProps<T> & {
|
|
4
|
+
onPlay?: (() => any) | undefined;
|
|
5
|
+
onPause?: (() => any) | undefined;
|
|
6
|
+
onFinish?: (() => any) | undefined;
|
|
7
|
+
}> & (typeof globalThis extends {
|
|
8
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
9
|
+
} ? P : {});
|
|
10
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<DanmakuExpose<T>>) => void;
|
|
11
|
+
attrs: any;
|
|
12
|
+
slots: DanmakuSlots<T>;
|
|
13
|
+
emit: DanmakuEmits;
|
|
14
|
+
}>) => import("vue").VNode & {
|
|
15
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: typeof __VLS_export;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
20
|
+
[K in keyof T]: T[K];
|
|
21
|
+
} : {
|
|
22
|
+
[K in keyof T as K]: T[K];
|
|
23
|
+
}) & {};
|
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
import { createBem, cssVarName } from "../../utils/bem.js";
|
|
2
|
+
import { addUnit } from "../../utils/utils.js";
|
|
3
|
+
import { useIntersectionObserver } from "../../use/useIntersectionObserver.js";
|
|
4
|
+
import { useResizeObserver } from "../../use/useResizeObserver.js";
|
|
5
|
+
import { useRtl } from "../../use/useRtl.js";
|
|
6
|
+
import { defaultDanmakuProps } from "./common.js";
|
|
7
|
+
import { Fragment, computed, createElementBlock, createTextVNode, defineComponent, mergeDefaults, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch } from "vue";
|
|
8
|
+
//#region packages/sard/components/danmaku/danmaku.vue
|
|
9
|
+
const _hoisted_1 = ["data-key"];
|
|
10
|
+
var danmaku_default = /*@__PURE__*/ defineComponent({
|
|
11
|
+
__name: "danmaku",
|
|
12
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
13
|
+
list: {
|
|
14
|
+
type: Array,
|
|
15
|
+
required: false
|
|
16
|
+
},
|
|
17
|
+
rows: {
|
|
18
|
+
type: Number,
|
|
19
|
+
required: false
|
|
20
|
+
},
|
|
21
|
+
speed: {
|
|
22
|
+
type: Number,
|
|
23
|
+
required: false
|
|
24
|
+
},
|
|
25
|
+
speedRange: {
|
|
26
|
+
type: Number,
|
|
27
|
+
required: false
|
|
28
|
+
},
|
|
29
|
+
gap: {
|
|
30
|
+
type: Number,
|
|
31
|
+
required: false
|
|
32
|
+
},
|
|
33
|
+
autoPlay: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
required: false
|
|
36
|
+
},
|
|
37
|
+
loop: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
required: false
|
|
40
|
+
},
|
|
41
|
+
autoPause: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
required: false
|
|
44
|
+
},
|
|
45
|
+
maxItems: {
|
|
46
|
+
type: Number,
|
|
47
|
+
required: false
|
|
48
|
+
},
|
|
49
|
+
easing: {
|
|
50
|
+
type: String,
|
|
51
|
+
required: false
|
|
52
|
+
},
|
|
53
|
+
rowHeight: {
|
|
54
|
+
type: [Number, String],
|
|
55
|
+
required: false
|
|
56
|
+
}
|
|
57
|
+
}, defaultDanmakuProps),
|
|
58
|
+
emits: [
|
|
59
|
+
"play",
|
|
60
|
+
"pause",
|
|
61
|
+
"finish"
|
|
62
|
+
],
|
|
63
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
64
|
+
const props = __props;
|
|
65
|
+
const emit = __emit;
|
|
66
|
+
const bem = createBem("danmaku");
|
|
67
|
+
const rootRef = useTemplateRef("root");
|
|
68
|
+
const tracks = ref([]);
|
|
69
|
+
const playing = ref(false);
|
|
70
|
+
const rootWidth = ref(0);
|
|
71
|
+
const isRtl = useRtl(rootRef);
|
|
72
|
+
const rootStyle = computed(() => {
|
|
73
|
+
const style = {};
|
|
74
|
+
if (props.rowHeight != null) style[cssVarName("danmaku-row-height")] = addUnit(props.rowHeight);
|
|
75
|
+
return style;
|
|
76
|
+
});
|
|
77
|
+
const queue = [];
|
|
78
|
+
const runtimeMap = /* @__PURE__ */ new Map();
|
|
79
|
+
const nextStartAt = [];
|
|
80
|
+
const pausedWaits = [];
|
|
81
|
+
let keySeq = 0;
|
|
82
|
+
let sendSeq = 0;
|
|
83
|
+
let finished = false;
|
|
84
|
+
let rafId = null;
|
|
85
|
+
let schedulerRunning = false;
|
|
86
|
+
const autoPaused = ref(false);
|
|
87
|
+
const pauseReasons = /* @__PURE__ */ new Set();
|
|
88
|
+
const containerWidth = () => {
|
|
89
|
+
return rootWidth.value || rootRef.value?.clientWidth || (typeof window !== "undefined" ? window.innerWidth : 0) || 375;
|
|
90
|
+
};
|
|
91
|
+
const queryBulletEl = (key) => {
|
|
92
|
+
return rootRef.value?.querySelector(`[data-key="${key}"]`) || null;
|
|
93
|
+
};
|
|
94
|
+
const defaultItemText = (item) => {
|
|
95
|
+
return typeof item === "string" || typeof item === "number" ? String(item) : "";
|
|
96
|
+
};
|
|
97
|
+
const cancelBullet = (runtime) => {
|
|
98
|
+
runtime.anim?.cancel();
|
|
99
|
+
runtime.anim = null;
|
|
100
|
+
};
|
|
101
|
+
const buildTracks = () => {
|
|
102
|
+
const count = Math.max(1, Math.round(props.rows));
|
|
103
|
+
tracks.value = Array.from({ length: count }, () => ({ bullets: [] }));
|
|
104
|
+
nextStartAt.length = 0;
|
|
105
|
+
pausedWaits.length = 0;
|
|
106
|
+
for (let i = 0; i < count; i++) {
|
|
107
|
+
nextStartAt.push(0);
|
|
108
|
+
pausedWaits.push(0);
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
const initQueue = () => {
|
|
112
|
+
queue.length = 0;
|
|
113
|
+
for (const [index, item] of (props.list || []).entries()) queue.push({
|
|
114
|
+
item,
|
|
115
|
+
index
|
|
116
|
+
});
|
|
117
|
+
finished = false;
|
|
118
|
+
for (let i = 0; i < pausedWaits.length; i++) pausedWaits[i] = 0;
|
|
119
|
+
};
|
|
120
|
+
const enqueue = (item, index) => {
|
|
121
|
+
queue.push({
|
|
122
|
+
item,
|
|
123
|
+
index
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
const dequeue = () => {
|
|
127
|
+
return queue.shift();
|
|
128
|
+
};
|
|
129
|
+
const clearAllBullets = () => {
|
|
130
|
+
for (const runtime of runtimeMap.values()) cancelBullet(runtime);
|
|
131
|
+
runtimeMap.clear();
|
|
132
|
+
for (const track of tracks.value) track.bullets = [];
|
|
133
|
+
for (let i = 0; i < nextStartAt.length; i++) nextStartAt[i] = 0;
|
|
134
|
+
};
|
|
135
|
+
const startBullet = (el, runtime) => {
|
|
136
|
+
const anim = el.animate([{ transform: `translate3d(${runtime.startX}px, -50%, 0)` }, { transform: `translate3d(${runtime.endX}px, -50%, 0)` }], {
|
|
137
|
+
duration: runtime.duration,
|
|
138
|
+
easing: props.easing
|
|
139
|
+
});
|
|
140
|
+
runtime.anim = anim;
|
|
141
|
+
runtime.state = "running";
|
|
142
|
+
anim.onfinish = () => {
|
|
143
|
+
finishBullet(runtime);
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
const pauseBullet = (runtime) => {
|
|
147
|
+
if (runtime.state !== "running") return;
|
|
148
|
+
runtime.anim?.pause();
|
|
149
|
+
runtime.state = "paused";
|
|
150
|
+
};
|
|
151
|
+
const resumeBullet = (runtime) => {
|
|
152
|
+
if (runtime.state !== "paused") return;
|
|
153
|
+
runtime.anim?.play();
|
|
154
|
+
runtime.state = "running";
|
|
155
|
+
};
|
|
156
|
+
const finishBullet = (runtime) => {
|
|
157
|
+
if (runtime.state === "done") return;
|
|
158
|
+
runtime.state = "done";
|
|
159
|
+
runtime.anim = null;
|
|
160
|
+
runtimeMap.delete(runtime.key);
|
|
161
|
+
const track = tracks.value[runtime.trackIndex];
|
|
162
|
+
const idx = track.bullets.findIndex((bullet) => bullet.key === runtime.key);
|
|
163
|
+
if (idx !== -1) track.bullets.splice(idx, 1);
|
|
164
|
+
if (props.loop) enqueue(runtime.entry.item, runtime.entry.index);
|
|
165
|
+
checkFinish();
|
|
166
|
+
};
|
|
167
|
+
const launch = async (trackIndex, entry) => {
|
|
168
|
+
const view = {
|
|
169
|
+
key: ++keySeq,
|
|
170
|
+
item: entry.item,
|
|
171
|
+
index: entry.index
|
|
172
|
+
};
|
|
173
|
+
const runtime = {
|
|
174
|
+
key: view.key,
|
|
175
|
+
trackIndex,
|
|
176
|
+
entry,
|
|
177
|
+
startX: 0,
|
|
178
|
+
endX: 0,
|
|
179
|
+
duration: 0,
|
|
180
|
+
anim: null,
|
|
181
|
+
state: "idle"
|
|
182
|
+
};
|
|
183
|
+
runtimeMap.set(view.key, runtime);
|
|
184
|
+
tracks.value[trackIndex].bullets.push(view);
|
|
185
|
+
nextStartAt[trackIndex] = Date.now() + 1e3;
|
|
186
|
+
await nextTick();
|
|
187
|
+
const el = queryBulletEl(view.key);
|
|
188
|
+
if (!el || runtime.state === "done") return;
|
|
189
|
+
const width = containerWidth();
|
|
190
|
+
const itemWidth = el.offsetWidth || 0;
|
|
191
|
+
const baseSpeed = props.speed > 0 ? props.speed : 100;
|
|
192
|
+
const speed = props.speedRange > 0 ? Math.max(1, baseSpeed + (Math.random() * 2 - 1) * props.speedRange) : baseSpeed;
|
|
193
|
+
runtime.startX = isRtl.value ? -itemWidth : width;
|
|
194
|
+
runtime.endX = isRtl.value ? width : -itemWidth;
|
|
195
|
+
runtime.duration = (width + itemWidth) / speed * 1e3;
|
|
196
|
+
nextStartAt[trackIndex] = Date.now() + (itemWidth + props.gap) / speed * 1e3;
|
|
197
|
+
startBullet(el, runtime);
|
|
198
|
+
if (!playing.value) pauseBullet(runtime);
|
|
199
|
+
};
|
|
200
|
+
const checkFinish = () => {
|
|
201
|
+
if (props.loop || queue.length > 0) return;
|
|
202
|
+
if (!tracks.value.some((track) => track.bullets.length > 0) && !finished) {
|
|
203
|
+
finished = true;
|
|
204
|
+
stopScheduler();
|
|
205
|
+
emit("finish");
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
const tick = () => {
|
|
209
|
+
if (!playing.value) return;
|
|
210
|
+
const now = Date.now();
|
|
211
|
+
const maxItems = props.maxItems > 0 ? props.maxItems : Infinity;
|
|
212
|
+
for (let i = 0; i < tracks.value.length; i++) {
|
|
213
|
+
if (queue.length === 0 || runtimeMap.size >= maxItems) break;
|
|
214
|
+
if (now >= nextStartAt[i]) {
|
|
215
|
+
const entry = dequeue();
|
|
216
|
+
if (entry) launch(i, entry);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
if (queue.length === 0 && !props.loop) {
|
|
220
|
+
if (!tracks.value.some((track) => track.bullets.length > 0) && !finished) {
|
|
221
|
+
finished = true;
|
|
222
|
+
stopScheduler();
|
|
223
|
+
emit("finish");
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
const loop = () => {
|
|
228
|
+
if (!schedulerRunning) return;
|
|
229
|
+
tick();
|
|
230
|
+
if (schedulerRunning) rafId = requestAnimationFrame(loop);
|
|
231
|
+
};
|
|
232
|
+
const startScheduler = () => {
|
|
233
|
+
if (schedulerRunning) return;
|
|
234
|
+
schedulerRunning = true;
|
|
235
|
+
rafId = requestAnimationFrame(loop);
|
|
236
|
+
tick();
|
|
237
|
+
};
|
|
238
|
+
const stopScheduler = () => {
|
|
239
|
+
schedulerRunning = false;
|
|
240
|
+
if (rafId != null) {
|
|
241
|
+
cancelAnimationFrame(rafId);
|
|
242
|
+
rafId = null;
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
const resume = () => {
|
|
246
|
+
if (playing.value) return;
|
|
247
|
+
playing.value = true;
|
|
248
|
+
const now = Date.now();
|
|
249
|
+
for (let i = 0; i < nextStartAt.length; i++) {
|
|
250
|
+
nextStartAt[i] = now + (pausedWaits[i] ?? 0);
|
|
251
|
+
pausedWaits[i] = 0;
|
|
252
|
+
}
|
|
253
|
+
for (const runtime of runtimeMap.values()) if (runtime.state === "paused") resumeBullet(runtime);
|
|
254
|
+
startScheduler();
|
|
255
|
+
emit("play");
|
|
256
|
+
};
|
|
257
|
+
const play = () => {
|
|
258
|
+
if (finished && queue.length === 0) initQueue();
|
|
259
|
+
resume();
|
|
260
|
+
};
|
|
261
|
+
const pause = () => {
|
|
262
|
+
if (!playing.value) return;
|
|
263
|
+
playing.value = false;
|
|
264
|
+
const now = Date.now();
|
|
265
|
+
for (let i = 0; i < nextStartAt.length; i++) pausedWaits[i] = Math.max(0, nextStartAt[i] - now);
|
|
266
|
+
stopScheduler();
|
|
267
|
+
for (const runtime of runtimeMap.values()) if (runtime.state === "running") pauseBullet(runtime);
|
|
268
|
+
emit("pause");
|
|
269
|
+
};
|
|
270
|
+
const stop = () => {
|
|
271
|
+
playing.value = false;
|
|
272
|
+
autoPaused.value = false;
|
|
273
|
+
stopScheduler();
|
|
274
|
+
clearAllBullets();
|
|
275
|
+
initQueue();
|
|
276
|
+
};
|
|
277
|
+
const send = (item) => {
|
|
278
|
+
enqueue(item, sendSeq++);
|
|
279
|
+
if (playing.value) startScheduler();
|
|
280
|
+
};
|
|
281
|
+
const syncAutoPause = () => {
|
|
282
|
+
if (!props.autoPause) return;
|
|
283
|
+
if (pauseReasons.size > 0) {
|
|
284
|
+
if (playing.value) {
|
|
285
|
+
autoPaused.value = true;
|
|
286
|
+
pause();
|
|
287
|
+
}
|
|
288
|
+
} else if (autoPaused.value) {
|
|
289
|
+
autoPaused.value = false;
|
|
290
|
+
resume();
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
const onVisibilityChange = () => {
|
|
294
|
+
if (document.hidden) pauseReasons.add("hidden");
|
|
295
|
+
else pauseReasons.delete("hidden");
|
|
296
|
+
syncAutoPause();
|
|
297
|
+
};
|
|
298
|
+
const { isIntersecting } = useIntersectionObserver({
|
|
299
|
+
target: rootRef,
|
|
300
|
+
disabled: () => !props.autoPause
|
|
301
|
+
});
|
|
302
|
+
watch(isIntersecting, (value) => {
|
|
303
|
+
if (value) pauseReasons.delete("view");
|
|
304
|
+
else pauseReasons.add("view");
|
|
305
|
+
syncAutoPause();
|
|
306
|
+
}, { immediate: true });
|
|
307
|
+
__expose({
|
|
308
|
+
play,
|
|
309
|
+
pause,
|
|
310
|
+
resume,
|
|
311
|
+
stop,
|
|
312
|
+
send
|
|
313
|
+
});
|
|
314
|
+
onMounted(() => {
|
|
315
|
+
rootWidth.value = rootRef.value?.clientWidth || 0;
|
|
316
|
+
buildTracks();
|
|
317
|
+
initQueue();
|
|
318
|
+
document.addEventListener("visibilitychange", onVisibilityChange);
|
|
319
|
+
if (props.autoPlay) play();
|
|
320
|
+
});
|
|
321
|
+
onBeforeUnmount(() => {
|
|
322
|
+
stopScheduler();
|
|
323
|
+
document.removeEventListener("visibilitychange", onVisibilityChange);
|
|
324
|
+
for (const runtime of runtimeMap.values()) cancelBullet(runtime);
|
|
325
|
+
runtimeMap.clear();
|
|
326
|
+
});
|
|
327
|
+
useResizeObserver(rootRef, (size) => {
|
|
328
|
+
rootWidth.value = size.width;
|
|
329
|
+
});
|
|
330
|
+
watch(() => props.rows, () => {
|
|
331
|
+
const wasPlaying = playing.value;
|
|
332
|
+
stopScheduler();
|
|
333
|
+
clearAllBullets();
|
|
334
|
+
queue.length = 0;
|
|
335
|
+
buildTracks();
|
|
336
|
+
initQueue();
|
|
337
|
+
if (wasPlaying) startScheduler();
|
|
338
|
+
});
|
|
339
|
+
watch(() => props.list, () => {
|
|
340
|
+
const wasPlaying = playing.value;
|
|
341
|
+
stopScheduler();
|
|
342
|
+
clearAllBullets();
|
|
343
|
+
initQueue();
|
|
344
|
+
if (wasPlaying) startScheduler();
|
|
345
|
+
});
|
|
346
|
+
return (_ctx, _cache) => {
|
|
347
|
+
return openBlock(), createElementBlock("div", {
|
|
348
|
+
ref: "root",
|
|
349
|
+
class: normalizeClass(unref(bem).b()),
|
|
350
|
+
style: normalizeStyle(rootStyle.value)
|
|
351
|
+
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(tracks.value, (track, trackIndex) => {
|
|
352
|
+
return openBlock(), createElementBlock("div", {
|
|
353
|
+
key: trackIndex,
|
|
354
|
+
class: normalizeClass(unref(bem).e("track"))
|
|
355
|
+
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(track.bullets, (bullet) => {
|
|
356
|
+
return openBlock(), createElementBlock("div", {
|
|
357
|
+
key: bullet.key,
|
|
358
|
+
"data-key": bullet.key,
|
|
359
|
+
class: normalizeClass(unref(bem).e("item"))
|
|
360
|
+
}, [renderSlot(_ctx.$slots, "item", {
|
|
361
|
+
item: bullet.item,
|
|
362
|
+
index: bullet.index
|
|
363
|
+
}, () => [createTextVNode(toDisplayString(defaultItemText(bullet.item)), 1)])], 10, _hoisted_1);
|
|
364
|
+
}), 128))], 2);
|
|
365
|
+
}), 128))], 6);
|
|
366
|
+
};
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
//#endregion
|
|
370
|
+
export { danmaku_default as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--s-danmaku-row-height:34px}.s-danmaku{position:relative;overflow:hidden}.s-danmaku__track{position:relative;height:var(--s-danmaku-row-height)}.s-danmaku__item{position:absolute;top:50%;left:0;white-space:nowrap;will-change:transform;transform:translate3d(100vw, -50%, 0)}:root[dir=rtl] .s-danmaku__item{transform:translate3d(-100vw, -50%, 0)}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type EnhancedComponent } from '../../utils';
|
|
2
|
+
import _Danmaku from './danmaku.vue';
|
|
3
|
+
export declare const Danmaku: EnhancedComponent<typeof _Danmaku>;
|
|
4
|
+
export default Danmaku;
|
|
5
|
+
export type { DanmakuProps, DanmakuSlots, DanmakuEmits, DanmakuExpose } from './common';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { enhanceComponent } from "../../utils/component.js";
|
|
2
|
+
import danmaku_default from "./danmaku.vue.js";
|
|
3
|
+
//#region packages/sard/components/danmaku/index.ts
|
|
4
|
+
const Danmaku = enhanceComponent(danmaku_default);
|
|
5
|
+
//#endregion
|
|
6
|
+
export { Danmaku, Danmaku as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type DatetimePickerProps, type DatetimePickerSlots } from '../datetime-picker/common';
|
|
2
2
|
import { type DefaultProps } from '../config';
|
|
3
3
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface DatetimePickerPopoutProps extends FormPopoutProps, DatetimePickerProps {
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultDatetimePickerPopoutProps: DefaultProps<DatetimePickerPopoutProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from '../datetime-range-picker/common';
|
|
2
2
|
import { type DefaultProps } from '../config';
|
|
3
3
|
import { type FormPopoutProps } from '../popout/useFormPopout';
|
|
4
|
-
import type { MotionEmits } from '../motion';
|
|
4
|
+
import type { MotionEmits } from '../motion/common';
|
|
5
5
|
export interface DatetimeRangePickerPopoutProps extends FormPopoutProps, DatetimeRangePickerProps {
|
|
6
6
|
}
|
|
7
7
|
export declare const defaultDatetimeRangePickerPopoutProps: DefaultProps<DatetimeRangePickerPopoutProps>;
|
|
@@ -14,21 +14,26 @@ export interface DescriptionsSlots {
|
|
|
14
14
|
}
|
|
15
15
|
export interface DescriptionsEmits {
|
|
16
16
|
}
|
|
17
|
+
export interface DescriptionsItemMeta {
|
|
18
|
+
colspan: () => number;
|
|
19
|
+
rowspan: () => number;
|
|
20
|
+
}
|
|
17
21
|
export interface DescriptionsContext {
|
|
18
22
|
bordered?: boolean;
|
|
19
23
|
colon?: boolean;
|
|
20
24
|
labelWidth?: string;
|
|
21
25
|
labelAlign?: DescriptionsAlign;
|
|
26
|
+
/** 注册一个描述项,返回注销函数 */
|
|
27
|
+
registerItem: (meta: DescriptionsItemMeta) => () => void;
|
|
28
|
+
/** 获取某个描述项内容格的列跨度 */
|
|
29
|
+
getContentSpan: (meta: DescriptionsItemMeta) => number | undefined;
|
|
22
30
|
}
|
|
23
31
|
export declare const descriptionsContextKey: InjectionKey<DescriptionsContext>;
|
|
24
32
|
export interface DescriptionsItemProps {
|
|
25
33
|
label?: string;
|
|
26
34
|
colspan?: number;
|
|
27
35
|
rowspan?: number;
|
|
28
|
-
labelWidth?: string;
|
|
29
36
|
labelAlign?: DescriptionsAlign;
|
|
30
|
-
/** @internal set by Descriptions for last item in incomplete rows */
|
|
31
|
-
contentColspan?: number;
|
|
32
37
|
}
|
|
33
38
|
export declare const defaultDescriptionsItemProps: DefaultProps<DescriptionsItemProps>;
|
|
34
39
|
export interface DescriptionsItemSlots {
|
|
@@ -3,10 +3,8 @@ type __VLS_Slots = DescriptionsItemSlots;
|
|
|
3
3
|
declare const __VLS_base: import("vue").DefineComponent<DescriptionsItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DescriptionsItemProps> & Readonly<{}>, {
|
|
4
4
|
label: string;
|
|
5
5
|
colspan: number;
|
|
6
|
-
labelWidth: string;
|
|
7
6
|
labelAlign: import("./common").DescriptionsAlign;
|
|
8
7
|
rowspan: number;
|
|
9
|
-
contentColspan: number;
|
|
10
8
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
9
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
12
10
|
declare const _default: typeof __VLS_export;
|