Merge pull request #297 from jjangga0214/patch/deprecated/slot

change deprecated `slot-scope` to `v-slot`
This commit is contained in:
Philipp Kühn 2019-05-08 09:00:55 +02:00 committed by GitHub
commit f44be05cf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 23 additions and 31 deletions

View File

@ -117,8 +117,8 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
```vue ```vue
<template> <template>
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div slot-scope="{ commands, isActive }"> <div>
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
@ -147,9 +147,8 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
```vue ```vue
<template> <template>
<editor-menu-bubble :editor="editor"> <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
<div <div
slot-scope="{ commands, isActive, menu }"
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
> >
@ -181,9 +180,8 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
```vue ```vue
<template> <template>
<editor-floating-menu :editor="editor"> <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
<div <div
slot-scope="{ commands, isActive, menu }"
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`top: ${menu.top}px`" :style="`top: ${menu.top}px`"
> >
@ -207,12 +205,10 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
```vue ```vue
<template> <template>
<div> <div>
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div slot-scope="{ commands, isActive }">
<button :class="{ 'is-active': isActive.bold() }" @click="commands.bold"> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold Bold
</button> </button>
</div>
</editor-menu-bar> </editor-menu-bar>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
</div> </div>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar" slot-scope="{ commands, isActive }"> <div class="menubar">
<button <button
class="menubar__button" class="menubar__button"

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar" slot-scope="{ commands, isActive }"> <div class="menubar">
<button <button
class="menubar__button" class="menubar__button"

View File

@ -1,8 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-floating-menu :editor="editor"> <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
<div <div
slot-scope="{ commands, isActive, menu }"
class="editor__floating-menu" class="editor__floating-menu"
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`top: ${menu.top}px`" :style="`top: ${menu.top}px`"

View File

@ -1,10 +1,9 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
<div <div
class="menubar is-hidden" class="menubar is-hidden"
:class="{ 'is-focused': focused }" :class="{ 'is-focused': focused }"
slot-scope="{ commands, isActive, focused }"
> >
<button <button

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar" slot-scope="{ commands, isActive }"> <div class="menubar">
<button <button
class="menubar__button" class="menubar__button"

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands }">
<div class="menubar" slot-scope="{ commands }"> <div class="menubar">
<button <button
class="menubar__button" class="menubar__button"
@click="showImagePrompt(commands.image)" @click="showImagePrompt(commands.image)"

View File

@ -1,8 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu"> <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
<div <div
slot-scope="{ commands, isActive, getMarkAttrs, menu }"
class="menububble" class="menububble"
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"

View File

@ -1,8 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds"> <editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds" v-slot="{ commands, isActive, menu }">
<div <div
slot-scope="{ commands, isActive, menu }"
class="menububble" class="menububble"
:class="{ 'is-active': menu.isActive }" :class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"

View File

@ -2,8 +2,8 @@
<div> <div>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands }">
<div class="menubar" slot-scope="{ commands }"> <div class="menubar">
<button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })"> <button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
<icon name="mention" /> <icon name="mention" />
<span>Insert Mention</span> <span>Insert Mention</span>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar" slot-scope="{ commands, isActive }"> <div class="menubar">
<div class="toolbar"> <div class="toolbar">
<button <button
class="menubar__button" class="menubar__button"

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar" slot-scope="{ commands, isActive }"> <div class="menubar">
<button <button
class="menubar__button" class="menubar__button"