Skip to content

Commit

Permalink
Merge pull request #4512 from nextcloud-libraries/feat/2154/input-field
Browse files Browse the repository at this point in the history
chore(vue3): Migrate Nc*Field
  • Loading branch information
skjnldsv authored Sep 18, 2023
2 parents 22f590e + f15b006 commit 33ecf70
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 35 deletions.
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
13 changes: 10 additions & 3 deletions src/components/NcInputField/NcInputField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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.
Expand All @@ -260,7 +267,7 @@ export default {
},
hasLeadingIcon() {
return this.$slots.default
return isSlotPopulated(this.$slots.default?.())
},
hasTrailingIcon() {
Expand Down
20 changes: 8 additions & 12 deletions src/components/NcPasswordField/NcPasswordField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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 -->
Expand Down Expand Up @@ -138,9 +137,6 @@ export default {
EyeOff,
},
// Allow forwarding all attributes
inheritAttrs: false,
props: {
...NcInputField.props,
Expand Down
20 changes: 9 additions & 11 deletions src/components/NcTextField/NcTextField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 !== ''"
Expand All @@ -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"
Expand Down Expand Up @@ -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 />
Expand Down Expand Up @@ -167,9 +168,6 @@ export default {
Undo,
},
// Allow forwarding all attributes
inheritAttrs: false,
props: {
...NcInputField.props,
Expand Down
4 changes: 2 additions & 2 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
12 changes: 6 additions & 6 deletions styleguide.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down

0 comments on commit 33ecf70

Please sign in to comment.