<template>
	<div class="color">
		<color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor" format="hex" isWidget @pureColorChange="onColorChange" />
	</div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
import { ColorPicker } from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';

const state: any = inject<any>('state');
const { onColorPickerChange } = state;
const pureColor = ref('rgb(66, 165, 246)');
const gradientColor = ref('linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)');

const onColorChange = (item: any) => {
	onColorPickerChange(item);
};
</script>

<style lang="scss" scoped>
.color {
	width: 100%;
	display: flex;
	justify-content: center;
}
</style>
