Skip to content

Commit

Permalink
Use NcSelect for NcActionInput type text
Browse files Browse the repository at this point in the history 
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
  • Loading branch information
@raimund-schluessler
raimund-schluessler committed Feb 19, 2023
1 parent e435c05 commit 8abdd54
Showing 1 changed file with 75 additions and 101 deletions.
176 changes: 75 additions & 101 deletions src/components/NcActionInput/NcActionInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,30 @@ For the multiselect component, all events will be passed through. Please see the
```vue
<template>
<NcActions>
<NcActionInput value="This is an input">
<NcActionInput :value.sync="text">
<template #icon>
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput>
<NcActionInput :value.sync="text">
<template #icon>
<Pencil :size="20" />
</template>
This is the placeholder
</NcActionInput>
<NcActionInput label="Visible label">
<NcActionInput type="password" :value.sync="text">
<template #icon>
<Key :size="20" />
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="color" :value.sync="color">
<template #icon>
<Eyedropper :size="20" />
</template>
Color placeholder
</NcActionInput>
<NcActionInput label="Visible label" :value.sync="text">
<template #icon>
<Pencil :size="20" />
</template>
Expand All @@ -50,6 +62,12 @@ For the multiselect component, all events will be passed through. Please see the
<Close :size="20" />
</template>
</NcActionInput>
<NcActionInput type="date" isNativePicker :value="new Date()">
<template #icon>
<Pencil :size="20" />
</template>
Please pick a date
</NcActionInput>
<NcActionInput type="date">
<template #icon>
<Pencil :size="20" />
Expand All @@ -66,13 +84,23 @@ For the multiselect component, all events will be passed through. Please see the
</template>
<script>
import Close from 'vue-material-design-icons/Close'
import Eyedropper from 'vue-material-design-icons/Eyedropper'
import Key from 'vue-material-design-icons/Key'
import Pencil from 'vue-material-design-icons/Pencil'
export default {
components: {
Close,
Eyedropper,
Key,
Pencil,
},
data() {
return {
color: '#0082C9',
text: 'This is the input text',
}
},
}
</script>
```
Expand Down Expand Up @@ -139,23 +167,33 @@ For the multiselect component, all events will be passed through. Please see the
{{ label }}
</label>
<div class="action-input__input-container">
<input :id="inputId"
:type="type"
<NcPasswordField v-if="type=='password'"
:id="inputId"
:value="value"
:label="text"
:disabled="disabled"
trailing-button-icon="arrowRight"
:show-trailing-button="value !== '' && !disabled"
@udpate:value="onInput"
@trailing-button-click="onChange" />

<NcColorPicker v-else-if="type=='color'"
:id="inputId"
:value="value"
class="colorpicker__trigger"
@input="onInput">
<div :style="{'background-color': value}" class="colorpicker__preview" />
</NcColorPicker>

<NcTextField v-else
:id="inputId"
:value="value"
:placeholder="text"
:label="text"
:disabled="disabled"
:aria-label="ariaLabel"
v-bind="$attrs"
:class="{ focusable: isFocusable }"
class="action-input__input"
@input="onInput"
@change="onChange">
<!-- allow the custom font to inject a ::before
not possible on input[type=submit] -->
<input :id="id" type="submit" class="action-input__submit">
<label v-show="!disabled" :for="id" class="action-input__icon-label">
<ArrowRight :size="20" />
</label>
trailing-button-icon="arrowRight"
:show-trailing-button="value !== '' && !disabled"
@udpate:value="onInput"
@trailing-button-click="onChange" />
</div>
</div>
</template>
Expand All @@ -166,21 +204,22 @@ For the multiselect component, all events will be passed through. Please see the

<script>
import NcDatetimePicker from '../NcDatetimePicker/index.js'
import NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'
import NcMultiselect from '../NcMultiselect/index.js'
import NcPasswordField from '../NcPasswordField/index.js'
import NcTextField from '../NcTextField/index.js'
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
import GenRandomId from '../../utils/GenRandomId.js'
import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'
export default {
name: 'NcActionInput',
components: {
ArrowRight,
NcDatetimePicker,
NcMultiselect,
NcDateTimePickerNative,
NcMultiselect,
NcPasswordField,
NcTextField,
},
mixins: [ActionGlobalMixin],
Expand Down Expand Up @@ -463,21 +502,25 @@ $input-margin: 4px;
padding-right: $icon-margin;
}
&__submit {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
&__container {
width: 100%;
}
&__input-container {
display: flex;
.colorpicker {
&__trigger,
&__preview {
width: 100%;
}
&__preview {
width: 100%;
height: 36px;
border-radius: var(--border-radius-large);
}
}
}
&__text-label {
Expand All @@ -494,75 +537,6 @@ $input-margin: 4px;
}
}
&__icon-label {
display: flex;
align-items: center;
justify-content: center;
width: #{$clickable-area - $input-margin * 2};
height: #{$clickable-area - $input-margin * 2};
box-sizing: border-box;
margin: 0 0 0 -8px;
padding: 7px 6px;
opacity: $opacity_full;
color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
border-left-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
/* Avoid background under border */
background-color: var(--color-main-background);
background-clip: padding-box;
&, * {
cursor: pointer;
}
}
/* Inputs inside popover supports text, submit & reset */
&__input {
flex: 1 1 auto;
min-width: $clickable-area * 3;
min-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
max-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
margin: 0;
// if disabled, change cursor
&:disabled {
cursor: default;
}
/* only show confirm borders if input is not focused */
&:not(:active):not(:hover):not(:focus) {
&:invalid {
& ~ .action-input__icon-label {
border-color: var(--color-error);
border-left-color: transparent;
}
}
&:not(:disabled) ~ .action-input__icon-label {
&:active,
&:hover,
&:focus {
border-color: var(--color-primary-element);
border-radius: var(--border-radius);
}
}
}
&:active,
&:hover,
&:focus {
&:not(:disabled) ~ .action-input__icon-label {
/* above previous input */
z-index: 2;
border-color: var(--color-primary-element);
border-left-color: transparent;
}
}
}
&__picker :deep(.mx-input) {
margin: 0;
}
Expand Down

0 comments on commit 8abdd54

Please sign in to comment.