@operato/layout 0.3.21 → 0.3.27

package/src/layouts/ox-footer-bar.ts

@@ -0,0 +1,106 @@
+import '../components/ox-floating-overlay.js'
+import '../components/ox-resize-splitter.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
+import store from '../initializer.js'
+
+@customElement('ox-footer-bar')
+class FooterBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-flow: column-reverse nowrap;
+        align-items: stretch;
+        position: relative;
+      }
+
+      *[footerbar] {
+        display: block;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          padding-bottom: 0;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
+
+  @state() viewparts: { [name: string]: Viewpart } = {}
+
+  private _startHeight: number = 0
+
+  render() {
+    var viewparts = this.viewparts
+    var footerbars = Object.keys(viewparts)
+      .map(name => {
+        return {
+          name,
+          ...viewparts[name]
+        }
+      })
+      .filter(viewpart => viewpart.position == 'footerbar' && (!this.fullbleed || viewpart.hovering))
+
+    footerbars = [
+      ...footerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+      ...footerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+    ]
+
+    return html`
+      ${footerbars.map(footerbar =>
+        !footerbar.show
+          ? html``
+          : footerbar.hovering
+          ? html`
+              <ox-floating-overlay
+                .backdrop=${footerbar.backdrop}
+                direction="up"
+                .hovering=${footerbar.hovering}
+                .name=${footerbar.name}
+                .title=${footerbar.title}
+                .help=${footerbar.help}
+                .size=${footerbar.size}
+                .closable=${footerbar.closable}
+                .templateProperties=${footerbar.templateProperties}
+                >${footerbar.template}</ox-floating-overlay
+              >
+            `
+          : html`
+              <div footerbar>${footerbar.template}</div>
+              ${footerbar.resizable
+                ? html`
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
+                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
+                    ></ox-resize-splitter>
+                  `
+                : html``}
+            `
+      )}
+    `
+  }
+
+  resizeStart(e: CustomEvent) {
+    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
+  }
+
+  resizeDrag(e: CustomEvent) {
+    var delta = e.detail
+
+    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')
+    Array.from(x).forEach(ele => {
+      ;(ele as HTMLElement).style.height = `${this._startHeight - delta.y}px`
+    })
+  }
+
+  stateChanged(state: any) {
+    this.viewparts = state.layout.viewparts || {}
+  }
+}

package/src/layouts/ox-header-bar.ts

@@ -0,0 +1,103 @@
+import '../components/ox-floating-overlay.js'
+import '../components/ox-resize-splitter.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
+import store from '../initializer.js'
+
+@customElement('ox-header-bar')
+class HeaderBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+
+        position: relative;
+
+        background-color: var(--header-bar-background-color);
+      }
+
+      *[headerbar] {
+        display: block;
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
+
+  @state() viewparts: { [name: string]: Viewpart } = {}
+
+  private _startHeight: number = 0
+
+  render() {
+    var viewparts = this.viewparts
+    var headerbars = Object.keys(viewparts)
+      .map(name => {
+        return {
+          name,
+          ...viewparts[name]
+        }
+      })
+      .filter(viewpart => viewpart.position == 'headerbar' && (!this.fullbleed || viewpart.hovering))
+
+    headerbars = [
+      ...headerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+      ...headerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+    ]
+
+    return html`
+      ${headerbars.map(headerbar =>
+        !headerbar.show
+          ? html``
+          : headerbar.hovering
+          ? html`
+              <ox-floating-overlay
+                .backdrop=${headerbar.backdrop}
+                direction="down"
+                .hovering=${headerbar.hovering}
+                .name=${headerbar.name}
+                .title=${headerbar.title}
+                .help=${headerbar.help}
+                .size=${headerbar.size}
+                .closable=${headerbar.closable}
+                .templateProperties=${headerbar.templateProperties}
+                >${headerbar.template}</ox-floating-overlay
+              >
+            `
+          : html`
+              <div headerbar>${headerbar.template}</div>
+              ${headerbar.resizable
+                ? html`
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
+                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
+                    ></ox-resize-splitter>
+                  `
+                : html``}
+            `
+      )}
+    `
+  }
+
+  resizeStart(e: CustomEvent) {
+    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
+  }
+
+  resizeDrag(e: CustomEvent) {
+    var delta = e.detail
+
+    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')
+    Array.from(x).forEach(ele => {
+      ;(ele as HTMLElement).style.height = `${this._startHeight + delta.y}px`
+    })
+  }
+
+  stateChanged(state: any) {
+    this.viewparts = state.layout.viewparts || {}
+  }
+}

package/src/layouts/ox-nav-bar.ts

@@ -0,0 +1,108 @@
+import '../components/ox-floating-overlay.js'
+import '../components/ox-resize-splitter.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+
+import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
+import store from '../initializer.js'
+
+@customElement('ox-nav-bar')
+class NavBar extends connect(store)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+
+        position: relative;
+
+        background-color: var(--nav-bar-background-color);
+      }
+
+      *[navbar] {
+        display: flex;
+        flex-direction: row;
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
+
+  @state() viewparts: { [name: string]: Viewpart } = {}
+
+  private _startWidth: number = 0
+
+  render() {
+    var viewparts = this.viewparts
+    var navbars = Object.keys(viewparts)
+      .map(name => {
+        return {
+          name,
+          ...viewparts[name]
+        }
+      })
+      .filter(viewpart => viewpart.position == 'navbar' && (!this.fullbleed || viewpart.hovering))
+
+    navbars = [
+      ...navbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+      ...navbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+    ]
+
+    return html`
+      ${navbars.map(navbar =>
+        !navbar.show
+          ? html``
+          : navbar.hovering
+          ? html`
+              <ox-floating-overlay
+                .backdrop=${navbar.backdrop}
+                direction="right"
+                .hovering=${navbar.hovering}
+                .name=${navbar.name}
+                .title=${navbar.title}
+                .help=${navbar.help}
+                .size=${navbar.size}
+                .closable=${navbar.closable}
+                .templateProperties=${navbar.templateProperties}
+                >${navbar.template}</ox-floating-overlay
+              >
+            `
+          : html`
+              <div navbar>${navbar.template}</div>
+              ${navbar.resizable
+                ? html`
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
+                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
+                      vertical
+                    ></ox-resize-splitter>
+                  `
+                : html``}
+            `
+      )}
+    `
+  }
+
+  resizeStart(e: CustomEvent) {
+    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetWidth
+  }
+
+  resizeDrag(e: CustomEvent) {
+    var delta = e.detail
+
+    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')
+    Array.from(x).forEach(ele => {
+      ;(ele as HTMLElement).style.width = `${this._startWidth + delta.x}px`
+    })
+  }
+
+  stateChanged(state: any) {
+    this.viewparts = state.layout.viewparts || {}
+  }
+}

package/src/layouts/ox-snack-bar.ts

@@ -0,0 +1,108 @@
+import '@material/mwc-button'
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { CLOSE_SNACKBAR } from '../actions/snackbar'
+import store from '../initializer.js'
+
+@customElement('ox-snack-bar')
+class SnackBar extends connect(store)(LitElement) {
+  static styles = css`
+    :host {
+      display: block;
+      position: fixed;
+      top: 100%;
+      left: 0;
+      right: 0;
+      padding: 12px;
+      background-color: black;
+      color: white;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      text-align: center;
+      will-change: transform;
+      transform: translate3d(0, 0, 0);
+      transition-property: visibility, transform;
+      transition-duration: 0.2s;
+      visibility: hidden;
+    }
+
+    :host([active]) {
+      visibility: visible;
+      transform: translate3d(0, -100%, 0);
+    }
+
+    mwc-icon {
+      --mdc-icon-size: 1.2em;
+      vertical-align: middle;
+      max-width: 20px;
+    }
+
+    mwc-button {
+      display: block;
+    }
+
+    .info {
+      color: green;
+    }
+
+    .warn {
+      color: yellow;
+    }
+
+    .error {
+      color: red;
+    }
+
+    @media (min-width: 460px) {
+      :host {
+        width: 320px;
+        margin: auto;
+      }
+    }
+  `
+
+  @property({ type: String }) level: 'info' | 'warn' | 'error' = 'info'
+  @property({ type: String }) message: string = ''
+  @property({ type: Boolean, reflect: true }) active: boolean = false
+  @property({ type: Object }) action: any
+
+  render() {
+    return html`
+      <span>
+        <mwc-icon class=${this.level}
+          >${this.level == 'info'
+            ? html` notification_important `
+            : this.level == 'warn'
+            ? html` warning `
+            : this.level == 'error'
+            ? html` error `
+            : html``}</mwc-icon
+        >
+      </span>
+      <span>${this.message}</span>
+      ${this.action && this.action.label
+        ? html`
+            <mwc-button
+              @click=${() => {
+                store.dispatch({ type: CLOSE_SNACKBAR })
+                this.action.callback()
+              }}
+              >${this.action.label}</mwc-button
+            >
+          `
+        : html``}
+    `
+  }
+
+  stateChanged(state: any) {
+    var { level, message, snackbarOpened, action } = state.snackbar || {}
+
+    this.level = level
+    this.message = message
+    this.active = snackbarOpened
+    this.action = action
+  }
+}

package/src/reducers/layout.ts

@@ -0,0 +1,72 @@
+import { APPEND_VIEWPART, REMOVE_VIEWPART, UPDATE_VIEWPART, UPDATE_VIEWPORT_WIDTH, Viewpart } from '../actions/layout'
+
+const INITIAL_STATE: {
+  viewparts: { [name: string]: Viewpart }
+  width: 'WIDE' | 'NARROW'
+} = {
+  viewparts: {},
+  width: 'WIDE'
+}
+
+const layout = (state = INITIAL_STATE, action: any) => {
+  let viewparts = { ...state.viewparts }
+
+  switch (action.type) {
+    case APPEND_VIEWPART:
+      return {
+        ...state,
+        viewparts: {
+          ...state.viewparts,
+          [action.name]: {
+            ...action.viewpart,
+            position: action.position
+          }
+        }
+      }
+
+    case REMOVE_VIEWPART:
+      delete viewparts[action.name]
+      return {
+        ...state,
+        viewparts
+      }
+
+    case UPDATE_VIEWPART:
+      let viewpart = viewparts[action.name]
+      if (!viewpart) {
+        return state
+      }
+      let override = action.override || {}
+
+      if (viewpart.temporary && override.show === false) {
+        /* temporary viewpart는 show=false가 될 때, 제거되어야 한다. */
+        delete viewparts[action.name]
+        return {
+          ...state,
+          viewparts
+        }
+      } else {
+        return {
+          ...state,
+          viewparts: {
+            ...state.viewparts,
+            [action.name]: {
+              ...viewpart,
+              ...action.override
+            }
+          }
+        }
+      }
+
+    case UPDATE_VIEWPORT_WIDTH:
+      return {
+        ...state,
+        width: action.width
+      }
+
+    default:
+      return state
+  }
+}
+
+export default layout

package/src/reducers/snackbar.ts

@@ -0,0 +1,32 @@
+import { CLOSE_SNACKBAR, OPEN_SNACKBAR, SnackbarAction } from '../actions/snackbar.js'
+
+const INITIAL_STATE = {
+  snackbarOpened: false,
+  level: '',
+  message: '',
+  action: {}
+}
+
+const snackbar = (state = INITIAL_STATE, action: SnackbarAction) => {
+  switch (action.type) {
+    case OPEN_SNACKBAR:
+      return {
+        ...state,
+        snackbarOpened: true,
+        level: action.level || 'info',
+        message: action.message,
+        action: {
+          ...action.action
+        }
+      }
+    case CLOSE_SNACKBAR:
+      return {
+        ...state,
+        snackbarOpened: false
+      }
+    default:
+      return state
+  }
+}
+
+export default snackbar

package/dist/src/ox-layout.d.ts

@@ -1,45 +0,0 @@
-import { LitElement } from 'lit';
-export declare class OxLayout extends LitElement {
-    static styles: import("lit").CSSResult[];
-    _parent?: Element;
-    render(): import("lit-html").TemplateResult<1>;
-    protected _onfocusout: (e: FocusEvent) => void;
-    protected _onkeydown: (e: KeyboardEvent) => void;
-    protected _onkeyup: (e: KeyboardEvent) => void;
-    protected _onclick: (e: MouseEvent) => void;
-    protected _onclose: (e: Event) => void;
-    protected _oncollapse: (e: Event) => void;
-    protected _onwindowblur: (e: Event) => void;
-    connectedCallback(): void;
-    /**
-     * Configuration for opening ox-layout
-     *
-     * @typedef {Object} PopupOpenOptions
-     * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout
-     * @property {Number} top The position-top where the pop-up will be displayed
-     * @property {Number} left The position-left where the pop-up will be displayed
-     * @property {HTMLElement} parent Popup's parent element
-     */
-    /**
-     * Open Popup
-     *
-     * @param {PopupOpenOptions}
-     */
-    static open({ template, top, left, right, bottom, parent }: {
-        template: unknown;
-        top?: number;
-        left?: number;
-        right?: number;
-        bottom?: number;
-        parent?: Element | null;
-    }): void;
-    open({ left, top, right, bottom, silent }: {
-        left?: number;
-        top?: number;
-        right?: number;
-        bottom?: number;
-        silent?: boolean;
-    }): void;
-    guaranteeFocus(): void;
-    close(): void;
-}