Theme updated

2022-11-06 15:02:12 +03:00
parent 357fd44630
commit 0e5c4072e1
101 changed files with 217635 additions and 54 deletions
@@ -11,7 +11,7 @@
      <link id="theme-css"
            rel="stylesheet"
            type="text/css"
-            href="/src/assets/layout/styles/theme/lara-light-indigo/theme.css">
+            href="/themes/lara-light-indigo/theme.css">
 </head>

 <body>
@@ -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 {
@@ -133,3 +133,23 @@
        }
    }
 }
+
+.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;
+}
@@ -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,17 +147,18 @@ 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;
    }

@@ -174,16 +174,16 @@ pre[class*="language-"] {
        .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 {
@@ -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);
    }
 }
@@ -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);
--- a/Show More
+++ b/Show More