@operato/input 1.0.0-alpha.3 → 1.0.0-alpha.30

package/CHANGELOG.md

@@ -3,6 +3,241 @@
 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.30](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.29...v1.0.0-alpha.30) (2022-03-18)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.28...v1.0.0-alpha.29) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* datalist in ox-input-partition-keys ([a25e3a6](https://github.com/hatiolab/operato/commit/a25e3a66cf5f7a25bca057be90ef336b29e915a7))
+
+
+
+## [1.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.28) (2022-03-17)
+
+
+### :rocket: New Features
+
+* add ox-grist-editor for partition-keys ([7672a27](https://github.com/hatiolab/operato/commit/7672a2729f78475602733a83779f6a7a96e128fd))
+
+
+
+## [1.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.27) (2022-03-17)
+
+
+### :rocket: New Features
+
+* add ox-grist-editor for partition-keys ([7672a27](https://github.com/hatiolab/operato/commit/7672a2729f78475602733a83779f6a7a96e128fd))
+
+
+
+## [1.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.25...v1.0.0-alpha.26) (2022-03-17)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.25](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.24...v1.0.0-alpha.25) (2022-03-17)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.23...v1.0.0-alpha.24) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* refactoring grist-editor, property-editor and input ([ea7431a](https://github.com/hatiolab/operato/commit/ea7431a5e2dfd96ef392c1905e9622df7c2ef88c))
+
+
+
+## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+
+
+### :rocket: New Features
+
+* @operato/ccp module added ([f08ba5a](https://github.com/hatiolab/operato/commit/f08ba5a464c04b7fb132c6f18de975997087846a))
+* add ccp module ([cbea635](https://github.com/hatiolab/operato/commit/cbea635d5f638d49fc99d68cc1727ac3e06ddf22))
+
+
+### :bug: Bug Fix
+
+* add missing exporting ([844d9e7](https://github.com/hatiolab/operato/commit/844d9e7331c2e966eb7a5351a8755b7f1e599e3e))
+* demo ([6fa3eac](https://github.com/hatiolab/operato/commit/6fa3eac612bd98ce25e3ef6d8ce89527d7152fb4))
+
+
+
+## [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

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-crontab.html

@@ -0,0 +1,36 @@
+<!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-crontab.js'
+
+      const form = document.querySelector('#demo')
+
+      render(
+        html`
+          <ox-input-crontab
+            value="* * * * * *"
+            name="crontab"
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('crontab'))
+            }}
+          ></ox-input-crontab>
+        `,
+        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-partition-keys.html

@@ -0,0 +1,71 @@
+<!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-partition-keys.js'
+
+      const form = document.querySelector('#demo')
+
+      const value1 = {
+        A: 'A',
+        B: 'B',
+        C: 'C'
+      }
+
+      const value2 = {
+        A: true,
+        B: false,
+        C: true
+      }
+
+      const value3 = {
+        A: 'red',
+        B: 'yellow',
+        C: 'blue'
+      }
+
+      render(
+        html`
+          <ox-input-partition-keys
+            name="partition-keys1"
+            .value=${value1}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('partition-keys1'))
+            }}
+          ></ox-input-partition-keys>
+
+          <ox-input-partition-keys
+            name="partition-keys2"
+            .value=${value2}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('partition-keys2'))
+            }}
+          ></ox-input-partition-keys>
+
+          <ox-input-partition-keys
+            name="partition-keys3"
+            .value=${value3}
+            @change=${e => {
+              console.log(e.target.value)
+              console.log('form value', new FormData(form).get('partition-keys3'))
+            }}
+          ></ox-input-partition-keys>
+        `,
+        form
+      )
+    </script>
+  </body>
+</html>