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

Theme updated

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-06 15:02:12 +03:00
parent 357fd44630
commit 0e5c4072e1
101 changed files with 217635 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets/layout/styles/layout/_menu.scss
View File

@@ -11,7 +11,7 @@
background-color: var(--surface-overlay);
border-radius: $borderRadius;
padding: 0.5rem 1.5rem;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .02), 0px 0px 2px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .08);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
}
.layout-menu {
@@ -20,15 +20,15 @@
list-style-type: none;
.layout-root-menuitem {
>.layout-menuitem-root-text {
font-size: .857rem;
> .layout-menuitem-root-text {
font-size: 0.857rem;
text-transform: uppercase;
font-weight: 700;
color: var(--surface-900);
margin: .75rem 0;
margin: 0.75rem 0;
}
>a {
> a {
display: none;
}
}
@@ -37,14 +37,14 @@
user-select: none;
&.active-menuitem {
>.layout-submenu-toggler {
> .layout-submenu-toggler {
transform: rotate(-180deg);
}
}
}
li.active-menuitem {
>a {
> a {
.layout-submenu-toggler {
transform: rotate(-180deg);
}
@@ -63,12 +63,12 @@
outline: 0 none;
color: var(--text-color);
cursor: pointer;
padding: .75rem 1rem;
padding: 0.75rem 1rem;
border-radius: $borderRadius;
transition: background-color $transitionDuration, box-shadow $transitionDuration;
.layout-menuitem-icon {
margin-right: .5rem;
margin-right: 0.5rem;
}
.layout-submenu-toggler {
@@ -132,4 +132,24 @@
}
}
}
}
}
.layout-submenu-enter-from,
.layout-submenu-leave-to {
max-height: 0;
}
.layout-submenu-enter-to,
.layout-submenu-leave-from {
max-height: 1000px;
}
.layout-submenu-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.layout-submenu-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}

9
src/layout/AppMenu.vue
View File

@@ -157,17 +157,22 @@ const model = ref([
]
}
]);
function test(e) {
console.log('test');
console.log(e);
}
</script>
<template>
<ul class="layout-menu">
<template v-for="(item, i) in model" :key="item">
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
<app-menu-item @submenu:opened="test" v-if="!item.separator" :item="item" :index="i"></app-menu-item>
<li v-if="item.separator" class="menu-separator"></li>
</template>
<li>
<a href="https://www.primefaces.org/primeblocks-ng/#/">
<img src="assets/layout/images/.png" alt="Prime Blocks" class="w-full mt-3" />
<img src="@/assets/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
</a>
</li>
</ul>

55
src/layout/AppMenuItem.vue
View File

@@ -1,5 +1,11 @@
<script setup>
defineProps({
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const emit = defineEmits(['submenu:opened']);
const route = useRoute();
const show = ref(true);
const props = defineProps({
item: {
type: Object,
default: () => ({})
@@ -17,23 +23,60 @@ defineProps({
default: false
}
});
const activeSubmenu = ref(null);
onMounted(() => {
if (!props.root) {
show.value = false;
}
console.log(props.item);
});
const itemClick = (event, item, index) => {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.to && !item.url) {
if (item.items) {
show.value = !show.value;
activeSubmenu.value = show.value ? index : null;
emit('submenu:opened');
}
event.preventDefault();
}
//execute command
if (item.command) {
item.command({ originalEvent: event, item: item });
}
/* activeIndex.value = index === activeIndex.value ? null : index;
/* emit('menuitem-click', {
originalEvent: event,
item: item
}); */
};
const checkActiveRoute = (item) => {
return route.path === item.to;
};
</script>
<template>
<li :class="{ 'layout-root-menuitem': root, 'active-menuitem': active }">
<li :class="{ 'layout-root-menuitem': root, 'active-menuitem': checkActiveRoute(item, root) }">
<div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
<a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event)" :class="item.class" :target="item.target" tabindex="0">
<a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event, item, index)" :class="item.class" :target="item.target" tabindex="0">
<i :class="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</a>
<router-link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="[item.class, { 'active-route': active }]" tabindex="0" :to="item.to">
<router-link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event, item, index)" :class="[item.class, { 'active-route': checkActiveRoute(item) }]" tabindex="0" :to="item.to">
<i :class="item.icon" class="layout-menuitem-icon"></i>
<span class="layout-menuitem-text">{{ item.label }}</span>
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
</router-link>
<Transition class="layout-submenu">
<ul v-if="item.items && item.visible !== false">
<Transition v-if="item.items && item.visible !== false" name="layout-submenu">
<ul v-show="show" class="layout-submenu">
<app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>
</ul>
</Transition>

60
src/layout/BlockViewer.vue
View File

@@ -2,16 +2,15 @@
<div class="block-section">
<div class="block-header">
<span class="block-title">
<span>{{header}}</span>
<span>{{ header }}</span>
<span class="badge-new" v-if="recent">New</span>
</span>
<div class="block-actions">
<a tabindex="0" :class="{'block-action-active': blockView === BlockView.PREVIEW}" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{'block-action-active': blockView === BlockView.CODE}" @click="activateView($event, BlockView.CODE)">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)"
v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
</div>
</div>
<div class="block-content">
@@ -19,7 +18,7 @@
<slot></slot>
</div>
<div v-if="blockView === BlockView.CODE">
<pre v-code><code>{{code}}
<pre v-code><code>{{code}}
</code></pre>
</div>
@@ -48,8 +47,8 @@ export default {
PREVIEW: 0,
CODE: 1
},
blockView: 0,
}
blockView: 0
};
},
methods: {
activateView(event, blockView) {
@@ -61,7 +60,7 @@ export default {
event.preventDefault();
}
}
}
};
</script>
<style scoped lang="scss">
@@ -75,7 +74,7 @@ export default {
background-color: var(--surface-section);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border:1px solid var(--surface-d);
border: 1px solid var(--surface-d);
display: flex;
align-items: center;
justify-content: space-between;
@@ -87,12 +86,12 @@ export default {
.badge-free {
border-radius: 4px;
padding: .25rem .5rem;
padding: 0.25rem 0.5rem;
background-color: var(--orange-500);
color: white;
margin-left: 1rem;
font-weight: 700;
font-size: .875rem;
font-size: 0.875rem;
}
}
@@ -106,12 +105,12 @@ export default {
a {
display: flex;
align-items: center;
margin-right: .75rem;
padding: .5rem 1rem;
margin-right: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 600;
border: 1px solid transparent;
transition: background-color .2s;
transition: background-color 0.2s;
cursor: pointer;
&:last-child {
@@ -135,12 +134,12 @@ export default {
}
&.block-action-disabled {
opacity: .6;
opacity: 0.6;
cursor: auto !important;
}
i {
margin-right: .5rem;
margin-right: 0.5rem;
}
}
}
@@ -148,19 +147,20 @@ export default {
.block-content {
padding: 0;
border:1px solid var(--surface-d);
border: 1px solid var(--surface-d);
border-top: 0 none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
}
pre[class*="language-"] {
pre[class*='language-'] {
margin: 0 !important;
&:before, &:after {
&:before,
&:after {
display: none !important;
}
}
code {
border-left: 0 none !important;
@@ -170,26 +170,26 @@ pre[class*="language-"] {
color: var(--text-color);
font-size: 14px;
padding: 0 2rem !important;
.token {
&.tag,
&.keyword {
color: #2196F3 !important;
color: #2196f3 !important;
}
&.attr-name,
&.attr-string {
color: #2196F3 !important;
color: #2196f3 !important;
}
&.attr-value {
color: #4CAF50 !important;
color: #4caf50 !important;
}
&.punctuation {
color: var(--text-color);
}
&.operator,
&.string {
background: transparent;
@@ -209,4 +209,4 @@ pre[class*="language-"] {
}
}
}
</style>
</style>

0
src/layout/AppCodeHighlight.js → src/layout/CodeHighlight.js
View File

7
src/layout/service/CountryService.js
View File

@@ -1,6 +1,7 @@
export default class CountryService {
getCountries() {
return fetch('data/countries.json').then(res => res.json()).then(d => d.data);
getCountries () {
return fetch('/data/countries.json')
.then(res => res.json())
.then(d => d.data);
}
}

3
src/main.js
View File

@@ -100,9 +100,10 @@ import TreeTable from 'primevue/treetable';
import TriStateCheckbox from 'primevue/tristatecheckbox';
import VirtualScroller from 'primevue/virtualscroller';
import CodeHighlight from '@/layout/AppCodeHighlight';
import CodeHighlight from '@/layout/CodeHighlight';
import BlockViewer from '@/layout/BlockViewer.vue';
import 'prismjs/themes/prism-coy.css';
import '@/assets/styles.scss';
const app = createApp(App);

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

@@ -148,7 +148,7 @@
<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="'/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>