@flowingcode/fc-applayout - npm Package Compare versions

Comparing version 0.9.2 to 0.9.3

fc-applayout.js

@@ -20,3 +20,4 @@ /**
 };
-import { LitElement, html, customElement, property, css, query } from 'lit-element';
+import { html, customElement, property, css, query } from 'lit-element';
+import { ThemableElement } from '@vaadin/themable-element/themable-element.js';
 import "@polymer/app-layout/app-scroll-effects/app-scroll-effects";
@@ -36,5 +37,5 @@ import "@polymer/font-roboto/roboto";
  */
-let FcAppLayoutElement = class FcAppLayoutElement extends LitElement {
+let FcAppLayoutElement = class FcAppLayoutElement extends ThemableElement {
     constructor() {
-        super(...arguments);
+        super();
         /**
@@ -45,12 +46,38 @@ * The title of the application
         /**
-         * The number of times the button has been clicked.
+         * Sets if swiping opens the drawer
          */
-        this.count = 0;
+        this.swipeOpen = true;
+        /**
+         * Sets if scrolling up will reveal the header
+         */
+        this.reveals = true;
+        /**
+         * Sets the drawer visibility
+         */
+        this.drawerVisible = true;
+        /**
+        * Sets header fixed
+        */
+        this.fixed = false;
+        /**
+         * The alignment of the drawer on the screen ('left', 'right', 'start' or
+         * 'end'). 'start' computes to left and 'end' to right in LTR layout and
+         * vice versa in RTL layout.
+         */
+        this.drawerAlign = "left";
+        /**
+         * Sets header fixed
+         */
+        this.shadow = true;
+        this.addEventListener('item-clicked', () => {
+            this.drawer.close();
+        });
     }
+    static get is() { return 'fc-applayout'; }
     render() {
         return html `
-      <div style="width: 100%; height: 64px;">
-        <app-header effects="" reveals="" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
-          <app-toolbar style="height: 64px; transform: translate3d(0px, 0px, 0px);">
-            <paper-icon-button @click="${this.clickHandler}" icon="menu" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
+      <div>
+        <app-header part="header" id="header" effects="" ?shadow=${this.shadow} ?reveals=${this.reveals} ?fixed=${this.fixed} style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
+          <app-toolbar part="toolbar" style="transform: translate3d(0px, 0px, 0px);">
+            <paper-icon-button ?hidden=${!this.drawerVisible} @click="${this.clickHandler}" icon="menu" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
             <div style="display:flex; align-items: center; width: 100%">
@@ -62,3 +89,3 @@ <slot name="title"></slot>
         </app-header>
-        <app-drawer swipeOpen="" id="drawer" position="left" style="transition-duration: 200ms; touch-action: pan-y;">
+        <app-drawer part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
           <slot name="profile"></slot>
@@ -69,4 +96,4 @@ <paper-listbox role="listbox" tabindex="0">
         </app-drawer>
+        <div><slot name="content"></slot></div>
       </div>
-      <div><slot name="content"></slot></div>
     `;
@@ -77,4 +104,5 @@ }
     }
-    foo() {
-        return 'foo';
+    firstUpdated() {
+        this.drawer.shadowRoot.getElementById("contentContainer").style.display = "flex";
+        this.drawer.shadowRoot.getElementById("contentContainer").style.flexDirection = "column";
     }
@@ -121,3 +149,5 @@ };
         overflow-y: auto;
+        flex-grow: 1;
     }
+
     :host {
@@ -132,5 +162,20 @@ width: 100%;
 __decorate([
-    property({ type: Number })
-], FcAppLayoutElement.prototype, "count", void 0);
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "swipeOpen", void 0);
 __decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "reveals", void 0);
+__decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "drawerVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "fixed", void 0);
+__decorate([
+    property({ type: String })
+], FcAppLayoutElement.prototype, "drawerAlign", void 0);
+__decorate([
+    property({ type: Boolean })
+], FcAppLayoutElement.prototype, "shadow", void 0);
+__decorate([
     query('#drawer')
@@ -137,0 +182,0 @@ ], FcAppLayoutElement.prototype, "drawer", void 0);

package.json

 {
   "name": "@flowingcode/fc-applayout",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Responsive and flexible LitElement based Application Layout",
@@ -55,3 +55,4 @@ "keywords": [
     "@polymer/paper-listbox": "^3.0.1",
-    "@vaadin/vaadin-ordered-layout": "^1.4.0"
+    "@vaadin/vaadin-ordered-layout": "^1.4.0",
+    "@vaadin/themable-element": "^0.3.0"
   },
@@ -58,0 +59,0 @@ "devDependencies": {

src/fc-applayout.ts

@@ -15,4 +15,5 @@ /**
 
-import {LitElement, html, customElement, property, css, query} from 'lit-element';
+import {html, customElement, property, css, query} from 'lit-element';
 import {AppDrawerElement} from '@polymer/app-layout/app-drawer/app-drawer';
+import {ThemableElement} from '@vaadin/themable-element/themable-element.js';
 import "@polymer/app-layout/app-scroll-effects/app-scroll-effects";
@@ -34,3 +35,5 @@ import "@polymer/font-roboto/roboto";
 @customElement('fc-applayout')
-export class FcAppLayoutElement extends LitElement {
+export class FcAppLayoutElement extends ThemableElement {
+  static get is() { return 'fc-applayout'; }
+
   static styles = css`
@@ -75,3 +78,5 @@ fc-menuitem fc-menuitem {
         overflow-y: auto;
+        flex-grow: 1;
     }
+
     :host {
@@ -89,8 +94,40 @@ width: 100%;
 
+ /**
+  * Sets if swiping opens the drawer
+  */
+  @property({type: Boolean})
+  swipeOpen = true;
+
+ /**
+  * Sets if scrolling up will reveal the header
+  */
+  @property({type: Boolean})
+  reveals = true;    
+
+ /**
+  * Sets the drawer visibility
+  */
+  @property({type: Boolean})
+  drawerVisible = true;    
+  
   /**
-   * The number of times the button has been clicked.
-   */
-  @property({type: Number})
-  count = 0;
+  * Sets header fixed
+  */
+  @property({type: Boolean})
+  fixed = false;    
 
+ /**
+  * The alignment of the drawer on the screen ('left', 'right', 'start' or
+  * 'end'). 'start' computes to left and 'end' to right in LTR layout and
+  * vice versa in RTL layout.
+  */
+  @property({type: String})
+  drawerAlign = "left";
+
+ /**
+  * Sets header fixed
+  */
+  @property({type: Boolean})
+  shadow = true;    
+  
   @query('#drawer')
@@ -101,6 +138,6 @@ drawer!: AppDrawerElement;
     return html`
-      <div style="width: 100%; height: 64px;">
-        <app-header effects="" reveals="" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
-          <app-toolbar style="height: 64px; transform: translate3d(0px, 0px, 0px);">
-            <paper-icon-button @click="${this.clickHandler}" icon="menu" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
+      <div>
+        <app-header part="header" id="header" effects="" ?shadow=${this.shadow} ?reveals=${this.reveals} ?fixed=${this.fixed} style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
+          <app-toolbar part="toolbar" style="transform: translate3d(0px, 0px, 0px);">
+            <paper-icon-button ?hidden=${!this.drawerVisible} @click="${this.clickHandler}" icon="menu" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
             <div style="display:flex; align-items: center; width: 100%">
@@ -112,3 +149,3 @@ <slot name="title"></slot>
         </app-header>
-        <app-drawer swipeOpen="" id="drawer" position="left" style="transition-duration: 200ms; touch-action: pan-y;">
+        <app-drawer part="drawer" align="${this.drawerAlign}" ?swipe-open=${this.swipeOpen} id="drawer" style="transition-duration: 200ms; touch-action: pan-y;">
           <slot name="profile"></slot>
@@ -119,4 +156,4 @@ <paper-listbox role="listbox" tabindex="0">
         </app-drawer>
+        <div><slot name="content"></slot></div>
       </div>
-      <div><slot name="content"></slot></div>
     `;
@@ -129,5 +166,14 @@ }
 
-  foo(): string {
-    return 'foo';
+  constructor() {
+    super();
+    this.addEventListener('item-clicked', () => {
+      this.drawer.close();
+    });
   }
+
+  firstUpdated() {
+    this.drawer.shadowRoot!.getElementById("contentContainer")!.style.display="flex";
+    this.drawer.shadowRoot!.getElementById("contentContainer")!.style.flexDirection="column";
+  }
+
 }
@@ -134,0 +180,0 @@

No alert changes

Improved metrics

Total package byte prevSize

100452

increased by3.1%

Lines of code

882

increased by10.11%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@vaadin/themable-element@^0.3.0

• + Added@vaadin/themable-element@0.3.0(transitive)