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