@drax/media-vue 2.0.0 → 2.0.3
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.3",
|
|
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": "f6e5a7d19a50762b6632cb4c13eb2f1fe9aed233"
|
|
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>
|
|
@@ -142,6 +155,10 @@ defineEmits(['updateValue'])
|
|
|
142
155
|
|
|
143
156
|
<v-btn @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
|
|
144
157
|
|
|
158
|
+
<template v-if="preview && isImage">
|
|
159
|
+
<v-img :src="valueModel" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
|
|
160
|
+
</template>
|
|
161
|
+
|
|
145
162
|
</div>
|
|
146
163
|
|
|
147
164
|
</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>
|