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

Vue.js 3 upgrade #2561

Draft
wants to merge 31 commits into
base: 3.x
Choose a base branch
from
Draft

Vue.js 3 upgrade #2561

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
667631d
Updated deprecated named slot syntax to the latest syntax
zeezo887 Mar 27, 2024
104ab9e
Merge branch '3.x' into vue3-migration
zeezo887 Mar 27, 2024
8768645
update vue to 3.1, install @vue/compat and replace vue-template-compi…
zeezo887 Mar 29, 2024
359d1c8
set vue alias to @vue/compat and enable compat mode
zeezo887 Mar 29, 2024
6ea96e0
remove functional from template
zeezo887 Mar 29, 2024
781f364
add key attribute to template
zeezo887 Mar 29, 2024
6c103d5
removed vue filters, suppressed console.error warnings, removed .nati…
zeezo887 Apr 1, 2024
2e56faf
wip: Update app entry to use new global mounting API and updated vuex…
zeezo887 Apr 3, 2024
3c307be
fixed $trans and openMediaLibrary
zeezo887 Apr 4, 2024
fa6dd8b
added no console rule-name to suppress console warnings
zeezo887 Apr 8, 2024
7686505
updated tiptap to @tiptap/vue-3
zeezo887 Apr 8, 2024
32fcbf8
changed beforeDestroy to beforeUnmount
zeezo887 Apr 8, 2024
45c2b52
added whitespace config and updated bind and inserted to beforeMount …
zeezo887 Apr 8, 2024
ace3a6e
updated vue-timeago to vue-timeago3 and date-fns to v3.6.0
zeezo887 Apr 12, 2024
b19b85f
removed Vue.set, Vue.delete, updated render fn in Button component an…
zeezo887 Apr 15, 2024
3a55dfe
removed unused vue import
zeezo887 Apr 17, 2024
eb902f5
updated vuetrend, vue-select
zeezo887 Apr 17, 2024
5b6a776
updated vuedraggable
zeezo887 Apr 18, 2024
b595014
changed $scopedSlots to $slots and pass props into default value func…
zeezo887 Apr 18, 2024
7b24e02
removed vue compat
zeezo887 Apr 22, 2024
978f240
fixed a17-button triggering twice and some styling issues related to …
zeezo887 Apr 22, 2024
e4b8628
stop input event from propagating to parent
zeezo887 Apr 25, 2024
246c00d
fix create button disable property
zeezo887 Apr 25, 2024
35eea56
use new v-model syntax for v-select
zeezo887 Apr 25, 2024
169e7b7
disable detailed warnings for hydration mismatches
zeezo887 Apr 25, 2024
3a681a4
documented events emitted on some components
zeezo887 Apr 26, 2024
f234cb9
Merge branch '3.x' into vue3-migration
zeezo887 Apr 26, 2024
75ea24d
fix: drag and drop dragging all items in blocks and repeater
zeezo887 May 14, 2024
8225648
defined emits and fixed form fields not rendering in blocks inside "E…
zeezo887 May 15, 2024
174c992
fixed weird separator line
zeezo887 May 16, 2024
618783b
define components events with emits option
zeezo887 May 16, 2024
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
12 changes: 7 additions & 5 deletions frontend/js/components/Browser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
</div>
<div class="browser__search">
<a17-filter @submit="submitFilter">
<div slot="additional-actions" v-if="browserNote">
<span class="browser__note f--small">
{{ browserNote }}
</span>
</div>
<template v-slot:additional-actions>
Copy link
Contributor

@Tofandel Tofandel Mar 28, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use #additional-actions instead of v-slot which I personnally find easier to read and recognize it as a slot

<div v-if="browserNote">
<span class="browser__note f--small">
{{ browserNote }}
</span>
</div>
</template>
</a17-filter>
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions frontend/js/components/CheckboxAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot></span>
<div slot="accordion__value">{{ currentLabel }}</div>
<template v-slot:accordion__title>
<span><slot></slot></span>
</template>
<template v-slot:accordion__value>
<div>{{ currentLabel }}</div>
</template>
<a17-checkboxgroup :name="name" :options="options" @change="changeValue" :selected="currentValue" :min="1"></a17-checkboxgroup>
</a17-accordion>
</template>
Expand Down
8 changes: 5 additions & 3 deletions frontend/js/components/ColorField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@
/>
<a17-dropdown ref="colorDropdown" class="form__field--color" position="bottom-right" :arrow="true" :offset="15" :minWidth="300" :clickable="true" :sideOffset="15" @close="saveIntoStore">
<span class="form__field--colorBtn" :style="bcgStyle" @click="$refs.colorDropdown.toggle()"></span>
<div slot="dropdown__content">
<a17-colorpicker :color="value" @change="updateValueFromPicker"></a17-colorpicker>
</div>
<template v-slot:dropdown__content>
<div>
<a17-colorpicker :color="value" @change="updateValueFromPicker"></a17-colorpicker>
</div>
</template>
</a17-dropdown>
</div>
</a17-inputframe>
Expand Down
12 changes: 7 additions & 5 deletions frontend/js/components/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@
<a17-button class="editorDropdown__trigger" @click="$refs.editorDropdown.toggle()">
{{ currentEditorLabel }} <span v-svg symbol="dropdown_module"></span>
</a17-button>
<div slot="dropdown__content">
<button type="button" class="editorDropdown" @click="updateEditorName(editorName.value)" v-for="editorName in editorNames" :key="editorName.value">
{{ editorName.label }}
</button>
</div>
<template v-slot:dropdown__content>
<div>
<button type="button" class="editorDropdown" @click="updateEditorName(editorName.value)" v-for="editorName in editorNames" :key="editorName.value">
{{ editorName.label }}
</button>
</div>
</template>
</a17-dropdown>
</template>
<a17-blocks-list :editor-name="editorName" v-slot="{
Expand Down
18 changes: 10 additions & 8 deletions frontend/js/components/LangManager.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@
@click="$refs.languageManagerDropdown.toggle()">
{{currentValue.length }} {{ $trans('lang-manager.published') }} <span v-svg symbol="dropdown_module"></span>
</button>
<div slot="dropdown__content" class="languageManager__dropdown-content">
<a17-checkboxgroup name="langManager"
:options="languages"
:selected="currentValue"
:min="1"
@change="changeValue"
/>
</div>
<template v-slot:dropdown__content>
<div class="languageManager__dropdown-content">
<a17-checkboxgroup name="langManager"
:options="languages"
:selected="currentValue"
:min="1"
@change="changeValue"
/>
</div>
</template>
</a17-dropdown>
</div>
</template>
Expand Down
14 changes: 8 additions & 6 deletions frontend/js/components/MediaField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,14 @@
<a17-dropdown ref="dropDown" position="right">
<a17-button size="icon" variant="icon" @click="$refs.dropDown.toggle()">
<span v-svg symbol="more-dots"></span></a17-button>
<div slot="dropdown__content">
<a :href="media.original" download><span v-svg symbol="download"></span>{{ $trans('fields.medias.download') }}</a>
<button type="button" @click="openCropMedia" v-if="activeCrop"><span v-svg symbol="crop"></span>{{ $trans('fields.medias.crop') }}
</button>
<button type="button" @click="deleteMediaClick"><span v-svg symbol="trash"></span>{{ $trans('fields.medias.delete') }}</button>
</div>
<template v-slot:dropdown__content>
<div>
<a :href="media.original" download><span v-svg symbol="download"></span>{{ $trans('fields.medias.download') }}</a>
<button type="button" @click="openCropMedia" v-if="activeCrop"><span v-svg symbol="crop"></span>{{ $trans('fields.medias.crop') }}
</button>
<button type="button" @click="deleteMediaClick"><span v-svg symbol="trash"></span>{{ $trans('fields.medias.delete') }}</button>
</div>
</template>
</a17-dropdown>
</div>
</div>
Expand Down
24 changes: 13 additions & 11 deletions frontend/js/components/MultiButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@
<a17-dropdown ref="submitDown" position="bottom-right" width="full" :offset="0">
<a17-button v-if="isDisabled(options[0])" type="button" variant="validate" :disabled="true">{{ options[0].text }}</a17-button>
<a17-button v-else :type="type" @click="buttonClicked(options[0].name)" :name="options[0].name" variant="validate">{{ options[0].text }}</a17-button>
<template v-if="otherOptions.length">
<button class="multibutton__trigger" type="button" @click="$refs.submitDown.toggle()" v-if="hasValidOptions"><span v-svg symbol="dropdown_module"></span></button>
<div slot="dropdown__content">
<ul>
<li v-for="option in otherOptions" :key="option.name">
<button v-if="isDisabled(option)" type="button" disabled>{{ option.text }}</button>
<button v-else @click="buttonClicked(option.name)" :type="type" :name="option.name">{{ option.text }}</button>
</li>
</ul>
</div>
</template>
<button class="multibutton__trigger" type="button" @click="$refs.submitDown.toggle()" v-if="hasValidOptions && otherOptions.length">
<span v-svg symbol="dropdown_module"></span>
</button>
<template v-slot:dropdown__content v-if="otherOptions.length">
<div>
<ul>
<li v-for="option in otherOptions" :key="option.name">
<button v-if="isDisabled(option)" type="button" disabled>{{ option.text }}</button>
<button v-else @click="buttonClicked(option.name)" :type="type" :name="option.name">{{ option.text }}</button>
</li>
</ul>
</div>
</template>
</a17-dropdown>
</div>
</template>
Expand Down
8 changes: 6 additions & 2 deletions frontend/js/components/ParentsAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot></span>
<div slot="accordion__value" v-html="currentLabel"></div>
<template v-slot:accordion__title>
<span><slot></slot></span>
</template>
<template v-slot:accordion__value>
<div v-html="currentLabel"></div>
</template>
<div class="accordion__fields">
<a17-select name="parent_id" :options="options" :selected="currentValue" size="small" @change="updateSelected"></a17-select>
</div>
Expand Down
14 changes: 8 additions & 6 deletions frontend/js/components/Previewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@
{{ $trans('previewer.last-edit') }} <timeago :auto-update="1" :datetime="new Date(revisions[0].datetime)"></timeago> <span v-svg symbol="dropdown_module"></span>
</template>
</a17-button>
<div slot="dropdown__content">
<button type="button" class="previewerRevision" :class="{ 'previewerRevision--active' : currentRevision.id === revision.id }" @click="toggleRevision(revision.id)" v-for="revision in revisions" :key="revision.id">
<span class="previewerRevision__author">{{ revision.author }}</span>
<span class="previewerRevision__datetime"><span class="tag" v-if="revision.label">{{ revision.label }}</span> {{ revision.datetime | formatDate }}</span>
</button>
</div>
<template v-slot:dropdown__content>
<div>
<button type="button" class="previewerRevision" :class="{ 'previewerRevision--active' : currentRevision.id === revision.id }" @click="toggleRevision(revision.id)" v-for="revision in revisions" :key="revision.id">
<span class="previewerRevision__author">{{ revision.author }}</span>
<span class="previewerRevision__datetime"><span class="tag" v-if="revision.label">{{ revision.label }}</span> {{ revision.datetime | formatDate }}</span>
</button>
</div>
</template>
</a17-dropdown>
</div>

Expand Down
22 changes: 13 additions & 9 deletions frontend/js/components/PubAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot></span>
<div slot="accordion__value">
<template v-if="startDate">
{{ startDateForDisplay | formatDateWithFormat(localizedDateDisplayFormat) }}
</template>
<template v-else>
{{ defaultStartDate }}
</template>
</div>
<template v-slot:accordion__title>
<span><slot></slot></span>
</template>
<template v-slot:accordion__value>
<div>
<template v-if="startDate">
{{ startDateForDisplay | formatDateWithFormat(localizedDateDisplayFormat) }}
</template>
<template v-else>
{{ defaultStartDate }}
</template>
</div>
</template>
<div class="accordion__fields">
<a17-datepicker
name="publish_date"
Expand Down
8 changes: 6 additions & 2 deletions frontend/js/components/RadioAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot></span>
<div slot="accordion__value">{{ currentLabel }}</div>
<template v-slot:accordion__title>
<span><slot></slot></span>
</template>
<template v-slot:accordion__value>
<div>{{ currentLabel }}</div>
</template>
<a17-radiogroup :name="name" :radios="radios" @change="changeValue" :initialValue="currentValue"></a17-radiogroup>
</a17-accordion>
</template>
Expand Down
40 changes: 22 additions & 18 deletions frontend/js/components/Repeater.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,28 @@
:size="blockSize"
:opened="opened"
>
<a17-button slot="block-actions" variant="icon" data-action @click="duplicateBlock(index)"
v-if="hasRemainingBlocks">
<span v-svg symbol="add"></span>
</a17-button>
<div slot="dropdown-action">
<button type="button" @click="collapseAllBlocks()" v-if="opened">
{{ $trans('fields.block-editor.collapse-all', 'Collapse all') }}
</button>
<button v-else type="button" @click="expandAllBlocks()">
{{ $trans('fields.block-editor.expand-all', 'Expand all') }}
</button>
<button type="button" @click="duplicateBlock(index)" v-if="hasRemainingBlocks">
{{ $trans('fields.block-editor.clone-block', 'Clone block') }}
</button>
<button type="button" @click="deleteBlock(index)">
{{ $trans('fields.block-editor.delete', 'Delete') }}
</button>
</div>
<template v-slot:block-actions>
<a17-button variant="icon" data-action @click="duplicateBlock(index)"
v-if="hasRemainingBlocks">
<span v-svg symbol="add"></span>
</a17-button>
</template>
<template v-slot:dropdown-action>
<div>
<button type="button" @click="collapseAllBlocks()" v-if="opened">
{{ $trans('fields.block-editor.collapse-all', 'Collapse all') }}
</button>
<button v-else type="button" @click="expandAllBlocks()">
{{ $trans('fields.block-editor.expand-all', 'Expand all') }}
</button>
<button type="button" @click="duplicateBlock(index)" v-if="hasRemainingBlocks">
{{ $trans('fields.block-editor.clone-block', 'Clone block') }}
</button>
<button type="button" @click="deleteBlock(index)">
{{ $trans('fields.block-editor.delete', 'Delete') }}
</button>
</div>
</template>
</a17-blockeditor-item>
</div>
</transition-group>
Expand Down
8 changes: 6 additions & 2 deletions frontend/js/components/ReviewAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot></span>
<div slot="accordion__value">{{ currentLabel }}</div>
<template v-slot:accordion__title>
<span><slot></slot></span>
</template>
<template v-slot:accordion__value>
<div>{{ currentLabel }}</div>
</template>
<a17-checkboxgroup :name="name" :options="currentOptions" @change="changeValue" :selected="currentValue"></a17-checkboxgroup>
</a17-accordion>
</template>
Expand Down
8 changes: 6 additions & 2 deletions frontend/js/components/RevisionAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<template>
<a17-accordion :open="open" @toggleVisibility="notifyOpen">
<span slot="accordion__title"><slot></slot> <span class="f--small f--note">({{ revisions.length }})</span></span>
<div slot="accordion__value">{{ $trans('publisher.last-edit') }} <timeago :auto-update="1" :datetime="new Date(revisions[0].datetime)"></timeago></div>
<template v-slot:accordion__title>
<span><slot></slot> <span class="f--small f--note">({{ revisions.length }})</span></span>
</template>
<template v-slot:accordion__value>
<div>{{ $trans('publisher.last-edit') }} <timeago :auto-update="1" :datetime="new Date(revisions[0].datetime)"></timeago></div>
</template>
<div class="revaccordion__scroller">
<ul class="revaccordion__list">
<li class="revaccordion__item" v-for="revision in revisions" :key="revision.id">
Expand Down
22 changes: 13 additions & 9 deletions frontend/js/components/SingleSelectPermissions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@
<div class="multiselectorPermissions">
<div class="multiselectorPermissions__filter" v-if="searchable">
<a17-filter @submit="submitFilter" :full-width="true">
<div slot="additional-actions" v-if="groups.length && listUser" class="multiselectorPermissions__groups">
<a17-dropdown class="multiselectorPermissions__dd" ref="groupDropdown"
position="bottom-right" :clickable="true">
<button class="multiselectorPermissions__button" @click="$refs.groupDropdown.toggle()" type="button">Groups</button>
<div slot="dropdown__content">
<a17-checkboxgroup name="permissionsGroups" :selected="activeGroups" :options="groups" @change="updateUserPermission" />
</div>
</a17-dropdown>
</div>
<template v-slot:additional-actions>
<div v-if="groups.length && listUser" class="multiselectorPermissions__groups">
<a17-dropdown class="multiselectorPermissions__dd" ref="groupDropdown"
position="bottom-right" :clickable="true">
<button class="multiselectorPermissions__button" @click="$refs.groupDropdown.toggle()" type="button">Groups</button>
<template v-slot:dropdown__content>
<div>
<a17-checkboxgroup name="permissionsGroups" :selected="activeGroups" :options="groups" @change="updateUserPermission" />
</div>
</template>
</a17-dropdown>
</div>
</template>
</a17-filter>
</div>
<div class="multiselectorPermissions__items">
Expand Down
12 changes: 7 additions & 5 deletions frontend/js/components/StandaloneBrowser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@
</div>
<div class="browser__search">
<a17-filter @submit="submitFilter">
<div slot="additional-actions" v-if="browserNote">
<span class="browser__note f--small">
{{ browserNote }}
</span>
</div>
<template v-slot:additional-actions>
<div v-if="browserNote">
<span class="browser__note f--small">
{{ browserNote }}
</span>
</div>
</template>
</a17-filter>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion frontend/js/components/VSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
@input="updateValue"
@search="getOptions"
>
<span slot="no-options">{{ emptyText }}</span>
<template v-slot:no-options>
<span>{{ emptyText }}</span>
</template>
</v-select>
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions frontend/js/components/blocks/BlockEditorItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<div class="block__toggle">
<a17-dropdown :ref="moveDropdown" class="f--small" position="bottom-left" v-if="withMoveDropdown && withActions" :maxHeight="270">
<span class="block__counter f--tiny" @click="$refs[moveDropdown].toggle()">{{ index + 1 }}</span>
<div slot="dropdown__content">
<slot name="dropdown-numbers"/>
</div>
<template v-slot:dropdown__content>
<div><slot name="dropdown-numbers"/></div>
</template>
</a17-dropdown>
<span class="block__counter f--tiny" v-else-if="withActions">{{ index + 1 }}</span>
<span class="block__title">{{ blockTitle }}</span>
Expand All @@ -17,9 +17,9 @@
<a17-dropdown :ref="addDropdown" position="bottom-right" :maxHeight="430" @open="hover = true" @close="hover = false" v-if="withAddDropdown">
<a17-button variant="icon" data-action @click="$refs[addDropdown].toggle()"><span v-svg symbol="add"></span>
</a17-button>
<div slot="dropdown__content">
<slot name="dropdown-add"/>
</div>
<template v-slot:dropdown__content>
<div><slot name="dropdown-add"/></div>
</template>
</a17-dropdown>

<a17-button variant="icon" data-action @click="toggleExpand()" :aria-expanded="visible ? 'true' : 'false'"><span
Expand All @@ -28,9 +28,9 @@
<a17-dropdown :ref="actionsDropdown" position="bottom-right" @open="hover = true" @close="hover = false">
<a17-button variant="icon" @click="$refs[actionsDropdown].toggle()"><span v-svg symbol="more-dots"></span>
</a17-button>
<div slot="dropdown__content">
<slot name="dropdown-action"/>
</div>
<template v-slot:dropdown__content>
<div><slot name="dropdown-action"/></div>
</template>
</a17-dropdown>
</div>
</div>
Expand Down