Merge pull request #326 from ielgnaw/staging

feat: bump to 2.5.1

build/markdown-it-github-link.js

@@ -0,0 +1,113 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+*/
+
+/**
+ * @file markdown-it-github-link plugin
+ *
+ * Copyright © 2012-2019 Tencent BlueKing. All Rights Reserved. 蓝鲸智云 版权所有
+ */
+
+const exampleRouteConfig = require('../example/components.config')
+
+const kebabCase = string => string
+  .replace(/([a-z])([A-Z])/g, '$1-$2')
+  .replace(/[\s_]+/g, '-')
+  .toLowerCase()
+
+function getTokensText (tokens) {
+  return tokens
+    .filter(t => ['text', 'code_inline'].includes(t.type))
+    .map(t => t.content)
+    .join('')
+}
+
+function findRouter (name) {
+  let ret = null
+  const groupLen = exampleRouteConfig.groups.length
+  for (let i = 0; i < groupLen; i++) {
+    const group = exampleRouteConfig.groups[i]
+    const componentLen = group.components.length
+    for (let j = 0; j < componentLen; j++) {
+      const component = group.components[j]
+      if (component.name === name) {
+        ret = component
+        break
+      }
+    }
+  }
+  return ret
+}
+
+module.exports = function replace (md, opts) {
+  md.core.ruler.push('github-link', state => {
+    const tokens = state.tokens
+    for (let id = 0; id < tokens.length; id++) {
+      const token = tokens[id]
+      if (token.type !== 'heading_open') {
+        continue
+      }
+      if (token.tag !== 'h2') {
+        continue
+      }
+      const space = () => Object.assign(new state.Token('text', '', 0), { content: ' ' })
+      const content = getTokensText(tokens[id + 1].children)
+
+      const urlPrefix = 'https://github.com/TencentBlueKing/bkui-vue2/blob/staging/example/components'
+
+      const linkTokens = [
+        Object.assign(new state.Token('link_open', 'a', 1), {
+          attrs: [
+            ['href', `${urlPrefix}/${kebabCase(findRouter(content).id)}/readme.md`],
+            ['target', '_blank'],
+            ['style', 'color: #1f2f3d;']
+          ]
+        }),
+        Object.assign(new state.Token('svg_open', 'svg', 1), {
+          attrs: [
+            ['v-bk-tooltips.right', '"去 Github 编辑"'],
+            ['preserveAspectRatio', 'xMidYMid meet'],
+            ['class', 'github-link'],
+            ['viewBox', '0 0 24 24'],
+            ['width', ' 24px'],
+            ['height', '24px']
+          ]
+        }),
+        Object.assign(new state.Token('path_open', 'path', 1), {
+          attrs: [
+            ['fill', 'currentColor'],
+            ['d', 'M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z']
+          ]
+        }),
+        new state.Token('path_close', 'path', -1),
+        new state.Token('svg_close', 'svg', -1),
+        new state.Token('link_close', 'a', -1)
+      ]
+
+      linkTokens['push'](space())
+      state.tokens[id + 1].children['push'](...linkTokens)
+    }
+  })
+}

build/md-loader-option.js

@@ -43,6 +43,7 @@ const { slugify } = require('transliteration')
 const { strip } = require('./strip-tags')
 const { convert } = require('./util')
 const markdownItReplace = require('./markdown-it-replace')
+const markdownItGithubLink = require('./markdown-it-github-link')
 const markdownItHighlightjs = require('./md-highlight')
 
 const replaceLink = (link, env) => {
@@ -85,6 +86,7 @@ module.exports = {
   preventExtract: true,
   replaceLink,
   use: [
+    [markdownItGithubLink],
     [markdownItReplace, {
       replaceStr: 'bk-magic-vue'
     }],
@@ -166,10 +168,10 @@ module.exports = {
             ).replace(/(<[^>]*)=""(?=.*>)/g, '$1')
 
             return ``
-                            + `<code-block class="demo-box">`
-                            + `<div class="source" slot="source">${html}</div>`
-                            + descriptionHTML
-                            + `<div class="highlight" slot="highlight">`
+              + `<code-block class="demo-box">`
+              + `<div class="source" slot="source">${html}</div>`
+              + descriptionHTML
+              + `<div class="highlight" slot="highlight">`
           }
           return '</div></code-block>\n'
         }

example/components.config.js

@@ -30,7 +30,7 @@
  * Copyright © 2012-2019 Tencent BlueKing. All Rights Reserved. 蓝鲸智云 版权所有
  */
 
-export default {
+module.exports = {
   // 文档页面分组数据，groupId 为分组标题，components 为当前组内的组件
   groups: [
     {
@@ -91,7 +91,7 @@ export default {
         },
         {
           id: 'transition',
-          name: 'Transition 过度动画'
+          name: 'Transition 内置动画'
         }
       ]
     },
@@ -189,16 +189,16 @@ export default {
           name: 'TimePicker 时间选择器'
         },
         {
-          id: 'tag',
+          id: 'tagInput',
           name: 'TagInput 标签输入框'
         },
         {
           id: 'upload',
           name: 'Upload 文件上传'
         },
         {
-          'id': 'searchselect',
-          'name': 'SearchSelect 查询选择器'
+          id: 'searchSelect',
+          name: 'SearchSelect 查询选择器'
         },
         {
           id: 'slider',
@@ -213,7 +213,7 @@ export default {
           name: 'Rate 评分'
         },
         {
-          id: 'componseFormItem',
+          id: 'composeFormItem',
           name: 'ComposeFormItem 表单项组合'
         },
         {
@@ -247,7 +247,7 @@ export default {
         },
         {
           id: 'swiper',
-          name: 'Swiper 轮播'
+          name: 'Swiper 轮播图'
         },
         {
           id: 'pagination',
@@ -278,7 +278,7 @@ export default {
           name: 'Table 表格'
         },
         {
-          id: 'tags',
+          id: 'tag',
           name: 'Tag 标签'
         },
         {
@@ -324,7 +324,7 @@ export default {
         },
         {
           id: 'tooltips',
-          name: 'Tooltips 工具提示'
+          name: 'Tooltips 工具提示（指令）'
         },
         {
           id: 'popover',
@@ -339,7 +339,7 @@ export default {
           name: 'Dialog 对话框'
         },
         {
-          id: 'sideSlider',
+          id: 'sideslider',
           name: 'Sideslider 侧栏'
         },
         {

example/components/affix/readme.md

@@ -1,20 +1,20 @@
 <script>
-    import { bkAffix, bkButton } from '@'
-
-    export default {
-        components: {
-            bkAffix,
-            bkButton
-        },
-        methods: {
-            change(status) {
-                this.$bkMessage({
-                    message: '当前状态' + status,
-                    offsetY: 80
-                })
-            }
-        }
+  import { bkAffix, bkButton } from '@'
+
+  export default {
+    components: {
+      bkAffix,
+      bkButton
+    },
+    methods: {
+      change(status) {
+        this.$bkMessage({
+          message: '当前状态' + status,
+          offsetY: 80
+        })
+      }
     }
+  }
 </script>
 <style>
     #affix-demo.scrollable-container {

example/components/cascade/readme.md

@@ -156,7 +156,8 @@
                 clearable: true,
                 filterable: true,
                 disabled: true,
-                isRemote: true
+                isRemote: true,
+                maxWidth: 500
             }
         },
         methods: {
@@ -822,6 +823,87 @@
 ```
 :::
 
+### max-width  {page=#/cascade}
+
+:::demo 可以通过`max-width`设置弹出框最大宽度，通过弹出层滚动，避免弹出层级太多导致的样式问题
+
+```html
+<template>
+    <bk-cascade
+        v-model="value"
+        :list="list"
+        clearable
+        style="width: 250px;"
+        :max-width="500"
+        :ext-popover-cls="'custom-cls'">
+    </bk-cascade>
+    <script>
+        import { bkCascade } from '{{BASE_LIB_NAME}}'
+
+        export default {
+            components: {
+                bkCascade
+            },
+            data (s) {
+                return {
+                    value: [],
+                    list: [
+                        {
+                            id: 'hunan',
+                            name: '湖南',
+                            children: [
+                                {
+                                    id: 'changsha',
+                                    name: '长沙'
+                                },
+                                {
+                                    id: 'yueyang',
+                                    name: '岳阳'
+                                }
+                            ]
+                        }, {
+                            id: 'guangxi',
+                            name: '广西'
+                        }, {
+                            id: 'yunnan',
+                            name: '云南',
+                            children: [
+                                {
+                                    id: 'kunming',
+                                    name: '昆明',
+                                    children: [
+                                        {
+                                            id: 'wuhuaqu',
+                                            name: '五华区'
+                                        },
+                                        {
+                                            id: 'guanduqu',
+                                            name: '官渡区'
+                                        },
+                                        {
+                                            id: 'xishanqu',
+                                            name: '西山区'
+                                        }
+                                    ]
+                                },
+                                {
+                                    id: 0,
+                                    name: '大理'
+                                },
+                                {
+                                    id: '',
+                                    name: '玉溪'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            }
+        }
+    </script>
+</template>
+```
+:::
 
 ### bk-cascade 级联选框属性 {page=#/cascade}
 
@@ -849,6 +931,7 @@
 | is-remote | 开启远程加载，搭配remote-method一起使用 | Boolean | —— | false |
 | popover-options | 透传至下拉列表所在的popover组件的tippyOptions选项 | Object | —— | —— |
 | ext-popover-cls | 配置自定义样式类名，传入的类会被加在下拉菜单的 DOM .bk-cascade-dropdown-content 上 | String | —— | —— |
+| max-width | 可以通过`max-width`设置弹出框最大宽度，通过弹出层滚动，避免弹出层级太多导致的样式问题 | String|Number | —— | 100% |
 
 ### 事件 {page=#/cascade}