Add components for side menu layout #149

Padax · May 11, 2022 · e297d21 · e297d21
1 parent 0eab113
commit e297d21
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 19 deletions.
diff --git a/dist/index.bundle.js b/dist/index.bundle.js
diff --git a/index.html b/index.html
@@ -126,24 +126,13 @@
 #components-page{
   padding-top:80px;
 }
-#components-page main{
-  display:flex;
-}
-#components-page main>.menu{
-  flex:none;
-  width:150px;height:calc(100vh - 100px);position:sticky;top:80px;left:0px;
-  padding:10px 15px;border-right:1px solid #cccccc;
-}
-#components-page main>.menu>.item{
+#components-page w-sidemenu-layout>w-sidemenu>.item{
   cursor:pointer;padding:5px;
 }
-#components-page main>.menu>.separator{
+#components-page w-sidemenu-layout>w-sidemenu>.separator{
   height:1px;background-color:var(--color-gray-20);
   padding:0px 5px;margin:10px 0px;
 }
-#components-page main>.content{
-  flex:auto;padding:10px;
-}
 </style>
 <script type="module">
 	import wc from "./dist/index.bundle.js";
@@ -313,17 +302,17 @@
   </w-spa-page>
 	<w-spa-page path="/components" id="components-page">
 		<template>
-      <main>
-        <div class="menu">
+      <w-sidemenu-layout position="left">
+        <w-sidemenu>
           <div class="item" onclick="showComponent('w-button');">Button</div>
           <div class="item" onclick="showComponent('w-icon-button');">IconButton</div>
           <div class="item separator"></div>
           <div class="item" onclick="showComponent('w-dialog');">Dialog</div>
           <div class="item" onclick="showComponent('w-alert');">AlertDialog</div>
           <div class="item" onclick="showComponent('w-confirm');">ConfirmDialog</div>
-        </div>
-        <w-section id="component-definition" class="content" cols="1" width="full"></w-section>
-      </main>
+        </w-sidemenu>
+        <w-sidemenu-content id="component-definition"></w-sidemenu-content>
+      </w-sidemenu-layout>
     </template>
   </w-spa-page>
   <w-spa-page path="/documents">

diff --git a/packages/w-components/components/layout/menu/SideMenu.js b/packages/w-components/components/layout/menu/SideMenu.js
@@ -0,0 +1,25 @@
+import WComponent, { DOM, AttributeParser, getWTagName } from "../../../WComponent.js";
+const stylesheet=`
+  :host{}
+`;
+class SideMenu extends WComponent{
+  static attributes = {
+    position: {
+      name: 'position', defaultValue: 'left',
+      parser: (value, attr) => AttributeParser.parseStringAttr(
+        value, attr.defaultValue, /^left$|^right$/
+      )
+    }
+  };
+  static get observedAttributes() {
+    return this.getObservedAttributes(this.attributes);
+  }
+  constructor(){
+    super();
+  }
+  init(){
+    DOM.create("slot", {}, this.shadowRoot);
+  }
+}
+SideMenu.prototype.stylesheet=stylesheet;
+export default SideMenu;
diff --git a/packages/w-components/components/layout/menu/SideMenuContent.js b/packages/w-components/components/layout/menu/SideMenuContent.js
@@ -0,0 +1,18 @@
+import WComponent, { DOM, AttributeParser, getWTagName } from "../../../WComponent.js";
+const stylesheet=`
+  :host{}
+`;
+class SideMenuContent extends WComponent{
+  static attributes = {};
+  static get observedAttributes() {
+    return this.getObservedAttributes(this.attributes);
+  }
+  constructor(){
+    super();
+  }
+  init(){
+    DOM.create("slot", {}, this.shadowRoot);
+  }
+}
+SideMenuContent.prototype.stylesheet=stylesheet;
+export default SideMenuContent;
diff --git a/packages/w-components/components/layout/menu/SideMenuLayout.js b/packages/w-components/components/layout/menu/SideMenuLayout.js
@@ -0,0 +1,45 @@
+import WComponent, { DOM, AttributeParser, getWTagName } from "../../../WComponent.js";
+const stylesheet=`
+  :host{
+    display:flex;
+  }
+  :host>::slotted(w-sidemenu){
+    flex:none;order:1;
+    width:150px;height:calc(100vh - 100px);position:sticky;top:80px;
+    left:0px;right:auto;
+    padding:10px 15px;border-left:none;border-right:1px solid #cccccc;
+  }
+  :host([position='right'])>::slotted(w-sidemenu){
+    order:2;
+    left:auto;right:0px;
+    border-left:1px solid #cccccc;border-right:none;
+  }
+  :host>::slotted(w-sidemenu-content){
+    order:2;
+    flex:auto;padding:15px 20px;
+  }
+  :host([position='right'])>::slotted(w-sidemenu-content){
+    order:1;
+  }
+`;
+class SideMenuLayout extends WComponent{
+  static attributes = {
+    position: {
+      name: 'position', defaultValue: 'left',
+      parser: (value, attr) => AttributeParser.parseStringAttr(
+        value, attr.defaultValue, /^left$|^right$/
+      )
+    }
+  };
+  static get observedAttributes() {
+    return this.getObservedAttributes(this.attributes);
+  }
+  constructor(){
+    super();
+  }
+  init(){
+    DOM.create("slot", {}, this.shadowRoot);
+  }
+}
+SideMenuLayout.prototype.stylesheet=stylesheet;
+export default SideMenuLayout;
diff --git a/packages/w-components/index.js b/packages/w-components/index.js
@@ -5,6 +5,9 @@ import Grid from "./components/layout/Grid.js";
 import Section from "./components/layout/Section.js";
 import Hero from "./components/layout/Hero.js";
 import Card from "./components/layout/Card.js";
+import SideMenuLayout from "./components/layout/menu/SideMenuLayout.js";
+import SideMenu from "./components/layout/menu/SideMenu.js";
+import SideMenuContent from "./components/layout/menu/SideMenuContent.js";
 import Button from "./components/button/Button.js";
 import IconButton from "./components/button/IconButton.js";
 import Dialog from "./components/dialog/Dialog.js";
@@ -47,6 +50,9 @@ const wc={
     defineCustomElement(prefix, 'section', Section);
     defineCustomElement(prefix, 'hero', Hero);
     defineCustomElement(prefix, 'card', Card);
+    defineCustomElement(prefix, 'sidemenu-layout', SideMenuLayout);
+    defineCustomElement(prefix, 'sidemenu', SideMenu);
+    defineCustomElement(prefix, 'sidemenu-content', SideMenuContent);
     defineCustomElement(prefix, 'button', Button);
     defineCustomElement(prefix, 'icon-button', IconButton);
     defineCustomElement(prefix, 'dialog', Dialog);