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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/layout

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/layout",
   "description": "Webcomponent layout following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -62,10 +62,10 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/popup": "^8.0.0-beta.0",
-    "@operato/shell": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/popup": "^8.0.0-beta.1",
+    "@operato/shell": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "lit": "^3.1.2",
     "pwa-helpers": "^0.9.1"
   },
@@ -101,5 +101,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/src/actions/layout.ts

@@ -1,222 +0,0 @@
-import { TemplateResult } from 'lit'
-
-import { PopupHandle, PopupOptions, setOpenPopupImplementation } from '@operato/popup'
-import { store } from '@operato/shell'
-
-export type Viewpart = {
-  hovering?: 'center' | 'edge' | 'next'
-  show?: boolean
-  size?: string
-  title?: string
-  help?: string
-  level?: VIEWPART_LEVEL
-  closable?: boolean
-  search?: {
-    value?: string
-    handler?: (closure: any, value: string) => void
-    placeholder?: string
-  }
-  filter?: {
-    handler?: (closure: any) => void
-  }
-  backdrop?: boolean
-  temporary?: boolean /* auto remove */
-  resizable?: boolean
-  template?: TemplateResult
-  position?: VIEWPART_POSITION
-  templateProperties?: any
-  zIndex?: number
-}
-
-export type AppendViewpartAction = {
-  name: string
-  viewpart: Viewpart
-  position: VIEWPART_POSITION
-}
-
-export const appendViewpart = ({ name, viewpart, position }: AppendViewpartAction) => {
-  store.dispatch({
-    type: APPEND_VIEWPART,
-    name,
-    viewpart: {
-      ...viewpart,
-      show: viewpart.hovering && viewpart.show ? false : viewpart.show
-    },
-    position
-  })
-
-  if (viewpart.hovering && viewpart.show) {
-    openOverlay(name)
-  }
-}
-
-export const removeViewpart = (name: string) => {
-  store.dispatch({
-    type: REMOVE_VIEWPART,
-    name
-  })
-}
-
-export const updateViewpart = (name: string, override: any) => {
-  store.dispatch({
-    type: UPDATE_VIEWPART,
-    name,
-    override
-  })
-}
-
-export const APPEND_VIEWPART = 'APPEND_VIEWPART'
-export const REMOVE_VIEWPART = 'REMOVE_VIEWPART'
-export const UPDATE_VIEWPART = 'UPDATE_VIEWPART'
-
-export enum VIEWPART_POSITION {
-  HEADERBAR = 'headerbar',
-  NAVBAR = 'navbar',
-  ASIDEBAR = 'asidebar',
-  FOOTERBAR = 'footerbar',
-  PAGE_HEADERBAR = 'page-headerbar',
-  PAGE_FOOTERBAR = 'page-footerbar'
-}
-
-/**
- * 각 뷰파트 스택의 순서를 정하는 속성이다.
- * 뷰파트의 level 속성에 정의되도록 한다.
- * 맨 위/아래/좌측/우측에 보여져야하는 뷰파트는 TOPMOST 속성을 갖도록 하고,
- * 쌓인 순서대로 보여지는 뷰파트는 NORMAL 속성을 갖도록 한다.
- * default 속성은 NORMAL이다.
- */
-export enum VIEWPART_LEVEL {
-  TOPMOST = 'TOPMOST',
-  NORMAL = 'NORMAL'
-}
-
-export enum TOOL_POSITION {
-  FRONT_END = 'FRONT_END',
-  FRONT = 'FRONT',
-  CENTER = 'CENTER',
-  REAR = 'REAR',
-  REAR_END = 'REAR_END'
-}
-
-export const UPDATE_VIEWPORT_WIDTH = 'UPDATE_VIEWPORT_WIDTH'
-
-export const updateLayout = (wide?: boolean) => {
-  store.dispatch({
-    type: UPDATE_VIEWPORT_WIDTH,
-    width: wide ? 'WIDE' : 'NARROW'
-  })
-}
-
-/* overlay navigation */
-var overlaySequence = 0
-
-export const openOverlay = (name: string, options?: any, silent?: boolean) => {
-  var beforeState = history.state
-  var beforeOverlay = beforeState ? beforeState.overlay : undefined
-  var beforeSequence = !beforeOverlay || beforeOverlay.sequence === undefined ? overlaySequence : beforeOverlay.sequence
-  var afterSequence = (overlaySequence = beforeSequence + 1)
-
-  /* store의 layout의 내용을 변경한다. */
-  if (!silent && options) {
-    store.dispatch({
-      type: UPDATE_VIEWPART,
-      name,
-      override: options
-    })
-  }
-
-  /*
-   * 현재 history.state를 확인하고, overlay의 이름이 같은
-   * history에 추가하고 open 동작을 실행한다.
-   */
-  var afterState = Object.assign({}, beforeState || {}, {
-    overlay: { name, sequence: afterSequence, escapable: options?.escapable !== false }
-  })
-
-  history.pushState(afterState, '', location.href)
-
-  window.dispatchEvent(
-    new CustomEvent('popstate', {
-      detail: { state: afterState }
-    })
-  )
-}
-
-export const closeOverlay = (name: string) => {
-  /*
-   * 실제로 overlay를 close하는 작업은 window.onpopstate 핸들러에서 한다.
-   */
-  history.back()
-}
-
-export const toggleOverlay = (name: string, options: any) => {
-  var { name: beforeOverlayName } = (history.state && history.state.overlay) || {}
-
-  if (beforeOverlayName == name) {
-    closeOverlay(name)
-  } else {
-    openOverlay(name, options)
-  }
-}
-
-/*
- * popup handling
- *
- * popup은 overlay의 특별한 형태이다.
- * popup은 open될 때, viewpart를 append 하며, close 될 때 viewpart를 remove 한다.
- * - name: '$popup-${popupSequence}'
- * - position: VIEWPART_POSITION_HEADERBAR
- * - hovering: 'center' | 'next' | 'edge'
- */
-var popupSequence = 0
-
-/**
- * open popup in operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-export const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
-  var name = `$popup-${popupSequence++}`
-
-  appendViewpart({
-    name,
-    viewpart: {
-      hovering: 'center',
-      closable: true,
-      ...options,
-      backdrop: true,
-      show: false,
-      temporary: true /* auto remove */,
-      template
-    },
-    position: VIEWPART_POSITION.HEADERBAR
-  })
-
-  openOverlay(name, options, true)
-
-  var popup = {
-    name,
-    close: () => {
-      /* 현재 overlay state를 확인해서, 자신인 경우에 history.back() 한다. */
-      var state = history.state
-      var overlay = (state || {}).overlay
-
-      overlay && overlay.name == name && history.back()
-    },
-    closed: false
-  } as PopupHandle
-
-  document.addEventListener('overlay-closed', function listener(e) {
-    if (name == (e as CustomEvent).detail) {
-      popup.closed = true
-      popup.onclosed && popup.onclosed()
-      document.removeEventListener('overlay-closed', listener)
-    }
-  })
-
-  return popup
-}
-
-setOpenPopupImplementation(openPopup)

package/src/actions/snackbar.ts

@@ -1,60 +0,0 @@
-import { Action } from 'redux'
-
-export const OPEN_SNACKBAR = 'OPEN_SNACKBAR'
-export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR'
-
-var snackbarTimer: number
-
-export type NotificationLevel = 'info' | 'warn' | 'error'
-export type Notification = {
-  message: string
-  level?: NotificationLevel
-  option?: any
-  ex?: any
-}
-
-export function notify(notification: string | Notification): void {
-  if (typeof notification === 'string') {
-    return notify({ message: notification })
-  }
-
-  var { message, level, option, ex } = notification as Notification
-
-  document.dispatchEvent(
-    new CustomEvent('notify', {
-      detail: { message, level, ex, option }
-    })
-  )
-}
-
-export type SnackbarAction = {
-  type: 'OPEN_SNACKBAR' | 'CLOSE_SNACKBAR'
-  level?: NotificationLevel
-  message?: string
-  action?: any
-}
-
-export const showSnackbar =
-  (
-    level: NotificationLevel,
-    {
-      message,
-      action,
-      timer = 5000
-    }: {
-      message: string
-      action?: any
-      timer?: number
-    }
-  ) =>
-  (dispatch: (param: SnackbarAction) => Action<any>) => {
-    dispatch({
-      type: OPEN_SNACKBAR,
-      level,
-      message,
-      action
-    })
-    window.clearTimeout(snackbarTimer)
-
-    if (timer != -1) snackbarTimer = window.setTimeout(() => dispatch({ type: CLOSE_SNACKBAR }), timer)
-  }

package/src/components/ox-resize-splitter.ts

@@ -1,137 +0,0 @@
-import { LitElement, css, html } from 'lit'
-
-import { customElement } from 'lit/decorators.js'
-
-@customElement('ox-resize-splitter')
-export class ResizeSplitter extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      opacity: 0.7;
-      background-color: var(--splitter-background-color);
-    }
-
-    :host(:hover) {
-      background-color: var(--splitter-hover-background-color);
-    }
-
-    div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  `
-
-  private dragstart?: { x: number; y: number }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.hasAttribute('vertical')) {
-      this.style.width = '3px'
-      this.style.height = '100%'
-      this.style.cursor = 'col-resize'
-    } else {
-      this.style.width = '100%'
-      this.style.height = '3px'
-      this.style.cursor = 'row-resize'
-    }
-  }
-
-  render() {
-    return html` <div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div> `
-  }
-
-  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
-  _throttled(delay: number, fn: (...args: any) => void) {
-    let lastCall = 0
-    return function (...args: any) {
-      const now = new Date().getTime()
-      if (now - lastCall < delay) {
-        return
-      }
-      lastCall = now
-      return fn(...args)
-    }
-  }
-
-  private onMouseDown(e: MouseEvent) {
-    this.dragstart = {
-      x: e.clientX,
-      y: e.clientY
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragstart', {
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    window.addEventListener('mousemove', this.onMouseMoveHandler)
-    window.addEventListener('mouseup', this.onMouseUpHandler)
-
-    e.stopPropagation()
-  }
-
-  onMouseMoveHandler = this._throttled(100, this.onMouseMove.bind(this)) // this.onMouseMove.bind(this)
-  onMouseUpHandler = this.onMouseUp.bind(this)
-
-  private onMouseMove(e: MouseEvent) {
-    if (!this.dragstart) {
-      return
-    }
-
-    e.preventDefault()
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-drag', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
-
-    if (this.hasAttribute('vertical')) {
-      document.body.style.cursor = 'col-resize'
-    } else {
-      document.body.style.cursor = 'row-resize'
-    }
-
-    document.body.style.userSelect = 'none'
-
-    e.stopPropagation()
-  }
-
-  private onMouseUp(e: MouseEvent) {
-    window.removeEventListener('mousemove', this.onMouseMoveHandler)
-    window.removeEventListener('mouseup', this.onMouseUpHandler)
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragend', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-      delete this.dragstart
-    })
-
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-
-    e.stopPropagation()
-  }
-}

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'