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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/popup",
   "description": "Webcomponent popup 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": {
@@ -62,8 +62,8 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -100,5 +100,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,153 +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'
-      import '../dist/src/ox-popup-menu.js'
-      import '../dist/src/ox-popup-menuitem.js'
-      import '@material/web/icon/icon.js'
-      import '@operato/input/ox-checkbox.js'
-
-      import { OxPopupMenu } from '../dist/src/ox-popup-menu.js'
-
-      const parent = document.querySelector('#demo')
-
-      parent.addEventListener('click', function (e) {
-        OxPopupMenu.open({
-          template: html`
-            <ox-popup-menuitem
-              label="article - click me"
-              @selected=${function (e) {
-                console.log('first level article selected')
-              }}
-            >
-              <md-icon slot="icon">article</md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="home">
-              <md-icon slot="icon">home</md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
-
-            <ox-popup-menuitem
-              label="click me to toggle"
-              @selected=${function (e) {
-                const icon = this.querySelector('md-icon')
-                icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-              }}
-              alive-on-select
-            >
-              <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
-              <md-icon slot="icon">verified</md-icon>
-              <ox-popup-menu>
-                <ox-popup-menuitem
-                  label="article"
-                  @selected=${function (e) {
-                    console.log('article selected')
-                  }}
-                  alive-on-select
-                >
-                  <md-icon slot="icon">article</md-icon>
-                </ox-popup-menuitem>
-
-                <ox-popup-menuitem label="home">
-                  <md-icon slot="icon">home</md-icon>
-                </ox-popup-menuitem>
-
-                <ox-popup-menuitem label="verified">
-                  <md-icon slot="icon">verified</md-icon>
-                  <ox-popup-menu>
-                    <ox-popup-menuitem label="article">
-                      <md-icon slot="icon">article</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="home">
-                      <md-icon slot="icon">home</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="verified">
-                      <md-icon slot="icon">verified</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="checkbox">
-                      <input type="checkbox" slot="icon" />
-                    </ox-popup-menuitem>
-
-                    <div separator></div>
-                  </ox-popup-menu>
-                </ox-popup-menuitem>
-
-                <div separator></div>
-
-                <ox-popup-menuitem label="checkbox">
-                  <input type="checkbox" slot="icon" />
-                </ox-popup-menuitem>
-              </ox-popup-menu>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
-              <input type="checkbox" slot="icon" />
-            </ox-popup-menuitem>
-
-            <div separator></div>
-
-            <div menu>Plain Text</div>
-
-            <div menu alive-on-select>
-              <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-            </div>
-
-            <div menu alive-on-select>
-              <input id="checkbox-01" type="checkbox" />
-              <label for="checkbox-01">custom menu</label>
-            </div>
-            <div menu alive-on-select>
-              <label for="text-01">value</label>
-              <input id="text-01" type="text" value="Plain text input" />
-            </div>
-          `,
-          top: e.offsetY,
-          left: e.offsetX,
-          parent
-        })
-      })
-
-      render(html`clike anywhere in this box to popup mini.`, parent)
-    </script>
-  </body>
-</html>

package/demo/ox-popup-list.html

@@ -1,93 +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: 1000px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-
-      #demo-container {
-        display: block;
-      }
-
-      #after-demo {
-        height: 1px;
-        background-color: darkgray;
-        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-container">
-      <div id="demo"></div>
-    </div>
-    <div id="after-demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-popup-list.js'
-      import '@material/web/icon/icon.js'
-      import '@operato/input/ox-checkbox.js'
-
-      import { OxPopupList } from '../dist/src/ox-popup-list.js'
-
-      const parent = document.querySelector('#demo')
-
-      parent.addEventListener('click', function (e) {
-        const popupList = document.querySelector('#popup-list')
-        popupList?.open({
-          top: e.offsetY,
-          left: e.offsetX,
-          height: '200px'
-        })
-      })
-
-      render(
-        html`
-        <span>clike anywhere in this box to ox-select.</span>
-        
-        <ox-popup-list id="popup-list" @select=${e => console.log('select', e.target)} multiple>
-          <div option>Plain Text</div>
-
-          <div option>
-            <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-          </div>
-
-          <div option>
-            <input id="checkbox-01" type="checkbox" />
-            <label for="checkbox-01">custom option</label>
-          </div>
-          
-          <div option>
-            <label for="text-01">value</label>
-            <input id="text-01" type="text" value="Plain text input" />
-          </div>
-        </ox-popup-list>
-      `,
-        parent
-      )
-    </script>
-  </body>
-</html>

package/demo/ox-popup-menu.html

@@ -1,153 +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'
-      import '../dist/src/ox-popup-menu.js'
-      import '../dist/src/ox-popup-menuitem.js'
-      import '@material/web/icon/icon.js'
-      import '@operato/input/ox-checkbox.js'
-
-      import { OxPopupMenu } from '../dist/src/ox-popup-menu.js'
-
-      const parent = document.querySelector('#demo')
-
-      parent.addEventListener('click', function (e) {
-        OxPopupMenu.open({
-          template: html`
-            <ox-popup-menuitem
-              label="article - click me"
-              @selected=${function (e) {
-                console.log('first level article selected')
-              }}
-            >
-              <md-icon slot="icon">article</md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="home">
-              <md-icon slot="icon">home</md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
-
-            <ox-popup-menuitem
-              label="click me to toggle"
-              @selected=${function (e) {
-                const icon = this.querySelector('md-icon')
-                icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-              }}
-              alive-on-select
-            >
-              <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
-              <md-icon slot="icon">verified</md-icon>
-              <ox-popup-menu>
-                <ox-popup-menuitem
-                  label="article"
-                  @selected=${function (e) {
-                    console.log('article selected')
-                  }}
-                  alive-on-select
-                >
-                  <md-icon slot="icon">article</md-icon>
-                </ox-popup-menuitem>
-
-                <ox-popup-menuitem label="home">
-                  <md-icon slot="icon">home</md-icon>
-                </ox-popup-menuitem>
-
-                <ox-popup-menuitem label="verified">
-                  <md-icon slot="icon">verified</md-icon>
-                  <ox-popup-menu>
-                    <ox-popup-menuitem label="article">
-                      <md-icon slot="icon">article</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="home">
-                      <md-icon slot="icon">home</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="verified">
-                      <md-icon slot="icon">verified</md-icon>
-                    </ox-popup-menuitem>
-
-                    <ox-popup-menuitem label="checkbox">
-                      <input type="checkbox" slot="icon" />
-                    </ox-popup-menuitem>
-
-                    <div separator></div>
-                  </ox-popup-menu>
-                </ox-popup-menuitem>
-
-                <div separator></div>
-
-                <ox-popup-menuitem label="checkbox">
-                  <input type="checkbox" slot="icon" />
-                </ox-popup-menuitem>
-              </ox-popup-menu>
-            </ox-popup-menuitem>
-
-            <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
-              <input type="checkbox" slot="icon" />
-            </ox-popup-menuitem>
-
-            <div separator></div>
-
-            <div menu>Plain Text</div>
-
-            <div menu alive-on-select>
-              <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-            </div>
-
-            <div menu alive-on-select>
-              <input id="checkbox-01" type="checkbox" />
-              <label for="checkbox-01">custom menu</label>
-            </div>
-            <div menu alive-on-select>
-              <label for="text-01">value</label>
-              <input id="text-01" type="text" value="Plain text input" />
-            </div>
-          `,
-          top: e.pageY,
-          left: e.pageX,
-          parent
-        })
-      })
-
-      render(html`clike anywhere in this box to popup mini.`, parent)
-    </script>
-  </body>
-</html>