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

Public folder changes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-16 11:23:35 +03:00
parent 0731a2b548
commit 68b0f0cf64
212 changed files with 4486 additions and 13384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/views/uikit/Button.vue
View File

@@ -90,13 +90,26 @@ const load = (index) => {
<div class="card">
<h5>Templating</h5>
<Button type="button" class="mr-2 mb-2 px-3">
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
</Button>
<Button type="button" class="p-button-outlined p-button-success mr-2 mb-2">
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
<span class="ml-2 text-bold">PrimeVue</span>
</Button>
<div class="flex flex-wrap gap-2">
<Button type="button" class="google">
<span class="flex align-items-center px-2 bg-purple-700 text-white">
<i className="pi pi-google"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
</Button>
<Button type="button" class="twitter">
<span class="flex align-items-center px-2 bg-blue-500 text-white">
<i className="pi pi-twitter"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
</Button>
<Button type="button" class="discord">
<span class="flex align-items-center px-2 bg-bluegray-800 text-white">
<i className="pi pi-discord"></i>
</span>
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
</Button>
</div>
</div>
</div>
@@ -171,3 +184,152 @@ const load = (index) => {
</div>
</div>
</template>
<style lang="scss" scoped>
.google {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--purple-700);
display: flex;
align-items: stretch;
padding: 0;
&:enabled:hover {
background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--purple-700);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-400);
}
}
.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--blue-500);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--blue-500);
}
&:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
}
.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
border-color: var(--bluegray-800);
padding: 0;
display: flex;
align-items: stretch;
&:enabled:hover {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: left bottom;
border-color: var(--bluegray-800);
}
&:focus {
box-shadow: 0 0 0 1px var(--purple-500);
}
}
.template-button .p-button.twitter {
background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--blue-500);
}
.template-button .p-button.twitter:hover {
background-position: left bottom;
}
.template-button .p-button.twitter i {
background-color: var(--blue-500);
}
.template-button .p-button.twitter:focus {
box-shadow: 0 0 0 1px var(--blue-200);
}
.template-button .p-button.slack {
background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--orange-500);
}
.template-button .p-button.slack:hover {
background-position: left bottom;
}
.template-button .p-button.slack i {
background-color: var(--orange-500);
}
.template-button .p-button.slack:focus {
box-shadow: 0 0 0 1px var(--orange-200);
}
.template-button .p-button.amazon {
background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #000;
border-color: var(--yellow-500);
}
.template-button .p-button.amazon:hover {
background-position: left bottom;
}
.template-button .p-button.amazon i {
background-color: var(--yellow-500);
}
.template-button .p-button.amazon:focus {
box-shadow: 0 0 0 1px var(--yellow-200);
}
.template-button .p-button.discord {
background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.5s ease-out;
color: #fff;
border-color: var(--bluegray-800);
}
.template-button .p-button.discord:hover {
background-position: left bottom;
}
.template-button .p-button.discord i {
background-color: var(--bluegray-800);
}
.template-button .p-button.discord:focus {
box-shadow: 0 0 0 1px var(--bluegray-500);
}
@media screen and (max-width: 960px) {
-button .p-button {
margin-bottom: 0.5rem;
}
-button .p-button:not(.p-button-icon-only) {
display: flex;
flex-wrap: wrap;
}
-button .p-buttonset .p-button {
margin-bottom: 0;
}
}
</style>

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

@@ -4,7 +4,7 @@ const icons = ref(null);
const filter = ref(null);
onMounted(() => {
fetch('/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 icons = d.icons;
@@ -131,7 +131,7 @@ export default {
</template>
<style lang="scss" scoped>
@import '@/assets/demo/documentation.scss';
@import '@/assets/demo/styles/documentation.scss';
.icons-list {
i {

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

@@ -76,7 +76,7 @@ const onSortChange = (event) => {
<template #list="slotProps">
<div class="col-12">
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
<div class="flex-1 text-center md:text-left">
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</div>
@@ -106,7 +106,7 @@ const onSortChange = (event) => {
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
</div>
<div class="text-center">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
<div class="mb-3">{{ slotProps.data.description }}</div>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

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

@@ -60,7 +60,7 @@ onMounted(() => {
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="'/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
<img :src="'/demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">
@@ -99,7 +99,7 @@ onMounted(() => {
<div class="card">
<h5>Image</h5>
<div class="flex justify-content-center">
<Image src="/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
<Image src="/demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
</div>
</div>
</div>

16
src/views/uikit/Misc.vue
View File

@@ -75,11 +75,11 @@ onBeforeUnmount(() => {
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
@@ -151,9 +151,9 @@ onBeforeUnmount(() => {
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
<Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
</div>
</div>

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

@@ -132,7 +132,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
@@ -147,7 +147,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel }">
@@ -155,7 +155,7 @@ const calculateCustomerTotal = (name) => {
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@@ -228,7 +228,7 @@ const calculateCustomerTotal = (name) => {
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
<Column field="country.name" header="Country" :style="{ width: '200px' }">
<template #body="{ data }">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
</template>
</Column>
@@ -242,7 +242,7 @@ const calculateCustomerTotal = (name) => {
<Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
<Column field="representative.name" header="Representative" :style="{ width: '200px' }">
<template #body="{ data }">
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
</template>
</Column>
@@ -273,7 +273,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
@@ -345,7 +345,7 @@ const calculateCustomerTotal = (name) => {
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text ml-2">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@@ -357,7 +357,7 @@ const calculateCustomerTotal = (name) => {
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
</template>
<template #groupfooter="slotProps">