@drax/media-vue 0.7.0

package/README.md

@@ -0,0 +1,61 @@
+# 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
+```

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@drax/media-vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.7.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@drax/media-front": "^0.7.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.2.2",
+    "vue": "^3.5.7",
+    "vue-i18n": "^9.14.0",
+    "vuetify": "^3.7.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",
+    "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"
+  },
+  "gitHead": "244c1ccf07c9e3cf11486dcd013b11bcee505c6d"
+}

package/src/components/MediaField.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {MediaSystemFactory} from "@drax/media-front"
+import {type PropType, ref} from "vue";
+
+const mediaSystem = MediaSystemFactory.getInstance()
+
+const valueModel = defineModel<any>({type: [String], default: false})
+
+const {dir} = defineProps({
+  prependIcon: {type: String, default: ''},
+ // prependInnerIcon: {type: String, default: ''},
+  appendIcon: {type: String, default: ''},
+  appendInnerIcon: {type: String, default: ''},
+  readonly: {type: Boolean, default: false},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: false},
+  disableRules: {type: Boolean, default: false},
+  parentField: {type: String, default: null, required: false},
+  index: {type: Number, default: null, required: false},
+  name: {type: String, default: 'file'},
+  dir: {type: String, default: 'files'},
+  label: {type: String, default: 'media.file'},
+  accept: {type: String, default: '*'},
+  errorMessages: {type: Array as PropType<string[]>, default: []},
+  rules: {type: Array as PropType<any>, default: []},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {
+    type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
+    default: 'filled'
+  },
+})
+
+let fileInput = ref()
+
+function onFileClick() {
+  console.log('File clicked');
+  fileInput.value.click();
+  console.log('File clicked pass');
+}
+
+
+async function onFileChanged(e: Event) {
+  if (e.target && (e.target as HTMLInputElement).files) {
+    const files = (e.target as HTMLInputElement).files;
+    if (files && files[0]) {
+      const file = await mediaSystem.uploadFile(files[0],dir);
+      valueModel.value = file.url;
+    }
+  }
+}
+
+defineEmits(['updateValue'])
+
+</script>
+
+<template>
+  <div>
+    <v-text-field
+        type="text"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :readonly="readonly"
+        :error-messages="errorMessages"
+        :rules="rules"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        prepend-inner-icon="mdi mdi-upload-circle"
+        :append-icon="appendIcon"
+        :prepend-icon="prependIcon"
+        :append-inner-icon="appendInnerIcon"
+        @update:modelValue="$emit('updateValue')"
+        @click:prepend-inner="onFileClick"
+    >
+
+    </v-text-field>
+
+    <input
+        :accept="accept"
+        ref="fileInput"
+        class="d-none"
+        type="file"
+        @change="onFileChanged"
+    >
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/index.ts

@@ -0,0 +1,5 @@
+import MediaField from "./components/MediaField.vue";
+
+export {
+    MediaField
+}