forstok-ui-lib 8.6.3 → 8.7.1
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 +8 -2
- package/dist/index.js +479 -427
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +480 -428
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/javascripts/function.ts +139 -0
- package/src/assets/stylesheets/bases.styles.ts +40 -41
- package/src/components/upload/drag.drop.tsx +279 -44
- package/src/components/upload/styles.tsx +114 -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,80 @@ 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
|
+
`;
|
|
121
|
+
export const UploadDragDropFilePreviewCard = styled.div<{
|
|
122
|
+
$backgroundSrc?: string;
|
|
123
|
+
}>`
|
|
124
|
+
height: calc(150px - 2em);
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
background: ${({ $backgroundSrc }) =>
|
|
127
|
+
$backgroundSrc
|
|
128
|
+
? `linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url(${$backgroundSrc}) center/cover no-repeat`
|
|
129
|
+
: "#ffffff"};
|
|
130
|
+
border: 1px solid rgba(163, 163, 163, 0.4);
|
|
131
|
+
display: grid;
|
|
132
|
+
align-content: center;
|
|
133
|
+
justify-items: center;
|
|
134
|
+
gap: 6px;
|
|
135
|
+
padding: 1em;
|
|
136
|
+
text-align: center;
|
|
137
|
+
.file-type {
|
|
138
|
+
font-size: 12px;
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
color: ${({ $backgroundSrc }) => ($backgroundSrc ? "#ffffff" : "#ff585c")};
|
|
142
|
+
text-shadow: ${({ $backgroundSrc }) =>
|
|
143
|
+
$backgroundSrc ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "none"};
|
|
144
|
+
}
|
|
145
|
+
.file-name {
|
|
146
|
+
max-width: 100%;
|
|
147
|
+
overflow: hidden;
|
|
148
|
+
text-overflow: ellipsis;
|
|
149
|
+
white-space: nowrap;
|
|
150
|
+
color: ${({ $backgroundSrc }) =>
|
|
151
|
+
$backgroundSrc ? "#ffffff" : "var(--hd-clr)"};
|
|
152
|
+
font-weight: 600;
|
|
153
|
+
text-shadow: ${({ $backgroundSrc }) =>
|
|
154
|
+
$backgroundSrc ? "0 1px 2px rgba(0, 0, 0, 0.45)" : "none"};
|
|
155
|
+
}
|
|
156
|
+
`;
|
|
100
157
|
export const UploadDragDropFileNamePlaceholder = styled.div`
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
158
|
+
position: absolute;
|
|
159
|
+
transform: translate(-50%, -50%);
|
|
160
|
+
top: 50%;
|
|
161
|
+
left: 50%;
|
|
162
|
+
width: 100%;
|
|
163
|
+
aside {
|
|
164
|
+
display: inline;
|
|
165
|
+
color: #ff585c;
|
|
106
166
|
font-weight: 600;
|
|
107
167
|
}
|
|
108
|
-
|
|
168
|
+
> span {
|
|
169
|
+
display: inline-block;
|
|
170
|
+
width: 100%;
|
|
171
|
+
text-align: center;
|
|
172
|
+
}
|
|
173
|
+
._refSubLabel {
|
|
174
|
+
font-size: 13px;
|
|
175
|
+
color: #999;
|
|
176
|
+
}
|
|
177
|
+
`;
|
|
109
178
|
export const UploadDragDropFileName = styled.div`
|
|
110
179
|
display: grid;
|
|
111
180
|
grid-auto-flow: column;
|
|
@@ -118,11 +187,11 @@ export const UploadDragDropFileName = styled.div`
|
|
|
118
187
|
text-overflow: ellipsis;
|
|
119
188
|
white-space: nowrap;
|
|
120
189
|
}
|
|
121
|
-
|
|
190
|
+
`;
|
|
122
191
|
export const UploadDragDropIcon = styled.i`
|
|
123
|
-
&:before {
|
|
192
|
+
&:before {
|
|
124
193
|
content: url(${IconArrowRedUpload});
|
|
125
194
|
width: 14px;
|
|
126
195
|
${IconStyles}
|
|
127
|
-
}
|
|
128
|
-
|
|
196
|
+
}
|
|
197
|
+
`;
|