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

Jump to bottom

Feature: Add visible inner label for NcInputField on border #4394

Merged
merged 2 commits into from Aug 25, 2023
Merged

Feature: Add visible inner label for NcInputField on border #4394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc4c2bd
feat(NcInputField): Make inner label always visible
susnux Jun 28, 2023
916ba53
fix(NcActionInput): Adjust the action input to the `NcInputField` cha…
susnux Jun 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -21,6 +21,8 @@ All notable changes to this project will be documented in this file.
- `name` propery is now required for `NcActions*`, `NcAppNavigationItem` and `NcBreadcrumb*`
- See linked pull request for full migration guide
- chore: Drop `install` entry point and replace it with an Vue Plugin [\#4349](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4349) ([susnux](https://github.com/susnux))
- `NcInputField`: The `labelVisible` property was removed for accessibility it is required to always show a label.
You can still use the `labelOutside` property to remove the inner label from the component.

### :rocket: Enhancements
- enh\(NcDatetime\): New component for displaying timestamps as time relative from now [\#4219](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4219) ([susnux](https://github.com/susnux))
Expand Down
120 changes: 63 additions & 57 deletions src/components/NcActionInput/NcActionInput.vue
View file
Open in desktop
Expand Up @@ -23,6 +23,10 @@

<docs>
This component is made to be used inside of the [NcActions](#NcActions) component slots.

It is recommended to not only provide a placeholder, but also a label.
The label should describe what input is expected and the placehold what format the input should have.

All undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.
For the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.
```vue
Expand All @@ -33,18 +37,18 @@ For the `NcSelect` component, all events will be passed through. Please see the
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput :value.sync="text" :show-trailing-button="false">
<NcActionInput :value.sync="text" :show-trailing-button="false" label="Input without trailing button">
<template #icon>
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput :value.sync="text">
<NcActionInput :value.sync="text" label="Input with placeholder">
<template #icon>
<Pencil :size="20" />
</template>
This is the placeholder
</NcActionInput>
<NcActionInput type="password" :value.sync="text">
<NcActionInput type="password" :value.sync="text" label="Password with visible label">
<template #icon>
<Key :size="20" />
</template>
Expand All @@ -56,7 +60,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="color" :value.sync="color">
<NcActionInput type="color" :value.sync="color" label="Favorite color">
<template #icon>
<Eyedropper :size="20" />
</template>
Expand All @@ -68,7 +72,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
</template>
Input with visible label
</NcActionInput>
<NcActionInput :disabled="true" value="This is a disabled input">
<NcActionInput :disabled="true" label="This is a disabled input">
<template #icon>
<Close :size="20" />
</template>
Expand Down Expand Up @@ -157,6 +161,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
<NcDatetimePicker v-if="datePickerType"
ref="datetimepicker"
:value="value"
style="z-index: 99999999999;"
:placeholder="text"
:disabled="disabled"
:type="datePickerType"
Expand Down Expand Up @@ -186,59 +191,60 @@ For the `NcSelect` component, all events will be passed through. Please see the
v-bind="$attrs"
v-on="$listeners" />

<template v-else>
<div class="action-input__container">
<label v-if="label"
class="action-input__text-label"
:class="{ 'action-input__text-label--hidden': !labelVisible }"
:for="inputId">
{{ label }}
</label>
<div class="action-input__input-container">
<NcPasswordField v-if="type==='password'"
:id="inputId"
:value="value"
:label="text"
:disabled="disabled"
:input-class="{ focusable: isFocusable }"
trailing-button-icon="arrowRight"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@trailing-button-click="$refs.form.requestSubmit()"
@input="onInput"
@change="onChange" />

<NcColorPicker v-else-if="type==='color'"
:id="inputId"
:value="value"
class="colorpicker__trigger"
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@submit="$refs.form.requestSubmit()">
<button :style="{'background-color': value}"
class="colorpicker__preview"
:class="{ focusable: isFocusable }" />
</NcColorPicker>

<NcTextField v-else
:id="inputId"
:value="value"
:label="text"
:disabled="disabled"
:input-class="{ focusable: isFocusable }"
:type="type"
trailing-button-icon="arrowRight"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@trailing-button-click="$refs.form.requestSubmit()"
@input="onInput"
@change="onChange" />
</div>
<NcPasswordField v-else-if="type==='password'"
:id="inputId"
:value="value"
:label="label"
:label-outside="!label"
:placeholder="text"
:disabled="disabled"
:input-class="{ focusable: isFocusable }"
trailing-button-icon="arrowRight"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@trailing-button-click="$refs.form.requestSubmit()"
@input="onInput"
@change="onChange" />

<div v-else-if="type === 'color'" class="action-input__container">
<label v-if="label && type === 'color'"
class="action-input__text-label"
:class="{ 'action-input__text-label--hidden': !labelVisible }"
:for="inputId">
{{ label }}
</label>
<div class="action-input__input-container">
<NcColorPicker id="inputId"
:value="value"
class="colorpicker__trigger"
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@submit="$refs.form.requestSubmit()">
<button :style="{'background-color': value}"
class="colorpicker__preview"
:class="{ focusable: isFocusable }" />
</NcColorPicker>
</div>
</template>
</div>

<NcTextField v-else
:id="inputId"
:value="value"
:label="label"
:label-outside="!label"
:placeholder="text"
:disabled="disabled"
:input-class="{ focusable: isFocusable }"
:type="type"
trailing-button-icon="arrowRight"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@trailing-button-click="$refs.form.requestSubmit()"
@input="onInput"
@change="onChange" />
</form>
</span>
</li>
Expand Down