From 2f1b21263a66d54f6727baf7b7360f658f4da28a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 3 Sep 2022 18:13:09 +0300
Subject: [PATCH] feat: wrapper component for Chrome

-emits input event on color change

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/general/ChromeWrapper.vue      | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/ChromeWrapper.vue

diff --git a/packages/nc-gui-v2/components/general/ChromeWrapper.vue b/packages/nc-gui-v2/components/general/ChromeWrapper.vue
new file mode 100644
index 0000000000..43028707a5
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ChromeWrapper.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { Chrome } from '@ckpack/vue-color'
+import { computed } from '#imports'
+
+interface Props {
+  modelValue?: any
+  mode?: 'hex' | 'hex8' | 'hsl' | 'hsv' | 'rgba'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => '#00FFFFFF',
+  mode: () => 'hex8',
+})
+
+const emit = defineEmits(['update:modelValue', 'input'])
+
+const picked = computed({
+  get: () => props.modelValue || '#00FFFFFF',
+  set: (val) => {
+    emit('update:modelValue', val[props.mode] || null)
+    emit('input', val[props.mode] || null)
+  },
+})
+</script>
+
+<template>
+  <Chrome v-model="picked" />
+</template>
+
+<style scoped></style>