npm - @operato/data-tree - Versions diffs - 8.0.0-beta.0 → 8.0.0-beta.2 - Mend

@operato/data-tree 8.0.0-beta.0 → 8.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md +18 -0
package/package.json +3 -3
package/.storybook/main.js +0 -3
package/.storybook/preview.js +0 -52
package/.storybook/server.mjs +0 -8
package/demo/favicon.ico +0 -0
package/demo/index-vertical.html +0 -144
package/demo/index.html +0 -107
package/src/index.ts +0 -3
package/src/ox-tree-horizontal.ts +0 -260
package/src/ox-tree-vertical.ts +0 -227
package/src/ox-tree.ts +0 -262
package/stories/data-tree-horizontal.stories.ts +0 -231
package/stories/data-tree-vertical.stories.ts +0 -231
package/stories/data-tree.stories.ts +0 -90
package/tsconfig.json +0 -26
package/web-dev-server.config.mjs +0 -27
package/web-test-runner.config.mjs +0 -45

package/CHANGELOG.md CHANGED Viewed

@@ -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/data-tree

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-tree",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "description": "User interface for tree structure data",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "storybook:build": "tsc && build-storybook"
   },
   "dependencies": {
-    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.2",
     "i18next": "^23.11.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -87,5 +87,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.storybook/main.js DELETED Viewed

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

package/.storybook/preview.js DELETED Viewed

@@ -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 DELETED Viewed

@@ -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/favicon.ico DELETED Viewed

Binary file

package/demo/index-vertical.html DELETED Viewed

@@ -1,144 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        /* box-sizing: border-box; */
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-      #app {
-        width: 100vw;
-        height: 100dvh;
-        display: flex;
-        flex-direction: column;
-      }
-      #demo {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      grist-demo {
-        flex: 1;
-        overflow: auto;
-      }
-    </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"
-    />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
-  </head>
-  <body>
-    <script type="module">
-      import { LitElement, html, css, render } from 'lit'
-      import '../dist/src/ox-tree-vertical.js'
-      const data = {
-        label: 'Home',
-        children: [
-          {
-            label: 'About us',
-            children: [
-              {
-                label: 'Our history',
-                children: [
-                  {
-                    label: 'Founder'
-                  }
-                ]
-              },
-              {
-                label: 'Our board',
-                children: [
-                  {
-                    label: 'Brad Whiteman'
-                  },
-                  {
-                    label: 'Cynthia Tolken'
-                  },
-                  {
-                    label: 'Bobby Founderson'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            label: 'Our products',
-            children: [
-              {
-                label: 'The Widget 2000™',
-                children: [
-                  {
-                    label: 'Order form'
-                  }
-                ]
-              },
-              {
-                label: 'The McGuffin V2',
-                children: [
-                  {
-                    label: 'Order form'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            label: 'Contact us',
-            children: [
-              {
-                label: 'Social media',
-                children: [
-                  {
-                    label: 'Facebook'
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-      setTimeout(() => {
-        render(
-          html` <ox-tree-vertical .data=${data} id-property="label"></ox-tree-vertical> `,
-          document.querySelector('#demo')
-        )
-      })
-    </script>
-    <div id="app">
-      <div id="demo"></div>
-    </div>
-  </body>
-</html>

package/demo/index.html DELETED Viewed

@@ -1,107 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        /* box-sizing: border-box; */
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-      #app {
-        width: 100vw;
-        height: 100dvh;
-        display: flex;
-        flex-direction: column;
-      }
-      #demo {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      grist-demo {
-        flex: 1;
-        overflow: auto;
-      }
-    </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"
-    />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
-  </head>
-  <body>
-    <script type="module">
-      import { LitElement, html, css, render } from 'lit'
-      import '../dist/src/ox-tree.js'
-      const data = {
-        label: 'AAAAA',
-        children: [
-          {
-            label: 'AAAAA-1',
-            children: [
-              {
-                label: 'AAAAA-2'
-              }
-            ]
-          },
-          {
-            label: 'BBBBB-1',
-            children: [
-              {
-                label: 'BBBBB-2'
-              },
-              {
-                label: 'BBBBB-21'
-              }
-            ]
-          },
-          {
-            label: 'CCCCC-1',
-            children: [
-              {
-                label: 'CCCCC-2'
-              }
-            ]
-          }
-        ]
-      }
-      setTimeout(() => {
-        render(html` <ox-tree .data=${data} id-property="label"></ox-tree> `, document.querySelector('#demo'))
-      })
-    </script>
-    <div id="app">
-      <div id="demo"></div>
-    </div>
-  </body>
-</html>

package/src/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export * from './ox-tree'
-export * from './ox-tree-vertical'
-export * from './ox-tree-horizontal'

package/src/ox-tree-horizontal.ts DELETED Viewed

@@ -1,260 +0,0 @@
-import { html, css, LitElement, TemplateResult, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ScrollbarStyles } from '@operato/styles'
-type TreeItem = {
-  [key: string]: any
-  __status__?: { [state: string]: boolean | string }
-}
-@customElement('ox-tree-horizontal')
-export class TreeViewHorizontal extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: block;
-        overflow: auto;
-        padding: 1em;
-      }
-      ul,
-      li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        position: relative;
-      }
-      ul[root] {
-        margin: 0 0 1em;
-        text-align: left;
-      }
-      ul[root]:before {
-        display: none;
-      }
-      ul {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-      }
-      ul {
-        width: 100%;
-      }
-      li {
-        display: flex;
-        flex-direction: row;
-        position: relative;
-        align-items: center;
-      }
-      li:before,
-      li:after {
-        content: '';
-        position: absolute;
-        left: -1em;
-        border-left: 1px solid #666;
-      }
-      li:before {
-        top: 0;
-        bottom: 50%;
-      }
-      li:after {
-        top: 50%;
-        bottom: 0;
-        border-top: 1px solid #666;
-        width: 1em;
-      }
-      ul[root] > li:after {
-        content: none;
-      }
-      li:first-child:before {
-        top: 50%;
-      }
-      li:last-child:after {
-        bottom: 50%;
-      }
-      li > ul {
-        padding-left: 2em;
-        position: relative;
-      }
-      li > ul:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: -2px;
-        left: 0;
-        border-bottom: 1px solid #666;
-      }
-      code,
-      span {
-        border: solid 0.1em #666;
-        border-radius: 0.2em;
-        display: inline-block;
-        margin: 0.3em 0;
-        position: relative;
-        min-width: 120px;
-        background-color: #f9f9f9;
-      }
-      span[selected] {
-        color: var(--md-sys-color-on-tertiary);
-        background-color: var(--md-sys-color-tertiary);
-      }
-      ul:before,
-      code:before,
-      span:before {
-        content: '';
-        width: 1em;
-        top: 50%;
-        position: absolute;
-        transform: translateY(-50%);
-      }
-      ul:before {
-        left: -1em;
-      }
-      code:before,
-      span:before {
-        left: -1.1em;
-      }
-      ul[root] > li {
-        margin-left: 0;
-      }
-      ul[root] > li:before,
-      ul[root] > li:after,
-      ul[root] > li > code:before,
-      ul[root] > li > span:before {
-        outline: none;
-      }
-      span {
-        display: inline-block;
-        background-color: var(--md-sys-color-surface);
-        div[header] {
-          font-weight: bold;
-          font-size: 0.8em;
-          color: var(--md-sys-color-on-primary, #fff);
-          background-color: var(--md-sys-color-primary, #333);
-          padding: 0.5em 1em;
-          text-align: center;
-          width: 100%;
-          box-sizing: border-box;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
-        div[label] {
-          font-size: 1em;
-          background-color: transparent;
-          padding: 0.5em;
-          text-align: left;
-        }
-        div[description] {
-          font-size: 0.8em;
-          background-color: transparent;
-          padding: 0.5em;
-          text-align: left;
-        }
-      }
-    `
-  ]
-  @property({ type: Object }) data?: TreeItem | TreeItem[]
-  @property({ type: Object }) selected?: TreeItem
-  @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'
-  @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'
-  @property({ type: String, attribute: 'description-property' }) descriptionProperty?: string
-  @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'
-  render() {
-    if (!this.data) return html``
-    const dataArray = Array.isArray(this.data) ? this.data : [this.data]
-    return html`
-      ${dataArray.map(
-        root => html`
-          <ul root>
-            ${this.renderItem(root)}
-          </ul>
-        `
-      )}
-    `
-  }
-  renderItem(item: TreeItem): TemplateResult {
-    const id = item[this.idProperty]
-    const label = item[this.labelProperty]
-    const children = item[this.childrenProperty] as TreeItem[]
-    const expandable = children && children.length > 0
-    const selected = id === this.selected?.[this.idProperty]
-    return html`
-      <li .item=${item}>
-        <span
-          ?selected=${selected}
-          @click=${this.onClickSelect.bind(this)}
-          @dblclick=${this.onClickSelectConfirm.bind(this)}
-        >
-          <div header>${id}</div>
-          <div label>${label}</div>
-          ${this.descriptionProperty ? html` <div description>${item[this.descriptionProperty]}&nbsp;</div>` : nothing}
-        </span>
-        ${expandable
-          ? html`
-              <ul>
-                ${children.map(child => this.renderItem(child))}
-              </ul>
-            `
-          : html``}
-      </li>
-    `
-  }
-  onClickSelect(e: MouseEvent) {
-    e.stopPropagation()
-    const target = e.target as HTMLElement
-    this.selected = (target.closest('li') as any)?.item
-    this.dispatchEvent(
-      new CustomEvent('select', {
-        detail: this.selected
-      })
-    )
-  }
-  onClickSelectConfirm(e: MouseEvent) {
-    e.stopPropagation()
-    const target = e.target as HTMLElement
-    this.selected = (target.closest('li') as any)?.item
-    this.dispatchEvent(
-      new CustomEvent('select-confirm', {
-        detail: this.selected
-      })
-    )
-  }
-}