quasar-ui-danx 0.3.49 → 0.3.51
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/danx.es.js +879 -853
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +4 -4
- package/dist/danx.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/Form/Fields/MultiFileField.vue +17 -5
- package/src/components/ActionTable/Form/RenderedForm.vue +14 -2
- package/src/components/Utility/Files/FilePreview.vue +71 -62
package/package.json
CHANGED
|
@@ -37,17 +37,25 @@
|
|
|
37
37
|
<FilePreview
|
|
38
38
|
v-for="file in uploadedFiles"
|
|
39
39
|
:key="'file-upload-' + file.id"
|
|
40
|
-
class="
|
|
41
|
-
:class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
|
|
40
|
+
class="cursor-pointer bg-gray-200"
|
|
41
|
+
:class="{'border border-dashed border-blue-600': !uploadedFiles.length, [fileClass]: true}"
|
|
42
42
|
:image="file"
|
|
43
43
|
:related-files="uploadedFiles"
|
|
44
44
|
downloadable
|
|
45
45
|
:removable="!readonly && !disable"
|
|
46
46
|
@remove="onRemove(file)"
|
|
47
|
-
|
|
47
|
+
>
|
|
48
|
+
<template #below>
|
|
49
|
+
<slot
|
|
50
|
+
name="below-file"
|
|
51
|
+
:file="file"
|
|
52
|
+
/>
|
|
53
|
+
</template>
|
|
54
|
+
</FilePreview>
|
|
48
55
|
<FilePreview
|
|
49
56
|
v-if="!disable && !readonly"
|
|
50
|
-
class="
|
|
57
|
+
class="cursor-pointer border border-dashed border-blue-600"
|
|
58
|
+
:class="fileClass"
|
|
51
59
|
disabled
|
|
52
60
|
@click="$refs.file.click()"
|
|
53
61
|
/>
|
|
@@ -80,7 +88,11 @@ const props = defineProps({
|
|
|
80
88
|
showName: Boolean,
|
|
81
89
|
disable: Boolean,
|
|
82
90
|
readonly: Boolean,
|
|
83
|
-
hideControls: Boolean
|
|
91
|
+
hideControls: Boolean,
|
|
92
|
+
fileClass: {
|
|
93
|
+
type: String,
|
|
94
|
+
default: "w-32 h-32 m-2"
|
|
95
|
+
}
|
|
84
96
|
});
|
|
85
97
|
|
|
86
98
|
const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
|
|
@@ -77,10 +77,18 @@
|
|
|
77
77
|
:show-name="showName"
|
|
78
78
|
:rows="field.type === 'TEXTAREA' ? 5 : 1"
|
|
79
79
|
:clearable="field.clearable || clearable"
|
|
80
|
+
:file-class="fileClass"
|
|
80
81
|
:disable="disable"
|
|
81
82
|
:readonly="readonly"
|
|
82
83
|
@update:model-value="onInput(field.name, $event)"
|
|
83
|
-
|
|
84
|
+
>
|
|
85
|
+
<template #below-file="{file}">
|
|
86
|
+
<slot
|
|
87
|
+
name="below-file"
|
|
88
|
+
:file="file"
|
|
89
|
+
/>
|
|
90
|
+
</template>
|
|
91
|
+
</Component>
|
|
84
92
|
</div>
|
|
85
93
|
<ConfirmDialog
|
|
86
94
|
v-if="variationToEdit !== false"
|
|
@@ -145,7 +153,11 @@ const props = defineProps({
|
|
|
145
153
|
type: [String, Number, Boolean],
|
|
146
154
|
default: undefined
|
|
147
155
|
},
|
|
148
|
-
canModifyVariations: Boolean
|
|
156
|
+
canModifyVariations: Boolean,
|
|
157
|
+
fileClass: {
|
|
158
|
+
type: String,
|
|
159
|
+
default: "w-32 h-32 m-2"
|
|
160
|
+
}
|
|
149
161
|
});
|
|
150
162
|
|
|
151
163
|
const FORM_FIELD_MAP = {
|
|
@@ -1,78 +1,83 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="relative flex justify-center
|
|
3
|
+
class="relative flex justify-center"
|
|
4
4
|
:class="{'rounded-2xl': !square}"
|
|
5
5
|
>
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
>
|
|
6
|
+
<div
|
|
7
|
+
class=" bg-gray-100 overflow-hidden flex justify-center relative w-full h-full"
|
|
8
|
+
:class="{'rounded-2xl': !square}"
|
|
9
|
+
>
|
|
10
|
+
<template v-if="computedImage">
|
|
11
11
|
<div
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
class="grow h-full"
|
|
13
|
+
@click="showPreview = true"
|
|
14
14
|
>
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
<div
|
|
16
|
+
v-if="isVideo"
|
|
17
|
+
class="relative max-h-full max-w-full w-full flex justify-center"
|
|
18
18
|
>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
<video
|
|
20
|
+
class="max-h-full"
|
|
21
|
+
preload="auto"
|
|
22
22
|
>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
<source
|
|
24
|
+
:src="previewUrl + '#t=0.1'"
|
|
25
|
+
:type="mimeType"
|
|
26
|
+
>
|
|
27
|
+
</video>
|
|
28
|
+
<button :class="cls['play-button']">
|
|
29
|
+
<PlayIcon class="w-16" />
|
|
30
|
+
</button>
|
|
31
|
+
</div>
|
|
32
|
+
<QImg
|
|
33
|
+
v-if="thumbUrl || isPreviewable"
|
|
34
|
+
fit="fill"
|
|
35
|
+
class="non-selectable max-h-full max-w-full h-full"
|
|
36
|
+
:src="(thumbUrl || previewUrl) + '#t=0.1'"
|
|
37
|
+
preload="auto"
|
|
38
|
+
data-testid="previewed-image"
|
|
39
|
+
/>
|
|
40
|
+
<div
|
|
41
|
+
v-else
|
|
42
|
+
class="flex items-center justify-center h-full"
|
|
43
|
+
>
|
|
44
|
+
<PdfIcon
|
|
45
|
+
v-if="isPdf"
|
|
46
|
+
class="w-24"
|
|
47
|
+
/>
|
|
48
|
+
<TextFileIcon
|
|
49
|
+
v-else
|
|
50
|
+
class="w-24"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
27
53
|
</div>
|
|
28
|
-
<QImg
|
|
29
|
-
v-if="thumbUrl || isPreviewable"
|
|
30
|
-
fit="fill"
|
|
31
|
-
class="non-selectable max-h-full max-w-full h-full"
|
|
32
|
-
:src="(thumbUrl || previewUrl) + '#t=0.1'"
|
|
33
|
-
preload="auto"
|
|
34
|
-
data-testid="previewed-image"
|
|
35
|
-
/>
|
|
36
54
|
<div
|
|
37
|
-
v-
|
|
38
|
-
class="
|
|
55
|
+
v-if="$slots['action-button']"
|
|
56
|
+
:class="cls['action-button']"
|
|
39
57
|
>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
<slot name="action-button" />
|
|
59
|
+
</div>
|
|
60
|
+
<div
|
|
61
|
+
v-if="image && image.progress !== undefined"
|
|
62
|
+
class="absolute-bottom w-full"
|
|
63
|
+
>
|
|
64
|
+
<QLinearProgress
|
|
65
|
+
:value="image.progress"
|
|
66
|
+
size="15px"
|
|
67
|
+
color="green-600"
|
|
68
|
+
stripe
|
|
47
69
|
/>
|
|
48
70
|
</div>
|
|
49
|
-
</
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
>
|
|
60
|
-
<QLinearProgress
|
|
61
|
-
:value="image.progress"
|
|
62
|
-
size="15px"
|
|
63
|
-
color="green-600"
|
|
64
|
-
stripe
|
|
65
|
-
/>
|
|
66
|
-
</div>
|
|
67
|
-
</template>
|
|
68
|
-
<template v-else>
|
|
69
|
-
<slot name="missing">
|
|
70
|
-
<component
|
|
71
|
-
:is="missingIcon"
|
|
72
|
-
class="w-full h-full p-2 text-gray-300"
|
|
73
|
-
/>
|
|
74
|
-
</slot>
|
|
75
|
-
</template>
|
|
71
|
+
</template>
|
|
72
|
+
<template v-else>
|
|
73
|
+
<slot name="missing">
|
|
74
|
+
<component
|
|
75
|
+
:is="missingIcon"
|
|
76
|
+
class="w-full h-full p-2 text-gray-300"
|
|
77
|
+
/>
|
|
78
|
+
</slot>
|
|
79
|
+
</template>
|
|
80
|
+
</div>
|
|
76
81
|
|
|
77
82
|
<div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
|
|
78
83
|
<QBtn
|
|
@@ -104,6 +109,10 @@
|
|
|
104
109
|
</QBtn>
|
|
105
110
|
</div>
|
|
106
111
|
|
|
112
|
+
<div class="below-file absolute-bottom">
|
|
113
|
+
<slot name="below" />
|
|
114
|
+
</div>
|
|
115
|
+
|
|
107
116
|
<FullScreenCarouselDialog
|
|
108
117
|
v-if="showPreview && !disabled"
|
|
109
118
|
:files="relatedFiles || [computedImage]"
|