From 0987907d3defe3e45e58a475124d06435d82dd53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Mon, 9 Oct 2023 21:16:02 +0200
Subject: [PATCH] feat(NcDateTimePicker): migrate to vue 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .eslintrc.js                                  |  1 -
 package-lock.json                             | 18 ++++++++++
 package.json                                  |  1 +
 .../NcDateTimePicker/NcDateTimePicker.vue     | 34 +++++++++----------
 src/components/NcDateTimePicker/index.js      |  7 +---
 src/components/NcDateTimePicker/index.scss    |  2 +-
 .../NcDateTimePickerNative.vue                |  5 +--
 .../NcDateTimePickerNative/index.js           |  7 +---
 .../NcTimezonePicker/NcTimezonePicker.vue     | 15 ++++----
 src/components/index.js                       |  4 +--
 src/utils/ScopeComponent.js                   |  2 ++
 styleguide.config.js                          |  5 +--
 12 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 048a2ff91f..6b51eae605 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,6 @@ module.exports = {
 		'cypress',
 	],
 	ignorePatterns: [
-		'src/components/NcDateTimePicker/*.vue',
 		'src/components/NcAction*/*.vue',
 		'src/components/NcAppContent*/*.vue',
 		'src/components/NcAppNavigation*/*.vue',
diff --git a/package-lock.json b/package-lock.json
index c221fc8fcc..3b6acd32fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "unist-builder": "^4.0.0",
         "unist-util-visit": "^5.0.0",
         "vue": "^3.3.4",
+        "vue-datepicker-next": "^1.0.3",
         "vue-material-design-icons": "^5.1.2",
         "vue-select": "^4.0.0-beta.6"
       },
@@ -9626,6 +9627,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -27081,6 +27087,18 @@
       "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
       "dev": true
     },
+    "node_modules/vue-datepicker-next": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-datepicker-next/-/vue-datepicker-next-1.0.3.tgz",
+      "integrity": "sha512-Brqjh896BJGVxP7d6tGDsPMu0SDAB8hAdtG7zWF8VIHJB21dk1VB9KgdajD9Y9uXbg+wHN0vmL7sbMPIyehQVQ==",
+      "dependencies": {
+        "date-format-parse": "^0.2.7",
+        "vue": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-docgen-api": {
       "version": "4.74.1",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.74.1.tgz",
diff --git a/package.json b/package.json
index ee2543f9e2..89ed21746f 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.3.4",
+    "vue-datepicker-next": "^1.0.3",
     "vue-material-design-icons": "^5.1.2",
     "vue-select": "^4.0.0-beta.6"
   },
diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue
index 3eac6b4f08..40836ee605 100644
--- a/src/components/NcDateTimePicker/NcDateTimePicker.vue
+++ b/src/components/NcDateTimePicker/NcDateTimePicker.vue
@@ -21,7 +21,7 @@
   -->
 
 <docs>
-> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue2-datepicker
+> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue-datepicker-next
 > Please check there for all the available options.
 
 ### Defaults
@@ -105,7 +105,7 @@ picked time zone, but you will have to convert it yourself when necessary.
 			v-model="time"
 			type="datetime"
 			:show-timezone-select="true"
-			:timezone-id.sync="tz" /><br>
+			v-model:timezone-id="tz" /><br>
 		{{ time }} | {{ tz }}
 	</span>
 </template>
@@ -134,15 +134,13 @@ export default {
 		:popup-class="{ 'show-week-number': showWeekNumber }"
 		:show-week-number="showWeekNumber"
 		:type="type"
-		:value="value"
-		v-bind="$attrs"
-		v-on="$listeners"
+		:value="modelValue"
 		@select-year="handleSelectYear"
 		@select-month="handleSelectMonth"
-		@update:value="$emit('update:value', value)">
+		@update:value="$emit('update:modelValue', $event)">
 		<template #icon-calendar>
 			<NcPopover v-if="showTimezoneSelect"
-				:shown.sync="showTimezonePopover"
+				v-model:shown="showTimezonePopover"
 				popover-base-class="timezone-select__popper">
 				<template #trigger>
 					<button class="datetime-picker-inline-icon"
@@ -157,13 +155,13 @@ export default {
 						{{ t('Please select a time zone:') }}
 					</strong>
 				</div>
-				<NcTimezonePicker v-model="tzVal"
+				<NcTimezonePicker :model-value="tzVal"
 					class="timezone-popover-wrapper__timezone-select"
-					@input="$emit('update:timezone-id', arguments[0])" />
+					@update:model-value="$emit('update:timezone-id', $event)" />
 			</NcPopover>
 			<CalendarBlank v-else :size="20" />
 		</template>
-		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+		<template v-for="(_, slot) of $slots" #[slot]="scope">
 			<slot :name="slot" v-bind="scope" />
 		</template>
 	</DatePicker>
@@ -175,6 +173,7 @@ import { t } from '../../l10n.js'
 import NcTimezonePicker from '../NcTimezonePicker/index.js'
 import NcPopover from '../NcPopover/index.js'
 import l10n from '../../mixins/l10n.js'
+import ScopeComponent from '../../utils/ScopeComponent.js'
 
 import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 import Web from 'vue-material-design-icons/Web.vue'
@@ -188,7 +187,8 @@ import {
 	getMonthNamesShort,
 } from '@nextcloud/l10n'
 
-import DatePicker from 'vue2-datepicker'
+import DatePicker from 'vue-datepicker-next'
+import './index.scss'
 
 const formatMap = {
 	date: 'YYYY-MM-DD',
@@ -199,7 +199,7 @@ const formatMap = {
 	week: 'w',
 }
 
-export default {
+export default ScopeComponent({
 	name: 'NcDateTimePicker',
 
 	components: {
@@ -211,7 +211,6 @@ export default {
 	},
 
 	mixins: [l10n],
-	inheritAttrs: false,
 
 	props: {
 		clearable: {
@@ -250,12 +249,12 @@ export default {
 		 * value. You have to translate the time yourself when you want to factor in time zones.
 		 */
 		// eslint-disable-next-line
-		value: {
+		modelValue: {
 			default: () => new Date(),
 		},
 
 		/**
-		 * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through the .sync modifier.
+		 * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.
 		 */
 		timezoneId: {
 			type: String,
@@ -289,7 +288,7 @@ export default {
 	},
 
 	emits: [
-		'update:value',
+		'update:modelValue',
 		'update:timezone-id',
 	],
 
@@ -394,7 +393,8 @@ export default {
 			this.showTimezonePopover = !this.showTimezonePopover
 		},
 	},
-}
+})
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/NcDateTimePicker/index.js b/src/components/NcDateTimePicker/index.js
index 8b3922c137..c248172b92 100644
--- a/src/components/NcDateTimePicker/index.js
+++ b/src/components/NcDateTimePicker/index.js
@@ -19,10 +19,5 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import './index.scss'
-import NcDateTimePicker from './NcDateTimePicker.vue'
-import ScopeComponent from '../../utils/ScopeComponent.js'
 
-ScopeComponent(NcDateTimePicker)
-
-export default NcDateTimePicker
+export { default } from './NcDateTimePicker.vue'
diff --git a/src/components/NcDateTimePicker/index.scss b/src/components/NcDateTimePicker/index.scss
index 3257dea028..f7ba9d0798 100644
--- a/src/components/NcDateTimePicker/index.scss
+++ b/src/components/NcDateTimePicker/index.scss
@@ -1,6 +1,6 @@
 $cell_height: 32px;
 
-@import 'vue2-datepicker/scss/index';
+@import 'vue-datepicker-next/scss/index';
 
 .mx-datepicker[data-v-#{$scope_version}] {
 	user-select: none;
diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
index daba004d97..46c842f773 100644
--- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
+++ b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -152,10 +152,11 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 </template>
 
 <script>
+import ScopeComponent from '../../utils/ScopeComponent.js'
 
 const inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
 
-export default {
+export default ScopeComponent({
 	name: 'NcDateTimePickerNative',
 	inheritAttrs: false,
 
@@ -361,7 +362,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/NcDateTimePickerNative/index.js b/src/components/NcDateTimePickerNative/index.js
index 2a0c6a6a5c..4caaf9dbcf 100644
--- a/src/components/NcDateTimePickerNative/index.js
+++ b/src/components/NcDateTimePickerNative/index.js
@@ -20,9 +20,4 @@
  *
  */
 
-import NcDateTimePickerNative from './NcDateTimePickerNative.vue'
-import ScopeComponent from '../../utils/ScopeComponent.js'
-
-ScopeComponent(NcDateTimePickerNative)
-
-export default NcDateTimePickerNative
+export { default } from './NcDateTimePickerNative.vue'
diff --git a/src/components/NcTimezonePicker/NcTimezonePicker.vue b/src/components/NcTimezonePicker/NcTimezonePicker.vue
index 491c951d5b..a6ade10ea6 100644
--- a/src/components/NcTimezonePicker/NcTimezonePicker.vue
+++ b/src/components/NcTimezonePicker/NcTimezonePicker.vue
@@ -26,6 +26,7 @@
 <template>
 	<span>
 		<NcTimezonePicker v-model="tz" />
+		{{ tz }}
 	</span>
 </template>
 <script>
@@ -41,7 +42,7 @@ export default {
 </docs>
 
 <template>
-	<NcSelect :value="selectedTimezone"
+	<NcSelect :model-value="selectedTimezone"
 		:options="options"
 		:multiple="false"
 		:clearable="false"
@@ -77,26 +78,26 @@ export default {
 		/**
 		 * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			default: 'floating',
 		},
 	},
-	emits: ['input'],
+	emits: ['update:modelValue'],
 	computed: {
 		placeholder() {
 			return t('Type to search time zone')
 		},
 		selectedTimezone() {
 			for (const additionalTimezone of this.additionalTimezones) {
-				if (additionalTimezone.timezoneId === this.value) {
+				if (additionalTimezone.timezoneId === this.modelValue) {
 					return additionalTimezone
 				}
 			}
 
 			return {
-				label: getReadableTimezoneName(this.value),
-				timezoneId: this.value,
+				label: getReadableTimezoneName(this.modelValue),
+				timezoneId: this.modelValue,
 			}
 		},
 		options() {
@@ -128,7 +129,7 @@ export default {
 			/**
 			 * Two-way binding of the value prop. Use v-model="selectedTimezone" for two-way binding
 			 */
-			this.$emit('input', newValue.timezoneId)
+			this.$emit('update:modelValue', newValue.timezoneId)
 		},
 
 		/**
diff --git a/src/components/index.js b/src/components/index.js
index 81101f5710..34942d216e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -59,7 +59,7 @@ export { default as NcCounterBubble } from './NcCounterBubble/index.js'
 // export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'
 // export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
 export { default as NcDateTime } from './NcDateTime/index.js'
-// export { default as NcDateTimePicker } from './NcDateTimePicker/index.js'
+export { default as NcDateTimePicker } from './NcDateTimePicker/index.js'
 export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
 // Not exported on purpose
 // export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'
@@ -92,5 +92,5 @@ export { default as NcSettingsInputText } from './NcSettingsInputText/index.js'
 export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
-// export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
+export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
 // export { default as NcUserBubble } from './NcUserBubble/index.js'
diff --git a/src/utils/ScopeComponent.js b/src/utils/ScopeComponent.js
index 8c96282852..82a16b995b 100644
--- a/src/utils/ScopeComponent.js
+++ b/src/utils/ScopeComponent.js
@@ -32,6 +32,8 @@ const ScopeComponent = (Component) => {
 	Component.mounted.push(function() {
 		this.$el.setAttribute(`data-v-${SCOPE_VERSION}`, '')
 	})
+
+	return Component
 }
 
 export default ScopeComponent
diff --git a/styleguide.config.js b/styleguide.config.js
index 34ea00905b..e9a0328814 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -199,10 +199,7 @@ module.exports = async () => {
 					{
 						name: 'NcPickers',
 						components: [
-							//'src/components/Nc*Picker*/*.vue',
-							'src/components/NcColorPicker/*.vue',
-							'src/components/NcDateTimePickerNative*/*.vue',
-							'src/components/NcEmojiPicker/*.vue',
+							'src/components/Nc*Picker*/*.vue',
 						],
 					},
 				// 	{