v0.3.0 (#4)

* add web component export

* improve readme

* add more options + changelog

* fix color conversion

* v0.3.0

* cleanup actions

* Update .mergify.yml

.github/workflows/npm-deploy.yml

@@ -9,16 +9,16 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
-    - name: Install
-      run: |
-        npm ci
-    - name: Build
-      run: |
-        npm run build
-    - name: Publish
-      run: |
-        echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > .npmrc
-        npm publish || true
-      env:
-        NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+      - uses: actions/checkout@v1
+      - name: Install
+        run: |
+          npm ci
+      - name: Build
+        run: |
+          npm run build
+      - name: Publish
+        run: |
+          echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > .npmrc
+          npm publish || true
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/push-process-todo-comments.yml

@@ -13,4 +13,4 @@ jobs:
         uses: dtinth/todo-actions@master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TODO_ACTIONS_MONGO_URL: ${{ secrets.TODO_ACTIONS_MONGO_URL }}
+          TODO_ACTIONS_MONGO_URL: ${{ secrets.TODO_ACTIONS_MONGO_URL }}

.github/workflows/push.yml

@@ -0,0 +1,25 @@
+name: Push
+
+on: [push]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install
+        run: |
+          npm ci
+      - name: Lint
+        run: |
+          npm run lint
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install
+        run: |
+          npm ci
+      - name: Build
+        run: |
+          npm run build

.mergify.yml

@@ -3,7 +3,7 @@ pull_request_rules:
     conditions:
       - author=greenkeeper[bot]
       - label~=greenkeeper
-      - status-success~=Lint
+      - status-success~=Push
       - status-success~=WIP
     actions:
       merge:

CHANGELOG.md

@@ -0,0 +1,19 @@
+# 0.3.0
+
+**Additions**
+
+- add native WebComponents support including attribute type conversion.
+
+**Changes**
+
+- added `options` attribute where all options (`colorLeft`, `colorRight`, ...) now must be placed in. The old Attributes were removed.
+
+# 0.2.0
+
+**Fixes**
+
+- channel value `[1,1]` was not reachable. The top center value is therefore now `[1,1]`
+
+# 0.1.0
+
+- Initial Release, may be buggy, unstable and not ready for production until version 1.0.0 is reached.

README.md

@@ -2,11 +2,25 @@
 
 > A simple two channel Color Picker
 
-![two channel picker screenshot](docs/img/screenshot.png)
+## About
+
+I needed an intuitive color picker to control my warm-white-cold-white (WWCW) LED Strips with the [SmartLight Project](https://github.com/adrianjost/SmartLight-Web-Client).
+
+<p align="center">
+  <img src="docs/img/screenshot.png" alt="two channel picker screenshot" style="max-width: 300px;">
+</p>
+
+The picker value is therefore indepent from the displayed color. The given value is a number between 0 and 1 for each of the two channels. The brightness can be determined by dragging the slider along the Y-axis. Dragging along the X-axis changes the relationship between the two channels.
+
+<p align="center">
+  <img src="docs/img/values.png" align="center" alt="two channel picker screenshot" style="max-width: 500px;">
+</p>
 
 ## Usage
 
-### 1. Install
+### Vue
+
+Install the package:
 
 ```bash
 npm i @adrianjost/two-channel-picker
@@ -18,29 +32,74 @@ or
 yarn add @adrianjost/two-channel-picker
 ```
 
-### 2. Usage in Component (Vue)
+In your App:
 
 ```vue
 <template>
-  <TwoChannelPicker
-    v-model="channels"
-    colorLeft="#f00"
-    colorRight="#00f"
-  />
+	<TwoChannelPicker v-model="channels" colorLeft="#fd9" colorRight="#9df" />
 </template>
 
 <script>
-import TwoChannelPicker from "@adrianjost/two-channel-picker"
+import TwoChannelPicker from "@adrianjost/two-channel-picker";
 
 export default {
-  components: {
-    TwoChannelPicker
-  },
-  data(){
-    return {
-      channels: [0, 1]
-    }
-  }
-}
+	components: {
+		TwoChannelPicker,
+	},
+	data() {
+		return {
+			channels: [0, 1],
+		};
+	},
+};
+</script>
+```
+
+### As a native Web Component
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@adrianjost/[email protected]/dist/wc/two-channel-picker.min.js"></script>
+
+<div style="width: 300px; height: 300px;">
+	<two-channel-picker
+		value="[0,1]"
+		id="picker"
+		options='{"colorLeft": "#f00", "colorRight": "#00f" }'
+	></two-channel-picker>
+</div>
+
+<script>
+	document.getElementById("picker").addEventListener("input", (event) => {
+		console.log(event.detail[0]);
+	});
 </script>
-```
+```
+
+> please note, that you may need to adjust the version number in the url.
+
+## API
+
+### Props
+
+You can customize the picker with the following props/attributes.
+
+> When using the lib as a web component you must provide all attributes `JSON.stringify()`-ed.
+
+| attribute | type | default value | description |
+| --- | --- | --- | --- |
+| `value` / `v-model` | Array, String | `[1,0]` | the current channel values, if provided as a String, this must be `JSON.parse()`-able |
+| `options` | Object | `{}` | all your config goes in here |
+
+#### Options
+
+Available Attributes in the `options` prop:
+
+| attribute | type | default value | description |
+| --- | --- | --- | --- |
+| `readOnly` | Boolean | `false` | should the user be able to move the marker? |
+| `colorLeft` | String | `#fd9` | the color in the top left corner. Must be in the HEX Format with 3 or 6 digits. |
+| `colorRight` | String | `#fd9` | the color in the top right corner. Must be in the HEX Format with 3 or 6 digits. |
+| `marker.borderWidth` | Number | `2` | The border width of the active marker in px. |
+| `marker.radius` | Number | `16` | The border radius including the borderWidth in px. |
+
+You need more options? Please open an issue and I will do my best to implement it. Pull Requests are also welcome!

package.json

@@ -1,16 +1,19 @@
 {
 	"name": "@adrianjost/two-channel-picker",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": "Adrian Jost <[email protected]> (https://adrianjost.dev)",
 	"scripts": {
 		"lint": "vue-cli-service lint",
-		"build": "vue-cli-service build --target lib --name TwoChannelPicker ./src/TwoChannelPicker.vue --mode production --dest dist/lib",
+		"build:vue": "vue-cli-service build --target lib --name TwoChannelPicker ./src/TwoChannelPicker.vue --mode production --dest dist/lib",
+		"build:wc": "vue-cli-service build --target wc --inline-vue --name two-channel-picker ./src/TwoChannelPicker.vue --dest dist/wc",
+		"build": "run-p build:*",
 		"dev": "vue-cli-service serve"
 	},
-	"dependencies": {
+	"peerDependencies": {
 		"vue": "^2.6.10"
 	},
 	"devDependencies": {
+		"vue": "^2.6.10",
 		"@vue/cli-plugin-babel": "^3.7.0",
 		"@vue/cli-plugin-eslint": "^3.8.0",
 		"@vue/cli-service": "^4.0.0",
@@ -39,7 +42,10 @@
 		"last 2 versions"
 	],
 	"files": [
-		"dist/lib/*"
+		"dist/*",
+		"docs/*",
+		"LICENSE",
+		"README.md"
 	],
 	"gitHooks": {
 		"pre-commit": "lint-staged"

src/Dev.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="wrapper">
 		<h1> {{ formatedValue }} </h1>
-		<Picker v-model="value" class="picker" />
+		<Picker v-model="value" :options="{ colorLeft: '#f00' }" class="picker" />
 	</div>
 </template>