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

frontend: add vue/vue3-recommended rules #5122

Closed
wants to merge 5 commits into from
Closed

frontend: add vue/vue3-recommended rules #5122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
24554df
E*.spec.js: format templates
BacLuc May 5, 2024
78e0f18
E*.spec.js: show that the scoped slot forwarding never worked
BacLuc May 5, 2024
0f1f663
frontend: remove dynamic scoped slot forwarding in form/base components
BacLuc May 5, 2024
bafd754
frontend: show that scoped slot forwarding somehow still works for ES…
BacLuc May 5, 2024
8a2ddb8
frontend: add vue/vue3-recommended rules
BacLuc May 5, 2024
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
11 changes: 11 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@
},
"extends": [
"plugin:vue/recommended",
"plugin:vue/vue3-recommended",
"eslint:recommended",
"plugin:prettier/recommended",
"@vue/eslint-config-prettier"
Expand All @@ -143,6 +144,16 @@
}
],
"vue/multi-word-component-names": "off",
"vue/no-deprecated-dollar-listeners-api": "warn",
"vue/no-deprecated-dollar-scopedslots-api": "error",
"vue/no-deprecated-filter": "warn",
"vue/no-deprecated-props-default-this": "warn",
"vue/no-deprecated-slot-attribute": "error",
"vue/no-deprecated-slot-scope-attribute": "error",
"vue/no-deprecated-v-on-native-modifier": "warn",
"vue/no-v-for-template-key-on-child": "warn",
"vue/no-v-model-argument": "warn",
"vue/require-explicit-emits": "off",
"no-unused-vars": [
"error",
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default {
}
}
},
destroyed() {
unmounted() {
window.removeEventListener('offline', this.offlineListener)
window.removeEventListener('online', this.onlineListener)
},
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/activity/DraggableContentNodes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export default {
},
},
},
beforeDestroy() {
beforeUnmount() {
this.cleanupDrag()
},
methods: {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/activity/content/columnLayout/ResizableColumnHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default {
document.documentElement.addEventListener('touchcancel', this.mouseUp, true)
document.documentElement.addEventListener('touchstart', this.mouseUp, true)
},
beforeDestroy: function () {
beforeUnmount: function () {
document.documentElement.removeEventListener('mousemove', this.mouseMove)
document.documentElement.removeEventListener('mouseup', this.mouseUp)
document.documentElement.removeEventListener('mouseleave', this.mouseUp)
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/activity/content/storyboard/StoryboardSortable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
:item-key="key"
:layout-mode="layoutMode"
@delete="deleteItem"
@moveDown="moveDown"
@moveUp="moveUp"
@move-down="moveDown"
@move-up="moveUp"
/>
<StoryboardRowDense
v-else-if="variant === 'dense'"
Expand All @@ -32,8 +32,8 @@
:item-key="key"
:layout-mode="layoutMode"
@delete="deleteItem"
@moveDown="moveDown"
@moveUp="moveUp"
@move-down="moveDown"
@move-up="moveUp"
/>
</template>
</draggable>
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/form/base/BaseComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</component>
</ValidationProvider>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/form/base/BasePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export default {

this.setValue(this.value)
},
beforeDestroy() {
beforeUnmount() {
if (this.clickOutsideHandler) {
document.removeEventListener('click', this.clickOutsideHandler)
}
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/form/base/ECheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-checkbox>
</ValidationProvider>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/form/base/EColorPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Displays a field as a color picker (can be used with v-model)
v-for="swatch in swatches"
:key="swatch"
:color="swatch"
@selectColor="picker.onInput"
@select-color="picker.onInput"
/>
</div>
</v-card>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/form/base/EDatePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Displays a field as a date picker (can be used with v-model)
>
<template #default="picker">
<v-date-picker
:picker-date="pickerMonth"
:value="picker.value || ''"
:locale="$i18n.locale"
first-day-of-week="1"
Expand All @@ -29,7 +30,6 @@ Displays a field as a date picker (can be used with v-model)
no-title
scrollable
show-adjacent-months
:picker-date.sync="pickerMonth"
@input="picker.onInput"
>
<v-spacer />
Expand Down
7 changes: 2 additions & 5 deletions frontend/src/components/form/base/ENumberField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,8 @@
@input="$emit('input', $event)"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template #scoped="{ scopedSlots }">
<template v-for="(_, name) in scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
</template>
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</EParseField>
</template>
Expand Down
9 changes: 3 additions & 6 deletions frontend/src/components/form/base/EParseField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,9 @@ Displays a field as a textfield (can be used with v-model)
v-on="inputListeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<slot name="scoped" :scoped-slots="$scopedSlots">
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
</template>
</slot>
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-text-field>
</ValidationProvider>
</template>
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/form/base/ERichtext.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-tiptap-editor>
</ValidationProvider>
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/form/base/ESelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,8 @@
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-select>
</ValidationProvider>
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/components/form/base/ESwitch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@
@change="$emit('input', $event)"
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-switch>
</ValidationProvider>
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/components/form/base/ETextField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,8 @@
:type="type"
v-on="inputListeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-text-field>
</ValidationProvider>
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/form/base/ETextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@
v-on="$listeners"
>
<!-- passing through all slots -->
<slot v-for="(_, name) in $slots" :slot="name" :name="name" />
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData" />
<template v-for="(_, name) in $slots" #[name]>
<slot :name="name" />
</template>
</v-tiptap-editor>
</ValidationProvider>
Expand Down
17 changes: 16 additions & 1 deletion frontend/src/components/form/base/__tests__/ECheckbox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'

import { mount as mountComponent } from '@vue/test-utils'
import ECheckbox from '../ECheckbox.vue'
import { screen } from '@testing-library/vue'

Vue.use(Vuetify)
Vue.use(formBaseComponents)
Expand All @@ -22,7 +23,9 @@ describe('An ECheckbox', () => {
},
template: `
<div data-app>
<e-checkbox label="test" v-model="data"/>
<e-checkbox label="test" v-model="data">
${options?.children}
</e-checkbox>
</div>
`,
})
Expand Down Expand Up @@ -82,4 +85,16 @@ describe('An ECheckbox', () => {
await input.trigger('click')
expect(wrapper.vm.data).toBe(false)
})

test('allows to use the append slot', async () => {
mount({
children: `
<template #append>
<span>append</span>
</template>
`,
})

expect(await screen.findByText('append')).toBeVisible()
})
})
21 changes: 20 additions & 1 deletion frontend/src/components/form/base/__tests__/ENumberField.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'

import { mount as mountComponent } from '@vue/test-utils'
import ENumberField from '../ENumberField.vue'
import { screen } from '@testing-library/vue'

Vue.use(Vuetify)
Vue.use(formBaseComponents)
Expand All @@ -20,7 +21,13 @@ describe('An ENumberField', () => {
data: null,
}
},
template: `<div data-app><e-number-field label="test" v-model="data"/></div>`,
template: `
<div data-app>
<e-number-field label="test" v-model="data">
${options?.children}
</e-number-field>
</div>
`,
})
return mountComponent(app, { vuetify, attachTo: document.body, ...options })
}
Expand Down Expand Up @@ -110,4 +117,16 @@ describe('An ENumberField', () => {

expect(wrapper.vm.data).toBe(expected)
})

test('allows to use the append slot', async () => {
mount({
children: `
<template #append>
<span>append</span>
</template>
`,
})

expect(await screen.findByText('append')).toBeVisible()
})
})
21 changes: 20 additions & 1 deletion frontend/src/components/form/base/__tests__/EParseField.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import formBaseComponents from '@/plugins/formBaseComponents'

import EParseField from '@/components/form/base/EParseField.vue'
import { mount as mountComponent } from '@vue/test-utils'
import { screen } from '@testing-library/vue'

Vue.use(Vuetify)
Vue.use(formBaseComponents)
Expand All @@ -28,7 +29,13 @@ describe('An EParseField', () => {
return value === null ? '' : `${value}`
},
},
template: `<div data-app><e-parse-field label="test" :parse="parse" :format="format" v-model="data"/></div>`,
template: `
<div data-app>
<e-parse-field label="test" :parse="parse" :format="format" v-model="data" :value="data">
${options?.children}
</e-parse-field>
</div>
`,
})
return mountComponent(app, { vuetify, attachTo: document.body, ...options })
}
Expand Down Expand Up @@ -86,4 +93,16 @@ describe('An EParseField', () => {

expect(wrapper.vm.data).toBe(expected)
})

test('allows to use the append slot', async () => {
mount({
children: `
<template #append>
<span>append</span>
</template>
`,
})

expect(await screen.findByText('append')).toBeVisible()
})
})
39 changes: 35 additions & 4 deletions frontend/src/components/form/base/__tests__/ESelect.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { mount as mountComponent } from '@vue/test-utils'
import ESelect from '../ESelect.vue'
import { screen } from '@testing-library/vue'

Vue.use(Vuetify)
Vue.use(formBaseComponents)
Expand Down Expand Up @@ -36,10 +37,12 @@
}
},
template: `
<div data-app>
<e-select label='test' :items="selectValues" v-model="data"/>
</div>
`,
<div data-app>
<e-select label="test" :items="selectValues" v-model="data">
${options?.children}
</e-select>
</div>
`,
})
return mountComponent(app, { vuetify, attachTo: document.body, ...options })
}
Expand Down Expand Up @@ -101,4 +104,32 @@
wrapper.findAll('[role="option"]').at(0).element.getAttribute('aria-selected')
).not.toBe('true')
})

test('allows to use the append slot', async () => {
mount({
children: `
<template #append>
<span>append</span>
</template>
`,
})

expect(await screen.findByText('append')).toBeVisible()
})

test('allows to use the append slot with scope', async () => {
const wrapper = mount({
children: `
<template #item="{ item, on, attrs }">
<v-list-item :key="item" v-bind="attrs" v-on="on">
{{ item }}
</v-list-item>
</template>
`,
})

await wrapper.find('.v-input__slot').trigger('click')

expect(await screen.findByText(FIRST_OPTION.text)).toBeInTheDocument()

Check failure on line 133 in frontend/src/components/form/base/__tests__/ESelect.spec.js

View workflow job for this annotation

GitHub Actions / Tests: Frontend

src/components/form/base/__tests__/ESelect.spec.js > An ESelect > allows to use the append slot with scope 

TestingLibraryElementError: Found multiple elements with the text: firstOption

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="v-select__selection v-select__selection--comma"
>
  firstOption
</div>

Ignored nodes: comments, script, style
<div
  class="v-list-item__title"
>
  firstOption
</div>

Ignored nodes: comments, script, style
<div
  class="v-list-item__title"
>
  firstOption
</div>

Ignored nodes: comments, script, style
<div
  class="v-list-item__title"
>
  firstOption
</div>

Ignored nodes: comments, script, style
<div
  class="v-list-item__title"
>
  firstOption
</div>

Ignored nodes: comments, script, style
<div
  class="v-select__selection v-select__selection--comma"
>
  firstOption
</div>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div
    data-app=""
  >
    <div
      class="e-form-container"
      data-v-8dc528e6=""
      items="[object Object],[object Object],[object Object]"
      value="1"
    >
      <div
        class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--is-booted v-text-field--enclosed v-select"
        data-v-8dc528e6=""
      >
        <div
          class="v-input__control"
        >
          <div
            aria-expanded="false"
            aria-haspopup="listbox"
            aria-owns="list-6"
            class="v-input__slot"
            role="button"
          >
            <div
              class="v-select__slot"
            >
              <label
                class="v-label v-label--active theme--light"
                for="input-6"
                style="left: 0px; position: absolute;"
              >
                test
              </label>
              <div
                class="v-select__selections"
              >
                <div
                  class="v-select__selection v-select__selection--comma"
                >
                  firstOption
                </div>
                <input
                  aria-activedescendant="list-item-11-0"
                  aria-readonly="false"
                  autocomplete="off"
                  id="input-6"
                  readonly="readonly"
                  type="text"
                />
              </div>
              <div
                class="v-input__append-inner"
              >
                <div
                  class="v-input__icon v-input__icon--append"
                >
                  <i
                    aria-hidden="true"
                    class="v-icon notranslate mdi mdi-menu-down theme--light"
                  />
                </div>
              </div>
              <input
                type="hidden"
                value="1"
              />
            </div>
            <div
              class="v-menu"
            >
              <transition-stub
                name="v-menu-transition"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="v-menu__content theme--light "
      style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
    >
      <div
        class="v-list v-select-list v-sheet theme--light theme--light"
        data-v-8dc528e6="true"
        id="list-6"
        role="listbox"
        tabindex="-1"
      >
        <div
          aria-selected="true"
          class="v-list-item primary--text v-list-item--active v-list-item--link theme--light v-list-item--highlighted"
          id="list-item-11-0"
          role="option"
          tabindex="0"
        >
          <div
            class="v-list-item__content"
          >
            <div
              class="v-list-item__title"
            >
              firstOption
            </div>
          </div>
        </div>
        <div
          aria-selected="false"
          class="v-list-item v-list-item--link t
})
})
Loading
Loading