vue3: Fix NcColorPicker for vue 3 compatibility

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: susnux

src/components/NcColorPicker/NcColorPicker.vue

@@ -21,6 +21,8 @@
  -->
 
 <docs>
+As this component is based on the [NcPopover](NcPopover) component,
+it also inherits all props and events from it.
 
 ### General description
 
@@ -82,13 +84,13 @@ export default {
 </style>
 ```
 
-* Using v-bind for both color and open state and emitting an event that updates the color
+* Using v-model for both color and open state and emitting an event that updates the color
 
 ```vue
 <template>
 	<div class="container1">
 		<NcButton @click="open = !open"> Click Me </NcButton>
-		<NcColorPicker :value="color" @input="updateColor" :shown.sync="open">
+		<NcColorPicker v-model="color" v-model:shown="open">
 			<div :style="{'background-color': color}" class="color1" />
 		</NcColorPicker>
 	</div>
@@ -100,11 +102,6 @@ export default {
 			color: '#0082c9',
 			open: false
 		}
-	},
-	methods: {
-		updateColor(e) {
-			this.color = e
-		}
 	}
 }
 </script>
@@ -223,13 +220,14 @@ import Check from 'vue-material-design-icons/Check.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
 import { Chrome } from '@ckpack/vue-color'
+import { defineComponent } from 'vue'
 
 const rgbToHex = function(color) {
 	const hex = color.toString(16)
 	return hex.length === 1 ? '0' + hex : hex
 }
 
-export default {
+export default defineComponent({
 	name: 'NcColorPicker',
 
 	components: {
@@ -247,7 +245,7 @@ export default {
 		/**
 		 * A HEX color that represents the initial value of the picker
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			required: true,
 		},
@@ -278,19 +276,19 @@ export default {
 		'submit',
 		'close',
 		'update:open',
-		'update:value',
+		'update:modelValue',
 		'input',
 	],
 
 	data() {
 		return {
-			currentColor: this.value,
+			currentColor: this.modelValue,
 			advanced: false,
 		}
 	},
 
 	watch: {
-		value(color) {
+		modelValue(color) {
 			this.currentColor = color
 		},
 	},
@@ -340,7 +338,7 @@ export default {
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
 			 */
-			this.$emit('update:value', color)
+			this.$emit('update:modelValue', color)
 
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
@@ -349,7 +347,7 @@ export default {
 
 		},
 	},
-}
+})
 
 </script>