@eturnity/eturnity_reusable_components 8.22.14 → 8.22.16

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/dist/main.es20.js CHANGED
@@ -1,229 +1,4 @@
1
- import styled from "./main.es7.js";
2
- import "./main.es3.js";
3
- import _export_sfc from "./main.es11.js";
4
- import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode } from "./main.es6.js";
5
- import { toDisplayString } from "./main.es16.js";
6
- const Container = styled.div`
7
- position: relative;
8
- display: flex;
9
- height: 47px;
10
- width: ${(props) => props.width};
11
- `;
12
- const TopValueContainer = styled("div", {
13
- position: String
14
- })`
15
- font-size: 11px;
16
- left: ${(props) => props.position};
17
- position: absolute;
18
- display: flex;
19
- justify-content: center
20
- width: 0px;
21
- color:${(props) => props.theme.colors.black};
22
- item-align: center;
23
-
24
- `;
25
- const BottomValueContainer = styled("div", {
26
- position: String
27
- })`
28
- font-size: 12px;
29
- left: ${(props) => props.position};
30
- width: 0px;
31
- bottom: -2px;
32
- position: absolute;
33
- display: flex;
34
- justify-content: center;
35
- item-align: center;
36
- border-radius: 4px;
37
- color: white;
38
- `;
39
- const TextWrapper = styled("div", {
40
- backgroundColor: String
41
- })`
42
- padding: 2px 6px;
43
- background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
44
- border-radius: 4px;
45
- `;
46
- const Arrow = styled("div", {
47
- backgroundColor: String
48
- })`
49
- position: absolute;
50
- bottom: -10px;
51
- left: calc(50% - 6px);
52
- width: 0;
53
- height: 0;
54
- border: 6px solid transparent;
55
- border-top-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
56
- filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
57
- `;
58
- const MainLine = styled.div`
59
- display: block;
60
- position: absolute;
61
- bottom: 16px;
62
- height: 4px;
63
- width: 100%;
64
- border-radius: 4px;
65
- background-color: ${(props) => props.theme.colors.grey4};
66
- `;
67
- const MainLineHighlight = styled("div", {
68
- minPercent: Number,
69
- maxPercent: Number
70
- })`
71
- display: block;
72
- position: absolute;
73
- left: ${(props) => props.minPercent + "%"};
74
- right: ${(props) => 100 - props.maxPercent + "%"};
75
- bottom: 16px;
76
- height: 4px;
77
- background-color: white;
78
- `;
79
- const VerticalMarker = styled("div")`
80
- position: absolute;
81
- width: 1px;
82
- height: 8px;
83
- background-color: white;
84
- display: inline-block;
85
- top: -6px;
86
- left: 0px;
87
- `;
88
- const VerticalMarkerArrow = styled("div", {
89
- color: String
90
- })`
91
- position: absolute;
92
- width: 1px;
93
- height: 4px;
94
- background-color: ${(props) => props.color};
95
- display: inline-block;
96
- bottom: -14px;
97
- left: 0px;
98
- `;
99
- const _sfc_main = {
100
- name: "ProgressBar",
101
- components: {
102
- Container,
103
- MainLineHighlight,
104
- Arrow,
105
- TopValueContainer,
106
- BottomValueContainer,
107
- MainLine,
108
- VerticalMarker,
109
- VerticalMarkerArrow,
110
- TextWrapper
111
- },
112
- props: {
113
- minValue: {
114
- required: true,
115
- type: Number
116
- },
117
- maxValue: {
118
- required: true,
119
- type: Number
120
- },
121
- value: {
122
- required: true,
123
- type: Number
124
- },
125
- arrowColor: {
126
- required: false,
127
- type: String,
128
- default: "white"
129
- },
130
- width: {
131
- required: false,
132
- type: String,
133
- default: null
134
- }
135
- },
136
- data() {
137
- return {};
138
- },
139
- computed: {
140
- minPercent() {
141
- if (this.maxValue === this.minValue) {
142
- return 50;
143
- } else {
144
- return 30;
145
- }
146
- },
147
- maxPercent() {
148
- if (this.maxValue === this.minValue) {
149
- return 50;
150
- } else {
151
- return 70;
152
- }
153
- },
154
- valuePercent() {
155
- let percent;
156
- if (this.maxValue === this.minValue) {
157
- percent = this.minPercent + 10 * (this.value - this.minValue);
158
- } else {
159
- percent = this.minPercent + (this.maxPercent - this.minPercent) / (this.maxValue - this.minValue) * (this.value - this.minValue);
160
- }
161
- return Math.max(0, Math.min(100, percent));
162
- },
163
- colorVerticalMarkerArrow() {
164
- if (this.value < this.maxValue && this.value > this.minValue) {
165
- return "black";
166
- } else {
167
- return "white";
168
- }
169
- }
170
- }
171
- };
172
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
173
- const _component_MainLine = resolveComponent("MainLine");
174
- const _component_MainLineHighlight = resolveComponent("MainLineHighlight");
175
- const _component_TextWrapper = resolveComponent("TextWrapper");
176
- const _component_Arrow = resolveComponent("Arrow");
177
- const _component_VerticalMarkerArrow = resolveComponent("VerticalMarkerArrow");
178
- const _component_TopValueContainer = resolveComponent("TopValueContainer");
179
- const _component_VerticalMarker = resolveComponent("VerticalMarker");
180
- const _component_BottomValueContainer = resolveComponent("BottomValueContainer");
181
- const _component_Container = resolveComponent("Container");
182
- return openBlock(), createBlock(_component_Container, {
183
- width: $props.width
184
- }, {
185
- default: withCtx(() => [createVNode(_component_MainLine), createTextVNode(), createVNode(_component_MainLineHighlight, {
186
- "max-percent": $options.maxPercent,
187
- "min-percent": $options.minPercent
188
- }, null, 8, ["max-percent", "min-percent"]), createTextVNode(), createVNode(_component_TopValueContainer, {
189
- position: $options.valuePercent + "%"
190
- }, {
191
- default: withCtx(() => [createVNode(_component_TextWrapper, {
192
- "background-color": $props.arrowColor
193
- }, {
194
- default: withCtx(() => [createTextVNode(toDisplayString($props.value), 1)]),
195
- _: 1
196
- }, 8, ["background-color"]), createTextVNode(), createVNode(_component_Arrow, {
197
- "background-color": $props.arrowColor
198
- }, null, 8, ["background-color"]), createTextVNode(), createVNode(_component_VerticalMarkerArrow, {
199
- color: $options.colorVerticalMarkerArrow
200
- }, null, 8, ["color"])]),
201
- _: 1
202
- }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
203
- position: $options.minPercent + "%"
204
- }, {
205
- default: withCtx(() => [createVNode(_component_TextWrapper, null, {
206
- default: withCtx(() => [createTextVNode(toDisplayString($props.minValue), 1)]),
207
- _: 1
208
- }), createTextVNode(), createVNode(_component_VerticalMarker, {
209
- side: "bottom"
210
- })]),
211
- _: 1
212
- }, 8, ["position"]), createTextVNode(), createVNode(_component_BottomValueContainer, {
213
- position: $options.maxPercent + "%"
214
- }, {
215
- default: withCtx(() => [createVNode(_component_TextWrapper, null, {
216
- default: withCtx(() => [createTextVNode(toDisplayString($props.maxValue), 1)]),
217
- _: 1
218
- }), createTextVNode(), createVNode(_component_VerticalMarker, {
219
- side: "bottom"
220
- })]),
221
- _: 1
222
- }, 8, ["position"])]),
223
- _: 1
224
- }, 8, ["width"]);
225
- }
226
- const PanelRangeInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
1
+ const Test_vue_vue_type_style_index_0_lang = "";
227
2
  export {
228
- PanelRangeInfo as default
3
+ Test_vue_vue_type_style_index_0_lang as default
229
4
  };