wip

2025-12-08 22:53:24 +00:00 · 2020-05-30 23:09:46 +02:00
parent 20f8d8dbf8
commit c824ba828d
2 changed files with 132 additions and 139 deletions
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -13,16 +13,16 @@
                </div>
            </div>

-            <p class="mt-8 text-gray-700">Header components require simple(don't panic please 😎) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
+            <p class="mt-8 text-gray-700">Header components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
        </div>

-        <div class="w-full max-w-6xl mx-auto">
+        <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>

                <view-component v-for="component in category.components" :key="component.name" :name="component.name" class="mt-6">
                    <div slot="component">
-                        <div class="my-4">
+                        <div class="my-6">
                            <component :is="component.name | toId"></component>
                        </div>
                    </div>
@@ -33,100 +33,100 @@
 </template>

 <script>
-    // Alerts
-    import SuccessAlert from "./UI/Alert/SuccessAlert";
-    import InfoAlert from "./UI/Alert/InfoAlert";
-    import WarningAlert from "./UI/Alert/WarningAlert";
-    import ErrorAlert from "./UI/Alert/ErrorAlert";
-    import NotificationPop from "./UI/Alert/NotificationPop";
-    // Cards
-    import ArticleCard from "./UI/Cards/ArticleCard";
-    import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
-    import SimpleProductCard from "./UI/Cards/SimpleProductCard";
-    import ProductCard from "./UI/Cards/ProductCard";
-    import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
-    import TestimonialCard from "./UI/Cards/TestimonialCard";
-    import UserCard from "./UI/Cards/UserCard";
-    import UserCardWithDetails from "./UI/Cards/UserCardWithDetails";
-    // Forms
-    import InputsForm from "./UI/Forms/InputsForm";
-    import NewsletterForm from "./UI/Forms/NewsletterForm";
-    import SignInForm from "./UI/Forms/SignInForm";
-    import SignInFormWithImage from "./UI/Forms/SignInFormWithImage";
-    // Header
-    import HeaderWithImage from "./UI/Header/HeaderWithImage";
-    import HeaderWithPattern from "./UI/Header/HeaderWithPattern";
-    // Navbars
-    import Navbar from "./UI/Navbars/Navbar";
-    import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
-    import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar";
-    // Sections
-    import AboutMe from "./UI/Sections/AboutMe";
-    import CardsList from "./UI/Sections/CardsList";
-    import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
-    // Pagination
-    import Pagination from "./UI/Paginations/Pagination";
-    // Footers
-    import SimpleFooter from "./UI/Footers/SimpleFooter";
-    import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
+// Alerts
+import SuccessAlert from "./UI/Alert/SuccessAlert";
+import InfoAlert from "./UI/Alert/InfoAlert";
+import WarningAlert from "./UI/Alert/WarningAlert";
+import ErrorAlert from "./UI/Alert/ErrorAlert";
+import NotificationPop from "./UI/Alert/NotificationPop";
+// Cards
+import ArticleCard from "./UI/Cards/ArticleCard";
+import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
+import SimpleProductCard from "./UI/Cards/SimpleProductCard";
+import ProductCard from "./UI/Cards/ProductCard";
+import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
+import TestimonialCard from "./UI/Cards/TestimonialCard";
+import UserCard from "./UI/Cards/UserCard";
+import UserCardWithDetails from "./UI/Cards/UserCardWithDetails";
+// Forms
+import InputsForm from "./UI/Forms/InputsForm";
+import NewsletterForm from "./UI/Forms/NewsletterForm";
+import SignInForm from "./UI/Forms/SignInForm";
+import SignInFormWithImage from "./UI/Forms/SignInFormWithImage";
+// Header
+import HeaderWithImage from "./UI/Header/HeaderWithImage";
+import HeaderWithPattern from "./UI/Header/HeaderWithPattern";
+// Navbars
+import Navbar from "./UI/Navbars/Navbar";
+import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
+import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar";
+// Sections
+import AboutMe from "./UI/Sections/AboutMe";
+import CardsList from "./UI/Sections/CardsList";
+import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
+// Pagination
+import Pagination from "./UI/Paginations/Pagination";
+// Footers
+import SimpleFooter from "./UI/Footers/SimpleFooter";
+import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";

-    import Component from "../Models/Component";
-    import ViewComponent from "./Utilities/ViewComponent";
+import Component from "../Models/Component";
+import ViewComponent from "./Utilities/ViewComponent";

-    export default {
-        components: {
-            SuccessAlert,
-            InfoAlert,
-            WarningAlert,
-            ErrorAlert,
-            NotificationPop,
+export default {
+    components: {
+        SuccessAlert,
+        InfoAlert,
+        WarningAlert,
+        ErrorAlert,
+        NotificationPop,

-            ArticleCard,
-            ArticleCardWithImage,
-            SimpleProductCard,
-            ProductCard,
-            ProductCardWithEvaluation,
-            TestimonialCard,
-            UserCard,
-            UserCardWithDetails,
+        ArticleCard,
+        ArticleCardWithImage,
+        SimpleProductCard,
+        ProductCard,
+        ProductCardWithEvaluation,
+        TestimonialCard,
+        UserCard,
+        UserCardWithDetails,

-            InputsForm,
-            NewsletterForm,
-            SignInForm,
-            SignInFormWithImage,
+        InputsForm,
+        NewsletterForm,
+        SignInForm,
+        SignInFormWithImage,

-            HeaderWithImage,
-            HeaderWithPattern,
+        HeaderWithImage,
+        HeaderWithPattern,

-            Navbar,
-            NavbarWithSearch,
-            NavbarWithAvatar,
+        Navbar,
+        NavbarWithSearch,
+        NavbarWithAvatar,

-            AboutMe,
-            CardsList,
-            ParagraphWithImage,
+        AboutMe,
+        CardsList,
+        ParagraphWithImage,

-            Pagination,
+        Pagination,

-            SimpleFooter,
-            FooterWithSubscribeForm,
+        SimpleFooter,
+        FooterWithSubscribeForm,

-            ViewComponent,
+        ViewComponent,
+    },
+    data() {
+        return {
+            categories: [],
+            searchText: 'Alert',
+            component: new Component(),
+        }
+    },
+    created() {
+        this.categories = this.component.all();
+    },
+    computed: {
+        list() {
+            return this.component.whereCategory(this.searchText);
        },
-        data() {
-            return {
-                categories: [],
-                searchText: 'Alert',
-                component: new Component(),
-            }
-        },
-        created() {
-            this.categories = this.component.all();
-        },
-        computed: {
-            list() {
-                return this.component.whereCategory(this.searchText);
-            },
-        },
-    }
+    },
+}
 </script>
--- a/src/components/Utilities/ViewComponent.vue
+++ b/src/components/Utilities/ViewComponent.vue
@@ -1,36 +1,30 @@
 <template>
    <div class="bg-gray-300 border rounded-md overflow-hidden">
-        <div class="bg-white p-4 border-b">
+        <div class="bg-white px-4 py-2 border-b">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
                <div class="mt-4 md:mt-0">
-                    <button @click="rtl =! rtl"
-                            class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none"
-                            :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg">
+                    <button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
                            <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
                            <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
                        </svg>
                    </button>
-                    <button @click="viewCode =! viewCode"
-                            class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none"
-                            :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg">
+
+                    <button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
                            <path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z"/>
                            <path d="M7.61222 18.3608L8.97161 16.9124L8.9711 16.8933L3.87681 12.1121L8.66724 7.00798L7.20892 5.63928L1.0498 12.2017L7.61222 18.3608Z"/>
                            <path d="M16.3883 18.3608L15.0289 16.9124L15.0294 16.8933L20.1237 12.1121L15.3333 7.00798L16.7916 5.63928L22.9507 12.2017L16.3883 18.3608Z"/>
                        </svg>
                    </button>
-                    <button v-clipboard:success="onCopy" v-clipboard:copy="code"
-                            class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
+
+                    <button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                             stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                    </button>
-                    
                </div>
            </div>
        </div>
@@ -57,49 +51,48 @@
 </template>

 <script>
+import CodeSnippet from "./CodeSnippet";

-    import CodeSnippet from "./CodeSnippet";
+let beautify_html = require('js-beautify').html;

-    let beautify_html = require('js-beautify').html;
+export default {
+    props: ['name'],

-    export default {
-        props: ['name'],
+    components: {
+        CodeSnippet
+    },

-        components: {
-            CodeSnippet
+    data() {
+        return {
+            viewCode: false,
+            rtl: false,
+            copied: false,
+            code: null,
+        }
+    },
+    created() {
+        this.$nextTick(() => {
+            let id = this.$options.filters.toId(this.name);
+            this.code = beautify_html(document.getElementById(id).innerHTML);
+        });
+    },
+    methods: {
+        onCopy() {
+            this.copied = ! this.copied;
+
+            setTimeout(() => {
+                this.copied = false
+            }, 800);
        },
-
-        data() {
-            return {
-                viewCode: false,
-                rtl: false,
-                copied: false,
-                code: null,
-            }
-        },
-        created() {
-            this.$nextTick(() => {
-                let id = this.$options.filters.toId(this.name);
-                this.code = beautify_html(document.getElementById(id).innerHTML);
-            });
-        },
-        methods: {
-            onCopy() {
-                this.copied = ! this.copied;
-
-                setTimeout(() => {
-                    this.copied = false
-                }, 800);
-            },
-        },
-    }
+    },
+}
 </script>

 <style>
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .5s;
-    }
-    .fade-enter, .fade-leave-to {
-        opacity: 0;
-    }
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
 </style>