Merge pull request #6454 from nextcloud-libraries/fix/noid/date-picke…

…r-styles fix(NcDateTimePickerNative): visual fixes
nextcloud-libraries · Jan 29, 2025 · 8ad2ac6 · 8ad2ac6
2 parents 8da639f + b0e6483
commit 8ad2ac6
Showing 1 changed file with 29 additions and 86 deletions.
diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -22,7 +22,6 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 			<NcSelect v-bind="props" v-model="type" />
 			<NcDateTimePickerNative
 				v-model="value"
-				:id="id"
 				:label="label"
 				:type="type" />
 		</div>
@@ -45,7 +44,6 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 				},
 				type: 'datetime-local',
 				value: new Date(),
-				id: 'date-time-picker',
 				label: 'Select a new date or time',
 			}
 		},
@@ -66,7 +64,6 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 		<span>Picked date: {{ value || 'null' }}</span>
 		<NcDateTimePickerNative
 			v-model="value"
-			:id="id"
 			:min="yesterdayDate"
 			:max="someDate"
 			:label="label"
@@ -79,7 +76,6 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 		data() {
 			return {
 				value: new Date(),
-				id: 'date-time-picker',
 				label: 'please select a new date',
 				yesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),
 				someDate: new Date(new Date().setDate(new Date().getDate() + 7)),
@@ -88,90 +84,15 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 	}
 </script>
 ```
-
-#### Usage: type='time'
-```vue
-<template>
-	<div>
-		<span>Picked time: {{ value || 'null' }}</span>
-		<NcDateTimePickerNative
-			v-model="value"
-			:id="id"
-			:label="label"
-			type="time" />
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				value: new Date(),
-				id: 'date-time-picker',
-				label: 'Please select a new time',
-			}
-		},
-	}
-</script>
-```
-
-#### Usage: type='week'
-```vue
-<template>
-	<div>
-		<span>Picked date: {{ value || 'null' }}</span>
-		<NcDateTimePickerNative
-			v-model="value"
-			:id="id"
-			:label="label"
-			type="week" />
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				value: new Date(),
-				id: 'date-time-picker',
-				label: 'please select a new date',
-			}
-		},
-	}
-</script>
-```
-
-#### Usage: type='month'
-```vue
-<template>
-	<div>
-		<span>Picked date: {{ value || 'null' }}</span>
-		<NcDateTimePickerNative
-			v-model="value"
-			:id="id"
-			:label="label"
-			type="month" />
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				value: new Date(),
-				id: 'date-time-picker',
-				label: 'please select a new date',
-			}
-		},
-	}
-</script>
-```
-
 </docs>
 
 <template>
 	<div class="native-datetime-picker">
-		<label :class="{ 'hidden-visually': hideLabel }" :for="id">{{ label }}</label>
+		<label class="native-datetime-picker--label"
+			:class="{ 'hidden-visually': hideLabel }"
+			:for="id">
+			{{ label }}
+		</label>
 		<input :id="id"
 			class="native-datetime-picker--input"
 			:class="inputClass"
@@ -186,6 +107,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 
 <script>
 import { useModelMigration } from '../../composables/useModelMigration.ts'
+import GenRandomId from '../../utils/GenRandomId.js'
 
 const inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
 
@@ -224,7 +146,8 @@ export default {
 		 */
 		id: {
 			type: String,
-			required: true,
+			default: () => 'date-time-picker-' + GenRandomId(),
+			validator: id => id.trim() !== '',
 		},
 		/**
 		 * type attribute of the input field
@@ -420,10 +343,30 @@ export default {
 		flex-direction: column;
 	}
 
+	.native-datetime-picker .native-datetime-picker--label {
+		margin-block-end: 2px;
+	}
+
 	.native-datetime-picker .native-datetime-picker--input {
+		// If border width differs between focused and unfocused we need to compensate to prevent jumping
+		--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
 		width: 100%;
 		flex: 0 0 auto;
-		padding-right: 4px;
+		margin: 0;
+		padding-inline-start: calc(var(--border-radius-large) + var(--input-border-width-offset));
+		padding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));
+		border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
+
+		&:active:not([disabled]),
+		&:hover:not([disabled]),
+		&:focus:not([disabled]),
+		&:focus-within:not([disabled]) {
+			border-color: var(--color-main-text);
+			border-width: var(--border-width-input-focused, 2px);
+			box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			// Reset padding offset when focused
+			--input-border-width-offset: 0px;
+		}
 	}
 
 	[data-theme-light],