feat: add empty, update veui, update Iframe component

assets/styles/post.styl

@@ -54,7 +54,7 @@ margin-y($top, $bottom = $top)
     font-size 36px
 
     small
-      vertical-align 0.1em
+      margin-left 0.25em
       color #999
 
   h2

components/OneIframe.vue

@@ -1,23 +1,11 @@
-<template>
-<fragment>
-  <iframe
-    ref="iframe"
-    class="one-iframe"
-  />
-  <slot/>
-</fragment>
-</template>
-
 <script>
-import { Fragment } from 'vue-frag'
+import Vue from 'vue'
 
 export default {
   name: 'one-iframe',
-  components: {
-    Fragment
-  },
   props: {
-    globalStyle: String
+    globalStyle: String,
+    live: Boolean
   },
   watch: {
     globalStyle (value) {
@@ -27,41 +15,55 @@ export default {
     }
   },
   beforeDestroy () {
-    if (this.contents) {
-      this.contents.forEach(node => {
-        this.$refs.iframe.parentNode.appendChild(node)
-      })
-    }
-
     if (this.mo) {
       this.mo.disconnect()
     }
   },
   mounted () {
     const links = document.querySelectorAll('link[rel=stylesheet]')
     const styles = document.querySelectorAll('style')
-    const { iframe } = this.$refs
-    const { body, head } = iframe.contentDocument
-    this.contents = this.$el.frag.filter(node => node !== iframe);
-    [...links, ...styles].forEach(node => {
+    const { head } = this.$el.contentDocument
+
+    ;[...links, ...styles].forEach(node => {
       const clone = node.cloneNode(true)
       head.appendChild(clone)
     })
 
-    this.contents.forEach(node => {
-      body.appendChild(node)
-    })
-
     if (this.globalStyle) {
       const style = document.createElement('style')
       style.textContent = this.globalStyle
       head.appendChild(style)
       this.style = style
     }
 
-    this.watchLiveStyle(head)
+    this.renderContents()
+
+    if (this.live) {
+      this.watchLiveStyle(head)
+    }
+  },
+  beforeUpdate () {
+    this.app.contents = Object.freeze(this.$slots.default)
   },
   methods: {
+    renderContents () {
+      const contents = this.$slots.default
+      const body = this.$el.contentDocument.body
+      const el = document.createElement('div')
+      body.appendChild(el)
+
+      this.app = new Vue({
+        el,
+        data () {
+          return {
+            contents: Object.freeze(contents)
+          }
+        },
+        render (h) {
+          return h('div', this.contents)
+        }
+      })
+    },
     watchLiveStyle (head) {
       this.liveStyle = document.createComment('')
       head.appendChild(this.liveStyle)
@@ -84,6 +86,13 @@ export default {
       })
       this.mo.observe(document.head, { childList: true })
     }
+  },
+  render (h) {
+    return h('iframe', {
+      class: {
+        'one-iframe': true
+      }
+    })
   }
 }
 </script>

components/OneLive.vue

@@ -70,6 +70,7 @@
   >
     <one-iframe
       v-if="browser"
+      live
       global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }"
     >
       <v-live-preview

one/docs/components/column.md

@@ -27,7 +27,7 @@
 | ``filter-options`` | `Array<Object>` | - | 筛选选项列表，项目的类型为 `{label, value, options, disabled, ...}`，可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
 | ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
 | ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
-| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时，`item` 参数为整个 data 数据项，返回的字符串将作为提示内容展示。 |
+| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示当前单元格的 `textContent`。传入函数时，`item` 参数为整个 data 数据项，返回的字符串将作为提示内容展示。 |
 
 ^^^sortable
 本列是否支持排序。

one/docs/components/empty.md

@@ -0,0 +1,50 @@
+# Empty <small>空状态</small>
+
+## 示例
+
+### 默认
+
+[[ demo src="/demo/empty/default.vue" ]]
+
+### 页面级
+
+[[ demo src="/demo/empty/hero.vue" ]]
+
+### 局部状态
+
+[[ demo src="/demo/empty/spot.vue" ]]
+
+### 自定义
+
+[[ demo src="/demo/empty/custom.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``ui`` | `string=` | - | [^ui] |
+| ``image`` | `Object | false=` | - | 插图内容配置。不传时将输出默认插图；传入 `Object` 时，字段将作为 `<img>` 元素的属性输出；传入 `false` 时将隐藏插图。如果为默认插槽传入了内容，此属性会被忽略。 |
+| ``title`` | `string=` | - |  空状态标题。 |
+| ``desc`` | `string | false=` | - | 空状态描述。传入 `false` 时将隐藏描述。 |
+
+^^^ui
+预设样式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `s` | 小尺寸空状态。全局插图不适合小尺寸样式。 |
+| `m` | 中尺寸空状态。 |
++++
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 插图内容。默认情况下会展示“没有数据”对应的插图。 |
+| ``title`` | 标题区。 |
+| ``desc`` | 描述区。 |
+| ``actions`` | 操作区。 |

one/docs/demo/directives/tooltip/overflow.vue

@@ -2,7 +2,7 @@
 <article>
   <section>
     <div
-      v-tooltip.overflow="loremIpsum"
+      v-tooltip.overflow
       class="item"
     >
       {{ loremIpsum }}
@@ -45,3 +45,7 @@ export default {
   text-overflow: ellipsis;
 }
 </style>
+
+<docs>
+当无绑定值或不提供 `content` 参数时，将自动展示被绑定元素的 `textContent` 内容。
+</docs>

one/docs/demo/empty/custom.vue

@@ -0,0 +1,63 @@
+<template>
+<article>
+  <section>
+    <h4>内置 <code>&lt;img&gt;</code> 标签</h4>
+    <veui-empty
+      :image="image"
+      title="找不到对应的内容"
+      desc="请检查输入的网址是否正确"
+    />
+  </section>
+  <section>
+    <h4>任意内容</h4>
+    <veui-empty
+      ui="s"
+      title="未知错误"
+      :desc="false"
+    >
+      <veui-icon
+        name="exclamation-circle-solid"
+        style="height: 96px; color: rebeccapurple;"
+      />
+    </veui-empty>
+  </section>
+</article>
+</template>
+
+<script>
+import { Empty, Icon } from 'veui'
+import 'veui-theme-dls-icons/exclamation-circle-solid'
+
+export default {
+  components: {
+    'veui-empty': Empty,
+    'veui-icon': Icon
+  },
+  data () {
+    return {
+      image: {
+        src: 'http://ecma.bdimg.com/public01/one-design/597ed72aff7a9fbacf23ba79b43aa61d.png',
+        width: 296,
+        height: 197,
+        alt: '404 illustration provided by unDraw'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & + & {
+    margin-top: 20px;
+  }
+}
+
+h4 {
+  align-self: flex-start;
+}
+</style>

one/docs/demo/empty/default.vue

@@ -0,0 +1,23 @@
+<template>
+<article>
+  <veui-empty/>
+</article>
+</template>
+
+<script>
+import { Empty } from 'veui'
+
+export default {
+  components: {
+    'veui-empty': Empty
+  }
+}
+</script>
+
+<style scoped>
+article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

one/docs/demo/empty/hero.vue

@@ -0,0 +1,85 @@
+<template>
+<article>
+  <section>
+    <veui-select
+      v-model="current"
+      class="picker"
+      ui="s"
+      :options="options"
+      overlay-style="--dls-dropdown-max-display-items: 4;"
+    />
+  </section>
+  <veui-empty
+    title="没有权限"
+  >
+    <component :is="illustrations[current]"/>
+    <template #desc>
+      请联系管理员为你添加权限
+      <veui-button ui="strong text">
+        发送邮件
+      </veui-button>
+    </template>
+    <template #actions>
+      <veui-button ui="primary">
+        回到首页
+      </veui-button>
+    </template>
+  </veui-empty>
+</article>
+</template>
+
+<script>
+import { Empty, Button, Select } from 'veui'
+import * as illustrations from 'dls-illustrations-vue'
+
+const illustrationNames = [
+  'IllustrationBlank',
+  'IllustrationClientError',
+  'IllustrationForbidden',
+  'IllustrationNoResults',
+  'IllustrationNotFound',
+  'IllustrationReviewError',
+  'IllustrationReviewPending',
+  'IllustrationReviewSuccess',
+  'IllustrationServerError'
+]
+
+export default {
+  components: {
+    'veui-empty': Empty,
+    'veui-button': Button,
+    'veui-select': Select
+  },
+  data () {
+    return {
+      illustrations,
+      current: 'IllustrationForbidden'
+    }
+  },
+  computed: {
+    options () {
+      return illustrationNames.map(name => ({
+        label: name,
+        value: name
+      }))
+    }
+  }
+}
+</script>
+
+<style scoped>
+article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+section {
+  align-self: flex-start;
+}
+
+.picker {
+  width: 240px;
+}
+</style>