@operato/input 1.0.0-alpha.2 → 1.0.0-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,157 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.16...v1.0.0-alpha.17) (2022-03-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2022-03-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+
+### :rocket: New Features
+
+* migrate input, property-editor from things-factory ([dbd5e73](https://github.com/hatiolab/operato/commit/dbd5e73eac328e72c4bb7abd113a819532bc894d))
+
+
+
+## [1.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
+
+
+### :bug: Bug Fix
+
+* typos ([71447fa](https://github.com/hatiolab/operato/commit/71447fa2dfb52c5e45909baac735c2e195856256))
+
+
+
+## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
+
+
+### :rocket: New Features
+
+* migrate input, property-editor from things-factory ([4800d85](https://github.com/hatiolab/operato/commit/4800d859473bf623325233a7f2af851e5d093dcb))
+
+
+
+## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
+
+
+### :bug: Bug Fix
+
+* style ([89ba680](https://github.com/hatiolab/operato/commit/89ba68072c3141b6bbcad3378cc6980670ef4198))
+
+
+
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+
+### :rocket: New Features
+
+* settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
+
+
+
+## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
+
+
+### :rocket: New Features
+
+* migrate property-editor from things-factory ([272cdaa](https://github.com/hatiolab/operato/commit/272cdaafd74f3c3c597403f88655cb5cf4a81313))
+* migrated property-editors from things-factory ([9d0b73a](https://github.com/hatiolab/operato/commit/9d0b73a8c05187e7ca8db874ddde8c977ec52a55))
+
+
+
+## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.3](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-03-10)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ## [1.0.0-alpha.2](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-03-10)
 
 **Note:** Version bump only for package @operato/input

package/README.md

@@ -1,21 +1,25 @@
-# \<property-editor>
+# @operato/input module
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+이 모듈에는 디펜던시가 최소화된 입력용 컴포넌트들을 포함한다.
+
+각 컴포넌트는 OxFormField 를 상속함으로써 폼의 입력 엘리먼트로 동작할 수 있다.
 
 ## Installation
 
 ```bash
-npm i property-editor
+npm i @operato/input
 ```
 
 ## Usage
 
 ```html
 <script type="module">
-  import 'property-editor/property-editor.js';
+  import '@operato/input/ox-input-angle.js'
 </script>
 
-<property-editor></property-editor>
+<form>
+  <ox-input-angle name="angle"></ox-input-angle>
+</form>
 ```
 
 ## Linting and formatting
@@ -60,7 +64,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/demo/index-color-gradient.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-color-gradient.js'
+
+      const form = document.querySelector('#demo')
+      render(
+        html`
+          <ox-input-color-gradient
+            name="color-gradient-solid"
+            type="solid"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('color-gradient-solid'))
+            }}
+          ></ox-input-color-gradient>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-color-stops.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-color-stops.js'
+
+      const value = [
+        {
+          position: 0,
+          color: 'white'
+        },
+        {
+          position: 0.5,
+          color: 'green'
+        },
+        {
+          position: 1,
+          color: 'white'
+        }
+      ]
+
+      const form = document.querySelector('#demo')
+      render(
+        html`
+          <ox-input-color-stops
+            name="color-stops-solid"
+            type="solid"
+            min="0"
+            max="100"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('color-stops-solid'))
+            }}
+          ></ox-input-color-stops>
+
+          <ox-input-color-stops
+            name="color-stops-gradient"
+            .value=${value}
+            type="gradient"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('color-stops-gradient'))
+            }}
+          ></ox-input-color-stops>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-color.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-color.js'
+
+      const form = document.querySelector('#demo')
+      render(
+        html`
+          <ox-input-color
+            value="navy"
+            name="color"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('color'))
+            }}
+          ></ox-input-color>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-file.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+
+      ox-input-file {
+        max-width: 500px;
+        max-height: 300px;
+      }
+    </style>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-file.js'
+
+      const form = document.querySelector('#demo')
+      render(
+        html`
+          <ox-input-file
+            .value=${['https://www.hatiolab.com/assets/img/arch-thingsboard.png']}
+            name="file"
+            multiple
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('file'))
+            }}
+          ></ox-input-file>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-image.html

@@ -29,7 +29,7 @@
             name="image"
             @change=${e => {
               console.log(e.target.value)
-              console.log('form value', new FormData(form).get('angle'))
+              console.log('form value', new FormData(form).get('image'))
             }}
           ></ox-input-image>
         `,

package/demo/index-multiple-colors.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-multiple-colors.js'
+
+      const form = document.querySelector('#demo')
+
+      const value = ['yello', 'white']
+      render(
+        html`
+          <ox-input-multiple-colors
+            name="multiple-colors"
+            .value=${value}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('multiple-colors'))
+            }}
+          ></ox-input-multiple-colors>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-options.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-options.js'
+
+      const form = document.querySelector('#demo')
+
+      const value = [{ text: 'SHOOSE', value: 'Shoose' }]
+
+      const sort = () => {
+        const input = document.querySelector('ox-input-options')
+        input.sort()
+      }
+
+      render(
+        html`
+          <ox-input-options
+            name="options"
+            .value=${value}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('options'))
+            }}
+          ></ox-input-options>
+          <input type="button" value="Sort" @click=${e => sort()}></input>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-range.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-range.js'
+
+      const form = document.querySelector('#demo')
+      const placeholder = 'enter a range in degree'
+
+      render(
+        html`
+          <ox-input-range
+            value="1"
+            name="range"
+            step="10"
+            min="-300"
+            max="300"
+            placeholder=${placeholder}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('range'))
+            }}
+          ></ox-input-range>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-table.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+
+    <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>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-table.js'
+
+      const form = document.querySelector('#demo')
+
+      render(
+        html`
+          <ox-input-table
+            name="table"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('table'))
+            }}
+          ></ox-input-table>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>

package/demo/index-value-map.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <form id="demo"></form>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-input-value-map.js'
+
+      const form = document.querySelector('#demo')
+
+      const value1 = {
+        A: 'A',
+        B: 'B',
+        C: 'C',
+        default: 'B'
+      }
+
+      const value2 = {
+        A: true,
+        B: false,
+        C: true,
+        default: true
+      }
+
+      const value3 = {
+        A: 'red',
+        B: 'yellow',
+        C: 'blue',
+        default: 'yellow'
+      }
+
+      render(
+        html`
+          <ox-input-value-map
+            name="value-map1"
+            valuetype="string"
+            keytype="string"
+            .value=${value1}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('value-map1'))
+            }}
+          ></ox-input-value-map>
+
+          <ox-input-value-map
+            name="value-map2"
+            valuetype="boolean"
+            keytype="string"
+            .value=${value2}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('value-map2'))
+            }}
+          ></ox-input-value-map>
+
+          <ox-input-value-map
+            name="value-map3"
+            valuetype="color"
+            keytype="string"
+            .value=${value3}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('value-map3'))
+            }}
+          ></ox-input-value-map>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>