@operato/layout 8.0.0-alpha.51 → 8.0.0-beta.1

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 || {}
-  }
-}

package/src/layouts/ox-page-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-page-footer-bar')
-class PageFooterBar 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 == 'page-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-page-header-bar.ts

@@ -1,106 +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-page-header-bar')
-class PageHeaderBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-
-        position: relative;
-      }
-
-      *[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 == 'page-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-snack-bar.ts

@@ -1,109 +0,0 @@
-import '@material/web/button/filled-button.js'
-import '@material/web/icon/icon.js'
-
-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;
-      color: var(--md-sys-color-inverse-on-surface, white);
-      background-color: var(--md-sys-color-inverse-surface, black);
-      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;
-    }
-
-    md-filled-button {
-      margin-top: var(--spacing-medium);
-      text-transform: capitalize;
-    }
-
-    :host([active]) {
-      visibility: visible;
-      transform: translate3d(0, -100%, 0);
-    }
-
-    md-icon {
-      vertical-align: middle;
-      max-width: 20px;
-      --md-icon-size: 1.5em;
-    }
-
-    .info {
-      color: var(--status-info-color);
-    }
-
-    .warn {
-      color: var(--status-warning-color);
-    }
-
-    .error {
-      color: var(--status-danger-color);
-    }
-
-    @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>
-        <md-icon class=${this.level}
-          >${this.level == 'info'
-            ? html` notification_important `
-            : this.level == 'warn'
-              ? html` warning `
-              : this.level == 'error'
-                ? html` error `
-                : html``}</md-icon
-        >
-      </span>
-      <span>${this.message}</span>
-      ${this.action && this.action.label
-        ? html`
-            <md-filled-button
-              @click=${() => {
-                store.dispatch({ type: CLOSE_SNACKBAR })
-                this.action.callback()
-              }}
-              >${this.action.label}</md-filled-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

@@ -1,72 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});