Theme updated
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user