forstok-ui-lib 8.6.2 → 8.7.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/dist/index.d.ts +9 -3
- package/dist/index.js +482 -412
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +473 -403
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/javascripts/function.ts +139 -0
- package/src/components/icon/styles.ts +2 -0
- package/src/components/icon/typed.ts +1 -0
- package/src/components/upload/drag.drop.tsx +279 -44
- package/src/components/upload/styles.tsx +131 -45
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import styled, { css } from
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
2
|
|
|
3
|
-
import IconArrowRedUpload from
|
|
3
|
+
import IconArrowRedUpload from "../../assets/images/icons/arrow-red-upload.svg";
|
|
4
4
|
|
|
5
5
|
const IconStyles = css`
|
|
6
6
|
display: inline-block;
|
|
7
7
|
pointer-events: none;
|
|
8
|
-
|
|
8
|
+
`;
|
|
9
9
|
|
|
10
|
-
const getUploadContainerModifiedStyled = ({
|
|
11
|
-
|
|
10
|
+
const getUploadContainerModifiedStyled = ({
|
|
11
|
+
$width,
|
|
12
|
+
}: {
|
|
13
|
+
$width?: string | number;
|
|
14
|
+
}) => {
|
|
15
|
+
let style = "";
|
|
12
16
|
if ($width) {
|
|
13
17
|
style += `
|
|
14
18
|
&, & ${UploadLabel} {
|
|
@@ -19,15 +23,15 @@ const getUploadContainerModifiedStyled = ({ $width }: { $width?: string | number
|
|
|
19
23
|
width: calc(width - 15);
|
|
20
24
|
display: block;
|
|
21
25
|
}
|
|
22
|
-
|
|
26
|
+
`;
|
|
23
27
|
}
|
|
24
|
-
return style
|
|
25
|
-
}
|
|
28
|
+
return style;
|
|
29
|
+
};
|
|
26
30
|
|
|
27
31
|
export const UploadContainer = styled.div<{ $width?: string | number }>`
|
|
28
32
|
cursor: pointer;
|
|
29
33
|
${getUploadContainerModifiedStyled}
|
|
30
|
-
|
|
34
|
+
`;
|
|
31
35
|
export const UploadLabel = styled.label`
|
|
32
36
|
padding: 5px 10px 5px 25px;
|
|
33
37
|
color: var(--sta-clr);
|
|
@@ -38,52 +42,58 @@ export const UploadLabel = styled.label`
|
|
|
38
42
|
position: relative;
|
|
39
43
|
font-weight: 600;
|
|
40
44
|
border-radius: var(--ter-rd);
|
|
41
|
-
|
|
45
|
+
`;
|
|
42
46
|
export const UploadSpan = styled.span`
|
|
43
47
|
overflow: hidden;
|
|
44
48
|
text-overflow: ellipsis;
|
|
45
49
|
white-space: nowrap;
|
|
46
|
-
|
|
50
|
+
`;
|
|
47
51
|
export const UploadIcon = styled.i`
|
|
48
52
|
position: absolute;
|
|
49
53
|
left: 10px;
|
|
50
|
-
&:before {
|
|
54
|
+
&:before {
|
|
51
55
|
${IconStyles}
|
|
52
56
|
content: url(${IconArrowRedUpload});
|
|
53
57
|
width: 12px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export const UploadInput = styled.input.attrs(
|
|
57
|
-
type: type
|
|
58
|
-
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
export const UploadInput = styled.input.attrs(
|
|
61
|
+
({ type }: { type?: string }) => ({
|
|
62
|
+
type: type || "file",
|
|
63
|
+
}),
|
|
64
|
+
)`
|
|
59
65
|
opacity: 0;
|
|
60
66
|
position: absolute;
|
|
61
67
|
left: 0;
|
|
62
|
-
|
|
63
|
-
export const UploadDragDropContainer = styled.div`
|
|
68
|
+
`;
|
|
69
|
+
export const UploadDragDropContainer = styled.div`
|
|
64
70
|
display: grid;
|
|
65
71
|
position: relative;
|
|
66
72
|
align-items: center;
|
|
67
73
|
text-align: center;
|
|
68
|
-
|
|
74
|
+
height: 150px;
|
|
69
75
|
border: 1.25px dashed rgba(163, 163, 163, 0.5);
|
|
70
76
|
border-radius: 4px;
|
|
71
|
-
background-color: #
|
|
77
|
+
background-color: #efefef;
|
|
78
|
+
overflow: hidden;
|
|
72
79
|
&.drag-active {
|
|
73
|
-
background-color: #
|
|
80
|
+
background-color: #efefef50;
|
|
81
|
+
}
|
|
82
|
+
&:hover {
|
|
83
|
+
border-color: var(--pri-clr-ln__fc);
|
|
74
84
|
}
|
|
75
85
|
${UploadInput} {
|
|
76
86
|
z-index: -10;
|
|
77
87
|
}
|
|
78
|
-
|
|
88
|
+
`;
|
|
79
89
|
export const UploadDragDropLabel = styled.label`
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
cursor: pointer;
|
|
90
|
+
display: inline-block;
|
|
91
|
+
width: 100%;
|
|
92
|
+
height: 100%;
|
|
84
93
|
position: relative;
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
`;
|
|
96
|
+
export const UploadDragDropFileHelper = styled.div`
|
|
87
97
|
position: absolute;
|
|
88
98
|
width: 100%;
|
|
89
99
|
height: 100%;
|
|
@@ -91,21 +101,97 @@ export const UploadDragDropFileHelper = styled.div`
|
|
|
91
101
|
right: 0px;
|
|
92
102
|
bottom: 0px;
|
|
93
103
|
left: 0px;
|
|
94
|
-
|
|
95
|
-
export const UploadDragDropFileContainer = styled.div`
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
104
|
+
`;
|
|
105
|
+
export const UploadDragDropFileContainer = styled.div`
|
|
106
|
+
display: block;
|
|
107
|
+
height: 100%;
|
|
108
|
+
width: 100%;
|
|
109
|
+
position: relative;
|
|
110
|
+
`;
|
|
111
|
+
export const UploadDragDropImagePreview = styled.div`
|
|
112
|
+
padding: 1em;
|
|
113
|
+
> img,
|
|
114
|
+
> video {
|
|
115
|
+
width: 100%;
|
|
116
|
+
height: calc(150px - 2em);
|
|
117
|
+
object-fit: cover;
|
|
118
|
+
border-radius: 4px;
|
|
119
|
+
}
|
|
120
|
+
.remove {
|
|
121
|
+
font-style: normal;
|
|
122
|
+
position: absolute;
|
|
123
|
+
top: 8px;
|
|
124
|
+
right: 10px;
|
|
125
|
+
background: #444;
|
|
126
|
+
color: var(--sec-clr);
|
|
127
|
+
border-radius: 50%;
|
|
128
|
+
width: 15px;
|
|
129
|
+
height: 15px;
|
|
130
|
+
padding: 3px 5px;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
font-size: 8px;
|
|
133
|
+
z-index: 1;
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
line-height: 9px;
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
138
|
+
export const UploadDragDropFilePreviewCard = styled.div<{
|
|
139
|
+
$backgroundSrc?: string;
|
|
140
|
+
}>`
|
|
141
|
+
height: calc(150px - 2em);
|
|
142
|
+
border-radius: 4px;
|
|
143
|
+
background: ${({ $backgroundSrc }) =>
|
|
144
|
+
$backgroundSrc
|
|
145
|
+
? `linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url(${$backgroundSrc}) center/cover no-repeat`
|
|
146
|
+
: "#ffffff"};
|
|
147
|
+
border: 1px solid rgba(163, 163, 163, 0.4);
|
|
148
|
+
display: grid;
|
|
149
|
+
align-content: center;
|
|
150
|
+
justify-items: center;
|
|
151
|
+
gap: 6px;
|
|
152
|
+
padding: 1em;
|
|
153
|
+
text-align: center;
|
|
154
|
+
.file-type {
|
|
155
|
+
font-size: 12px;
|
|
156
|
+
font-weight: 700;
|
|
157
|
+
text-transform: uppercase;
|
|
158
|
+
color: ${({ $backgroundSrc }) => ($backgroundSrc ? "#ffffff" : "#ff585c")};
|
|
159
|
+
text-shadow: ${({ $backgroundSrc }) =>
|
|
160
|
+
$backgroundSrc ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "none"};
|
|
161
|
+
}
|
|
162
|
+
.file-name {
|
|
163
|
+
max-width: 100%;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
text-overflow: ellipsis;
|
|
166
|
+
white-space: nowrap;
|
|
167
|
+
color: ${({ $backgroundSrc }) =>
|
|
168
|
+
$backgroundSrc ? "#ffffff" : "var(--hd-clr)"};
|
|
169
|
+
font-weight: 600;
|
|
170
|
+
text-shadow: ${({ $backgroundSrc }) =>
|
|
171
|
+
$backgroundSrc ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "none"};
|
|
172
|
+
}
|
|
173
|
+
`;
|
|
100
174
|
export const UploadDragDropFileNamePlaceholder = styled.div`
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
175
|
+
position: absolute;
|
|
176
|
+
transform: translate(-50%, -50%);
|
|
177
|
+
top: 50%;
|
|
178
|
+
left: 50%;
|
|
179
|
+
width: 100%;
|
|
180
|
+
aside {
|
|
181
|
+
display: inline;
|
|
182
|
+
color: #ff585c;
|
|
106
183
|
font-weight: 600;
|
|
107
184
|
}
|
|
108
|
-
|
|
185
|
+
> span {
|
|
186
|
+
display: inline-block;
|
|
187
|
+
width: 100%;
|
|
188
|
+
text-align: center;
|
|
189
|
+
}
|
|
190
|
+
._refSubLabel {
|
|
191
|
+
font-size: 13px;
|
|
192
|
+
color: #999;
|
|
193
|
+
}
|
|
194
|
+
`;
|
|
109
195
|
export const UploadDragDropFileName = styled.div`
|
|
110
196
|
display: grid;
|
|
111
197
|
grid-auto-flow: column;
|
|
@@ -118,11 +204,11 @@ export const UploadDragDropFileName = styled.div`
|
|
|
118
204
|
text-overflow: ellipsis;
|
|
119
205
|
white-space: nowrap;
|
|
120
206
|
}
|
|
121
|
-
|
|
207
|
+
`;
|
|
122
208
|
export const UploadDragDropIcon = styled.i`
|
|
123
|
-
&:before {
|
|
209
|
+
&:before {
|
|
124
210
|
content: url(${IconArrowRedUpload});
|
|
125
211
|
width: 14px;
|
|
126
212
|
${IconStyles}
|
|
127
|
-
}
|
|
128
|
-
|
|
213
|
+
}
|
|
214
|
+
`;
|