v-iro.js v1.0.2

Iro.js for Vue

This package is a wrapper of the iro.js library for vue. Additionally it adds a disable property.

Import

import { useIroColorPicker } from "v-iro.js"

How to Use

useIroColorPicker(wrapper, options, disable).then(callback)

• wrapper: A template ref from an container.
• options: The options for the iro color picker.
• disable: A ref of a boolean - if the color picker should be disabled.
• callback: The composable gives back a promise which resolves when the component is mounted. The callback gets the color picker instance as a parameter.

Types

useIroColorPicker(containerRef: Ref<HTMLElement>, disableRef: Ref<boolean>, options: Partial<ColorPickerProps>): Promise<IroColorPicker>

Example

<template>
  <div ref="wrapper"></div>
  <input type="checkbox" name="disablePicker" v-model="disable">
  <label for="disablePicker">Disable</label> <br>
  Color: {{color}}
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useIroColorPicker } from "v-iro.js"
import type { IroColor } from '@irojs/iro-core';

const wrapper = ref()
const color = ref("")
const disable = ref(false)

const options = {
    width: 130
}

useIroColorPicker(wrapper, options, disable).then((colorPicker) => {
  colorPicker.on("color:change", (pickerColor: IroColor) => {
    color.value = pickerColor.hexString
  })
})
</script>

The full demo project can be cloned here.