Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add doc and fixed icons, remove prism

Browse Source
This commit is contained in:
Cagatay Civici
2022-11-30 22:06:45 +03:00
parent 77815b43ce
commit 2f782d20c2
9 changed files with 81 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -12,7 +12,6 @@
"primeflex": "^3.2.1",
"primeicons": "^6.0.1",
"primevue": "^3.18.1",
"prismjs": "^1.29.0",
"vue": "^3.2.41",
"vue-router": "^4.1.5"
},

56
src/assets/demo/styles/documentation.scss
View File

@@ -1,56 +0,0 @@
pre[class*='language-'] {
background-color: var(--surface-ground) !important;
border-radius: var(--border-radius);
&:before,
&:after {
display: none !important;
}
code {
border-left: 0px solid var(--surface-border) !important;
box-shadow: none !important;
background: var(--surface-ground) !important;
color: var(--text-color);
font-size: 14px;
}
.token {
&.tag,
&.keyword {
color: #2196f3 !important;
}
&.attr-name,
&.attr-string {
color: #2196f3 !important;
}
&.attr-value {
color: #4caf50 !important;
}
&.punctuation {
color: var(--text-color);
}
&.operator,
&.string {
background: transparent;
}
}
}
i:not([class~='pi']) {
/* background-color: transparent; */
color: #2196f3;
font-family: Monaco, courier, monospace;
font-style: normal;
font-size: 12px;
font-weight: 500;
padding: 0 4px;
letter-spacing: 0.5px;
font-weight: 600;
margin: 0 2px;
display: inline-flex;
}

1
src/assets/layout/styles/layout/_main.scss
View File

@@ -20,7 +20,6 @@ body {
a {
text-decoration: none;
/* color: var(--primary-color); */
}
.layout-wrapper {

3
src/assets/styles.scss
View File

@@ -8,9 +8,6 @@ $gutter: 1rem; //for primeflex grid system
@import 'primeflex/primeflex.scss';
@import 'primeicons/primeicons.css';
/* Prismjs */
@import 'prismjs/themes/prism-coy.css';
/* Demos */
@import '@/assets/demo/styles/flags/flags.css';
@import '@/assets/demo/styles/badges.scss';

16
src/components/CodeHighlight.js
View File

@@ -1,16 +0,0 @@
import Prism from 'prismjs';
const CodeHighlight = {
beforeMount(el, binding) {
const modifiers = binding.modifiers;
const value = binding.value;
if (modifiers.script || value === 'script') el.className = 'language-javascript';
else if (modifiers.css || value === 'css') el.className = 'language-css';
else el.className = 'language-markup';
Prism.highlightElement(el.children[0]);
}
};
export default CodeHighlight;

4
src/components/CodeHighlight.vue Normal file
View File

@@ -0,0 +1,4 @@
<template>
<pre class="border-round surface-ground text-900 p-5 overflow-auto">
<code class="-mt-4 p-0 line-height-3 block" style="font-family: monaco, Consolas, 'Lucida Console', monospace"><slot></slot></code></pre>
</template>

8
src/main.js
View File

@@ -100,7 +100,7 @@ import TreeTable from 'primevue/treetable';
import TriStateCheckbox from 'primevue/tristatecheckbox';
import VirtualScroller from 'primevue/virtualscroller';
import CodeHighlight from '@/components/CodeHighlight';
import CodeHighlight from '@/components/CodeHighlight.vue';
import BlockViewer from '@/components/BlockViewer.vue';
import '@/assets/styles.scss';
@@ -117,7 +117,9 @@ app.directive('tooltip', Tooltip);
app.directive('badge', BadgeDirective);
app.directive('ripple', Ripple);
app.directive('styleclass', StyleClass);
app.directive('code', CodeHighlight);
app.component('CodeHighlight', CodeHighlight);
app.component('BlockViewer', BlockViewer);
app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab);
@@ -209,6 +211,4 @@ app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('VirtualScroller', VirtualScroller);
app.component('BlockViewer', BlockViewer);
app.mount('#app');

120
src/views/utilities/Documentation.vue
View File

@@ -7,88 +7,86 @@
<h5>Getting Started</h5>
<p>
Sakai is an application template for Vue based on the <a href="https://cli.vuejs.org/" class="font-medium">Vue CLI</a> that provides out-of-the-box standard tooling for Vue projects. To get started, clone the
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue projects. To get started, clone the
<a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn.
</p>
<pre v-code.script><code>
<CodeHighlight>
npm install
</code></pre>
</CodeHighlight>
or
<pre v-code.script><code>
<CodeHighlight>
yarn
</CodeHighlight>
</code></pre>
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:8080/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
<pre v-code.script><code>
npm run serve
</code></pre>
<h5>Vue CLI Scripts</h5>
<p>Following commands are derived from create-app-app.</p>
<pre v-code.script><code>
"npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.
</code></pre>
<CodeHighlight>
npm run dev
</CodeHighlight>
<h5>Structure</h5>
<p>
Sakai consists of 2 main parts; the application layout and the resources. <i>App.vue</i> inside src folder is the main component containing the template for the base layout whereas required resources such as SASS structure for the
layout are placed inside the <b>src/assets/</b> folder.
</p>
<h5>Layout Components</h5>
<p>
Main layout is the template of the <i>App.vue</i>, it is divided into a couple of child components such as topbar, menu and footer. Here is template of the <i>App.vue</i> component that implements the logic such as menu state,
layout modes and so on.
</p>
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
<ul class="line-height-3">
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
<li><span class="text-primary font-medium">public/layout</span>: Assets used in layout</li>
<li><span class="text-primary font-medium">src/assets/demo</span>: Styles used in demos</li>
<li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
</ul>
<h5>Menu</h5>
<p>
Menu is a separate component defined in <i>AppMenu.vue</i> file based on PrimeVue MenuModel API. In order to define the menuitems, navigate to data section of <i>App.vue</i> file and define your own model as a nested structure
using the <i>menu</i> property.
</p>
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
<h5>Dependencies</h5>
<p>Dependencies of Sakai are listed below and needs to be added to package.json.</p>
<pre v-code.script>
<code>
{
"primevue": "~3.11.0",
"primeicons": "~5.0.0",
"primeflex": "~3.1.2",
}
</code></pre>
<h5>Integration with Existing Vite Applications</h5>
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
<div class="video-container">
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
</div>
<h5>PrimeVue Theme</h5>
<p>Sakai uses the free Saga, Arya and Vela themes which are distributed within PrimeVue, however it can be used with any PrimeVue theme as well such as material, tailwind and bootstrap.</p>
<p>
Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.
</p>
<h5>SASS Variables</h5>
<p>In case you'd like to customize the layout variables, open <i>_variables.scss</i> file under src/layout folder. Saving the changes will be reflected instantly at your browser.</p>
<p>
In case you&apos;d like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.
</p>
<h6>src/assets/_variables.scss</h6>
<pre v-code.css>
<code>
$fontSize:1rem;
$borderRadius:12px;
$transitionDuration:.2s;
</code></pre>
<h6>src/layout/_variables.scss</h6>
<CodeHighlight>
/* General */
<br>
$scale:14px; /* main font size */
<br>
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
<br>
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
</CodeHighlight>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import '@/assets/demo/styles/documentation.scss';
</style>
<style lang="scss" scoped>
@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
</style>

67
src/views/utilities/Icons.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ref, reactive, onMounted, computed } from 'vue';
import { useLayout } from '@/layout/composables/layout';
const { contextPath } = useLayout();
@@ -16,8 +16,7 @@ onMounted(() => {
fetch(contextPath + 'demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
let data = d.icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
@@ -35,24 +34,22 @@ onMounted(() => {
<div>
<div class="card">
<h3>Icons</h3>
<p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium">PrimeTek</a>.</p>
<p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.</p>
<h5>Download</h5>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<pre v-code><code>
<CodeHighlight>
npm install primeicons --save
</code></pre>
</CodeHighlight>
<h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<pre v-code><code>
<CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</code></pre>
</CodeHighlight>
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i>
@@ -60,62 +57,28 @@ npm install primeicons --save
<h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p>
<pre v-code><code>
<CodeHighlight>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</code></pre>
</CodeHighlight>
<i class="pi pi-check"></i>
<pre v-code><code>
<CodeHighlight>
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
</code></pre>
</CodeHighlight>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h5>Spinning Animation</h5>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<pre v-code><code>
<CodeHighlight>
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
</code></pre>
</CodeHighlight>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h5>Constants</h5>
<p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
<pre v-code><code>
&lt;Menu :model="items" /&gt;
</code></pre>
<pre v-code.script><code>
import {PrimeIcons} from 'primevue/api';
export default {
data() {
return {
items: [
{
label: 'Update',
icon: PrimeIcons.REFRESH,
to: '/update'
},
{
label: 'Delete',
icon: PrimeIcons.TIMES,
to: '/delete'
}
]
}
}
}
</code></pre>
<h5>List of Icons</h5>
<p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium">request new icons</a> at the issue tracker.</p>
<p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue tracker.</p>
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
@@ -130,8 +93,6 @@ data() {
</template>
<style lang="scss" scoped>
@import '@/assets/demo/styles/documentation.scss';
.icons-list {
i {
color: var(--text-color-secondary);