feat(vue3): Migrate NcDatetimePickerNative

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud-libraries · Sep 17, 2023 · 42d2f53 · 42d2f53
1 parent 2743bd4
commit 42d2f53
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/...mePickerNative/NcDateTimePickerNative.vue → ...mePickerNative/NcDatetimePickerNative.vue b/...mePickerNative/NcDateTimePickerNative.vue → ...mePickerNative/NcDatetimePickerNative.vue
@@ -34,7 +34,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 ```vue
 <template>
 	<span>
-		<NcDateTimePickerNative
+		<NcDatetimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
@@ -58,7 +58,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 ```vue
 <template>
 	<span>
-		<NcDateTimePickerNative
+		<NcDatetimePickerNative
 			v-model="value"
 			:id="id"
 			:min="yesterdayDate"
@@ -87,7 +87,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 ```vue
 <template>
 	<span>
-		<NcDateTimePickerNative
+		<NcDatetimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
@@ -112,7 +112,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 ```vue
 <template>
 	<span>
-		<NcDateTimePickerNative
+		<NcDatetimePickerNative
 			v-model="value"
 			:id="id"
 			:label="label"
@@ -145,8 +145,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 			:value="formattedValue"
 			:min="formattedMin"
 			:max="formattedMax"
-			v-bind="$attrs"
-			v-on="listeners">
+			v-bind="attrs">
 	</div>
 </template>
 
@@ -155,7 +154,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 const inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
 
 export default {
-	name: 'NcDateTimePickerNative',
+	name: 'NcDatetimePickerNative',
 	inheritAttrs: false,
 
 	props: {
@@ -164,7 +163,7 @@ export default {
 		 * The selected time zone does not have an influence of the selected time and date value.
 		 * You have to translate the time yourself when you want to factor in time zones.
 		 */
-		value: {
+		modelValue: {
 			type: Date,
 			required: true,
 		},
@@ -221,7 +220,7 @@ export default {
 		},
 		/**
 		 * Class to add to the input field.
-		 * Necessary to use NcDateTimePickerNative in the NcActionInput component.
+		 * Necessary to use NcDatetimePickerNative in the NcActionInput component.
 		 */
 		inputClass: {
 			type: [Object, String],
@@ -235,7 +234,7 @@ export default {
 
 	computed: {
 		formattedValue() {
-			return this.formatValue(this.value)
+			return this.formatValue(this.modelValue)
 		},
 		formattedMin() {
 			if (this.min) {
@@ -249,16 +248,16 @@ export default {
 			}
 			return false
 		},
-		listeners() {
+		attrs() {
 			return {
-				...this.$listeners,
+				...this.$attrs,
 				/**
 				 * Handle the input event
 				 *
 				 * @param {InputEvent} $event input event payload
 				 * @return {Date|string} new chosen Date() or an empty string
 				 */
-				input: ($event) => {
+				onInput: ($event) => {
 					if (isNaN($event.target.valueAsNumber)) {
 						/**
 						 * Emitted when the input value changes
@@ -269,7 +268,7 @@ export default {
 					}
 					if (this.type === 'time') {
 						const time = $event.target.value
-						if (this.value === '') {
+						if (this.modelValue === '') {
 							// this case is because of Chrome bug
 							const { yyyy, MM, dd } = this.getReadableDate(new Date())
 							/**
@@ -279,7 +278,7 @@ export default {
 							 */
 							return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))
 						}
-						const { yyyy, MM, dd } = this.getReadableDate(this.value)
+						const { yyyy, MM, dd } = this.getReadableDate(this.modelValue)
 						/**
 						 * Emitted when the input value changes
 						 *
@@ -288,7 +287,7 @@ export default {
 						return this.$emit('input', new Date(`${yyyy}-${MM}-${dd}T${time}`))
 					} else if (this.type === 'month') {
 						const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')
-						if (this.value === '') {
+						if (this.modelValue === '') {
 							const { yyyy, dd, hh, mm } = this.getReadableDate(new Date())
 							/**
 							 * Emitted when the input value changes

diff --git a/...omponents/NcDateTimePickerNative/index.js → ...omponents/NcDatetimePickerNative/index.js b/...omponents/NcDateTimePickerNative/index.js → ...omponents/NcDatetimePickerNative/index.js
@@ -20,9 +20,9 @@
  *
  */
 
-import NcDateTimePickerNative from './NcDateTimePickerNative.vue'
+import NcDatetimePickerNative from './NcDatetimePickerNative.vue'
 import ScopeComponent from '../../utils/ScopeComponent.js'
 
-ScopeComponent(NcDateTimePickerNative)
+ScopeComponent(NcDatetimePickerNative)
 
-export default NcDateTimePickerNative
+export default NcDatetimePickerNative
diff --git a/src/components/index.js b/src/components/index.js
@@ -62,7 +62,7 @@ export { default as NcButton } from './NcButton/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 NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
+export { default as NcDatetimePickerNative } from './NcDatetimePickerNative/index.js'
 // Not exported on purpose
 // export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'
 

diff --git a/styleguide.config.js b/styleguide.config.js
@@ -202,12 +202,13 @@ module.exports = async () => {
 				// 			'src/components/NcSelect*/*.vue',
 				// 		],
 				// 	},
-				// 	{
-				// 		name: 'NcPickers',
-				// 		components: [
-				// 			'src/components/Nc*Picker*/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcPickers',
+						components: [
+							//'src/components/Nc*Picker*/*.vue',
+							'src/components/NcDatetimePickerNative*/*.vue',
+						],
+					},
 				// 	{
 				// 		name: 'NcRichText',
 				// 		components: [