perf: add url (#2)

* perf: add url

* fix space

* fix readme

README.md

@@ -21,12 +21,15 @@ const slots = {
     default: () => <div>main</div>
 }
 
-<Layout title='zoo-layout' vSlots={slots}></Layout>
+<Layout title={name: 'xx', url: 'xx'} vSlots={slots}></Layout>
 
 //template
 
 <template>
-    <Layout title='zoo-layout'>
+    <Layout title={
+        name: 'xx',
+        url: 'xxx'
+    }>
         <div slot="header">header</div>
         <div>main</div>
     </Layout>

examples/App.jsx

@@ -1,9 +1,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-    setup() {
-
-        return () => <Layout title="zoo"></Layout>
-    }
-
-})
+  setup() {
+    return () => <Layout></Layout>
+  }
+})

examples/App.vue

@@ -1,15 +1,21 @@
 <template>
-  <Layout title='zoo-issue-help'>
-      <div>123</div>
+  <Layout :title="title">
+    <div>123</div>
   </Layout>
 </template>
 
 <script>
 export default {
-
-}
+  data() {
+    return {
+      title: {
+        name: "Zoo Issue Helper",
+        url: "https://github.com/zoo-js/zoo-issue-helper",
+      },
+    };
+  },
+};
 </script>
 
 <style>
-
 </style>

packages/Layout/Layout.jsx

@@ -2,38 +2,42 @@ import { defineComponent } from 'vue'
 import './Layout.scss'
 
 export default defineComponent({
-    name: 'Layout',
-    props: {
-        title: {
-            type: String,
-            default: () => {
-                return 'Zoo-Layout'
-            }
-        }
-    },
-
-    setup(props, { slots }) {
-        const renderHeader = () => {
-            return <div class="zoo-layout-header">
-                <div class="zoo-layout-header-content">
-                    <a href="https://github.com/zoo-js" target="_blank">
-                        <img src={`https://avatars1.githubusercontent.com/u/70757173?s=60&v=4`} />
-                    </a>
-                    <a href="https://github.com/zoo-js/zoo-issue-helper" target="_blank">
-                        <h1>{props.title}</h1>
-                    </a>
-                    {slots.header?.()}
-                </div>
-            </div>
+  name: 'Layout',
+  props: {
+    title: {
+      type: Object,
+      default: () => {
+        return {
+          name: 'Zoo Layout',
+          url: 'https://github.com/zoo-js/zoo-layout',
         }
+      }
+    }
+  },
 
-        return () => (
-            <div class="zoo-layout">
-                { renderHeader()}
-                <div class="zoo-layout-body">
-                    {slots.default?.()}
-                </div>
-            </div>
-        )
+  setup(props, { slots }) {
+    console.log(props.title)
+    const renderHeader = () => {
+      return <div class="zoo-layout-header">
+        <div class="zoo-layout-header-content">
+          <a href="https://github.com/zoo-js" target="_blank">
+            <img src={`https://avatars1.githubusercontent.com/u/70757173?s=60&v=4`} />
+          </a>
+          <a href={props.title.url} target="_blank">
+            <h1>{props.title.name}</h1>
+          </a>
+          {slots.header?.()}
+        </div>
+      </div>
     }
-})
+
+    return () => (
+      <div class="zoo-layout">
+        { renderHeader()}
+        <div class="zoo-layout-body">
+          {slots.default?.()}
+        </div>
+      </div>
+    )
+  }
+})

packages/Layout/Layout.scss

@@ -2,131 +2,68 @@
 @import '~@zoo-js/colors/color.scss';
 
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    height: 100vh;
-    font-size: 62.5%;
-    background-image: linear-gradient(180deg, #eaf1e7 30%, #d9dfe4 45%, #e6dcc8 71%, #eaf1e7 91%);
-    user-select: none;
-    -moz-user-select: -moz-none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-
-    .zoo-layout {
-        .zoo-layout-header {
-            background-color: #fff;
-            box-shadow: 4px 4px 12px #d7dbe0;
-            position: fixed;
-            top: 0;
-            height: 76px;
-            width: 100vw;
-            z-index: 99;
-
-            &-content {
-                width: 1024px;
-                margin: 0 auto;
-                display: flex;
-                height: 76px;
-                line-height: 76px;
-
-                a+a {
-                    margin-left: 10px;
-                    text-decoration: none;
-                }
-
-                h1 {
-                    font-family: "Montserrat";
-                    margin: 0 20px;
-                    font-size: 24px;
-                    line-height: 76px;
-                    font-weight: normal;
-                    color: rgba(0, 0, 0, .85);
-                    text-shadow: #494a45 1px 2px 4px;
-                }
-
-                img {
-                    margin-top: 8px;
-                }
-            }
-
-            &-form {
-                position: absolute;
-                display: flex;
-                margin-left: 600px;
-                align-items: center;
-            }
-
-            &-item {
-                font-family: "Montserrat";
-
-                input {
-                    font-family: "Montserrat";
-                    border: none;
-                    border-bottom: 2px solid $theme-color;
-                    width: 200px;
-                    outline: none;
-                    padding: 6px;
-                    font-size: 16px;
-                }
-
-                label {
-                    height: 0;
-                    position: absolute;
-                    transition: all .5s;
-                    font-size: 16px;
-                    color: #666;
-                    cursor: text;
-                }
-
-                .label-title {
-                    transform: translateX(-20px) translateY(-10px) scale(0.7);
-                    color: $theme-color;
-                    cursor: default;
-                }
-
-            }
-
-            &-submit {
-                font-family: "Montserrat";
-                outline: none;
-                filter: chroma(color=#000000);
-                font-size: 16px;
-                color: $theme-text-color;
-                padding: 8px 20px;
-                border: none;
-                border-radius: 4px;
-                margin-left: 20px;
-                background-color: $theme-color;
-                box-shadow: 0 0 2px $theme-shadow-color;
-                transition: all .3s;
-                cursor: pointer;
-
-                &:hover {
-                    background-color: $theme-hover-color;
-                    box-shadow: 0 0 10px $theme-shadow-color;
-                }
+  height: 100vh;
+  font-size: 62.5%;
+  background-image: linear-gradient(180deg, #eaf1e7 30%, #d9dfe4 45%, #e6dcc8 71%, #eaf1e7 91%);
+  user-select: none;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+
+  .zoo-layout {
+    &-header {
+      background-color: #fff;
+      box-shadow: 4px 4px 12px #d7dbe0;
+      position: fixed;
+      top: 0;
+      height: 76px;
+      width: 100vw;
+      z-index: 99;
+
+      &-content {
+        width: 1024px;
+        margin: 0 auto;
+        display: flex;
+        height: 76px;
+        line-height: 76px;
+
+        a+a {
+          margin-left: 10px;
+          text-decoration: none;
+        }
 
-                &:active {
-                    transform: translateY(4px);
-                }
-            }
+        h1 {
+          font-family: "Montserrat";
+          margin: 0 20px;
+          font-size: 24px;
+          line-height: 76px;
+          font-weight: normal;
+          color: rgba(0, 0, 0, .85);
+          text-shadow: #494a45 1px 2px 4px;
+        }
 
+        img {
+          margin-top: 8px;
         }
+      }
     }
 
-    .zoo-layout-body {
-        padding-top: 84px
+    &-body {
+      padding-top: 84px;
     }
+  }
 
-    @media screen and (max-width: 480px) {
-        .zoo-header-content {
-            h1 {
-                display: none;
-            }
-        }
+  @media screen and (max-width: 480px) {
+    .zoo-header-content {
+      h1 {
+        display: none;
+      }
     }
-}
+  }
+}

packages/index.js

@@ -1,17 +1,16 @@
 import Layout from './Layout/Layout'
 
 const components = [
-    Layout
+  Layout
 ]
 
-const install = function(app) {
-    components.forEach(com => {
-        app.component(com.name, com)
-    })
-
+const install = function (app) {
+  components.forEach(com => {
+    app.component(com.name, com)
+  })
 }
 
 export default {
-    Layout,
-    install
+  Layout,
+  install
 }