Migrate to Vue 3.2 and vite
This commit is contained in:
parent
913ec2f69c
commit
7be11d211f
@ -1,4 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="index.ts"></script>
|
||||
<script type="module" src="/src/index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
index.ts
7
index.ts
@ -1,7 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import App from './App';
|
||||
|
||||
let app = new Vue({
|
||||
render: (h) => h(App),
|
||||
}).$mount('#app');
|
||||
19
package.json
19
package.json
@ -7,13 +7,20 @@
|
||||
"jsbarcode": "^3.11.0",
|
||||
"number-to-words": "^1.2.4",
|
||||
"qrcode": "^1.4.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-hot-reload-api": "^2.3.4",
|
||||
"vue-property-decorator": "^8.4.0"
|
||||
"vue": "^3.2.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/component-compiler-utils": "^3.1.1",
|
||||
"typescript": "^3.8.3",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"@types/number-to-words": "^1.2.1",
|
||||
"@types/qrcode": "^1.4.1",
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.6.11",
|
||||
"vue-tsc": "^0.28.8"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"serve": "vite preview"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,23 +5,27 @@
|
||||
:asset="asset"
|
||||
:key="asset.id"
|
||||
>
|
||||
<component :is="asset.category.name + 'LabelText'" :asset="asset" />
|
||||
<component
|
||||
:is="component(asset.category.name)"
|
||||
:asset="asset"
|
||||
></component>
|
||||
</AssetLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
|
||||
<script setup lang="ts">
|
||||
import snipeit from './snipeit';
|
||||
import AssetLabel from './AssetLabel.vue';
|
||||
import ComputersLabelText from './ComputersLabelText.vue';
|
||||
|
||||
import assets from './computers.json';
|
||||
import assets_raw from '/computers.json';
|
||||
const assets: { rows: [snipeit.Hardware]; total: number } = assets_raw;
|
||||
|
||||
@Component({ components: { AssetLabel, ComputersLabelText } })
|
||||
export default class App extends Vue {
|
||||
assets: { rows: [snipeit.Hardware]; total: number } = assets;
|
||||
function component(category: string) {
|
||||
switch (category) {
|
||||
case 'Computers':
|
||||
return ComputersLabelText;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -14,35 +14,36 @@
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { ref, Ref, onMounted, defineProps } from 'vue';
|
||||
import JsBarcode from 'jsbarcode';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import snipeit from './snipeit';
|
||||
|
||||
@Component
|
||||
export default class AssetLabel extends Vue {
|
||||
QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
|
||||
const QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
|
||||
|
||||
@Prop(Object) readonly asset: snipeit.Hardware;
|
||||
const props = defineProps<{
|
||||
asset: snipeit.Hardware;
|
||||
}>();
|
||||
|
||||
qrcode_dataURL: string | null = null;
|
||||
const qrcode_dataURL: Ref<string> = ref('');
|
||||
|
||||
async mounted() {
|
||||
this.qrcode_dataURL = await QRCode.toDataURL(
|
||||
this.QRCODE_BASE + this.asset.asset_tag,
|
||||
const barcode = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
qrcode_dataURL.value = await QRCode.toDataURL(
|
||||
QRCODE_BASE + props.asset.asset_tag,
|
||||
{
|
||||
margin: 0,
|
||||
}
|
||||
);
|
||||
|
||||
JsBarcode(this.$refs.barcode, this.asset.asset_tag, {
|
||||
JsBarcode(barcode.value, props.asset.asset_tag, {
|
||||
displayValue: false,
|
||||
margin: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -10,30 +10,32 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { computed, ComputedRef, defineProps } from 'vue';
|
||||
|
||||
import { toWords as numberToWords } from 'number-to-words';
|
||||
|
||||
import snipeit from './snipeit';
|
||||
|
||||
@Component
|
||||
export default class ComputersLabelText extends Vue {
|
||||
@Prop(Object) readonly asset: snipeit.Hardware;
|
||||
const props = defineProps<{
|
||||
asset: snipeit.Hardware;
|
||||
}>();
|
||||
|
||||
get emoji() {
|
||||
return this.asset.name.includes('Laptop')
|
||||
const emoji: ComputedRef<string> = computed(() => {
|
||||
return props.asset.name.includes('Laptop')
|
||||
? '💻'
|
||||
: this.asset.name.includes('Desktop')
|
||||
: props.asset.name.includes('Desktop')
|
||||
? '🖥'
|
||||
: '?';
|
||||
}
|
||||
get name() {
|
||||
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
|
||||
}
|
||||
});
|
||||
|
||||
getCustom(field) {
|
||||
return this.asset.custom_fields[field]?.value;
|
||||
}
|
||||
const name: ComputedRef<string> = computed(() => {
|
||||
const number = props.asset.name.match(/[0-9]+$/)?.[0];
|
||||
return numberToWords(number ?? '??').toUpperCase();
|
||||
});
|
||||
|
||||
function getCustom(field: string) {
|
||||
return props.asset.custom_fields[field]?.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
6
src/index.ts
Normal file
6
src/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import * as Vue from 'vue';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const app = Vue.createApp(App)
|
||||
.mount('#app');
|
||||
0
snipeit.d.ts → src/snipeit.d.ts
vendored
0
snipeit.d.ts → src/snipeit.d.ts
vendored
@ -1,8 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"target": "esnext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["esnext", "dom"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Reference in New Issue
Block a user