@gx-design-vue/image 0.1.2 → 0.2.0-beta.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.
Files changed (14) hide show
  1. package/dist/Image.d.ts +69 -10
  2. package/dist/components/ImageViewer.d.ts +138 -4
  3. package/dist/components/style.d.ts +22 -0
  4. package/dist/image.mjs +1495 -0
  5. package/dist/image.umd.js +2 -1
  6. package/dist/index.d.ts +0 -3
  7. package/dist/props.d.ts +51 -3
  8. package/dist/style.d.ts +6 -0
  9. package/package.json +11 -12
  10. package/dist/components/ImageViewerGroup.d.ts +0 -14
  11. package/dist/design/config.less +0 -2
  12. package/dist/image.es.js +0 -801
  13. package/dist/style.css +0 -1
  14. package/dist/style.less +0 -177
package/dist/style.css DELETED
@@ -1 +0,0 @@
1
- .gx-image{position:relative;display:inline-flex;overflow:hidden}.gx-image-inner{width:100%;height:100%;vertical-align:top}.gx-image-inner.gx-image-inner-center{position:relative;top:50%;left:50%;display:block;transform:translate(-50%,-50%)}.gx-image-placeholder{width:100%;height:100%;background:#f5f7fa}.gx-image-error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:14px;color:#c0c4cc;vertical-align:middle;background:#f5f7fa}.gx-image-preview,.gx-image-viewer-group-item{cursor:pointer}.gx-image-viewer-wrapper{position:fixed;top:0;right:0;bottom:0;left:0}.gx-image-viewer-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5}.gx-image-viewer-btn{position:absolute;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border-radius:50%;opacity:.8}.gx-image-viewer-close{top:40px;right:40px;width:40px;height:40px;font-size:40px;width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-canvas{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.gx-image-viewer-actions{bottom:30px;left:50%;width:282px;height:44px;padding:0 23px;background-color:#606266;border-color:#fff;border-radius:22px;transform:translate(-50%)}.gx-image-viewer-actions-inner{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;font-size:23px;color:#fff;text-align:justify;cursor:default}.gx-image-viewer-prev{top:50%;left:40px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-next{top:50%;right:40px;text-indent:2px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.viewer-fade-enter-active{animation:viewer-fade-in .3s}.viewer-fade-leave-active{animation:viewer-fade-out .3s}@keyframes viewer-fade-in{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes viewer-fade-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}
package/dist/style.less DELETED
@@ -1,177 +0,0 @@
1
- @import './design/config.less';
2
-
3
- .size() {
4
- width: 100%;
5
- height: 100%;
6
- }
7
-
8
- .op-icon() {
9
- width: 44px;
10
- height: 44px;
11
- font-size: 24px;
12
- color: #fff;
13
- background-color: #606266;
14
- border-color: #fff;
15
- }
16
-
17
- .@{gx-prefix}-image {
18
- position: relative;
19
- display: inline-flex;
20
- overflow: hidden;
21
-
22
- &-inner {
23
- .size();
24
- vertical-align: top;
25
-
26
- &.gx-image-inner-center {
27
- position: relative;
28
- top: 50%;
29
- left: 50%;
30
- display: block;
31
- transform: translate(-50%, -50%);
32
- }
33
- }
34
-
35
- &-placeholder {
36
- .size();
37
- background: #f5f7fa;
38
- }
39
-
40
- &-error {
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- .size();
45
- font-size: 14px;
46
- color: #c0c4cc;
47
- vertical-align: middle;
48
- background: #f5f7fa;
49
- }
50
-
51
- &-preview {
52
- cursor: pointer;
53
- }
54
- }
55
-
56
- .@{gx-prefix}-image-viewer {
57
- &-group-item {
58
- cursor: pointer;
59
- }
60
-
61
- &-wrapper {
62
- position: fixed;
63
- top: 0;
64
- right: 0;
65
- bottom: 0;
66
- left: 0;
67
- }
68
-
69
- &-mask {
70
- position: absolute;
71
- top: 0;
72
- left: 0;
73
- width: 100%;
74
- height: 100%;
75
- background: #000;
76
- opacity: 0.5;
77
- }
78
-
79
- &-btn {
80
- position: absolute;
81
- z-index: 1;
82
- box-sizing: border-box;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- cursor: pointer;
87
- user-select: none;
88
- border-radius: 50%;
89
- opacity: 0.8;
90
- }
91
-
92
- &-close {
93
- top: 40px;
94
- right: 40px;
95
- width: 40px;
96
- height: 40px;
97
- font-size: 40px;
98
- .op-icon();
99
- }
100
-
101
- &-canvas {
102
- display: flex;
103
- align-items: center;
104
- justify-content: center;
105
- width: 100%;
106
- height: 100%;
107
- }
108
-
109
- &-actions {
110
- bottom: 30px;
111
- left: 50%;
112
- width: 282px;
113
- height: 44px;
114
- padding: 0 23px;
115
- background-color: #606266;
116
- border-color: #fff;
117
- border-radius: 22px;
118
- transform: translateX(-50%);
119
-
120
- &-inner {
121
- display: flex;
122
- align-items: center;
123
- justify-content: space-around;
124
- width: 100%;
125
- height: 100%;
126
- font-size: 23px;
127
- color: #fff;
128
- text-align: justify;
129
- cursor: default;
130
- }
131
- }
132
-
133
- &-prev {
134
- top: 50%;
135
- left: 40px;
136
- transform: translateY(-50%);
137
- .op-icon();
138
- }
139
-
140
- &-next {
141
- top: 50%;
142
- right: 40px;
143
- text-indent: 2px;
144
- transform: translateY(-50%);
145
- .op-icon();
146
- }
147
- }
148
-
149
- .viewer-fade-enter-active {
150
- animation: viewer-fade-in 0.3s;
151
- }
152
-
153
- .viewer-fade-leave-active {
154
- animation: viewer-fade-out 0.3s;
155
- }
156
-
157
- @keyframes viewer-fade-in {
158
- 0% {
159
- opacity: 0;
160
- transform: translate3d(0, -20px, 0);
161
- }
162
- 100% {
163
- opacity: 1;
164
- transform: translate3d(0, 0, 0);
165
- }
166
- }
167
-
168
- @keyframes viewer-fade-out {
169
- 0% {
170
- opacity: 1;
171
- transform: translate3d(0, 0, 0);
172
- }
173
- 100% {
174
- opacity: 0;
175
- transform: translate3d(0, -20px, 0);
176
- }
177
- }