Package Exports

@tybys/vscode-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tybys/vscode-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vscode-color-picker

Demo: https://toyobayashi.github.io/vscode-color-picker

Usage

CDN

Pure JavaScript:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/toyobayashi/vscode-color-picker/lib/vscode-color-picker.css">

<div id="container"></div>

<script src="https://cdn.jsdelivr.net/gh/toyobayashi/vscode-color-picker/lib/vscode-color-picker.js"></script>
<script>
  (function () {
    var ColorPicker = vscodeColorPicker.ColorPicker;
    var initialColor = '#aaa';
    var color = ColorPicker.toColor(initialColor);
    var picker = new ColorPicker(document.getElementById('container'), {
      color: initialColor,
      presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
    });
    picker.onColorChanged(function (color) {
      picker.setPresentation(ColorPicker.formatColor(color, ColorPicker.ColorType.RGB));
    });
  })();
</script>

Vue:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/toyobayashi/vscode-color-picker/lib/vscode-color-picker.css">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/toyobayashi/vscode-color-picker/lib/vscode-color-picker.js"></script>
<script src="https://cdn.jsdelivr.net/gh/toyobayashi/vscode-color-picker/lib/vue/global.js"></script>
<script>
  (function () {
    // Vue.component('VscodeColorPicker', VscodeColorPickerVue);
    new Vue({
      components: {
        VscodeColorPicker: VscodeColorPickerVue
      }
    }).$mount('#app');
  })();
</script>

Webpack

Pure JavaScript:

import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'

Vue:

<template>
  <div id="app">
    <VscodeColorPicker :color="color" @change="onColorChange" :presentation="presentation" />
    {{color}}
  </div>
</template>

<script>
import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'
import VscodeColorPicker from '@tybys/vscode-color-picker/lib/vue/index.js'

export default {
  components: {
    VscodeColorPicker
  },
  data () {
    return {
      color: '#aaa'
    }
  },
  computed: {
    presentation () {
      return ColorPicker.formatColor(this.color, ColorPicker.ColorType.RGB)
    }
  },
  methods: {
    onColorChange (color) {
      this.color = color
    }
  }
}
</script>

React:

import '@tybys/vscode-color-picker/lib/vscode-color-picker.css'
import { ColorPicker } from '@tybys/vscode-color-picker'
import VscodeColorPicker from '@tybys/vscode-color-picker/lib/react/index.js'
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  constructor (props) {
    super(props)

    const initialColor = '#aaa'
    const color = ColorPicker.toColor(initialColor)
    this.state = {
      color: initialColor,
      presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
    }
    this.onColorChange = this.onColorChange.bind(this)
  }

  render () {
    return (
      <div id='app'>
        <VscodeColorPicker color={this.state.color} presentation={this.state.presentation} onChange={this.onColorChange} />
        {this.state.color}
      </div>
    )
  }

  onColorChange (color) {
    this.setState({
      color,
      presentation: ColorPicker.formatColor(color, ColorPicker.ColorType.RGB)
    })
  }
}

ReactDOM.render(<App />, document.getElementById('app'))