@ecolovo/uniapp-components 2.0.1 → 2.0.3
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/components/aspect/aspect.vue +4 -2
- package/components/badge/badge.scss +3 -1
- package/components/badge/badge.vue +15 -11
- package/components/button/button.vue +100 -27
- package/components/checkbox/checkbox.scss +1 -1
- package/components/checkbox/checkbox.vue +54 -23
- package/components/checkbox-group/checkbox-group.vue +11 -4
- package/components/checkbox-group2/checkbox-group2.vue +23 -8
- package/components/checkbox-group2/checkbox2.vue +11 -4
- package/components/data-list/data-list.vue +25 -5
- package/components/date-picker/date-picker-view.vue +45 -16
- package/components/date-picker/date-picker.vue +58 -18
- package/components/dialog/dialog-content.vue +39 -12
- package/components/dialog/dialog.vue +30 -19
- package/components/dropdown/dropdown.vue +29 -6
- package/components/empty/empty.vue +10 -3
- package/components/flex/flex.vue +16 -6
- package/components/form-item/form-item.vue +13 -4
- package/components/icon/icon.scss +9 -0
- package/components/icon/icon.vue +46 -8
- package/components/image/image.vue +13 -8
- package/components/index.d.ts +50 -0
- package/components/index.js +50 -0
- package/components/index.ts +50 -0
- package/components/input/input.vue +13 -3
- package/components/input/password-input.vue +2 -2
- package/components/list-page/list-page.vue +24 -6
- package/components/load-more/load-more.vue +7 -2
- package/components/loading/animations/loading-animation3.vue +10 -5
- package/components/loading/animations/loading-animation4.vue +65 -8
- package/components/loading/loading.vue +7 -6
- package/components/message-box/message-box.d.ts +18 -0
- package/components/message-box/message-box.js +1 -0
- package/components/message-box/message-box.ts +18 -0
- package/components/message-box/message-box.vue +53 -21
- package/components/number-dialog/number-dialog.vue +61 -21
- package/components/number-input/number-input.vue +53 -18
- package/components/numpad/numpad.vue +11 -5
- package/components/page/page-body.scss +1 -1
- package/components/page/page-body.vue +79 -11
- package/components/page/page-footer.vue +11 -5
- package/components/page/page-header.vue +49 -24
- package/components/page/page.scss +2 -1
- package/components/page/page.vue +74 -29
- package/components/picker/picker-popup.vue +96 -68
- package/components/picker/picker.vue +11 -5
- package/components/popover/popover-content.vue +59 -19
- package/components/popover/popover-mask.vue +18 -11
- package/components/popover/popover.vue +13 -3
- package/components/popup/popup-content.vue +35 -11
- package/components/popup/popup.vue +36 -17
- package/components/price/price.scss +1 -0
- package/components/price/price.vue +18 -7
- package/components/search/search.vue +24 -10
- package/components/searching/searching.scss +14 -0
- package/components/searching/searching.vue +17 -10
- package/components/selector/selector.vue +10 -3
- package/components/switch/switch.vue +31 -10
- package/components/tab/tab.vue +41 -8
- package/components/textarea/textarea.vue +55 -13
- package/composable/component-name.js +2 -1
- package/composable/component-name.ts +2 -1
- package/composable/message-box.d.ts +35 -0
- package/composable/message-box.js +56 -0
- package/composable/message-box.ts +98 -0
- package/configs/index.d.ts +8 -1
- package/configs/index.js +14 -3
- package/configs/index.ts +8 -1
- package/easyCom.js +10 -5
- package/easyCom.ts +10 -5
- package/globals.d.ts +36 -0
- package/index.d.ts +5 -0
- package/index.js +5 -0
- package/index.ts +5 -0
- package/package.json +14 -6
- package/styles/global.scss +123 -2
- package/styles/reset.scss +5 -0
- package/styles/utils/css-var.scss +11 -11
- package/styles/utils/index.scss +0 -1
- package/styles/var/component.scss +23 -20
- package/styles/var/theme.scss +3 -3
- package/utils/date.d.ts +7 -2
- package/utils/date.js +31 -10
- package/utils/date.ts +20 -6
- package/utils/price.d.ts +4 -1
- package/utils/price.js +12 -7
- package/utils/price.ts +8 -3
- package/utils/round.js +4 -1
- package/utils/round.ts +4 -1
- package/utils/windowInfo.d.ts +0 -1
- package/styles/utils/z-index.scss +0 -10
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
@click.stop="toggle"
|
|
12
12
|
>
|
|
13
13
|
<view :class="$style['Switch--switch-button']">
|
|
14
|
-
<icon-cpn
|
|
14
|
+
<icon-cpn
|
|
15
|
+
v-if="loading"
|
|
16
|
+
icon="loading-dot-spinner"
|
|
17
|
+
:class="$style['Switch--loading']"
|
|
18
|
+
/>
|
|
15
19
|
</view>
|
|
16
20
|
</view>
|
|
17
21
|
</template>
|
|
@@ -60,9 +64,7 @@ const emit = defineEmits<{
|
|
|
60
64
|
e: 'async',
|
|
61
65
|
payload: {
|
|
62
66
|
value: boolean | number | string;
|
|
63
|
-
|
|
64
|
-
reject: (reason?: unknown) => void;
|
|
65
|
-
}
|
|
67
|
+
} & UniApp.PromiseResolvers<unknown>
|
|
66
68
|
): void;
|
|
67
69
|
}>();
|
|
68
70
|
|
|
@@ -79,7 +81,9 @@ const loading = ref(false);
|
|
|
79
81
|
const isReadonly = computed(() => props.readonly || isFormReadonly.value);
|
|
80
82
|
|
|
81
83
|
/** 按钮是否可点击 */
|
|
82
|
-
const isNotClickable = computed(
|
|
84
|
+
const isNotClickable = computed(
|
|
85
|
+
() => props.disabled || isReadonly.value || loading.value
|
|
86
|
+
);
|
|
83
87
|
|
|
84
88
|
/** 开启或关闭 */
|
|
85
89
|
const toggle = () => {
|
|
@@ -91,8 +95,17 @@ const toggle = () => {
|
|
|
91
95
|
}
|
|
92
96
|
|
|
93
97
|
loading.value = true;
|
|
94
|
-
const nextValue =
|
|
95
|
-
|
|
98
|
+
const nextValue =
|
|
99
|
+
props.modelValue !== props.valueOn ? props.valueOn : props.valueOff;
|
|
100
|
+
|
|
101
|
+
// const { promise, resolve, reject } = Promise.withResolvers();
|
|
102
|
+
let resolve: UniApp.PromiseResolver<unknown>,
|
|
103
|
+
reject: UniApp.PromiseRejector<unknown>;
|
|
104
|
+
const promise = new Promise((res, rej) => {
|
|
105
|
+
resolve = res;
|
|
106
|
+
reject = rej;
|
|
107
|
+
});
|
|
108
|
+
|
|
96
109
|
promise
|
|
97
110
|
.then((isOk = true) => {
|
|
98
111
|
if (isOk === false) return;
|
|
@@ -126,7 +139,7 @@ const $_toggle = () => {
|
|
|
126
139
|
|
|
127
140
|
// 定义外部变量
|
|
128
141
|
%external-vars {
|
|
129
|
-
@include UTILS__DEFINE_COMPONENT_VARS(
|
|
142
|
+
@include UTILS__DEFINE_COMPONENT_VARS('switch', $switch);
|
|
130
143
|
}
|
|
131
144
|
|
|
132
145
|
.Switch {
|
|
@@ -142,7 +155,9 @@ const $_toggle = () => {
|
|
|
142
155
|
display: block;
|
|
143
156
|
position: absolute;
|
|
144
157
|
top: 50%;
|
|
145
|
-
left: calc(
|
|
158
|
+
left: calc(
|
|
159
|
+
(UTILS__LOCAL_VAR(height) - UTILS__LOCAL_VAR(indicator-size)) / 2
|
|
160
|
+
);
|
|
146
161
|
transform: translateY(-50%);
|
|
147
162
|
width: UTILS__LOCAL_VAR(indicator-size);
|
|
148
163
|
height: UTILS__LOCAL_VAR(indicator-size);
|
|
@@ -162,7 +177,13 @@ const $_toggle = () => {
|
|
|
162
177
|
&.Switch--switch-on {
|
|
163
178
|
background-color: UTILS__LOCAL_VAR(active-color);
|
|
164
179
|
.Switch--switch-button {
|
|
165
|
-
left: calc(
|
|
180
|
+
left: calc(
|
|
181
|
+
100% -
|
|
182
|
+
(
|
|
183
|
+
UTILS__LOCAL_VAR(height) +
|
|
184
|
+
UTILS__LOCAL_VAR(indicator-size)
|
|
185
|
+
) / 2
|
|
186
|
+
);
|
|
166
187
|
}
|
|
167
188
|
}
|
|
168
189
|
&::after {
|
package/components/tab/tab.vue
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view
|
|
2
|
+
<view
|
|
3
|
+
:class="[
|
|
4
|
+
...classNames,
|
|
5
|
+
$style['Tab'],
|
|
6
|
+
{ [$style['Tab--evenly']]: evenly },
|
|
7
|
+
]"
|
|
8
|
+
:style="inlineStyle"
|
|
9
|
+
>
|
|
3
10
|
<scroll-view scroll-x :class="$style['Tab--tab-scroll']">
|
|
4
11
|
<view :class="$style['Tab--tab-wrapper']">
|
|
5
12
|
<view
|
|
6
13
|
v-for="(tab, index) in tabLabels"
|
|
7
14
|
:key="index"
|
|
8
|
-
:class="[
|
|
15
|
+
:class="[
|
|
16
|
+
[$style['Tab--tab']],
|
|
17
|
+
{
|
|
18
|
+
[$style['Tab--tab-active']]:
|
|
19
|
+
index === selectedIndex,
|
|
20
|
+
},
|
|
21
|
+
]"
|
|
9
22
|
@click="onChangeTab(index)"
|
|
10
23
|
>
|
|
11
24
|
<view :class="$style['Tab--tab-text']">{{ tab }}</view>
|
|
12
25
|
</view>
|
|
13
26
|
<view
|
|
14
27
|
v-if="indicator"
|
|
15
|
-
:class="[
|
|
28
|
+
:class="[
|
|
29
|
+
$style['Tab--indicator'],
|
|
30
|
+
{ [$style['Tab--indicator-animation']]: hasAnimation },
|
|
31
|
+
]"
|
|
16
32
|
>
|
|
17
33
|
</view>
|
|
18
34
|
</view>
|
|
@@ -21,7 +37,15 @@
|
|
|
21
37
|
</template>
|
|
22
38
|
|
|
23
39
|
<script lang="ts" setup>
|
|
24
|
-
import {
|
|
40
|
+
import {
|
|
41
|
+
computed,
|
|
42
|
+
getCurrentInstance,
|
|
43
|
+
nextTick,
|
|
44
|
+
onMounted,
|
|
45
|
+
ref,
|
|
46
|
+
useCssModule,
|
|
47
|
+
watch,
|
|
48
|
+
} from 'vue';
|
|
25
49
|
import useClassNames from '../../composable/component-name';
|
|
26
50
|
|
|
27
51
|
defineOptions({
|
|
@@ -78,10 +102,13 @@ const tabTextRects = ref<UniApp.NodeInfo[]>([]);
|
|
|
78
102
|
const hasAnimation = ref(false);
|
|
79
103
|
|
|
80
104
|
/** 标签标题列表 */
|
|
81
|
-
const tabLabels = computed(() =>
|
|
105
|
+
const tabLabels = computed(() =>
|
|
106
|
+
props.tabs.map((item) => (typeof item === 'string' ? item : item.label))
|
|
107
|
+
);
|
|
82
108
|
/** 当前选中的索引 */
|
|
83
109
|
const selectedIndex = computed<number>({
|
|
84
|
-
get: () =>
|
|
110
|
+
get: () =>
|
|
111
|
+
props.modelValue === undefined ? innerIndex.value : props.modelValue,
|
|
85
112
|
set: (value) => {
|
|
86
113
|
emit('update:modelValue', value);
|
|
87
114
|
innerIndex.value = value;
|
|
@@ -94,7 +121,9 @@ watch(
|
|
|
94
121
|
([nTabs, nIdx, nVal], [_t, _i, oVal]) => {
|
|
95
122
|
// 如果值改变了,查找对应的索引
|
|
96
123
|
if (nVal !== oVal && nVal !== undefined) {
|
|
97
|
-
nIdx = nTabs.findIndex((i) =>
|
|
124
|
+
nIdx = nTabs.findIndex((i) =>
|
|
125
|
+
typeof i === 'string' ? nVal === i : nVal === i.value
|
|
126
|
+
);
|
|
98
127
|
}
|
|
99
128
|
if (nIdx < 0) nIdx = 0;
|
|
100
129
|
const tab = nTabs[nIdx];
|
|
@@ -179,7 +208,11 @@ const onChangeTab = (index: number) => {
|
|
|
179
208
|
|
|
180
209
|
// 定义外部变量
|
|
181
210
|
%external-vars {
|
|
182
|
-
@include UTILS__DEFINE_COMPONENT_VARS(
|
|
211
|
+
@include UTILS__DEFINE_COMPONENT_VARS('tab', $tab);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:host {
|
|
215
|
+
display: block;
|
|
183
216
|
}
|
|
184
217
|
|
|
185
218
|
.Tab {
|
|
@@ -12,32 +12,66 @@
|
|
|
12
12
|
</textarea>
|
|
13
13
|
<view v-if="!modelValue" :class="$style['Textarea--placeholder']">
|
|
14
14
|
<slot name="placeholder">
|
|
15
|
-
<icon-cpn
|
|
15
|
+
<icon-cpn
|
|
16
|
+
icon="textarea-edit"
|
|
17
|
+
:class="$style['Textarea--icon']"
|
|
18
|
+
/>
|
|
16
19
|
<text> {{ placeholder }} </text>
|
|
17
20
|
</slot>
|
|
18
21
|
</view>
|
|
19
|
-
<view :class="$style['Textarea--counter']">
|
|
22
|
+
<view :class="$style['Textarea--counter']">
|
|
23
|
+
已输入 {{ count }}/{{ maxlength }}
|
|
24
|
+
</view>
|
|
20
25
|
</template>
|
|
21
26
|
<!-- 只读文本展示 -->
|
|
22
27
|
<view v-else-if="modelValue" :class="$style['Textarea--readonly']">
|
|
23
|
-
<view :class="{ [$style['Textarea--fold']]: fold && isFolded }">
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
<view :class="{ [$style['Textarea--fold']]: fold && isFolded }">
|
|
29
|
+
{{ modelValue }}
|
|
30
|
+
</view>
|
|
31
|
+
<view
|
|
32
|
+
v-if="fold && hasFoldButton"
|
|
33
|
+
:class="$style['Textarea--fold-button']"
|
|
34
|
+
@click="isFolded = !isFolded"
|
|
35
|
+
>
|
|
36
|
+
<text v-if="isFolded">
|
|
37
|
+
<icon-cpn icon="arrow-down" /> 展开
|
|
38
|
+
</text>
|
|
26
39
|
<text v-else> <icon-cpn icon="arrow-up" /> 收起 </text>
|
|
27
40
|
</view>
|
|
28
41
|
<!-- 隐藏文字,用于计算是否显示收起展开按钮 -->
|
|
29
|
-
<view
|
|
42
|
+
<view
|
|
43
|
+
v-if="fold"
|
|
44
|
+
:class="[
|
|
45
|
+
$style['Textarea--hidden-text'],
|
|
46
|
+
$style['Textarea--fold'],
|
|
47
|
+
]"
|
|
48
|
+
>
|
|
49
|
+
{{ modelValue }}
|
|
50
|
+
</view>
|
|
51
|
+
<view v-if="fold" :class="$style['Textarea--hidden-text']">
|
|
30
52
|
{{ modelValue }}
|
|
31
53
|
</view>
|
|
32
|
-
<view v-if="fold" :class="$style['Textarea--hidden-text']"> {{ modelValue }} </view>
|
|
33
54
|
</view>
|
|
34
55
|
<!-- 空文本展示 -->
|
|
35
|
-
<view
|
|
56
|
+
<view
|
|
57
|
+
v-else
|
|
58
|
+
:class="[$style['Textarea--readonly'], $style['Textarea--empty']]"
|
|
59
|
+
>
|
|
60
|
+
未填写
|
|
61
|
+
</view>
|
|
36
62
|
</view>
|
|
37
63
|
</template>
|
|
38
64
|
|
|
39
65
|
<script lang="ts" setup>
|
|
40
|
-
import {
|
|
66
|
+
import {
|
|
67
|
+
computed,
|
|
68
|
+
getCurrentInstance,
|
|
69
|
+
inject,
|
|
70
|
+
nextTick,
|
|
71
|
+
ref,
|
|
72
|
+
useCssModule,
|
|
73
|
+
watch,
|
|
74
|
+
} from 'vue';
|
|
41
75
|
import useClassNames from '../../composable/component-name';
|
|
42
76
|
import IconCpn from '../icon/icon.vue';
|
|
43
77
|
|
|
@@ -105,7 +139,9 @@ const shouldShowFold = () => {
|
|
|
105
139
|
.selectAll('.' + $style['Textarea--hidden-text'])
|
|
106
140
|
.boundingClientRect((rects) => {
|
|
107
141
|
if (!Array.isArray(rects)) return;
|
|
108
|
-
hasFoldButton.value =
|
|
142
|
+
hasFoldButton.value =
|
|
143
|
+
rects.length === 2 &&
|
|
144
|
+
(rects[1]?.height || 0) > (rects[0]?.height || 0);
|
|
109
145
|
})
|
|
110
146
|
.exec();
|
|
111
147
|
};
|
|
@@ -134,7 +170,14 @@ const trimValue = (e: Event) => {
|
|
|
134
170
|
</script>
|
|
135
171
|
|
|
136
172
|
<style lang="scss" module>
|
|
137
|
-
@use '../../styles/
|
|
173
|
+
@use '../../styles/utils' as *;
|
|
174
|
+
|
|
175
|
+
:host {
|
|
176
|
+
display: block;
|
|
177
|
+
}
|
|
178
|
+
:host(.display-inline) {
|
|
179
|
+
display: inline;
|
|
180
|
+
}
|
|
138
181
|
|
|
139
182
|
.Textarea {
|
|
140
183
|
flex: 1;
|
|
@@ -174,9 +217,8 @@ const trimValue = (e: Event) => {
|
|
|
174
217
|
overflow: hidden;
|
|
175
218
|
text-overflow: ellipsis;
|
|
176
219
|
display: -webkit-box;
|
|
177
|
-
-webkit-line-clamp: 5;
|
|
178
220
|
line-clamp: 5;
|
|
179
|
-
|
|
221
|
+
box-orient: vertical;
|
|
180
222
|
}
|
|
181
223
|
.Textarea--fold-button {
|
|
182
224
|
text-align: right;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { kebabCase, pascalCase } from 'case-anything';
|
|
2
2
|
import { componentPrefix } from '../configs';
|
|
3
3
|
const useClassNames = (componentName) => {
|
|
4
|
-
const pascalCaseClass =
|
|
4
|
+
const pascalCaseClass =
|
|
5
|
+
pascalCase(componentPrefix) + pascalCase(componentName);
|
|
5
6
|
const kebabCaseClass = kebabCase(pascalCaseClass);
|
|
6
7
|
return [pascalCaseClass, kebabCaseClass];
|
|
7
8
|
};
|
|
@@ -2,7 +2,8 @@ import { kebabCase, pascalCase } from 'case-anything';
|
|
|
2
2
|
import { componentPrefix } from '../configs';
|
|
3
3
|
|
|
4
4
|
const useClassNames = (componentName: string): [string, string] => {
|
|
5
|
-
const pascalCaseClass =
|
|
5
|
+
const pascalCaseClass =
|
|
6
|
+
pascalCase(componentPrefix) + pascalCase(componentName);
|
|
6
7
|
const kebabCaseClass = kebabCase(pascalCaseClass);
|
|
7
8
|
return [pascalCaseClass, kebabCaseClass];
|
|
8
9
|
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
import type { default as MessageBox } from '../components/message-box/message-box.vue';
|
|
3
|
+
import type { default as Page } from '../components/page/page.vue';
|
|
4
|
+
import type { MessageBoxOptions } from '../components/message-box/message-box';
|
|
5
|
+
type MessageBoxShowCustomFunc = (
|
|
6
|
+
options: Omit<MessageBoxOptions, 'modelValue'>
|
|
7
|
+
) => Promise<void>;
|
|
8
|
+
type MessageBoxShowConfirmFunc = (
|
|
9
|
+
options: Pick<
|
|
10
|
+
MessageBoxOptions,
|
|
11
|
+
'modal' | 'title' | 'content' | 'confirm' | 'cancel'
|
|
12
|
+
>
|
|
13
|
+
) => Promise<void>;
|
|
14
|
+
type MessageBoxShowMessageBoxFunc = (
|
|
15
|
+
options: Pick<MessageBoxOptions, 'modal' | 'title' | 'content' | 'confirm'>
|
|
16
|
+
) => Promise<void>;
|
|
17
|
+
export declare const useMessageBox: (
|
|
18
|
+
ref: Ref<InstanceType<typeof MessageBox> | undefined>
|
|
19
|
+
) => {
|
|
20
|
+
show: MessageBoxShowCustomFunc;
|
|
21
|
+
showConfirm: MessageBoxShowConfirmFunc;
|
|
22
|
+
showMessageBox: MessageBoxShowMessageBoxFunc;
|
|
23
|
+
};
|
|
24
|
+
export declare function usePageMessageBox(isInPage: true): {
|
|
25
|
+
pageRef: Ref<InstanceType<typeof Page>>;
|
|
26
|
+
show: MessageBoxShowCustomFunc;
|
|
27
|
+
showConfirm: MessageBoxShowConfirmFunc;
|
|
28
|
+
showMessageBox: MessageBoxShowMessageBoxFunc;
|
|
29
|
+
};
|
|
30
|
+
export declare function usePageMessageBox(isInPage?: false): {
|
|
31
|
+
show: MessageBoxShowCustomFunc;
|
|
32
|
+
showConfirm: MessageBoxShowConfirmFunc;
|
|
33
|
+
showMessageBox: MessageBoxShowMessageBoxFunc;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { inject, ref } from 'vue';
|
|
2
|
+
export const useMessageBox = (ref) => {
|
|
3
|
+
const show = async (options) => {
|
|
4
|
+
await ref.value?.show(options);
|
|
5
|
+
};
|
|
6
|
+
const showConfirm = async (options) => {
|
|
7
|
+
await ref.value?.show({
|
|
8
|
+
...options,
|
|
9
|
+
modal: true,
|
|
10
|
+
title: '提示',
|
|
11
|
+
showClose: false,
|
|
12
|
+
cancel: '取消',
|
|
13
|
+
confirm: '确认',
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
const showMessageBox = async (options) => {
|
|
17
|
+
await ref.value?.show({
|
|
18
|
+
...options,
|
|
19
|
+
modal: false,
|
|
20
|
+
title: '提示',
|
|
21
|
+
showClose: false,
|
|
22
|
+
cancel: false,
|
|
23
|
+
confirm: '我知道了',
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
return {
|
|
27
|
+
show,
|
|
28
|
+
showConfirm,
|
|
29
|
+
showMessageBox,
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export function usePageMessageBox(isInPage = false) {
|
|
33
|
+
if (!isInPage) {
|
|
34
|
+
const pageMessageBoxRef = inject('ecolovo/page/messageBoxRef');
|
|
35
|
+
if (!pageMessageBoxRef) {
|
|
36
|
+
throw new Error('该组件必须在 Page 中使用');
|
|
37
|
+
}
|
|
38
|
+
return useMessageBox(pageMessageBoxRef);
|
|
39
|
+
}
|
|
40
|
+
const pageRef = ref();
|
|
41
|
+
const show = async (options) => {
|
|
42
|
+
await pageRef.value?.show(options);
|
|
43
|
+
};
|
|
44
|
+
const showConfirm = async (options) => {
|
|
45
|
+
await pageRef.value?.showConfirm(options);
|
|
46
|
+
};
|
|
47
|
+
const showMessageBox = async (options) => {
|
|
48
|
+
await pageRef.value?.showMessageBox(options);
|
|
49
|
+
};
|
|
50
|
+
return {
|
|
51
|
+
pageRef,
|
|
52
|
+
show,
|
|
53
|
+
showConfirm,
|
|
54
|
+
showMessageBox,
|
|
55
|
+
};
|
|
56
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { inject, ref } from 'vue';
|
|
2
|
+
import type { Ref } from 'vue';
|
|
3
|
+
import type { default as MessageBox } from '../components/message-box/message-box.vue';
|
|
4
|
+
import type { default as Page } from '../components/page/page.vue';
|
|
5
|
+
import type { MessageBoxOptions } from '../components/message-box/message-box';
|
|
6
|
+
|
|
7
|
+
type MessageBoxShowCustomFunc = (
|
|
8
|
+
options: Omit<MessageBoxOptions, 'modelValue'>
|
|
9
|
+
) => Promise<void>;
|
|
10
|
+
type MessageBoxShowConfirmFunc = (
|
|
11
|
+
options: Pick<
|
|
12
|
+
MessageBoxOptions,
|
|
13
|
+
'modal' | 'title' | 'content' | 'confirm' | 'cancel'
|
|
14
|
+
>
|
|
15
|
+
) => Promise<void>;
|
|
16
|
+
type MessageBoxShowMessageBoxFunc = (
|
|
17
|
+
options: Pick<MessageBoxOptions, 'modal' | 'title' | 'content' | 'confirm'>
|
|
18
|
+
) => Promise<void>;
|
|
19
|
+
|
|
20
|
+
export const useMessageBox = (
|
|
21
|
+
ref: Ref<InstanceType<typeof MessageBox> | undefined>
|
|
22
|
+
) => {
|
|
23
|
+
const show: MessageBoxShowCustomFunc = async (options) => {
|
|
24
|
+
await ref.value?.show(options);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const showConfirm: MessageBoxShowConfirmFunc = async (options) => {
|
|
28
|
+
await ref.value?.show({
|
|
29
|
+
...options,
|
|
30
|
+
modal: true,
|
|
31
|
+
title: '提示',
|
|
32
|
+
showClose: false,
|
|
33
|
+
cancel: '取消',
|
|
34
|
+
confirm: '确认',
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const showMessageBox: MessageBoxShowMessageBoxFunc = async (options) => {
|
|
39
|
+
await ref.value?.show({
|
|
40
|
+
...options,
|
|
41
|
+
modal: false,
|
|
42
|
+
title: '提示',
|
|
43
|
+
showClose: false,
|
|
44
|
+
cancel: false,
|
|
45
|
+
confirm: '我知道了',
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
return {
|
|
50
|
+
show,
|
|
51
|
+
showConfirm,
|
|
52
|
+
showMessageBox,
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export function usePageMessageBox(isInPage: true): {
|
|
57
|
+
pageRef: Ref<InstanceType<typeof Page>>;
|
|
58
|
+
show: MessageBoxShowCustomFunc;
|
|
59
|
+
showConfirm: MessageBoxShowConfirmFunc;
|
|
60
|
+
showMessageBox: MessageBoxShowMessageBoxFunc;
|
|
61
|
+
};
|
|
62
|
+
export function usePageMessageBox(isInPage?: false): {
|
|
63
|
+
show: MessageBoxShowCustomFunc;
|
|
64
|
+
showConfirm: MessageBoxShowConfirmFunc;
|
|
65
|
+
showMessageBox: MessageBoxShowMessageBoxFunc;
|
|
66
|
+
};
|
|
67
|
+
export function usePageMessageBox(isInPage: boolean = false) {
|
|
68
|
+
if (!isInPage) {
|
|
69
|
+
const pageMessageBoxRef = inject<Ref<InstanceType<typeof MessageBox>>>(
|
|
70
|
+
'ecolovo/page/messageBoxRef'
|
|
71
|
+
);
|
|
72
|
+
if (!pageMessageBoxRef) {
|
|
73
|
+
throw new Error('该组件必须在 Page 中使用');
|
|
74
|
+
}
|
|
75
|
+
return useMessageBox(pageMessageBoxRef);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const pageRef = ref<InstanceType<typeof Page>>();
|
|
79
|
+
|
|
80
|
+
const show: MessageBoxShowCustomFunc = async (options) => {
|
|
81
|
+
await pageRef.value?.show(options);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const showConfirm: MessageBoxShowConfirmFunc = async (options) => {
|
|
85
|
+
await pageRef.value?.showConfirm(options);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
const showMessageBox: MessageBoxShowMessageBoxFunc = async (options) => {
|
|
89
|
+
await pageRef.value?.showMessageBox(options);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
pageRef,
|
|
94
|
+
show,
|
|
95
|
+
showConfirm,
|
|
96
|
+
showMessageBox,
|
|
97
|
+
};
|
|
98
|
+
}
|
package/configs/index.d.ts
CHANGED
|
@@ -34,4 +34,11 @@ export interface IconFontJson {
|
|
|
34
34
|
* @param iconJson iconfont.json 文件内容
|
|
35
35
|
*/
|
|
36
36
|
declare function addIcons(iconJson: IconFontJson): void;
|
|
37
|
-
export {
|
|
37
|
+
export {
|
|
38
|
+
componentPrefix,
|
|
39
|
+
homePath,
|
|
40
|
+
setComponentPrefix,
|
|
41
|
+
setHomePath,
|
|
42
|
+
iconMap,
|
|
43
|
+
addIcons,
|
|
44
|
+
};
|
package/configs/index.js
CHANGED
|
@@ -8,7 +8,9 @@ let homePath = '/pages/index/index';
|
|
|
8
8
|
* @param prefix 组件前缀
|
|
9
9
|
*/
|
|
10
10
|
function setComponentPrefix(prefix = 'app') {
|
|
11
|
-
if (!prefix)
|
|
11
|
+
if (!prefix) {
|
|
12
|
+
throw new Error('组件前缀不能为空');
|
|
13
|
+
}
|
|
12
14
|
componentPrefix = prefix;
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
@@ -16,7 +18,9 @@ function setComponentPrefix(prefix = 'app') {
|
|
|
16
18
|
* @param path 首页路径
|
|
17
19
|
*/
|
|
18
20
|
function setHomePath(path = '/pages/index/index') {
|
|
19
|
-
if (!path)
|
|
21
|
+
if (!path) {
|
|
22
|
+
throw new Error('app 首页不能为空');
|
|
23
|
+
}
|
|
20
24
|
homePath = path;
|
|
21
25
|
}
|
|
22
26
|
/** iconfont 图标 map */
|
|
@@ -56,4 +60,11 @@ function addIcons(iconJson) {
|
|
|
56
60
|
}
|
|
57
61
|
// 添加内部图标库
|
|
58
62
|
addIcons(defaultIconfonts);
|
|
59
|
-
export {
|
|
63
|
+
export {
|
|
64
|
+
componentPrefix,
|
|
65
|
+
homePath,
|
|
66
|
+
setComponentPrefix,
|
|
67
|
+
setHomePath,
|
|
68
|
+
iconMap,
|
|
69
|
+
addIcons,
|
|
70
|
+
};
|
package/configs/index.ts
CHANGED
|
@@ -79,4 +79,11 @@ function addIcons(iconJson: IconFontJson) {
|
|
|
79
79
|
// 添加内部图标库
|
|
80
80
|
addIcons(defaultIconfonts);
|
|
81
81
|
|
|
82
|
-
export {
|
|
82
|
+
export {
|
|
83
|
+
componentPrefix,
|
|
84
|
+
homePath,
|
|
85
|
+
setComponentPrefix,
|
|
86
|
+
setHomePath,
|
|
87
|
+
iconMap,
|
|
88
|
+
addIcons,
|
|
89
|
+
};
|
package/easyCom.js
CHANGED
|
@@ -9,19 +9,24 @@ function componentEasyCom(componentPrefix = 'app') {
|
|
|
9
9
|
'@ecolovo/uniapp-components/components/dialog/dialog-content.vue',
|
|
10
10
|
[`^${componentPrefix}-loading-animation(.*)`]:
|
|
11
11
|
'@ecolovo/uniapp-components/components/loading/animations/loading-animation$1.vue',
|
|
12
|
-
[`^${componentPrefix}-page-(.*)`]:
|
|
12
|
+
[`^${componentPrefix}-page-(.*)`]:
|
|
13
|
+
'@ecolovo/uniapp-components/components/page/page-$1.vue',
|
|
13
14
|
[`^${componentPrefix}-password-input`]:
|
|
14
15
|
'@ecolovo/uniapp-components/components/input/password-input.vue',
|
|
15
|
-
[`^${componentPrefix}-picker-popup`]:
|
|
16
|
+
[`^${componentPrefix}-picker-popup`]:
|
|
17
|
+
'@ecolovo/uniapp-components/components/picker/picker-popup.vue',
|
|
16
18
|
[`^${componentPrefix}-popover-content`]:
|
|
17
19
|
'@ecolovo/uniapp-components/components/popover/popover-content.vue',
|
|
18
|
-
[`^${componentPrefix}-popover-mask`]:
|
|
19
|
-
|
|
20
|
+
[`^${componentPrefix}-popover-mask`]:
|
|
21
|
+
'@ecolovo/uniapp-components/components/popover/popover-mask.vue',
|
|
22
|
+
[`^${componentPrefix}-popup-content`]:
|
|
23
|
+
'@ecolovo/uniapp-components/components/popup/popup-content.vue',
|
|
20
24
|
[`^${componentPrefix}-media-uploader`]:
|
|
21
25
|
'@ecolovo/uniapp-components/components/uploader/media-uploader.vue',
|
|
22
26
|
[`^${componentPrefix}-file-uploader`]:
|
|
23
27
|
'@ecolovo/uniapp-components/components/uploader/file-uploader.vue',
|
|
24
|
-
[`^${componentPrefix}-(.*)`]:
|
|
28
|
+
[`^${componentPrefix}-(.*)`]:
|
|
29
|
+
'@ecolovo/uniapp-components/components/$1/$1.vue',
|
|
25
30
|
},
|
|
26
31
|
},
|
|
27
32
|
};
|
package/easyCom.ts
CHANGED
|
@@ -9,19 +9,24 @@ function componentEasyCom(componentPrefix = 'app') {
|
|
|
9
9
|
'@ecolovo/uniapp-components/components/dialog/dialog-content.vue',
|
|
10
10
|
[`^${componentPrefix}-loading-animation(.*)`]:
|
|
11
11
|
'@ecolovo/uniapp-components/components/loading/animations/loading-animation$1.vue',
|
|
12
|
-
[`^${componentPrefix}-page-(.*)`]:
|
|
12
|
+
[`^${componentPrefix}-page-(.*)`]:
|
|
13
|
+
'@ecolovo/uniapp-components/components/page/page-$1.vue',
|
|
13
14
|
[`^${componentPrefix}-password-input`]:
|
|
14
15
|
'@ecolovo/uniapp-components/components/input/password-input.vue',
|
|
15
|
-
[`^${componentPrefix}-picker-popup`]:
|
|
16
|
+
[`^${componentPrefix}-picker-popup`]:
|
|
17
|
+
'@ecolovo/uniapp-components/components/picker/picker-popup.vue',
|
|
16
18
|
[`^${componentPrefix}-popover-content`]:
|
|
17
19
|
'@ecolovo/uniapp-components/components/popover/popover-content.vue',
|
|
18
|
-
[`^${componentPrefix}-popover-mask`]:
|
|
19
|
-
|
|
20
|
+
[`^${componentPrefix}-popover-mask`]:
|
|
21
|
+
'@ecolovo/uniapp-components/components/popover/popover-mask.vue',
|
|
22
|
+
[`^${componentPrefix}-popup-content`]:
|
|
23
|
+
'@ecolovo/uniapp-components/components/popup/popup-content.vue',
|
|
20
24
|
[`^${componentPrefix}-media-uploader`]:
|
|
21
25
|
'@ecolovo/uniapp-components/components/uploader/media-uploader.vue',
|
|
22
26
|
[`^${componentPrefix}-file-uploader`]:
|
|
23
27
|
'@ecolovo/uniapp-components/components/uploader/file-uploader.vue',
|
|
24
|
-
[`^${componentPrefix}-(.*)`]:
|
|
28
|
+
[`^${componentPrefix}-(.*)`]:
|
|
29
|
+
'@ecolovo/uniapp-components/components/$1/$1.vue',
|
|
25
30
|
},
|
|
26
31
|
},
|
|
27
32
|
};
|
package/globals.d.ts
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
export {};
|
|
3
|
+
|
|
4
|
+
declare global {
|
|
5
|
+
// 覆盖 input 元素的 onInput 事件信息
|
|
6
|
+
interface Event {
|
|
7
|
+
detail: { value: string };
|
|
8
|
+
}
|
|
9
|
+
// 覆盖 input 元素的 obBlur 事件信息
|
|
10
|
+
interface FocusEvent {
|
|
11
|
+
detail: { value: string };
|
|
12
|
+
}
|
|
13
|
+
interface ScrollEvent {
|
|
14
|
+
detail: {
|
|
15
|
+
scrollLeft: number;
|
|
16
|
+
scrollTop: number;
|
|
17
|
+
scrollHeight: number;
|
|
18
|
+
scrollWidth: number;
|
|
19
|
+
deltaX: number;
|
|
20
|
+
deltaY: number;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
declare namespace UniApp {
|
|
24
|
+
type PromiseResolver<T> = Parameters<Promise<T>['then']>[0];
|
|
25
|
+
type PromiseRejector<T> = Parameters<Promise<T>['then']>[1];
|
|
26
|
+
type PromiseResolvers<T> = {
|
|
27
|
+
resolve: PromiseResolver<T>;
|
|
28
|
+
reject: PromiseRejector<T>;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
type EventWithDetail<T extends Record<string, any>> = {
|
|
32
|
+
detail: T;
|
|
33
|
+
};
|
|
34
|
+
type GetPhoneNumberEvent = EventWithDetail<{ code: string }>;
|
|
35
|
+
}
|
|
36
|
+
}
|
package/index.d.ts
CHANGED