chore(vue3): Migrate NcColorPicker

Signed-off-by: Raimund Schlüßler <[email protected]>

jest.config.js

@@ -21,6 +21,7 @@
  */
 
 const ignorePatterns = [
+	'@ckpack/vue-color',
 	'ansi-regex',
 	'bail',
 	'char-regex',

package.json

@@ -60,6 +60,7 @@
     "dist"
   ],
   "dependencies": {
+    "@ckpack/vue-color": "^1.5.0",
     "@floating-ui/dom": "^1.1.0",
     "@nextcloud/auth": "^2.0.0",
     "@nextcloud/axios": "^2.0.0",

src/components/NcColorPicker/NcColorPicker.vue

@@ -82,13 +82,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 +100,6 @@ export default {
 			color: '#0082c9',
 			open: false
 		}
-	},
-	methods: {
-		updateColor(e) {
-			this.color = e
-		}
 	}
 }
 </script>
@@ -159,32 +154,34 @@ export default {
 </docs>
 
 <template>
-	<NcPopover v-bind="$attrs" v-on="$listeners" @apply-hide="handleClose">
+	<NcPopover @apply-hide="handleClose">
 		<template #trigger>
 			<slot />
 		</template>
 		<div class="color-picker"
 			:class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
-			<transition name="slide" mode="out-in">
-				<div v-if="!advanced" class="color-picker__simple">
-					<button v-for="(color, index) in palette"
-						:key="index"
-						:style="{'background-color': color }"
-						class="color-picker__simple-color-circle"
-						:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }"
-						type="button"
-						@click="pickColor(color)">
-						<Check v-if="color === currentColor"
-							:size="20" />
-					</button>
+			<Transition name="slide" mode="out-in">
+				<div>
+					<div v-if="!advanced" class="color-picker__simple">
+						<button v-for="(color, index) in palette"
+							:key="index"
+							:style="{'background-color': color }"
+							class="color-picker__simple-color-circle"
+							:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }"
+							type="button"
+							@click="pickColor(color)">
+							<Check v-if="color === currentColor"
+								:size="20" />
+						</button>
+					</div>
+					<Chrome v-if="advanced"
+						v-model="currentColor"
+						class="color-picker__advanced"
+						:disable-alpha="true"
+						:disable-fields="!advancedFields"
+						@input="pickColor" />
 				</div>
-				<Chrome v-if="advanced"
-					v-model="currentColor"
-					class="color-picker__advanced"
-					:disable-alpha="true"
-					:disable-fields="!advancedFields"
-					@input="pickColor" />
-			</transition>
+			</Transition>
 			<div class="color-picker__navigation">
 				<NcButton v-if="advanced"
 					type="tertiary"
@@ -222,14 +219,15 @@ import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
-import { Chrome } from 'vue-color'
+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: {
@@ -245,7 +243,7 @@ export default {
 		/**
 		 * A HEX color that represents the initial value of the picker
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			required: true,
 		},
@@ -276,21 +274,21 @@ export default {
 		'submit',
 		'close',
 		'update:open',
-		'update:value',
+		'update:modelValue',
 		'input',
 	],
 
 	data() {
 		return {
-			currentColor: this.value,
+			currentColor: this.modelValue,
 			advanced: false,
 			ariaBack: t('Back'),
 			ariaMore: t('More options'),
 		}
 	},
 
 	watch: {
-		value(color) {
+		modelValue(color) {
 			this.currentColor = color
 		},
 	},
@@ -342,7 +340,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'
@@ -351,7 +349,7 @@ export default {
 
 		},
 	},
-}
+})
 
 </script>
 
@@ -456,15 +454,15 @@ export default {
 }
 
 .slide {
-	&-enter {
+	&-enter-from {
 		transform: translateX(-50%);
 		opacity: 0;
 	}
 	&-enter-to {
 		transform: translateX(0);
 		opacity: 1;
 	}
-	&-leave {
+	&-leave-from {
 		transform: translateX(0);
 		opacity: 1;
 	}

src/components/index.js

@@ -52,10 +52,8 @@
 // export { default as NcBreadcrumb } from './NcBreadcrumb/index.js'
 // export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
 export { default as NcButton } from './NcButton/index.js'
-
-// Not yet adjusted for vue3
 export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.js'
-// export { default as NcColorPicker } from './NcColorPicker/index.js'
+export { default as NcColorPicker } from './NcColorPicker/index.js'
 // export { default as NcContent } from './NcContent/index.js'
 export { default as NcCounterBubble } from './NcCounterBubble/index.js'
 // export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'

styleguide.config.js

@@ -200,6 +200,7 @@ module.exports = async () => {
 						name: 'NcPickers',
 						components: [
 							//'src/components/Nc*Picker*/*.vue',
+							'src/components/NcColorPicker/*.vue',
 							'src/components/NcDatetimePickerNative*/*.vue',
 						],
 					},