@hyjiacan/vue-slideout 3.0.0 → 3.0.2

package/API.md

@@ -4,12 +4,19 @@
 
 ### Basic
 
+#### v-model (required)
+
+- type `Boolean`
+
+> The visible state of component.
+
 #### size (optional)
 
 - type `String/Number/Array`
 - default `400px`
 
 > The size of component, both `px` and `%` are available;
+>
 > - If it is an array, then: The 1st element is the width, and the 2nd element is the height,
 > - if there is only one element: that makes width equals with height.
     > In this situation, props `resizable`, `min-size`, `max-size` are not available.
@@ -17,12 +24,6 @@
     > You can set value `0/[0]/[0,size]/[size,0]` to make component auto fit content size.
     > In this situation, props `min-size`, `max-size` are available.
 
-#### v-model (required)
-
-- type `Boolean`
-
-> The visible state of component.
-
 #### dock (optional)
 
 - type `String`
@@ -40,7 +41,7 @@
 #### target (optional)
 
 - type `String/HTMLElement`
-- default `null`
+- default `body`
 
 > Append component into the specified element.
 > Both `string`(selector) and `HTMLElement`(DOM object) available.
@@ -49,7 +50,9 @@
 > Note the target element must exist before the component is mounted
 >
 > i.e. the target cannot be rendered by the component itself,
-> and ideally should be outside of the entire Vue component tree.
+> and ideally should be outside the entire Vue component tree.
+
+If you indent to mount it onto it's parent element, you should use `:target="null"`.
 
 ### Mask layer
 
@@ -181,13 +184,13 @@
 
 ## Slots
 
-#### default
+### default
 
 - args `-`
 
 > The content slot.
 
-#### header
+### header
 
 - args `{title}`
 
@@ -195,13 +198,13 @@
 > `title` will take no affected(and close button will be removed) if specified this,
 > use `slot-scope="{ title }"` to get prop `title`.
 
-#### buttons
+### buttons
 
 - args `-`
 
 > Extend header buttons.
 
-#### footer
+### footer
 
 - args `-`
 
@@ -209,7 +212,7 @@
 
 ## Events
 
-#### opening
+### opening
 
 - args e: `{pause: Boolean, resume: Boolean}`
 
@@ -217,20 +220,20 @@
 > Emitted before component open, in callback function,
 > assign `e.pause=true` to pause open, and assign `e.resume=true` to resume open (async supported).
 
-#### opened
+### opened
 
 - args `-`
 
 > Emitted after opened (and after the animation completed).
 
-#### closing
+### closing
 
 - args e: `{pause: Boolean, resume: Boolean}`
 
 > Emitted before component close, in callback function,
 > assign `e.pause=true` to pause close, and assign `e.resume=true` to resume close (async supported).
 
-#### closed
+### closed
 
 - args `-`
 

package/API.zh-CN.md

@@ -16,6 +16,7 @@
 - 默认值 `400px`
 
 > 显示的尺寸, 可以使用单位`px`和`%`；
+> 
 > - 当为数组时: 第一个值表示宽度，第二个值表示高度;
 > - 当数组只有一个值时: 表示宽度和高度相同，此时属性 `resizable`, `min-size`, `max-size` 值会被忽略，即不允许改变大小。
 > - ( **自适应尺寸支持** ) 可以设置值为 `0/[0]/[0,size]/[size,0]` 格式， 使组件尺寸自动适应内容。此时 `min-size`, `max-size` 可用。
@@ -37,7 +38,7 @@
 #### target  (可选)
 
 - 类型 `String/HTMLElement`
-- 默认值 `null`
+- 默认值 `body`
 
 > 设置父元素，可使用字符串(选择器)和(DOM对象)。
 > 在未设置 `target` 时，Slide组件会以 `position: fixed` 的方式显示。
@@ -46,6 +47,8 @@
 >
 > 也就是说，目标元素不能由包含此组件的本身来渲染，并且最好是将其放置在整个Vue组件树之外。
 
+若需要使其挂载在像容器上，需要指定 `:target="null"`。
+
 ### mask 层属性
 
 #### show-mask  (可选)
@@ -175,48 +178,48 @@
 
 ## 插槽
 
-#### header
+### header
 
 - 作用域 `{title}`
 
 > 头部内容，使用时会占据整个头部，此时属性`title`会无效，
 > 同时也不会显示关闭按钮使用`slot-scope="{ title }"`可以取到属性`title`的值。
 
-#### buttons
+### buttons
 
 > 头部的扩展按钮部分。
 
-#### default
+### default
 
 > 内容部分。
 
-#### footer
+### footer
 
 > 底部内容。
 
 ## 事件
 
-#### opening
+### opening
 
 - 参数 e: `{pause: Boolean, resume: Boolean}`
 
 > 在打开前调用,在回调函数内, 设置`e.pause=true` 可以阻止打开，
-> 设置 `e.continue=true` 可以继续打开(支持异步)。
+> 设置 `e.resume=true` 可以继续打开(支持异步)。
 
-#### opened
+### opened
 
 - 参数 `-`
 
 > 在打开后(动画完成)调用。
 
-#### closing
+### closing
 
 - 参数 e: `{pause: Boolean, resume: Boolean}`
 
 > 在关闭前调用,在回调函数内, 设置`e.pause=true` 可以阻止关闭，
-> 设置 `e.continue=true` 可以继续关闭(支持异步)。
+> 设置 `e.resume=true` 可以继续关闭(支持异步)。
 
-#### closed
+### closed
 
 - 参数 `-`
 

package/README.md

@@ -6,11 +6,11 @@
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@hyjiacan/vue-slideout?style=flat-square)
 [![npm](https://img.shields.io/npm/dm/@hyjiacan/vue-slideout?style=flat-square)](https://npmcharts.com/compare/@hyjiacan/vue-slideout?minimal=true)
 [![Coverage Status](https://coveralls.io/repos/github/hyjiacan/vue-slideout/badge.svg?branch=master)](https://coveralls.io/github/hyjiacan/vue-slideout?branch=master)
-[![](https://data.jsdelivr.com/v1/package/npm/@hyjiacan/vue-slideout/badge)](https://www.jsdelivr.com/package/npm/@hyjiacan/vue-slideout)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@hyjiacan/vue-slideout/badge)](https://www.jsdelivr.com/package/npm/@hyjiacan/vue-slideout)
 
 A Slide-Out component for Vue3
 
-### Dependencies
+## Dependencies
 
 - Vue.js 3.x
 - Less
@@ -47,16 +47,16 @@ The newest version
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.umd.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.css"/>
+<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.umd.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.css"/>
 ```
 
 Specified version
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.umd.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.css"/>
+<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.umd.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.css"/>
 ```
 
 > **unpkg** is also available: instead *cdn.jsdelivr.net* with *unpkg.com*.
@@ -72,7 +72,7 @@ Specified version
 ```javascript
 import Vue from 'vue'
 import Slideout from '@hyjiacan/vue-slideout'
-import '@hyjiacan/vue-slideout/lib/slideout.css'
+import '@hyjiacan/vue-slideout/dist/slideout.css'
 
 // import Slideout component, and set the defaults props
 Vue.use(Slideout, {
@@ -92,7 +92,7 @@ Vue.use(Slideout, {
 </template>
 <script>
 import Slideout from '@hyjiacan/vue-slideout'
-import '@hyjiacan/vue-slideout/lib/slideout.css'
+import '@hyjiacan/vue-slideout/dist/slideout.css'
 
 export default {
   name: 'Foobar',