Merge pull request #4512 from nextcloud-libraries/feat/2154/input-field

chore(vue3): Migrate Nc*Field
nextcloud-libraries · Sep 18, 2023 · 33ecf70 · 33ecf70
2 parents 22f590e + f15b006
commit 33ecf70
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,7 +15,6 @@ module.exports = {
 		'cypress',
 	],
 	ignorePatterns: [
-		'src/components/Nc*Field/*.vue',
 		'src/components/Nc*Picker*/*.vue',
 		'src/components/NcAction*/*.vue',
 		'src/components/NcAppContent*/*.vue',

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -33,7 +33,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 </docs>
 
 <template>
-	<div class="input-field" :class="{ 'input-field--disabled': disabled }">
+	<div class="input-field" :class="[{ 'input-field--disabled': disabled }, $props.class ]">
 		<div class="input-field__main-wrapper">
 			<input v-bind="$attrs"
 				:id="computedId"
@@ -53,7 +53,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--error': error,
 					}]"
 				:value="value"
-				v-on="$listeners"
 				@input="handleInput">
 			<!-- Label -->
 			<label v-if="!labelOutside && isValidLabel"
@@ -110,6 +109,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 <script>
 import NcButton from '../NcButton/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -235,6 +235,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Class to add to the root component.
+		 */
+		class: {
+			type: [Object, String, Array],
+			default: '',
+		},
 		/**
 		 * Class to add to the input field.
 		 * Necessary to use NcInputField in the NcActionInput component.
@@ -260,7 +267,7 @@ export default {
 		},
 
 		hasLeadingIcon() {
-			return this.$slots.default
+			return isSlotPopulated(this.$slots.default?.())
 		},
 
 		hasTrailingIcon() {

diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
@@ -29,32 +29,32 @@ General purpose password field component.
 ```
 <template>
 	<div class="wrapper">
-		<NcPasswordField :value.sync="text1"
+		<NcPasswordField v-model:value="text1"
 			label="Old password" />
 		<div class="external-label">
 			<label for="textField">New password</label>
-			<NcPasswordField id="textField"
-				:value.sync="text2"
+			<NcPasswordField v-model:value="text2"
+				id="textField"
 				:label-outside="true"
 				placeholder="Min. 12 characters" />
 		</div>
 		<div class="external-label">
 			<label for="textField2">New password</label>
-			<NcPasswordField id="textField2"
-				:value.sync="text3"
+			<NcPasswordField v-model:value="text3"
+				id="textField2"
 				:error="true"
 				:label-outside="true"
 				placeholder="Min. 12 characters"
 				helper-text="Password is insecure" />
 		</div>
 
-		<NcPasswordField :value.sync="text4"
+		<NcPasswordField v-model:value="text4"
 			label="Good new password"
 			:success="true"
 			placeholder="Min. 12 characters"
 			helper-text="Password is secure" />
 
-		<NcPasswordField :value.sync="text5"
+		<NcPasswordField v-model:value="text5"
 			:disabled="true"
 			label="Disabled" />
 	</div>
@@ -96,7 +96,7 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="{...$attrs, ...$props }"
+	<NcInputField v-bind="$props"
 		ref="inputField"
 		:type="isPasswordHidden ? 'password' : 'text'"
 		:show-trailing-button="showTrailingButton && true"
@@ -105,7 +105,6 @@ export default {
 		:error="computedError"
 		:success="computedSuccess"
 		:minlength="rules.minlength"
-		v-on="$listeners"
 		@trailing-button-click="togglePasswordVisibility"
 		@input="handleInput">
 		<!-- Default slot for the leading icon -->
@@ -138,9 +137,6 @@ export default {
 		EyeOff,
 	},
 
-	// Allow forwarding all attributes
-	inheritAttrs: false,
-
 	props: {
 		...NcInputField.props,
 

diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
@@ -34,7 +34,7 @@ and `minlength`.
 ```
 <template>
 	<div class="wrapper">
-		<NcTextField :value.sync="text1"
+		<NcTextField v-model:value="text1"
 			label="Leading icon and clear trailing button"
 			trailing-button-icon="close"
 			:show-trailing-button="text1 !== ''"
@@ -49,26 +49,28 @@ and `minlength`.
 			@trailing-button-click="clearText">
 			<Lock :size="20" />
 		</NcTextField>
-		<NcTextField :value.sync="text2"
+		<NcTextField v-model:value="text2"
 			label="Success state"
 			placeholder="Placeholders are possible"
 			:success="true"
 			@trailing-button-click="clearText">
 		</NcTextField>
-		<NcTextField :value.sync="text3"
+		<NcTextField v-model:value="text3"
 			label="Error state"
 			placeholder="Enter something valid"
 			:error="true"
 			@trailing-button-click="clearText">
 		</NcTextField>
-		<NcTextField label="Disabled"
+		<NcTextField :value=""
+			label="Disabled"
 			:disabled="true" />
-		<NcTextField label="Disabled + Success"
+		<NcTextField :value=""
+			label="Disabled + Success"
 			:success="true"
 			:disabled="true" />
 		<div class="external-label">
 			<label for="textField">External label</label>
-			<NcTextField :value.sync="text5"
+			<NcTextField v-model:value="text5"
 				id="textField"
 				:label-outside="true"
 				placeholder="Input with external label"
@@ -130,10 +132,9 @@ export default {
 </docs>
 
 <template>
-	<NcInputField v-bind="{...$attrs, ...$props }"
+	<NcInputField v-bind="$props"
 		ref="inputField"
 		:trailing-button-label="clearTextLabel"
-		v-on="$listeners"
 		@input="handleInput">
 		<!-- Default slot for the leading icon -->
 		<slot />
@@ -167,9 +168,6 @@ export default {
 		Undo,
 	},
 
-	// Allow forwarding all attributes
-	inheritAttrs: false,
-
 	props: {
 		...NcInputField.props,
 

diff --git a/src/components/index.js b/src/components/index.js
@@ -82,7 +82,7 @@ export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
 // export { default as NcModal } from './NcModal/index.js'
 export { default as NcNoteCard } from './NcNoteCard/index.js'
-// export { default as NcPasswordField } from './NcPasswordField/index.js'
+export { default as NcPasswordField } from './NcPasswordField/index.js'
 export { default as NcPopover } from './NcPopover/index.js'
 export { default as NcProgressBar } from './NcProgressBar/index.js'
 // export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js'
@@ -92,6 +92,6 @@ export { default as NcSavingIndicatorIcon } from './NcSavingIndicatorIcon/index.
 // export { default as NcSelect } from './NcSelect/index.js'
 // export { default as NcSelectTags } from './NcSelectTags/index.js'
 // export { default as NcSettingsSection } from './NcSettingsSection/index.js'
-// export { default as NcTextField } from './NcTextField/index.js'
+export { default as NcTextField } from './NcTextField/index.js'
 // export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
 // export { default as NcUserBubble } from './NcUserBubble/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -178,12 +178,12 @@ module.exports = async () => {
 				// 			'src/components/NcDashboard*/*.vue',
 				// 		],
 				// 	},
-				// 	{
-				// 		name: 'NcFields',
-				// 		components: [
-				// 			'src/components/Nc*Field/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcFields',
+						components: [
+							'src/components/Nc*Field/*.vue',
+						],
+					},
 				// 	{
 				// 		name: 'NcListItems',
 				// 		components: [