添加nav导航组件

docs/src/components/Sidebar.svelte

@@ -8,8 +8,8 @@
   import difference from 'lodash/difference'
   import { Svelma as Components } from 'svelma-pro'
 
-  const formComponents = ['Input', 'Field', 'Switch'].sort()
+  const formComponents = ['Input', 'Field', 'Switch'].sort()  // Form
-  const omittedComponents = ['Tab']
+  const omittedComponents = ['Tab','Sider','Content','Footer','Header','NavItem','NavLayout']     // 子选项不显示
   let components = ['Form', ...Object.keys(Components)].sort()
   components = difference(components, [...formComponents, ...omittedComponents])
 

docs/src/routes/components/jsdocs.json

@@ -1,6 +1,5 @@
 {
-  "Button": [
+  "Button": [{
-    {
       "description": "用于按钮的html标记 (选择 'a' or 'button')",
       "type": [
         "String"
@@ -52,8 +51,7 @@
       "values": "<code>任何原生按钮类型 (button</code>, <code>submit</code>, <code>reset)</code>"
     }
   ],
-  "Collapse": [
+  "Collapse": [{
-    {
       "description": "折叠是否打开",
       "type": [
         "boolean"
@@ -72,8 +70,7 @@
       "values": "<code>Any animation that ships with Svelte</code>"
     }
   ],
-  "Carousel":[
+  "Carousel": [{
-    {
       "description": "图片列表(url路径数组)",
       "type": [
         "Array"
@@ -155,8 +152,7 @@
       "values": "slide,fade,cube,coverflow,flip"
     }
   ],
-  "Datepicker": [
+  "Datepicker": [{
-    {
       "description": "当前日期",
       "type": [
         "timestamp"
@@ -204,7 +200,7 @@
     {
       "description": "当disableDateRule为piecemeal时，格式为['2020-3-1','2020-3-2'...] 当disableDateRule为range时，格式为[{start:'2019-3-27'},{end:'2020-3-27'}]",
       "type": [
-        "Array","Object"
+        "Array", "Object"
       ],
       "defaultvalue": "",
       "name": "disableDate",
@@ -221,8 +217,7 @@
     },
     {
       "description": "选取结果，请与外部变量绑定来获取结果值",
-      "type": [
+      "type": [],
-      ],
       "defaultvalue": "''",
       "name": "pickerResult",
       "values": ""
@@ -259,7 +254,7 @@
       "defaultvalue": "left",
       "name": "align",
       "values": "'left'、'center'、'right'"
-    },{
+    }, {
       "description": "图标",
       "type": [
         "Boolean"
@@ -267,7 +262,7 @@
       "defaultvalue": "true",
       "name": "icon",
       "values": ""
-    },{
+    }, {
       "description": "输入框样式类",
       "type": [
         "String"
@@ -277,8 +272,7 @@
       "values": ""
     }
   ],
-  "Timepicker": [
+  "Timepicker": [{
-    {
       "description": "多语言",
       "type": [
         "String"
@@ -328,7 +322,7 @@
       "defaultvalue": "left",
       "name": "align",
       "values": "'left'、'center'、'right'"
-    },{
+    }, {
       "description": "图标",
       "type": [
         "Boolean"
@@ -336,7 +330,7 @@
       "defaultvalue": "true",
       "name": "icon",
       "values": ""
-    },{
+    }, {
       "description": "输入框样式类",
       "type": [
         "String"
@@ -346,8 +340,7 @@
       "values": ""
     }
   ],
-  "Dialog": [
+  "Dialog": [{
-    {
       "description": "Show a header on the dialog with this text",
       "type": [
         "String"
@@ -483,8 +476,7 @@
     }
   ],
   "Dropdown": [],
-  "Field": [
+  "Field": [{
-    {
       "meta": {
         "filename": "Field.svelte",
         "lineno": 6,
@@ -726,8 +718,7 @@
     }
   ],
   "Icon": [],
-  "Input": [
+  "Input": [{
-    {
       "meta": {
         "filename": "Input.svelte",
         "lineno": 7,
@@ -1074,8 +1065,7 @@
   "Layout": [],
   "Sider": [],
   "Message": [],
-  "Modal": [
+  "Modal": [{
-    {
       "description": "是否激活模态框",
       "type": [
         "Boolean"
@@ -1083,7 +1073,7 @@
       "defaultvalue": "false",
       "name": "active",
       "values": ""
-    },{
+    }, {
       "description": "宽度",
       "type": [
         "String"
@@ -1091,7 +1081,7 @@
       "defaultvalue": "false",
       "name": "width",
       "values": ""
-    },{
+    }, {
       "description": "高度",
       "type": [
         "String"
@@ -1099,7 +1089,7 @@
       "defaultvalue": "false",
       "name": "height",
       "values": ""
-    },{
+    }, {
       "description": "标题",
       "type": [
         "String"
@@ -1107,7 +1097,7 @@
       "defaultvalue": "Modal title",
       "name": "title",
       "values": ""
-    },{
+    }, {
       "description": "是否显示左上角关闭按钮",
       "type": [
         "Boolean"
@@ -1115,7 +1105,7 @@
       "defaultvalue": "true",
       "name": "showClose",
       "values": ""
-    },{
+    }, {
       "description": "是否显示遮罩",
       "type": [
         "Boolean"
@@ -1123,7 +1113,7 @@
       "defaultvalue": "true",
       "name": "backdrop",
       "values": ""
-    },{
+    }, {
       "description": "遮罩存在时,是否点击关闭",
       "type": [
         "Boolean"
@@ -1131,7 +1121,7 @@
       "defaultvalue": "true",
       "name": "backdropClose",
       "values": ""
-    },{
+    }, {
       "description": "是否显示头部",
       "type": [
         "Boolean"
@@ -1149,8 +1139,7 @@
   ],
   "Notice": [],
   "Notices": [],
-  "Notification": [
+  "Notification": [{
-    {
       "meta": {
         "filename": "Notification.svelte",
         "lineno": 9,
@@ -1458,8 +1447,7 @@
   "NotificationNotice": [],
   "Pagination": [],
   "PaginationLink": [],
-  "Progress": [
+  "Progress": [{
-    {
       "meta": {
         "filename": "Progress.svelte",
         "lineno": 7,
@@ -1612,8 +1600,7 @@
       "___s": true
     }
   ],
-  "Snackbar": [
+  "Snackbar": [{
-    {
       "meta": {
         "filename": "Snackbar.svelte",
         "lineno": 7,
@@ -1768,8 +1755,7 @@
       "___s": true
     }
   ],
-  "Switch": [
+  "Switch": [{
-    {
       "meta": {
         "filename": "Switch.svelte",
         "lineno": 4,
@@ -1895,8 +1881,7 @@
       "values": ""
     }
   ],
-  "Tab": [
+  "Tab": [{
-    {
       "meta": {
         "filename": "Tab.svelte",
         "lineno": 6,
@@ -1985,8 +1970,7 @@
       "___s": true
     }
   ],
-  "Tabs": [
+  "Tabs": [{
-    {
       "meta": {
         "filename": "Tabs.svelte",
         "lineno": 9,
@@ -2115,8 +2099,7 @@
       "values": "序号"
     }
   ],
-  "Toast": [
+  "Toast": [{
-    {
       "meta": {
         "filename": "Toast.svelte",
         "lineno": 7,
@@ -2270,5 +2253,82 @@
       "memberof": "module:Toast",
       "___s": true
     }
-  ]
+  ],
+  "Nav": [{
+    "description": "高度",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "auto",
+    "name": "height",
+    "values": ""
+  }, {
+    "description": "logo地址",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "/logo.png",
+    "name": "logoImg",
+    "values": ""
+  }, {
+    "description": "logo点击跳转地址",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "/",
+    "name": "logoUrl",
+    "values": ""
+  }, {
+    "description": "logo高度",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "auto",
+    "name": "logoH",
+    "values": ""
+  }, {
+    "description": "logo宽度",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "40px",
+    "name": "logoW",
+    "values": ""
+  }, {
+    "description": "背景",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "rgb(242, 242, 242)",
+    "name": "background",
+    "values": ""
+  }],
+  "NavItem": [{
+      "description": "是否开启下拉列表",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": "false",
+      "name": "isHover",
+      "values": ""
+    },
+    {
+      "description": "开启下拉列表情况下,slot='hover'插入下拉列表内容",
+      "type": [
+        "slot"
+      ],
+      "defaultvalue": "''",
+      "name": "slot",
+      "values": "hover,''"
+    }
+  ],
+  "NavLayout": [{
+    "description": "NavItem布局",
+    "type": [
+      "String"
+    ],
+    "defaultvalue": "center",
+    "name": "navPosition",
+    "values": "center,start,end"
+  }]
 }

docs/src/routes/components/layout.svelte

@@ -6,12 +6,13 @@
     return { jsdoc }
   }
 </script>
+
 <script>
-  import { Layout, Children } from 'svelma-pro'
+  import { Layout, Header, Content, Sider, Footer } from 'svelma-pro'
   import DocHeader from '../../components/DocHeader.svelte'
   import Example from '../../components/Example.svelte'
 
-    import JSDoc from '../../components/JSDoc.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
 
   export let jsdoc
 </script>
@@ -19,37 +20,33 @@
 <DocHeader title="Layout" subtitle="布局" />
 
 <Example
-  code={`<script>
+  code={`<script ✂prettier:content✂="CiAgaW1wb3J0IHsgTGF5b3V0LCBDaGlsZHJlbiB9IGZyb20gJ3N2ZWxtYS1wcm8nOwo=">{}</script><Layout>
-  import { Layout, Children } from 'svelma-pro';
+  <Sider width="100px">
-</script>
-
-<Layout>
-  <Children.Sider width="100px">
     侧边栏
-  </Children.Sider>
+  </Sider>
   <Layout>
-    <Children.Header>
+    <Header>
       头部
-    </Children.Header>
+    </Header>
-    <Children.Content height="300px">
+    <Content height="300px">
       内容
-    </Children.Content>
+    </Content>
-    <Children.Footer>
+    <Footer>
       脚部
-    </Children.Footer>
+    </Footer>
   </Layout>
 </Layout>
 `}>
   <div slot="preview">
     <Layout>
-      <Children.Sider width="100px">侧边栏</Children.Sider>
+      <Sider width="100px">侧边栏</Sider>
       <Layout>
-        <Children.Header>头部</Children.Header>
+        <Header>头部</Header>
-        <Children.Content height="300px">内容</Children.Content>
+        <Content height="300px">内容</Content>
-        <Children.Footer>脚部</Children.Footer>
+        <Footer>脚部</Footer>
       </Layout>
     </Layout>
   </div>
 </Example>
 
-<JSDoc {jsdoc} />
+<JSDoc {jsdoc} />

docs/src/routes/components/nav.svelte

@@ -0,0 +1,115 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/nav.json`)
+    const res2 = await this.fetch(`components/navItem.json`)
+    const res3 = await this.fetch(`components/navLayout.json`)
+    const jsdoc = await res.json()
+    const jsdocItem = await res2.json()
+    const jsdocLayout = await res3.json()
+
+    return { jsdoc ,jsdocItem, jsdocLayout}
+  }
+</script>
+<script>
+  import { Nav, NavItem, NavLayout, Button } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+    import JSDoc from '../../components/JSDoc.svelte'
+
+   export let jsdoc
+  export let jsdocItem
+  export let jsdocLayout
+</script>
+
+<DocHeader title="Nav" subtitle="导航" />
+
+<Example
+  code={`<script>
+  import { Nav, NavItem, NavLayout } from 'svelma-pro'
+</script>
+
+  <Nav logoImg="/logo-192.png">
+    <NavLayout navPosition="center">
+      <NavItem>管理工具</NavItem>
+      <NavItem>开发资源</NavItem>
+    </NavLayout>
+    <NavLayout navPosition="end">
+      <NavItem>
+        <Button type="is-link">登录</Button>
+      </NavItem>
+    </NavLayout>
+  </Nav>
+`}>
+  <div slot="preview" style="position: relative;">
+  <Nav logoImg="/logo-192.png">
+    <NavLayout navPosition="center">
+      <NavItem>管理工具</NavItem>
+      <NavItem>开发资源</NavItem>
+    </NavLayout>
+    <NavLayout navPosition="end">
+      <NavItem>
+        <Button type="is-link">登录</Button>
+      </NavItem>
+    </NavLayout>
+  </Nav>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">下拉列表</p>
+
+<Example
+  code={`<script>
+  import { Nav, NavItem, NavLayout } from 'smx-svelma'
+</script>
+
+  <Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
+      <NavItem isHover={true}>
+        <span style="color:#fff">管理工具</span>
+        <div slot="hover">
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+        </div>
+      </NavItem>
+      <NavItem><span style="color:#fff">开发资源</span></NavItem>
+    </Nav>
+`}>
+  <div slot="preview" style="position: relative;">
+    <Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
+      <NavItem isHover={true}>
+        <span style="color:#fff">管理工具</span>
+        <div slot="hover">
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+        </div>
+      </NavItem>
+      <NavItem><span style="color:#fff">开发资源</span></NavItem>
+    </Nav>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<h2 class="title is-4 is-spaced">API</h2>
+
+<h3 class="subtitle">Nav</h3>
+
+<JSDoc {jsdoc}  showHeader={false}/>
+
+<br>
+<br>
+
+<h3 class="subtitle is-spaced">NavItem</h3>
+
+<JSDoc jsdoc={jsdocItem} showHeader={false}></JSDoc>
+
+<br>
+<br>
+
+<h3 class="subtitle is-spaced">NavLayout</h3>
+
+<JSDoc jsdoc={jsdocLayout} showHeader={false}></JSDoc>

src/components/Layout/index.js

@@ -3,9 +3,7 @@ import Header from './Header.svelte'
 import Content from './Content.svelte'
 import Sider from './Sider.svelte'
 import Footer from './Footer.svelte'
-export {Layout}
+export {
-
-export const Children = {
   Layout,
   Header,
   Content,

src/components/Nav/Nav.svelte

@@ -0,0 +1,46 @@
+<script>
+  import NavItem from "./NavItem.svelte";
+  export let height = "auto";
+  export let logoImg = "/logo.png";
+  export let logoUrl = "/";
+  export let logoH = "auto";
+  export let logoW = 40;
+  export let background = "rgb(242, 242, 242)";
+
+  // export let navPosition = "center"; // center start
+</script>
+
+<style>
+  nav {
+    /* border-bottom: 1px solid rgb(242, 242, 242);; */
+    font-weight: 300;
+    padding: 0 1em;
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    color: #fff;
+    width: 100%;
+    background-size: 100% 100%;
+  }
+  .navbar-img {
+    max-height: 200px;
+  }
+
+
+</style>
+
+<nav class="navbar" style="height: {height}px;background: {background}">
+  <div class="navbar-brand">
+    <a class="navbar-item" href={logoUrl}>
+      <img
+        class="navbar-img"
+        style="width: {logoW}px;height: {logoH}px"
+        src={logoImg}
+        alt="logo" />
+    </a>
+  </div>
+
+  <div id="navMenubd-example" class="navbar-menu">
+  <slot logoW={logoW}></slot>
+  </div>
+</nav>

src/components/Nav/NavItem.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let isHover = false
+</script>
+
+<style>
+  .navbar-item.has-dropdown:focus .navbar-link,
+  .navbar-item.has-dropdown:hover .navbar-link,
+  .navbar-item.has-dropdown.is-active .navbar-link {
+    background-color: unset;
+  }
+</style>
+
+{#if isHover}
+  <div class="navbar-item has-dropdown is-hoverable">
+    <div class="navbar-link">
+      <slot />
+    </div>
+
+    <div id="moreDropdown" class="navbar-dropdown ">
+      <slot name="hover" />
+    </div>
+
+  </div>
+{:else}
+  <div class="navbar-item">
+
+    <slot />
+  </div>
+{/if}

src/components/Nav/NavLayout.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let navPosition = "center"; // center start  end
+  export let logoW;
+</script>
+
+<style>
+  .navbar-center {
+    margin: auto;
+    position: relative;
+  }
+  .navbar-end {
+    position: absolute;
+    height: 100%;
+    right: 0;
+  }
+</style>
+
+{#if navPosition === 'center'}
+  <div
+    class="navbar-start navbar-center"
+    style="right:calc(0.75rem + {logoW / 2})">
+    <slot />
+  </div>
+{:else if navPosition === 'end'}
+  <div class="navbar-end">
+    <slot />
+  </div>
+{:else}
+  <div class="navbar-start">
+    <slot />
+  </div>
+{/if}

src/components/Nav/index.js

@@ -0,0 +1,10 @@
+import Nav from './Nav.svelte'
+import NavItem from './NavItem.svelte'
+import NavLayout from './NavLayout.svelte'
+
+export default Nav;
+export {
+  Nav,
+  NavItem,
+  NavLayout
+}

src/index.js

@@ -11,14 +11,27 @@ import Notification from './components/Notification'
 import Progress from './components/Progress.svelte'
 import Snackbar from './components/Snackbar'
 import Switch from './components/Switch.svelte'
-import { Tabs, Tab } from './components/Tabs'
+import {
+  Tabs,
+  Tab
+} from './components/Tabs'
 import Toast from './components/Toast'
-import {Layout, Children} from './components/Layout'
+import {
+  Layout,
+  Header,
+  Content,
+  Sider,
+  Footer
+} from './components/Layout'
 import Pagination from './components/Pagination/Pagination.svelte'
 import Datepicker from './components/DatePicker/Datepicker.svelte'
 import Timepicker from './components/Timepicker/TimePicker.svelte'
 import Carousel from './components/carousel/Carousel.svelte'
-
+import {
+  Nav,
+  NavItem,
+  NavLayout
+} from './components/Nav'
 export {
   Button,
   Collapse,
@@ -36,11 +49,17 @@ export {
   Tab,
   Toast,
   Layout,
-  Children,
+  Header,
+  Content,
+  Sider,
+  Footer,
   Pagination,
   Datepicker,
   Timepicker,
-  Carousel
+  Carousel,
+  Nav,
+  NavItem,
+  NavLayout
 }
 
 export const Svelma = {
@@ -60,8 +79,15 @@ export const Svelma = {
   Tab,
   Toast,
   Layout,
+  Header,
+  Content,
+  Sider,
+  Footer,
   Pagination,
   Datepicker,
   Timepicker,
-  Carousel
+  Carousel,
-}
+  Nav,
+  NavItem,
+  NavLayout
+}