@operato/property-editor 0.1.19 → 0.2.31

package/src/ox-property-editor.ts

@@ -0,0 +1,158 @@
+import { LitElement, css, html } from 'lit'
+import { property, state } from 'lit/decorators.js'
+
+import deepClone from 'lodash/cloneDeep'
+
+export class OxPropertyEditor extends LitElement {
+  static registry: { [type: string]: string } = {}
+
+  public static register(types: { [type: string]: string }) {
+    Object.keys(types).forEach(type => {
+      OxPropertyEditor.registry[type] = types[type]
+    })
+  }
+
+  public static getEditor(type: string): string {
+    return OxPropertyEditor.registry[type]
+  }
+
+  static styles = [
+    css`
+      :host {
+        margin: 5px;
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+
+        align-items: center;
+
+        color: var(--property-sidebar-fieldset-legend-color);
+      }
+
+      :host > * {
+        box-sizing: border-box;
+
+        grid-column: span 7;
+        order: 2;
+
+        align-self: stretch;
+      }
+
+      :host > label {
+        grid-column: span 3;
+        order: 1;
+
+        text-align: right;
+
+        font-size: 0.8em;
+        line-height: 2;
+        text-transform: capitalize;
+
+        align-self: center;
+      }
+
+      :host > input[type='checkbox'] ~ label {
+        grid-column: span 6;
+        order: 2;
+
+        text-align: left;
+      }
+
+      :host > select,
+      :host > input[type='text'],
+      :host > input[type='number'] {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      :host > legend {
+        grid-column: 1 / -1;
+
+        display: inline-block;
+
+        text-align: left;
+        text-transform: capitalize;
+      }
+
+      :host > [fullwidth] {
+        grid-column: 1 / -1;
+      }
+
+      :host > input[type='checkbox'] {
+        grid-column: span 4;
+        order: 1;
+
+        justify-self: end;
+        align-self: center;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: String }) type!: string
+  @property({ type: String }) label!: string
+  @property({ type: String }) placeholder?: string
+  @property({ type: Object }) property: any
+  @property({ type: Object }) host: any
+  @property({ type: Object }) observe?: (value: any) => void
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))
+  }
+
+  editorTemplate(props: { [key: string]: any }) {
+    return html``
+  }
+
+  render() {
+    return html`
+      ${this.editorTemplate(this)}
+      ${this.label
+        ? html`
+            <label for="editor">
+              <i18n-msg msgid=${this._computeLabelId(this.label)}>${this.label}</i18n-msg>
+            </label>
+          `
+        : html``}
+    `
+  }
+
+  @state() __by_me = false
+
+  shouldUpdate(changedProperties: any) {
+    if (this.__by_me) {
+      return false
+    }
+
+    if (changedProperties.has('value')) {
+      this.__by_me = true
+      this.value = deepClone(this.value)
+      this.__by_me = false
+    }
+
+    return true
+  }
+
+  get valueProperty() {
+    return 'value'
+  }
+
+  _computeLabelId(label: string) {
+    if (label.indexOf('label.') >= 0) return label
+
+    return 'label.' + label
+  }
+
+  _valueChanged(e: Event) {
+    e.stopPropagation()
+
+    this.value = deepClone((e.target as any)[this.valueProperty])
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+    if (!this.observe) return
+    this.observe.call(this, this.value)
+  }
+}

package/stories/index.stories.ts

@@ -1,60 +1,52 @@
-import { html, TemplateResult } from 'lit';
-import '../src/property-editor.js';
+import '../index.js'
+
+import { TemplateResult, html } from 'lit'
 
 export default {
   title: 'PropertyEditor',
-  component: 'property-editor',
+  component: 'ox-property-editor',
   argTypes: {
     title: { control: 'text' },
     counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
-};
+    textColor: { control: 'color' }
+  }
+}
 
 interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
 }
 
 interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
+  title?: string
+  counter?: number
+  textColor?: string
+  slot?: TemplateResult
 }
 
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <property-editor
-    style="--property-editor-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
+const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
+  <ox-board-viewer style="--board-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
     ${slot}
-  </property-editor>
-`;
+  </ox-board-viewer>
+`
 
-export const Regular = Template.bind({});
+export const Regular = Template.bind({})
 
-export const CustomTitle = Template.bind({});
+export const CustomTitle = Template.bind({})
 CustomTitle.args = {
-  title: 'My title',
-};
+  title: 'My title'
+}
 
-export const CustomCounter = Template.bind({});
+export const CustomCounter = Template.bind({})
 CustomCounter.args = {
-  counter: 123456,
-};
+  counter: 123456
+}
 
-export const SlottedContent = Template.bind({});
+export const SlottedContent = Template.bind({})
 SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
+  slot: html`<p>Slotted content</p>`
+}
 SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};
+  slot: { table: { disable: true } }
+}

package/test/property-editor.test.ts

@@ -0,0 +1,34 @@
+import '../src/ox-property-editor'
+
+import { expect, fixture } from '@open-wc/testing'
+
+import { OxPropertyEditor } from '../src/ox-property-editor'
+import { html } from 'lit'
+
+describe('OxPropertyEditor', () => {
+  it('has a default title "Hey there" and counter 5', async () => {
+    const el = await fixture<OxPropertyEditor>(html` <ox-property-editor></ox-property-editor> `)
+
+    // expect(el.title).to.equal('Hey there')
+    // expect(el.counter).to.equal(5)
+  })
+
+  it('increases the counter on button click', async () => {
+    const el = await fixture<OxPropertyEditor>(html` <ox-property-editor></ox-property-editor> `)
+    el.renderRoot!.querySelector('button')!.click()
+
+    // expect(el.counter).to.equal(6)
+  })
+
+  it('can override the title via attribute', async () => {
+    const el = await fixture<OxPropertyEditor>(html` <property-editor title="attribute title"></ox-property-editor> `)
+
+    expect(el.title).to.equal('attribute title')
+  })
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<OxPropertyEditor>(html` <ox-property-editor></ox-property-editor> `)
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/tsconfig.json

@@ -16,7 +16,7 @@
     "rootDir": "./",
     "declaration": true,
     "incremental": true,
-    "types": ["node", "mocha", "three"]
+    "types": ["node", "mocha"]
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "*.d.ts"]
 }

package/web-dev-server.config.mjs

@@ -1,16 +1,12 @@
 // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
 
 /** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
+const hmr = process.argv.includes('--hmr')
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
   open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
   watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto'
@@ -18,10 +14,15 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   /** Set appIndex to enable SPA routing */
   // appIndex: 'demo/index.html',
 
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
   plugins: [
     /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
     // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
+  ]
 
   // See documentation for all available options
-});
+})

package/web-test-runner.config.mjs

@@ -1,29 +1,17 @@
 // import { playwrightLauncher } from '@web/test-runner-playwright';
 
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
   files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
+  nodeResolve: true
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto',
 
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
   /** Amount of browsers to run concurrently */
   // concurrentBrowsers: 2,
 
@@ -38,4 +26,4 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   // ],
 
   // See documentation for all available options
-});
+})

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/demo/index-3dish.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/property-angle.js'
-      import '../dist/src/property-3dish.js'
-
-      render(html` <property-3dish></property-3dish> `, document.querySelector('#demo'))
-    </script>
-  </body>
-</html>

package/demo/index-angle.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/property-angle.js'
-
-      const placeholder = 'enter a angle in degree'
-      render(
-        html`
-          <property-angle
-            radian="1"
-            placeholder=${placeholder}
-            @change=${e => console.log(e.target.radian)}
-          ></property-angle>
-        `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/demo/index-button-radio.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/property-buttons-radio.js'
-
-      render(
-        html`
-          <property-buttons-radio @change=${e => console.log(e.target.value)}>
-            <div data-value="top">TOP</div>
-            <div data-value="middle">MID</div>
-            <div data-value="bottom">BOT</div>
-          </property-buttons-radio>
-        `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/dist/src/property-3dish.d.ts

@@ -1,30 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class Property3Dish extends LitElement {
-    static styles: import("lit").CSSResult[];
-    dimension?: {
-        width: number;
-        height: number;
-        depth: number;
-    };
-    translatex?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    rotate?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    scale?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    firstUpdated(): void;
-    _onChange(e: Event): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/property-3dish.js

@@ -1,140 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let Property3Dish = class Property3Dish extends LitElement {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var id = element.id;
-        var prop = id.substr(1);
-        var value = Number(element.value);
-        switch (element.tagName) {
-            case 'PROPERTY-ANGLE':
-                value = Number(element.radian || 0);
-                break;
-        }
-        switch (id) {
-            case 'tx':
-            case 'ty':
-            case 'tz':
-                this.dispatchEvent(new CustomEvent('translate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.translatex,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'rx':
-            case 'ry':
-            case 'rz':
-                this.dispatchEvent(new CustomEvent('rotate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.rotate,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'sx':
-            case 'sy':
-            case 'sz':
-                this.dispatchEvent(new CustomEvent('scale-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.scale,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            default:
-                // dimension
-                this.dispatchEvent(new CustomEvent('dimension-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.dimension,
-                            [prop]: value
-                        }
-                    }
-                }));
-        }
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return html `
-      <span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.z-axes">z-axes</i18n-msg></span>
-
-      <label><i18n-msg msgid="label.dimension">dimension</i18n-msg></label>
-      <input type="number" id="dwidth" .value=${(_a = this.dimension) === null || _a === void 0 ? void 0 : _a.width} />
-      <input type="number" id="dheight" .value=${(_b = this.dimension) === null || _b === void 0 ? void 0 : _b.height} />
-      <input type="number" id="ddepth" .value=${(_c = this.dimension) === null || _c === void 0 ? void 0 : _c.depth} />
-
-      <label><i18n-msg msgid="label.translate">translate</i18n-msg></label>
-      <input type="number" id="tx" .value=${(_d = this.translatex) === null || _d === void 0 ? void 0 : _d.x} />
-      <input type="number" id="ty" .value=${(_e = this.translatex) === null || _e === void 0 ? void 0 : _e.y} />
-      <input type="number" id="tz" .value=${(_f = this.translatex) === null || _f === void 0 ? void 0 : _f.z} />
-
-      <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <property-angle id="rx" .radian=${(_g = this.rotate) === null || _g === void 0 ? void 0 : _g.x}></property-angle>
-      <property-angle id="ry" .radian=${(_h = this.rotate) === null || _h === void 0 ? void 0 : _h.y}></property-angle>
-      <property-angle id="rz" .radian=${(_j = this.rotate) === null || _j === void 0 ? void 0 : _j.z}></property-angle>
-    `;
-    }
-};
-Property3Dish.styles = [
-    css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
-      }
-
-      label {
-        text-align: right;
-      }
-
-      span {
-        text-align: center;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "dimension", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "translatex", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "rotate", void 0);
-__decorate([
-    property({ type: Object })
-], Property3Dish.prototype, "scale", void 0);
-Property3Dish = __decorate([
-    customElement('property-3dish')
-], Property3Dish);
-export { Property3Dish };
-//# sourceMappingURL=property-3dish.js.map

package/dist/src/property-3dish.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-3dish.js","sourceRoot":"","sources":["../../src/property-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyAngle } from './property-angle'\n\n@customElement('property-3dish')\nexport class Property3Dish extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(50px, 1fr));\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n      }\n\n      :host > * {\n        grid-column: span 1;\n      }\n\n      label {\n        text-align: right;\n      }\n\n      span {\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }\n  /*\n   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n   */\n  @property({ type: Object }) translatex?: { x: number; y: number; z: number }\n  @property({ type: Object }) rotate?: { x: number; y: number; z: number }\n  @property({ type: Object }) scale?: { x: number; y: number; z: number }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLElement\n    var id = element.id\n    var prop = id.substr(1)\n    var value = Number((element as HTMLInputElement).value)\n\n    switch (element.tagName) {\n      case 'PROPERTY-ANGLE':\n        value = Number((element as PropertyAngle).radian || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.dispatchEvent(\n          new CustomEvent('translate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.translatex,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.rotate,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.scale,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.dimension,\n                [prop]: value\n              }\n            }\n          })\n        )\n    }\n  }\n\n  render() {\n    return html`\n      <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n      <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n      <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n      <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n      <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n      <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n      <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n      <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n      <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n      <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n      <property-angle id=\"rx\" .radian=${this.rotate?.x}></property-angle>\n      <property-angle id=\"ry\" .radian=${this.rotate?.y}></property-angle>\n      <property-angle id=\"rz\" .radian=${this.rotate?.z}></property-angle>\n    `\n  }\n}\n"]}