Skip to content
Snippets Groups Projects
Commit 953b8e28 authored by Anthony Gautreau's avatar Anthony Gautreau
Browse files

Build du composant plus "propre"

parent 7b07a048
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1033 additions and 725 deletions
.gitignore
+ 1
− 1
View file @ 953b8e28
.DS_Store .DS_Store
node_modules node_modules
/dist /dist
/oldtsconf
# local env files # local env files
.env.local .env.local
.env.*.local .env.*.local
......
README.md
+ 9
− 14
View file @ 953b8e28
...@@ -7,23 +7,18 @@ Cette bibliothèques à pour but de fournir un front Vue à la bibliothèques [u ...@@ -7,23 +7,18 @@ Cette bibliothèques à pour but de fournir un front Vue à la bibliothèques [u
1. Ajouter le registry npm d'unicaen : https://kverdaccio.unicaen.fr/ 1. Ajouter le registry npm d'unicaen : https://kverdaccio.unicaen.fr/
2. ``` 2. Assurez vous d'avoir Pinia et Vuetify d'instancié: [exemple](INSTANCIATION.md)
npm install pinia unicaen-vue-mail
``` 3. Utiliser le composant Mail
3. Instancier Pinia
```js
import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(pinia);
```
4. Utiliser le composant Mail
```js ```js
<script setup> <script setup>
import Mail from 'unicaen-vue-mail'; import Mail from 'unicaen-vue-mail';
</script> </script>
``` ```
```js ```js
<Mail :title="title" :mails="mails" :params="params" /> <template>
<Mail />
</template>
``` ```
## Outils associés ## Outils associés
......
doc/INSTANCIATION.md 0 → 100644
+ 50
− 0
View file @ 953b8e28
## Pinia
Instancier Pinia
```bash
npm install pinia
```
```js
import { createPinia } from 'pinia'
const pinia = createPinia();
app.use(pinia);
```
## Vuetify
Instancier Vuetify (+fontawesome)
```bash
npm install vuetify @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons
```
```js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, fa } from 'vuetify/iconsets/fa-svg'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas) // Include solid icons
library.add(far) // Include regular icons
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'fa',
aliases,
sets: {
fa,
},
},
defaults: {
VBtn: {
color: 'primary',
},
}
})
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(pinia)
```
\ No newline at end of file
env.d.ts 0 → 100644
+ 1
− 0
View file @ 953b8e28
/// <reference types="vite/client" />
index.html
+ 7
− 9
View file @ 953b8e28
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to Vuetify 3</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<script type="module" src="./sandbox/main.ts"></script>
</body>
</html> </html>
\ No newline at end of file
package-lock.json
+ 837
− 602
View file @ 953b8e28
This diff is collapsed.
package.json
+ 18
− 25
View file @ 953b8e28
...@@ -12,22 +12,13 @@ ...@@ -12,22 +12,13 @@
"dist" "dist"
], ],
"main": "./dist/unicaen-vue-mail.umd.cjs", "main": "./dist/unicaen-vue-mail.umd.cjs",
"module": "./dist/unicaen-vue-mail.js", "module": "./dist/unicaen-vue-mail.es.js",
"exports": { "types": "./dist/types/index.d.ts",
".": {
"import": "./dist/unicaen-vue-mail.js",
"require": "./dist/unicaen-vue-mail.umd.cjs"
},
"./dist/unicaen-vue-mail.css": {
"import": "./dist/unicaen-vue-mail.css",
"require": "./dist/unicaen-vue-mail.css"
}
},
"types": "./dist/main.d.ts",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vue-tsc --noEmit && vite build", "build": "vite build && npm run build:types",
"preview": "vite preview", "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types ",
"typecheck": "vue-tsc --project tsconfig.build-types.json --noEmit",
"publish": "npm publish --registry https://kverdaccio.unicaen.fr/", "publish": "npm publish --registry https://kverdaccio.unicaen.fr/",
"i-npm": "npm install --registry https://registry.npmjs.org/" "i-npm": "npm install --registry https://registry.npmjs.org/"
}, },
...@@ -35,32 +26,34 @@ ...@@ -35,32 +26,34 @@
"axios": "^1.6.8", "axios": "^1.6.8",
"moment": "^2.30.1", "moment": "^2.30.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"roboto-fontface": "*", "roboto-fontface": "^0.10.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vuetify": "^3.5.8" "vuetify": "^3.5.15"
}, },
"devDependencies": { "devDependencies": {
"@babel/types": "^7.24.0", "@babel/types": "^7.24.0",
"@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/vue-fontawesome": "^3.0.6", "@fortawesome/vue-fontawesome": "^3.0.6",
"@types/node": "^20.11.25", "@tsconfig/node16": "^16.1.3",
"@types/node": "^20.12.7",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"@vue/tsconfig": "^0.5.1",
"axios-mock-adapter": "^1.22.0", "axios-mock-adapter": "^1.22.0",
"rollup-plugin-typescript2": "^0.36.0", "rollup-plugin-typescript2": "^0.36.0",
"sass": "^1.71.1", "sass": "^1.75.0",
"serve": "^14.2.1", "serve": "^14.2.1",
"typescript": "^5.4.2", "typescript": "^5.4.5",
"unplugin-fonts": "^1.1.1", "unplugin-fonts": "^1.1.1",
"unplugin-vue-components": "^0.26.0", "unplugin-vue-components": "^0.26.0",
"unplugin-vue-router": "^0.8.5", "unplugin-vue-router": "^0.8.6",
"vite": "^5.1.5", "vite": "^5.2.8",
"vite-plugin-css-injected-by-js": "^3.5.0", "vite-plugin-css-injected-by-js": "^3.5.0",
"vite-plugin-dts": "^3.8.1", "vite-plugin-dts": "^3.8.1",
"vite-plugin-inspect": "^0.8.3", "vite-plugin-inspect": "^0.8.3",
"vite-plugin-vue-layouts": "^0.11.0", "vite-plugin-vue-layouts": "^0.11.0",
"vite-plugin-vuetify": "^2.0.3", "vite-plugin-vuetify": "^2.0.3",
"vue-tsc": "^2.0.6" "vue-tsc": "^2.0.13"
} }
} }
sandbox/App.vue 0 → 100644
+ 14
− 0
View file @ 953b8e28
<template>
<main>
<h1>Welcome to your your sandbox environment</h1>
<Mail />
</main>
</template>
<script setup lang="ts">
import Mail from '../src/components/Mail.vue'
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
sandbox/main.ts 0 → 100644
+ 39
− 0
View file @ 953b8e28
import 'vuetify/styles'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createVuetify } from 'vuetify'
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, fa } from 'vuetify/iconsets/fa-svg'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas) // Include needed solid icons
library.add(far) // Include needed regular icons
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'fa',
aliases,
sets: {
fa,
},
},
defaults: {
VBtn: {
color: 'primary',
},
}
})
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(pinia)
app.use(vuetify)
app.mount('#app')
\ No newline at end of file
src/App.vue
+ 5
− 8
View file @ 953b8e28
<template> <template>
<v-app> <main>
<v-container > <h1>Welcome to your your sandbox environment</h1>
<Mail <Mail />
/> </main>
</v-container>
</v-app>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Mail from './components/Mail.vue';
</script> </script>
\ No newline at end of file
src/components/MailAfficher.vue
+ 1
− 1
View file @ 953b8e28
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Mail } from '@/types' import type { Mail } from '@/types'
import { useMailsStore } from '@/stores/mails'; import { useMailsStore } from '@/stores/mails';
import moment from 'moment' import moment from 'moment'
......
src/components/TableMail.vue
+ 1
− 1
View file @ 953b8e28
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { Props } from '@/types'; import type { Props } from '@/types';
import TableHeader from './TableHeader.vue'; import TableHeader from './TableHeader.vue';
import MailAfficher from './MailAfficher.vue'; import MailAfficher from './MailAfficher.vue';
import { useMailsStore } from '@/stores/mails'; import { useMailsStore } from '@/stores/mails';
......
src/components/index.ts deleted 100644 → 0
+ 0
− 1
View file @ 7b07a048
export { default as Mail } from './Mail.vue'
\ No newline at end of file
src/components/main.ts deleted 100644 → 0
+ 0
− 10
View file @ 7b07a048
import type { App } from 'vue';
import { Mail} from "@/components";
export default {
install: (app: App) => {
app.component('Mail', Mail);
}
};
export { Mail };
\ No newline at end of file
src/index.ts 0 → 100644
+ 1
− 0
View file @ 953b8e28
export { default as Mail } from './components/Mail.vue'
\ No newline at end of file
src/plugins/mock.ts
+ 3
− 2
View file @ 953b8e28
import { AxiosInstance } from "axios";
import MockAdapter from "axios-mock-adapter"; import MockAdapter from "axios-mock-adapter";
import mockData from "@/MOCK_DATA.json"; import mockData from "@/MOCK_DATA.json";
import { Mail } from "@/types";
import moment from "moment"; import moment from "moment";
import type { AxiosInstance } from "axios";
import type { Mail } from "@/types";
export default { export default {
mocked(axiosClient: AxiosInstance) { mocked(axiosClient: AxiosInstance) {
console.log('Mocked') console.log('Mocked')
......
src/stores/mails.ts
+ 1
− 1
View file @ 953b8e28
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { ref } from 'vue' import { ref } from 'vue'
import { Mail } from '../types' import type { Mail } from '@/types'
import moment from 'moment' import moment from 'moment'
import axios from 'axios' import axios from 'axios'
import Mock from '@/plugins/mock' import Mock from '@/plugins/mock'
......
src/vite-env.d.ts deleted 100644 → 0
+ 0
− 7
View file @ 7b07a048
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
tsconfig.json
+ 36
− 35
View file @ 953b8e28
...@@ -36,3 +36,4 @@ ...@@ -36,3 +36,4 @@
"exclude": ["dist", "node_modules", "cypress"], "exclude": ["dist", "node_modules", "cypress"],
"references": [{ "path": "./tsconfig.node.json" }], "references": [{ "path": "./tsconfig.node.json" }],
} }
\ No newline at end of file
tsconfig.node.json
+ 9
− 8
View file @ 953b8e28
...@@ -7,3 +7,4 @@ ...@@ -7,3 +7,4 @@
}, },
"include": ["vite.config.mts"] "include": ["vite.config.mts"]
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment