Merge pull request #4631 from nextcloud-libraries/chore/2154/pickers

[next] feat(NcDateTimePicker): migrate to vue 3

.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',

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"
   },

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>

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'

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;

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>

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'

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)
 		},
 
 		/**

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'

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

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',
 						],
 					},
 				// 	{