mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-21 07:16:15 -04:00
feat: updated memo
This commit is contained in:
parent
0a4abde23d
commit
29c221a8f5
6 changed files with 63 additions and 44 deletions
|
@ -13,27 +13,32 @@
|
|||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Drag & drop a file here</p>
|
||||
<p class="or">or</p>
|
||||
<v-btn depressed @click="manualUploadClicked">select a file</v-btn>
|
||||
<p class="or">
|
||||
or
|
||||
</p>
|
||||
<v-btn depressed @click="manualUploadClicked">
|
||||
select a file
|
||||
</v-btn>
|
||||
<input ref="uploadInput" type="file" hidden @change="(e) => handleFiles(e.target.files[0])">
|
||||
|
||||
<div v-if="allowUrl">
|
||||
<p class="or">or</p>
|
||||
<p class="or">
|
||||
or
|
||||
</p>
|
||||
<v-text-field
|
||||
ref="urlInput"
|
||||
@click:append="urlFilled(url)"
|
||||
@keypress.enter="urlFilled(url)"
|
||||
v-model="url"
|
||||
append-icon="fa-arrow-right"
|
||||
dense
|
||||
label="Paste the file url"
|
||||
outlined
|
||||
:error-messages="urlErrors"
|
||||
@click:append="urlFilled(url)"
|
||||
@keypress.enter="urlFilled(url)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,9 +46,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as axios from "axios";
|
||||
import * as axios from 'axios'
|
||||
export default {
|
||||
name: "FileUploader",
|
||||
name: 'FileUploader',
|
||||
props: {
|
||||
allowUrl: {
|
||||
type: Boolean,
|
||||
|
@ -61,50 +66,50 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
imageDropped(e) {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
if (e.dataTransfer.items.length > 0) {
|
||||
const item = e.dataTransfer.items[0];
|
||||
const item = e.dataTransfer.items[0]
|
||||
switch (item.kind) {
|
||||
case 'string':
|
||||
item.getAsString(url => this.urlFilled(url));
|
||||
break;
|
||||
item.getAsString(url => this.urlFilled(url))
|
||||
break
|
||||
case 'file':
|
||||
this.handleFiles(item.getAsFile());
|
||||
break;
|
||||
this.handleFiles(item.getAsFile())
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
dragEnter() {
|
||||
this.dragEnterCounter++;
|
||||
this.dragging = true;
|
||||
this.dragEnterCounter++
|
||||
this.dragging = true
|
||||
},
|
||||
dragLeave() {
|
||||
if (--this.dragEnterCounter <= 0) {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
}
|
||||
},
|
||||
async urlFilled(url) {
|
||||
if (url && url.length > 0) {
|
||||
this.loading = true;
|
||||
this.loading = true
|
||||
try {
|
||||
const {data, headers} = await axios.get(url);
|
||||
const name = url.split('/').pop();
|
||||
const {data, headers} = await axios.get(url)
|
||||
const name = url.split('/').pop()
|
||||
const file = new File([data], name, {type: headers['content-type']})
|
||||
this.handleFiles(file);
|
||||
this.handleFiles(file)
|
||||
} catch (ignored) {
|
||||
this.urlErrors = 'Incorrect url'
|
||||
}
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
dragEnd() {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
},
|
||||
dragExit() {
|
||||
this.dragging = false;
|
||||
this.dragging = false
|
||||
},
|
||||
handleFiles(file) {
|
||||
if (!file) return;
|
||||
if (!file) { return }
|
||||
this.$emit('input', file)
|
||||
},
|
||||
manualUploadClicked() {
|
||||
|
|
|
@ -5,7 +5,15 @@
|
|||
Warning: le style/aspect est toujours en wip, so focus on content <br><br>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6" lg="4" v-for="item in items" :key="item.section" class="memo-section">
|
||||
<v-col
|
||||
v-for="item in items"
|
||||
:key="item.section"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
class="memo-section"
|
||||
>
|
||||
<v-card class="mb-5">
|
||||
<v-card-title>{{ item.section }}</v-card-title>
|
||||
<v-card-text>
|
||||
|
|
36
package-lock.json
generated
36
package-lock.json
generated
|
@ -6457,9 +6457,9 @@
|
|||
}
|
||||
},
|
||||
"eslint": {
|
||||
"version": "7.21.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.21.0.tgz",
|
||||
"integrity": "sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==",
|
||||
"version": "7.22.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
|
||||
"integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "7.12.11",
|
||||
|
@ -6479,7 +6479,7 @@
|
|||
"file-entry-cache": "^6.0.1",
|
||||
"functional-red-black-tree": "^1.0.1",
|
||||
"glob-parent": "^5.0.0",
|
||||
"globals": "^12.1.0",
|
||||
"globals": "^13.6.0",
|
||||
"ignore": "^4.0.6",
|
||||
"import-fresh": "^3.0.0",
|
||||
"imurmurhash": "^0.1.4",
|
||||
|
@ -6487,7 +6487,7 @@
|
|||
"js-yaml": "^3.13.1",
|
||||
"json-stable-stringify-without-jsonify": "^1.0.1",
|
||||
"levn": "^0.4.1",
|
||||
"lodash": "^4.17.20",
|
||||
"lodash": "^4.17.21",
|
||||
"minimatch": "^3.0.4",
|
||||
"natural-compare": "^1.4.0",
|
||||
"optionator": "^0.9.1",
|
||||
|
@ -6610,12 +6610,12 @@
|
|||
}
|
||||
},
|
||||
"globals": {
|
||||
"version": "12.4.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
|
||||
"integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
|
||||
"version": "13.6.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.6.0.tgz",
|
||||
"integrity": "sha512-YFKCX0SiPg7l5oKYCJ2zZGxcXprVXHcSnVuvzrT3oSENQonVLqM5pf9fN5dLGZGyCjhw8TN8Btwe/jKnZ0pjvQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"type-fest": "^0.8.1"
|
||||
"type-fest": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
|
@ -6678,6 +6678,12 @@
|
|||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"type-fest": {
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
|
||||
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -15043,9 +15049,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"ajv": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-7.1.1.tgz",
|
||||
"integrity": "sha512-ga/aqDYnUy/o7vbsRTFhhTsNeXiYb5JWDIcRIeZfwRNCefwjNTVYCGdGSUrEmiu3yDK3vFvNbgJxvrQW4JXrYQ==",
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.1.tgz",
|
||||
"integrity": "sha512-+nu0HDv7kNSOua9apAVc979qd932rrZeb3WOvoiD31A/p1mIE5/9bN2027pE2rOPYEdS3UHzsvof4hY+lM9/WQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
|
@ -15940,9 +15946,9 @@
|
|||
"optional": true
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
|
||||
"integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
|
||||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||
"dev": true
|
||||
},
|
||||
"v8-to-istanbul": {
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^26.5.0",
|
||||
"eslint": "^7.20.0",
|
||||
"eslint": "^7.22.0",
|
||||
"eslint-config-prettier": "^6.12.0",
|
||||
"eslint-plugin-nuxt": "^1.0.0",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<ToolWrapper :config="config()" no-card="true">
|
||||
<FileUploader v-model="file"/>
|
||||
<FileUploader v-model="file" />
|
||||
|
||||
<div v-if="base64 || loading" class="mt-10">
|
||||
<v-card>
|
||||
|
|
|
@ -37,6 +37,7 @@ en:
|
|||
- text: Tip n°3 (avec du code !)
|
||||
code: rm -rf / --no-preserve-root
|
||||
- text: Tip n°4
|
||||
code: "multiline\ncode sample"
|
||||
|
||||
- section: Titre de la section 3
|
||||
items:
|
||||
|
@ -49,7 +50,6 @@ en:
|
|||
code: rm -rf / --no-preserve-root
|
||||
subtitle: Un super sous titre, yeah
|
||||
|
||||
|
||||
- section: Titre de la section 4
|
||||
items:
|
||||
- text: Tip n°1
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue