Skip to content
This repository was archived by the owner on Mar 31, 2023. It is now read-only.

Add vite #44

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add vite #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>Sakai Vue</title>
<link id="theme-link" rel="stylesheet" href="/themes/lara-light-indigo/theme.css">
</head>

<body>
<div id="app">
<div class="preloader">
<div class="preloader-content">
</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>

</html>
16 changes: 9 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,24 @@
},
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vitejs/plugin-vue": "^3.1.2",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.45.0",
"sass-loader": "^8.0.2"
"sass-loader": "^8.0.2",
"vite": "^3.0.9"
},
"dependencies": {
"chart.js": "3.3.2",
Expand All @@ -31,7 +33,7 @@
"primeicons": "^5.0.0",
"primevue": "^3.12.2",
"prismjs": "1.9.0",
"vue": "3.2.9",
"vue": "^3.2.41",
"vue-router": "^4.0.0-0"
}
}
}
25 changes: 0 additions & 25 deletions public/index.html
View file
Open in desktop

This file was deleted.

68 changes: 34 additions & 34 deletions src/AppConfig.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,22 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue', false)">
<img class="block" src="images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
<img class="block" src="/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple', false)">
<img class="block" src="images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
<img class="block" src="/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
<img class="block" src="images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
<img class="block" src="/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
<img class="block" src="images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
<img class="block" src="/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
</button>
</div>
</div>
Expand All @@ -69,22 +69,22 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo', false)">
<img class="block" src="images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
<img class="block" src="/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple', false)">
<img class="block" src="images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
<img class="block" src="/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
<img class="block" src="images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
<img class="block" src="/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
<img class="block" src="images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
<img class="block" src="/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
</button>
</div>
</div>
Expand All @@ -93,22 +93,22 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo', false)">
<img class="block" src="images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
<img class="block" src="/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple', false)">
<img class="block" src="images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
<img class="block" src="/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
<img class="block" src="images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
<img class="block" src="/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
<img class="block" src="images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
<img class="block" src="/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
</button>
</div>
</div>
Expand All @@ -117,7 +117,7 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light', false)">
<img class="block" src="images/themes/tailwind-light.png" alt="Tailwind Light"/>
<img class="block" src="/images/themes/tailwind-light.png" alt="Tailwind Light"/>
</button>
</div>
</div>
Expand All @@ -126,7 +126,7 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'fluent-light', false)">
<img class="block" src="images/themes/fluent-light.png" alt="Fluent Light"/>
<img class="block" src="/images/themes/fluent-light.png" alt="Fluent Light"/>
</button>
</div>
</div>
Expand All @@ -135,42 +135,42 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo', false)">
<img class="block" src="images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
<img class="block" src="/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue', false)">
<img class="block" src="images/themes/lara-light-blue.png" alt="Lara Light Blue" />
<img class="block" src="/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple', false)">
<img class="block" src="images/themes/lara-light-purple.png" alt="Lara Light Purple" />
<img class="block" src="/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal', false)">
<img class="block" src="images/themes/lara-light-teal.png" alt="Lara Light Teal" />
<img class="block" src="/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
<img class="block" src="images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
<img class="block" src="/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
<img class="block" src="images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
<img class="block" src="/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
<img class="block" src="images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
<img class="block" src="/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
<img class="block" src="images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
<img class="block" src="/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button>
</div>
</div>
Expand All @@ -179,62 +179,62 @@
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-blue', false)">
<img class="block" src="images/themes/saga-blue.png" alt="Saga Blue" />
<img class="block" src="/images/themes/saga-blue.png" alt="Saga Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-green', false)">
<img class="block" src="images/themes/saga-green.png" alt="Saga Green" />
<img class="block" src="/images/themes/saga-green.png" alt="Saga Green" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-orange', false)">
<img class="block" src="images/themes/saga-orange.png" alt="Saga Orange" />
<img class="block" src="/images/themes/saga-orange.png" alt="Saga Orange" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-purple', false)">
<img class="block" src="images/themes/saga-purple.png" alt="Saga Purple" />
<img class="block" src="/images/themes/saga-purple.png" alt="Saga Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
<img class="block" src="images/themes/vela-blue.png" alt="Vela Blue" />
<img class="block" src="/images/themes/vela-blue.png" alt="Vela Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
<img class="block" src="images/themes/vela-green.png" alt="Vela Green" />
<img class="block" src="/images/themes/vela-green.png" alt="Vela Green" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
<img class="block" src="images/themes/vela-orange.png" alt="Vela Orange" />
<img class="block" src="/images/themes/vela-orange.png" alt="Vela Orange" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
<img class="block" src="images/themes/vela-purple.png" alt="Vela Purple" />
<img class="block" src="/images/themes/vela-purple.png" alt="Vela Purple" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
<img class="block" src="images/themes/arya-blue.png" alt="Arya Blue" />
<img class="block" src="/images/themes/arya-blue.png" alt="Arya Blue" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
<img class="block" src="images/themes/arya-green.png" alt="Arya Green" />
<img class="block" src="/images/themes/arya-green.png" alt="Arya Green" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
<img class="block" src="images/themes/arya-orange.png" alt="Arya Orange" />
<img class="block" src="/images/themes/arya-orange.png" alt="Arya Orange" />
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
<img class="block" src="images/themes/arya-purple.png" alt="Arya Purple" />
<img class="block" src="/images/themes/arya-purple.png" alt="Arya Purple" />
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/AppMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</template>

<script>
import AppSubmenu from './AppSubmenu';
import AppSubmenu from './AppSubmenu.vue';

export default {
props: {
Expand Down
16 changes: 8 additions & 8 deletions src/components/BlocksDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
<img src="/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>
</BlockViewer>
Expand Down Expand Up @@ -322,10 +322,10 @@
</div>
</BlockViewer>

<BlockViewer header="Sign-In" :code="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
<BlockViewer header="Sign-In" :code="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
Expand Down Expand Up @@ -401,7 +401,7 @@
</div>
</BlockViewer>

<BlockViewer header="Card" :code="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
<BlockViewer header="Card" :code="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
<div class="surface-card p-4 shadow-2 border-round">
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
Expand All @@ -423,13 +423,13 @@ export default {
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<Button label="Learn More" type="button" class="mr-3 p-button-raised"></Button>
<Button label="Live Demo" type="button" class="p-button-outlined"></Button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
<img src="/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
</div>
</div>`,
block2: `
Expand Down Expand Up @@ -727,7 +727,7 @@ export default {
block8: `
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
Expand Down
Loading