anytrek-front-public-component 1.0.2 → 1.1.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/auto-imports.d.ts +10 -0
- package/components.d.ts +13 -0
- package/index.html +1 -1
- package/package.json +7 -5
- package/src/App.vue +30 -7
- package/src/assets/Inter/Inter-Black.ttf +0 -0
- package/src/assets/Inter/Inter-Bold.ttf +0 -0
- package/src/assets/Inter/Inter-Light.ttf +0 -0
- package/src/assets/Inter/Inter-Medium.ttf +0 -0
- package/src/assets/Inter/Inter-Regular.ttf +0 -0
- package/src/assets/css/main.scss +136 -0
- package/src/component/anytrekTimerangePick/anytrekTimerangePickBody.vue +712 -0
- package/src/component/anytrekTimerangePick/anytrekTimerangePickTime.vue +377 -0
- package/src/component/anytrekTimerangePick/timeSelect.vue +231 -0
- package/src/icons/svg/arrow-icon.svg +3 -0
- package/src/icons/svg/cancel-icon.svg +3 -0
- package/src/icons/svg/check-icon.svg +3 -0
- package/src/icons/svg/confirm-icon.svg +3 -0
- package/src/icons/svg/date-icon.svg +3 -0
- package/src/icons/svg-icon.vue +41 -0
- package/src/main.ts +3 -1
- package/src/plugin/component/anytrekTimePick.vue +3 -0
- package/src/plugin/component/anytrekTimerangePick.vue +514 -0
- package/src/plugin/index.ts +4 -3
- package/src/utils/common.ts +57 -0
- package/tsconfig.app.json +1 -1
- package/tsconfig.json +1 -1
- package/vite.config.ts +23 -1
- package/vue.d.ts +10 -0
- package/src/assets/vue.svg +0 -1
- package/src/plugin/component/anytrekTimepick.vue +0 -17
package/components.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
// Generated by unplugin-vue-components
|
|
4
|
+
// Read more: https://github.com/vuejs/core/pull/3399
|
|
5
|
+
export {}
|
|
6
|
+
|
|
7
|
+
/* prettier-ignore */
|
|
8
|
+
declare module 'vue' {
|
|
9
|
+
export interface GlobalComponents {
|
|
10
|
+
ElPopover: typeof import('element-plus/es')['ElPopover']
|
|
11
|
+
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
|
12
|
+
}
|
|
13
|
+
}
|
package/index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" href="
|
|
5
|
+
<link rel="icon" href="./favicon.ico">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>AnyFleet | Anytrek Management System</title>
|
|
8
8
|
</head>
|
package/package.json
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "anytrek-front-public-component",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "some common component",
|
|
5
5
|
"main": "src/plugin/index.ts",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"dev": "vite"
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"preview": "vite preview"
|
|
7
|
+
"dev": "vite"
|
|
10
8
|
},
|
|
11
9
|
"author": "xbin_liao@anytrek.cn",
|
|
12
10
|
"keywords": [
|
|
@@ -16,13 +14,17 @@
|
|
|
16
14
|
],
|
|
17
15
|
"license": "ISC",
|
|
18
16
|
"dependencies": {
|
|
17
|
+
"dayjs": "^1.11.13",
|
|
18
|
+
"element-plus": "^2.8.6",
|
|
19
19
|
"vue": "^3.5.12"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@vitejs/plugin-vue": "^5.1.4",
|
|
23
23
|
"sass": "^1.80.4",
|
|
24
24
|
"typescript": "~5.6.2",
|
|
25
|
+
"unplugin-auto-import": "^0.18.3",
|
|
26
|
+
"unplugin-vue-components": "^0.27.4",
|
|
25
27
|
"vite": "^5.4.9",
|
|
26
|
-
"
|
|
28
|
+
"vite-plugin-svg-icons": "^2.0.1"
|
|
27
29
|
}
|
|
28
30
|
}
|
package/src/App.vue
CHANGED
|
@@ -1,14 +1,37 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import anytrekTimepick from './plugin/component/anytrekTimepick.vue';
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
1
|
<template>
|
|
6
|
-
<
|
|
2
|
+
<h1>组件一：anytrekTimerangePick</h1>
|
|
3
|
+
<anytrekTimerangePick
|
|
4
|
+
v-model:visible="anytrekTimerangePickVisible"
|
|
5
|
+
v-model:value="anytrekTimerangePickValue"
|
|
6
|
+
v-model:valueType="anytrekTimerangePickValueType"
|
|
7
|
+
v-model:startTime="anytrekTimerangePickStartTime"
|
|
8
|
+
v-model:endTime="anytrekTimerangePickEndTime"
|
|
9
|
+
v-model:timeZone="timeZone"
|
|
10
|
+
:showQuick="false"
|
|
11
|
+
:immediate="true"
|
|
12
|
+
/>
|
|
13
|
+
<h1>组件二：anytrekTimePick</h1>
|
|
14
|
+
<anytrekTimePick />
|
|
7
15
|
</template>
|
|
8
|
-
|
|
9
|
-
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { ref } from 'vue';
|
|
18
|
+
import anytrekTimerangePick from './plugin/component/anytrekTimerangePick.vue';
|
|
19
|
+
import anytrekTimePick from './plugin/component/anytrekTimepick.vue';
|
|
20
|
+
const anytrekTimerangePickVisible = ref<boolean>(false);
|
|
21
|
+
const anytrekTimerangePickValue = ref<string | number>('custom');
|
|
22
|
+
const anytrekTimerangePickValueType = ref<string>('week');
|
|
23
|
+
const anytrekTimerangePickStartTime = ref<string>('');
|
|
24
|
+
const anytrekTimerangePickEndTime = ref<string>('');
|
|
25
|
+
const timeZone = ref<string>('');
|
|
26
|
+
</script>
|
|
27
|
+
<style lang="scss">
|
|
10
28
|
body {
|
|
11
29
|
margin: 0;
|
|
12
30
|
padding: 0;
|
|
31
|
+
padding-left: 16px;
|
|
32
|
+
}
|
|
33
|
+
h1 {
|
|
34
|
+
margin-top: 0;
|
|
35
|
+
margin-bottom: 20px;
|
|
13
36
|
}
|
|
14
37
|
</style>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
html, body {
|
|
2
|
+
height: 100%;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
font-size: 14px;
|
|
6
|
+
font-family: Inter;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: "Inter";
|
|
11
|
+
font-weight: 900;
|
|
12
|
+
src: url("../Inter/Inter-Black.ttf") format("truetype");
|
|
13
|
+
}
|
|
14
|
+
@font-face {
|
|
15
|
+
font-family: "Inter";
|
|
16
|
+
font-weight: 800;
|
|
17
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
18
|
+
}
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: "Inter";
|
|
21
|
+
font-weight: 700;
|
|
22
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
23
|
+
}
|
|
24
|
+
@font-face {
|
|
25
|
+
font-family: "Inter";
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
src: url("../Inter/Inter-Bold.ttf") format("truetype");
|
|
28
|
+
}
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: "Inter";
|
|
31
|
+
font-weight: 500;
|
|
32
|
+
src: url("../Inter/Inter-Medium.ttf") format("truetype");
|
|
33
|
+
}
|
|
34
|
+
@font-face {
|
|
35
|
+
font-family: "Inter";
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
src: url("../Inter/Inter-Regular.ttf") format("truetype");
|
|
38
|
+
}
|
|
39
|
+
@font-face {
|
|
40
|
+
font-family: "Inter";
|
|
41
|
+
font-weight: 300;
|
|
42
|
+
src: url("../Inter/Inter-Light.ttf") format("truetype");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
* {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
p {
|
|
50
|
+
margin: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
input:-internal-autofill-selected {
|
|
54
|
+
transition: background-color 5000s ease-in-out 0s;
|
|
55
|
+
background-color: transparent !important;
|
|
56
|
+
}
|
|
57
|
+
:focus-visible {
|
|
58
|
+
outline: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* 滚动条样式 */
|
|
62
|
+
::-webkit-scrollbar {
|
|
63
|
+
width: 6px;
|
|
64
|
+
height: 6px;
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
}
|
|
67
|
+
::-webkit-scrollbar-track {
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
}
|
|
71
|
+
::-webkit-scrollbar-thumb {
|
|
72
|
+
border-radius: 4px;
|
|
73
|
+
background-color: rgba(144, 147, 153, 0.3);
|
|
74
|
+
}
|
|
75
|
+
::-webkit-scrollbar-thumb:hover {
|
|
76
|
+
background-color: rgba(144, 147, 153, 0.5);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.el-popper.anytrek-timerange-popper {
|
|
80
|
+
--el-popover-border-color: rgba(223, 223, 223, 1);
|
|
81
|
+
--el-box-shadow-light: 0px 4px 15.1px 0px rgba(0, 0, 0, 0.15);
|
|
82
|
+
--el-popover-border-radius: 10px;
|
|
83
|
+
--el-popover-padding: 24px;
|
|
84
|
+
--el-popover-font-size: 16px;
|
|
85
|
+
line-height: 18px;
|
|
86
|
+
--el-text-color-regular: #000;
|
|
87
|
+
|
|
88
|
+
}
|
|
89
|
+
.el-popper.choose-item-popper {
|
|
90
|
+
--el-popover-padding: 10px;
|
|
91
|
+
min-width: unset;
|
|
92
|
+
}
|
|
93
|
+
.el-popper.choose-timeselect-popper {
|
|
94
|
+
padding-top: 0;
|
|
95
|
+
padding-bottom: 0;
|
|
96
|
+
}
|
|
97
|
+
.popper-choose-list {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
}
|
|
101
|
+
.popper-choose-list-one {
|
|
102
|
+
height: 40px;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
width: 100%;
|
|
106
|
+
padding-left: 12px;
|
|
107
|
+
gap: 8px;
|
|
108
|
+
font-size: 14px;
|
|
109
|
+
font-weight: 400;
|
|
110
|
+
line-height: 16px;
|
|
111
|
+
color: #000;
|
|
112
|
+
border-radius: 6px;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
&:hover {
|
|
115
|
+
background-color: rgba(0, 0, 0, 0.04);
|
|
116
|
+
}
|
|
117
|
+
& > span {
|
|
118
|
+
max-width: 45px;
|
|
119
|
+
}
|
|
120
|
+
& > .check-icon {
|
|
121
|
+
opacity: 0;
|
|
122
|
+
user-select: none;
|
|
123
|
+
pointer-events: none;
|
|
124
|
+
}
|
|
125
|
+
&.active {
|
|
126
|
+
& > .check-icon {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.over-ellipsis {
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
}
|