Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(vue3): Migrate Nc*Field #4512

Merged
merged 2 commits into from
Sep 18, 2023
Merged

chore(vue3): Migrate Nc*Field #4512

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea7bf3e
fix(vue3): Migrate Nc*Field
raimund-schluessler Sep 9, 2023
f15b006
Merge branch 'next' into feat/2154/input-field
skjnldsv Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintrc.js
View file
Open in desktop
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
View file
Open in desktop
ShGKme marked this conversation as resolved.
Show resolved Hide resolved
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?.())
raimund-schluessler marked this conversation as resolved.
Show resolved Hide resolved
},

hasTrailingIcon() {
Expand Down
20 changes: 8 additions & 12 deletions src/components/NcPasswordField/NcPasswordField.vue
View file
Open in desktop
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
View file
Open in desktop
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 />
skjnldsv marked this conversation as resolved.
Show resolved Hide resolved
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export { default as NcHighlight } from './NcHighlight/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 NcPopover } from './NcPopover/index.js'
// 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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,12 +184,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