Merge pull request #20 from merakiui/remove-vue-router
Remove vue router
This commit is contained in:
khatab Wedaa
GitHub
commit
afc06822f5
|
|
@ -11,15 +11,13 @@
|
|||
"autoprefixer": "^9.7.6",
|
||||
"core-js": "^3.6.4",
|
||||
"highlight.js": "^10.0.2",
|
||||
"js-beautify": "^1.11.0",
|
||||
"postcss-import": "^12.0.1",
|
||||
"tailwindcss": "^1.4.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-analytics": "^5.22.1",
|
||||
"vue-backtotop": "^1.6.1",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-router": "^3.3.2"
|
||||
"vue-meta": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
|
|
|
|||
50
src/App.vue
50
src/App.vue
|
|
@ -1,35 +1,7 @@
|
|||
<template>
|
||||
<div class="bg-white font-roboto" id="app">
|
||||
<main-header></main-header>
|
||||
|
||||
<main class="container mx-auto px-6" id="main">
|
||||
<div class="mt-16 text-center">
|
||||
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">
|
||||
Discover new components. Build amazing things 🔥
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto mt-4">
|
||||
<div class="flex flex-wrap items-center justify-center">
|
||||
<span class="ml-2" v-for="route in routes" :key="route.path">
|
||||
<span v-if="route.path != '/'">
|
||||
<router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
|
||||
{{ route.name }}
|
||||
</router-link>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-gray-700 text-center">
|
||||
Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span>
|
||||
<a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline"> configuration</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-16">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</main>
|
||||
<header-component></header-component>
|
||||
<main-component></main-component>
|
||||
|
||||
<back-to-top visibleoffset="800">
|
||||
<button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
|
||||
|
|
@ -42,24 +14,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import MainHeader from "./components/Header";
|
||||
import HeaderComponent from "./components/Header";
|
||||
import MainComponent from "./components/Main";
|
||||
import BackToTop from "vue-backtotop";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MainHeader,
|
||||
BackToTop,
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentPage() {
|
||||
return this.$route.path;
|
||||
},
|
||||
},
|
||||
components: { HeaderComponent, MainComponent, BackToTop },
|
||||
|
||||
data() {
|
||||
return {
|
||||
routes: this.$router.options.routes,
|
||||
og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
|
||||
};
|
||||
},
|
||||
|
|
@ -67,7 +30,6 @@ export default {
|
|||
metaInfo() {
|
||||
return {
|
||||
meta: [
|
||||
// Twitter Card
|
||||
{ name: "twitter:card", content: "summary_large_image" },
|
||||
{ name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
|
||||
{
|
||||
|
|
@ -75,9 +37,7 @@ export default {
|
|||
content:
|
||||
"Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
|
||||
},
|
||||
// image must be an absolute path
|
||||
{ name: "twitter:image", content: this.og },
|
||||
// Facebook OpenGraph
|
||||
{ property: "og:title", content: "Meraki UI Tailwindcss Components" },
|
||||
{ property: "og:site_name", content: "Meraki UI" },
|
||||
{ property: "og:type", content: "website" },
|
||||
|
|
|
|||
140
src/components/Main.vue
Normal file
140
src/components/Main.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<div class="container mx-auto px-6 pb-12">
|
||||
<div class="py-16 text-center">
|
||||
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center justify-center mt-5 ">
|
||||
<div class="mt-2 md:mt-0">
|
||||
<span v-for="category in categories" :key="category.name">
|
||||
<button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-5xl mx-auto">
|
||||
<div class="mb-16" v-for="category in list" :key="category.name">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
|
||||
|
||||
<div v-for="component in category.components" :key="component.name" :name="component.name">
|
||||
<component :is="category.name + component.name"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Alerts
|
||||
import AlertsSuccessPop from "./ui/Alerts/SuccessPop";
|
||||
import AlertsInfoPop from "./ui/Alerts/InfoPop";
|
||||
import AlertsWarningPop from "./ui/Alerts/WarningPop";
|
||||
import AlertsErrorPop from "./ui/Alerts/ErrorPop";
|
||||
import AlertsNotificationPop from "./ui/Alerts/NotificationPop";
|
||||
import AlertsSuccessFullWidth from "./ui/Alerts/SuccessFullWidth";
|
||||
import AlertsInfoFullWidth from "./ui/Alerts/InfoFullWidth";
|
||||
import AlertsWarningFullWidth from "./ui/Alerts/WarningFullWidth";
|
||||
import AlertsErrorFullWidth from "./ui/Alerts/ErrorFullWidth";
|
||||
// Authentication
|
||||
import AuthenticationSimpleLogin from "./ui/Authentication/SimpleLogin";
|
||||
import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
|
||||
// Cards
|
||||
import CardsArticle from "./ui/Cards/Article";
|
||||
import CardsArticleWithImage from "./ui/Cards/ArticleWithImage";
|
||||
import CardsArticleWithSMIcons from "./ui/Cards/ArticleWithSMIcons";
|
||||
import CardsProduct from "./ui/Cards/Product";
|
||||
import CardsProductWithEvaluation from "./ui/Cards/ProductWithEvaluation";
|
||||
import CardsSimpleProduct from "./ui/Cards/SimpleProduct";
|
||||
import CardsTestimonial from "./ui/Cards/Testimonial";
|
||||
import CardsUser from "./ui/Cards/User";
|
||||
import CardsUserWithDetails from "./ui/Cards/UserWithDetails";
|
||||
// Forms
|
||||
import FormsNewsletter from "./ui/Forms/Newsletter";
|
||||
import FormsSimple from "./ui/Forms/Simple";
|
||||
// Navbars
|
||||
import NavbarsECommerce from "./ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
|
||||
import NavbarsWithSearch from "./ui/Navbars/WithSearch";
|
||||
// Heros
|
||||
import HerosECommerce from "./ui/Heros/ECommerce";
|
||||
import HerosWithImage from "./ui/Heros/WithImage";
|
||||
import HerosWithPattern from "./ui/Heros/WithPattern";
|
||||
// Sections
|
||||
import SectionsAboutMe from "./ui/Sections/AboutMe";
|
||||
import SectionsFeature from "./ui/Sections/Feature";
|
||||
import SectionsOurTeam from "./ui/Sections/OurTeam";
|
||||
import SectionsParagraphWithImage from "./ui/Sections/ParagraphWithImage";
|
||||
// paginations
|
||||
import PaginationsSimple from "./ui/Paginations/Simple";
|
||||
// Footers
|
||||
import FootersSimple from "./ui/Footers/Simple";
|
||||
import FootersWithDetails from "./ui/Footers/WithDetails";
|
||||
import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import Component from "../models/ComponentsFilter";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AlertsSuccessPop,
|
||||
AlertsInfoPop,
|
||||
AlertsWarningPop,
|
||||
AlertsErrorPop,
|
||||
AlertsNotificationPop,
|
||||
AlertsSuccessFullWidth,
|
||||
AlertsInfoFullWidth,
|
||||
AlertsWarningFullWidth,
|
||||
AlertsErrorFullWidth,
|
||||
AuthenticationSimpleLogin,
|
||||
AuthenticationLoginWithSideImage,
|
||||
CardsArticle,
|
||||
CardsArticleWithImage,
|
||||
CardsArticleWithSMIcons,
|
||||
CardsProduct,
|
||||
CardsProductWithEvaluation,
|
||||
CardsSimpleProduct,
|
||||
CardsTestimonial,
|
||||
CardsUser,
|
||||
CardsUserWithDetails,
|
||||
FormsNewsletter,
|
||||
FormsSimple,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithSearch,
|
||||
HerosECommerce,
|
||||
HerosWithImage,
|
||||
HerosWithPattern,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsOurTeam,
|
||||
SectionsParagraphWithImage,
|
||||
PaginationsSimple,
|
||||
FootersSimple,
|
||||
FootersWithDetails,
|
||||
FootersWithSubscribeForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
searchText: 'Alerts',
|
||||
component: new Component(),
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.categories = this.component.all();
|
||||
},
|
||||
|
||||
computed: {
|
||||
list() {
|
||||
return this.component.whereCategory(this.searchText);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Alerts</h1>
|
||||
|
||||
<success-pop></success-pop>
|
||||
<info-pop></info-pop>
|
||||
<warning-pop></warning-pop>
|
||||
<error-pop></error-pop>
|
||||
<notification-pop></notification-pop>
|
||||
<success-full-width></success-full-width>
|
||||
<info-full-width></info-full-width>
|
||||
<warning-full-width></warning-full-width>
|
||||
<error-full-width></error-full-width>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SuccessPop from "../ui/Alerts/SuccessPop";
|
||||
import InfoPop from "../ui/Alerts/InfoPop";
|
||||
import WarningPop from "../ui/Alerts/WarningPop";
|
||||
import ErrorPop from "../ui/Alerts/ErrorPop";
|
||||
import NotificationPop from "../ui/Alerts/NotificationPop";
|
||||
import SuccessFullWidth from "../ui/Alerts/SuccessFullWidth";
|
||||
import InfoFullWidth from "../ui/Alerts/InfoFullWidth";
|
||||
import WarningFullWidth from "../ui/Alerts/WarningFullWidth";
|
||||
import ErrorFullWidth from "../ui/Alerts/ErrorFullWidth";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SuccessPop ,
|
||||
InfoPop ,
|
||||
WarningPop,
|
||||
ErrorPop,
|
||||
NotificationPop,
|
||||
SuccessFullWidth,
|
||||
InfoFullWidth,
|
||||
WarningFullWidth,
|
||||
ErrorFullWidth,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Cards</h1>
|
||||
|
||||
<Article></Article>
|
||||
<article-with-s-m-icons></article-with-s-m-icons>
|
||||
<article-with-image></article-with-image>
|
||||
<product></product>
|
||||
<product-with-evaluation></product-with-evaluation>
|
||||
<simple-product></simple-product>
|
||||
<testimonial></testimonial>
|
||||
<user></user>
|
||||
<user-with-details></user-with-details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Article from "../ui/Cards/Article";
|
||||
import ArticleWithImage from "../ui/Cards/ArticleWithImage";
|
||||
import ArticleWithSMIcons from "../ui/Cards/ArticleWithSMIcons";
|
||||
import Product from "../ui/Cards/Product";
|
||||
import ProductWithEvaluation from "../ui/Cards/ProductWithEvaluation";
|
||||
import SimpleProduct from "../ui/Cards/SimpleProduct";
|
||||
import Testimonial from "../ui/Cards/Testimonial";
|
||||
import User from "../ui/Cards/User";
|
||||
import UserWithDetails from "../ui/Cards/UserWithDetails";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Article,
|
||||
ArticleWithImage,
|
||||
ArticleWithSMIcons,
|
||||
Product,
|
||||
ProductWithEvaluation,
|
||||
SimpleProduct,
|
||||
Testimonial,
|
||||
User,
|
||||
UserWithDetails
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Footers</h1>
|
||||
|
||||
<simple></simple>
|
||||
<with-details></with-details>
|
||||
<with-subscribe-form></with-subscribe-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Footers/Simple";
|
||||
import WithDetails from "../ui/Footers/WithDetails";
|
||||
import WithSubscribeForm from "../ui/Footers/WithSubscribeForm";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
WithDetails,
|
||||
WithSubscribeForm,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
|
||||
|
||||
<simple></simple>
|
||||
<newsletter></newsletter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Forms/Simple";
|
||||
import Newsletter from "../ui/Forms/Newsletter";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
Newsletter,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Heros</h1>
|
||||
|
||||
<e-commerce></e-commerce>
|
||||
<with-image></with-image>
|
||||
<with-pattern></with-pattern>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ECommerce from "../ui/Heros/ECommerce";
|
||||
import WithImage from "../ui/Heros/WithImage";
|
||||
import WithPattern from "../ui/Heros/WithPattern";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ECommerce,
|
||||
WithImage,
|
||||
WithPattern,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Navbars</h1>
|
||||
|
||||
<e-commerce></e-commerce>
|
||||
<with-search></with-search>
|
||||
<with-avatar-and-alert-icon></with-avatar-and-alert-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ECommerce from "../ui/Navbars/ECommerce";
|
||||
import WithSearch from "../ui/Navbars/WithSearch";
|
||||
import WithAvatarAndAlertIcon from "../ui/Navbars/WithAvatarAndAlertIcon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ECommerce,
|
||||
WithSearch,
|
||||
WithAvatarAndAlertIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Paginations</h1>
|
||||
|
||||
<simple></simple>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Simple from "../ui/Paginations/Simple";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Simple,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sections</h1>
|
||||
|
||||
<about-me></about-me>
|
||||
<feature></feature>
|
||||
<our-team></our-team>
|
||||
<paragraph-with-image></paragraph-with-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AboutMe from "../ui/Sections/AboutMe";
|
||||
import Feature from "../ui/Sections/Feature";
|
||||
import OurTeam from "../ui/Sections/OurTeam";
|
||||
import ParagraphWithImage from "../ui/Sections/ParagraphWithImage";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AboutMe,
|
||||
Feature,
|
||||
OurTeam,
|
||||
ParagraphWithImage,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full max-w-5xl mx-auto my-10">
|
||||
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sign-in and Registration</h1>
|
||||
|
||||
<simple-card></simple-card>
|
||||
<with-side-image></with-side-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleCard from "../ui/Sign-inAndRegistration/SimpleCard";
|
||||
import WithSideImage from "../ui/Sign-inAndRegistration/WithSideImage";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SimpleCard,
|
||||
WithSideImage
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Side Image',
|
||||
name: 'Login With Side Image',
|
||||
code: `
|
||||
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
|
||||
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple Card',
|
||||
name: 'Simple Login',
|
||||
code: `
|
||||
<div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
|
||||
<div class="py-4 px-6">
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Navbar With Avatar',
|
||||
name: 'With Avatar',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<nav class="bg-white shadow">
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import Meta from "vue-meta";
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
import VueAnalytics from "vue-analytics";
|
||||
|
|
@ -9,8 +7,6 @@ import ViewComponent from "./components/utilities/ViewComponent";
|
|||
|
||||
Vue.use(Meta);
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
Vue.component("view-component", ViewComponent);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
|
@ -21,4 +17,4 @@ Vue.use(VueAnalytics, { id: "UA-167213766-1" });
|
|||
|
||||
console.log("Hello 😎, If you like it star it on Github 🚀");
|
||||
|
||||
new Vue({ render: (h) => h(App), router }).$mount("#app");
|
||||
new Vue({ render: (h) => h(App) }).$mount("#app");
|
||||
|
|
|
|||
75
src/models/Components.js
Normal file
75
src/models/Components.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
export default [
|
||||
{
|
||||
name: "Alerts",
|
||||
components: [
|
||||
{ name: "SuccessPop" },
|
||||
{ name: "InfoPop" },
|
||||
{ name: "WarningPop" },
|
||||
{ name: "ErrorPop" },
|
||||
{ name: "NotificationPop" },
|
||||
{ name: "SuccessFullWidth" },
|
||||
{ name: "InfoFullWidth" },
|
||||
{ name: "WarningFullWidth" },
|
||||
{ name: "ErrorFullWidth" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Authentication",
|
||||
components: [{ name: "SimpleLogin" }, { name: "LoginWithSideImage" }],
|
||||
},
|
||||
{
|
||||
name: "Cards",
|
||||
components: [
|
||||
{ name: "Article" },
|
||||
{ name: "ArticleWithSMIcons" },
|
||||
{ name: "ArticleWithImage" },
|
||||
{ name: "Product" },
|
||||
{ name: "ProductWithEvaluation" },
|
||||
{ name: "SimpleProduct" },
|
||||
{ name: "Testimonial" },
|
||||
{ name: "User" },
|
||||
{ name: "UserWithDetails" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Forms",
|
||||
components: [{ name: "Simple" }, { name: "Newsletter" }],
|
||||
},
|
||||
{
|
||||
name: "Navbars",
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithSearch" },
|
||||
{ name: "WithAvatar" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Heros",
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithImage" },
|
||||
{ name: "WithPattern" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sections",
|
||||
components: [
|
||||
{ name: "AboutMe" },
|
||||
{ name: "Feature" },
|
||||
{ name: "OurTeam" },
|
||||
{ name: "ParagraphWithImage" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Paginations",
|
||||
components: [{ name: "Simple" }],
|
||||
},
|
||||
{
|
||||
name: "Footers",
|
||||
components: [
|
||||
{ name: "Simple" },
|
||||
{ name: "WithDetails" },
|
||||
{ name: "WithSubscribeForm" },
|
||||
],
|
||||
},
|
||||
];
|
||||
25
src/models/ComponentsFilter.js
Normal file
25
src/models/ComponentsFilter.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import components from "./Components";
|
||||
|
||||
export default class ComponentsFilter {
|
||||
constructor() {
|
||||
this.components = components;
|
||||
}
|
||||
|
||||
all() {
|
||||
return this.components;
|
||||
}
|
||||
|
||||
whereCategory(category) {
|
||||
if (this.isEmpty(category)) return this.components;
|
||||
|
||||
let pattern = new RegExp(`^${category}`, "i");
|
||||
|
||||
return this.components.filter((category) =>
|
||||
category.name.match(pattern)
|
||||
);
|
||||
}
|
||||
|
||||
isEmpty(string) {
|
||||
return string.length === 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import VueRouter from "vue-router";
|
||||
|
||||
const Alerts = () => import("./components/categories/Alerts");
|
||||
const Cards = () => import("./components/categories/Cards");
|
||||
const Forms = () => import("./components/categories/Forms");
|
||||
const Navbars = () => import("./components/categories/Navbars");
|
||||
const Heros = () => import("./components/categories/Heros");
|
||||
const Sections = () => import("./components/categories/Sections");
|
||||
const SignInAndRegistration = () =>
|
||||
import("./components/categories/Sign-inAndRegistration");
|
||||
const Paginations = () => import("./components/categories/Paginations");
|
||||
const Footers = () => import("./components/categories/Footers");
|
||||
|
||||
export default new VueRouter({
|
||||
mode: "history",
|
||||
routes: [
|
||||
{ path: "/", redirect: "/alerts" },
|
||||
{ path: "/alerts", component: Alerts, name: "Alerts" },
|
||||
{ path: "/cards", component: Cards, name: "Cards" },
|
||||
{ path: "/forms", component: Forms, name: "Forms" },
|
||||
{ path: "/navbars", component: Navbars, name: "Navbars" },
|
||||
{ path: "/heros", component: Heros, name: "Heros" },
|
||||
{ path: "/sections", component: Sections, name: "Sections" },
|
||||
{
|
||||
path: "/sign-in-and-registration",
|
||||
component: SignInAndRegistration,
|
||||
name: "Sign-in and Registration",
|
||||
},
|
||||
{ path: "/paginations", component: Paginations, name: "Paginations" },
|
||||
{ path: "/footers", component: Footers, name: "Footers" },
|
||||
],
|
||||
});
|
||||
Loading…
Reference in a new issue