setup
This commit is contained in:
parent
a5808d2986
commit
692252cdb2
GPG key ID:
F1F29650D537C773
9 changed files with 148 additions and 157 deletions
6
.editorconfig
Normal file
6
.editorconfig
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[*.{svg,js,ts,vue,html,css,scss,sass,json,txt,md,yaml,yml}]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
charset = utf-8
|
||||
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
|
|
@ -2,6 +2,7 @@
|
|||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"tauri-apps.tauri-vscode",
|
||||
"rust-lang.rust-analyzer"
|
||||
"rust-lang.rust-analyzer",
|
||||
"editorconfig.editorconfig"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
24
package-lock.json
generated
24
package-lock.json
generated
|
|
@ -8,10 +8,12 @@
|
|||
"name": "simple-inventory-editor",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@primeuix/themes": "1.0.0",
|
||||
"@tauri-apps/api": "2.3.0",
|
||||
"@tauri-apps/plugin-opener": "2.2.6",
|
||||
"pinia": "3.0.1",
|
||||
"primevue": "4.3.1",
|
||||
"uuid": "11.1.0",
|
||||
"vue": "3.5.13",
|
||||
"vue-router": "4.5.0"
|
||||
},
|
||||
|
|
@ -833,6 +835,15 @@
|
|||
"@primeuix/styled": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@primeuix/themes": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.0.0.tgz",
|
||||
"integrity": "sha512-fxUgcAP9H6FeytbE8c4QvRt8aBnoyZJqvtnnVwHT8PHr1dNSnC1nYKGrXpebcx3SpNy9Hp9oVidGsl6u61+pXQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@primeuix/styled": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@primeuix/utils": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.1.tgz",
|
||||
|
|
@ -2689,6 +2700,19 @@
|
|||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
|
||||
"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist/esm/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@
|
|||
"tauri": "tauri"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primeuix/themes": "1.0.0",
|
||||
"@tauri-apps/api": "2.3.0",
|
||||
"@tauri-apps/plugin-opener": "2.2.6",
|
||||
"pinia": "3.0.1",
|
||||
"primevue": "4.3.1",
|
||||
"uuid": "11.1.0",
|
||||
"vue": "3.5.13",
|
||||
"vue-router": "4.5.0"
|
||||
},
|
||||
|
|
|
|||
163
src/App.vue
163
src/App.vue
|
|
@ -1,160 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
const greetMsg = ref("");
|
||||
const name = ref("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
greetMsg.value = await invoke("greet", { name: name.value });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container">
|
||||
<h1>Welcome to Tauri + Vue</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
|
||||
|
||||
<form class="row" @submit.prevent="greet">
|
||||
<input id="greet-input" v-model="name" placeholder="Enter a name..." />
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{{ greetMsg }}</p>
|
||||
</main>
|
||||
<template lang="pug">
|
||||
main
|
||||
router-view(
|
||||
v-slot='{ Component }'
|
||||
)
|
||||
Transition
|
||||
component(
|
||||
:id='routeId'
|
||||
:is='Component'
|
||||
)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #249b73);
|
||||
}
|
||||
<style lang="sass">
|
||||
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 496 B |
26
src/main.ts
26
src/main.ts
|
|
@ -1,4 +1,24 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import Aura from '@primeuix/themes/aura'
|
||||
import PrimeVue from 'primevue/config'
|
||||
|
||||
createApp(App).mount("#app");
|
||||
import { router } from './router'
|
||||
import App from './App.vue'
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(App)
|
||||
|
||||
app
|
||||
.use(router)
|
||||
.use(pinia)
|
||||
.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
darkModeSelector: 'system',
|
||||
cssLayer: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
.mount('#app')
|
||||
|
|
|
|||
12
src/router.ts
Normal file
12
src/router.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
|
||||
import Editor from './views/Editor.vue'
|
||||
|
||||
export const routes = [
|
||||
{ path: '/', component: Editor },
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes,
|
||||
})
|
||||
68
src/views/Editor.vue
Normal file
68
src/views/Editor.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import DataTable from 'primevue/datatable'
|
||||
import Column from 'primevue/column'
|
||||
import Image from 'primevue/image'
|
||||
|
||||
const sampleData = ref([
|
||||
{
|
||||
id: 'abc123',
|
||||
name: 'test a',
|
||||
category: 'type a',
|
||||
quantity: 5,
|
||||
},
|
||||
{
|
||||
id: 'def456',
|
||||
name: 'test b',
|
||||
category: 'type a',
|
||||
quantity: 10,
|
||||
},
|
||||
{
|
||||
id: 'ghi789',
|
||||
name: 'test c',
|
||||
category: 'type b',
|
||||
quantity: 2,
|
||||
image: {
|
||||
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Loup_du_Canada_%28Canis_lupus_mackenzii%29.JPG/1280px-Loup_du_Canada_%28Canis_lupus_mackenzii%29.JPG',
|
||||
alt: 'Loup du Canada',
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const sampleFields = ref([
|
||||
{ field: 'name', header: 'Name', type: 'text' },
|
||||
{ field: 'category', header: 'Category', type: 'text' },
|
||||
{ field: 'quantity', header: 'Quantity', type: 'text' },
|
||||
{ field: 'image', header: 'Image', type: 'image' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template lang="pug">
|
||||
DataTable(:value='sampleData' tableStyle='min-width: 50rem')
|
||||
Column(v-for='col of sampleFields' :key='col.field' :field='col.field' :header='col.header')
|
||||
template(
|
||||
#body='slotProps'
|
||||
v-if='col.type === "image"'
|
||||
)
|
||||
Image(
|
||||
v-if='slotProps.data.image'
|
||||
:src='slotProps.data.image.src'
|
||||
:alt='slotProps.data.image.alt'
|
||||
preview
|
||||
)
|
||||
span(
|
||||
v-else
|
||||
) No image
|
||||
template(
|
||||
#body='slotProps'
|
||||
v-else
|
||||
)
|
||||
span {{ slotProps.data[col.field] }}
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.p-image
|
||||
img
|
||||
max-width: 16rem
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue