@operato/layout 8.0.0-beta.0 → 8.0.0-beta.2

package/src/components/ox-split-pane.ts

@@ -1,113 +0,0 @@
-import { LitElement, html, css, PropertyValues, nothing } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-split-pane')
-export class OxSplitPane extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: var(--flex-direction, column);
-
-      width: 100%;
-      height: 100%;
-    }
-
-    #splitter {
-      background-color: #ccc;
-      cursor: var(--cursor-shape, col-resize);
-    }
-
-    #splitter {
-      background-color: #ccc;
-      cursor: var(--cursor-shape, col-resize);
-      color: var(--md-sys-color-on-primary-container, #ccc);
-    }
-
-    :host([direction='row']) #splitter {
-      height: 100%;
-      width: 4px;
-    }
-
-    :host([direction='column']) #splitter {
-      width: 100%;
-      height: 4px;
-    }
-
-    ::slotted(*) {
-      overflow: hidden;
-    }
-
-    slot[name='front']::slotted(*) {
-      flex: var(--split-ratio, 0.5);
-    }
-
-    slot[name='back']::slotted(*) {
-      flex: calc(1 - var(--split-ratio, 0.5));
-    }
-  `
-
-  @property({ type: String, attribute: true }) direction: string = 'row'
-  @property({ type: Number, attribute: true }) ratio: number = 0.5
-  @property({ type: Boolean, attribute: true }) resizable: boolean = false
-
-  @query('#splitter') splitter!: HTMLDivElement
-
-  render() {
-    return html`
-      <slot name="front"></slot>
-      ${this.resizable
-        ? html`<div id="splitter" @mousedown=${this.startDragging} direction=${this.direction}></div>`
-        : nothing}
-      <slot name="back"></slot>
-    `
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('direction')) {
-      this.style.setProperty('--flex-direction', this.direction)
-      this.style.setProperty('--cursor-shape', this.direction == 'row' ? 'col-resize' : 'row-resize')
-    }
-
-    if (changes.has('ratio')) {
-      this.style.setProperty('--split-ratio', String(this.ratio))
-    }
-  }
-
-  startDragging(e: MouseEvent) {
-    e.stopPropagation()
-    e.preventDefault()
-
-    document.addEventListener('mousemove', this.drag)
-    document.addEventListener('mouseup', this.stopDragging)
-
-    document.body.style.cursor = this.direction == 'row' ? 'col-resize' : 'row-resize'
-  }
-
-  drag = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-
-    const { width, height, left, top } = this.getBoundingClientRect()
-
-    const mouseX = e.clientX - left
-    const mouseY = e.clientY - top
-
-    if (this.direction == 'row') {
-      const totalWidth = this.offsetWidth
-      this.ratio = mouseX / width
-    } else {
-      const totalHeight = this.offsetHeight
-      this.ratio = mouseY / height
-    }
-  }
-
-  stopDragging = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-
-    document.removeEventListener('mousemove', this.drag)
-    document.removeEventListener('mouseup', this.stopDragging)
-
-    document.body.style.cursor = 'auto'
-  }
-}

package/src/index.ts

@@ -1,16 +0,0 @@
-import './initializer'
-
-export { PopupHandle, PopupOptions } from '@operato/popup'
-
-export * from './layouts/ox-snack-bar.js'
-export * from './layouts/ox-header-bar.js'
-export * from './layouts/ox-nav-bar.js'
-export * from './layouts/ox-aside-bar.js'
-export * from './layouts/ox-footer-bar.js'
-export * from './layouts/ox-page-header-bar.js'
-export * from './layouts/ox-page-footer-bar.js'
-
-export * from './actions/layout'
-export * from './actions/snackbar'
-
-export * from './components/ox-split-pane'

package/src/initializer.ts

@@ -1,113 +0,0 @@
-import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell'
-import { UPDATE_VIEWPART, closeOverlay, openOverlay, openPopup, toggleOverlay } from './actions/layout'
-
-import layout from './reducers/layout'
-import { showSnackbar } from './actions/snackbar'
-import snackbar from './reducers/snackbar'
-
-store.addReducers({
-  layout,
-  snackbar
-})
-
-document.addEventListener('open-overlay', event => {
-  const { name, options } = (event as CustomEvent).detail
-  openOverlay(name, options)
-})
-
-document.addEventListener('close-overlay', event => {
-  const { name } = (event as CustomEvent).detail
-  closeOverlay(name)
-})
-
-document.addEventListener('toggle-overlay', event => {
-  const { name, options } = (event as CustomEvent).detail
-  toggleOverlay(name, options)
-})
-
-document.addEventListener('open-popup', event => {
-  const { template, options, callback } = (event as CustomEvent).detail
-  var popup = openPopup(template, options)
-  if (popup && callback) callback(popup)
-})
-
-document.addEventListener('notify', event => {
-  let { message, level, ex = '', option = {} } = (event as CustomEvent).detail
-
-  switch (level) {
-    case 'error':
-      console.error(message, ex)
-      break
-    case 'warn':
-      console.warn(message, ex)
-      break
-    case 'info':
-      console.info(message)
-      break
-    default:
-      break
-  }
-
-  store.dispatch(
-    showSnackbar(level, {
-      message,
-      ...(option as {
-        action?: any
-        timer?: number
-      })
-    }) as any
-  )
-})
-
-/* overlay handling */
-var overlayStack: any[] = []
-function getLastSequence() {
-  return overlayStack.length > 0 ? overlayStack[overlayStack.length - 1].overlay.sequence : -1
-}
-
-document.addEventListener('keydown', event => {
-  if (overlayStack.length > 0 && (event.key === 'Escape' || event.key === 'Esc')) {
-    history.state?.overlay?.escapable && history.back()
-  }
-})
-
-const historyHandler = (location: string, event: Event) => {
-  var navigated = event instanceof PopStateEvent
-
-  var state = history.state
-  var overlay = state?.overlay
-  var sequence = overlay?.sequence || -1
-
-  var lastSequence = getLastSequence()
-
-  if (overlayStack.length > 0 && sequence < lastSequence) {
-    /* overlay 관련 history가 아닌 경우. */
-    do {
-      let { overlay } = overlayStack.pop()
-      store.dispatch({
-        type: UPDATE_VIEWPART,
-        name: overlay.name,
-        override: { show: false }
-      })
-
-      lastSequence = getLastSequence()
-    } while (sequence < lastSequence)
-  }
-
-  if (!navigated && overlay) {
-    overlayStack.push({ ...state })
-
-    store.dispatch({
-      type: UPDATE_VIEWPART,
-      name: overlay.name,
-      override: { show: true }
-    })
-  }
-}
-
-store.dispatch({
-  type: REGISTER_NAVIGATION_CALLBACK,
-  callback: historyHandler
-})
-
-export default store

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

@@ -1,111 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-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-aside-bar')
-class AsideBar extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-flow: row-reverse nowrap;
-        align-items: stretch;
-
-        position: relative;
-      }
-
-      *[asidebar] {
-        display: block;
-        overflow-y: auto;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startWidth: number = 0
-
-  render() {
-    var viewparts = this.viewparts
-    var asidebars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering))
-
-    asidebars = [
-      ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${asidebars.map(asidebar =>
-        !asidebar.show
-          ? html``
-          : asidebar.hovering
-            ? html`
-                <ox-floating-overlay
-                  .backdrop=${asidebar.backdrop}
-                  direction="left"
-                  .hovering=${asidebar.hovering}
-                  .name=${asidebar.name}
-                  .size=${asidebar.size}
-                  .title=${asidebar.title}
-                  .help=${asidebar.help}
-                  .closable=${asidebar.closable}
-                  .templateProperties=${asidebar.templateProperties}
-                  .historical=${true}
-                  .search=${asidebar.search}
-                  .filter=${asidebar.filter}
-                  z-index=${ifDefined(asidebar.zIndex)}
-                  >${asidebar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div asidebar>${asidebar.template}</div>
-                ${asidebar.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)?.children
-    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-footer-bar.ts

@@ -1,112 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-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;
-        max-width: 100vw;
-      }
-
-      @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}
-                  .historical=${true}
-                  .search=${footerbar.search}
-                  .filter=${footerbar.filter}
-                  z-index=${ifDefined(footerbar.zIndex)}
-                  >${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).children
-    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

@@ -1,108 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-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}
-                  .historical=${true}
-                  .search=${headerbar.search}
-                  .filter=${headerbar.filter}
-                  z-index=${ifDefined(headerbar.zIndex)}
-                  >${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).children
-    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

@@ -1,113 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-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}
-                  .historical=${true}
-                  .search=${navbar.search}
-                  .filter=${navbar.filter}
-                  z-index=${ifDefined(navbar.zIndex)}
-                  >${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).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.width = `${this._startWidth + delta.x}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}