@operato/data-tree 7.1.1 → 7.1.3

package/src/ox-tree-horizontal.ts

@@ -0,0 +1,260 @@
+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,8 +1,8 @@
 /* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
 
 import { html, css, LitElement, TemplateResult, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
+import { customElement, property } from 'lit/decorators.js'
+import { ScrollbarStyles } from '@operato/styles'
 type TreeItem = {
   [key: string]: any
   __status__?: { [state: string]: boolean | string }
@@ -11,9 +11,11 @@ type TreeItem = {
 @customElement('ox-tree-vertical')
 export class TreeViewVertical extends LitElement {
   static styles = [
+    ScrollbarStyles,
     css`
       :host {
         display: block;
+        overflow: auto;
       }
 
       ul,
@@ -29,7 +31,8 @@ export class TreeViewVertical extends LitElement {
         text-align: center;
       }
 
-      ul[root]:before {
+      ul[root]:before,
+      ul[root]:after {
         display: none;
       }
 
@@ -142,7 +145,7 @@ export class TreeViewVertical extends LitElement {
     `
   ]
 
-  @property({ type: Object }) data?: TreeItem
+  @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'
@@ -150,13 +153,19 @@ export class TreeViewVertical extends LitElement {
   @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'
 
   render() {
-    return this.data
-      ? html`
+    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(this.data)}
+            ${this.renderItem(root)}
           </ul>
         `
-      : html``
+      )}
+    `
   }
 
   renderItem(item: TreeItem): TemplateResult {

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

@@ -0,0 +1,231 @@
+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'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}