@operato/data-tree 1.1.61

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@operato/data-tree",
+  "version": "1.1.61",
+  "description": "User interface for tree structure data",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/operato.git",
+    "directory": "webcomponents/data-tree"
+  },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./ox-tree.js": "./dist/src/ox-tree.js"
+  },
+  "typesVersions": {
+    "*": {
+      "ox-grist.js": [
+        "dist/src/ox-tree.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path ../../.gitignore && prettier \"**/*.ts\" --check --ignore-path ../../.gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path ../../.gitignore && prettier \"**/*.ts\" --write --ignore-path ../../.gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && build-storybook"
+  },
+  "dependencies": {
+    "@operato/styles": "^1.1.53",
+    "i18next": "^21.5.4",
+    "lit": "^2.5.0",
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@open-wc/eslint-config": "^8.0.2",
+    "@open-wc/testing": "^3.1.6",
+    "@types/lodash-es": "^4.17.5",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/dev-server-storybook": "^0.5.4",
+    "@web/test-runner": "^0.15.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.8.4"
+  },
+  "customElements": "custom-elements.json",
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "7b3fe5be41bdb4d84619a89232459bc3b5913418"
+}

package/src/index.ts

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

package/src/ox-tree.ts

@@ -0,0 +1,212 @@
+import { LitElement, css, html, TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+type TreeItem = {
+  label: string
+  children?: TreeItem[]
+  status?: { [state: string]: boolean | string }
+}
+
+@customElement('ox-tree')
+export class OxTree extends LitElement {
+  static styles = [
+    css`
+      ul {
+        list-style: none;
+        padding-left: 20px;
+        overflow: hidden;
+        position: relative;
+      }
+
+      li {
+        cursor: pointer;
+        overflow: hidden;
+      }
+
+      span[expander] {
+        display: inline-block;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        position: relative;
+      }
+
+      span[expander]::before {
+        position: absolute;
+        top: 8px;
+        left: 6px;
+        display: block;
+        content: ' ';
+        border: 4px solid transparent;
+        border-top: 4px solid rgba(0, 0, 0, 0.65);
+      }
+
+      li[collapsed] > span[expander]::before {
+        transform: rotate(-90deg);
+      }
+
+      li[leaf] {
+        padding-left: 20px;
+      }
+
+      span[checkbox] {
+        display: inline-block;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        position: relative;
+      }
+
+      span[checkbox]::before {
+        cursor: pointer;
+        position: absolute;
+        top: 2px;
+        content: ' ';
+        display: block;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+      }
+
+      li[checked='checked'] > span[checkbox]::before {
+        background-color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      li[checked='checked'] > span[checkbox]::after {
+        position: absolute;
+        content: ' ';
+        display: block;
+        top: 4px;
+        left: 5px;
+        width: 5px;
+        height: 9px;
+        border: 2px solid #fff;
+        border-top: none;
+        border-left: none;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+
+      li[checked='half-checked'] > span[checkbox]::before {
+        background-color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      li[checked='half-checked'] > span[checkbox]::after {
+        position: absolute;
+        content: ' ';
+        display: block;
+        top: 9px;
+        left: 3px;
+        width: 10px;
+        height: 2px;
+        background-color: #fff;
+      }
+    `
+  ]
+
+  @property({ type: Object }) data?: TreeItem
+
+  render() {
+    return this.data
+      ? html`
+          <ul @click=${this.onClickItem.bind(this)}>
+            ${this.renderItem(this.data)}
+          </ul>
+        `
+      : html``
+  }
+
+  renderItem(item: TreeItem): TemplateResult {
+    const { label, children, status = {} } = item
+    const expandable = children && children.length > 0
+    const { collapsed, checked } = status
+
+    return html`
+      <li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item}>
+        ${expandable ? html` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html``}
+        <span checkbox></span>
+        ${label}
+        ${expandable && !collapsed
+          ? html`
+              <ul>
+                ${children.map(child => this.renderItem(child))}
+              </ul>
+            `
+          : html``}
+      </li>
+    `
+  }
+
+  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 { children, status } = item
+    children?.forEach(child => this.walkTreeCheckedUpdate(child, checked))
+    item.status = {
+      ...status,
+      checked
+    }
+  }
+
+  updateCheckedAll(item: TreeItem) {
+    const { children, status } = item
+    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.stories.ts

@@ -0,0 +1,64 @@
+import '../src/ox-tree.js'
+import '@material/mwc-icon'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: '3 modes in ox-tree',
+  component: 'ox-tree',
+  argTypes: {
+    data: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  data: object
+}
+
+const Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <ox-tree .data=${data}></ox-tree>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  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'
+          }
+        ]
+      }
+    ]
+  }
+}

package/themes/app-theme.css

@@ -0,0 +1,142 @@
+body {
+  /* theme color */
+  --primary-color-rgb: 130, 105, 96;
+  --primary-color: rgb(var(--primary-color-rgb));
+  --secondary-color-rgb: 78, 78, 90;
+  --secondary-color: rgb(var(--secondary-color-rgb));
+  --focus-color: var(--theme-white-color);
+  --primary-background-color: var(--secondary-color);
+  --secondary-background-color: #283644;
+  --main-section-background-color: #f5f2ee;
+  --theme-white-color: #fff;
+  --theme-black-color: rgba(0, 0, 0, 0.9);
+
+  --focus-background-color: var(--primary-color);
+  --primary-text-color: #3c3938;
+  --secondary-text-color: var(--primary-color);
+
+  --opacity-dark-color: rgba(0, 0, 0, 0.4);
+  --opacity-light-color: rgba(255, 255, 255, 0.8);
+
+  /* status color */
+  --status-success-color: #35a24a;
+  --status-warning-color: #ee8d03;
+  --status-danger-color: #d14946;
+  --status-info-color: #398ace;
+
+  /* common style */
+  --border-radius: 4px;
+  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
+
+  --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
+
+  --theme-font: 'Noto', Helvetica;
+
+  --margin-default: 9px;
+  --margin-narrow: 4px;
+  --margin-wide: 15px;
+  --padding-default: var(--margin-default);
+  --padding-narrow: var(--margin-narrow);
+  --padding-wide: var(--margin-wide);
+
+  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
+  --scrollbar-thumb-hover-color: var(--primary-color);
+
+  --fontsize-default: 14px;
+  --fontsize-small: 13px;
+  --fontsize-large: 16px;
+
+  /* app layout style */
+  --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
+
+  /* title & description style */
+  --title-margin: var(--margin-narrow) 0;
+  --title-font: bold 24px var(--theme-font);
+  --title-text-color: var(--secondary-color);
+  --title-font-mobile: bold 20px var(--theme-font);
+
+  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
+  --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
+  --page-description-color: var(--secondary-text-color);
+
+  --subtitle-padding: 12px 5px 3px 5px;
+  --subtitle-font: bold 18px var(--theme-font);
+  --subtitle-text-color: var(--primary-color);
+  --subtitle-border-bottom: 1px solid var(--primary-color);
+
+  /* icon style */
+  --icon-tiny-size: 24px;
+  --icon-default-size: 36px;
+  --icon-big-size: 48px;
+  --icon-default-color: var(--theme-white-color);
+
+  /* material design component themes */
+  --mdc-theme-on-primary: var(--theme-white-color);
+  --mdc-theme-primary: var(--secondary-text-color);
+  --mdc-theme-on-secondary: var(--theme-white-color);
+  --mdc-theme-secondary: var(--primary-color);
+  --mdc-button-outline-color: var(--primary-color);
+  --mdc-danger-button-primary-color: var(--status-danger-color);
+  --mdc-danger-button-outline-color: var(--status-danger-color);
+  --mdc-button-outline-width: 1px;
+  --mdc-button-horizontal-padding: 16px;
+
+  /* button style */
+  --button-background-color: #fafbfc;
+  --button-background-focus-color: var(--primary-color);
+  --button-border: var(--border-dark-color);
+  --button-border-radius: var(--border-radius);
+  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
+  --button-padding: var(--padding-default);
+  --button-color: var(--secondary-color);
+  --button-font: normal 15px var(--theme-font);
+  --button-text-transform: capitalize;
+  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
+  --button-activ-border: 1px solid var(--primary-color);
+
+  --button-primary-background-color: var(--primary-color);
+  --button-primary-active-background-color: var(--status-success-color);
+  --button-primary-padding: var(--margin-default) var(--margin-wide);
+  --button-primary-color: var(--theme-white-color);
+  --button-primary-font: bold 16px var(--theme-font);
+
+  /* table style */
+  --th-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --th-border-top: 2px solid var(--secondary-color);
+  --th-text-transform: capitalize;
+  --th-font: bold var(--fontsize-small) var(--theme-font);
+  --th-color: rgba(var(--secondary-color-rgb), 0.8);
+
+  --tr-background-color: var(--theme-white-color);
+  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
+  --tr-background-hover-color: #e1f5fe;
+  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+  --td-padding: var(--padding-default);
+  --td-font: normal 13px var(--theme-font);
+  --td-color: var(--secondary-color);
+
+  /* form style */
+  --label-font: normal var(--fontsize-default) var(--theme-font);
+  --label-color: var(--secondary-color);
+  --label-text-transform: capitalize;
+  --input-margin: var(--margin-narrow) 0;
+  --input-padding: var(--padding-default);
+  --input-min-width: 200px;
+  --input-font: normal var(--fontsize-default) var(--theme-font);
+  --input-hint-font: normal var(--fontsize-small) var(--theme-font);
+  --input-hint-color: #666;
+  --input-container-max-width: 900px;
+  --fieldset-margin: var(--padding-wide) 0;
+  --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
+  --legend-padding: var(--padding-default) 0;
+  --legend-color: var(--secondary-text-color);
+  --legend-font: bold 16px var(--theme-font);
+}
+
+@media only screen and (max-width: 460px) {
+  body {
+    /* subtitle style */
+    --subtitle-margin: 0;
+  }
+}

package/themes/form-theme.css

@@ -0,0 +1,75 @@
+body {
+  --form-border: none;
+  --form-margin: var(--margin-wide);
+  --form-max-width: 700px;
+  --form-multi-column-max-width: 100%;
+  --form-sublabel-font: normal 13px var(--theme-font);
+  --form-sublabel-color: var(--secondary-color);
+  --form-grid-gap: 12px 5px;
+
+  --legend-padding: var(--padding-default) 0;
+  --legend-font: bold 16px var(--theme-font);
+  --legend-text-color: var(--secondary-text-color);
+  --legend-border-bottom: 1px solid var(--primary-color);
+
+  --label-padding: 3px 0;
+  --label-font: normal 14px var(--theme-font);
+  --label-color: var(--secondary-color);
+
+  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
+  --input-field-border-radius: var(--border-radius);
+  --input-field-padding: 2px 9px;
+  --input-field-font: normal 14px var(--theme-font);
+
+  --search-panel-background-color: rgba(0, 0, 0, 0.1);
+  --search-panel-search-iconbutton-size: var(--icon-default-size);
+  --search-form-icon-color: var(--primary-color);
+  --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
+  --search-form-box-padding: 15px 30px 15px 15px;
+  --search-form-background-color: #fff;
+  --search-form-narrow-background-color: var(--primary-color);
+  --search-form-narrow-text-color: #fff;
+
+  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
+  --file-uploader-background-color: var(--main-section-background-color);
+  --file-uploader-font: normal 12px/20px var(--theme-font);
+  --file-uploader-color: var(--secondary-color);
+  --file-uploader-icon-color: var(--primary-color);
+  --file-uploader-candrop-background-color: #fffde9;
+  --file-uploader-label-padding: 3px 20px;
+  --file-uploader-label-border-radius: var(--border-radius);
+  --file-uploader-label-background-color: var(--secondary-color);
+  --file-uploader-label-font: normal 12px var(--theme-font);
+  --file-uploader-label-color: #fff;
+  --file-uploader-li-padding: 2px 5px 0px 5px;
+  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+  --file-uploader-li-icon-margin: 2px 0 2px 5px;
+  --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
+  --file-uploader-li-icon-focus-color: var(--primary-color);
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    --label-font: normal 15px var(--theme-font);
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --form-margin: 15px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --label-font: normal 14px var(--theme-font);
+    --input-field-font: normal 15px var(--theme-font);
+    --input-field-padding: 3px 5px;
+  }
+}
+
+@media only screen and (max-width: 925px) {
+  body {
+    --form-margin: 14px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --input-field-padding: 3px 5px;
+  }
+}