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

[next] feat(NcActions*): migrate to vue 3 #4646

Merged
merged 7 commits into from
Oct 31, 2023
Merged

[next] feat(NcActions*): migrate to vue 3 #4646

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aa7e88b
feat(NcActions*): migrate to vue 3
raimund-schluessler Oct 13, 2023
27773d4
feat(NcActions): don't use resolveComponent
raimund-schluessler Oct 25, 2023
bbbfc11
feat(NcActions): don't test vnode for null
raimund-schluessler Oct 25, 2023
5030b10
feat(NcActions): we always have a DOM
raimund-schluessler Oct 25, 2023
fec8239
feat(NcActions): don't overwrite custom action class
raimund-schluessler Oct 25, 2023
9575d4f
feat(NcActions): don't overwrite custom action class
raimund-schluessler Oct 25, 2023
be0d236
feat(NcActions): use mergeProps for inline action
raimund-schluessler Oct 25, 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/NcAction*/*.vue',
'src/components/NcAppContent*/*.vue',
'src/components/NcAppNavigation*/*.vue',
'src/components/NcAppSettings*/*.vue',
Expand Down
44 changes: 20 additions & 24 deletions src/components/NcActionInput/NcActionInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,41 +32,41 @@ For the `NcSelect` component, all events will be passed through. Please see the
```vue
<template>
<NcActions>
<NcActionInput :value.sync="text" :label-outside="true" label="Label outside the input">
<NcActionInput v-model="text" :label-outside="true" label="Label outside the input">
<template #icon>
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput :value.sync="text" :show-trailing-button="false" label="Input without trailing button">
<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
<template #icon>
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput :value.sync="text" label="Input with placeholder">
<NcActionInput v-model="text" label="Input with placeholder">
<template #icon>
<Pencil :size="20" />
</template>
This is the placeholder
</NcActionInput>
<NcActionInput type="password" :value.sync="text" label="Password with visible label">
<NcActionInput type="password" v-model="text" label="Password with visible label">
<template #icon>
<Key :size="20" />
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="password" :value.sync="text" :show-trailing-button="false">
<NcActionInput type="password" v-model="text" :show-trailing-button="false">
<template #icon>
<Key :size="20" />
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="color" :value.sync="color" label="Favorite color">
<NcActionInput type="color" v-model="color" label="Favorite color">
<template #icon>
<Eyedropper :size="20" />
</template>
Color placeholder
</NcActionInput>
<NcActionInput label="Visible label" :value.sync="text">
<NcActionInput label="Visible label" v-model="text">
<template #icon>
<Pencil :size="20" />
</template>
Expand All @@ -77,7 +77,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
<Close :size="20" />
</template>
</NcActionInput>
<NcActionInput type="date" isNativePicker :value="new Date()">
<NcActionInput type="date" isNativePicker :model-value="new Date()">
<template #icon>
<Pencil :size="20" />
</template>
Expand Down Expand Up @@ -168,7 +168,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcDateTimePicker v-if="datePickerType"
ref="datetimepicker"
:value="value"
:model-value="modelValue"
style="z-index: 99999999999;"
:placeholder="text"
:disabled="disabled"
Expand All @@ -181,7 +181,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcDateTimePickerNative v-else-if="isNativePicker"
:id="idNativeDateTimePicker"
:value="value"
:model-value="modelValue"
:type="nativeDatePickerType"
:input-class="{ focusable: isFocusable }"
class="action-input__datetimepicker"
Expand All @@ -190,26 +190,24 @@ For the `NcSelect` component, all events will be passed through. Please see the
@change="$emit('change', $event)" />

<NcSelect v-else-if="isMultiselectType"
:value="value"
:model-value="modelValue"
:placeholder="text"
:disabled="disabled"
:append-to-body="false"
:input-class="{ focusable: isFocusable }"
class="action-input__multi"
v-bind="$attrs"
v-on="$listeners" />
v-bind="$attrs" />

<NcPasswordField v-else-if="type==='password'"
:id="inputId"
:value="value"
:model-value="modelValue"
:label="label"
:label-outside="!label || labelOutside"
:placeholder="text"
:disabled="disabled"
:input-class="{ focusable: isFocusable }"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@change="onChange" />

Expand All @@ -222,13 +220,12 @@ For the `NcSelect` component, all events will be passed through. Please see the
</label>
<div class="action-input__input-container">
<NcColorPicker id="inputId"
:value="value"
:model-value="modelValue"
class="colorpicker__trigger"
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@submit="$refs.form.requestSubmit()">
<button :style="{'background-color': value}"
<button :style="{'background-color': modelValue}"
class="colorpicker__preview"
:class="{ focusable: isFocusable }" />
</NcColorPicker>
Expand All @@ -237,7 +234,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcTextField v-else
:id="inputId"
:value="value"
:model-value="modelValue"
:label="label"
:label-outside="!label || labelOutside"
:placeholder="text"
Expand All @@ -248,7 +245,6 @@ For the `NcSelect` component, all events will be passed through. Please see the
:trailing-button-label="trailingButtonLabel"
:show-trailing-button="showTrailingButton && !disabled"
v-bind="$attrs"
v-on="$listeners"
@trailing-button-click="$refs.form.requestSubmit()"
@input="onInput"
@change="onChange" />
Expand Down Expand Up @@ -351,7 +347,7 @@ export default {
/**
* value attribute of the input field
*/
value: {
modelValue: {
type: [String, Date, Number, Array],
default: '',
},
Expand Down Expand Up @@ -396,7 +392,7 @@ export default {
'input',
'submit',
'change',
'update:value',
'update:modelValue',
],

computed: {
Expand Down Expand Up @@ -464,11 +460,11 @@ export default {
this.$emit('input', event)
/**
* Emitted when the inputs value changes
* ! DatetimePicker only send the value
* ! DateTimePicker only send the value
*
* @type {string|Date}
*/
this.$emit('update:value', event.target ? event.target.value : event)
this.$emit('update:modelValue', event.target ? event.target.value : event)
},
onSubmit(event) {
event.preventDefault()
Expand Down
10 changes: 1 addition & 9 deletions src/components/NcActionRouter/NcActionRouter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,10 @@
<li class="action">
<router-link :to="to"
:aria-label="ariaLabel"
:exact="exact"
:title="title"
class="action-router focusable"
rel="nofollow noreferrer noopener"
@click.native="onClick">
@click="onClick">
<!-- @slot Manually provide icon -->
<slot name="icon">
<span :class="[isIconUrl ? 'action-router__icon--url' : icon]"
Expand Down Expand Up @@ -82,13 +81,6 @@ export default {
default: '',
required: true,
},
/**
* router-link exact prop [https://router.vuejs.org/api/#exact](https://router.vuejs.org/api/#exact)
*/
exact: {
type: Boolean,
default: false,
},
},
}
</script>
Expand Down
Loading
Loading