@operato/property-editor 0.2.5 → 0.2.30

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@operato/property-editor",
-  "description": "Webcomponent property-editor following open-wc recommendations",
+  "version": "0.2.30",
+  "description": "Webcomponent for property-editor following open-wc recommendations",
+  "author": "heartyoh",
   "license": "MIT",
-  "author": "property-editor",
-  "version": "0.2.5",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -15,9 +15,7 @@
     "url": "git+https://github.com/hatiolab/operato.git",
     "directory": "webcomponents/property-editor"
   },
-  "exports": {
-    ".": "./dist/src/index.js"
-  },
+  "exports": {},
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
@@ -31,13 +29,20 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "lit": "^2.0.2"
+    "lit": "^2.0.2",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.14",
+    "@material/mwc-fab": "^0.25.3",
+    "@material/mwc-icon": "^0.25.3",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
+    "@types/bwip-js": "^2.1.1",
+    "@types/lodash-es": "^4.17.5",
+    "@types/w3c-web-usb": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.25",
@@ -50,33 +55,9 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
-    }
-  },
   "prettier": "@hatiolab/prettier-config",
   "husky": {
     "hooks": {
@@ -89,5 +70,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cbbd45d2ec0c593ef2528e1443dcd97a0dca8cfa"
+  "gitHead": "b2dc6c6e96e4353186ef8abeddc2d536ca902f60"
 }

package/src/index.ts

@@ -1,5 +1 @@
-export * from './ox-input-angle'
-export * from './ox-input-3dish'
-export * from './ox-buttons-radio'
-export * from './ox-input-stack'
-export * from './ox-checkbox'
+export * from './ox-property-editor'

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/ox-input-angle.js'
-      import '../dist/src/ox-input-3dish.js'
-
-      render(html` <ox-input-3dish></ox-input-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/ox-input-angle.js'
-
-      const placeholder = 'enter a angle in degree'
-      render(
-        html`
-          <ox-input-angle
-            radian="1"
-            placeholder=${placeholder}
-            @change=${e => console.log(e.target.radian)}
-          ></ox-input-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/ox-buttons-radio.js'
-
-      render(
-        html`
-          <ox-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>
-          </ox-buttons-radio>
-        `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/demo/index-checkbox.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-      * {
-        margin-bottom: 5px;
-      }
-
-      .customized {
-        /* checkbox default */
-        --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
-        --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
-        --ox-checkbox-border-radius: var(--border-radius, 4px);
-        --ox-checkbox-size: 18px;
-        --ox-checkbox-background-color: var(--theme-white-color, #fff);
-        --ox-checkbox-label-color: var(--primary-text-color, #3a5877);
-        --ox-checkbox-label-margin: 0 0 0 7px;
-
-        /* checkbox checked */
-        --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--primary-color, #38a25b);
-        --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
-        --ox-checkbox-checked-font-weight: bold;
-
-        /* checkbox unchecked */
-        --ox-checkbox-unchecked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-unchecked-border: var(--ox-checkbox-border);
-        --ox-checkbox-unchecked-color: var(--ox-checkbox-fill-color);
-
-        /* checkbox disabled */
-        --ox-checkbox-disabled-opacity: 0.5;
-
-        font-size: 1.1em;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-checkbox.js'
-
-      render(
-        html` <ox-checkbox @change=${e => console.log(e.target.checked)} class="customized">Custom</ox-checkbox> `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/demo/index-stack.html

@@ -1,21 +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/ox-stack.js'
-
-      render(html` <ox-stack> </ox-stack> `, document.querySelector('#demo'))
-    </script>
-  </body>
-</html>

package/dist/src/ox-buttons-radio.d.ts

@@ -1,28 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement, PropertyValues } from 'lit';
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </ox-buttons-radio>
-*/
-export declare class PropertyButtonsRadio extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-     */
-    value: Object | null;
-    mandatory: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    get buttons(): Element[];
-    _onValueChanged(value: Object | null): void;
-    _onTapButton(e: Event): void;
-}