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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [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/context

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/context",
   "description": "Webcomponent context following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -66,12 +66,12 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/help": "^8.0.0-beta.0",
-    "@operato/input": "^8.0.0-beta.0",
-    "@operato/layout": "^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/help": "^8.0.0-beta.2",
+    "@operato/input": "^8.0.0-beta.2",
+    "@operato/layout": "^8.0.0-beta.2",
+    "@operato/shell": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
     "pwa-helpers": "^0.9.1"
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

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/demo/index.html

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-
-      const parent = document.querySelector('#demo')
-
-      render(html`clike anywhere in this box to utils mini.`, parent)
-    </script>
-  </body>
-</html>

package/src/index.ts

@@ -1 +0,0 @@
-export * from './styles/ox-context-toolbar-overlay-style.js'

package/src/layouts/ox-context-page-toolbar.ts

@@ -1,121 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, TemplateResult, nothing } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('ox-context-page-toolbar')
-export class ContextPageToolbar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: row-reverse;
-          gap: var(--spacing-medium);
-
-          position: relative;
-
-          justify-content: end;
-          align-items: center;
-
-          text-transform: capitalize;
-
-          --context-action-bar-button-margin: var(--spacing-none);
-          --context-action-bar-more-button-border-radius: 2px;
-
-          --md-icon-size: 20px;
-        }
-
-        :host > div {
-          display: flex;
-          flex-direction: row;
-
-          align-items: center;
-          gap: var(--spacing-small);
-        }
-
-        md-icon {
-          width: 32px;
-          height: 32px;
-          box-sizing: border-box;
-
-          color: var(--md-sys-color-on-primary-container);
-          background-color: var(--md-sys-color-primary-container);
-          border: 1px solid var(--md-sys-color-primary-container);
-          border-radius: var(--md-sys-shape-corner-small);
-          padding: var(--spacing-small);
-
-          &:hover {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
-            border-color: var(--md-sys-color-primary);
-          }
-        }
-
-        @media screen and (max-width: 460px) {
-          :host {
-            gap: 0;
-          }
-
-          :host > div {
-            gap: 0;
-          }
-
-          md-icon {
-            border-radius: 0;
-          }
-        }
-      `
-    ]
-  }
-
-  @property({ type: Object }) context: any
-  @property({ type: Array }) tools?: {
-    position: TOOL_POSITION
-    template: TemplateResult
-    context?: string
-  }[]
-
-  render() {
-    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])
-    let tools = (this.tools || []).filter(tool => {
-      if (!tool.context || contextKeys.includes(tool.context)) {
-        return tool
-      }
-    })
-
-    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    return html`
-      <slot name="front"></slot>
-      ${frontEndTools.length > 0
-        ? html`<div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`
-        : nothing}
-      ${frontTools.length > 0
-        ? html`<div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>`
-        : nothing}
-      ${centerTools.length > 0
-        ? html`<div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>`
-        : nothing}
-      ${rearTools.length > 0 ? html`<div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}
-      ${rearEndTools.length > 0
-        ? html`<div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`
-        : nothing}
-      <slot name="rear"></slot>
-    `
-  }
-
-  stateChanged(state: any) {
-    if (state.context) {
-      this.tools = state.context?.tools
-    }
-  }
-}

package/src/layouts/ox-context-toolbar.ts

@@ -1,208 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, nothing, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('ox-context-toolbar')
-export class ContextToolbar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-
-          color: var(--context-toolbar-background-color, var(--md-sys-color-on-secondary-container));
-          background-color: var(--context-toolbar-background-color, var(--md-sys-color-secondary-container));
-          box-shadow: var(--context-toolbar-shadow-line);
-
-          padding: 0;
-
-          --md-icon-size: 20px;
-        }
-
-        div[container] {
-          flex: 1;
-
-          display: flex;
-          position: relative;
-          overflow: hidden;
-
-          justify-content: space-between;
-
-          gap: var(--spacing-medium);
-          padding: var(--spacing-small) var(--spacing-medium);
-
-          &:not(:has(> *)) {
-            padding: 0;
-          }
-
-          div {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-
-            align-items: center;
-            overflow: hidden;
-            padding: 0;
-          }
-
-          #front-end md-icon,
-          #front md-icon {
-            border: var(--context-toolbar-function-button-border, none);
-          }
-
-          #front-end md-icon {
-            color: var(--md-sys-color-on-primary-container);
-            background-color: var(--md-sys-color-on-primary-container);
-          }
-
-          #front-end md-icon:hover {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
-          }
-
-          #front md-icon {
-            color: var(--md-sys-color-on-secondary-container);
-            background-color: var(--md-sys-color-secondary-container);
-          }
-
-          #front md-icon:hover {
-            color: var(--md-sys-on-color-secondary);
-            background-color: var(--md-sys-color-secondary);
-          }
-
-          md-icon {
-            color: var(--md-sys-color-on-primary-container);
-            background-color: var(--md-sys-color-primary-container);
-            border: 1px solid var(--md-sys-color-primary-container);
-            border-radius: var(--md-sys-shape-corner-small);
-            padding: var(--spacing-small);
-
-            &:hover {
-              color: var(--md-sys-color-on-primary);
-              background-color: var(--md-sys-color-primary);
-            }
-          }
-
-          div md-icon {
-            border-radius: 0;
-          }
-
-          div md-icon:first-child {
-            border-top-left-radius: var(--md-sys-shape-corner-small);
-            border-bottom-left-radius: var(--md-sys-shape-corner-small);
-          }
-
-          div md-icon:last-child {
-            border-top-right-radius: var(--md-sys-shape-corner-small);
-            border-bottom-right-radius: var(--md-sys-shape-corner-small);
-          }
-
-          #center {
-            flex: 1;
-            justify-content: end;
-          }
-        }
-
-        @media only screen and (max-width: 460px) {
-          div[container] {
-            padding: 0;
-            gap: 0;
-            --md-assist-chip-container-shape: 0;
-          }
-
-          div[container] div md-icon {
-            border-radius: 0 !important;
-          }
-
-          div[container] div md-icon:not(:last-child) {
-            border-right-width: 0;
-          }
-        }
-      `
-    ]
-  }
-
-  @state() private context: any
-  @state() private tools?: any[]
-
-  @query('[container]') private container!: HTMLDivElement
-
-  render() {
-    if (this.context.toolbar === false) {
-      return nothing
-    }
-
-    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])
-    let tools = (this.tools || []).filter(tool => {
-      if (!tool.context || contextKeys.includes(tool.context)) {
-        return tool
-      }
-    })
-
-    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    return html`
-      <div container>
-        ${frontEndTools.length > 0
-          ? html`<div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`
-          : nothing}
-        ${frontTools.length > 0
-          ? html`<div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>`
-          : nothing}
-        ${centerTools.length > 0
-          ? html`<div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>`
-          : nothing}
-        ${rearTools.length > 0
-          ? html`<div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>`
-          : nothing}
-        ${rearEndTools.length > 0
-          ? html`<div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`
-          : nothing}
-      </div>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    requestAnimationFrame(() => {
-      /*
-        하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.
-        &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.
-        &:not(:has(> *)) 가 필요없으나, 남겨 두었음.
-      */
-      if (!this.container) {
-        return
-      }
-
-      const children = this.container.querySelectorAll('*')
-
-      let zero = true
-
-      // 모든 하위 엘리먼트의 높이를 확인
-      for (const child of Array.from(children)) {
-        if ((child as HTMLElement).offsetHeight !== 0) {
-          zero = false
-          break
-        }
-      }
-
-      // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경
-      this.container.style.padding = zero ? '0' : 'revert-layer'
-    })
-  }
-
-  stateChanged(state: any) {
-    if (state.context) {
-      this.tools = state.context.tools || []
-      this.context = state.route.context || {}
-    }
-  }
-}

package/src/styles/ox-context-toolbar-overlay-style.ts

@@ -1,58 +0,0 @@
-import { css } from 'lit'
-
-export const ContextToolbarOverlayStyle = css`
-  :host {
-    display: block;
-
-    background-color: var(--context-ui-background-color);
-    box-shadow: var(--context-ui-box-shadow);
-    padding: var(--context-ui-padding);
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow-y: auto;
-  }
-
-  li {
-    display: flex;
-
-    border-bottom: var(--context-ui-list-border-bottom);
-    padding: var(--context-ui-list-padding);
-  }
-
-  li > md-icon {
-    font-size: 1em;
-
-    padding: var(--context-ui-padding);
-    color: var(--context-ui-list-color);
-  }
-
-  li > span {
-    margin: auto 0;
-    flex: 1;
-
-    color: var(--context-ui-list-color);
-  }
-
-  li:hover md-icon,
-  li:hover span {
-    color: #fff;
-  }
-
-  li:hover {
-    cursor: pointer;
-
-    border-bottom: var(--context-ui-list-border-hover-bottom);
-  }
-
-  @media (max-width: 460px) {
-    :host {
-      min-width: 100%;
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-`