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

Updated

Browse Source
This commit is contained in:
Furkan Sezis
2023-07-24 13:16:26 +03:00
parent 4f74396cde
commit 41192f3e31
127 changed files with 535 additions and 226930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/pages/Crud.vue
View File

@@ -313,6 +313,4 @@ const initFilters = () => {
</div>
</template>
<style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss';
</style>
<style scoped lang="scss"></style>

2
src/views/pages/auth/Login.vue
View File

@@ -30,7 +30,7 @@ const logoUrl = computed(() => {
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-30rem mb-5" style="padding: 1rem" v-model="email" />
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem"></Password>
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-3" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
<div class="flex align-items-center justify-content-between mb-5 gap-5">
<div class="flex align-items-center">

4
src/views/uikit/List.vue
View File

@@ -148,7 +148,3 @@ const onSortChange = (event) => {
</div>
</div>
</template>
<style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss';
</style>

35
src/views/uikit/Media.vue
View File

@@ -57,22 +57,20 @@ onMounted(() => {
<h5>Carousel</h5>
<Carousel :value="products" :numVisible="3" :numScroll="3" :circular="false" :responsiveOptions="carouselResponsiveOptions">
<template #item="product">
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">
{{ product.data.name }}
</h4>
<h6 class="mt-0 mb-3">${{ product.data.price }}</h6>
<span :class="'product-badge status-' + product.data.inventoryStatus.toLowerCase()">{{ product.data.inventoryStatus }}</span>
<div class="car-buttons mt-5">
<Button type="button" class="p-button p-button-rounded mr-2" icon="pi pi-search"></Button>
<Button type="button" class="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></Button>
<Button type="button" class="p-button-help p-button-rounded" icon="pi pi-cog"></Button>
</div>
<div class="border-round m-2 text-center p-2" style="border: 1px solid var(--surface-d)">
<div class="my-5">
<img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
</div>
<div>
<h5 class="mb-1">
{{ product.data.name }}
</h5>
<h6 class="mt-0 mb-3">${{ product.data.price }}</h6>
<Badge :class="'product-badge status-' + product.data.inventoryStatus.toLowerCase()">{{ product.data.inventoryStatus }}</Badge>
<div class="my-5">
<Button icon="pi pi-search" class="mr-2 p-button-rounded"></Button>
<Button icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></Button>
<Button icon="pi pi-cog" class="p-button-rounded p-button-info"></Button>
</div>
</div>
</div>
@@ -105,8 +103,3 @@ onMounted(() => {
</div>
</div>
</template>
<style lang="scss" scoped>
@import '@/assets/demo/styles/badges.scss';
@import '@/assets/demo/styles/items.scss';
</style>

2
src/views/uikit/Table.vue
View File

@@ -370,8 +370,6 @@ const calculateCustomerTotal = (name) => {
</template>
<style scoped lang="scss">
@import '@/assets/demo/styles/badges.scss';
::v-deep(.p-datatable-frozen-tbody) {
font-weight: bold;
}

61
src/views/utilities/Blocks.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref } from 'vue';
const block1 = ref(`<div class="grid grid-nogutter surface-section text-800">
const block1 = ref(` <div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
@@ -14,8 +14,9 @@ const block1 = ref(`<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 overflow-hidden">
<img src="/demo/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>`);
const block2 = ref(`<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
</div>`);
const block2 = ref(` <div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
<span class="text-blue-600">Many Solutions</span>
@@ -65,9 +66,9 @@ const block2 = ref(`<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-c
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
</div>
</div>
</div>`);
</div>`);
const block3 = ref(`<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
const block3 = ref(` <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
@@ -181,18 +182,18 @@ const block3 = ref(`<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
</div>
</div>
</div>
</div>`);
</div>`);
const block4 = ref(`<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
const block4 = ref(` <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
<Button label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></Button>
</div>
</div>`);
</div>`);
const block5 = ref(`<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
const block5 = ref(` <div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
@@ -203,9 +204,9 @@ const block5 = ref(`<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-c
<a v-ripple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150 p-ripple" style="width:2rem; height: 2rem">
<i class="pi pi-times"></i>
</a>
</div>`);
</div>`);
const block6 = ref(`<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
const block6 = ref(` <div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
@@ -240,9 +241,9 @@ const block6 = ref(`<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<Button label="Save" icon="pi pi-check"></Button>
</div>
</div>
</div>`);
</div>`);
const block7 = ref(`<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
const block7 = ref(` <div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
<div class="surface-card shadow-2 p-3 border-round">
@@ -305,9 +306,9 @@ const block7 = ref(`<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
</div>
</div>
</div>
</div>`);
</div>`);
const block8 = ref(`<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
const block8 = ref(` <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="/demo/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>
@@ -332,9 +333,9 @@ const block8 = ref(`<div class="surface-card p-4 shadow-2 border-round w-full lg
<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
</div>
</div>`);
</div>`);
const block9 = ref(`<div class="surface-section">
const block9 = ref(` <div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
<ul class="list-none p-0 m-0">
@@ -380,20 +381,20 @@ const block9 = ref(`<div class="surface-section">
</div>
</li>
</ul>
</div>`);
</div>`);
const block10 = ref(`<div class="surface-card p-4 shadow-2 border-round">
const block10 = ref(` <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>
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
</div>`);
</div>`);
const checked = ref(false);
</script>
<template>
<div>
<BlockViewer header="Hero" :code="block1">
<BlockViewer header="Hero" :code="block1" free>
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center">
<section>
@@ -411,7 +412,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Feature" :code="block2">
<BlockViewer header="Feature" :code="block2" free>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
<div class="mb-3 font-bold text-2xl">
<span class="text-900">One Product, </span>
@@ -465,7 +466,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Pricing" :code="block3">
<BlockViewer header="Pricing" :code="block3" free>
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
@@ -583,7 +584,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Call to Action" :code="block4">
<BlockViewer header="Call to Action" :code="block4" free>
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i>&nbsp;POWERED BY DISCORD</div>
@@ -594,7 +595,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Banner" :code="block5" containerClass="surface-section py-8">
<BlockViewer header="Banner" :code="block5" containerClass="surface-section py-8" free>
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
<div class="font-bold mr-8">🔥 Hot Deals!</div>
<div class="align-items-center hidden lg:flex">
@@ -609,7 +610,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Page Heading" :code="block6">
<BlockViewer header="Page Heading" :code="block6" free>
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
@@ -648,7 +649,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Stats" :code="block7">
<BlockViewer header="Stats" :code="block7" free>
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
<div class="grid">
<div class="col-12 md:col-6 lg:col-3">
@@ -715,7 +716,7 @@ const checked = ref(false);
</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" free>
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
@@ -744,7 +745,7 @@ const checked = ref(false);
</div>
</BlockViewer>
<BlockViewer header="Description List" :code="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8">
<BlockViewer header="Description List" :code="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8" free>
<div class="surface-section">
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
@@ -792,7 +793,7 @@ const checked = ref(false);
</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" free>
<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>

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

@@ -7,15 +7,15 @@
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 text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
</p>
<CodeHighlight> npm install </CodeHighlight>
<pre class="app-code"><code> npm install </code></pre>
or
<p>or</p>
<CodeHighlight> yarn </CodeHighlight>
<pre class="app-code"><code> yarn </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>
<CodeHighlight> npm run dev </CodeHighlight>
<pre class="app-code"><code> npm run dev </code></pre>
<h5>Structure</h5>
<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>
@@ -45,7 +45,7 @@
<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/layout/_variables.scss</h6>
<CodeHighlight>
<pre class="app-code">
/* General */
<br />
$scale:14px; /* main font size */
@@ -53,7 +53,7 @@
$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>
</pre>
</div>
</template>

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

@@ -10,7 +10,7 @@ const filteredIcons = computed(() => {
});
onMounted(() => {
fetch('demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let data = d.icons.filter((value) => {
@@ -29,46 +29,46 @@ onMounted(() => {
<template>
<div class="card">
<h3>Icons</h3>
<h2>Icons</h2>
<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>
<h4>Download</h4>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<CodeHighlight> npm install primeicons --save </CodeHighlight>
<pre class="app-code"><code>npm install primeicons --save</code></pre>
<h5>Getting Started</h5>
<h4>Getting Started</h4>
<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>
<CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; &lt;i class="pi pi-times"&gt;&lt;/i&gt; </CodeHighlight>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i>
<h5>Size</h5>
<h4>Size</h4>
<p>Size of the icons can easily be changed using font-size property.</p>
<CodeHighlight> &lt;i class="pi pi-check"&gt;&lt;/i&gt; </CodeHighlight>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check"></i>
<CodeHighlight> &lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
<pre class="app-code"><code>&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h5>Spinning Animation</h5>
<h4>Spinning Animation</h4>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<CodeHighlight> &lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt; </CodeHighlight>
<pre class="app-code"><code>&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<h5>List of Icons</h5>
<h4>List of Icons</h4>
<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.
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" />