@drax/media-vue 2.0.0 → 2.0.2
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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.0.
|
|
6
|
+
"version": "2.0.2",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "./src/index.ts",
|
|
9
9
|
"module": "./src/index.ts",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"vue-tsc": "^3.2.4",
|
|
47
47
|
"vuetify": "^3.11.8"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "4ae64cc2ae14f3cc4d768a97689b2ff597e3401d"
|
|
50
50
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import {MediaSystemFactory} from "@drax/media-front"
|
|
3
|
-
import {type PropType, ref} from "vue";
|
|
3
|
+
import {type PropType, ref, computed} from "vue";
|
|
4
4
|
|
|
5
5
|
const mediaSystem = MediaSystemFactory.getInstance()
|
|
6
6
|
|
|
@@ -30,6 +30,8 @@ const {dir, readonly, timeout} = defineProps({
|
|
|
30
30
|
type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
|
|
31
31
|
default: 'filled'
|
|
32
32
|
},
|
|
33
|
+
preview: {type: Boolean, default: false},
|
|
34
|
+
previewHeight: {type: String, default: '100px'},
|
|
33
35
|
})
|
|
34
36
|
|
|
35
37
|
let fileInput = ref()
|
|
@@ -95,6 +97,17 @@ const handleDragLeave = () => {
|
|
|
95
97
|
|
|
96
98
|
defineEmits(['updateValue'])
|
|
97
99
|
|
|
100
|
+
const isImage = computed(() => {
|
|
101
|
+
|
|
102
|
+
if (typeof valueModel.value !== 'string' || !valueModel.value.trim()) return false;
|
|
103
|
+
|
|
104
|
+
// matches: .jpg/.jpeg/.png/.gif/.webp/.bmp/.svg/.tif/.tiff/.avif/.ico
|
|
105
|
+
// supports optional query/hash: ".../file.jpg?x=1#y"
|
|
106
|
+
const imageExtRegex = /\.(?:jpe?g|png|gif|webp|bmp|svg|tiff?|avif|ico)(?:[?#].*)?$/i;
|
|
107
|
+
|
|
108
|
+
return imageExtRegex.test(valueModel.value);
|
|
109
|
+
});
|
|
110
|
+
|
|
98
111
|
</script>
|
|
99
112
|
|
|
100
113
|
<template>
|
|
@@ -140,8 +153,16 @@ defineEmits(['updateValue'])
|
|
|
140
153
|
@change="onFileChanged"
|
|
141
154
|
>
|
|
142
155
|
|
|
156
|
+
{{preview}} {{isImage}}
|
|
157
|
+
|
|
143
158
|
<v-btn @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
|
|
144
159
|
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
<template v-if="preview && isImage">
|
|
163
|
+
<v-img :src="valueModel" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
|
|
164
|
+
</template>
|
|
165
|
+
|
|
145
166
|
</div>
|
|
146
167
|
|
|
147
168
|
</template>
|
|
@@ -33,6 +33,8 @@ const {dir, readonly, timeout} = defineProps({
|
|
|
33
33
|
type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
|
|
34
34
|
default: 'filled'
|
|
35
35
|
},
|
|
36
|
+
preview: {type: Boolean, default: false},
|
|
37
|
+
previewHeight: {type: String, default: '100px'},
|
|
36
38
|
})
|
|
37
39
|
|
|
38
40
|
let fileInput = ref()
|
|
@@ -98,6 +100,16 @@ const handleDragLeave = () => {
|
|
|
98
100
|
|
|
99
101
|
defineEmits(['updateValue'])
|
|
100
102
|
|
|
103
|
+
const isImage = computed(() => {
|
|
104
|
+
|
|
105
|
+
if (typeof valueModel.value.url !== 'string' || !valueModel.value.url.trim()) return false;
|
|
106
|
+
|
|
107
|
+
// supports optional query/hash: ".../file.jpg?x=1#y"
|
|
108
|
+
const imageExtRegex = /\.(?:jpe?g|png|gif|webp|bmp|svg|tiff?|avif|ico)(?:[?#].*)?$/i;
|
|
109
|
+
|
|
110
|
+
return imageExtRegex.test(valueModel.value.url);
|
|
111
|
+
});
|
|
112
|
+
|
|
101
113
|
</script>
|
|
102
114
|
|
|
103
115
|
<template>
|
|
@@ -145,6 +157,10 @@ defineEmits(['updateValue'])
|
|
|
145
157
|
|
|
146
158
|
<v-btn @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
|
|
147
159
|
|
|
160
|
+
<template v-if="preview && isImage">
|
|
161
|
+
<v-img :src="valueModel.url" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
|
|
162
|
+
</template>
|
|
163
|
+
|
|
148
164
|
</div>
|
|
149
165
|
|
|
150
166
|
</template>
|