@drax/media-vue 1.0.0 → 2.0.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "2.0.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,42 +24,27 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/media-front": "^1.0.0"
+    "@drax/media-front": "^2.0.0"
   },
   "peerDependencies": {
-    "pinia": "^2.2.2",
-    "vue": "^3.5.7",
-    "vue-i18n": "^9.14.0",
+    "vue": "^3.5.28",
+    "vue-i18n": "^11.2.8",
     "vuetify": "^3.9.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/test-utils": "^2.4.5",
-    "@vue/tsconfig": "^0.5.1",
-    "cypress": "^13.7.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-vue": "^9.23.0",
-    "jsdom": "^24.0.0",
-    "npm-run-all2": "^6.1.2",
-    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "prettier": "^3.2.5",
-    "start-server-and-test": "^2.0.3",
-    "typescript": "~5.4.0",
-    "vite": "^5.4.3",
+    "@types/node": "^25.2.3",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-dts": "^3.9.1",
-    "vitest": "^1.4.0",
-    "vue": "^3.5.3",
-    "vue-tsc": "^2.0.11",
-    "vuetify": "^3.7.1"
+    "vitest": "^3.2.4",
+    "vue": "^3.5.28",
+    "vue-tsc": "^3.2.4",
+    "vuetify": "^3.11.8"
   },
-  "gitHead": "8e60f7548448f339e7e9bb665ceacd3e051ef32e"
+  "gitHead": "4ae64cc2ae14f3cc4d768a97689b2ff597e3401d"
 }

package/src/components/MediaField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {MediaSystemFactory} from "@drax/media-front"
-import {type PropType, ref} from "vue";
+import {type PropType, ref, computed} from "vue";
 
 const mediaSystem = MediaSystemFactory.getInstance()
 
@@ -30,6 +30,8 @@ const {dir, readonly, timeout} = defineProps({
     type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
     default: 'filled'
   },
+  preview: {type: Boolean, default: false},
+  previewHeight: {type: String, default: '100px'},
 })
 
 let fileInput = ref()
@@ -95,6 +97,17 @@ const handleDragLeave = () => {
 
 defineEmits(['updateValue'])
 
+const isImage = computed(() => {
+
+  if (typeof valueModel.value !== 'string' || !valueModel.value.trim()) return false;
+
+  // matches: .jpg/.jpeg/.png/.gif/.webp/.bmp/.svg/.tif/.tiff/.avif/.ico
+  // supports optional query/hash: ".../file.jpg?x=1#y"
+  const imageExtRegex = /\.(?:jpe?g|png|gif|webp|bmp|svg|tiff?|avif|ico)(?:[?#].*)?$/i;
+
+  return imageExtRegex.test(valueModel.value);
+});
+
 </script>
 
 <template>
@@ -140,8 +153,16 @@ defineEmits(['updateValue'])
         @change="onFileChanged"
     >
 
+    {{preview}} {{isImage}}
+
     <v-btn  @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
 
+
+
+    <template v-if="preview && isImage">
+      <v-img :src="valueModel" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
+    </template>
+
   </div>
 
 </template>

package/src/components/MediaFullField.vue

@@ -33,6 +33,8 @@ const {dir, readonly, timeout} = defineProps({
     type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
     default: 'filled'
   },
+  preview: {type: Boolean, default: false},
+  previewHeight: {type: String, default: '100px'},
 })
 
 let fileInput = ref()
@@ -98,6 +100,16 @@ const handleDragLeave = () => {
 
 defineEmits(['updateValue'])
 
+const isImage = computed(() => {
+
+  if (typeof valueModel.value.url !== 'string' || !valueModel.value.url.trim()) return false;
+
+  // supports optional query/hash: ".../file.jpg?x=1#y"
+  const imageExtRegex = /\.(?:jpe?g|png|gif|webp|bmp|svg|tiff?|avif|ico)(?:[?#].*)?$/i;
+
+  return imageExtRegex.test(valueModel.value.url);
+});
+
 </script>
 
 <template>
@@ -145,6 +157,10 @@ defineEmits(['updateValue'])
 
     <v-btn @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
 
+    <template v-if="preview && isImage">
+      <v-img :src="valueModel.url" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
+    </template>
+
   </div>
 
 </template>

package/README.md

@@ -1,61 +0,0 @@
-# identity-front
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
-```
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-```sh
-npm run test:e2e:dev
-```
-
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
-
-```sh
-npm run build
-npm run test:e2e
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```