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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-tree",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.1",
     "i18next": "^23.11.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -87,5 +87,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

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/index.ts

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

package/src/ox-tree-horizontal.ts

@@ -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
-      })
-    )
-  }
-}

package/src/ox-tree-vertical.ts

@@ -1,227 +0,0 @@
-/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
-
-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-vertical')
-export class TreeViewVertical extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: block;
-        overflow: auto;
-      }
-
-      ul,
-      li {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        position: relative;
-      }
-
-      ul[root] {
-        margin: 0 0 1em;
-        text-align: center;
-      }
-
-      ul[root]:before,
-      ul[root]:after {
-        display: none;
-      }
-
-      ul {
-        display: table;
-      }
-
-      ul {
-        width: 100%;
-      }
-
-      li {
-        display: table-cell;
-        padding: 1em 0;
-        vertical-align: top;
-      }
-
-      li:before {
-        outline: solid 1px #666;
-        content: '';
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      li:first-child:before {
-        left: 50%;
-      }
-
-      li:last-child:before {
-        right: 50%;
-      }
-
-      code,
-      span {
-        border: solid 0.1em #666;
-        border-radius: 0.2em;
-        display: inline-block;
-        margin: 0 0.2em 1em;
-        position: relative;
-        min-width: 120px;
-      }
-
-      span[selected] {
-        color: var(--md-sys-color-on-tertiary);
-        background-color: var(--md-sys-color-tertiary);
-      }
-
-      ul:before,
-      code:before,
-      span:before {
-        outline: solid 1px #666;
-        content: '';
-        height: 1em;
-        left: 50%;
-        position: absolute;
-      }
-
-      ul:before {
-        top: -1em;
-      }
-
-      code:before,
-      span:before {
-        top: -1.1em;
-      }
-
-      ul[root] > li {
-        margin-top: 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
-      })
-    )
-  }
-}