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

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

package/src/ox-tree.ts

@@ -1,262 +0,0 @@
-import { LitElement, css, html, TemplateResult } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-type TreeItem = {
-  [key: string]: any
-  __status__?: { [state: string]: boolean | string }
-}
-
-@customElement('ox-tree')
-export class OxTree extends LitElement {
-  static styles = [
-    css`
-      ul {
-        list-style: none;
-        padding-left: 18px;
-        overflow: hidden;
-        position: relative;
-      }
-
-      ul.root {
-        padding-left: 0;
-      }
-
-      li {
-        cursor: pointer;
-        overflow: hidden;
-      }
-
-      div[self] {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-
-      span[expander] {
-        display: inline-block;
-        vertical-align: middle;
-        width: 12px;
-        height: 20px;
-        cursor: pointer;
-        position: relative;
-      }
-
-      span[expander]::before {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -25%);
-        content: ' ';
-        border: 5px solid transparent;
-        border-top: 5px solid var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[collapsed] > div[self] > span[expander]::before {
-        transform: translate(-25%, -50%) rotate(-90deg);
-      }
-
-      li[leaf] {
-        padding-left: 18px;
-      }
-
-      span[checkbox] {
-        display: inline-block;
-        vertical-align: middle;
-        width: 12px;
-        height: 20px;
-        cursor: pointer;
-        position: relative;
-      }
-
-      span[checkbox]::before {
-        cursor: pointer;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        content: ' ';
-        display: block;
-        width: 10px;
-        height: 10px;
-        border: 1px solid var(--md-sys-color-on-primary-container, #1890ff);
-        border-radius: 2px;
-      }
-
-      span[label][selected] {
-        background-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[checked='checked'] > div[self] > span[checkbox]::before {
-        background-color: var(--md-sys-color-on-primary-container, #1890ff);
-        border-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[checked='checked'] > div[self] > span[checkbox]::after {
-        position: absolute;
-        content: ' ';
-        display: block;
-        top: 50%;
-        left: 50%;
-        width: 3px;
-        height: 7px;
-        border: 2px solid #fff;
-        border-top: none;
-        border-left: none;
-        -webkit-transform: translate(-50%, -50%) rotate(45deg);
-        -ms-transform: translate(-50%, -50%) rotate(45deg);
-        transform: translate(-50%, -50%) rotate(45deg);
-      }
-
-      li[checked='half-checked'] > div[self] > span[checkbox]::before {
-        background-color: var(--md-sys-color-on-primary-container, #1890ff);
-        border-color: var(--md-sys-color-on-primary-container, #1890ff);
-      }
-
-      li[checked='half-checked'] > div[self] > span[checkbox]::after {
-        position: absolute;
-        content: ' ';
-        display: block;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 10px;
-        height: 2px;
-        background-color: var(--md-sys-color-surface);
-      }
-    `
-  ]
-
-  @property({ type: Object }) data?: 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: 'children-property' }) childrenProperty: string = 'children'
-
-  render() {
-    return this.data
-      ? html`
-          <ul class="root">
-            ${this.renderItem(this.data)}
-          </ul>
-        `
-      : html``
-  }
-
-  renderItem(item: TreeItem): TemplateResult {
-    const { __status__ = {} } = item
-    const id = item[this.idProperty]
-    const label = item[this.labelProperty]
-    const children = item[this.childrenProperty] as TreeItem[]
-
-    const expandable = children && children.length > 0
-    const { collapsed, checked } = __status__
-
-    const selected =
-      this.selected !== undefined &&
-      this.selected !== null &&
-      id !== undefined &&
-      id !== null &&
-      id === this.selected[this.idProperty]
-
-    return html`
-      <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item}>
-        <div self @click=${this.onClickSelect.bind(this)}>
-          ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}
-          <span checkbox @click=${this.onClickItem.bind(this)}></span>
-          <span label ?selected=${selected}>${label}</span>
-        </div>
-        ${expandable && !collapsed
-          ? 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
-      })
-    )
-  }
-
-  onClickExpander(e: MouseEvent) {
-    e.stopPropagation()
-
-    const target = e.target as HTMLSpanElement
-    const itemElement = target!.closest('li') as HTMLLIElement
-
-    var item = (itemElement as any).item
-    item.__status__ = {
-      ...item.__status__,
-      collapsed: !itemElement.hasAttribute('collapsed')
-    }
-
-    this.requestUpdate()
-  }
-
-  onClickItem(e: MouseEvent) {
-    e.stopPropagation()
-
-    const target = e.target as HTMLSpanElement
-    const itemElement = target!.closest('li') as HTMLLIElement
-
-    var item = (itemElement as any).item
-    var checked = itemElement.getAttribute('checked') || ''
-
-    this.walkTreeCheckedUpdate(item, checked == '' || checked == 'unchecked' ? 'checked' : 'unchecked')
-    this.updateCheckedAll(this.data!)
-
-    this.requestUpdate()
-  }
-
-  walkTreeCheckedUpdate(item: TreeItem, checked: string = '') {
-    const { __status__ } = item
-    const children = item[this.childrenProperty] as TreeItem[]
-
-    children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))
-    item.__status__ = {
-      ...__status__,
-      checked
-    }
-  }
-
-  updateCheckedAll(item: TreeItem) {
-    const { __status__ } = item
-    const children = item[this.childrenProperty] as TreeItem[]
-
-    if (!children || children.length == 0) {
-      return
-    }
-
-    children.forEach(child => this.updateCheckedAll(child))
-
-    var checked: string = ''
-
-    children.forEach(child => {
-      const { __status__ = {} } = child
-
-      if (__status__.checked == 'half-checked') {
-        checked = 'half-checked'
-      } else if (__status__.checked == 'checked') {
-        checked = checked == 'checked' || checked == '' ? 'checked' : 'half-checked'
-      } else {
-        checked = checked == 'unchecked' || checked == '' ? 'unchecked' : 'half-checked'
-      }
-    })
-
-    item.__status__ = {
-      ...__status__,
-      checked
-    }
-  }
-}

package/stories/data-tree-horizontal.stories.ts

@@ -1,231 +0,0 @@
-import '../src/ox-tree-horizontal.js'
-import '@material/web/icon/icon.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: '3 modes in ox-tree-horizontal',
-  component: 'ox-tree-horizontal',
-  argTypes: {
-    data: { control: 'object' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-type TreeItem = {
-  [key: string]: any
-  __status__?: { [state: string]: boolean | string }
-}
-
-interface ArgTypes {
-  data: Array<TreeItem>
-}
-
-const Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`
-  <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/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <style>
-    ox-tree-horizontal {
-      height: 1000px;
-    }
-  </style>
-
-  <div>
-    <ox-tree-horizontal .data=${data} description-property="description"></ox-tree-horizontal>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  data: [
-    {
-      id: 'H000',
-      label: 'Home',
-      children: [
-        {
-          id: 'H001',
-          label: 'About us',
-          children: [
-            {
-              id: 'H101',
-              label: 'Our history',
-              children: [
-                {
-                  id: 'H111',
-                  label: 'Founder',
-                  description: 'long long founder history'
-                }
-              ]
-            },
-            {
-              id: 'H102',
-              label: 'Our board',
-              children: [
-                {
-                  id: 'H121',
-                  label: 'Brad Whiteman'
-                },
-                {
-                  id: 'H122',
-                  label: 'Cynthia Tolken'
-                },
-                {
-                  id: 'H123',
-                  label: 'Bobby Founderson'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'H002',
-          label: 'Our products',
-          children: [
-            {
-              id: 'H201',
-              label: 'The Widget 2000™',
-              children: [
-                {
-                  id: 'H211',
-                  label: 'Order form'
-                }
-              ]
-            },
-            {
-              id: 'H202',
-              label: 'The McGuffin V2',
-              children: [
-                {
-                  id: 'H221',
-                  label: 'Order form'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'H003',
-          label: 'Contact us',
-          children: [
-            {
-              id: 'H301',
-              label: 'Social media',
-              children: [
-                {
-                  id: 'H311',
-                  label: 'Facebook'
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 'H000',
-      label: 'Home',
-      children: [
-        {
-          id: 'H001',
-          label: 'About us',
-          children: [
-            {
-              id: 'H101',
-              label: 'Our history',
-              children: [
-                {
-                  id: 'H111',
-                  label: 'Founder',
-                  description: 'long long founder history'
-                }
-              ]
-            },
-            {
-              id: 'H102',
-              label: 'Our board',
-              children: [
-                {
-                  id: 'H121',
-                  label: 'Brad Whiteman'
-                },
-                {
-                  id: 'H122',
-                  label: 'Cynthia Tolken'
-                },
-                {
-                  id: 'H123',
-                  label: 'Bobby Founderson'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'H002',
-          label: 'Our products',
-          children: [
-            {
-              id: 'H201',
-              label: 'The Widget 2000™',
-              children: [
-                {
-                  id: 'H211',
-                  label: 'Order form'
-                }
-              ]
-            },
-            {
-              id: 'H202',
-              label: 'The McGuffin V2',
-              children: [
-                {
-                  id: 'H221',
-                  label: 'Order form'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'H003',
-          label: 'Contact us',
-          children: [
-            {
-              id: 'H301',
-              label: 'Social media',
-              children: [
-                {
-                  id: 'H311',
-                  label: 'Facebook'
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}