sard-uniapp 1.1.7 → 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 +42 -1
- package/changelog.md +9 -0
- package/components/_template/_template.d.ts +6 -4
- package/components/_template/_template.vue +4 -1
- package/components/_template/common.d.ts +3 -0
- package/components/_template/index.d.ts +1 -1
- package/components/config/index.d.ts +24 -0
- package/components/config/index.js +12 -0
- package/components/count-to/common.d.ts +13 -0
- package/components/count-to/common.js +2 -0
- package/components/count-to/count-to.d.ts +35 -0
- package/components/count-to/count-to.vue +67 -0
- package/components/count-to/index.d.ts +1 -0
- package/components/count-to/index.js +1 -0
- package/components/grid/common.d.ts +2 -0
- package/components/grid-item/grid-item.vue +14 -3
- package/components/indexes/common.d.ts +1 -0
- package/components/indexes/indexes.d.ts +1 -0
- package/components/indexes/indexes.vue +16 -10
- package/components/input/index.scss +6 -0
- package/components/marquee/common.d.ts +19 -0
- package/components/marquee/common.js +2 -0
- package/components/marquee/index.d.ts +1 -0
- package/components/marquee/index.js +1 -0
- package/components/marquee/index.scss +43 -0
- package/components/marquee/marquee.d.ts +39 -0
- package/components/marquee/marquee.vue +81 -0
- package/components/marquee/variables.scss +2 -0
- package/components/notice-bar/common.d.ts +3 -0
- package/components/notice-bar/index.d.ts +1 -1
- package/components/notice-bar/notice-bar.d.ts +3 -1
- package/components/notice-bar/notice-bar.vue +10 -5
- package/components/search/common.d.ts +3 -0
- package/components/search/search.d.ts +5 -0
- package/components/search/search.vue +10 -5
- package/components/stepper/index.scss +1 -0
- package/components/style/variables.scss +1 -1
- package/global.d.ts +4 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.scss +1 -0
- package/package.json +4 -1
- package/use/index.d.ts +4 -0
- package/use/index.js +4 -0
- package/use/useImperative.d.ts +1 -1
- package/use/useLuckyDraw.d.ts +22 -0
- package/use/useLuckyDraw.js +160 -0
- package/use/useLuckyGrid.d.ts +26 -0
- package/use/useLuckyGrid.js +62 -0
- package/use/useLuckyWheel.d.ts +15 -0
- package/use/useLuckyWheel.js +25 -0
- package/use/useSlotMachine.d.ts +16 -0
- package/use/useSlotMachine.js +87 -0
- package/use/useTransition.d.ts +2 -2
- package/utils/utils.d.ts +2 -0
- package/utils/utils.js +8 -0
package/README.md
CHANGED
|
@@ -38,4 +38,45 @@
|
|
|
38
38
|
|
|
39
39
|
## 开源协议
|
|
40
40
|
|
|
41
|
-
本项目基于
|
|
41
|
+
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源。
|
|
42
|
+
|
|
43
|
+
## 如何维护
|
|
44
|
+
|
|
45
|
+
### 克隆仓库到本地
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
git clone https://github.com/sutras/sard-uniapp.git
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 全局安装 pnpm(如果未安装)
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npm install -g pnpm
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 使用 pnpm 安装依赖
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
pnpm install
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### 修改 @dcloudio 源码
|
|
64
|
+
|
|
65
|
+
安装完依赖,需要修改@dcloudio 里面的一个地方,具体参考以下文档中的第一个问题(“热更新无效”):
|
|
66
|
+
|
|
67
|
+
[https://zhuanlan.zhihu.com/p/665000866](https://zhuanlan.zhihu.com/p/665000866)
|
|
68
|
+
|
|
69
|
+
### 运行开发环境
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
pnpm run dev
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
运行上面命令后会生成四个链接:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
Local: http://localhost:5173/sard-uniapp-docs/mobile/ (演示)
|
|
79
|
+
Network: http://192.168.1.121:5173/sard-uniapp-docs/mobile/ (局域网演示)
|
|
80
|
+
Local: http://localhost:7761/sard-uniapp-docs/ (文档)
|
|
81
|
+
Network: http://192.168.1.121:7761/sard-uniapp-docs/ (局域网文档)
|
|
82
|
+
```
|
package/changelog.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# [1.2.0](https://github.com/sutras/sard-uniapp/compare/v1.1.7...v1.2.0) (2024-07-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* 新增Marquee, LuckyDraw, CountTo组件 ([61db992](https://github.com/sutras/sard-uniapp/commit/61db992aea95658b714ae4182526dff10ad54491))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
1
10
|
## [1.1.7](https://github.com/sutras/sard-uniapp/compare/v1.1.6...v1.1.7) (2024-05-20)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<_TemplateProps>, {}>, {
|
|
3
|
-
|
|
1
|
+
import { type _TemplateProps, type _TemplateSlots } from './common';
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<_TemplateProps>, {}>, {
|
|
3
|
+
reset: () => void;
|
|
4
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
5
|
+
click: (event: any) => void;
|
|
4
6
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<_TemplateProps>, {}>>> & {
|
|
5
|
-
onClick?: ((
|
|
7
|
+
onClick?: ((event: any) => any) | undefined;
|
|
6
8
|
}, {}, {}>, Readonly<_TemplateSlots> & _TemplateSlots>;
|
|
7
9
|
export default _default;
|
|
8
10
|
type __VLS_WithDefaults<P, D> = {
|
|
@@ -22,9 +22,12 @@ export default _defineComponent({
|
|
|
22
22
|
},
|
|
23
23
|
emits: ["click"],
|
|
24
24
|
setup(__props, { expose: __expose }) {
|
|
25
|
-
__expose();
|
|
26
25
|
const props = __props;
|
|
27
26
|
const bem = createBem("_template");
|
|
27
|
+
__expose({
|
|
28
|
+
reset: () => {
|
|
29
|
+
}
|
|
30
|
+
});
|
|
28
31
|
const _templateClass = computed(() => {
|
|
29
32
|
return classNames(bem.b(), props.rootClass);
|
|
30
33
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {} from './common';
|
|
1
|
+
export type { _TemplateProps, _TemplateSlots, _TemplateEmits, _TemplateExpose, } from './common';
|
|
@@ -41,6 +41,12 @@ export declare const defaultConfig: {
|
|
|
41
41
|
autoStart: boolean;
|
|
42
42
|
format: string;
|
|
43
43
|
};
|
|
44
|
+
countTo: {
|
|
45
|
+
value: number;
|
|
46
|
+
precision: number;
|
|
47
|
+
separatorDigit: number;
|
|
48
|
+
duration: number;
|
|
49
|
+
};
|
|
44
50
|
datetimePicker: {
|
|
45
51
|
type: string;
|
|
46
52
|
};
|
|
@@ -110,6 +116,11 @@ export declare const defaultConfig: {
|
|
|
110
116
|
loading: {
|
|
111
117
|
type: "circular";
|
|
112
118
|
};
|
|
119
|
+
marquee: {
|
|
120
|
+
direction: "vertical";
|
|
121
|
+
delay: number;
|
|
122
|
+
speed: number;
|
|
123
|
+
};
|
|
113
124
|
noticeBar: {
|
|
114
125
|
delay: number;
|
|
115
126
|
speed: number;
|
|
@@ -198,6 +209,7 @@ export declare const defaultConfig: {
|
|
|
198
209
|
};
|
|
199
210
|
search: {
|
|
200
211
|
shape: "square";
|
|
212
|
+
focus: boolean;
|
|
201
213
|
};
|
|
202
214
|
shareSheet: {
|
|
203
215
|
overlayClosable: boolean;
|
|
@@ -357,6 +369,12 @@ export declare function useConfigContext(): DeepPartial<{
|
|
|
357
369
|
autoStart: boolean;
|
|
358
370
|
format: string;
|
|
359
371
|
};
|
|
372
|
+
countTo: {
|
|
373
|
+
value: number;
|
|
374
|
+
precision: number;
|
|
375
|
+
separatorDigit: number;
|
|
376
|
+
duration: number;
|
|
377
|
+
};
|
|
360
378
|
datetimePicker: {
|
|
361
379
|
type: string;
|
|
362
380
|
};
|
|
@@ -426,6 +444,11 @@ export declare function useConfigContext(): DeepPartial<{
|
|
|
426
444
|
loading: {
|
|
427
445
|
type: "circular";
|
|
428
446
|
};
|
|
447
|
+
marquee: {
|
|
448
|
+
direction: "vertical";
|
|
449
|
+
delay: number;
|
|
450
|
+
speed: number;
|
|
451
|
+
};
|
|
429
452
|
noticeBar: {
|
|
430
453
|
delay: number;
|
|
431
454
|
speed: number;
|
|
@@ -514,6 +537,7 @@ export declare function useConfigContext(): DeepPartial<{
|
|
|
514
537
|
};
|
|
515
538
|
search: {
|
|
516
539
|
shape: "square";
|
|
540
|
+
focus: boolean;
|
|
517
541
|
};
|
|
518
542
|
shareSheet: {
|
|
519
543
|
overlayClosable: boolean;
|
|
@@ -42,6 +42,12 @@ export const defaultConfig = {
|
|
|
42
42
|
autoStart: true,
|
|
43
43
|
format: 'HH:mm:ss',
|
|
44
44
|
},
|
|
45
|
+
countTo: {
|
|
46
|
+
value: 0,
|
|
47
|
+
precision: 0,
|
|
48
|
+
separatorDigit: 3,
|
|
49
|
+
duration: 2000,
|
|
50
|
+
},
|
|
45
51
|
datetimePicker: {
|
|
46
52
|
type: 'yMd',
|
|
47
53
|
},
|
|
@@ -111,6 +117,11 @@ export const defaultConfig = {
|
|
|
111
117
|
loading: {
|
|
112
118
|
type: 'circular',
|
|
113
119
|
},
|
|
120
|
+
marquee: {
|
|
121
|
+
direction: 'vertical',
|
|
122
|
+
delay: 1000,
|
|
123
|
+
speed: 50,
|
|
124
|
+
},
|
|
114
125
|
noticeBar: {
|
|
115
126
|
delay: 1000,
|
|
116
127
|
speed: 50,
|
|
@@ -199,6 +210,7 @@ export const defaultConfig = {
|
|
|
199
210
|
},
|
|
200
211
|
search: {
|
|
201
212
|
shape: 'square',
|
|
213
|
+
focus: false,
|
|
202
214
|
},
|
|
203
215
|
shareSheet: {
|
|
204
216
|
overlayClosable: true,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface CountToProps {
|
|
2
|
+
value?: number;
|
|
3
|
+
precision?: number;
|
|
4
|
+
separator?: string;
|
|
5
|
+
separatorDigit?: number;
|
|
6
|
+
duration?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const countToPropsDefaults: {
|
|
9
|
+
value: number;
|
|
10
|
+
precision: number;
|
|
11
|
+
separatorDigit: number;
|
|
12
|
+
duration: number;
|
|
13
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type CountToProps } from './common';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<CountToProps>, {
|
|
3
|
+
value: number;
|
|
4
|
+
precision: number;
|
|
5
|
+
separatorDigit: number;
|
|
6
|
+
duration: number;
|
|
7
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CountToProps>, {
|
|
8
|
+
value: number;
|
|
9
|
+
precision: number;
|
|
10
|
+
separatorDigit: number;
|
|
11
|
+
duration: number;
|
|
12
|
+
}>>>, {
|
|
13
|
+
value: number;
|
|
14
|
+
duration: number;
|
|
15
|
+
precision: number;
|
|
16
|
+
separatorDigit: number;
|
|
17
|
+
}, {}>;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_WithDefaults<P, D> = {
|
|
20
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
21
|
+
default: D[K];
|
|
22
|
+
}> : P[K];
|
|
23
|
+
};
|
|
24
|
+
type __VLS_Prettify<T> = {
|
|
25
|
+
[K in keyof T]: T[K];
|
|
26
|
+
} & {};
|
|
27
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
28
|
+
type __VLS_TypePropsToOption<T> = {
|
|
29
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
30
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
31
|
+
} : {
|
|
32
|
+
type: import('vue').PropType<T[K]>;
|
|
33
|
+
required: true;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
{{ renderedNumer }}
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
|
|
7
|
+
import { computed, onUnmounted, ref, watch } from "vue";
|
|
8
|
+
import { addSeparator } from "../../utils";
|
|
9
|
+
import { countToPropsDefaults } from "./common";
|
|
10
|
+
import { createAnimation } from "lwa";
|
|
11
|
+
export default _defineComponent({
|
|
12
|
+
...{
|
|
13
|
+
options: {
|
|
14
|
+
virtualHost: true,
|
|
15
|
+
styleIsolation: "shared"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
__name: "count-to",
|
|
19
|
+
props: _mergeDefaults({
|
|
20
|
+
value: { type: Number, required: false },
|
|
21
|
+
precision: { type: Number, required: false },
|
|
22
|
+
separator: { type: String, required: false },
|
|
23
|
+
separatorDigit: { type: Number, required: false },
|
|
24
|
+
duration: { type: Number, required: false }
|
|
25
|
+
}, countToPropsDefaults),
|
|
26
|
+
setup(__props, { expose: __expose }) {
|
|
27
|
+
__expose();
|
|
28
|
+
const props = __props;
|
|
29
|
+
const number = ref(0);
|
|
30
|
+
let tl;
|
|
31
|
+
const renderedNumer = computed(() => {
|
|
32
|
+
const fixedNum = number.value.toFixed(props.precision);
|
|
33
|
+
return props.separator ? addSeparator(fixedNum, props.separator, props.separatorDigit) : fixedNum;
|
|
34
|
+
});
|
|
35
|
+
watch(
|
|
36
|
+
() => props.value,
|
|
37
|
+
() => {
|
|
38
|
+
tl?.pause();
|
|
39
|
+
tl = createAnimation(
|
|
40
|
+
number,
|
|
41
|
+
{
|
|
42
|
+
value: props.value
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
duration: props.duration,
|
|
46
|
+
easing: "easeOutQuint",
|
|
47
|
+
round: Math.pow(10, props.precision)
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
flush: "post",
|
|
53
|
+
immediate: true
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
onUnmounted(() => {
|
|
57
|
+
tl?.pause();
|
|
58
|
+
});
|
|
59
|
+
const __returned__ = { props, number, get tl() {
|
|
60
|
+
return tl;
|
|
61
|
+
}, set tl(v) {
|
|
62
|
+
tl = v;
|
|
63
|
+
}, renderedNumer };
|
|
64
|
+
return __returned__;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { CountToProps } from './common';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view :class="
|
|
2
|
+
<view :class="itemClass" :style="itemStyle">
|
|
3
3
|
<view :class="bem.e('wrapper')">
|
|
4
|
-
<view
|
|
4
|
+
<view
|
|
5
|
+
:class="classNames(bem.e('content'), contentClass)"
|
|
6
|
+
:style="stringifyStyle(contentStyle)"
|
|
7
|
+
@click="onClick"
|
|
8
|
+
>
|
|
5
9
|
<slot>
|
|
6
10
|
<view :class="bem.e('icon')">
|
|
7
11
|
<slot name="icon">
|
|
@@ -41,6 +45,8 @@ export default _defineComponent({
|
|
|
41
45
|
props: {
|
|
42
46
|
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
43
47
|
rootClass: { type: String, required: false },
|
|
48
|
+
contentStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
49
|
+
contentClass: { type: String, required: false },
|
|
44
50
|
text: { type: String, required: false },
|
|
45
51
|
icon: { type: String, required: false },
|
|
46
52
|
iconSize: { type: String, required: false },
|
|
@@ -60,6 +66,9 @@ export default _defineComponent({
|
|
|
60
66
|
const onClick = (event) => {
|
|
61
67
|
emit("click", event);
|
|
62
68
|
};
|
|
69
|
+
const itemClass = computed(() => {
|
|
70
|
+
return classNames(bem.e("item"), props.rootClass);
|
|
71
|
+
});
|
|
63
72
|
const itemStyle = computed(() => {
|
|
64
73
|
const width = 1 / context.columns * 100 + "%";
|
|
65
74
|
const gutter = context.gutter;
|
|
@@ -75,7 +84,9 @@ export default _defineComponent({
|
|
|
75
84
|
props.rootStyle
|
|
76
85
|
);
|
|
77
86
|
});
|
|
78
|
-
const __returned__ = { props, emit, bem, context, onClick, itemStyle, get
|
|
87
|
+
const __returned__ = { props, emit, bem, context, onClick, itemClass, itemStyle, get stringifyStyle() {
|
|
88
|
+
return stringifyStyle;
|
|
89
|
+
}, get classNames() {
|
|
79
90
|
return classNames;
|
|
80
91
|
}, SarIcon };
|
|
81
92
|
return __returned__;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type IndexesProps, type IndexesSlots } from './common';
|
|
2
2
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IndexesProps>, {}>, {
|
|
3
3
|
scrollTo: (name: string | number) => void;
|
|
4
|
+
update: () => void;
|
|
4
5
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
5
6
|
change: (name: string | number) => void;
|
|
6
7
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IndexesProps>, {}>>> & {
|
|
@@ -94,9 +94,6 @@ export default _defineComponent({
|
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
|
-
__expose({
|
|
98
|
-
scrollTo
|
|
99
|
-
});
|
|
100
97
|
const onScroll = (event) => {
|
|
101
98
|
memoScrollTop.value = event.detail.scrollTop;
|
|
102
99
|
if (lockScroll || !scrollViewRect.value) {
|
|
@@ -147,14 +144,19 @@ export default _defineComponent({
|
|
|
147
144
|
});
|
|
148
145
|
return sortedAllRect;
|
|
149
146
|
};
|
|
147
|
+
const update = () => {
|
|
148
|
+
getAllAnchorRect().then((rect) => {
|
|
149
|
+
anchorRectList.value = rect;
|
|
150
|
+
if (!isNullish(props.current)) {
|
|
151
|
+
scrollTo(props.current);
|
|
152
|
+
} else {
|
|
153
|
+
innerCurrent.value = anchorNames.value[0];
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
};
|
|
150
157
|
onMounted(() => {
|
|
151
158
|
nextTick(() => {
|
|
152
|
-
|
|
153
|
-
anchorRectList.value = rect;
|
|
154
|
-
if (!isNullish(props.current)) {
|
|
155
|
-
scrollTo(props.current);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
159
|
+
update();
|
|
158
160
|
});
|
|
159
161
|
});
|
|
160
162
|
const anchorNames = computed(() => {
|
|
@@ -165,6 +167,10 @@ export default _defineComponent({
|
|
|
165
167
|
scrollTo(name);
|
|
166
168
|
emit("change", name);
|
|
167
169
|
};
|
|
170
|
+
__expose({
|
|
171
|
+
scrollTo,
|
|
172
|
+
update
|
|
173
|
+
});
|
|
168
174
|
const indexesClass = computed(() => {
|
|
169
175
|
return classNames(bem.b(), props.rootClass);
|
|
170
176
|
});
|
|
@@ -175,7 +181,7 @@ export default _defineComponent({
|
|
|
175
181
|
return lockScroll;
|
|
176
182
|
}, set lockScroll(v) {
|
|
177
183
|
lockScroll = v;
|
|
178
|
-
}, unLockScrollLater, scrollTo, onScroll, anchorRectList, anchorMap, getAllAnchorRect, anchorNames, onNavSelect, indexesClass, indexesStyle, SarIndexesNav };
|
|
184
|
+
}, unLockScrollLater, scrollTo, onScroll, anchorRectList, anchorMap, getAllAnchorRect, update, anchorNames, onNavSelect, indexesClass, indexesStyle, SarIndexesNav };
|
|
179
185
|
return __returned__;
|
|
180
186
|
}
|
|
181
187
|
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type StyleValue } from 'vue';
|
|
2
|
+
export interface MarqueeProps {
|
|
3
|
+
rootStyle?: StyleValue;
|
|
4
|
+
rootClass?: string;
|
|
5
|
+
direction?: 'vertical' | 'horizontal';
|
|
6
|
+
delay?: number;
|
|
7
|
+
speed?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare const marqueePropsDefaults: {
|
|
10
|
+
direction: "vertical";
|
|
11
|
+
delay: number;
|
|
12
|
+
speed: number;
|
|
13
|
+
};
|
|
14
|
+
export interface MarqueeSlots {
|
|
15
|
+
default?(props: Record<string, never>): any;
|
|
16
|
+
}
|
|
17
|
+
export interface MarqueeExpose {
|
|
18
|
+
update: () => void;
|
|
19
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { MarqueeProps, MarqueeSlots, MarqueeExpose } from './common';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@use '../style/base' as *;
|
|
2
|
+
|
|
3
|
+
@include bem(marquee) {
|
|
4
|
+
@include b() {
|
|
5
|
+
@include universal;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@include e(wrapper) {
|
|
10
|
+
@include universal;
|
|
11
|
+
flex: none;
|
|
12
|
+
animation-timing-function: linear;
|
|
13
|
+
animation-iteration-count: infinite;
|
|
14
|
+
animation-play-state: paused;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@include m(vertical) {
|
|
18
|
+
@include e(wrapper) {
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
animation-name: #{bem-ns(marquee-scroll-vertical)};
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@include m(horizontal) {
|
|
25
|
+
flex-direction: row;
|
|
26
|
+
@include e(wrapper) {
|
|
27
|
+
flex-direction: row;
|
|
28
|
+
animation-name: #{bem-ns(marquee-scroll-horizontal)};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes #{bem-ns(marquee-scroll-vertical)} {
|
|
33
|
+
100% {
|
|
34
|
+
transform: translate3d(0, -50%, 0);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes #{bem-ns(marquee-scroll-horizontal)} {
|
|
39
|
+
100% {
|
|
40
|
+
transform: translate3d(-50%, 0, 0);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { type MarqueeProps, type MarqueeSlots } from './common';
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MarqueeProps>, {
|
|
3
|
+
direction: "vertical";
|
|
4
|
+
delay: number;
|
|
5
|
+
speed: number;
|
|
6
|
+
}>, {
|
|
7
|
+
update: () => void;
|
|
8
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MarqueeProps>, {
|
|
9
|
+
direction: "vertical";
|
|
10
|
+
delay: number;
|
|
11
|
+
speed: number;
|
|
12
|
+
}>>>, {
|
|
13
|
+
direction: "vertical" | "horizontal";
|
|
14
|
+
delay: number;
|
|
15
|
+
speed: number;
|
|
16
|
+
}, {}>, Readonly<MarqueeSlots> & MarqueeSlots>;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithDefaults<P, D> = {
|
|
19
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
20
|
+
default: D[K];
|
|
21
|
+
}> : P[K];
|
|
22
|
+
};
|
|
23
|
+
type __VLS_Prettify<T> = {
|
|
24
|
+
[K in keyof T]: T[K];
|
|
25
|
+
} & {};
|
|
26
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
27
|
+
new (): {
|
|
28
|
+
$slots: S;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
32
|
+
type __VLS_TypePropsToOption<T> = {
|
|
33
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
34
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
35
|
+
} : {
|
|
36
|
+
type: import('vue').PropType<T[K]>;
|
|
37
|
+
required: true;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view :class="marqueeClass" :style="marqueeStyle">
|
|
3
|
+
<view :id="wrapperId" :class="bem.e('wrapper')" :style="wrapperStyle">
|
|
4
|
+
<slot></slot>
|
|
5
|
+
</view>
|
|
6
|
+
</view>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
|
|
11
|
+
import { computed, getCurrentInstance, onMounted, ref } from "vue";
|
|
12
|
+
import {
|
|
13
|
+
classNames,
|
|
14
|
+
stringifyStyle,
|
|
15
|
+
createBem,
|
|
16
|
+
uniqid,
|
|
17
|
+
getBoundingClientRect
|
|
18
|
+
} from "../../utils";
|
|
19
|
+
import {
|
|
20
|
+
marqueePropsDefaults
|
|
21
|
+
} from "./common";
|
|
22
|
+
import { useSetTimeout } from "../../use";
|
|
23
|
+
export default _defineComponent({
|
|
24
|
+
...{
|
|
25
|
+
options: {
|
|
26
|
+
virtualHost: true,
|
|
27
|
+
styleIsolation: "shared"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
__name: "marquee",
|
|
31
|
+
props: _mergeDefaults({
|
|
32
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
33
|
+
rootClass: { type: String, required: false },
|
|
34
|
+
direction: { type: String, required: false },
|
|
35
|
+
delay: { type: Number, required: false },
|
|
36
|
+
speed: { type: Number, required: false }
|
|
37
|
+
}, marqueePropsDefaults),
|
|
38
|
+
setup(__props, { expose: __expose }) {
|
|
39
|
+
const props = __props;
|
|
40
|
+
const bem = createBem("marquee");
|
|
41
|
+
const instance = getCurrentInstance();
|
|
42
|
+
const wrapperId = uniqid();
|
|
43
|
+
const duration = ref(0);
|
|
44
|
+
const update = async () => {
|
|
45
|
+
const { width, height } = await getBoundingClientRect(
|
|
46
|
+
`#${wrapperId}`,
|
|
47
|
+
instance
|
|
48
|
+
);
|
|
49
|
+
const size = props.direction === "vertical" ? height : width;
|
|
50
|
+
duration.value = size / props.speed * 1e3;
|
|
51
|
+
};
|
|
52
|
+
const [updateLater] = useSetTimeout(() => {
|
|
53
|
+
update();
|
|
54
|
+
});
|
|
55
|
+
onMounted(() => {
|
|
56
|
+
updateLater(props.delay);
|
|
57
|
+
});
|
|
58
|
+
__expose({
|
|
59
|
+
update
|
|
60
|
+
});
|
|
61
|
+
const marqueeClass = computed(() => {
|
|
62
|
+
return classNames(bem.b(), bem.m(props.direction), props.rootClass);
|
|
63
|
+
});
|
|
64
|
+
const marqueeStyle = computed(() => {
|
|
65
|
+
return stringifyStyle(props.rootStyle);
|
|
66
|
+
});
|
|
67
|
+
const wrapperStyle = computed(() => {
|
|
68
|
+
return stringifyStyle({
|
|
69
|
+
animationDuration: `${duration.value}ms`,
|
|
70
|
+
animationPlayState: duration.value ? "running" : "paused"
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
const __returned__ = { props, bem, instance, wrapperId, duration, update, updateLater, marqueeClass, marqueeStyle, wrapperStyle };
|
|
74
|
+
return __returned__;
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<style lang="scss">
|
|
80
|
+
@import './index.scss';
|
|
81
|
+
</style>
|