@operato/menu 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/menu

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/menu",
   "description": "Webcomponent menu 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",
   "license": "MIT",
@@ -54,15 +54,15 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/data-grist": "^8.0.0-beta.0",
-    "@operato/graphql": "^8.0.0-beta.0",
-    "@operato/i18n": "^8.0.0-beta.0",
-    "@operato/input": "^8.0.0-beta.0",
-    "@operato/layout": "^8.0.0-beta.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/data-grist": "^8.0.0-beta.1",
+    "@operato/graphql": "^8.0.0-beta.1",
+    "@operato/i18n": "^8.0.0-beta.1",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/layout": "^8.0.0-beta.1",
+    "@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"
   },
   "devDependencies": {
@@ -97,5 +97,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/menu-landscape-styles.ts

@@ -1,149 +0,0 @@
-import { css } from 'lit'
-
-export const MenuLandscapeStyles = css`
-  :host {
-    overflow-x: auto;
-    background-color: var(--md-sys-color-on-secondary-container);
-    --focus-anchor-color: #e6ffa2;
-  }
-
-  :host > div {
-    overflow-x: auto;
-  }
-
-  :host > div > ul {
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    margin: auto;
-    padding: 0;
-    border: var(--border-dim-color);
-    border-width: 0 1px;
-    max-width: 1250px;
-  }
-
-  :host > div > ul > li {
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-  }
-  :host > div > ul > li > a {
-    display: none;
-    font-weight: bold;
-    font-size: var(--fontsize-large);
-  }
-
-  ul[submenus] {
-    flex: 1;
-    list-style: none;
-    overflow-y: hidden;
-    background-color: var(--md-sys-color-on-primary-container);
-    margin: 0;
-    padding: 0;
-    border-left: var(--border-dim-color);
-  }
-
-  ul[submenus] li {
-    min-width: 120px;
-    max-width: 180px;
-  }
-
-  a {
-    display: block;
-    padding: var(--padding-default) var(--padding-default) var(--spacing-small) var(--spacing-large);
-    text-decoration: none;
-    font: normal 14px var(--theme-font);
-    color: var(--md-sys-color-surface);
-    text-transform: capitalize;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  a:hover {
-    font-weight: bold;
-  }
-
-  ul[submenus] a::before {
-    content: '';
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 5px;
-    height: 5px;
-    border: 1px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    background-color: transparent;
-    margin-right: 3px;
-  }
-  ul[submenus] a:hover,
-  ul[submenus] li[active] a {
-    background-color: rgba(var(--secondary-color-rgb), 0.3);
-    color: var(--focus-anchor-color);
-    font-weight: bold;
-  }
-
-  [description] {
-    background-color: var(--md-sys-color-on-primary-container);
-    margin: 0;
-    padding: var(--padding-default) 0;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    color: var(--focus-anchor-color);
-    font-size: 11px;
-  }
-  [description] md-icon {
-    background-color: rgba(0, 0, 0, 0.15);
-    margin-right: 4px;
-    padding: var(--spacing-small);
-    border-radius: 0 5px 5px 0;
-    float: left;
-    font-size: 26px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
-    :host > div {
-      display: initial;
-    }
-    :host > div > ul {
-      flex-direction: column;
-    }
-    a {
-      padding: var(--spacing-large);
-      font: normal 15px var(--theme-font);
-    }
-    li[active] ul {
-      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-    }
-    li li a {
-      display: block;
-      padding: var(--spacing-large) var(--padding-default) var(--spacing-large) 35px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font: normal 14px var(--theme-font);
-    }
-    li li[active] a {
-      font: bold 14px var(--theme-font);
-    }
-    :host > div > ul > li > a {
-      display: block;
-    }
-    :host > div > ul > li > a md-icon {
-      font-size: 1em;
-      position: relative;
-      top: 2px;
-    }
-    [description] {
-      display: none;
-    }
-    ul[submenus] a:hover,
-    ul[submenus] li[active] a {
-      background-color: rgba(var(--secondary-color-rgb), 0.3);
-    }
-  }
-`

package/src/menu-portrait-styles.ts

@@ -1,162 +0,0 @@
-import { css } from 'lit'
-
-export const MenuPortraitStyles = css`
-  :host {
-    display: flex;
-    overflow-y: auto;
-    flex-direction: column;
-    height: 100%;
-    background-color: var(--md-sys-color-on-primary);
-  }
-
-  :host > ul {
-    margin-block-end: 1.5em;
-  }
-
-  ul {
-    list-style: none;
-    margin: var(--spacing-none);
-    padding: var(--spacing-none);
-  }
-
-  [group-label] {
-    padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);
-    border-bottom: var(--border-dim-color);
-    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 12px var(--theme-font);
-    color: var(--md-sys-color-primary);
-    text-transform: uppercase;
-  }
-
-  a {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding: var(--spacing-medium);
-    padding-left: var(--spacing-large);
-    text-decoration: none;
-    font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    color: var(--md-sys-color-on-surface-variant);
-    text-transform: capitalize;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  a:hover {
-    color: var(--md-sys-color-primary);
-    font-weight: bold;
-  }
-
-  a * {
-    vertical-align: middle;
-  }
-
-  a md-icon {
-    --md-icon-size: var(--icon-size-tiny);
-    opacity: 0.7;
-    margin-right: var(--spacing-small);
-    color: var(--md-sys-color-primary);
-  }
-
-  md-icon[filled] {
-    font-variation-settings: 'FILL' 1;
-  }
-
-  a [submenu-button] {
-    --md-icon-size: var(--icon-size-tiny);
-    max-height: 1em;
-    margin-left: auto;
-  }
-
-  a [submenu-button]::before {
-    content: 'chevron_right';
-  }
-
-  a > span {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  li[active] > a [submenu-button]::before {
-    content: 'expand_more';
-  }
-
-  li[active] > a {
-    color: var(--md-sys-color-on-primary-container);
-    font-weight: bold;
-    border-left: 3px solid var(--md-sys-color-primary);
-  }
-
-  li li a {
-    padding: var(--spacing-medium);
-    padding-left: var(--spacing-huge);
-    font: normal 13px var(--theme-font);
-    color: var(--md-sys-color-on-surface-variant);
-  }
-
-  li li[active] a {
-    background-color: var(--md-sys-color-primary-container);
-    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
-      var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    color: var(--md-sys-color-primary);
-  }
-
-  li > ul {
-    overflow-y: hidden;
-    max-height: 0;
-    background-color: var(--md-sys-color-surface);
-
-    transition-property: all;
-    transition-duration: 0.7s;
-  }
-
-  li[active] > ul {
-    max-height: 500px;
-  }
-
-  li[active] > ul[settled] {
-    overflow-y: auto;
-  }
-
-  li li a::before {
-    margin-right: var(--spacing-small);
-  }
-
-  a [badge] {
-    margin-left: auto;
-    background-color: var(--md-sys-color-primary);
-    border-radius: var(--md-sys-shape-corner-full);
-    padding: 0 var(--spacing-small);
-    color: var(--md-sys-color-on-primary);
-    font-size: 0.9em;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
-
-    a {
-      padding: var(--spacing-large);
-      font: normal 15px var(--theme-font);
-    }
-
-    li li a {
-      display: block;
-      padding: var(--spacing-medium);
-      padding-left: var(--spacing-huge);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    }
-
-    li li[active] a {
-      font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
-        var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);
-    }
-  }
-`

package/src/ox-menu-landscape.ts

@@ -1,105 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { navigate, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from './types'
-import { MenuLandscapeStyles } from './menu-landscape-styles'
-
-@customElement('ox-menu-landscape')
-export class OxMenuLandscape extends connect(store)(LitElement) {
-  static styles = [ScrollbarStyles, MenuLandscapeStyles]
-
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: Object }) activeTopLevel?: Menu
-  @property({ type: Object }) activeMenu!: Menu
-  @property({ type: String }) path?: string
-
-  render() {
-    const { menus = [], activeTopLevel, activeMenu } = this
-
-    return html`
-      <div id="wrap" @mousewheel=${this.onWheelEvent.bind(this)}>
-        <ul>
-          ${menus.map(menu =>
-            menu.type == 'group'
-              ? html``
-              : html`
-                  <li ?active=${menu === activeTopLevel}>
-                    <a href=${menu.path || '#'}>
-                      ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.label || menu.name}
-                    </a>
-
-                    <ul submenus>
-                      ${menu.menus?.map(
-                        menu => html`
-                          <li ?active=${menu === activeMenu}>
-                            <a href=${menu.path || '#'}> ${menu.label || menu.name} </a>
-                          </li>
-                        `
-                      )}
-                    </ul>
-
-                    <div description>
-                      ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.description || ''}
-                    </div>
-                  </li>
-                `
-          )}
-        </ul>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('click', (e: Event) => {
-      //@ts-ignore
-      if (e.target.submenu) {
-        /* protect to act move to href. */
-        e.stopPropagation()
-        e.preventDefault()
-
-        //@ts-ignore
-        let menu = e.target.submenu
-
-        this.dispatchEvent(
-          new CustomEvent('active-toplevel', {
-            bubbles: true,
-            detail: this.activeTopLevel === menu ? undefined : menu
-          })
-        )
-
-        return
-      }
-
-      /* to respond even if current acting menu is selected */
-      let href = (e.target as HTMLAnchorElement).href
-      href && location.href === href && navigate(href + '#force', true)
-    })
-
-    /* to hide scrollbar during transition */
-    this.renderRoot.addEventListener('transitionstart', e => {
-      ;(e.target as HTMLElement).removeAttribute('settled')
-    })
-    this.renderRoot.addEventListener('transitionend', e => {
-      ;(e.target as HTMLElement).setAttribute('settled', '')
-    })
-  }
-
-  onWheelEvent(e: WheelEvent) {
-    const { target, deltaY, detail } = e
-
-    if (!(target instanceof HTMLElement)) {
-      return
-    }
-
-    const delta = deltaY || -detail
-    target.scrollLeft -= (delta / Math.abs(delta)) * 10
-
-    e.preventDefault()
-  }
-}

package/src/ox-menu-part.ts

@@ -1,131 +0,0 @@
-import '@material/web/icon/icon.js'
-import './ox-menu-portrait'
-import './ox-menu-landscape'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from './types'
-
-function isActiveMenu(menu: Menu, path: string) {
-  return (
-    menu.path?.split('?')[0] === path ||
-    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
-  )
-}
-
-@customElement('ox-menu-part')
-export class OxMenuPart extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow-y: auto;
-        flex-direction: column;
-        height: 100%;
-        min-width: 200px;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      :host([landscape]) {
-        overflow-x: auto;
-        flex-direction: row;
-        width: 100%;
-        min-height: 20px;
-      }
-
-      ox-menu-portrait,
-      ox-menu-landscape {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: String }) page!: string
-  @property({ type: String }) resourceId?: string
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: String }) orientation?: 'landscape' | 'portrait'
-
-  @state() slotTemplate: any
-  @state() _activeTopLevel?: Menu
-  @state() _activeMenu?: Menu
-  @state() _path?: string
-
-  render() {
-    return html`
-      <slot name="head"></slot>
-      ${this.orientation !== 'landscape'
-        ? html`<ox-menu-portrait
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></ox-menu-portrait>`
-        : html`<ox-menu-landscape
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></ox-menu-landscape>`}
-      <slot name="tail"></slot>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
-      e.stopPropagation()
-      e.preventDefault()
-
-      this._activeTopLevel = (e as CustomEvent).detail
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this.findActivePage()
-    }
-
-    if (changes.has('orientation')) {
-      if (this.orientation == 'portrait') {
-        this.removeAttribute('landscape')
-      } else {
-        this.setAttribute('landscape', '')
-      }
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate, this.renderRoot)
-    }
-  }
-
-  stateChanged(state: any): void {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.liteMenu.menus || []
-    this.slotTemplate = state.liteMenu.slotTemplate
-  }
-
-  private findActivePage() {
-    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
-    var menus = this.menus || []
-    var activeMenu
-
-    this._activeTopLevel = menus.find(menu => {
-      if (isActiveMenu(menu, path)) {
-        activeMenu = menu
-        return true
-      } else if (menu.menus) {
-        activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))
-        return !!activeMenu
-      }
-    })
-
-    this._path = path
-    this._activeMenu = activeMenu || this._activeTopLevel
-  }
-}