bri-components 1.5.22 → 1.6.0

package/src/components/other/BriCode.vue

@@ -1,125 +1,125 @@
-<template>
-    <div class="BriCode">
-        <codemirror
-            style="height:100%"
-            v-model="computedVal"
-            :options="option"
-            @ready="ready"
-            @input="input"
-            @changes="changes"
-        ></codemirror>
-    </div>
-</template>
-
-<script>
-    import { JSHINT } from "jshint";
-
-    import { codemirror } from "vue-codemirror";
-    // 这里引入的模式的js，根据设置的mode引入
-    import "codemirror/mode/javascript/javascript.js";
-    // 光标行背景高亮，配置里面也需要styleActiveLine设置为true
-    import "codemirror/addon/selection/active-line.js";
-    import "codemirror/addon/edit/matchbrackets.js";
-
-    // JavaScript代码提示功能需要引入三个依赖
-    import "codemirror/addon/hint/javascript-hint.js";
-    import "codemirror/addon/hint/show-hint.js";
-
-    // 折叠
-    import "codemirror/addon/fold/foldcode.js";
-    import "codemirror/addon/fold/foldgutter.js";
-    import "codemirror/addon/fold/brace-fold.js";
-    import "codemirror/addon/fold/comment-fold.js";
-
-    // 下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
-    // 如果需要验证 json 的话
-    import "codemirror/addon/lint/lint.js";
-    import "codemirror/addon/lint/javascript-lint.js";
-    import "codemirror/addon/display/autorefresh"; // 及时自动更新，配置里面也需要设置autoRefresh为true
-
-    export default {
-        name: "BriCode",
-        components: {
-            codemirror
-        },
-        props: {
-            value: String,
-            option: {
-                type: Object,
-                default: function () {
-                    return {
-                        mode: "javascript",
-                        theme: "cobalt",
-                        dragDrop: true, // 拖拽
-                        lineWrapping: true, // 换行
-                        autofocus: true,
-                        lineNumbers: true, // 行号
-                        foldGutter: true, // 代码折叠
-                        line: true,
-                        matchBrackets: true, // 括号匹配
-                        extraKeys: { Ctrl: "autocomplete" },
-                        showCursorWhenSelecting: true, // 在选择时是否显示光标，默认为false
-                        lineWiseCopyCut: true, // 启用时，如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行]
-                        autorefresh: true, // 及时自动更新
-                        lint: true, // json检查
-                        hint: true,
-                        styleActiveLine: true,
-                        gutters: [
-                            "CodeMirror-linenumbers", // 显示行号
-                            "CodeMirror-foldgutter", // 代码折叠
-                            "CodeMirror-lint-markers" // json检查
-                        ]
-                    };
-                }
-            }
-        },
-        model: {
-            prop: "value",
-            event: "change"
-        },
-        data () {
-            return {};
-        },
-        computed: {
-            computedVal: {
-                get () {
-                    return this.value;
-                },
-                set (val) {
-                    this.handleChange(val);
-                }
-            }
-        },
-        created () {
-            window.JSHINT = JSHINT;
-        },
-        methods: {
-            ready (cm) {
-                cm.setSize("100%", "100%");
-                this.$emit("ready", cm);
-            },
-            input (cm) {
-                this.$emit("input", cm);
-            },
-            changes (cm, value) {
-                this.$emit("changes", cm, value);
-            },
-            handleChange (val) {
-                // 0 no, 1 warning 2 error
-                JSHINT(val);
-                let errors = (JSHINT.data().errors || [])
-                    .map(error => error.code ? (error.code.startsWith("W") ? 1 : 2) : 2);
-
-                this.$emit("jshint", errors.some(errorNum => errorNum === 2), errors);
-                this.$emit("change", val);
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .BriCode {
-        width: 100%;
-        height: 100%;
-    }
-</style>
+<template>
+    <div class="BriCode">
+        <codemirror
+            style="height:100%"
+            v-model="computedVal"
+            :options="option"
+            @ready="ready"
+            @input="input"
+            @changes="changes"
+        ></codemirror>
+    </div>
+</template>
+
+<script>
+    import { JSHINT } from "jshint";
+
+    import { codemirror } from "vue-codemirror";
+    // 这里引入的模式的js，根据设置的mode引入
+    import "codemirror/mode/javascript/javascript.js";
+    // 光标行背景高亮，配置里面也需要styleActiveLine设置为true
+    import "codemirror/addon/selection/active-line.js";
+    import "codemirror/addon/edit/matchbrackets.js";
+
+    // JavaScript代码提示功能需要引入三个依赖
+    import "codemirror/addon/hint/javascript-hint.js";
+    import "codemirror/addon/hint/show-hint.js";
+
+    // 折叠
+    import "codemirror/addon/fold/foldcode.js";
+    import "codemirror/addon/fold/foldgutter.js";
+    import "codemirror/addon/fold/brace-fold.js";
+    import "codemirror/addon/fold/comment-fold.js";
+
+    // 下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
+    // 如果需要验证 json 的话
+    import "codemirror/addon/lint/lint.js";
+    import "codemirror/addon/lint/javascript-lint.js";
+    import "codemirror/addon/display/autorefresh"; // 及时自动更新，配置里面也需要设置autoRefresh为true
+
+    export default {
+        name: "BriCode",
+        components: {
+            codemirror
+        },
+        props: {
+            value: String,
+            option: {
+                type: Object,
+                default: function () {
+                    return {
+                        mode: "javascript",
+                        theme: "cobalt",
+                        dragDrop: true, // 拖拽
+                        lineWrapping: true, // 换行
+                        autofocus: true,
+                        lineNumbers: true, // 行号
+                        foldGutter: true, // 代码折叠
+                        line: true,
+                        matchBrackets: true, // 括号匹配
+                        extraKeys: { Ctrl: "autocomplete" },
+                        showCursorWhenSelecting: true, // 在选择时是否显示光标，默认为false
+                        lineWiseCopyCut: true, // 启用时，如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行]
+                        autorefresh: true, // 及时自动更新
+                        lint: true, // json检查
+                        hint: true,
+                        styleActiveLine: true,
+                        gutters: [
+                            "CodeMirror-linenumbers", // 显示行号
+                            "CodeMirror-foldgutter", // 代码折叠
+                            "CodeMirror-lint-markers" // json检查
+                        ]
+                    };
+                }
+            }
+        },
+        model: {
+            prop: "value",
+            event: "change"
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            computedVal: {
+                get () {
+                    return this.value;
+                },
+                set (val) {
+                    this.handleChange(val);
+                }
+            }
+        },
+        created () {
+            window.JSHINT = JSHINT;
+        },
+        methods: {
+            ready (cm) {
+                cm.setSize("100%", "100%");
+                this.$emit("ready", cm);
+            },
+            input (cm) {
+                this.$emit("input", cm);
+            },
+            changes (cm, value) {
+                this.$emit("changes", cm, value);
+            },
+            handleChange (val) {
+                // 0 no, 1 warning 2 error
+                JSHINT(val);
+                let errors = (JSHINT.data().errors || [])
+                    .map(error => error.code ? (error.code.startsWith("W") ? 1 : 2) : 2);
+
+                this.$emit("jshint", errors.some(errorNum => errorNum === 2), errors);
+                this.$emit("change", val);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .BriCode {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/src/components/other/BriCollapseTree.vue

@@ -1,207 +1,207 @@
-<template>
-    <div class="BriCollapseTree">
-        <ul>
-            <li
-                v-for="listItem in list"
-                :key="listItem._key"
-            >
-                <!-- 有children -->
-                <Collapse
-                    v-if="listItem.children && listItem.children.length"
-                    class="BriCollapseTree-collapse"
-                    :accordion="listItem._accordion"
-                    :simple="listItem._simple === false ? false : true"
-                    :hide-arrow="true"
-                    :value="listItem.expansion ? [listItem._key] : []"
-                >
-                    <Panel :name="listItem._key">
-                        <div
-                            :class="{
-                                'BriCollapseTree-collapseItem': true,
-                                'BriCollapseTree-listItem-disabled': listItem.disabled
-                            }"
-                            @click.stop="click(listItem)"
-                        >
-                            <div class="BriCollapseTree-listItem-text">
-                                {{ listItem.name }}
-                                <span
-                                    class="BriCollapseTree-listItem-current"
-                                    v-if="listItem.current"
-                                >(当前)</span>
-                            </div>
-                            <div class="BriCollapseTree-listItem-grey">
-                                {{ listItem._simpleDescription }}
-                            </div>
-                        </div>
-
-                        <bri-collapse-tree
-                            slot="content"
-                            :list="listItem.children"
-                            @click="click"
-                        ></bri-collapse-tree>
-                    </Panel>
-                </Collapse>
-
-                <!-- 直接展示 -->
-                <div
-                    v-else
-                    :class="{
-                        'BriCollapseTree-collapseItem': true,
-                        'BriCollapseTree-listItem-disabled': listItem.disabled
-                    }"
-                    @click.stop="click(listItem)"
-                >
-                    <div class="BriCollapseTree-listItem-text">
-                        {{ listItem.name }}
-                        <span
-                            v-if="listItem.current"
-                            class="BriCollapseTree-listItem-current"
-                        >(当前)</span>
-                    </div>
-
-                    <div class="BriCollapseTree-listItem-grey">
-                        <Tooltip
-                            v-if="listItem._description"
-                            placement="right"
-                            max-width="300"
-                            :content="listItem._description"
-                        >
-                            <span class="BriCollapseTree-listItem-rightText">
-                                {{ listItem._simpleDescription }}
-                            </span>
-                        </Tooltip>
-                        <span
-                            v-else
-                            class="BriCollapseTree-listItem-rightText"
-                        >{{ listItem._simpleDescription }}</span>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "BriCollapseTree",
-        props: {
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
-        },
-        data () {
-            return {
-            };
-        },
-        computed: {},
-        created () {},
-        methods: {
-            click (listItem) {
-                if (listItem.disabled) {
-                    return;
-                }
-                this.$emit("click", listItem);
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .BriCollapseTree {
-        &-listItem {
-            display: flex;
-            justify-content: space-between;
-            padding: 6px 12px;
-            line-height: 20px;
-            cursor: pointer;
-
-            &-text {
-                word-break: break-word;
-                flex: 1;
-                min-width: 120px;
-            }
-
-            &-grey {
-                text-align: right;
-                color: @textColor;
-                margin-left: 0px;
-            }
-
-            &-rightText {
-                min-width: 50px;
-                .dsh-ellipsis2();
-                -webkit-line-clamp: 3;
-                word-break: break-word;
-                color: @contentColor;
-            }
-
-            &:hover {
-                background: @bgColor;
-            }
-
-            &-current {
-                font-weight: normal;
-                color: @themeColor;
-            }
-
-            &-disabled {
-                cursor: not-allowed;
-            }
-        }
-
-        &-collapseItem {
-            padding: 4px 0px;
-            flex: 1;
-            display: flex;
-            justify-content: space-between;
-            cursor: pointer;
-
-            &:hover {
-                background: @bgColor;
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .BriCollapseTree {
-        &-collapse {
-            &.ivu-collapse {
-                border: none;
-
-                .ivu-collapse-item > .ivu-collapse-header {
-                    padding: 0px;
-                    height: auto;
-                    min-height: 32px;
-                    line-height: 18px;
-                    display: flex;
-                    align-items: center;
-
-                    i {
-                        margin-right: 0px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 30px;
-                        height: 30px;
-                    }
-
-                    &:hover {
-                        background: @bgColor;
-                    }
-                }
-
-                .ivu-collapse-content {
-                    padding: 0px;
-
-                    & > .ivu-collapse-content-box {
-                        padding: 0px;
-                        padding-left: 18px;
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="BriCollapseTree">
+        <ul>
+            <li
+                v-for="listItem in list"
+                :key="listItem._key"
+            >
+                <!-- 有children -->
+                <Collapse
+                    v-if="listItem.children && listItem.children.length"
+                    class="BriCollapseTree-collapse"
+                    :accordion="listItem._accordion"
+                    :simple="listItem._simple === false ? false : true"
+                    :hide-arrow="true"
+                    :value="listItem.expansion ? [listItem._key] : []"
+                >
+                    <Panel :name="listItem._key">
+                        <div
+                            :class="{
+                                'BriCollapseTree-collapseItem': true,
+                                'BriCollapseTree-listItem-disabled': listItem.disabled
+                            }"
+                            @click.stop="click(listItem)"
+                        >
+                            <div class="BriCollapseTree-listItem-text">
+                                {{ listItem.name }}
+                                <span
+                                    class="BriCollapseTree-listItem-current"
+                                    v-if="listItem.current"
+                                >(当前)</span>
+                            </div>
+                            <div class="BriCollapseTree-listItem-grey">
+                                {{ listItem._simpleDescription }}
+                            </div>
+                        </div>
+
+                        <bri-collapse-tree
+                            slot="content"
+                            :list="listItem.children"
+                            @click="click"
+                        ></bri-collapse-tree>
+                    </Panel>
+                </Collapse>
+
+                <!-- 直接展示 -->
+                <div
+                    v-else
+                    :class="{
+                        'BriCollapseTree-collapseItem': true,
+                        'BriCollapseTree-listItem-disabled': listItem.disabled
+                    }"
+                    @click.stop="click(listItem)"
+                >
+                    <div class="BriCollapseTree-listItem-text">
+                        {{ listItem.name }}
+                        <span
+                            v-if="listItem.current"
+                            class="BriCollapseTree-listItem-current"
+                        >(当前)</span>
+                    </div>
+
+                    <div class="BriCollapseTree-listItem-grey">
+                        <Tooltip
+                            v-if="listItem._description"
+                            placement="right"
+                            max-width="300"
+                            :content="listItem._description"
+                        >
+                            <span class="BriCollapseTree-listItem-rightText">
+                                {{ listItem._simpleDescription }}
+                            </span>
+                        </Tooltip>
+                        <span
+                            v-else
+                            class="BriCollapseTree-listItem-rightText"
+                        >{{ listItem._simpleDescription }}</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriCollapseTree",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {
+            click (listItem) {
+                if (listItem.disabled) {
+                    return;
+                }
+                this.$emit("click", listItem);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .BriCollapseTree {
+        &-listItem {
+            display: flex;
+            justify-content: space-between;
+            padding: 6px 12px;
+            line-height: 20px;
+            cursor: pointer;
+
+            &-text {
+                word-break: break-word;
+                flex: 1;
+                min-width: 120px;
+            }
+
+            &-grey {
+                text-align: right;
+                color: @textColor;
+                margin-left: 0px;
+            }
+
+            &-rightText {
+                min-width: 50px;
+                .dsh-ellipsis2();
+                -webkit-line-clamp: 3;
+                word-break: break-word;
+                color: @contentColor;
+            }
+
+            &:hover {
+                background: @bgColor;
+            }
+
+            &-current {
+                font-weight: normal;
+                color: @themeColor;
+            }
+
+            &-disabled {
+                cursor: not-allowed;
+            }
+        }
+
+        &-collapseItem {
+            padding: 4px 0px;
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+            cursor: pointer;
+
+            &:hover {
+                background: @bgColor;
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .BriCollapseTree {
+        &-collapse {
+            &.ivu-collapse {
+                border: none;
+
+                .ivu-collapse-item > .ivu-collapse-header {
+                    padding: 0px;
+                    height: auto;
+                    min-height: 32px;
+                    line-height: 18px;
+                    display: flex;
+                    align-items: center;
+
+                    i {
+                        margin-right: 0px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 30px;
+                        height: 30px;
+                    }
+
+                    &:hover {
+                        background: @bgColor;
+                    }
+                }
+
+                .ivu-collapse-content {
+                    padding: 0px;
+
+                    & > .ivu-collapse-content-box {
+                        padding: 0px;
+                        padding-left: 18px;
+                    }
+                }
+            }
+        }
+    }
+</style>