Submenu changes

src/views/pages/Landing.vue

@@ -221,7 +221,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Free</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-1.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$0</span>
                             <span class="text-600">per month</span>
@@ -252,7 +252,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Startup</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-2.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$1</span>
                             <span class="text-600">per month</span>
@@ -283,7 +283,7 @@
                 <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                     <div class="p-3 flex flex-column border-200 hover:border-cyan-200" style="border: 2px solid; border-radius: 10px">
                         <h3 class="text-900 text-center">Enterprice</h3>
-                        <img src="@/assets/demo/images/landing/asset-tier-3.svg" class="w-10 h-10 mx-auto" alt="" />
+                        <img src="@/assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="" />
                         <div class="my-5 text-center">
                             <span class="text-5xl font-bold mr-2 text-900">$999</span>
                             <span class="text-600">per month</span>

src/views/uikit/Icons.vue

@@ -7,35 +7,34 @@
             <h5>Download</h5>
             <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
 
-<pre v-code><code>
+            <pre v-code><code>
 npm install primeicons --save
 
 </code></pre>
 
             <h5>Getting Started</h5>
-            <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>
+            <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>
 
-<pre v-code><code>
+            <pre v-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: .5rem"></i>
-<i class="pi pi-times"></i>
+            <i class="pi pi-check" style="margin-right: 0.5rem"></i>
+            <i class="pi pi-times"></i>
 
             <h5>Size</h5>
             <p>Size of the icons can easily be changed using font-size property.</p>
 
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-check"&gt;&lt;/i&gt;
 
 </code></pre>
 
             <i class="pi pi-check"></i>
 
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -44,7 +43,7 @@ npm install primeicons --save
 
             <h5>Spinning Animation</h5>
             <p>Special pi-spin class applies continuous rotation to an icon.</p>
-<pre v-code><code>
+            <pre v-code><code>
 &lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
 
 </code></pre>
@@ -53,12 +52,12 @@ npm install primeicons --save
 
             <h5>Constants</h5>
             <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
-<pre v-code><code>
+            <pre v-code><code>
 &lt;Menu :model="items" /&gt;
 
 </code></pre>
 
-<pre v-code.script><code>
+            <pre v-code.script><code>
 import {PrimeIcons} from 'primevue/api';
 
 export default {
@@ -90,53 +89,49 @@ export default {
             <div class="grid icons-list text-center">
                 <div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
                     <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
-                    <div>pi-{{icon.properties.name}}</div>
+                    <div>pi-{{ icon.properties.name }}</div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            icons: null,
-            filter: null
-        }
-    },
-    mounted() {
-        fetch('data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
-            .then(d => {
-                let icons = d.icons;
-                let data = icons.filter(value => {
-                    return value.icon.tags.indexOf('deprecate') === -1;
-                });
-                data.sort((icon1, icon2) => {
-                    if(icon1.properties.name < icon2.properties.name)
-                        return -1;
-                    else if(icon1.properties.name < icon2.properties.name)
-                        return 1;
-                    else
-                        return 0;
-                });
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+const icons = ref(null);
+const filter = ref(null);
 
-                this.icons = data;
+onMounted(() => {
+    fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+        .then((res) => res.json())
+        .then((d) => {
+            let icons = d.icons;
+            let data = icons.filter((value) => {
+                return value.icon.tags.indexOf('deprecate') === -1;
             });
-    },
-    computed: {
-        filteredIcons() {
-            if (this.filter)
-                return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
-            else
-                return this.icons;
-        }
+            data.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) return -1;
+                else if (icon1.properties.name > icon2.properties.name) return 1;
+                else return 0;
+            });
+
+            icons.value = data;
+        });
+});
+
+const filteredIcons = computed(() => {
+    if (filter.value) {
+        return icons.value.filter((icon) => {
+            return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
+        });
+    } else {
+        return icons.value;
     }
-}
+});
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/demo/documentation.scss';
+@import '@/assets/demo/documentation.scss';
 
 .icons-list {
     i {

src/views/uikit/Misc.vue

@@ -46,11 +46,11 @@
                 <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="/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 label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -122,9 +122,9 @@
 
                 <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="/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>
                 </div>
             </div>