@operato/property-editor 0.1.19 → 0.2.31

package/.storybook/main.js

@@ -1,3 +1,3 @@
 module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
+}

package/.storybook/server.mjs

@@ -1,8 +1,8 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
+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],
-});
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
+})

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.1.19](https://github.com/hatiolab/operato/compare/v0.1.18...v0.1.19) (2021-11-02)
+### [0.2.31](https://github.com/hatiolab/operato/compare/v0.2.30...v0.2.31) (2021-12-03)
+
+
+### :rocket: New Features
+
+* @operato/property-editor added ([77e9429](https://github.com/hatiolab/operato/commit/77e9429dd6bfe974a283ab192245d68407480659))
+
+
+### :bug: Bug Fix
+
+* things-scene version up ([d5007a0](https://github.com/hatiolab/operato/commit/d5007a0c835e7dc9f8d24b491cba88ac90bc1b41))
+* upgrade things-scene ([b539c39](https://github.com/hatiolab/operato/commit/b539c39e70d285481c8083b4540129e44580b158))
+
+
+
+### [0.2.30](https://github.com/hatiolab/operato/compare/v0.2.29...v0.2.30) (2021-12-01)
 
 **Note:** Version bump only for package @operato/property-editor

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) hatiolab.com
+Copyright (c) Hatiolab Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -12,35 +12,55 @@ npm i property-editor
 
 ```html
 <script type="module">
-  import 'property-editor/property-editor.js';
+  import 'property-editor/property-editor.js'
 </script>
 
 <property-editor></property-editor>
 ```
 
-## Linting and formatting
+## Linting with ESLint, Prettier, and Types
 
-To scan the project for linting and formatting errors, run
+To scan the project for linting errors, run
 
 ```bash
 npm run lint
 ```
 
-To automatically fix linting and formatting errors, run
+You can lint with ESLint and Prettier individually as well
+
+```bash
+npm run lint:eslint
+```
+
+```bash
+npm run lint:prettier
+```
+
+To automatically fix many linting errors, run
 
 ```bash
 npm run format
 ```
 
+You can format using ESLint and Prettier individually as well
+
+```bash
+npm run format:eslint
+```
+
+```bash
+npm run format:prettier
+```
+
 ## Testing with Web Test Runner
 
-To execute a single test run:
+To run the suite of Web Test Runner tests, run
 
 ```bash
 npm run test
 ```
 
-To run the tests in interactive watch mode run:
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
 
 ```bash
 npm run test:watch
@@ -60,7 +80,6 @@ To build a production version of Storybook, run
 npm run storybook:build
 ```
 
-
 ## Tooling configs
 
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

package/custom-elements.json

@@ -0,0 +1,317 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./ox-property-editor"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ox-property-editor.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OxPropertyEditor",
+          "members": [
+            {
+              "kind": "field",
+              "name": "registry",
+              "type": {
+                "text": "{ [type: string]: string }"
+              },
+              "static": true,
+              "default": "{}"
+            },
+            {
+              "kind": "method",
+              "name": "register",
+              "privacy": "public",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "types",
+                  "type": {
+                    "text": "{ [type: string]: string }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getEditor",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "property",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "property"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "host"
+            },
+            {
+              "kind": "field",
+              "name": "observe",
+              "type": {
+                "text": "(value: any) => void | undefined"
+              },
+              "attribute": "observe"
+            },
+            {
+              "kind": "method",
+              "name": "editorTemplate",
+              "parameters": [
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "{ [key: string]: any }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "__by_me",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "valueProperty"
+            },
+            {
+              "kind": "method",
+              "name": "_computeLabelId",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_valueChanged",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "type"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "property",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "property"
+            },
+            {
+              "name": "host",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "host"
+            },
+            {
+              "name": "observe",
+              "type": {
+                "text": "(value: any) => void | undefined"
+              },
+              "fieldName": "observe"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "OxPropertyEditor",
+          "declaration": {
+            "name": "OxPropertyEditor",
+            "module": "src/ox-property-editor.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/index.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Regular"
+        },
+        {
+          "kind": "variable",
+          "name": "CustomTitle"
+        },
+        {
+          "kind": "variable",
+          "name": "CustomCounter"
+        },
+        {
+          "kind": "variable",
+          "name": "SlottedContent"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "stories/index.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Regular",
+          "declaration": {
+            "name": "Regular",
+            "module": "stories/index.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CustomTitle",
+          "declaration": {
+            "name": "CustomTitle",
+            "module": "stories/index.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CustomCounter",
+          "declaration": {
+            "name": "CustomCounter",
+            "module": "stories/index.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlottedContent",
+          "declaration": {
+            "name": "SlottedContent",
+            "module": "stories/index.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/demo/index.html

@@ -2,20 +2,34 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" />
     <style>
       body {
-        background: #fafafa;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+
+        /* This is a font-stack that tries to use the system-default sans-serifs first */
+        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      ox-property-editor {
+        width: 100vw;
+        height: 100vh;
       }
     </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   </head>
   <body>
     <div id="demo"></div>
-
     <script type="module">
       import { html, render } from 'lit'
-      import '../dist/src/property-stack.js'
+      import '../dist/src/ox-property-editor.js'
 
-      render(html` <property-stack> </property-stack> `, document.querySelector('#demo'))
+      render(html` <ox-property-editor></ox-property-editor> `, document.querySelector('#demo'))
     </script>
   </body>
 </html>

package/dist/src/index.d.ts

@@ -1,3 +1 @@
-export * from './property-angle';
-export * from './property-3dish';
-export * from './property-buttons-radio';
+export * from './ox-property-editor';

package/dist/src/index.js

@@ -1,4 +1,2 @@
-export * from './property-angle';
-export * from './property-3dish';
-export * from './property-buttons-radio';
+export * from './ox-property-editor';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA","sourcesContent":["export * from './property-angle'\nexport * from './property-3dish'\nexport * from './property-buttons-radio'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ox-property-editor'\n"]}

package/dist/src/ox-property-editor.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export declare class OxPropertyEditor extends LitElement {
+    static registry: {
+        [type: string]: string;
+    };
+    static register(types: {
+        [type: string]: string;
+    }): void;
+    static getEditor(type: string): string;
+    static styles: import("lit").CSSResult[];
+    value: any;
+    type: string;
+    label: string;
+    placeholder?: string;
+    property: any;
+    host: any;
+    observe?: (value: any) => void;
+    connectedCallback(): void;
+    editorTemplate(props: {
+        [key: string]: any;
+    }): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    __by_me: boolean;
+    shouldUpdate(changedProperties: any): boolean;
+    get valueProperty(): string;
+    _computeLabelId(label: string): string;
+    _valueChanged(e: Event): void;
+}

package/dist/src/ox-property-editor.js

@@ -0,0 +1,161 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import deepClone from 'lodash/cloneDeep';
+export class OxPropertyEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.__by_me = false;
+    }
+    static register(types) {
+        Object.keys(types).forEach(type => {
+            OxPropertyEditor.registry[type] = types[type];
+        });
+    }
+    static getEditor(type) {
+        return OxPropertyEditor.registry[type];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderRoot.addEventListener('change', this._valueChanged.bind(this));
+    }
+    editorTemplate(props) {
+        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 ``}
+    `;
+    }
+    shouldUpdate(changedProperties) {
+        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) {
+        if (label.indexOf('label.') >= 0)
+            return label;
+        return 'label.' + label;
+    }
+    _valueChanged(e) {
+        e.stopPropagation();
+        this.value = deepClone(e.target[this.valueProperty]);
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        if (!this.observe)
+            return;
+        this.observe.call(this, this.value);
+    }
+}
+OxPropertyEditor.registry = {};
+OxPropertyEditor.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;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxPropertyEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxPropertyEditor.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], OxPropertyEditor.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OxPropertyEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Object })
+], OxPropertyEditor.prototype, "property", void 0);
+__decorate([
+    property({ type: Object })
+], OxPropertyEditor.prototype, "host", void 0);
+__decorate([
+    property({ type: Object })
+], OxPropertyEditor.prototype, "observe", void 0);
+__decorate([
+    state()
+], OxPropertyEditor.prototype, "__by_me", void 0);
+//# sourceMappingURL=ox-property-editor.js.map