@v1nt1248/3nclient-lib 0.1.49 → 0.1.50
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/package.json
CHANGED
|
@@ -4,6 +4,7 @@ export interface Ui3nDropFilesProps {
|
|
|
4
4
|
title?: string;
|
|
5
5
|
text?: string;
|
|
6
6
|
additionalText?: string;
|
|
7
|
+
permanentDisplay?: boolean;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
export interface Ui3nDropFilesEmits {
|
|
@@ -12,4 +13,5 @@ export interface Ui3nDropFilesEmits {
|
|
|
12
13
|
|
|
13
14
|
export interface Ui3nDropFilesSlots {
|
|
14
15
|
default: () => VNode;
|
|
16
|
+
'additional-text': () => VNode;
|
|
15
17
|
}
|
|
@@ -1,182 +1,176 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
-
import { onMounted, ref } from 'vue';
|
|
3
|
-
import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots } from './types';
|
|
4
|
-
|
|
5
|
-
withDefaults(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
);
|
|
13
|
-
const emits = defineEmits<Ui3nDropFilesEmits>();
|
|
14
|
-
defineSlots<Ui3nDropFilesSlots>();
|
|
15
|
-
|
|
16
|
-
const wrapperElement = ref<HTMLDivElement | null>(null);
|
|
17
|
-
const
|
|
18
|
-
const isOverDropPlace = ref(false);
|
|
19
|
-
const isOverDropZone = ref(false);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
2
|
+
import { onMounted, ref } from 'vue';
|
|
3
|
+
import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots } from './types';
|
|
4
|
+
|
|
5
|
+
withDefaults(
|
|
6
|
+
defineProps<Ui3nDropFilesProps>(),
|
|
7
|
+
{
|
|
8
|
+
title: 'Upload',
|
|
9
|
+
text: '',
|
|
10
|
+
additionalText: '',
|
|
11
|
+
},
|
|
12
|
+
);
|
|
13
|
+
const emits = defineEmits<Ui3nDropFilesEmits>();
|
|
14
|
+
defineSlots<Ui3nDropFilesSlots>();
|
|
15
|
+
|
|
16
|
+
const wrapperElement = ref<HTMLDivElement | null>(null);
|
|
17
|
+
const wrapperElementMinSize = ref(0);
|
|
18
|
+
const isOverDropPlace = ref(false);
|
|
19
|
+
const isOverDropZone = ref(false);
|
|
20
|
+
|
|
21
|
+
function onDragenter(ev: MouseEvent) {
|
|
22
|
+
ev.preventDefault();
|
|
23
|
+
isOverDropPlace.value = true;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function onDragleave(ev: MouseEvent) {
|
|
27
|
+
ev.preventDefault();
|
|
28
|
+
isOverDropPlace.value = false;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function onDropzoneDragover(ev: MouseEvent) {
|
|
32
|
+
ev.preventDefault();
|
|
33
|
+
ev.stopPropagation();
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function onDropzoneDragenter(ev: MouseEvent) {
|
|
37
|
+
ev.preventDefault();
|
|
38
|
+
isOverDropZone.value = true;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function onDropzoneDragleave(ev: MouseEvent) {
|
|
42
|
+
ev.preventDefault();
|
|
43
|
+
isOverDropZone.value = false;
|
|
32
44
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
};
|
|
43
|
-
const onDropzoneDragover = (ev: MouseEvent) => {
|
|
44
|
-
ev.preventDefault();
|
|
45
|
-
ev.stopPropagation();
|
|
46
|
-
};
|
|
47
|
-
const onDropzoneDragenter = (ev: MouseEvent) => {
|
|
48
|
-
ev.preventDefault();
|
|
49
|
-
isOverDropZone.value = true;
|
|
50
|
-
};
|
|
51
|
-
const onDropzoneDragleave = (ev: MouseEvent) => {
|
|
52
|
-
ev.preventDefault();
|
|
53
|
-
isOverDropZone.value = false;
|
|
54
|
-
};
|
|
55
|
-
const onDrop = (ev: DragEvent) => {
|
|
56
|
-
ev.stopPropagation();
|
|
57
|
-
ev.preventDefault();
|
|
58
|
-
if (ev.dataTransfer!.files) {
|
|
59
|
-
emits('select', ev.dataTransfer!.files);
|
|
45
|
+
|
|
46
|
+
function onDrop(ev: DragEvent) {
|
|
47
|
+
ev.stopPropagation();
|
|
48
|
+
ev.preventDefault();
|
|
49
|
+
if (ev.dataTransfer!.files) {
|
|
50
|
+
emits('select', ev.dataTransfer!.files);
|
|
51
|
+
}
|
|
52
|
+
isOverDropPlace.value = false;
|
|
53
|
+
isOverDropZone.value = false;
|
|
60
54
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
55
|
+
|
|
56
|
+
onMounted(() => {
|
|
57
|
+
if (wrapperElement.value) {
|
|
58
|
+
wrapperElementMinSize.value = Math.min(wrapperElement.value.clientHeight, wrapperElement.value.clientWidth);
|
|
59
|
+
wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementMinSize.value}px`);
|
|
60
|
+
let titleFontSize = 12;
|
|
61
|
+
if (wrapperElementMinSize.value > 100 && wrapperElementMinSize.value <= 240) {
|
|
62
|
+
titleFontSize = 16;
|
|
63
|
+
} else if (wrapperElementMinSize.value > 240) {
|
|
64
|
+
titleFontSize = 20;
|
|
65
|
+
}
|
|
66
|
+
wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
64
69
|
</script>
|
|
65
70
|
|
|
66
71
|
<template>
|
|
67
72
|
<!-- eslint-disable max-len -->
|
|
68
73
|
<div
|
|
69
74
|
ref="wrapperElement"
|
|
70
|
-
:class="
|
|
75
|
+
:class="[
|
|
76
|
+
$style.ui3nDropFiles,
|
|
77
|
+
permanentDisplay && $style.ui3nDropFilesWithBorder,
|
|
78
|
+
isOverDropPlace || isOverDropZone && $style.ui3nDropFilesWithAccentBorder
|
|
79
|
+
]"
|
|
71
80
|
@dragenter="onDragenter"
|
|
72
81
|
@dragleave="onDragleave"
|
|
73
82
|
>
|
|
74
83
|
<slot />
|
|
75
|
-
|
|
76
84
|
<div
|
|
77
|
-
v-if="isOverDropPlace || isOverDropZone"
|
|
78
85
|
:class="$style.ui3nDropFilesDropzone"
|
|
79
86
|
@dragenter="onDropzoneDragenter"
|
|
80
87
|
@dragover="onDropzoneDragover"
|
|
81
88
|
@dragleave="onDropzoneDragleave"
|
|
82
89
|
@drop="onDrop"
|
|
83
90
|
>
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<div
|
|
106
|
-
|
|
91
|
+
<template v-if="permanentDisplay || isOverDropPlace || isOverDropZone">
|
|
92
|
+
<h3 :class="$style.ui3nDropFilesDropzoneTitle">
|
|
93
|
+
{{ title }}
|
|
94
|
+
</h3>
|
|
95
|
+
|
|
96
|
+
<div :class="$style.ui3nDropFilesDropzoneIcon">
|
|
97
|
+
<svg
|
|
98
|
+
:width="wrapperElementMinSize * 0.35"
|
|
99
|
+
:height="wrapperElementMinSize * 0.35"
|
|
100
|
+
viewBox="0 0 192 192"
|
|
101
|
+
fill="none"
|
|
102
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
103
|
+
>
|
|
104
|
+
<path
|
|
105
|
+
d="M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z"
|
|
106
|
+
fill="var(--color-icon-control-primary-default)"
|
|
107
|
+
/>
|
|
108
|
+
</svg>
|
|
109
|
+
</div>
|
|
110
|
+
</template>
|
|
111
|
+
|
|
112
|
+
<div :class="$style.ui3nDropFilesDropzoneAdditional">
|
|
113
|
+
<slot name="additional-text" />
|
|
107
114
|
</div>
|
|
108
115
|
</div>
|
|
109
116
|
</div>
|
|
110
117
|
</template>
|
|
111
118
|
|
|
112
119
|
<style lang="scss" module>
|
|
113
|
-
.ui3nDropFiles {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
.
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
margin-top: var(--spacing-ml);
|
|
170
|
-
font-size: var(--font-12);
|
|
171
|
-
line-height: var(--font-16);
|
|
172
|
-
font-weight: 400;
|
|
173
|
-
color: var(--fill-pressed);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.ui3nDropFilesDropzoneAdditional {
|
|
177
|
-
margin-top: var(--spacing-xs);
|
|
178
|
-
font-size: var(--font-12);
|
|
179
|
-
font-weight: 500;
|
|
180
|
-
color: var(--color-text-control-primary-default);
|
|
181
|
-
}
|
|
120
|
+
.ui3nDropFiles {
|
|
121
|
+
--dropzone-height: 0;
|
|
122
|
+
--dropzone-title-font: 0;
|
|
123
|
+
|
|
124
|
+
position: relative;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
width: 100%;
|
|
127
|
+
height: 100%;
|
|
128
|
+
border-radius: var(--spacing-s);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.ui3nDropFilesWithBorder {
|
|
132
|
+
border: 2px dashed var(--color-border-block-primary-default);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ui3nDropFilesWithAccentBorder {
|
|
136
|
+
border: 2px dashed var(--accent-fill-pressed);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.ui3nDropFilesDropzone {
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
position: absolute;
|
|
142
|
+
background-color: var(--color-bg-block-primary-default);
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
align-items: center;
|
|
147
|
+
row-gap: var(--spacing-m);
|
|
148
|
+
inset: var(--spacing-xs);
|
|
149
|
+
z-index: 5;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.ui3nDropFilesDropzoneTitle {
|
|
153
|
+
font-size: var(--dropzone-title-font);
|
|
154
|
+
font-weight: 500;
|
|
155
|
+
color: var(--color-text-table-secondary-default);
|
|
156
|
+
margin: 0;
|
|
157
|
+
pointer-events: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.ui3nDropFilesDropzoneIcon {
|
|
161
|
+
position: relative;
|
|
162
|
+
width: calc(var(--dropzone-height) * 0.4);
|
|
163
|
+
height: calc(var(--dropzone-height) * 0.4);
|
|
164
|
+
border-radius: 50%;
|
|
165
|
+
background-color: var(--color-bg-button-tritery-default);
|
|
166
|
+
display: flex;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
align-items: center;
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ui3nDropFilesDropzoneAdditional {
|
|
173
|
+
position: relative;
|
|
174
|
+
width: max-content;
|
|
175
|
+
}
|
|
182
176
|
</style>
|