IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3258 from Human-Connection/2117-refactor-deprecated-slot-syntax

Browse Source 
refactor: deprecated slot syntax [2117]
This commit is contained in:
mattwr18 2020-03-16 10:30:10 +01:00 committed by GitHub
commit 43c437facc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 98 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/CommentForm/CommentForm.vue
View File

@ -1,6 +1,6 @@
<template>
<ds-form v-model="form" @submit="handleSubmit" class="comment-form">
<template slot-scope="{ errors }">
<template #default="{ errors }">
<base-card>
<hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
<div class="buttons">

32
webapp/components/ContentMenu/ContentMenu.vue
View File

@ -1,6 +1,6 @@
<template>
<dropdown class="content-menu" :placement="placement" offset="5">
<template slot="default" slot-scope="{ toggleMenu }">
<template #default="{ toggleMenu }">
<slot name="button" :toggleMenu="toggleMenu">
<base-button
data-test="content-menu-button"
@ -12,20 +12,22 @@
/>
</slot>
</template>
<div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
<ds-menu :routes="routes">
<ds-menu-item
slot="menuitem"
slot-scope="item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="openItem(item.route, toggleMenu)"
>
<base-icon :name="item.route.icon" />
{{ item.route.label }}
</ds-menu-item>
</ds-menu>
</div>
<template #popover="{ toggleMenu }">
<div class="content-menu-popover">
<ds-menu :routes="routes">
<template #menuitem="item">
<ds-menu-item
:route="item.route"
:parents="item.parents"
@click.stop.prevent="openItem(item.route, toggleMenu)"
>
<base-icon :name="item.route.icon" />
{{ item.route.label }}
</ds-menu-item>
</template>
</ds-menu>
</div>
</template>
</dropdown>
</template>

2
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -6,7 +6,7 @@
:schema="formSchema"
@submit="submit"
>
<template slot-scope="{ errors }">
<template #default="{ errors }">
<base-card>
<template #heroImage>
<img

55
webapp/components/DropdownFilter/DropdownFilter.vue
View File

@ -1,35 +1,32 @@
<template>
<dropdown offset="8">
<a
:v-model="selected"
slot="default"
slot-scope="{ toggleMenu }"
name="dropdown"
class="dropdown-filter"
href="#"
@click.prevent="toggleMenu()"
>
<base-icon name="filter" />
<label class="label" for="dropdown">{{ selected }}</label>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{ toggleMenu }"
class="dropdown-menu-popover"
:routes="filterOptions"
>
<ds-menu-item
slot="menuitem"
slot-scope="item"
class="dropdown-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="filter(item.route, toggleMenu)"
<template #default="{ toggleMenu }">
<a
:v-model="selected"
name="dropdown"
class="dropdown-filter"
href="#"
@click.prevent="toggleMenu()"
>
{{ item.route.label }}
</ds-menu-item>
</ds-menu>
<base-icon name="filter" />
<label class="label" for="dropdown">{{ selected }}</label>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
</template>
<template #popover="{ toggleMenu }">
<ds-menu class="dropdown-menu-popover" :routes="filterOptions">
<template #menuitem="item">
<ds-menu-item
class="dropdown-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="filter(item.route, toggleMenu)"
>
{{ item.route.label }}
</ds-menu-item>
</template>
</ds-menu>
</template>
</dropdown>
</template>
<script>

20
webapp/components/FilterPosts/FilterPosts.vue
View File

@ -1,15 +1,15 @@
<template>
<dropdown ref="menu" :placement="placement" :offset="offset">
<base-button
slot="default"
icon="filter"
:filled="filterActive"
:ghost="!filterActive"
slot-scope="{ toggleMenu }"
@click.prevent="toggleMenu()"
>
<base-icon class="dropdown-arrow" name="angle-down" />
</base-button>
<template #default="{ toggleMenu }">
<base-button
icon="filter"
:filled="filterActive"
:ghost="!filterActive"
@click.prevent="toggleMenu()"
>
<base-icon class="dropdown-arrow" name="angle-down" />
</base-button>
</template>
<template slot="popover">
<ds-container>
<categories-filter-menu-items :chunk="chunk" />

50
webapp/components/LocaleSwitch/LocaleSwitch.vue
View File

@ -1,35 +1,27 @@
<template>
<client-only>
<dropdown ref="menu" :placement="placement" :offset="offset">
<a
slot="default"
slot-scope="{ toggleMenu }"
class="locale-menu"
href="#"
@click.prevent="toggleMenu()"
>
<base-icon name="globe" />
<span class="label">{{ current.code.toUpperCase() }}</span>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
<ds-menu
slot="popover"
slot-scope="{ toggleMenu }"
class="locale-menu-popover"
:matcher="matcher"
:routes="routes"
>
<ds-menu-item
slot="menuitem"
slot-scope="item"
class="locale-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
>
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
<template #default="{ toggleMenu }">
<a class="locale-menu" href="#" @click.prevent="toggleMenu()">
<base-icon name="globe" />
<span class="label">{{ current.code.toUpperCase() }}</span>
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
</template>
<template #popover="{ toggleMenu }">
<ds-menu class="locale-menu-popover" :matcher="matcher" :routes="routes">
<template #menuitem="item">
<ds-menu-item
class="locale-menu-item"
:route="item.route"
:parents="item.parents"
@click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
>
{{ item.route.name }}
</ds-menu-item>
</template>
</ds-menu>
</template>
</dropdown>
</client-only>
</template>

2
webapp/components/NotificationMenu/NotificationMenu.vue
View File

@ -7,7 +7,7 @@
<base-button icon="bell" ghost circle />
</nuxt-link>
<dropdown v-else class="notifications-menu" offset="8" :placement="placement">
<template slot="default" slot-scope="{ toggleMenu }">
<template #default="{ toggleMenu }">
<base-button @click="toggleMenu" ghost circle>
<counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button>

2
webapp/components/Password/Change.vue
View File

@ -1,6 +1,6 @@
<template>
<ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
<template slot-scope="{ errors }">
<template #default="{ errors }">
<ds-input
id="oldPassword"
model="oldPassword"

2
webapp/components/PasswordReset/ChangePassword.vue
View File

@ -7,7 +7,7 @@
@submit="handleSubmitPassword"
class="change-password"
>
<template slot-scope="{ errors }">
<template #default="{ errors }">
<ds-input
id="password"
model="password"

2
webapp/pages/admin/categories.vue
View File

@ -2,7 +2,7 @@
<base-card>
<h2 class="title">{{ $t('admin.categories.name') }}</h2>
<ds-table :data="Category" :fields="fields" condensed>
<template slot="icon" slot-scope="scope">
<template #icon="scope">
<base-icon :name="scope.row.icon" />
</template>
</ds-table>

4
webapp/pages/admin/hashtags.vue
View File

@ -2,8 +2,8 @@
<base-card>
<h2 class="title">{{ $t('admin.hashtags.name') }}</h2>
<ds-table :data="Tag" :fields="fields" condensed>
<template slot="index" slot-scope="scope">{{ scope.index + 1 }}.</template>
<template slot="id" slot-scope="scope">
<template #index="scope">{{ scope.index + 1 }}.</template>
<template #id="scope">
<nuxt-link :to="{ path: '/', query: { hashtag: encodeURI(scope.row.id) } }">
<b>#{{ scope.row.id | truncate(20) }}</b>
</nuxt-link>

10
webapp/pages/admin/users.vue
View File

@ -19,8 +19,8 @@
</base-card>
<base-card v-if="User && User.length">
<ds-table :data="User" :fields="fields" condensed>
<template slot="index" slot-scope="scope">{{ scope.row.index + 1 }}.</template>
<template slot="name" slot-scope="scope">
<template #index="scope">{{ scope.row.index + 1 }}.</template>
<template #name="scope">
<nuxt-link
:to="{
name: 'profile-id-slug',
@ -30,12 +30,12 @@
<b>{{ scope.row.name | truncate(20) }}</b>
</nuxt-link>
</template>
<template slot="email" slot-scope="scope">
<template #email="scope">
<a :href="`mailto:${scope.row.email}`">
<b>{{ scope.row.email }}</b>
</a>
</template>
<template slot="slug" slot-scope="scope">
<template #slug="scope">
<nuxt-link
:to="{
name: 'profile-id-slug',
@ -45,7 +45,7 @@
<b>{{ scope.row.slug | truncate(20) }}</b>
</nuxt-link>
</template>
<template slot="createdAt" slot-scope="scope">
<template #createdAt="scope">
{{ scope.row.createdAt | dateTime }}
</template>
</ds-table>

2
webapp/pages/settings/index.vue
View File

@ -1,6 +1,6 @@
<template>
<ds-form v-model="form" :schema="formSchema" @submit="submit">
<template slot-scope="{ errors }">
<template #default="{ errors }">
<base-card>
<h2 class="title">{{ $t('settings.data.name') }}</h2>
<ds-input

2
webapp/pages/settings/my-email-address/enter-nonce.vue
View File

@ -1,6 +1,6 @@
<template>
<ds-form v-model="form" :schema="formSchema" @submit="submit">
<template slot-scope="{ errors }">
<template #default="{ errors }">
<base-card>
<h2 class="title">{{ $t('settings.email.name') }}</h2>
<ds-input

2
webapp/pages/settings/my-email-address/index.vue
View File

@ -6,7 +6,7 @@
<ds-text v-html="submitMessage" />
</base-card>
<ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
<template slot-scope="{ errors }">
<template #default="{ errors }">
<base-card>
<h2 class="title">{{ $t('settings.email.name') }}</h2>
<ds-input

10
webapp/vue.md
View File

@ -3,6 +3,7 @@
## We use single-file components
Each component lives in a single file, containing:
- its `template` (the DOM structure)
- its `script` (including `props`, `data` and `methods` among other things)
- its `style` (defining the look of the component)
@ -10,6 +11,7 @@ Each component lives in a single file, containing:
See the [Vue.js docs](https://vuejs.org/v2/guide/single-file-components.html) for more details.
Placed in the same folder are also:
- the test file (e.g. `MyComponent.spec.js`)
- the storybook file (e.g. `MyComponent.story.js`)
@ -20,6 +22,7 @@ Vue.js allows us to define component props either as strings or as objects (with
Also: only (and always!) define a `default` for props that are _not required_.
Why?
- it makes our code more robust – a warning will be shown when passing a wrong prop type
- it clearly defines the component API and tells other developers how to use it
@ -43,11 +46,14 @@ For more complex use cases see the [official Vue.js documentation](https://vuejs
## We use shorthands
For better readability we prefer
- `:something` over `v-bind:something`
- `@click` over `v-on:click`
- `#slotSame` over `v-slot:slotName`
- `#default` over `v-slot`
Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands)
Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands) (for [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand))
## Recommended reads
The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.
The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.